diff --git a/app/components/ReleasePlayer/ReleasePlayer.tsx b/app/components/ReleasePlayer/ReleasePlayer.tsx index 11bfd6e..0e74655 100644 --- a/app/components/ReleasePlayer/ReleasePlayer.tsx +++ b/app/components/ReleasePlayer/ReleasePlayer.tsx @@ -2,6 +2,7 @@ import { Spinner } from "#/components/Spinner/Spinner"; import { useUserStore } from "#/store/auth"; +import { useUserPlayerPreferencesStore } from "#/store/player"; import { Card, Dropdown, Button } from "flowbite-react"; import { ENDPOINTS } from "#/api/config"; import { useState, useEffect } from "react"; @@ -139,20 +140,35 @@ const saveAnonEpisodeWatched = ( export const ReleasePlayer = (props: { id: number }) => { const userStore = useUserStore(); + const preferredVoiceoverStore = useUserPlayerPreferencesStore(); + const storedPreferredVoiceover = 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 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() { const voiceover = await _fetch( `${ENDPOINTS.release.episode}/${props.id}` ); + const preferredVoiceover = voiceover.types.find( + (voiceover: any) => voiceover.name === storedPreferredVoiceover + ) || voiceover.types[0]; + setVoiceoverInfo(voiceover.types); - setSelectedVoiceover(voiceover.types[0]); + setSelectedVoiceover(preferredVoiceover); } _fetchInfo(); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -163,8 +179,12 @@ export const ReleasePlayer = (props: { id: number }) => { const sources = await _fetch( `${ENDPOINTS.release.episode}/${props.id}/${selectedVoiceover.id}` ); + const preferredSource = sources.sources.find( + (source: any) => source.name === storedPreferredPlayer + ) || sources.sources[0]; + setSourcesInfo(sources.sources); - setSelectedSource(sources.sources[0]); + setSelectedSource(preferredSource); } if (selectedVoiceover) { _fetchInfo(); @@ -227,7 +247,7 @@ export const ReleasePlayer = (props: { id: number }) => { {voiceoverInfo.map((voiceover: any) => ( setSelectedVoiceover(voiceover)} + onClick={() => setSelectedVoiceoverAndSaveAsPreferred(voiceover)} > {voiceover.name} @@ -241,7 +261,7 @@ export const ReleasePlayer = (props: { id: number }) => { {sourcesInfo.map((source: any) => ( setSelectedSource(source)} + onClick={() => setSelectedPlayerAndSaveAsPreferred(source)} > {source.name} diff --git a/app/store/player.ts b/app/store/player.ts new file mode 100644 index 0000000..eb92dad --- /dev/null +++ b/app/store/player.ts @@ -0,0 +1,42 @@ +"use client"; +import { create } from "zustand"; +import { persist } from "zustand/middleware"; + +interface userPlayerPreferencesState { + voiceover: Map; + player: Map; + getPreferredVoiceover: (id: number) => (string | undefined); + setPreferredVoiceover: (id: number, voiceover: string) => void; + getPreferredPlayer: (id: number) => (string | undefined); + setPreferredPlayer: (id: number, player: string) => void; +} + +export const useUserPlayerPreferencesStore = create()( + persist( + (set, get) => ({ + voiceover: new Map(), + player: new Map(), + getPreferredVoiceover: (id: number) => get().voiceover[id], + setPreferredVoiceover: (id: number, voiceover: string) => { + let current = get().voiceover + current[id] = voiceover + set({ + voiceover: current, + player: get().player, + }); + }, + getPreferredPlayer: (id: number) => get().player[id], + setPreferredPlayer: (id: number, player: string) => { + let current = get().player + current[id] = player + set({ + voiceover: get().voiceover, + player: current, + }) + } + }), + { + name: "player-preferences", + } + ) +); \ No newline at end of file