Merge pull request #122 from mykhailodanilenko/feature/video-controls…

…-overlay-UI-impl

Add video player

.github/workflows/deploy-static-main.yml

@@ -67,7 +67,7 @@ jobs:
         run: cd OwnTube.tv/ && npm run test
 
   build_android_apk:
-    needs: code_quality
+    needs: [code_quality, build_info]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -119,7 +119,7 @@ jobs:
           path: "./OwnTube.tv/android/app/build/outputs/apk/release/app-release.apk"
 
   deploy_web:
-    needs: code_quality
+    needs: [code_quality, build_info]
     runs-on: ubuntu-latest
     environment:
       name: github-pages

OwnTube.tv/.prettierignore

@@ -2,3 +2,4 @@
 **/dist/*
 package.json
 app.json
+assets/selection.json

OwnTube.tv/App.tsx

@@ -1,10 +1,8 @@
-import { StatusBar } from "expo-status-bar";
 import RootLayout from "./app/_layout";
 
 export default function App() {
   return (
     <>
-      <StatusBar style="auto" />
       <RootLayout />
     </>
   );

OwnTube.tv/app.json

@@ -40,7 +40,13 @@
           "fonts": ["assets/fonts/icomoon.ttf"]
         }
       ],
-      "expo-localization"
+      "expo-localization",
+      [
+        "expo-screen-orientation",
+        {
+          "initialOrientation": "DEFAULT"
+        }
+      ]
     ]
   }
 }

OwnTube.tv/app/_layout.tsx

@@ -1,7 +1,7 @@
 import { Link, Stack, useLocalSearchParams } from "expo-router";
 import { Platform, StyleSheet } from "react-native";
 import { ROUTES, STORAGE } from "../types";
-import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
+import { ThemeProvider } from "@react-navigation/native";
 import { AppConfigContextProvider, ColorSchemeContextProvider, useColorSchemeContext } from "../contexts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
@@ -24,50 +24,55 @@ import {
   Inter_900Black,
 } from "@expo-google-fonts/inter";
 import { IcoMoonIcon } from "../components";
+import { colorSchemes } from "../theme";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { StatusBar } from "expo-status-bar";
 
 const RootStack = () => {
   const { backend } = useLocalSearchParams();
   const { scheme } = useColorSchemeContext();
-  const theme = scheme === "dark" ? DarkTheme : DefaultTheme;
+  const theme = scheme === "dark" ? colorSchemes.dark : colorSchemes.light;
   const { t, i18n } = useTranslation();
 
   useEffect(() => {
     readFromAsyncStorage(STORAGE.LOCALE).then(i18n.changeLanguage);
   }, []);
 
   return (
-    <ThemeProvider value={theme}>
-      <Stack
-        screenOptions={{
-          headerTitle: ({ children }) => <ClickableHeaderText>{children}</ClickableHeaderText>,
-        }}
-      >
-        <Stack.Screen
-          name={"(home)/index"}
-          options={{
-            headerBackVisible: false,
-            title: t("appName"),
-            headerLeft: () => <></>,
-            headerRight: () => <></>,
+    <>
+      <StatusBar style={scheme === "dark" ? "light" : "dark"} />
+      <ThemeProvider value={theme}>
+        <Stack
+          screenOptions={{
+            headerTitle: ({ children }) => <ClickableHeaderText>{children}</ClickableHeaderText>,
           }}
-        />
-        <Stack.Screen
-          options={{
-            title: t("settingsPageTitle"),
-            headerBackVisible: false,
-            headerLeft: () => (
-              <Link style={styles.headerButtonLeft} href={{ pathname: "/", params: { backend } }}>
-                <IcoMoonIcon name="Home" size={24} color={theme.colors.primary} />
-              </Link>
-            ),
-          }}
-          name={`(home)/${ROUTES.SETTINGS}`}
-        />
-        <Stack.Screen options={{ title: t("videoPageTitle"), headerShown: false }} name={`(home)/video`} />
-      </Stack>
-      <Toast config={{ buildInfo: () => <BuildInfoToast /> }} />
-    </ThemeProvider>
+        >
+          <Stack.Screen
+            name={"(home)/index"}
+            options={{
+              headerBackVisible: false,
+              title: t("appName"),
+              headerLeft: () => <></>,
+              headerRight: () => <></>,
+            }}
+          />
+          <Stack.Screen
+            options={{
+              title: t("settingsPageTitle"),
+              headerBackVisible: false,
+              headerLeft: () => (
+                <Link style={styles.headerButtonLeft} href={{ pathname: "/", params: { backend } }}>
+                  <IcoMoonIcon name="Home" size={24} color={theme.colors.primary} />
+                </Link>
+              ),
+            }}
+            name={`(home)/${ROUTES.SETTINGS}`}
+          />
+          <Stack.Screen options={{ title: t("videoPageTitle"), headerShown: false }} name={`(home)/video`} />
+        </Stack>
+        <Toast config={{ buildInfo: () => <BuildInfoToast /> }} />
+      </ThemeProvider>
+    </>
   );
 };