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

refactor(frontend/release): add a loading circle for release player when fetching episodes data

Browse source
This commit is contained in:
Kentai Radiquum 2024-04-30 16:47:05 +05:00
parent 3d19df95bf
commit 3095bb04a8
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 132 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
frontend/app/components/Release/ReleaseInfo.jsx
View file

@ -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>
);
};

8
frontend/app/components/Release/ReleasePlayer.jsx
View file

@ -77,6 +77,8 @@ export const ReleasePlayer = (props) => {
}, [selectedEpisode]);
return (
<>
{voiceoverInfo && sourcesInfo && episodeInfo ? (
<article className="fill grid">
<iframe
src={episodeURL}
@ -159,5 +161,11 @@ export const ReleasePlayer = (props) => {
})}
</nav>
</article>
) : (
<div className="center-align">
<progress className="circle" />
</div>
)}
</>
);
};

42
frontend/app/release/[id]/page.js
View file

@ -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} />
</>
);