Use window reload to fix yt player on first video bug

happy-software · Sep 2, 2024 · 62be474 · 62be474
1 parent b07e99c
commit 62be474
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 18 deletions.
diff --git a/src/components/Player.js b/src/components/Player.js
@@ -15,21 +15,18 @@ export default function Player(props) {
   function onError() {
     const internalPlayer = props.playerRef.current?.getInternalPlayer()
     const videoUrl = internalPlayer.getVideoUrl()
-    if (!videoUrl) return
-
     const videoId = getVideoId(videoUrl)
-    const currentVideoIndex = internalPlayer.getPlaylistIndex()
 
+    const currentVideoIndex = internalPlayer.getPlaylistIndex()
     // use JS destructuring syntax to exclude the `description` property from the rest of the object, it can be too long
     const { description, ...destructuredVideo } = props.videos[currentVideoIndex]
-    const errorMessage = `BROKEN VIDEO: ${videoId}, videoUrl: ${videoUrl}, video: ${JSON.stringify(destructuredVideo)}`
 
+    const errorMessage = `BROKEN VIDEO: ${videoId}, index: ${currentVideoIndex}, videoUrl: ${videoUrl}, video: ${JSON.stringify(destructuredVideo)}`
     console.log(errorMessage)
     Honeybadger.notify(errorMessage);
 
-    if (currentVideoIndex === 0) {
-      console.log("Recovering from broken first video...")
-      props.onErrorRecovery()
+    if (currentVideoIndex === 0 || !videoUrl) {
+      window.location.reload()
     } else {
       internalPlayer.nextVideo()
     }

diff --git a/src/hooks/UseVideoDataFetcher.js b/src/hooks/UseVideoDataFetcher.js
@@ -12,18 +12,13 @@ const initialFetchResult = {
 export default function useVideoDataFetcher(selectedPlaylistIds) {
   const [playlistIds, setPlaylistIds] = useState(selectedPlaylistIds)
   const [fetchResult, setFetchResult] = useState(initialFetchResult)
-  const [refetchTrigger, setRefetchTrigger] = useState(false)
 
   // Effect hook for fetching data when playlist IDs change
   useEffect(() => {
     fetchData(playlistIds, setFetchResult)
-  }, [playlistIds, refetchTrigger])
+  }, [playlistIds])
 
-  function triggerRefetch() {
-    setRefetchTrigger(!refetchTrigger)
-  }
-
-  return [fetchResult, setPlaylistIds, triggerRefetch]
+  return [fetchResult, setPlaylistIds]
 }
 
 async function fetchData(playlistIds, setFetchResult) {

diff --git a/src/hooks/UseVideoPlayer.js b/src/hooks/UseVideoPlayer.js
@@ -3,7 +3,7 @@ import useVideoDataFetcher from '../hooks/UseVideoDataFetcher'
 
 export default function useVideoPlayer(selectedPlaylistIds) {
     const [currentVideos, setCurrentVideos] = useState([])
-    const [videoFetchResult, setVideoFetchPlaylistIds, triggerRefetch] = useVideoDataFetcher(selectedPlaylistIds)
+    const [videoFetchResult, setVideoFetchPlaylistIds] = useVideoDataFetcher(selectedPlaylistIds)
 
     useEffect(shuffleVideos, [videoFetchResult])
 
@@ -27,7 +27,6 @@ export default function useVideoPlayer(selectedPlaylistIds) {
     return {
         currentVideos,
         setVideoFetchPlaylistIds,
-        triggerRefetch,
         isLoaded: videoFetchResult.isLoaded
     }
 }
diff --git a/src/pages/ShufflePlayer.js b/src/pages/ShufflePlayer.js
@@ -19,7 +19,7 @@ export default function ShufflePlayer() {
   const [selectedPlaylistIds, setSelectedPlaylistIds] = useLocalStorage(AppConstants.SelectedPlaylistIdsKey, [])
   const [playlists, setPlaylists] = usePlaylistDataFetcher(selectedPlaylistIds)
 
-  const { currentVideos, setVideoFetchPlaylistIds, triggerRefetch, isLoaded } = useVideoPlayer(selectedPlaylistIds)
+  const { currentVideos, setVideoFetchPlaylistIds, isLoaded } = useVideoPlayer(selectedPlaylistIds)
 
   if (!isLoaded) {
     return <LoadingPlaceholder />
@@ -32,7 +32,6 @@ export default function ShufflePlayer() {
       hideVideo={hideVideo}
       playerRef={playerRef}
       setCurrentVideo={setCurrentVideo}
-      onErrorRecovery={triggerRefetch}
     />
 
     <CurrentVideoInfo currentVideo={currentVideo} />