playback web
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user