playback web

This commit is contained in:
2025-10-02 11:08:42 +02:00
parent f78dc64ec9
commit 11adfa3e21
5 changed files with 1073 additions and 507 deletions
+65 -60
View File
@@ -361,6 +361,7 @@ const MusicDetails = ({ route }) => {
padding: 10,
borderWidth: 1,
borderColor: Palette.transparentWhite,
maxWidth: "50%",
}}
>
<View>
@@ -500,69 +501,73 @@ const MusicDetails = ({ route }) => {
</View>
</BlurView>
{/* Right column: lyrics */}
<BlurView
intensity={1}
style={{
flex: 1,
paddingLeft: 8,
padding: 10,
borderWidth: 1,
borderColor: Palette.transparentWhite,
borderRadius: 12,
height: 400,
}}
>
{lines?.length ? (
<ScrollView
ref={lyricsRef}
style={{ flex: 1 }}
contentContainerStyle={{ paddingBottom: 40, height: 400 }}
>
{lines.map((L, i) => (
<View
key={`line-${i}`}
onLayout={(e) => {
lineYRef.current[i] = e.nativeEvent.layout.y;
}}
{lines.length > 0 && (
<BlurView
intensity={1}
style={{
flex: 1,
paddingLeft: 8,
padding: 10,
borderWidth: 1,
borderColor: Palette.transparentWhite,
borderRadius: 12,
height: 400,
maxWidth: "50%",
}}
>
{lines?.length ? (
<ScrollView
ref={lyricsRef}
style={{ flex: 1 }}
contentContainerStyle={{ paddingBottom: 40, height: 400 }}
>
{lines.map((L, i) => (
<View
key={`line-${i}`}
onLayout={(e) => {
lineYRef.current[i] = e.nativeEvent.layout.y;
}}
style={{
marginBottom: 8,
flexDirection: "row",
flexWrap: "wrap",
}}
>
{(L.words || []).map((w, j) => (
<Text
key={`w-${i}-${j}`}
style={
visibleTimeS >= (w.startS || 0)
? styles.karaokeWordActive
: styles.karaokeWord
}
>
{w.text}
{j < (L.words?.length || 1) - 1 ? " " : ""}
</Text>
))}
</View>
))}
</ScrollView>
) : description?.length > 0 ? (
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ paddingBottom: 40 }}
>
<Text
style={{
marginBottom: 8,
flexDirection: "row",
flexWrap: "wrap",
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
{(L.words || []).map((w, j) => (
<Text
key={`w-${i}-${j}`}
style={
visibleTimeS >= (w.startS || 0)
? styles.karaokeWordActive
: styles.karaokeWord
}
>
{w.text}
{j < (L.words?.length || 1) - 1 ? " " : ""}
</Text>
))}
</View>
))}
</ScrollView>
) : description?.length > 0 ? (
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ paddingBottom: 40 }}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
{description}
</Text>
</ScrollView>
) : null}
</BlurView>
{description}
</Text>
</ScrollView>
) : null}
</BlurView>
)}
</View>
</Page>
);