From 4d07751a4a45fa8fc259d6c2fc0e911154fced8b Mon Sep 17 00:00:00 2001
From: Jelle van Snik <jellevs@gmail.com>
Date: Sat, 14 Jan 2023 00:27:40 +0100
Subject: [PATCH] first load spinner

---
 src/components/video/controls/LoadingControl.tsx     |  4 +++-
 src/components/video/controls/MiddlePauseControl.tsx |  1 +
 src/components/video/hooks/useVideoPlayer.ts         | 11 +++++++++++
 src/views/search/SearchResultsView.tsx               |  2 ++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/video/controls/LoadingControl.tsx b/src/components/video/controls/LoadingControl.tsx
index eeea8d8f..8b38cef9 100644
--- a/src/components/video/controls/LoadingControl.tsx
+++ b/src/components/video/controls/LoadingControl.tsx
@@ -4,7 +4,9 @@ import { useVideoPlayerState } from "../VideoContext";
 export function LoadingControl() {
   const { videoState } = useVideoPlayerState();
 
-  if (!videoState.isLoading) return null;
+  const isLoading = videoState.isFirstLoading || videoState.isLoading;
+
+  if (!isLoading) return null;
 
   return <Spinner />;
 }
diff --git a/src/components/video/controls/MiddlePauseControl.tsx b/src/components/video/controls/MiddlePauseControl.tsx
index 9bbbe08c..b934db0a 100644
--- a/src/components/video/controls/MiddlePauseControl.tsx
+++ b/src/components/video/controls/MiddlePauseControl.tsx
@@ -12,6 +12,7 @@ export function MiddlePauseControl() {
 
   if (videoState.hasPlayedOnce) return null;
   if (videoState.isPlaying) return null;
+  if (videoState.isFirstLoading) return null;
 
   return (
     <div
diff --git a/src/components/video/hooks/useVideoPlayer.ts b/src/components/video/hooks/useVideoPlayer.ts
index ae2a199d..4589c07e 100644
--- a/src/components/video/hooks/useVideoPlayer.ts
+++ b/src/components/video/hooks/useVideoPlayer.ts
@@ -13,6 +13,7 @@ export type PlayerState = {
   isPaused: boolean;
   isSeeking: boolean;
   isLoading: boolean;
+  isFirstLoading: boolean;
   isFullscreen: boolean;
   time: number;
   duration: number;
@@ -32,6 +33,7 @@ export const initialPlayerState: PlayerContext = {
   isFullscreen: false,
   isLoading: false,
   isSeeking: false,
+  isFirstLoading: true,
   time: 0,
   duration: 0,
   volume: 0,
@@ -64,6 +66,7 @@ function readState(player: HTMLVideoElement, update: SetPlayer) {
     ...state,
     pausedWhenSeeking: s.pausedWhenSeeking,
     hasPlayedOnce: s.hasPlayedOnce,
+    isFirstLoading: s.isFirstLoading,
   }));
 }
 
@@ -122,6 +125,12 @@ function registerListeners(player: HTMLVideoElement, update: SetPlayer) {
       buffered: handleBuffered(player.currentTime, player.buffered),
     }));
   };
+  const canplay = () => {
+    update((s) => ({
+      ...s,
+      isFirstLoading: false,
+    }));
+  };
 
   player.addEventListener("pause", pause);
   player.addEventListener("playing", playing);
@@ -133,6 +142,7 @@ function registerListeners(player: HTMLVideoElement, update: SetPlayer) {
   player.addEventListener("volumechange", volumechange);
   player.addEventListener("progress", progress);
   player.addEventListener("waiting", waiting);
+  player.addEventListener("canplay", canplay);
 
   return () => {
     player.removeEventListener("pause", pause);
@@ -145,6 +155,7 @@ function registerListeners(player: HTMLVideoElement, update: SetPlayer) {
     player.removeEventListener("volumechange", volumechange);
     player.removeEventListener("progress", progress);
     player.removeEventListener("waiting", waiting);
+    player.removeEventListener("canplay", canplay);
   };
 }
 
diff --git a/src/views/search/SearchResultsView.tsx b/src/views/search/SearchResultsView.tsx
index 60a61115..20764b22 100644
--- a/src/views/search/SearchResultsView.tsx
+++ b/src/views/search/SearchResultsView.tsx
@@ -52,6 +52,8 @@ export function SearchResultsView({ searchQuery }: { searchQuery: MWQuery }) {
   );
 
   useEffect(() => {
+    // TODO use cache
+    // TODO run immediately without debounce on mount
     async function runSearch(query: MWQuery) {
       const searchResults = await runSearchQuery(query);
       if (!searchResults) return;