From 46e933dfb734d80230fe6665ac9600bf28aa8944 Mon Sep 17 00:00:00 2001
From: Jelle van Snik <jellevs@gmail.com>
Date: Tue, 10 Jan 2023 21:23:53 +0100
Subject: [PATCH] fix skeleton

---
 src/views/MediaView.tsx | 20 +++++++++++++++++++-
 src/views/TestView.tsx  |  2 +-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/views/MediaView.tsx b/src/views/MediaView.tsx
index b82332e1..77d54d2c 100644
--- a/src/views/MediaView.tsx
+++ b/src/views/MediaView.tsx
@@ -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();
diff --git a/src/views/TestView.tsx b/src/views/TestView.tsx
index eaac96b6..5688b1c8 100644
--- a/src/views/TestView.tsx
+++ b/src/views/TestView.tsx
@@ -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);