LyricController.ets 10 KB

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