Skip to content

Migrate to Receiver API V3; fix 10 minutes timeout in iframe mode #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Migrate to Receiver API V3; fix 10 minutes timeout in iframe mode #21

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
00031bd
Change application ID to point to this fork
swiergot Jul 31, 2022
dd742b8
Migrate to Receiver API V3
swiergot Jul 31, 2022
bb5fb50
Fix whitespaces
swiergot Jul 31, 2022
d8c0b15
Fix for 10 minutes timeout
swiergot Jul 31, 2022
a04ddfa
Update README.md
swiergot Jul 31, 2022
d250d35
Revert "Update README.md"
swiergot Jul 31, 2022
1f034b8
Revert "Change application ID to point to this fork"
swiergot Jul 31, 2022
7768086
Prepare for upstream merge
swiergot Jul 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 135 additions & 86 deletions receiver.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,84 +3,121 @@
<head>
<title>DashCast</title>
<style type="text/css">
html{
height: 100%;
padding:0;
width: 100%;
}
body {
overflow:hidden;
height: 100%;
padding: 0;
margin: 0;
background: black url("loading.png") no-repeat 50% 50%;
}

#main{
height: 100%;
background: black url("bg1.png") no-repeat 50% 50%;
opacity: 0;
transition: opacity 4s ease;
}

#main, iframe{
background: black url("bg1.png") no-repeat 50% 50%;
}

#main.show{
opacity: 1;
}

#status{
transition: opacity 1s;
position: absolute;
bottom:0;
left:0;
right:0;
color: #555;
font-weight: bold;
height: 1.2em;
text-align: center;
padding: 10px;
background: rgba(32, 27,37,0.9);
z-index: 10;
}

#status.empty{
opacity: 0;
}
html {
height: 100%;
padding: 0;
width: 100%;
}

body {
overflow: hidden;
height: 100%;
padding: 0;
margin: 0;
background: black url("loading.png") no-repeat 50% 50%;
}

#main {
height: 100%;
background: black url("bg1.png") no-repeat 50% 50%;
opacity: 0;
transition: opacity 4s ease;
}

#main, iframe {
background: black url("bg1.png") no-repeat 50% 50%;
}

#main.show {
opacity: 1;
}

#status {
transition: opacity 1s;
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #555;
font-weight: bold;
height: 1.2em;
text-align: center;
padding: 10px;
background: rgba(32, 27, 37, 0.9);
z-index: 10;
}

#status.empty {
opacity: 0;
}

iframe{
position: absolute;
left:0; top:0; right:0; bottom:0;
opacity: 0;
transition: opacity 0;
width: 100%;
height: 100%;
border: 0 transparent;
}
iframe.show{
transition: opacity 1s;
opacity: 1;
}

iframe {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
opacity: 0;
transition: opacity 0;
width: 100%;
height: 100%;
border: 0 transparent;
}

iframe.show {
transition: opacity 1s;
opacity: 1;
}
</style>
</head>
<body id="dcast">

<div id="main" class="fade">
<iframe id="if1"></iframe>
<iframe id="if2"></iframe>
</div>
<div id="status" class="empty">
</div>

<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<div id="main" class="fade">
<iframe id="if1"></iframe>
<iframe id="if2"></iframe>
</div>
<div id="status" class="empty">
</div>

<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script type="text/javascript">

var reload_time = 0;
var timer_id = null;

// Taken from: https://github.com/home-assistant/frontend/blob/dev/cast/src/receiver/entrypoint.ts
function playDummyMedia() {
const loadRequestData = new cast.framework.messages.LoadRequestData();
loadRequestData.autoplay = true;
loadRequestData.media = new cast.framework.messages.MediaInformation();
loadRequestData.media.contentId = "https://stestagg.github.io/dashcast/loading.png";
loadRequestData.media.contentType = "image/jpeg";
loadRequestData.media.streamType = cast.framework.messages.StreamType.NONE;
const metadata = new cast.framework.messages.GenericMediaMetadata();
metadata.title = "Dummy " + (new Date().toTimeString());
loadRequestData.media.metadata = metadata;
loadRequestData.requestId = 0;
window.playerManager.load(loadRequestData);
window.setTimeout(playDummyMedia, 60 * 9 * 1000);
}

function removeTouchControls() {
var controls = document.body.querySelector("touch-controls");
if (controls) {
controls.remove();
}
}

function setupMutationObserver() {
// This is to allow the touch display to work
const observer = new MutationObserver(removeTouchControls);
observer.observe(document.body, { childList: true, subtree: true });
}

function createMediaPlayer() {
const mediaPlayer = document.createElement("cast-media-player");
mediaPlayer.style.display = "none";
document.body.append(mediaPlayer);
setupMutationObserver();
}

window.onload = function() {
var main = document.getElementById("main");
var status = document.getElementById("status");
Expand Down Expand Up @@ -137,32 +174,44 @@
window.setTimeout(function() { window.location = url; }, 1000);
}

cast.receiver.logger.setLevelValue(0);
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
castReceiverManager.onReady = function(event) {
window.castReceiverManager.setApplicationState("Application ready");
createMediaPlayer();

window.castReceiverContext = cast.framework.CastReceiverContext.getInstance();
window.castReceiverContext.setLoggerLevel(cast.framework.LoggerLevel.DEBUG);
window.castReceiverContext.addEventListener(cast.framework.system.EventType.READY, function(event) {
window.castReceiverContext.setApplicationState("Application ready");
setStatus("Waiting for address")
};

// create a CastMessageBus to handle messages for a custom namespace
window.messageBus = window.castReceiverManager.getCastMessageBus('urn:x-cast:es.offd.dashcast');

// handler for the CastMessageBus message event
window.messageBus.onMessage = function(event) {
var msg = JSON.parse(event.data);
});

window.playerManager = window.castReceiverContext.getPlayerManager();

const options = new cast.framework.CastReceiverOptions();
const customNS = "urn:x-cast:es.offd.dashcast";

options.customNamespaces = {};
options.customNamespaces[customNS] = cast.framework.system.MessageType.JSON;

window.castReceiverContext.addCustomMessageListener(customNS, function(event) {
var msg = event.data;
if (msg.force) {
return loadPage(msg.url);
}

playDummyMedia();

loadFrame(msg.url, (msg.reload) ? parseInt(msg.reload_time, 10) : 0);
// inform all senders on the CastMessageBus of the incoming message event
// inform all senders on the message bus of the incoming message event
// sender message listener will be invoked
window.messageBus.send(event.senderId, event.data);
}
window.castReceiverContext.sendCustomMessage(customNS, event.senderId, event.data);
});

options.statusText = "Application is starting";
options.disableIdleTimeout = true;

// initialize the CastReceiverManager with an application status message
window.castReceiverManager.start({statusText: "Application is starting"});
// initialize the CastReceiverContext with options
window.castReceiverContext.start(options);
};

</script>
</body>
</html>
</html>