From f201d8e803d6491c62c3cbe4a3e9d93ddb23b8ec Mon Sep 17 00:00:00 2001 From: Roy Olav Purser Date: Thu, 20 May 2021 17:02:45 +0200 Subject: [PATCH] override RemotePlayer --- frontend/index.html | 3 +- frontend/script.js | 113 +++++++++++++++++++++++--------------------- 2 files changed, 61 insertions(+), 55 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 388481f..d31631f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,8 +2,9 @@ {% for item in meta %} {% block item %}{% end %}{% end %} + + - diff --git a/frontend/script.js b/frontend/script.js index f0b7a47..0a379a3 100644 --- a/frontend/script.js +++ b/frontend/script.js @@ -1,67 +1,72 @@ (() => { - let upstream = "{{ stream }}"; - let xhr = new XMLHttpRequest(); + const setRemotePlayer = () => { + class NewRemotePlayer extends cast.framework.RemotePlayer { + constructor() { + super(); + this.canControlVolume = false; + } + } + cast.framework.RemotePlayer = NewRemotePlayer; + } + + const upstream = "{{ stream }}"; + const xhr = new XMLHttpRequest(); xhr.open("HEAD", upstream, true); xhr.send(); let count = 2; - let handleCount = () => { + const handleCount = () => { if(--count === 0) { handle(); } } - let handle = () => { - let bodies = document.getElementsByTagName("body"); - if(bodies.length === 1) { - let body = bodies[0]; - let video = document.createElement("video"); - video.className = "video-js vjs-big-play-centered"; - body.appendChild(video); - let ctype = xhr.getResponseHeader("Content-Type"); - console.log(ctype); - let options = {}; - options.controls = true; - options.liveui = true; - options.responsive = true; - options.fill = true; - options.techOrder = ["chromecast", "html5"]; - options.plugins = {}; - options.plugins.chromecast = {}; - options.plugins.chromecast.requestTitleFn = (src) => { - return "{% raw title %}"; - } - - let player = videojs(video, options); - let source = {}; - source.type = ctype; - source.src = upstream; - player.src(source); - let Button = videojs.getComponent("Button"); - let cbutton = {}; - cbutton.clickHandler = (ev) => { - try { - player.chromecastSessionManager.remotePlayer.canControlVolume = false; - } catch(error) { - console.log(error); - } - player.trigger("chromecastRequested"); - } - let button = new Button(player, cbutton); - button.addClass("fab"); - button.addClass("fa-chromecast"); - button.addClass("vjs-control"); - button.addClass("vjs-button"); - button.addClass("vjs-big-chromecast"); - - //player.one("chromecastDevicesAvailable", () => { - player.addChild(button); - player.one("play", () => { - player.removeChild(button); - }); - //}); - } + const handleLoaded = () => { + setRemotePlayer(); + handleCount(); } - document.addEventListener("DOMContentLoaded", handleCount); + + const handle = () => { + const [body] = document.getElementsByTagName("body"); + const video = document.createElement("video"); + video.className = "video-js vjs-big-play-centered"; + body.appendChild(video); + const ctype = xhr.getResponseHeader("Content-Type"); + console.log(ctype); + const options = {}; + options.controls = true; + options.liveui = true; + options.responsive = true; + options.fill = true; + options.techOrder = ["chromecast", "html5"]; + options.plugins = {}; + options.plugins.chromecast = {}; + options.plugins.chromecast.requestTitleFn = (src) => { + return "{% raw title %}"; + } + + const player = videojs(video, options); + const source = {}; + source.type = ctype; + source.src = upstream; + player.src(source); + const Button = videojs.getComponent("Button"); + const cbutton = {}; + cbutton.clickHandler = (ev) => { + player.trigger("chromecastRequested"); + } + const button = new Button(player, cbutton); + button.addClass("fab"); + button.addClass("fa-chromecast"); + button.addClass("vjs-control"); + button.addClass("vjs-button"); + button.addClass("vjs-big-chromecast"); + + player.addChild(button); + player.one("play", () => { + player.removeChild(button); + }); + } + document.addEventListener("DOMContentLoaded", handleLoaded); xhr.addEventListener("load", handleCount); })();