diff --git a/docs/receiver/index.css b/docs/receiver/index.css index d1220a4..9ddfae5 100644 --- a/docs/receiver/index.css +++ b/docs/receiver/index.css @@ -1,9 +1,67 @@ +html, body { - align-items: center; - display: flex; - justify-content: center; + height: 100%; + width: 100%; } -#media { + +body { + margin: initial; + font-family: sans-serif; +} + + +@keyframes splash-loading { + 20% { content: "."; } + 50% { content: ".."; } + 80% { content: "..."; } +} + +.splash { + align-items: center; + background-color: #2a2a2e; + color: white; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + left: 0; + position: fixed; + top: 0; + transition: 250ms ease; + transition-property: transform, opacity; + width: 100%; + z-index: 1; +} + +.splash.splash--disabled { + opacity: 0; + transform: scale(2); +} + +.splash__title { + font-size: 60px; + font-weight: 500; + margin-bottom: 20px; +} + +.splash__action { + position: relative; +} + +.splash__action::after { + content: ""; + display: block; + position: absolute; + right: 0; + top: 0; + transform: translateX(100%); +} +.splash__action::after { + animation: splash-loading 1500ms ease infinite; +} + + +.media { max-height: 100vh; max-width: 100vw; } diff --git a/docs/receiver/index.html b/docs/receiver/index.html index 9040de6..ecd4fb7 100644 --- a/docs/receiver/index.html +++ b/docs/receiver/index.html @@ -1,10 +1,14 @@ - + - + + - - +
+
fx_cast
+
Waiting for connection
+
+ diff --git a/docs/receiver/index.js b/docs/receiver/index.js index 864b15d..31dc731 100644 --- a/docs/receiver/index.js +++ b/docs/receiver/index.js @@ -1,20 +1,51 @@ "use strict"; -const NAMESPACE = "urn:x-cast:fx_cast"; - const castReceiverManager = cast.receiver.CastReceiverManager.getInstance(); -const mediaElement = document.querySelector("#media"); +const mediaElement = document.querySelector(".media"); const mediaManager = new cast.receiver.MediaManager(mediaElement); + +mediaElement.height = window.innerHeight; mediaElement.width = window.innerWidth; let senderId; const messageBus = castReceiverManager.getCastMessageBus( - NAMESPACE + "urn:x-cast:fx_cast" , cast.receiver.CastMessageBus.MessageType.JSON); +messageBus.onMessage = async message => { + const { subject, data } = message.data; + + senderId = message.senderId; + + switch (subject) { + case "peerConnectionOffer": { + await pc.setRemoteDescription(data); + const desc = await pc.createAnswer(); + await pc.setLocalDescription(desc); + + messageBus.send(message.senderId, { + subject: "peerConnectionAnswer" + , data: desc + }); + + break; + } + + case "iceCandidate": { + await pc.addIceCandidate(data); + break; + } + + case "close": { + window.close(); + break; + } + } +}; + const pc = new RTCPeerConnection(); @@ -24,39 +55,17 @@ pc.addEventListener("icecandidate", ev => { , data: ev.candidate }); }); + pc.addEventListener("addstream", ev => { mediaElement.srcObject = ev.stream; mediaElement.webkitRequestFullscreen(); + + const splash = document.querySelector(".splash"); + splash.classList.add("splash--disabled"); }); -messageBus.onMessage = async message => { - const { subject, data } = message.data; - senderId = message.senderId; - - switch (subject) { - case "peerConnectionOffer": - await pc.setRemoteDescription(data); - const desc = await pc.createAnswer(); - await pc.setLocalDescription(desc); - messageBus.send(message.senderId, { - subject: "peerConnectionAnswer" - , data: desc - }); - break; - - case "iceCandidate": - console.log(data); - await pc.addIceCandidate(data); - break; - - case "close": - window.close(); - break; - } -}; - -// TODO: Fix APi shim to make this work +// TODO: Fix API shim to make this work castReceiverManager.onSenderDisconnected = ev => { if (castReceiverManager.getSenders().length <= 0) { window.close();