Started working on implementing official YT iframe-embed API

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();

www/js/channel/mediaHandler.js

@@ -304,3 +304,31 @@ class rawFileHandler extends rawFileBase{
         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(){
+    }
+}

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);
     }
 }