torjus/ministream-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Show text while waiting for video to load

Browse Source
This commit is contained in:
Torjus Håkestad 2023-12-02 13:33:50 +01:00
parent 55fbbb3dcc
commit 663150f269
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/js/media.tsx
View File

@ -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() {