41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
import { BlurView } from 'expo-blur'
|
|
import React from 'react'
|
|
import { Platform, StyleSheet, Text, View } from 'react-native'
|
|
import KaraokeLyrics from '../../../components/KaraokeLyrics'
|
|
import { Palette } from '../../../styles'
|
|
import { FONT_FAMILY } from '../../../styles/Fonts'
|
|
|
|
const PlaybackLyricsCard = ({ alignedWords, currentTimeS, fallbackTitle }) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<BlurView tint="dark" intensity={Platform.OS !== 'ios' ? 10 : 20} style={styles.blur}>
|
|
{alignedWords?.length > 0 ? (
|
|
<KaraokeLyrics alignedWords={alignedWords} currentTimeS={currentTimeS} />
|
|
) : (
|
|
<Text style={styles.title}>{fallbackTitle || 'Description chanson'}</Text>
|
|
)}
|
|
</BlurView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
paddingHorizontal: 28,
|
|
},
|
|
blur: {
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 8,
|
|
borderRadius: 20,
|
|
backgroundColor: Palette.glass,
|
|
overflow: 'hidden',
|
|
},
|
|
title: {
|
|
fontSize: 12,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
},
|
|
})
|
|
|
|
export default PlaybackLyricsCard
|