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

feat: move duration above progress bar

Browse Source
This commit is contained in:
Adrian Castro
2024-02-16 11:36:59 +01:00
parent a991882484
commit eaeb535208
1 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,30 +15,41 @@ export const BottomControls = () => {
setShowRemaining(!showRemaining); setShowRemaining(!showRemaining);
}; };
const getTimeDisplay = () => { const getCurrentTime = () => {
if (status?.isLoaded) {
return mapMillisecondsToTime(status.positionMillis ?? 0);
}
};
const getRemainingTime = () => {
if (status?.isLoaded) { if (status?.isLoaded) {
if (showRemaining) {
const remainingTime = const remainingTime =
(status.durationMillis ?? 0) - (status.positionMillis ?? 0); (status.durationMillis ?? 0) - (status.positionMillis ?? 0);
return "-" + mapMillisecondsToTime(remainingTime); return "-" + mapMillisecondsToTime(remainingTime);
} }
return mapMillisecondsToTime(status.durationMillis ?? 0);
}
}; };
if (status?.isLoaded) { if (status?.isLoaded) {
return ( return (
<Controls> <Controls>
<View className="flex h-16 w-full flex-row items-center justify-center"> <View className="flex h-16 w-full flex-col items-center justify-center">
<View className="flex flex-row items-center justify-center px-4 py-2"> <View className="w-full px-4">
<Text className="font-bold"> <View className="flex flex-row items-center">
{mapMillisecondsToTime(status.positionMillis ?? 0)} <Text className="font-bold">{getCurrentTime()}</Text>
</Text> <Text className="mx-1 font-bold">/</Text>
<ProgressBar />
<TouchableOpacity onPress={toggleTimeDisplay}> <TouchableOpacity onPress={toggleTimeDisplay}>
<Text className="font-bold">{getTimeDisplay()}</Text> <Text className="font-bold">
{showRemaining
? "-" + getRemainingTime()
: mapMillisecondsToTime(status.durationMillis ?? 0)}
</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View className="py-2">
<ProgressBar />
</View>
</View>
</View> </View>
</Controls> </Controls>
); );