fix yarn build issues and made sure yarn install step is in readme

README.md

@@ -47,6 +47,13 @@
 
 ## Prerequests
 
+### Yarn Install
+Make sure npm packages are installed with yarn to generate `yarn.lock` file.
+```
+yarn install
+```
+
+### The Movie Database
 - Create an account if you don't have on [TMDB](https://www.themoviedb.org/).
   Because I use its free API to consume movie/tv data.
 - And then follow the [documentation](https://developers.themoviedb.org/3/getting-started/introduction) to create API Key

src/components/DetailModal.tsx

@@ -48,7 +48,7 @@ export default function DetailModal() {
 
   const handleReady = useCallback((player: Player) => {
     playerRef.current = player;
-    setMuted(player.muted());
+    setMuted(player.muted() || false);
   }, []);
 
   const handleMute = useCallback((status: boolean) => {

src/components/watch/VolumeControllers.tsx

@@ -1,7 +1,6 @@
 import { Stack } from "@mui/material";
 import Slider from "@mui/material/Slider";
 import { styled } from "@mui/material/styles";
-import { SliderUnstyledOwnProps } from "@mui/base/SliderUnstyled";
 import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 import VolumeOffIcon from "@mui/icons-material/VolumeOff";
 import PlayerControlButton from "./PlayerControlButton";
@@ -34,14 +33,16 @@ const StyledSlider = styled(Slider)({
   },
 });
 
+import { SliderTypeMap } from "@mui/material/Slider";
+
 export default function VolumeControllers({
   value,
   handleVolume,
   handleVolumeToggle,
   muted,
 }: {
   value: number;
-  handleVolume: SliderUnstyledOwnProps["onChange"];
+  handleVolume: SliderTypeMap["props"]["onChange"];
   handleVolumeToggle: React.MouseEventHandler<HTMLButtonElement>;
   muted: boolean;
 }) {

src/pages/WatchPage.tsx

@@ -2,7 +2,6 @@ import { useState, useRef, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import Player from "video.js/dist/types/player";
 import { Box, Stack, Typography } from "@mui/material";
-import { SliderUnstyledOwnProps } from "@mui/base/SliderUnstyled";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PauseIcon from "@mui/icons-material/Pause";
 import SkipNextIcon from "@mui/icons-material/SkipNext";
@@ -21,6 +20,8 @@ import PlayerSeekbar from "src/components/watch/PlayerSeekbar";
 import PlayerControlButton from "src/components/watch/PlayerControlButton";
 import MainLoadingScreen from "src/components/MainLoadingScreen";
 
+import { SliderTypeMap } from "@mui/material/Slider";
+
 export function Component() {
   const playerRef = useRef<Player | null>(null);
   const [playerState, setPlayerState] = useState({
@@ -72,13 +73,13 @@ export function Component() {
 
     player.on("timeupdate", () => {
       setPlayerState((draft) => {
-        return { ...draft, playedSeconds: player.currentTime() };
+        return { ...draft, playedSeconds: player.currentTime() ?? 0 };
       });
     });
 
     player.one("durationchange", () => {
       setPlayerInitialized(true);
-      setPlayerState((draft) => ({ ...draft, duration: player.duration() }));
+      setPlayerState((draft) => ({ ...draft, duration: player.duration() ?? 0 }));
     });
 
     playerRef.current = player;
@@ -88,10 +89,10 @@ export function Component() {
     });
   };
 
-  const handleVolumeChange: SliderUnstyledOwnProps["onChange"] = (_, value) => {
-    playerRef.current?.volume((value as number) / 100);
+  const handleVolumeChange: SliderTypeMap["props"]["onChange"] = (event: any, value: number | number[]) => {
+    playerRef.current?.volume(Array.isArray(value) ? value[0] / 100 : value / 100);
     setPlayerState((draft) => {
-      return { ...draft, volume: (value as number) / 100 };
+      return { ...draft, volume: Array.isArray(value) ? value[0] / 100 : value / 100 };
     });
   };