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

fix skeleton

Browse source
This commit is contained in:
Jelle van Snik 2023-01-10 21:23:53 +01:00
parent d28e6e6735
commit 46e933dfb7
2 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/views/MediaView.tsx
View file

@ -6,7 +6,6 @@ import { Icons } from "@/components/Icon";
import { Navigation } from "@/components/layout/Navigation";
import { Paper } from "@/components/layout/Paper";
import { LoadingSeasons, Seasons } from "@/components/layout/Seasons";
import { SkeletonVideoPlayer } from "@/components/media/VideoPlayer";
import { DecoratedVideoPlayer } from "@/components/video/DecoratedVideoPlayer";
import { ArrowLink } from "@/components/text/ArrowLink";
import { DotList } from "@/components/text/DotList";
@ -30,6 +29,7 @@ import {
import { getWatchedFromPortable, useWatchedContext } from "@/state/watched";
import { SourceControl } from "@/components/video/controls/SourceControl";
import { ProgressListenerControl } from "@/components/video/controls/ProgressListenerControl";
import { Loading } from "@/components/layout/Loading";
import { NotFoundChecks } from "./notfound/NotFoundChecks";
interface StyledMediaViewProps {
@ -37,6 +37,24 @@ interface StyledMediaViewProps {
stream: MWMediaStream;
}
export function SkeletonVideoPlayer(props: { error?: boolean }) {
return (
<div className="flex aspect-video w-full items-center justify-center bg-denim-200 lg:rounded-xl">
{props.error ? (
<div className="flex flex-col items-center">
<IconPatch icon={Icons.WARNING} className="text-red-400" />
<p className="mt-5 text-white">Couldn&apos;t get your stream</p>
</div>
) : (
<div className="flex flex-col items-center">
<Loading />
<p className="mt-3 text-white">Getting your stream...</p>
</div>
)}
</div>
);
}
function StyledMediaView(props: StyledMediaViewProps) {
const reactHistory = useHistory();
const watchedStore = useWatchedContext();

2
src/views/TestView.tsx
View file

@ -20,7 +20,7 @@ import { useCallback, useState } from "react";
// - browser: firefox, chrome, edge, safari desktop
// - phones: android firefox, android chrome, iphone safari
// - devices: ipadOS
// - features: HLS, error handling
// - features: HLS, error handling, preload interactions
export function TestView() {
const [show, setShow] = useState(true);