From 663150f269e44e93274d898f21ad68ad59cd665c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torjus=20H=C3=A5kestad?= <torjus@usit.uio.no>
Date: Sat, 2 Dec 2023 13:33:50 +0100
Subject: [PATCH] Show text while waiting for video to load

---
 src/js/media.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/js/media.tsx b/src/js/media.tsx
index 39b73bc..78966b5 100644
--- a/src/js/media.tsx
+++ b/src/js/media.tsx
@@ -10,6 +10,7 @@ type MediaContainerProps = {
 type MediaContainerState = {
     iceReady: boolean
     remoteReady: boolean
+    videoReady: boolean
 }
 
 export class MediaContainer extends React.Component<MediaContainerProps, MediaContainerState> {
@@ -23,7 +24,8 @@ export class MediaContainer extends React.Component<MediaContainerProps, MediaCo
         this.api = props.api
         this.state = {
             iceReady: false,
-            remoteReady: false
+            remoteReady: false,
+            videoReady: false
         }
 
         this.pc = new RTCPeerConnection({
@@ -111,11 +113,24 @@ export class MediaContainer extends React.Component<MediaContainerProps, MediaCo
         if (!this.state.remoteReady) {
             return <p>Waiting for remote.</p>
         }
-        return (<video ref={el => {
-            if (el && this.ms) {
-                el.srcObject = this.ms
-            }
-        }} id="video" autoPlay muted controls />)
+        return (
+            <>
+                <p id="loading-text">Waiting for video to load.</p>
+                <video ref={el => {
+                    if (el && this.ms) {
+                        el.srcObject = this.ms
+                        el.hidden = true
+                        el.addEventListener('loadeddata', () => {
+                            const t = document.getElementById("loading-text")
+                            el.hidden = false
+                            if (t) {
+                                t.hidden = true
+                            }
+                        })
+                    }
+                }} id="video" autoPlay muted controls />
+            </>
+        )
     }
 
     render() {