Show text while waiting for video to load

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 => {
+        return (
-            if (el && this.ms) {
+            <>
-                el.srcObject = this.ms
+                <p id="loading-text">Waiting for video to load.</p>
-            }
+                <video ref={el => {
-        }} id="video" autoPlay muted controls />)
+                    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() {