javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show past lyrics in grey

Browse Source
This commit is contained in:
Lei Nelissen
2024-10-25 00:27:37 +02:00
parent 77db5a51d2
commit b03d449a1b
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/screens/modals/Lyrics/components/LyricsLine.tsx
View File

@@ -41,6 +41,7 @@ function LyricsLine({
const active = useMemo(() => ( const active = useMemo(() => (
position > start && position < end position > start && position < end
), [start, end, position]); ), [start, end, position]);
const past = useMemo(() => position > end, [end, position]);
// Call the parent when the active state changes // Call the parent when the active state changes
useEffect(() => { useEffect(() => {
@@ -50,10 +51,10 @@ function LyricsLine({
// Determine the current style for this line // Determine the current style for this line
const lyricsTextStyle: StyleProp<TextStyle> = useMemo(() => ({ const lyricsTextStyle: StyleProp<TextStyle> = useMemo(() => ({
color: active ? defaultStyles.themeColor.color : defaultStyles.text.color, color: active ? defaultStyles.themeColor.color : defaultStyles.text.color,
opacity: active ? 1 : 0.7, opacity: active ? 1 : (past ? 0.25 : 0.7),
transformOrigin: 'left center', transformOrigin: 'left center',
fontSize: size === 'full' ? 24 : 18, fontSize: size === 'full' ? 24 : 18,
}), [active, defaultStyles, size]); }), [active, defaultStyles, size, past]);
const scale = useDerivedValue(() => withTiming(active ? 1.05 : 1)); const scale = useDerivedValue(() => withTiming(active ? 1.05 : 1));
const animatedStyle = useAnimatedStyle(() => ({ const animatedStyle = useAnimatedStyle(() => ({