movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 18:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make time display more efficient

Browse Source
This commit is contained in:
Adrian Castro
2024-02-20 17:23:42 +01:00
parent d42de8cb12
commit 5b465f81f7
1 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/expo/src/components/player/BottomControls.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { TouchableOpacity, View } from "react-native"; import { TouchableOpacity, View } from "react-native";
import { usePlayerStore } from "~/stores/player/store"; import { usePlayerStore } from "~/stores/player/store";
@@ -15,37 +15,41 @@ export const BottomControls = () => {
const setIsIdle = usePlayerStore((state) => state.setIsIdle); const setIsIdle = usePlayerStore((state) => state.setIsIdle);
const [showRemaining, setShowRemaining] = useState(false); const [showRemaining, setShowRemaining] = useState(false);
const toggleTimeDisplay = () => { const toggleTimeDisplay = useCallback(() => {
setIsIdle(false); setIsIdle(false);
setShowRemaining(!showRemaining); setShowRemaining(!showRemaining);
}; }, [showRemaining, setIsIdle]);
const getCurrentTime = () => { const { currentTime, remainingTime } = useMemo(() => {
if (status?.isLoaded) { if (status?.isLoaded) {
return mapMillisecondsToTime(status.positionMillis ?? 0); const current = mapMillisecondsToTime(status.positionMillis ?? 0);
const remaining =
"-" +
mapMillisecondsToTime(
(status.durationMillis ?? 0) - (status.positionMillis ?? 0),
);
return { currentTime: current, remainingTime: remaining };
} else {
return { currentTime: "", remainingTime: "" };
} }
}; }, [status]);
const getRemainingTime = () => { const durationTime = useMemo(() => {
if (status?.isLoaded) { if (status?.isLoaded) {
const remainingTime = return mapMillisecondsToTime(status.durationMillis ?? 0);
(status.durationMillis ?? 0) - (status.positionMillis ?? 0);
return "-" + mapMillisecondsToTime(remainingTime);
} }
}; }, [status]);
if (status?.isLoaded) { if (status?.isLoaded) {
return ( return (
<View className="flex h-32 w-full flex-col items-center justify-center p-6"> <View className="flex h-32 w-full flex-col items-center justify-center p-6">
<Controls> <Controls>
<View className="flex w-full flex-row items-center"> <View className="flex w-full flex-row items-center">
<Text className="font-bold">{getCurrentTime()}</Text> <Text className="font-bold">{currentTime}</Text>
<Text className="mx-1 font-bold">/</Text> <Text className="mx-1 font-bold">/</Text>
<TouchableOpacity onPress={toggleTimeDisplay}> <TouchableOpacity onPress={toggleTimeDisplay}>
<Text className="font-bold"> <Text className="font-bold">
{showRemaining {showRemaining ? remainingTime : durationTime}
? getRemainingTime()
: mapMillisecondsToTime(status.durationMillis ?? 0)}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>