rainbownapkin/canopy
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Completed buildPlayer method for youtubeEmbedHandler

Browse source
This commit is contained in:
rainbow napkin 2025-05-08 08:22:42 -04:00
parent 1344756449
commit 1b0caa5e02
6 changed files with 43 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

4
www/js/channel/channel.js
View file

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

40
www/js/channel/mediaHandler.js
View file

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

7
www/js/channel/player.js
View file

@ -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