Completed buildPlayer method for youtubeEmbedHandler

src/utils/media/yanker.js

@@ -33,7 +33,7 @@ module.exports.yankMedia = async function(url, title){
             return await iaUtil.fetchMetadata(pullType.id, title); 
         case "yt":
             //return mediao object list from the YT-DLP module's youtube function
-            return await ytdlpUtil.fetchYoutubeVideoMetadata(pullType.id, title);
+            return await ytdlpUtil.fetchYoutubeMetadata(pullType.id, title);
         case "dm":
             //return mediao object list from the YT-DLP module's dailymotion function
             return await ytdlpUtil.fetchDailymotionMetadata(pullType.id, title);
@@ -58,7 +58,7 @@ module.exports.refreshRawLink = async function(mediaObj){
             }
 
             //Re-fetch media metadata
-            metadata = await ytdlpUtil.fetchYoutubeVideoMetadata(mediaObj.id);
+            metadata = await ytdlpUtil.fetchYoutubeMetadata(mediaObj.id);
             //Refresh media rawlink from metadata
             mediaObj.rawLink = metadata[0].rawLink;
 

src/utils/media/ytdlpUtils.js

@@ -29,7 +29,7 @@ const media = require('../../app/channel/media/media.js');
 const regexUtils = require('../regexUtils.js');
 const loggerUtils = require('../loggerUtils.js')
 
-module.exports.fetchYoutubMetadata = async function(id, title){
+module.exports.fetchYoutubeMetadata = async function(id, title){
     try{
         //Try to pull media from youtube id
         const media = await fetchMetadata(`https://youtu.be/${id}`, title, 'yt');

www/css/channel.css

@@ -63,6 +63,11 @@ div#media-panel-div{
     font-size: 1.2em;
 }
 
+#youtube-embed-player{
+    width: 100%;
+    height: 100%;
+}
+
 div#chat-panel-div{
     position: relative;
     display: flex;

www/js/channel/channel.js

@@ -163,7 +163,7 @@ class channel{
 }
 
 //Youtube iframe-embed API load handler
-function onYoutubeIframeAPIReady(){
+function onYouTubeIframeAPIReady(){
     //Set embed api to true
     client.ytEmbedAPILoaded = true;
 
@@ -171,7 +171,7 @@ function onYoutubeIframeAPIReady(){
     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"){
+    if(nowPlaying.type == 'yt' && localStorage.getItem('ytPlayerType') == "embed"){
         //Restart the video now that the embed api has loaded
         client.player.start({media: nowPlaying});
     }

www/js/channel/mediaHandler.js

@@ -312,23 +312,39 @@ class youtubeEmbedHandler extends mediaHandler{
     }
 
     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)
-                }
-            });
+        //If the embed API hasn't loaded
+        if(!this.client.ytEmbedAPILoaded){
+            //Complain and stop
+            return console.warn("youtubeEmbedHandler.buildPlayer() Called before YT Iframe API Loaded, waiting on refresh to rebuild...");
         }
 
+        //Clear out the player title so that youtube's baked in title can do it's thing.
+        //This will be replaced once we complete the full player control and remove the defualt youtube UI
+        this.player.title.textContent = "";
+
+        //Create temp div for yt api to replace
+        const tempDiv = document.createElement('div');
+        //Name the div
+        tempDiv.id = "youtube-embed-player"
+        //Append it to the video container
+        this.player.videoContainer.appendChild(tempDiv);
+
+        //Create a new youtube player using the official YT iframe-embed api
+        this.video = new YT.Player('youtube-embed-player', {
+            //Inject video id
+            videoId: this.nowPlaying.id,
+            //Set up event listeners (NGL kinda nice of google to do it this way...)
+            events: {
+                'onReady': this.initializePlayer.bind(this)
+            }
+        }); 
+
         //Call derived function
         super.buildPlayer();
     }
 
-    embedPlayer(){
+    initializePlayer(){
+        //Kick the video off
+        this.video.playVideo();
     }
 }

www/js/channel/player.js

@@ -87,8 +87,11 @@ class player{
             this.mediaHandler = new nullHandler(client, this);
         //Otherwise
         }else{
-            //If we have a raw-file compatible source
-            if(data.media.type == 'ia' || data.media.type == 'raw' || data.media.type == 'yt' || data.media.type == 'dm'){
+            //If we have a youtube video and the official embedded iframe player is selected
+            if(data.media.type == 'yt' && localStorage.getItem("ytPlayerType") == 'embed'){
+                this.mediaHandler = new youtubeEmbedHandler(this.client, this, data.media);
+            //Otherwise, if we have a raw-file compatible source
+            }else if(data.media.type == 'ia' || data.media.type == 'raw' || data.media.type == 'yt' || data.media.type == 'dm'){
                 //Create a new raw file handler for it
                 this.mediaHandler = new rawFileHandler(client, this, data.media);
                 //Sync to time stamp