KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes for chromecasting and embedded player

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2018-05-05 13:05:49 +02:00
parent 8083efa676
commit 31904a2f84
8 changed files with 391 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
server/public/assets/css/embed.css
View File

@@ -13,6 +13,13 @@
transition: all .3s !important; transition: all .3s !important;
} }
#player_loader_container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
#player_overlay { #player_overlay {
position: absolute; position: absolute;
height: calc(100% - 32px); height: calc(100% - 32px);

2
server/public/assets/css/style.css
View File

@@ -234,7 +234,7 @@ margin: auto;
#playing_on #chromecast_text{ #playing_on #chromecast_text{
font-size: 20px; font-size: 20px;
padding-left: 8px; padding-left: 55px;
} }
.prev_page, .next_page, .last_page, .first_page{ .prev_page, .next_page, .last_page, .first_page{

6
server/public/assets/js/channel.js
View File

@@ -151,7 +151,7 @@ var Channel = {
if(!Helper.mobilecheck() && (document.querySelectorAll("#alreadychannel").length === 0 || !Hostcontroller.old_id || document.getElementById("code-text").innerText.toUpperCase() == "ABBADUR")) setup_host_initialization(); if(!Helper.mobilecheck() && (document.querySelectorAll("#alreadychannel").length === 0 || !Hostcontroller.old_id || document.getElementById("code-text").innerText.toUpperCase() == "ABBADUR")) setup_host_initialization();
if(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck()){ if(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck()){
setup_youtube_listener(); setup_now_playing_listener();
get_list_listener(); get_list_listener();
setup_suggested_listener(); setup_suggested_listener();
if(!client) { if(!client) {
@@ -349,8 +349,8 @@ var Channel = {
total = total * e.clientX; total = total * e.clientX;
if(!chromecastAvailable){ if(!chromecastAvailable){
Player.player.seekTo(total + Player.np.start); if(videoSource == "youtube") Player.player.seekTo(total + Player.np.start);
else if(videoSource == "soundcloud") Player.soundcloud_player.seek((total + Player.np.start) * 1000);
dMinutes = Math.floor(duration / 60); dMinutes = Math.floor(duration / 60);
dSeconds = duration - dMinutes * 60; dSeconds = duration - dMinutes * 60;
currDurr = total; currDurr = total;

12
server/public/assets/js/embed.js
View File

@@ -8,6 +8,7 @@ var startTime = 0;
var socket_connected = false; var socket_connected = false;
var dynamicListeners = {}; var dynamicListeners = {};
var player_ready = false; var player_ready = false;
var previousSoundcloud;
var empty_clear = false; var empty_clear = false;
var fix_too_far = false; var fix_too_far = false;
var beginning = false; var beginning = false;
@@ -52,6 +53,11 @@ var Crypt = {
} }
}; };
SC.initialize({
client_id: '***REMOVED***'
}, function() {
});
function receiveMessage(event) { function receiveMessage(event) {
if(event.data == "parent") { if(event.data == "parent") {
window.parentWindow = event.source; window.parentWindow = event.source;
@@ -116,7 +122,7 @@ window.addEventListener("DOMContentLoaded", function() {
}); });
setup_host_initialization(); setup_host_initialization();
setup_youtube_listener(); setup_now_playing_listener();
setup_list_listener(); setup_list_listener();
window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady; window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
@@ -144,8 +150,8 @@ function setup_host_initialization() {
socket.on("id", Hostcontroller.host_listener); socket.on("id", Hostcontroller.host_listener);
} }
function setup_youtube_listener() { function setup_now_playing_listener() {
socket.on("np", Player.youtube_listener); socket.on("np", Player.now_playing_listener);
} }
function setup_list_listener() { function setup_list_listener() {

12
server/public/assets/js/functions.js
View File

@@ -54,7 +54,11 @@ function hide_native(way) {
Helper.toggleClass("#duration", "hide"); Helper.toggleClass("#duration", "hide");
Helper.toggleClass("#fullscreen", "hide"); Helper.toggleClass("#fullscreen", "hide");
try{ try{
if(videoSource == "youtube") {
Player.player.stopVideo(); Player.player.stopVideo();
} else if(videoSource == "soundcloud") {
Player.soundcloud_player.pause();
}
} catch(e){} } catch(e){}
Player.stopInterval = true; Player.stopInterval = true;
if(Helper.mobilecheck()){ if(Helper.mobilecheck()){
@@ -102,7 +106,11 @@ function hide_native(way) {
Helper.toggleClass("#duration", "hide"); Helper.toggleClass("#duration", "hide");
Helper.toggleClass("#fullscreen", "hide"); Helper.toggleClass("#fullscreen", "hide");
if(videoSource == "youtube") {
Player.player.playVideo(); Player.player.playVideo();
} else if(videoSource == "soundcloud") {
Player.soundcloud_player.play();
}
Player.stopInterval = false; Player.stopInterval = false;
duration = Player.player.getDuration(); duration = Player.player.getDuration();
Player.durationSetter(); Player.durationSetter();
@@ -427,8 +435,8 @@ function setup_no_connection_listener(){
}); });
} }
function setup_youtube_listener(){ function setup_now_playing_listener(){
socket.on("np", Player.youtube_listener); socket.on("np", Player.now_playing_listener);
} }
function get_list_listener(){ function get_list_listener(){

16
server/public/assets/js/list.js
View File

@@ -22,19 +22,19 @@ var List = {
prev_chan_list = chan; prev_chan_list = chan;
List.populate_list(msg.playlist); List.populate_list(msg.playlist);
if(full_playlist.length > 0) { if(full_playlist.length > 0) {
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
} }
} else if(offline && prev_chan_list == chan && full_playlist != undefined && !msg.shuffled){ } else if(offline && prev_chan_list == chan && full_playlist != undefined && !msg.shuffled){
List.populate_list(full_playlist, true); List.populate_list(full_playlist, true);
if(full_playlist.length > 0) { if(full_playlist.length > 0) {
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
} }
} }
break; break;
case "added": case "added":
List.added_song(msg.value); List.added_song(msg.value);
if(full_playlist.length > 0) { if(full_playlist.length > 0) {
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
} }
found_array = []; found_array = [];
found_array_index = 0; found_array_index = 0;
@@ -48,7 +48,7 @@ var List = {
if(!offline){ if(!offline){
List.voted_song(msg.value, msg.time); List.voted_song(msg.value, msg.time);
if(full_playlist.length > 0) { if(full_playlist.length > 0) {
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
} }
} }
found_array = []; found_array = [];
@@ -58,7 +58,7 @@ var List = {
if((offline && msg.offline_change) || !offline) { if((offline && msg.offline_change) || !offline) {
if(window.location.pathname != "/") List.song_change(msg.time, msg.remove); if(window.location.pathname != "/") List.song_change(msg.time, msg.remove);
if(full_playlist.length > 0) { if(full_playlist.length > 0) {
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
} }
found_array = []; found_array = [];
found_array_index = 0; found_array_index = 0;
@@ -72,7 +72,7 @@ var List = {
if(window.location.pathname != "/") List.song_change_prev(msg.time); if(window.location.pathname != "/") List.song_change_prev(msg.time);
if(full_playlist.length > 0) { if(full_playlist.length > 0) {
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
} }
found_array = []; found_array = [];
found_array_index = 0; found_array_index = 0;
@@ -443,7 +443,7 @@ var List = {
} }
} }
full_playlist.splice(List.getIndexOfSong(deleted), 1); full_playlist.splice(List.getIndexOfSong(deleted), 1);
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
//} //}
} catch(err) { } catch(err) {
@@ -461,7 +461,7 @@ var List = {
Helper.css(nextToChange, "display", "inline-flex"); Helper.css(nextToChange, "display", "inline-flex");
Helper.css(nextToChange, "height", List.element_height + "px"); Helper.css(nextToChange, "height", List.element_height + "px");
} }
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id}); Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
} }
} }
if(full_playlist.length < 2){ if(full_playlist.length < 2){

13
server/public/assets/js/listeners.js
View File

@@ -40,6 +40,7 @@ if(window.location.hostname == "localhost" || window.location.hostname == "clien
var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ="; var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ=";
} }
var retry_frontpage; var retry_frontpage;
var previousSoundcloud;
var chromecast_specs_sent = false; var chromecast_specs_sent = false;
var dragging = false; var dragging = false;
var user_auth_started = false; var user_auth_started = false;
@@ -283,12 +284,16 @@ initializeCastApi = function() {
mobile_beginning = false; mobile_beginning = false;
var _seekTo; var _seekTo;
try{ try{
if(videoSource == "youtube") {
_seekTo = Player.player.getCurrentTime(); _seekTo = Player.player.getCurrentTime();
} else if(videoSource == "soundcloud") {
_seekTo = Player.soundcloud_player.currentTime() / 1000;
}
} catch(event){ } catch(event){
_seekTo = seekTo; _seekTo = seekTo;
} }
castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", start: Player.np.start, end: Player.np.end, videoId: video_id, seekTo: _seekTo, channel: chan.toLowerCase(), source: videoSource}) castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", start: Player.np.start, end: Player.np.end, videoId: video_id, seekTo: _seekTo, channel: chan.toLowerCase(), source: videoSource, thumbnail: Player.np.thumbnail})
castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source}) castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail})
if(Helper.mobilecheck() && !chromecast_specs_sent) { if(Helper.mobilecheck() && !chromecast_specs_sent) {
socket.emit("get_id"); socket.emit("get_id");
@@ -316,8 +321,8 @@ initializeCastApi = function() {
} catch(event){ } catch(event){
_seekTo = seekTo; _seekTo = seekTo;
} }
castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", start: Player.np.start, end: Player.np.end, videoId: video_id, seekTo: _seekTo, channel: chan.toLowerCase(), source: videoSource}) castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", start: Player.np.start, end: Player.np.end, videoId: video_id, seekTo: _seekTo, channel: chan.toLowerCase(), source: videoSource, thumbnail: Player.np.thumbnail})
castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source}) castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail})
hide_native(1); hide_native(1);
Helper.css("#channel-load", "display", "none"); Helper.css("#channel-load", "display", "none");
Helper.addClass('.castButton', 'castButton-white-active'); Helper.addClass('.castButton', 'castButton-white-active');

