Merge pull request #113 from mykhailodanilenko/feature/mobile-fixes-e…

…xpo-deployment Fix mobile video playback, fix portrait video controls; remove router patch
OwnTube-tv · Jul 25, 2024 · 2083ac1 · 2083ac1
2 parents 38608c1 + 69880ea
commit 2083ac1
Show file tree

Hide file tree

Showing 10 changed files with 641 additions and 336 deletions.
diff --git a/OwnTube.tv/app/(home)/index.tsx b/OwnTube.tv/app/(home)/index.tsx
@@ -7,7 +7,7 @@ import Head from "expo-router/head";
 import { HomeScreen } from "../../screens";
 import { Feather } from "@expo/vector-icons";
 import { useTheme } from "@react-navigation/native";
-import { StyleSheet, View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
 import { useRecentInstances } from "../../hooks";
 import { RootStackParams } from "../_layout";
 import { useTranslation } from "react-i18next";
@@ -70,12 +70,17 @@ export default function index() {
 
   return (
     <>
-      <Head>
-        <title>
-          {t("appName")}@{backend || ""}
-        </title>
-        <meta name="description" content="OwnTube.tv homepage" />
-      </Head>
+      {Platform.select({
+        default: null,
+        web: (
+          <Head>
+            <title>
+              {t("appName")}@{backend || ""}
+            </title>
+            <meta name="description" content="OwnTube.tv homepage" />
+          </Head>
+        ),
+      })}
       {!!backend && <HomeScreen />}
     </>
   );

diff --git a/OwnTube.tv/app/(home)/settings.tsx b/OwnTube.tv/app/(home)/settings.tsx
@@ -1,16 +1,22 @@
 import { SettingsScreen } from "../../screens";
 import Head from "expo-router/head";
 import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
 
 export default function settings() {
   const { t } = useTranslation();
 
   return (
     <>
-      <Head>
-        <title>{t("settingsPageTitle")}</title>
-        <meta name="description" content={`${t("appName")} ${t("settingsPageTitle").toLowerCase()}`} />
-      </Head>
+      {Platform.select({
+        default: null,
+        web: (
+          <Head>
+            <title>{t("settingsPageTitle")}</title>
+            <meta name="description" content={`${t("appName")} ${t("settingsPageTitle").toLowerCase()}`} />
+          </Head>
+        ),
+      })}
       <SettingsScreen />
     </>
   );

diff --git a/OwnTube.tv/app/(home)/video.tsx b/OwnTube.tv/app/(home)/video.tsx
@@ -4,6 +4,7 @@ import { useGetVideoQuery } from "../../api";
 import { useLocalSearchParams } from "expo-router";
 import { RootStackParams } from "../_layout";
 import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
 
 export default function video() {
   const { id } = useLocalSearchParams<RootStackParams["video"]>();
@@ -12,10 +13,15 @@ export default function video() {
 
   return (
     <>
-      <Head>
-        <title>{title}</title>
-        <meta name="description" content={t("viewVideo")} />
-      </Head>
+      {Platform.select({
+        default: null,
+        web: (
+          <Head>
+            <title>{title}</title>
+            <meta name="description" content={t("viewVideo")} />
+          </Head>
+        ),
+      })}
       <VideoScreen />
     </>
   );

diff --git a/OwnTube.tv/components/VideoControlsOverlay/VideoControlsOverlay.tsx b/OwnTube.tv/components/VideoControlsOverlay/VideoControlsOverlay.tsx
@@ -192,7 +192,7 @@ const styles = StyleSheet.create({
     right: "3%",
     userSelect: "none",
   },
-  title: { fontWeight: "bold" },
+  title: { fontWeight: "bold", maxWidth: "78%" },
   topControlsContainer: {
     alignItems: "center",
     flexDirection: "row",
@@ -206,5 +206,5 @@ const styles = StyleSheet.create({
     zIndex: 1,
   },
   topLeftControls: { flexDirection: "row", gap: 24, width: "80%" },
-  topRightControls: { alignItems: "center", flexDirection: "row", gap: 24, width: "10%" },
+  topRightControls: { alignItems: "center", flexDirection: "row", gap: 24, justifyContent: "flex-end", width: "20%" },
 });
diff --git a/OwnTube.tv/components/VideoControlsOverlay/components/ScrubBar.tsx b/OwnTube.tv/components/VideoControlsOverlay/components/ScrubBar.tsx
@@ -154,7 +154,7 @@ const styles = StyleSheet.create({
     borderRightWidth: 1,
     flexDirection: "row",
     height: 5,
-    width: "100%",
+    width: "95%",
   },
   scrubBarHitSlop: {
     alignItems: "center",

diff --git a/OwnTube.tv/components/VideoView/VideoView.tsx b/OwnTube.tv/components/VideoView/VideoView.tsx
@@ -100,7 +100,7 @@ const VideoView = ({ uri, testID, handleSetTimeStamp, timestamp, title }: VideoV
           ref={videoRef}
           source={{ uri }}
           onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
-          videoStyle={{ position: "relative" }}
+          style={styles.videoWrapper}
         />
       </VideoControlsOverlay>
     </View>

diff --git a/OwnTube.tv/components/VideoView/styles.ts b/OwnTube.tv/components/VideoView/styles.ts
@@ -6,4 +6,5 @@ export const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
   },
+  videoWrapper: { flex: 1, height: "100%", width: "100%" },
 });