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 d4e3a8afde
commit 8a64fc816a
8 changed files with 391 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,6 +13,13 @@
transition: all .3s !important;
}
#player_loader_container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
#player_overlay {
position: absolute;
height: calc(100% - 32px);
@@ -509,17 +516,17 @@ body {
.card-duration {
border-top-right-radius: 4px;
position: absolute;
bottom: 0px;
left: 0px;
background: rgba(0,0,0,.7);
color: white;
padding: 0 5px;
position: absolute;
bottom: 0px;
left: 0px;
background: rgba(0,0,0,.7);
color: white;
padding: 0 5px;
}
/*
.last_page, .last_page_hide, .first_page, .first_page_hide{
display: none !important;
display: none !important;
}
*/
#wrapper{

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

@@ -234,7 +234,7 @@ margin: auto;
#playing_on #chromecast_text{
font-size: 20px;
padding-left: 8px;
padding-left: 55px;
}
.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(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck()){
setup_youtube_listener();
setup_now_playing_listener();
get_list_listener();
setup_suggested_listener();
if(!client) {
@@ -349,8 +349,8 @@ var Channel = {
total = total * e.clientX;
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);
dSeconds = duration - dMinutes * 60;
currDurr = total;

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

@@ -8,6 +8,7 @@ var startTime = 0;
var socket_connected = false;
var dynamicListeners = {};
var player_ready = false;
var previousSoundcloud;
var empty_clear = false;
var fix_too_far = false;
var beginning = false;
@@ -52,6 +53,11 @@ var Crypt = {
}
};
SC.initialize({
client_id: 'ed53fc01f248f15becddf8eb52cc91ef'
}, function() {
});
function receiveMessage(event) {
if(event.data == "parent") {
window.parentWindow = event.source;
@@ -116,7 +122,7 @@ window.addEventListener("DOMContentLoaded", function() {
});
setup_host_initialization();
setup_youtube_listener();
setup_now_playing_listener();
setup_list_listener();
window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
@@ -144,8 +150,8 @@ function setup_host_initialization() {
socket.on("id", Hostcontroller.host_listener);
}
function setup_youtube_listener() {
socket.on("np", Player.youtube_listener);
function setup_now_playing_listener() {
socket.on("np", Player.now_playing_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("#fullscreen", "hide");
try{
if(videoSource == "youtube") {
Player.player.stopVideo();
} else if(videoSource == "soundcloud") {
Player.soundcloud_player.pause();
}
} catch(e){}
Player.stopInterval = true;
if(Helper.mobilecheck()){
@@ -102,7 +106,11 @@ function hide_native(way) {
Helper.toggleClass("#duration", "hide");
Helper.toggleClass("#fullscreen", "hide");
if(videoSource == "youtube") {
Player.player.playVideo();
} else if(videoSource == "soundcloud") {
Player.soundcloud_player.play();
}
Player.stopInterval = false;
duration = Player.player.getDuration();
Player.durationSetter();
@@ -427,8 +435,8 @@ function setup_no_connection_listener(){
});
}
function setup_youtube_listener(){
socket.on("np", Player.youtube_listener);
function setup_now_playing_listener(){
socket.on("np", Player.now_playing_listener);
}
function get_list_listener(){

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

@@ -22,19 +22,19 @@ var List = {
prev_chan_list = chan;
List.populate_list(msg.playlist);
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){
List.populate_list(full_playlist, true);
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;
case "added":
List.added_song(msg.value);
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_index = 0;
@@ -48,7 +48,7 @@ var List = {
if(!offline){
List.voted_song(msg.value, msg.time);
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 = [];
@@ -58,7 +58,7 @@ var List = {
if((offline && msg.offline_change) || !offline) {
if(window.location.pathname != "/") List.song_change(msg.time, msg.remove);
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_index = 0;
@@ -72,7 +72,7 @@ var List = {
if(window.location.pathname != "/") List.song_change_prev(msg.time);
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_index = 0;
@@ -443,7 +443,7 @@ var List = {
}
}
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) {
@@ -461,7 +461,7 @@ var List = {
Helper.css(nextToChange, "display", "inline-flex");
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){

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 retry_frontpage;
var previousSoundcloud;
var chromecast_specs_sent = false;
var dragging = false;
var user_auth_started = false;
@@ -283,12 +284,16 @@ initializeCastApi = function() {
mobile_beginning = false;
var _seekTo;
try{
if(videoSource == "youtube") {
_seekTo = Player.player.getCurrentTime();
} else if(videoSource == "soundcloud") {
_seekTo = Player.soundcloud_player.currentTime() / 1000;
}
} catch(event){
_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: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source})
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, thumbnail: full_playlist[0].thumbnail})
if(Helper.mobilecheck() && !chromecast_specs_sent) {
socket.emit("get_id");
@@ -316,8 +321,8 @@ initializeCastApi = function() {
} catch(event){
_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: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source})
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, thumbnail: full_playlist[0].thumbnail})
hide_native(1);
Helper.css("#channel-load", "display", "none");
Helper.addClass('.castButton', 'castButton-white-active');

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

@@ -11,15 +11,39 @@ var Player = {
setVolume: function(val) {}
},
youtube_listener: function(obj) {
now_playing_listener: function(obj) {
if(obj.np != undefined) {
if(offline && (video_id == "" || video_id == undefined)){
video_id = obj.np[0].id;
Player.np = {
id: video_id,
start: obj.np[0].start,
end: obj.np[0].end,
duration: obj.np[0].duration,
};
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")) {
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")) {
Player.np.start = 0;
@@ -31,6 +55,7 @@ var Player = {
song_title = obj.np[0].title;
duration = obj.np[0].duration;
videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube";
}
} else {
Player.np = {
id: "",
@@ -54,19 +79,20 @@ var Player = {
}
}
if(obj.conf != undefined) {
conf = obj.conf[0];
}
time = obj.time;
seekTo = (time - conf.startTime) + Player.np.start;
startTime = time - conf.startTime;
} else {
time = 0;
startTime = 0;
}
// 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);
if(((embed && autoplay) || !embed ) && !offline && !was_stopped) {
if(((embed && autoplay) || !embed) && !was_stopped) {
Helper.log(["loadVideoById \nwas_stopped="+was_stopped+"\noffline="+offline])
Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
} else {
@@ -257,15 +283,17 @@ var Player = {
if(seekTo == undefined) seekTo = 0;
soundcloud_loading = false;
var _autoAdd = "false";
if(_autoplay) {
_autoAdd = "true";
Helper.removeClass("#player_loader_container", "hide");
}
try {
if(SC == null || !SC.stream) return;
} catch(e) {
return;
}
if(previousSoundcloud != id) {
previousSoundcloud = id;
if(_autoplay) {
_autoAdd = "true";
Helper.removeClass("#player_loader_container", "hide");
}
SC.stream("/tracks/" + id).then(function(player){
Player.soundcloud_player = player;
Player.soundcloud_player.bind("finish", Player.soundcloudFinish);
@@ -289,13 +317,16 @@ var Player = {
});
}
});
} else {
player.seek(seekTo * 1000);
}
soundcloud_loading = true;
if(start == undefined) start = 0;
if(seekTo == undefined) seekTo = 0;
if(_autoplay) was_stopped = false;
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) {
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;
if(end) e = end;
else e = Player.np.end;
if(!embed) {
Suggestions.fetchYoutubeSuggests(id);
}
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.Image('https://img.youtube.com/vi/'+id+'/mqdefault.jpg');
} else {
@@ -363,7 +396,9 @@ var Player = {
else s = Player.np.start;
if(end) e = end;
else e = Player.np.end;
if(!embed) {
Suggestions.fetchYoutubeSuggests(id);
}
if(videoSource == "soundcloud") {
try {
Player.player.stopVideo();
@@ -414,6 +449,7 @@ var Player = {
time = (new Date()).getTime();
song_title = next_song.title;
duration = next_song.duration;
videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube";
var start;
var end;
if(next_song.hasOwnProperty("start")) start = next_song.start;
@@ -421,12 +457,10 @@ var Player = {
if(next_song.hasOwnProperty("end")) end = next_song.end;
else end = duration;
Player.np = {
id: video_id,
start: start,
end: end,
duration: duration,
};
Player.np = next_song;
Player.np.start = start;
Player.np.end = end;
Player.np.duration = duration;
Player.getTitle(song_title, viewers);
//Player.setBGimage(video_id);
@@ -450,6 +484,7 @@ var Player = {
time = (new Date()).getTime();
song_title = next_song.title;
duration = next_song.duration;
videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube";
var start;
var end;
if(next_song.hasOwnProperty("start")) start = next_song.start;
@@ -457,12 +492,10 @@ var Player = {
if(next_song.hasOwnProperty("end")) end = next_song.end;
else end = duration;
Player.np = {
id: video_id,
start: start,
end: end,
duration: duration,
};
Player.np = next_song;
Player.np.start = start;
Player.np.end = end;
Player.np.duration = duration;
Player.getTitle(song_title, viewers);
//Player.setBGimage(video_id);
@@ -480,7 +513,7 @@ var Player = {
sendNext: function(obj){
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) {
@@ -734,7 +767,7 @@ var Player = {
setup_all_listeners: function() {
get_list_listener();
setup_youtube_listener();
setup_now_playing_listener();
setup_admin_listener();
setup_chat_listener();
setup_list_listener();