From 222a7b3b891bbf467ba6f8b3b7bb51e52eb02d60 Mon Sep 17 00:00:00 2001
From: IrohDW <randomprogrammer@protonmail.com>
Date: Mon, 25 Nov 2024 10:58:59 -0700
Subject: [PATCH] Added useIsMobile.ts hook to determine the device type. It is
 used by videoplayer to more accurately determine which controls to show.

Fixed bug causing playback rate to be different than what the player displays it as (Thanks to Crowetic for noticing this).
---
 .../Components/VideoControls-State.ts         | 17 ++++++---------
 src/hooks/useIsMobile.ts                      | 21 +++++++++++++++++++
 src/pages/Home/Home.tsx                       | 16 +++++++++-----
 3 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 src/hooks/useIsMobile.ts

diff --git a/src/components/common/VideoPlayer/Components/VideoControls-State.ts b/src/components/common/VideoPlayer/Components/VideoControls-State.ts
index 050ab0c..78c7f85 100644
--- a/src/components/common/VideoPlayer/Components/VideoControls-State.ts
+++ b/src/components/common/VideoPlayer/Components/VideoControls-State.ts
@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { useSelector } from "react-redux";
 import { Key } from "ts-key-enum";
+import { useIsMobile } from "../../../../hooks/useIsMobile.ts";
 import { setVideoPlaying } from "../../../../state/features/globalSlice.ts";
 import {
   setReduxPlaybackRate,
@@ -39,6 +40,7 @@ export const useVideoControlsState = (
   } = videoPlayerState;
   const { identifier, autoPlay } = props;
 
+  const isMobile = useIsMobile();
   const showControlsFullScreen = useSignal(true);
   const persistSelector = store.getState().persist;
 
@@ -54,7 +56,7 @@ export const useVideoControlsState = (
     if (videoRef.current) {
       if (newSpeed > maxSpeed || newSpeed < minSpeed) newSpeed = minSpeed;
 
-      videoRef.current.playbackRate = playbackRate.value;
+      videoRef.current.playbackRate = newSpeed;
       playbackRate.value = newSpeed;
       store.dispatch(setReduxPlaybackRate(newSpeed));
     }
@@ -66,15 +68,11 @@ export const useVideoControlsState = (
       ? changedSpeed
       : Math.min(changedSpeed, maxSpeed);
 
-    if (videoRef.current) {
-      updatePlaybackRate(newSpeed);
-    }
+    updatePlaybackRate(newSpeed);
   };
 
   const decreaseSpeed = () => {
-    if (videoRef.current) {
-      updatePlaybackRate(playbackRate.value - speedChange);
-    }
+    updatePlaybackRate(playbackRate.value - speedChange);
   };
 
   const isFullscreen = useSignal(false);
@@ -359,10 +357,7 @@ export const useVideoControlsState = (
 
   useSignalEffect(() => {
     console.log("canPlay is: ", canPlay.value); // makes the function execute when canPlay changes
-    const videoWidth = videoRef?.current?.offsetWidth;
-    if (videoWidth && videoWidth <= 600) {
-      isMobileView.value = true;
-    }
+    if (isMobile) isMobileView.value = true;
   });
 
   return {
diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
new file mode 100644
index 0000000..15ead74
--- /dev/null
+++ b/src/hooks/useIsMobile.ts
@@ -0,0 +1,21 @@
+import { signal } from "@preact/signals-react";
+import { useSignals } from "@preact/signals-react/runtime";
+import { useMemo } from "react";
+
+const isMobile = signal(false);
+const isDeviceDetermined = signal(false);
+
+export const useIsMobile = () => {
+  if (isDeviceDetermined.value) return isMobile.value;
+
+  const userAgent = navigator.userAgent || navigator.vendor;
+
+  isMobile.value =
+    /android/i.test(userAgent) || /iPad|iPhone|iPod/.test(userAgent);
+
+  const deviceTypeText = isMobile.value ? "Mobile Device" : "Desktop";
+  console.log("Running on a", deviceTypeText);
+
+  isDeviceDetermined.value = true;
+  return isMobile.value;
+};
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index a5791dc..9591db9 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -4,6 +4,7 @@ import { Box, Grid, Tab } from "@mui/material";
 import React from "react";
 import LazyLoad from "../../components/common/LazyLoad";
 import { ListSuperLikeContainer } from "../../components/common/ListSuperLikes/ListSuperLikeContainer.tsx";
+import { fontSizeMedium } from "../../constants/Misc.ts";
 import { SearchSidebar } from "./Components/SearchSidebar.tsx";
 import { FiltersCol, VideoManagerRow } from "./Components/VideoList-styles.tsx";
 import VideoList from "./Components/VideoList.tsx";
@@ -23,7 +24,12 @@ export const Home = ({ mode }: HomeProps) => {
     getVideosHandler,
   } = useHomeState(mode);
 
-  const tabFontSize = "100%";
+  const tabPaneSX = {
+    width: "100%",
+    paddingLeft: "0px",
+    paddingRight: "0px",
+  };
+
   return (
     <>
       <Grid container sx={{ width: "100%" }}>
@@ -56,22 +62,22 @@ export const Home = ({ mode }: HomeProps) => {
                   <Tab
                     label="All Videos"
                     value={"all"}
-                    sx={{ fontSize: tabFontSize }}
+                    sx={{ fontSize: fontSizeMedium }}
                   />
                   <Tab
                     label="Subscriptions"
                     value={"subscriptions"}
-                    sx={{ fontSize: tabFontSize }}
+                    sx={{ fontSize: fontSizeMedium }}
                   />
                 </TabList>
-                <TabPanel value={"all"} sx={{ width: "100%" }}>
+                <TabPanel value={"all"} sx={tabPaneSX}>
                   <VideoList videos={videos} />
                   <LazyLoad
                     onLoadMore={getVideosHandler}
                     isLoading={isLoading}
                   ></LazyLoad>
                 </TabPanel>
-                <TabPanel value={"subscriptions"} sx={{ width: "100%" }}>
+                <TabPanel value={"subscriptions"} sx={tabPaneSX}>
                   {filteredSubscriptionList.length > 0 ? (
                     <>
                       <VideoList videos={videos} />