mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-06 00:04:39 +00:00
refactor(frontend/release): add a loading circle for release player when fetching episodes data
This commit is contained in:
parent
3d19df95bf
commit
3095bb04a8
GPG key ID:
858E8EE696525EED
3 changed files with 132 additions and 122 deletions
|
|
@ -0,0 +1,42 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { getData } from "@/app/api/api-utils";
|
||||
import { endpoints } from "@/app/api/config";
|
||||
|
||||
export const ReleaseInfo = (props) => {
|
||||
const [releaseInfo, setReleaseInfo] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
async function _fetchInfo() {
|
||||
const release = await getData(`${endpoints.release}/${props.id}`);
|
||||
setReleaseInfo(release);
|
||||
}
|
||||
if (props.id) {
|
||||
_fetchInfo();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<article class="no-padding">
|
||||
<div class="grid no-space">
|
||||
<div class="s6">
|
||||
<img class="responsive" src={releaseInfo.release.image} />
|
||||
</div>
|
||||
<div class="s6">
|
||||
<div class="padding">
|
||||
<h5>Title</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<nav>
|
||||
<button class="border round">Button</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
|
@ -77,87 +77,95 @@ export const ReleasePlayer = (props) => {
|
|||
}, [selectedEpisode]);
|
||||
|
||||
return (
|
||||
<article className="fill grid">
|
||||
<iframe
|
||||
src={episodeURL}
|
||||
className="s9"
|
||||
style={{ aspectRatio: "16/9", width: "100%", height: "auto" }}
|
||||
/>
|
||||
<div className="s3">
|
||||
<div className="tabs">
|
||||
<a data-ui="#vo" className="active">
|
||||
озвучка
|
||||
</a>
|
||||
<a data-ui="#src">плеер</a>
|
||||
<>
|
||||
{voiceoverInfo && sourcesInfo && episodeInfo ? (
|
||||
<article className="fill grid">
|
||||
<iframe
|
||||
src={episodeURL}
|
||||
className="s9"
|
||||
style={{ aspectRatio: "16/9", width: "100%", height: "auto" }}
|
||||
/>
|
||||
<div className="s3">
|
||||
<div className="tabs">
|
||||
<a data-ui="#vo" className="active">
|
||||
озвучка
|
||||
</a>
|
||||
<a data-ui="#src">плеер</a>
|
||||
</div>
|
||||
<div
|
||||
className="page padding active scroll"
|
||||
style={{ Height: "438px" }}
|
||||
id="vo"
|
||||
>
|
||||
{voiceoverInfo &&
|
||||
voiceoverInfo.types.map((item) => {
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
className={`small responsive ${
|
||||
item.id == selectedVoiceover ? "primary" : "secondary"
|
||||
}`}
|
||||
style={{ marginTop: "8px" }}
|
||||
onClick={() => {
|
||||
setSelectedVoiceover(item.id);
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="page center-align padding" id="src">
|
||||
{sourcesInfo &&
|
||||
sourcesInfo.sources.map((item) => {
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
className={`small responsive ${
|
||||
item.id == selectedSources ? "primary" : "secondary"
|
||||
}`}
|
||||
style={{ marginTop: "8px" }}
|
||||
onClick={() => {
|
||||
setSelectedSources(item.id);
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
className="s12 scroll row no-margin no-space"
|
||||
style={{ paddingBottom: "8px", height: "48px" }}
|
||||
>
|
||||
{episodeInfo &&
|
||||
episodeInfo.episodes.map((item) => {
|
||||
return (
|
||||
<button
|
||||
key={item.position}
|
||||
className={`${
|
||||
item.position == selectedEpisode ? "primary" : "secondary"
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSelectedEpisode(item.position);
|
||||
setEpisodeURL(item.url);
|
||||
item.is_watched = true;
|
||||
}}
|
||||
style={{ marginLeft: "8px" }}
|
||||
>
|
||||
{item.is_watched && <i className="small">check</i>}
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</article>
|
||||
) : (
|
||||
<div className="center-align">
|
||||
<progress className="circle" />
|
||||
</div>
|
||||
<div
|
||||
className="page padding active scroll"
|
||||
style={{ Height: "438px" }}
|
||||
id="vo"
|
||||
>
|
||||
{voiceoverInfo &&
|
||||
voiceoverInfo.types.map((item) => {
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
className={`small responsive ${
|
||||
item.id == selectedVoiceover ? "primary" : "secondary"
|
||||
}`}
|
||||
style={{ marginTop: "8px" }}
|
||||
onClick={() => {
|
||||
setSelectedVoiceover(item.id);
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="page center-align padding" id="src">
|
||||
{sourcesInfo &&
|
||||
sourcesInfo.sources.map((item) => {
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
className={`small responsive ${
|
||||
item.id == selectedSources ? "primary" : "secondary"
|
||||
}`}
|
||||
style={{ marginTop: "8px" }}
|
||||
onClick={() => {
|
||||
setSelectedSources(item.id);
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
className="s12 scroll row no-margin no-space"
|
||||
style={{ paddingBottom: "8px", height: "48px" }}
|
||||
>
|
||||
{episodeInfo &&
|
||||
episodeInfo.episodes.map((item) => {
|
||||
return (
|
||||
<button
|
||||
key={item.position}
|
||||
className={`${
|
||||
item.position == selectedEpisode ? "primary" : "secondary"
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSelectedEpisode(item.position);
|
||||
setEpisodeURL(item.url);
|
||||
item.is_watched = true;
|
||||
}}
|
||||
style={{ marginLeft: "8px" }}
|
||||
>
|
||||
{item.is_watched && <i className="small">check</i>}
|
||||
{item.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</article>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,51 +1,11 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { getData } from "@/app/api/api-utils";
|
||||
import { endpoints } from "@/app/api/config";
|
||||
import { useUserStore } from "@/app/store/user-store";
|
||||
import { useSettingsStore } from "@/app/store/settings-store";
|
||||
|
||||
import { ReleasePlayer } from "@/app/components/Release/ReleasePlayer";
|
||||
import { ReleaseInfo } from "@/app/components/Release/ReleaseInfo";
|
||||
|
||||
export default function Release(props) {
|
||||
const userStore = useUserStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const [releaseInfo, setReleaseInfo] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
async function _fetchInfo() {
|
||||
const release = await getData(`${endpoints.release}/${props.id}`);
|
||||
setReleaseInfo(release);
|
||||
}
|
||||
if (props.params.id) {
|
||||
_fetchInfo();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <article class="no-padding">
|
||||
<div class="grid no-space">
|
||||
<div class="s6">
|
||||
<img class="responsive" src={releaseInfo.release.image} />
|
||||
</div>
|
||||
<div class="s6">
|
||||
<div class="padding">
|
||||
<h5>Title</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<nav>
|
||||
<button class="border round">Button</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article> */}
|
||||
|
||||
<ReleasePlayer id={props.params.id} />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue