LyricController.ets 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. import { Lyric } from './bean/Lyric'
  2. // default config
  3. const DEFAULT_LINE_SPACE = 16
  4. const DEFAULT_TEXT_SIZE = 18
  5. const DEFAULT_HIGHLIGHT_SCALE = 1.2
  6. const DEFAULT_TEXT_COLOR = "#80000000"
  7. const DEFAULT_HIGHLIGHT_COLOR = "#000000"
  8. const DEFAULT_EDGE_COLOR = "#ffffff"
  9. const DEFAULT_ANIM_DURATION = 300
  10. const DEFAULT_CACHE_SIZE = 4
  11. const DEFAULT_BLUR_DEGREE = 4
  12. /**
  13. * The controller for LyricView.
  14. */
  15. export class LyricController {
  16. private lyric: Lyric | null = null
  17. private textColor: string = DEFAULT_TEXT_COLOR
  18. private blurDegree: number = DEFAULT_BLUR_DEGREE
  19. private textSize: number = DEFAULT_TEXT_SIZE
  20. private highlightColor: string = DEFAULT_HIGHLIGHT_COLOR
  21. private highlightScale: number = DEFAULT_HIGHLIGHT_SCALE
  22. private edgeColor: string = DEFAULT_EDGE_COLOR
  23. private lineSpace: number = DEFAULT_LINE_SPACE
  24. private animDuration: number = DEFAULT_ANIM_DURATION
  25. private cacheSize: number = DEFAULT_CACHE_SIZE
  26. private isBold: boolean = true
  27. private isSingleLine: boolean = false
  28. private emptyHint: string = "--"
  29. private alignMode: "left" | "center" = "center"
  30. private isHightLightCenter: boolean = true
  31. private textWeight: number = FontWeight.Medium
  32. /**
  33. * Listener to observe the lyric data set changed. This is a inner function, do not call this.
  34. */
  35. onDataChangedListener: (lyric: Lyric | null) => void = () => {
  36. }
  37. /**
  38. * Listener to observe the media position changed. This is a inner function, do not call this.
  39. */
  40. onPositionChangedListener: (position: number) => void = () => {
  41. }
  42. /**
  43. * Listener to observe the user config changed. This is a inner function, do not call this.
  44. */
  45. onInvalidated: (reLayout: boolean) => void = () => {
  46. }
  47. /**
  48. * Update the current position of media player to refresh the lyric view.
  49. * @param mediaPosition The current position of media player.
  50. */
  51. updatePosition(mediaPosition: number) {
  52. this.onPositionChangedListener?.(mediaPosition)
  53. }
  54. /**
  55. * Set the lyric datasource.
  56. * @param lyric The lyric datasource.
  57. * @returns LyricConfig
  58. */
  59. setLyric(lyric: Lyric | null): LyricController {
  60. this.lyric = lyric
  61. this.onDataChangedListener(lyric)
  62. return this
  63. }
  64. /**
  65. * Get the lyric datasource.
  66. * @returns The lyric datasource.
  67. */
  68. getLyric(): Lyric | null {
  69. return this.lyric
  70. }
  71. setTextWeight(textWeight: number): LyricController {
  72. this.textWeight = textWeight
  73. this.onInvalidated(false)
  74. return this
  75. }
  76. getTextWeight(): number {
  77. return this.textWeight
  78. }
  79. /**
  80. * Set the color of normal lyric text. The default color is 0xff929292.
  81. * @param color The color of normal lyric text.
  82. * @returns LyricConfig
  83. */
  84. setTextColor(color: string): LyricController {
  85. this.textColor = color
  86. this.onInvalidated(false)
  87. return this
  88. }
  89. /**
  90. * Get the color of normal lyric text.
  91. * @returns The color of normal lyric text.
  92. */
  93. getTextColor(): string {
  94. return this.textColor
  95. }
  96. /**
  97. * Set the text size(vp) of normal lyric. The default size is 48px.
  98. * @param textSize The text size of normal lyric.
  99. * @returns LyricConfig
  100. */
  101. setTextSize(textSize: number): LyricController {
  102. this.textSize = textSize
  103. this.onInvalidated(true)
  104. return this
  105. }
  106. /**
  107. * Get the text size(vp) of normal lyric.
  108. * @returns The text size of normal lyric.
  109. */
  110. getTextSize(): number {
  111. return this.textSize
  112. }
  113. setHightLightCenter(isHightLightCenter: boolean): LyricController {
  114. this.isHightLightCenter = isHightLightCenter
  115. this.onInvalidated(true)
  116. return this
  117. }
  118. getHightLightCenter(): boolean {
  119. return this.isHightLightCenter
  120. }
  121. setBlurDegree(degree: number): LyricController {
  122. this.blurDegree = degree
  123. this.onInvalidated(true)
  124. return this
  125. }
  126. getBlurDegree(): number {
  127. return this.blurDegree
  128. }
  129. /**
  130. * Set the color of focused lyric text. The default color is Black.
  131. * @param color The color of focused lyric text.
  132. * @returns LyricConfig
  133. */
  134. setHighlightColor(color: string): LyricController {
  135. this.highlightColor = color
  136. this.onInvalidated(false)
  137. return this
  138. }
  139. /**
  140. * Get the color of focused lyric text.
  141. * @returns The color of focused lyric text.
  142. */
  143. getHighlightColor(): string {
  144. return this.highlightColor
  145. }
  146. /**
  147. * Set the scale of focused lyric. The default scale is 1.2f.
  148. * @param scale The scale of focused lyric.
  149. * @returns LyricConfig
  150. */
  151. setHighlightScale(scale: number): LyricController {
  152. this.highlightScale = scale
  153. this.onInvalidated(true)
  154. return this
  155. }
  156. /**
  157. * Get the scale of focused lyric.
  158. * @returns The scale of focused lyric.
  159. */
  160. getHighlightScale(): number {
  161. return this.highlightScale
  162. }
  163. /**
  164. * Set is bold or not for the focused lyric. Default is true.
  165. * @param bold True to set text bold style, false to set normal style.
  166. * @returns LyricConfig
  167. */
  168. setHighlightBold(isBold: boolean): LyricController {
  169. this.isBold = isBold
  170. this.onInvalidated(false)
  171. return this
  172. }
  173. getSingleLine(): boolean {
  174. return this.isSingleLine
  175. }
  176. setSingleLine(isSingle: boolean): LyricController {
  177. this.isSingleLine = isSingle
  178. this.onInvalidated(false)
  179. return this
  180. }
  181. /**
  182. * The bold style of focused lyric.
  183. * @returns True to set text bold style, false to set normal style.
  184. */
  185. isHighlightBold(): boolean {
  186. return this.isBold
  187. }
  188. /**
  189. * Set the fade edge color of top and bottom. The default color is White.
  190. * @deprecated since v1.0.2
  191. * @param color The fade edge color of top and bottom.
  192. * @returns LyricConfig
  193. */
  194. setEdgeColor(color: string): LyricController {
  195. this.edgeColor = color
  196. this.onInvalidated(false)
  197. return this
  198. }
  199. /**
  200. * Get the fade edge color of top and bottom.
  201. * @deprecated since v1.0.2
  202. * @returns The fade edge color of top and bottom.
  203. */
  204. getEdgeColor(): string {
  205. return this.edgeColor
  206. }
  207. /**
  208. * Set the line space(vp) between two lyric lines. The default line space is 16px.
  209. * @param lineSpace The line space between two lyric lines.
  210. * @returns LyricConfig
  211. */
  212. setLineSpace(lineSpace: number): LyricController {
  213. this.lineSpace = lineSpace
  214. this.onInvalidated(true)
  215. return this
  216. }
  217. /**
  218. * Get the line space between two lyric lines.
  219. * @returns The line space between two lyric lines.
  220. */
  221. getLineSpace(): number {
  222. return this.lineSpace
  223. }
  224. /**
  225. * Set the duration of translate animation. The default duration is 500ms.
  226. * @param duration The duration of translate animation.
  227. * @returns LyricConfig
  228. */
  229. setAnimationDuration(duration: number): LyricController {
  230. this.animDuration = duration
  231. return this
  232. }
  233. /**
  234. * Get the duration of translate animation.
  235. * @returns The duration of translate animation.
  236. */
  237. getAnimationDuration(): number {
  238. return this.animDuration
  239. }
  240. /**
  241. * Set the size of lyric lines to draw out of top and bottom, the result is min of cacheSize and the lyric lines.
  242. * The default cache size is 2.
  243. * @param cacheSize The size of lyric lines to draw out of top and bottom.
  244. * @returns LyricConfig
  245. */
  246. setCacheSize(cacheSize: number): LyricController {
  247. this.cacheSize = cacheSize
  248. this.onInvalidated(false)
  249. return this
  250. }
  251. /**
  252. * Get the size of lyric lines to draw out of top and bottom.
  253. * @returns The size of lyric lines to draw out of top and bottom.
  254. */
  255. getCacheSize(): number {
  256. return this.cacheSize
  257. }
  258. /**
  259. * Set the hint text when is no lyric to display.
  260. * @param hint The hint text when is no lyric to display.
  261. * @returns LyricConfig
  262. */
  263. setEmptyHint(hint: string): LyricController {
  264. this.emptyHint = hint
  265. this.onInvalidated(false)
  266. return this
  267. }
  268. /**
  269. * Get the hint text when is no lyric to display.
  270. * @returns The hint text when is no lyric to display.
  271. */
  272. getEmptyHint(): string {
  273. return this.emptyHint
  274. }
  275. /**
  276. * Set the alignment of the lyric text to display from.
  277. * @param align The value is "left" | "center", default is "left".
  278. * @returns LyricConfig
  279. */
  280. setAlignMode(align: "left" | "center"): LyricController {
  281. this.alignMode = align
  282. this.onInvalidated(true)
  283. return this
  284. }
  285. /**
  286. * Get the alignment of the lyric text to display from.
  287. * @returns The value is "left" | "center".
  288. */
  289. getAlignMode(): "left" | "center" {
  290. return this.alignMode
  291. }
  292. /**
  293. * Invalidate the ui by user, this will not reLayout, just do draw.
  294. */
  295. invalidate() {
  296. this.onInvalidated(false)
  297. }
  298. }