diff --git a/src/utils/media/yanker.js b/src/utils/media/yanker.js index 6ee63db..09cb486 100644 --- a/src/utils/media/yanker.js +++ b/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; diff --git a/src/utils/media/ytdlpUtils.js b/src/utils/media/ytdlpUtils.js index 16bbd4e..af5805d 100644 --- a/src/utils/media/ytdlpUtils.js +++ b/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'); diff --git a/www/css/channel.css b/www/css/channel.css index abad3cc..e7644c4 100644 --- a/www/css/channel.css +++ b/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; diff --git a/www/js/channel/channel.js b/www/js/channel/channel.js index 4670dcb..a246996 100644 --- a/www/js/channel/channel.js +++ b/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}); } diff --git a/www/js/channel/mediaHandler.js b/www/js/channel/mediaHandler.js index 04d6ed6..e6f7e2a 100644 --- a/www/js/channel/mediaHandler.js +++ b/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(); } } \ No newline at end of file diff --git a/www/js/channel/player.js b/www/js/channel/player.js index 552d3fb..ec59b1e 100644 --- a/www/js/channel/player.js +++ b/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