feat: support lyrics translation

Author: zeevenn

apps/mobile/modules/player/LyricsView.tsx

@@ -2,7 +2,7 @@ import type { LyricLine } from '@flow/player'
 import { findLyricLine, parseLyrics, useDisplayTrack, usePlaybackStore } from '@flow/player'
 import { FlashList } from '@shopify/flash-list'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { Text, useTheme } from 'react-native-paper'
 
 export default function LyricsView({ mode = 'mini' }: { mode?: 'mini' | 'full' }) {
@@ -38,18 +38,36 @@ export default function LyricsView({ mode = 'mini' }: { mode?: 'mini' | 'full' }
     const isMiniMode = mode === 'mini'
 
     return (
-      <Text
-        style={[
-          isMiniMode ? styles.miniLyricLine : styles.fullLyricLine,
-          { color: colors.onSurface },
-          isActive && (isMiniMode ? styles.miniActiveLyricLine : styles.fullActiveLyricLine),
-          isActive && { color: colors.primary },
-        ]}
-      >
-        {line.text}
-      </Text>
+      <View style={isMiniMode ? styles.miniLyricContainer : styles.fullLyricContainer}>
+        {/* 原文歌词 */}
+        {line.originalText && (
+          <Text
+            style={[
+              isMiniMode ? styles.miniOriginalText : styles.fullOriginalText,
+              { color: colors.onSurface },
+              isActive && (isMiniMode ? styles.miniActiveOriginalText : styles.fullActiveOriginalText),
+              isActive && { color: colors.primary },
+            ]}
+          >
+            {line.originalText}
+          </Text>
+        )}
+
+        {line.translation && (
+          <Text
+            style={[
+              isMiniMode ? styles.miniTranslationText : styles.fullTranslationText,
+              { color: colors.onSurfaceVariant },
+              isActive && (isMiniMode ? styles.miniActiveTranslationText : styles.fullActiveTranslationText),
+              isActive && { color: colors.primary },
+            ]}
+          >
+            {line.translation}
+          </Text>
+        )}
+      </View>
     )
-  }, [activeLyricLineIndex, colors.primary, colors.onSurface, mode])
+  }, [activeLyricLineIndex, colors.primary, colors.onSurface, colors.onSurfaceVariant, mode])
 
   const containerStyle = mode === 'mini' ? styles.miniContentContainer : styles.fullContentContainer
   const estimatedSize = mode === 'mini' ? 20 : 30
@@ -75,37 +93,66 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     paddingVertical: 16,
   },
-  miniLyricLine: {
+  miniLyricContainer: {
+    marginVertical: 6,
+  },
+  miniOriginalText: {
     fontSize: 14,
     lineHeight: 18,
-    marginVertical: 6,
     fontWeight: '400',
-    opacity: 0.6,
-    textAlign: 'left',
+    opacity: 0.8,
   },
-  miniActiveLyricLine: {
-    fontSize: 16,
-    lineHeight: 20,
+  miniActiveOriginalText: {
+    fontSize: 15,
+    lineHeight: 19,
     fontWeight: '500',
     opacity: 1,
   },
+  miniTranslationText: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+    opacity: 0.6,
+    marginTop: 2,
+  },
+  miniActiveTranslationText: {
+    fontSize: 13,
+    lineHeight: 17,
+    fontWeight: '500',
+    opacity: 0.8,
+  },
 
-  // full
+  // full 模式容器
   fullContentContainer: {
     paddingHorizontal: 32,
     paddingVertical: 40,
   },
-  fullLyricLine: {
+  fullLyricContainer: {
+    marginVertical: 12,
+  },
+  fullOriginalText: {
     fontSize: 18,
     lineHeight: 24,
-    marginVertical: 16,
     fontWeight: '500',
-    opacity: 0.7,
+    opacity: 0.8,
   },
-  fullActiveLyricLine: {
-    fontSize: 22,
-    lineHeight: 28,
+  fullActiveOriginalText: {
+    fontSize: 20,
+    lineHeight: 26,
     fontWeight: '600',
     opacity: 1,
   },
+  fullTranslationText: {
+    fontSize: 14,
+    lineHeight: 18,
+    fontWeight: '400',
+    opacity: 0.6,
+    marginTop: 4,
+  },
+  fullActiveTranslationText: {
+    fontSize: 16,
+    lineHeight: 20,
+    fontWeight: '500',
+    opacity: 0.8,
+  },
 })

packages/player/src/utils/parseLyrics.ts

@@ -2,17 +2,84 @@ import { parseLyricTime } from '@flow/core'
 
 export interface LyricLine {
   time: string
-  text: string
+  originalText: string
+  translation?: string
 }
 
 export function parseLyrics(lyrics: string): LyricLine[] {
-  return lyrics.split('\n').filter(line => line.trim() !== '').map((line) => {
-    const [time, text] = line.split(']')
-    if (time && text) {
-      return { time: time.slice(1).trim(), text: text.trim() }
+  if (!lyrics.trim()) {
+    return []
+  }
+
+  const lines = lyrics.split('\n').filter(line => line.trim() !== '')
+  const timeRegex = /^\[(\d{2}:\d{2}\.\d{3})\]/
+
+  // find start of translation
+  const translationStartIndex = lines.findIndex(line =>
+    line.includes('[by:') || line.includes('[offset:') || line.includes('[ar:') || line.includes('[ti:'),
+  )
+
+  let originalLines: string[]
+  let translatedLines: string[] = []
+
+  if (translationStartIndex !== -1) {
+    // found translation marker, separate original and translation
+    originalLines = lines.slice(0, translationStartIndex)
+
+    // skip marker line, get translation content
+    const afterMarker = lines.slice(translationStartIndex + 1)
+    translatedLines = afterMarker.filter(line => timeRegex.test(line))
+  }
+  else {
+    // no translation marker, only original lyrics
+    originalLines = lines.filter(line => timeRegex.test(line))
+  }
+
+  // parse original lyrics
+  const originalMap = new Map<string, string>()
+  for (const line of originalLines) {
+    const match = line.match(timeRegex)
+    if (match && match[1]) {
+      const time = match[1]
+      const text = line.slice(match[0].length).trim()
+      if (text) {
+        originalMap.set(time, text)
+      }
     }
-    return { time: '', text: '' }
-  }).filter(line => line.time !== '')
+  }
+
+  // parse translation lyrics
+  const translationMap = new Map<string, string>()
+  for (const line of translatedLines) {
+    const match = line.match(timeRegex)
+    if (match && match[1]) {
+      const time = match[1]
+      const text = line.slice(match[0].length).trim()
+      if (text) {
+        translationMap.set(time, text)
+      }
+    }
+  }
+
+  // merge original and translation, sort by time
+  const result: LyricLine[] = []
+  const allTimes = Array.from(new Set([...originalMap.keys(), ...translationMap.keys()]))
+    .sort((a, b) => parseLyricTime(a) - parseLyricTime(b))
+
+  for (const time of allTimes) {
+    const originalText = originalMap.get(time)
+    const translation = translationMap.get(time)
+
+    if (originalText || translation) {
+      result.push({
+        time,
+        originalText: originalText || '',
+        translation: translation || undefined,
+      })
+    }
+  }
+
+  return result
 }
 
 /**