diff --git a/www/js/channel/channel.js b/www/js/channel/channel.js index 90402f8..4670dcb 100644 --- a/www/js/channel/channel.js +++ b/www/js/channel/channel.js @@ -21,6 +21,9 @@ class channel{ //Define socket listeners this.defineListeners(); + //Flag youtube iframe-embed api as unloaded + this.ytEmbedAPILoaded = false; + //Scrape channel name off URL this.channelName = window.location.pathname.split('/c/')[1].split('/')[0]; @@ -119,8 +122,9 @@ class channel{ //Switch/case by config key switch(key){ case 'ytPlayerType': - //If the user is running the embedded player - if(value == 'embed'){ + const embedScript = document.querySelector(".yt-embed-api"); + //If the user is running the embedded player and we don't have en embed script loaded + if(value == 'embed' && embedScript == null){ //Find our footer const footer = document.querySelector('footer'); @@ -133,7 +137,21 @@ class channel{ //Append the script tag to the top of the footer to give everything else access footer.prepend(ytEmbedAPI); + //If we're not using the embed player but the script is loaded + }else if(embedScript != null){ + //Pull all scripts since the main one might have pulled others + const scripts = document.querySelectorAll('script'); + + //Iterate through all script tags on the page + for(let script of scripts){ + //If the script came from youtube + if(script.src.match(/youtube\.com|youtu\.be/)){ + //Rip it out + script.remove(); + } + } } + //Stop while we're ahead return; } @@ -144,4 +162,19 @@ class channel{ ]); } +//Youtube iframe-embed API load handler +function onYoutubeIframeAPIReady(){ + //Set embed api to true + client.ytEmbedAPILoaded = true; + + //Get currently playing item + const nowPlaying = client.player.mediaHandler.nowPlaying; + + //If we're playing a youtube video and the official embeds are enabled + if(nowPlaying.type == 'yt' && localStorage.get('ytPlayerType') == "embed"){ + //Restart the video now that the embed api has loaded + client.player.start({media: nowPlaying}); + } +} + const client = new channel(); \ No newline at end of file diff --git a/www/js/channel/mediaHandler.js b/www/js/channel/mediaHandler.js index 209cd8f..04d6ed6 100644 --- a/www/js/channel/mediaHandler.js +++ b/www/js/channel/mediaHandler.js @@ -303,4 +303,32 @@ class rawFileHandler extends rawFileBase{ //Return current timestamp return this.video.currentTime; } +} + +class youtubeEmbedHandler extends mediaHandler{ + constructor(client, player, media){ + //Call derived constructor + super(client, player, media, 'ytEmbed'); + } + + buildPlayer(){ + //If the embed API has loaded + if(this.client.ytEmbedAPILoaded){ + //Create a new youtube player using the official YT iframe-embed api + this.video = new YT.Player('video', { + //Inject video id + videoID: media.id, + //Set up event listeners (NGL kinda nice of google to do it this way...) + events: { + 'onReady': this.embedPlayer.bind(this) + } + }); + } + + //Call derived function + super.buildPlayer(); + } + + embedPlayer(){ + } } \ No newline at end of file diff --git a/www/js/channel/panels/settingsPanel.js b/www/js/channel/panels/settingsPanel.js index c17ef7c..c2e0aca 100644 --- a/www/js/channel/panels/settingsPanel.js +++ b/www/js/channel/panels/settingsPanel.js @@ -24,6 +24,7 @@ class settingsPanel extends panelObj{ docSwitch(){ this.youtubeSource = this.panelDocument.querySelector("#settings-panel-youtube-source select"); + this.renderSettings(); this.setupInput(); } @@ -31,7 +32,12 @@ class settingsPanel extends panelObj{ this.youtubeSource.addEventListener('change', this.updateYoutubeSource.bind(this)); } + renderSettings(){ + this.youtubeSource.value = localStorage.getItem("ytPlayerType"); + } + updateYoutubeSource(){ localStorage.setItem("ytPlayerType", this.youtubeSource.value); + client.processConfig("ytPlayerType", this.youtubeSource.value); } } \ No newline at end of file