From f7e04dfa2d9c2c276d760c0d68de458345b3cf2a Mon Sep 17 00:00:00 2001 From: Fredrik Burmester Date: Fri, 13 Sep 2024 13:19:29 +0300 Subject: [PATCH] wip --- components/CurrentlyPlayingBar.tsx | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/components/CurrentlyPlayingBar.tsx b/components/CurrentlyPlayingBar.tsx index 8412645c..85c05e9d 100644 --- a/components/CurrentlyPlayingBar.tsx +++ b/components/CurrentlyPlayingBar.tsx @@ -7,7 +7,7 @@ import { Ionicons } from "@expo/vector-icons"; import { BlurView } from "expo-blur"; import { useRouter, useSegments } from "expo-router"; import { useAtom } from "jotai"; -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { Alert, Platform, TouchableOpacity, View } from "react-native"; import Animated, { useAnimatedStyle, @@ -47,6 +47,8 @@ export const CurrentlyPlayingBar: React.FC = () => { const screenHeight = Dimensions.get("window").height; const screenWiidth = Dimensions.get("window").width; + const from = useMemo(() => segments[2], [segments]); + const backgroundValues = useSharedValue({ bottom: 70, height: 80, @@ -176,6 +178,12 @@ export const CurrentlyPlayingBar: React.FC = () => { width: screenWiidth, left: 0, }; + textValues.value = { + bottom: 78, + height: 64, + left: 16, + width: 140, + }; } else { backgroundValues.value = { bottom: 70, @@ -207,6 +215,7 @@ export const CurrentlyPlayingBar: React.FC = () => { const progress = useSharedValue(0); const min = useSharedValue(0); const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0); + const sliding = useRef(false); useEffect(() => { max.value = currentlyPlaying?.item.RunTimeTicks || 0; @@ -324,7 +333,9 @@ export const CurrentlyPlayingBar: React.FC = () => { thread: true, }} onProgress={(e) => { + if (sliding.current === true) return; onProgress(e); + progress.value = e.currentTime * 10000000; }} subtitleStyle={{ fontSize: 16, @@ -384,10 +395,16 @@ export const CurrentlyPlayingBar: React.FC = () => { bubbleTextColor: "#000", heartbeatColor: "#999", }} + onSlidingStart={() => { + sliding.current = true; + }} onSlidingComplete={(val) => { const tick = Math.floor(val); - console.log(tick); - videoRef.current?.seek(tick); + videoRef.current?.seek(tick / 10000000); + sliding.current = false; + }} + onValueChange={(val) => { + const tick = Math.floor(val); progress.value = tick; }} containerStyle={{