mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-09 01:34: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]);
|
}, [selectedEpisode]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<article className="fill grid">
|
<>
|
||||||
<iframe
|
{voiceoverInfo && sourcesInfo && episodeInfo ? (
|
||||||
src={episodeURL}
|
<article className="fill grid">
|
||||||
className="s9"
|
<iframe
|
||||||
style={{ aspectRatio: "16/9", width: "100%", height: "auto" }}
|
src={episodeURL}
|
||||||
/>
|
className="s9"
|
||||||
<div className="s3">
|
style={{ aspectRatio: "16/9", width: "100%", height: "auto" }}
|
||||||
<div className="tabs">
|
/>
|
||||||
<a data-ui="#vo" className="active">
|
<div className="s3">
|
||||||
озвучка
|
<div className="tabs">
|
||||||
</a>
|
<a data-ui="#vo" className="active">
|
||||||
<a data-ui="#src">плеер</a>
|
озвучка
|
||||||
|
</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>
|
||||||
<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";
|
"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 { ReleasePlayer } from "@/app/components/Release/ReleasePlayer";
|
||||||
|
import { ReleaseInfo } from "@/app/components/Release/ReleaseInfo";
|
||||||
|
|
||||||
export default function Release(props) {
|
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 (
|
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} />
|
<ReleasePlayer id={props.params.id} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue