fix scrolling on video screen, make header part of video controls

OwnTube-tv · Jun 28, 2024 · f21b4ec · f21b4ec
1 parent 23f8704
commit f21b4ec
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 27 deletions.
diff --git a/OwnTube.tv/app/(home)/video.tsx b/OwnTube.tv/app/(home)/video.tsx
@@ -1,21 +1,13 @@
 import { VideoScreen } from "../../screens";
 import Head from "expo-router/head";
 import { useGetVideoQuery } from "../../api";
-import { useLocalSearchParams, useNavigation } from "expo-router";
-import { useEffect } from "react";
+import { useLocalSearchParams } from "expo-router";
 import { RootStackParams } from "../_layout";
 
 export default function video() {
-  const navigation = useNavigation();
   const { id } = useLocalSearchParams<RootStackParams["video"]>();
   const { data: title } = useGetVideoQuery(id, (data) => data.name);
 
-  useEffect(() => {
-    if (title) {
-      navigation.setOptions({ title });
-    }
-  }, [title]);
-
   return (
     <>
       <Head>

diff --git a/OwnTube.tv/app/_layout.tsx b/OwnTube.tv/app/_layout.tsx
@@ -8,7 +8,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { useFonts } from "expo-font";
 import Toast from "react-native-toast-message";
-import { BuildInfoToast, ClickableHeaderText, DeviceCapabilitiesModal } from "../components";
+import { BuildInfoToast, ClickableHeaderText } from "../components";
 
 const RootStack = () => {
   const { backend } = useLocalSearchParams();
@@ -43,10 +43,7 @@ const RootStack = () => {
           }}
           name={`(home)/${ROUTES.SETTINGS}`}
         />
-        <Stack.Screen
-          options={{ title: "Video", headerRight: () => <DeviceCapabilitiesModal /> }}
-          name={`(home)/video`}
-        />
+        <Stack.Screen options={{ title: "Video", headerShown: false }} name={`(home)/video`} />
       </Stack>
       <Toast config={{ buildInfo: () => <BuildInfoToast /> }} />
     </ThemeProvider>

diff --git a/OwnTube.tv/components/VideoControlsOverlay/VideoControlsOverlay.tsx b/OwnTube.tv/components/VideoControlsOverlay/VideoControlsOverlay.tsx
@@ -6,6 +6,8 @@ import { ScrubBar } from "./components/ScrubBar";
 import { Typography } from "../Typography";
 import { getHumanReadableDuration } from "../../utils";
 import { typography } from "../../theme";
+import { useNavigation } from "expo-router";
+import { DeviceCapabilitiesModal } from "../DeviceCapabilitiesModal";
 
 interface VideoControlsOverlayProps {
   isVisible: boolean;
@@ -22,6 +24,7 @@ interface VideoControlsOverlayProps {
   shouldReplay?: boolean;
   handleReplay: () => void;
   handleJumpTo: (position: number) => void;
+  title?: string;
 }
 
 export const VideoControlsOverlay = ({
@@ -40,8 +43,10 @@ export const VideoControlsOverlay = ({
   shouldReplay,
   handleReplay,
   handleJumpTo,
+  title,
 }: PropsWithChildren<VideoControlsOverlayProps>) => {
   const { colors } = useTheme();
+  const navigation = useNavigation();
 
   const uiScale = useMemo(() => {
     const { width, height } = Dimensions.get("window");
@@ -66,15 +71,32 @@ export const VideoControlsOverlay = ({
       {isVisible ? (
         <View style={styles.contentContainer}>
           <View style={styles.topControlsContainer}>
-            <Pressable onPress={toggleMute}>
-              <Ionicons name={`volume-${isMute ? "mute" : "high"}`} size={48 * uiScale} color={colors.primary} />
-            </Pressable>
+            <View style={styles.topLeftControls}>
+              <Pressable onPress={navigation.goBack} style={styles.goBackContainer}>
+                <Ionicons name={"arrow-back"} size={48 * uiScale} color={colors.primary} />
+              </Pressable>
+              <Typography
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                color={colors.primary}
+                fontSize={48 * uiScale}
+                style={styles.title}
+              >
+                {title}
+              </Typography>
+            </View>
+            <View style={styles.topRightControls}>
+              <Pressable onPress={toggleMute}>
+                <Ionicons name={`volume-${isMute ? "mute" : "high"}`} size={48 * uiScale} color={colors.primary} />
+              </Pressable>
+              <DeviceCapabilitiesModal />
+            </View>
           </View>
           <View style={styles.playbackControlsContainer}>
-            <View style={{ flexDirection: "row", gap: 48 * uiScale }}>
+            <View style={{ flexDirection: "row", gap: 32 * uiScale }}>
               <Pressable onPress={() => handleRW(15)}>
                 <View style={styles.skipTextContainer}>
-                  <Typography color={colors.primary} fontSize={32} style={styles.skipText}>
+                  <Typography color={colors.primary} fontSize={32 * uiScale} style={styles.skipText}>
                     {15}
                   </Typography>
                 </View>
@@ -85,7 +107,7 @@ export const VideoControlsOverlay = ({
               </Pressable>
               <Pressable onPress={() => handleFF(30)}>
                 <View style={styles.skipTextContainer}>
-                  <Typography color={colors.primary} fontSize={32} style={styles.skipText}>
+                  <Typography color={colors.primary} fontSize={32 * uiScale} style={styles.skipText}>
                     {30}
                   </Typography>
                 </View>
@@ -126,6 +148,7 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   contentContainer: { flex: 1, height: "100%", left: 0, position: "absolute", top: 0, width: "100%", zIndex: 1 },
+  goBackContainer: { justifyContent: "center" },
   overlay: {
     alignItems: "center",
     alignSelf: "center",
@@ -168,16 +191,19 @@ const styles = StyleSheet.create({
     right: "3%",
     userSelect: "none",
   },
+  title: { fontWeight: "bold" },
   topControlsContainer: {
     alignItems: "center",
     flexDirection: "row",
     height: "20%",
-    justifyContent: "flex-end",
+    justifyContent: "space-between",
     left: 0,
-    paddingRight: "5%",
+    paddingHorizontal: "5%",
     position: "absolute",
     top: 0,
     width: "100%",
     zIndex: 1,
   },
+  topLeftControls: { flexDirection: "row", gap: 24, width: "80%" },
+  topRightControls: { alignItems: "center", flexDirection: "row", gap: 24, width: "10%" },
 });
diff --git a/OwnTube.tv/components/VideoView/VideoView.tsx b/OwnTube.tv/components/VideoView/VideoView.tsx
@@ -10,9 +10,10 @@ export interface VideoViewProps {
   testID: string;
   handleSetTimeStamp: (timestamp: number) => void;
   timestamp?: string;
+  title?: string;
 }
 
-const VideoView = ({ uri, testID, handleSetTimeStamp, timestamp }: VideoViewProps) => {
+const VideoView = ({ uri, testID, handleSetTimeStamp, timestamp, title }: VideoViewProps) => {
   const videoRef = useRef<Video>(null);
   const [isControlsVisible, setIsControlsVisible] = useState(false);
   const [playbackStatus, setPlaybackStatus] = useState<AVPlaybackStatusSuccess | null>(null);
@@ -90,6 +91,7 @@ const VideoView = ({ uri, testID, handleSetTimeStamp, timestamp }: VideoViewProp
         shouldReplay={playbackStatus?.didJustFinish}
         handleReplay={handleReplay}
         handleJumpTo={handleJumpTo}
+        title={title}
       >
         <Video
           testID={`${testID}-video-playback`}

diff --git a/OwnTube.tv/components/VideoView/VideoView.web.tsx b/OwnTube.tv/components/VideoView/VideoView.web.tsx
@@ -11,7 +11,7 @@ declare const window: {
   videojs: typeof videojs;
 } & Window;
 
-const VideoView = ({ uri, testID, handleSetTimeStamp, timestamp }: VideoViewProps) => {
+const VideoView = ({ uri, testID, handleSetTimeStamp, timestamp, title }: VideoViewProps) => {
   const { videojs } = window;
   const videoRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<Player | null>(null);
@@ -153,6 +153,27 @@ const VideoView = ({ uri, testID, handleSetTimeStamp, timestamp }: VideoViewProp
     handleSetTimeStamp(positionFormatted);
   }, [playbackStatus.position]);
 
+  useEffect(() => {
+    const handleKeyboard = (e: KeyboardEvent) => {
+      if (e.code === "Space") {
+        handlePlayPause();
+      }
+      if (e.code === "ArrowRight") {
+        handleFF(30);
+      }
+      if (e.code === "ArrowLeft") {
+        handleRW(15);
+      }
+      if (e.code === "KeyM") {
+        toggleMute();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyboard);
+
+    return () => window.removeEventListener("keydown", handleKeyboard);
+  }, [handleFF, handleRW, handlePlayPause, toggleMute]);
+
   return (
     <View style={styles.container}>
       <VideoControlsOverlay
@@ -170,6 +191,7 @@ const VideoView = ({ uri, testID, handleSetTimeStamp, timestamp }: VideoViewProp
         shouldReplay={playbackStatus?.didJustFinish}
         handleReplay={handleReplay}
         handleJumpTo={handleJumpTo}
+        title={title}
       >
         <div style={{ position: "relative" }} ref={videoRef} data-testid={`${testID}-video-playback`} />
       </VideoControlsOverlay>

diff --git a/OwnTube.tv/components/VideoView/styles.web.css b/OwnTube.tv/components/VideoView/styles.web.css
@@ -7,10 +7,11 @@
 }
 
 video {
-  width: 100vw;
+  position: fixed;
+  width: 100%;
   max-width: 100%;
-  height: 100vh;
-  max-height: 100%;
+  height: 100%;
   object-fit: contain;
   z-index: -1;
+  pointer-events: none;
 }
diff --git a/OwnTube.tv/screens/VideoScreen/index.tsx b/OwnTube.tv/screens/VideoScreen/index.tsx
@@ -69,6 +69,7 @@ export const VideoScreen = () => {
       handleSetTimeStamp={handleSetTimeStamp}
       testID={`${params.id}-video-view`}
       uri={uri}
+      title={data?.name}
     />
   );
 };