99
server/public/assets/js/player.js
View File

@@ -11,15 +11,39 @@ var Player = {
setVolume: function(val) {} setVolume: function(val) {}
}, },
youtube_listener: function(obj) { now_playing_listener: function(obj) {
if(obj.np != undefined) { if(obj.np != undefined) {
if(offline && (video_id == "" || video_id == undefined)){
video_id = obj.np[0].id; video_id = obj.np[0].id;
Player.np = { Player.np = obj.np[0];
id: video_id, Player.np.start = obj.np[0].start;
start: obj.np[0].start, Player.np.end = obj.np[0].end;
end: obj.np[0].end, Player.np.duration = obj.np[0].duration;
duration: obj.np[0].duration,
}; if(!obj.np[0].hasOwnProperty("start")) {
Player.np.start = 0;
}
if(!obj.np[0].hasOwnProperty("end")) {
Player.np.end = Player.np.duration;
}
if(obj.conf != undefined) {
conf = obj.conf[0];
}
time = obj.time;
seekTo = 0 + Player.np.start;
startTime = time - conf.startTime;
song_title = obj.np[0].title;
duration = obj.np[0].duration;
videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube";
Player.getTitle(song_title, viewers);
Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
} else {
video_id = obj.np[0].id;
Player.np = obj.np[0];
Player.np.start = obj.np[0].start;
Player.np.end = obj.np[0].end;
Player.np.duration = obj.np[0].duration;
if(!obj.np[0].hasOwnProperty("start")) { if(!obj.np[0].hasOwnProperty("start")) {
Player.np.start = 0; Player.np.start = 0;
@@ -31,6 +55,7 @@ var Player = {
song_title = obj.np[0].title; song_title = obj.np[0].title;
duration = obj.np[0].duration; duration = obj.np[0].duration;
videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube"; videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube";
}
} else { } else {
Player.np = { Player.np = {
id: "", id: "",
@@ -54,19 +79,20 @@ var Player = {
} }
} }
if(obj.conf != undefined) { if(obj.conf != undefined) {
conf = obj.conf[0]; conf = obj.conf[0];
}
time = obj.time; time = obj.time;
seekTo = (time - conf.startTime) + Player.np.start;
startTime = time - conf.startTime; startTime = time - conf.startTime;
} else {
time = 0;
startTime = 0;
}
// Play video/autoplay video // Play video/autoplay video
if(obj.np != undefined) { if(obj.np != undefined && !offline) {
seekTo = (time - conf.startTime) + Player.np.start;
Player.getTitle(song_title, viewers); Player.getTitle(song_title, viewers);
if(((embed && autoplay) || !embed ) && !offline && !was_stopped) { if(((embed && autoplay) || !embed) && !was_stopped) {
Helper.log(["loadVideoById \nwas_stopped="+was_stopped+"\noffline="+offline]) Helper.log(["loadVideoById \nwas_stopped="+was_stopped+"\noffline="+offline])
Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end); Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
} else { } else {
@@ -257,15 +283,17 @@ var Player = {
if(seekTo == undefined) seekTo = 0; if(seekTo == undefined) seekTo = 0;
soundcloud_loading = false; soundcloud_loading = false;
var _autoAdd = "false"; var _autoAdd = "false";
if(_autoplay) {
_autoAdd = "true";
Helper.removeClass("#player_loader_container", "hide");
}
try { try {
if(SC == null || !SC.stream) return; if(SC == null || !SC.stream) return;
} catch(e) { } catch(e) {
return; return;
} }
if(previousSoundcloud != id) {
previousSoundcloud = id;
if(_autoplay) {
_autoAdd = "true";
Helper.removeClass("#player_loader_container", "hide");
}
SC.stream("/tracks/" + id).then(function(player){ SC.stream("/tracks/" + id).then(function(player){
Player.soundcloud_player = player; Player.soundcloud_player = player;
Player.soundcloud_player.bind("finish", Player.soundcloudFinish); Player.soundcloud_player.bind("finish", Player.soundcloudFinish);
@@ -289,13 +317,16 @@ var Player = {
}); });
} }
}); });
} else {
player.seek(seekTo * 1000);
}
soundcloud_loading = true; soundcloud_loading = true;
if(start == undefined) start = 0; if(start == undefined) start = 0;
if(seekTo == undefined) seekTo = 0; if(seekTo == undefined) seekTo = 0;
if(_autoplay) was_stopped = false; if(_autoplay) was_stopped = false;
try { try {
Helper.css(document.getElementById("player_overlay"), "background", "url('" + full_playlist[full_playlist.length - 1].thumbnail + "')"); Helper.css(document.getElementById("player_overlay"), "background", "url('" + Player.np.thumbnail + "')");
} catch(e) { } catch(e) {
console.log("Woops this seems to be the first song in the channel. This will be fixed.. soon.. we think.."); console.log("Woops this seems to be the first song in the channel. This will be fixed.. soon.. we think..");
} }
@@ -313,9 +344,11 @@ var Player = {
else s = Player.np.start; else s = Player.np.start;
if(end) e = end; if(end) e = end;
else e = Player.np.end; else e = Player.np.end;
if(!embed) {
Suggestions.fetchYoutubeSuggests(id); Suggestions.fetchYoutubeSuggests(id);
}
if(chromecastAvailable){ if(chromecastAvailable){
castSession.sendMessage("urn:x-cast:zoff.me", {start: s, end: e, type: "loadVideo", videoId: id, channel: chan.toLowerCase(), source: videoSource}); castSession.sendMessage("urn:x-cast:zoff.me", {start: s, end: e, type: "loadVideo", videoId: id, channel: chan.toLowerCase(), source: videoSource, thumbnail: Player.np.thumbnail});
chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+id+'/mqdefault.jpg']}); chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+id+'/mqdefault.jpg']});
chrome.cast.Image('https://img.youtube.com/vi/'+id+'/mqdefault.jpg'); chrome.cast.Image('https://img.youtube.com/vi/'+id+'/mqdefault.jpg');
} else { } else {
@@ -363,7 +396,9 @@ var Player = {
else s = Player.np.start; else s = Player.np.start;
if(end) e = end; if(end) e = end;
else e = Player.np.end; else e = Player.np.end;
if(!embed) {
Suggestions.fetchYoutubeSuggests(id); Suggestions.fetchYoutubeSuggests(id);
}
if(videoSource == "soundcloud") { if(videoSource == "soundcloud") {
try { try {
Player.player.stopVideo(); Player.player.stopVideo();
@@ -414,6 +449,7 @@ var Player = {
time = (new Date()).getTime(); time = (new Date()).getTime();
song_title = next_song.title; song_title = next_song.title;
duration = next_song.duration; duration = next_song.duration;
videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube";
var start; var start;
var end; var end;
if(next_song.hasOwnProperty("start")) start = next_song.start; if(next_song.hasOwnProperty("start")) start = next_song.start;
@@ -421,12 +457,10 @@ var Player = {
if(next_song.hasOwnProperty("end")) end = next_song.end; if(next_song.hasOwnProperty("end")) end = next_song.end;
else end = duration; else end = duration;
Player.np = { Player.np = next_song;
id: video_id, Player.np.start = start;
start: start, Player.np.end = end;
end: end, Player.np.duration = duration;
duration: duration,
};
Player.getTitle(song_title, viewers); Player.getTitle(song_title, viewers);
//Player.setBGimage(video_id); //Player.setBGimage(video_id);
@@ -450,6 +484,7 @@ var Player = {
time = (new Date()).getTime(); time = (new Date()).getTime();
song_title = next_song.title; song_title = next_song.title;
duration = next_song.duration; duration = next_song.duration;
videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube";
var start; var start;
var end; var end;
if(next_song.hasOwnProperty("start")) start = next_song.start; if(next_song.hasOwnProperty("start")) start = next_song.start;
@@ -457,12 +492,10 @@ var Player = {
if(next_song.hasOwnProperty("end")) end = next_song.end; if(next_song.hasOwnProperty("end")) end = next_song.end;
else end = duration; else end = duration;
Player.np = { Player.np = next_song;
id: video_id, Player.np.start = start;
start: start, Player.np.end = end;
end: end, Player.np.duration = duration;
duration: duration,
};
Player.getTitle(song_title, viewers); Player.getTitle(song_title, viewers);
//Player.setBGimage(video_id); //Player.setBGimage(video_id);
@@ -480,7 +513,7 @@ var Player = {
sendNext: function(obj){ sendNext: function(obj){
if(chromecastAvailable){ if(chromecastAvailable){
castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", title: obj.title, videoId: obj.videoId, source: obj.source}); castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", title: obj.title, videoId: obj.videoId, source: obj.source, thumbnail: obj.thumbnail});
} }
if(embed) { if(embed) {
@@ -734,7 +767,7 @@ var Player = {
setup_all_listeners: function() { setup_all_listeners: function() {
get_list_listener(); get_list_listener();
setup_youtube_listener(); setup_now_playing_listener();
setup_admin_listener(); setup_admin_listener();
setup_chat_listener(); setup_chat_listener();
setup_list_listener(); setup_list_listener();