return source selection

app/components/ReleasePlayer/SourceSelectorMenu.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { ENDPOINTS } from "#/api/config";
+import { useEffect } from "react";
+import { _fetchAPI } from "./PlayerParsing";
+import { useUserPlayerPreferencesStore } from "#/store/player";
+import { numberDeclension } from "#/api/utils";
+import { Voiceover } from "./VoiceoverSelectorMenu";
+
+export interface Source {
+  id: number;
+  name: string;
+  episodes_count: number;
+}
+
+interface SourceSelectorMenuProps {
+  release_id: number;
+  setSource: (state) => void;
+  voiceover: Voiceover;
+  source: Source;
+  sourceList: Source[];
+  setPlayerError: (state) => void;
+}
+
+export const SourceSelectorMenu = ({
+  release_id,
+  setSource,
+  voiceover,
+  source,
+  sourceList,
+  setPlayerError,
+}: SourceSelectorMenuProps) => {
+  const playerPreferenceStore = useUserPlayerPreferencesStore();
+  const preferredSource = playerPreferenceStore.getPreferredPlayer(release_id);
+
+  useEffect(() => {
+    const __getInfo = async () => {
+      let url = `${ENDPOINTS.release.episode}/${release_id}/${voiceover.id}`;
+      const src = await _fetchAPI(
+        url,
+        "Не удалось получить информацию о источниках",
+        setPlayerError
+      );
+      if (src) {
+        const selectedSrc =
+          src.sources.find(
+            (source: Source) => source.name === preferredSource
+          ) || src.sources[0];
+        if (selectedSrc.episodes_count == 0) {
+          const remSources = src.sources.filter(
+            (source: any) => source.id !== selectedSrc.id
+          );
+          setSource({
+            selected: remSources[0],
+            available: remSources,
+          });
+          return;
+        }
+        setSource({
+          selected: selectedSrc,
+          available: src.sources,
+        });
+      }
+    };
+    if (voiceover) {
+      __getInfo();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [voiceover]);
+
+  return (
+    <div className="flex flex-col items-start justify-start gap-4">
+      <p className="text-[20px] px-2 pt-2 pb-1 font-bold">Источник</p>
+      <div className="max-h-full flex flex-col gap-4 items-start justify-start overflow-x-hidden overflow-y-auto px-2 pb-2 scrollbar-thin scrollbar-thumb-[rgb(60_60_60_/_.8)] scrollbar-track-[rgb(30_30_30_/_.8)]">
+        {sourceList && sourceList.length > 0 ?
+          sourceList.map((src: Source) => {
+            return (
+              <button
+                key={`release-${release_id}-voiceover-${voiceover.id}-source-${src.id}`}
+                className={`h-fit justify-start items-start ${source.id == src.id ? "text-white" : "text-gray-500 hover:text-gray-300"} transition-colors`}
+                onClick={() => {
+                  setSource({
+                    selected: src,
+                    available: sourceList,
+                  });
+                  playerPreferenceStore.setPreferredPlayer(
+                    release_id,
+                    src.name
+                  );
+                }}
+              >
+                <div className="flex flex-col w-full gap-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[16px] leading-none">{src.name}</span>
+                  </div>
+                  <div className="flex gap-2">
+                    <span>
+                      {src.episodes_count || 0}{" "}
+                      {numberDeclension(
+                        src.episodes_count || 0,
+                        "серия",
+                        "серии",
+                        "серий"
+                      )}
+                    </span>
+                  </div>
+                </div>
+              </button>
+            );
+          })
+        : ""}
+      </div>
+    </div>
+  );
+};