mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-29 16:07:40 +01:00
Code Issues Wiki Activity

add loading skeloton

Browse source
This commit is contained in:
Captain Jack Sparrow 2024-06-14 22:35:05 +00:00
parent af7a2b9477
commit 5b7d92d478
3 changed files with 4336 additions and 5281 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -65,6 +65,7 @@
"react-helmet-async": "^2.0.4", "react-helmet-async": "^2.0.4",
"react-i18next": "^14.1.1", "react-i18next": "^14.1.1",
"react-lazy-with-preload": "^2.2.1", "react-lazy-with-preload": "^2.2.1",
"react-loading-skeleton": "^3.4.0",
"react-router-dom": "^6.23.0", "react-router-dom": "^6.23.0",
"react-sticky-el": "^2.1.0", "react-sticky-el": "^2.1.0",
"react-use": "^17.5.0", "react-use": "^17.5.0",

9501
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

115
src/components/media/PopupModal.tsx
View file

@ -1,4 +1,5 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import Skeleton from "react-loading-skeleton";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { get } from "@/backend/metadata/tmdb"; import { get } from "@/backend/metadata/tmdb";
@ -23,11 +24,14 @@ type StyleState = {
visibility: "visible" | "hidden" | undefined; visibility: "visible" | "hidden" | undefined;
}; };
const formatRuntime = (minutes: number): string => { function formatRuntime(runtime: number) {
const hours = Math.floor(minutes / 60); const hours = Math.floor(runtime / 60);
const mins = minutes % 60; const minutes = runtime % 60;
return `${hours}h ${mins}m`; if (hours > 0) {
}; return `${hours}h ${minutes}m`;
}
return `${minutes}m`;
}
export function PopupModal({ export function PopupModal({
isVisible, isVisible,
@ -152,49 +156,73 @@ export function PopupModal({
className="rounded-xl p-3 m-6 bg-modal-background flex justify-center items-center transition-opacity duration-200 w-full max-w-3xl" className="rounded-xl p-3 m-6 bg-modal-background flex justify-center items-center transition-opacity duration-200 w-full max-w-3xl"
style={{ opacity: style.opacity }} style={{ opacity: style.opacity }}
> >
<div className="aspect-w-16 aspect-h-9 w-full"> <div className="aspect-w-16 aspect-h-9 w-full overflow-y-auto">
<img <div className="rounded-xl w-full h-full">
src={`https://image.tmdb.org/t/p/original/${data?.backdrop_path}`} {data?.backdrop_path ? (
className="rounded-xl object-cover w-full h-full" <img
/> src={`https://image.tmdb.org/t/p/original/${data.backdrop_path}`}
className="rounded-xl object-cover w-full h-full"
/>
) : (
<Skeleton />
)}
</div>
<div className="flex pt-3 items-center gap-4"> <div className="flex pt-3 items-center gap-4">
<h1 className="relative text-2xl whitespace-normal font-bold text-white"> <h1 className="relative text-2xl whitespace-normal font-bold text-white">
{data?.title || data?.name} {data?.title || data?.name ? (
data?.title || data?.name
) : (
<Skeleton />
)}
</h1> </h1>
<div className="font-semibold"> <div className="font-semibold">
{media.type === "movie" ? ( {media.type === "movie" ? (
<div className="px-2 py-1 bg-search-background rounded"> displayCertification ? (
<span>{displayCertification}</span> <div className="px-2 py-1 bg-search-background rounded">
</div> <span>{displayCertification}</span>
</div>
) : (
<div className="animate-pulse h-6 w-12 bg-gray-300 rounded" />
)
) : ( ) : (
<div className="px-2 py-1 bg-search-background rounded"> <div className="px-2 py-1 bg-search-background rounded">
<span> <span>
{(() => { {(() => {
mediaInfo?.results?.find( const releaseInfo = mediaInfo?.results?.find(
(result: any) => result.iso_3166_1 === "US", (result: any) => result.iso_3166_1 === "US",
); );
return usReleaseInfo && usReleaseInfo.rating return releaseInfo && releaseInfo.rating ? (
? usReleaseInfo.rating releaseInfo.rating
: "Not Rated"; ) : (
<div className="animate-pulse inline-block h-6 w-12 bg-gray-300 rounded" />
);
})()} })()}
</span> </span>
</div> </div>
)} )}
</div> </div>
<div className="flex flex-row gap-2 font-bold"> <div className="flex flex-row gap-2 font-bold">
{media.type === "movie" && {media.type === "movie" ? (
data?.runtime && data?.runtime ? (
formatRuntime(data.runtime)} formatRuntime(data.runtime)
) : (
<div className="animate-pulse h-6 w-16 bg-gray-300 rounded" />
)
) : null}
<div> <div>
{media.type === "movie" {media.type === "movie" ? (
? data?.release_date data?.release_date ? (
? String(data.release_date).split("-")[0] String(data.release_date).split("-")[0]
: null ) : (
: media.type === "show" <div className="animate-pulse h-6 w-12 bg-gray-300 rounded" />
? data?.first_air_date )
? String(data.first_air_date).split("-")[0] ) : media.type === "show" ? (
: null data?.first_air_date ? (
: null} String(data.first_air_date).split("-")[0]
) : (
<div className="animate-pulse h-6 w-12 bg-gray-300 rounded" />
)
) : null}
</div> </div>
</div> </div>
</div> </div>
@ -212,18 +240,25 @@ export function PopupModal({
); );
})} })}
</div> </div>
{data?.genres?.map((genre: { name: string }) => ( {data?.genres?.length > 0
<div ? data.genres.map((genre: { name: string }) => (
key={genre.name} <div
className="px-2 py-1 bg-mediaCard-hoverBackground rounded hover:bg-search-background cursor-default duration-200 transition-colors" key={genre.name}
> className="px-2 py-1 bg-mediaCard-hoverBackground rounded hover:bg-search-background cursor-default duration-200 transition-colors"
{genre.name} >
</div> {genre.name}
))} </div>
))
: Array.from({ length: 3 }).map((_) => (
<div className="animate-pulse h-6 w-24 bg-gray-300 rounded" />
))}
</div> </div>
<p className="relative whitespace-normal font-medium"> <div
className="relative whitespace-normal font-medium overflow-y-auto"
style={{ maxHeight: "100px" }}
>
{data?.overview} {data?.overview}
</p> </div>
<div className="flex justify-center items-center mt-4 mb-1"> <div className="flex justify-center items-center mt-4 mb-1">
<Button <Button
theme="purple" theme="purple"