movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 16:53: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);
};
const getTimeDisplay = () => {
const getCurrentTime = () => {
if (status?.isLoaded) {
return mapMillisecondsToTime(status.positionMillis ?? 0);
}
};
const getRemainingTime = () => {
if (status?.isLoaded) {
if (showRemaining) {
const remainingTime =
(status.durationMillis ?? 0) - (status.positionMillis ?? 0);
return "-" + mapMillisecondsToTime(remainingTime);
}
return mapMillisecondsToTime(status.durationMillis ?? 0);
}
};
if (status?.isLoaded) {
return (
<Controls>
<View className="flex h-16 w-full flex-row items-center justify-center">
<View className="flex flex-row items-center justify-center px-4 py-2">
<Text className="font-bold">
{mapMillisecondsToTime(status.positionMillis ?? 0)}
</Text>
<ProgressBar />
<View className="flex h-16 w-full flex-col items-center justify-center">
<View className="w-full px-4">
<View className="flex flex-row items-center">
<Text className="font-bold">{getCurrentTime()}</Text>
<Text className="mx-1 font-bold">/</Text>
<TouchableOpacity onPress={toggleTimeDisplay}>
<Text className="font-bold">{getTimeDisplay()}</Text>
<Text className="font-bold">
{showRemaining
? "-" + getRemainingTime()
: mapMillisecondsToTime(status.durationMillis ?? 0)}
</Text>
</TouchableOpacity>
</View>
<View className="py-2">
<ProgressBar />
</View>
</View>
</View>
</Controls>
);