Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add some more error handling for the player

Browse source
This commit is contained in:
Kentai Radiquum 2024-12-05 18:30:56 +05:00
parent 57245d99b7
commit 9d921c1ee4
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 71 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
app/components/ReleasePlayer/ReleasePlayer.tsx
View file

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