Merge pull request #53 from QortalSeth/main

Bugfixes on VideoPlayer

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 {

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;
+};

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} />