feat: add some more error handling for the player

app/components/ReleasePlayer/ReleasePlayer.tsx

@@ -141,34 +141,45 @@ const saveAnonEpisodeWatched = (
 export const ReleasePlayer = (props: { id: number }) => {
   const userStore = useUserStore();
   const preferredVoiceoverStore = useUserPlayerPreferencesStore();
-  const storedPreferredVoiceover = preferredVoiceoverStore.getPreferredVoiceover(props.id);
+  const storedPreferredVoiceover =
-  const storedPreferredPlayer = preferredVoiceoverStore.getPreferredPlayer(props.id);
+    preferredVoiceoverStore.getPreferredVoiceover(props.id);
+  const storedPreferredPlayer = preferredVoiceoverStore.getPreferredPlayer(
+    props.id
+  );
   const [voiceoverInfo, setVoiceoverInfo] = useState(null);
   const [selectedVoiceover, setSelectedVoiceover] = useState(null);
   const [sourcesInfo, setSourcesInfo] = useState(null);
   const [selectedSource, setSelectedSource] = useState(null);
   const [episodeInfo, setEpisodeInfo] = useState(null);
   const [selectedEpisode, setSelectedEpisode] = useState(null);
+  const [error, setError] = useState(null);
   const setSelectedVoiceoverAndSaveAsPreferred = (voiceover: any) => {
     setSelectedVoiceover(voiceover);
     preferredVoiceoverStore.setPreferredVoiceover(props.id, voiceover.name);
-  }
+  };
   const setSelectedPlayerAndSaveAsPreferred = (player: any) => {
     setSelectedSource(player);
     preferredVoiceoverStore.setPreferredPlayer(props.id, player.name);
-  }
+  };
 
   useEffect(() => {
     async function _fetchInfo() {
+      try {
         const voiceover = await _fetch(
           `${ENDPOINTS.release.episode}/${props.id}`
         );
-      const preferredVoiceover = voiceover.types.find(
+        const preferredVoiceover =
+          voiceover.types.find(
             (voiceover: any) => voiceover.name === storedPreferredVoiceover
           ) || voiceover.types[0];
-
         setVoiceoverInfo(voiceover.types);
         setSelectedVoiceover(preferredVoiceover);
+      } catch {
+        setVoiceoverInfo([]);
+        setSelectedVoiceover(null);
+        console.log("Error fetching voiceover info");
+        setError("Ошибка получения озвучек");
+      }
     }
     _fetchInfo();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -176,15 +187,22 @@ export const ReleasePlayer = (props: { id: number }) => {
 
   useEffect(() => {
     async function _fetchInfo() {
+      try {
         const sources = await _fetch(
           `${ENDPOINTS.release.episode}/${props.id}/${selectedVoiceover.id}`
         );
-      const preferredSource = sources.sources.find(
+        const preferredSource =
+          sources.sources.find(
             (source: any) => source.name === storedPreferredPlayer
           ) || sources.sources[0];
-
         setSourcesInfo(sources.sources);
         setSelectedSource(preferredSource);
+      } catch {
+        setSourcesInfo([]);
+        setSelectedSource(null);
+        console.log("Error fetching player info");
+        setError("Ошибка получения доступных плееров");
+      }
     }
     if (selectedVoiceover) {
       _fetchInfo();
@@ -194,6 +212,7 @@ export const ReleasePlayer = (props: { id: number }) => {
 
   useEffect(() => {
     async function _fetchInfo(url: string) {
+      try {
         const episodes = await _fetch(url);
 
         if (episodes.episodes.length === 0) {
@@ -208,6 +227,12 @@ export const ReleasePlayer = (props: { id: number }) => {
 
         setEpisodeInfo(episodes.episodes);
         setSelectedEpisode(episodes.episodes[0]);
+      } catch {
+        setEpisodeInfo([]);
+        setSelectedEpisode(null);
+        console.log("Error fetching episodes info");
+        setError("Ошибка получения доступных эпизодов");
+      }
     }
     if (selectedSource) {
       let url = `${ENDPOINTS.release.episode}/${props.id}/${selectedVoiceover.id}/${selectedSource.id}`;
@@ -234,7 +259,7 @@ export const ReleasePlayer = (props: { id: number }) => {
     <Card>
       {!voiceoverInfo || !sourcesInfo || !episodeInfo ? (
         <div className="flex items-center justify-center w-full aspect-video">
-          <Spinner />
+          {!error ? <Spinner /> : <p>{error}</p>}
         </div>
       ) : (
         <>
@@ -247,7 +272,9 @@ export const ReleasePlayer = (props: { id: number }) => {
               {voiceoverInfo.map((voiceover: any) => (
                 <Dropdown.Item
                   key={`voiceover_${voiceover.id}`}
-                  onClick={() => setSelectedVoiceoverAndSaveAsPreferred(voiceover)}
+                  onClick={() =>
+                    setSelectedVoiceoverAndSaveAsPreferred(voiceover)
+                  }
                 >
                   {voiceover.name}
                 </Dropdown.Item>
@@ -269,11 +296,15 @@ export const ReleasePlayer = (props: { id: number }) => {
             </Dropdown>
           </div>
           <div className="aspect-video">
+            {selectedEpisode ? (
               <iframe
                 allowFullScreen={true}
                 src={selectedEpisode.url}
                 className="w-full h-full rounded-md"
               ></iframe>
+            ) : (
+              <p>Ошибка загрузки плеера</p>
+            )}
           </div>
           <div>
             <Swiper