Fix error with first video by creating a mechanism to refetch the cur…

…rent list, causing a reshuffle (#121)

src/components/Player.js

@@ -1,22 +1,38 @@
 import React from 'react'
 import ReactPlayer from 'react-player'
+import { Honeybadger } from "@honeybadger-io/react"
 
 export default function Player(props) {
   const YOUTUBE_PLAYLIST_VIDEO_LIMIT = 200
 
   function onPlay() {
-    var internalPlayer = props.playerRef.current?.getInternalPlayer()
-    var videoData = internalPlayer.getVideoData()
-    var video = props.videos.find(v => v.video_id === videoData.video_id)
+    const internalPlayer = props.playerRef.current?.getInternalPlayer()
+    const videoData = internalPlayer.getVideoData()
+    const video = props.videos.find(v => v.video_id === videoData.video_id)
     props.setCurrentVideo(video)
   }
 
   function onError() {
-    var internalPlayer = props.playerRef.current?.getInternalPlayer()
-    var videoUrl = internalPlayer.getVideoUrl()
+    const internalPlayer = props.playerRef.current?.getInternalPlayer()
+    const videoUrl = internalPlayer.getVideoUrl()
     if (!videoUrl) return
-    console.log(`BROKEN VIDEO: ${getVideoId(videoUrl)}`)
-    internalPlayer.nextVideo()
+
+    const videoId = getVideoId(videoUrl)
+    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)}`
+
+    console.log(errorMessage)
+    Honeybadger.notify(errorMessage);
+
+    if (currentVideoIndex === 0) {
+      console.log("Recovering from broken first video...")
+      props.onErrorRecovery()
+    } else {
+      internalPlayer.nextVideo()
+    }
   }
 
   function getVideoId(url) {

src/hooks/UseVideoDataFetcher.js

@@ -12,13 +12,18 @@ 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])
+  }, [playlistIds, refetchTrigger])
 
-  return [fetchResult, setPlaylistIds]
+  function triggerRefetch() {
+    setRefetchTrigger(!refetchTrigger)
+  }
+
+  return [fetchResult, setPlaylistIds, triggerRefetch]
 }
 
 async function fetchData(playlistIds, setFetchResult) {

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] = useVideoDataFetcher(selectedPlaylistIds)
+    const [videoFetchResult, setVideoFetchPlaylistIds, triggerRefetch] = useVideoDataFetcher(selectedPlaylistIds)
 
     useEffect(shuffleVideos, [videoFetchResult])
 
@@ -27,6 +27,7 @@ export default function useVideoPlayer(selectedPlaylistIds) {
     return {
         currentVideos,
         setVideoFetchPlaylistIds,
+        triggerRefetch,
         isLoaded: videoFetchResult.isLoaded
     }
 }

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, isLoaded } = useVideoPlayer(selectedPlaylistIds)
+  const { currentVideos, setVideoFetchPlaylistIds, triggerRefetch, isLoaded } = useVideoPlayer(selectedPlaylistIds)
 
   if (!isLoaded) {
     return <LoadingPlaceholder />
@@ -32,6 +32,7 @@ export default function ShufflePlayer() {
       hideVideo={hideVideo}
       playerRef={playerRef}
       setCurrentVideo={setCurrentVideo}
+      onErrorRecovery={triggerRefetch}
     />
 
     <CurrentVideoInfo currentVideo={currentVideo} />