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).

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