From 9442a2093bae5444816f9981b6516976ae2e660d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Thu, 3 May 2018 19:31:31 +0200 Subject: [PATCH] Fixed issues with window-history and soundcloud.load function --- server/handlers/frontpage.js | 3 +- server/handlers/io.js | 1 + server/handlers/list.js | 4 +- server/handlers/list_change.js | 5 +- server/public/assets/js/embed.js | 1 + server/public/assets/js/frontpage.js | 2 +- server/public/assets/js/listeners.js | 1 + server/public/assets/js/player.js | 100 +++++++++++------- server/public/layouts/client/embed.handlebars | 8 +- .../partials/channel/players.handlebars | 8 +- server/public/partials/donate.handlebars | 2 +- server/routing/client/api.js | 3 +- 12 files changed, 88 insertions(+), 50 deletions(-) diff --git a/server/handlers/frontpage.js b/server/handlers/frontpage.js index 2514aa26..6be2c58c 100644 --- a/server/handlers/frontpage.js +++ b/server/handlers/frontpage.js @@ -17,11 +17,12 @@ function frontpage_lists(msg, socket) { }); } -function update_frontpage(coll, id, title, callback) { +function update_frontpage(coll, id, title, thumbnail, callback) { coll = coll.replace(/ /g,''); db.collection("frontpage_lists").update({_id: coll}, {$set: { id: id, title: title, + thumbnail: thumbnail, accessed: Functions.get_time()} },{upsert: true}, function(err, returnDocs){ if(typeof(callback) == "function") callback(); diff --git a/server/handlers/io.js b/server/handlers/io.js index 5f263073..e0b582ec 100644 --- a/server/handlers/io.js +++ b/server/handlers/io.js @@ -471,6 +471,7 @@ module.exports = function() { socket.on('change_channel', function(obj) { if(obj == undefined && coll != undefined) { + obj = {}; obj.channel = coll; } else if(obj.hasOwnProperty("channel") && obj.channel.indexOf("?") > -1){ var _list = obj.channel.substring(0, obj.channel.indexOf("?")); diff --git a/server/handlers/list.js b/server/handlers/list.js index cadf108d..f60dd451 100644 --- a/server/handlers/list.js +++ b/server/handlers/list.js @@ -382,7 +382,7 @@ function change_song_post(coll, next_song, callback, socket) { List.send_play(coll, socket, true); callback(); } - Frontpage.update_frontpage(coll, docs[0].id, docs[0].title); + Frontpage.update_frontpage(coll, docs[0].id, docs[0].title, docs[0].thumbnail); }); }); }); @@ -440,7 +440,7 @@ function send_list(coll, socket, send, list_send, configs, shuffled) skips:[] } }, function(err, returnDocs){ - Frontpage.update_frontpage(coll, now_playing_doc[0].id, now_playing_doc[0].title); + Frontpage.update_frontpage(coll, now_playing_doc[0].id, now_playing_doc[0].title, now_playing_doc[0].thumbnail); List.send_list(coll, socket, send, list_send, configs, shuffled); }); }); diff --git a/server/handlers/list_change.js b/server/handlers/list_change.js index 1bf94646..33ea4cda 100644 --- a/server/handlers/list_change.js +++ b/server/handlers/list_change.js @@ -88,6 +88,7 @@ function addFromOtherList(arr, guid, offline, socket) { db.collection(channel).find({now_playing: true}, function(e, np_docs) { to_change.id = np_docs[0].id; to_change.title = np_docs[0].title; + to_change.thumbnail = np_docs[0].thumbnail; db.collection("frontpage_lists").update({_id: channel}, {$set: to_change}, function(e, d) { List.send_list(channel, undefined, false, true, false); List.send_play(channel, undefined); @@ -218,6 +219,7 @@ function addPlaylist(arr, guid, offline, socket) { db.collection(channel).find({now_playing: true}, function(e, np_docs) { to_change.id = np_docs[0].id; to_change.title = np_docs[0].title; + to_change.thumbnail = np_docs[0].thumbnail; db.collection("frontpage_lists").update({_id: channel}, {$set: to_change}, function(e, d) { List.send_list(channel, undefined, false, true, false); List.send_play(channel, undefined); @@ -387,7 +389,8 @@ function add_function(arr, coll, guid, offline, socket) { List.send_list(coll, undefined, false, true, false); db.collection(coll + "_settings").update({ id: "config" }, {$set:{startTime: Functions.get_time()}}); List.send_play(coll, undefined); - Frontpage.update_frontpage(coll, id, title); + var thumbnail = arr.thumbnail != undefined ? arr.thumbnail : undefined; + Frontpage.update_frontpage(coll, id, title, thumbnail); if(source != "soundcloud") Search.get_correct_info(new_song, coll, false); } else { io.to(coll).emit("channel", {type: "added", value: new_song}); diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js index 517a5cf3..3f224593 100755 --- a/server/public/assets/js/embed.js +++ b/server/public/assets/js/embed.js @@ -8,6 +8,7 @@ var startTime = 0; var socket_connected = false; var dynamicListeners = {}; var player_ready = false; +var soundcloud_loading = false; var firstLoad = ""; var list_html = document.getElementById("list-song-html").innerHTML; var w_p = true; diff --git a/server/public/assets/js/frontpage.js b/server/public/assets/js/frontpage.js index 27105ba4..09360dc6 100755 --- a/server/public/assets/js/frontpage.js +++ b/server/public/assets/js/frontpage.js @@ -80,7 +80,7 @@ var Frontpage = { var description = lists[x].description; var img; if(id.indexOf("soundcloud.com") > -1) { - img = "background-image:url('http://icons.iconarchive.com/icons/uiconstock/socialmedia/128/Soundcloud-icon.png');"; + img = "background-image:url('" + lists[x].thumbnail + "');"; } else { img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');"; if(lists[x].thumbnail) { diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index bd619431..f6947f47 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -12,6 +12,7 @@ var videoSource; var dynamicListeners = {}; var socket_connected = false; var hasadmin = 0; +var soundcloud_loading = false; var list_html = document.querySelectorAll("#list-song-html").length > 0 ? document.querySelector("#list-song-html").innerHTML : undefined; var unseen = false; var searching = false; diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index a40edeeb..83ffd4f4 100755 --- a/server/public/assets/js/player.js +++ b/server/public/assets/js/player.js @@ -446,34 +446,35 @@ var Player = { console.log(Player.soundcloud_player.src.indexOf(id), seekTo); Player.stopVideo(); Helper.removeClass(document.getElementById("player_overlay"), "hide"); + document.getElementById("player_overlay_text").innerText = "Loading SoundCloud"; Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); if(Player.soundcloud_player.src.indexOf(id) > -1) { console.log("seekto " + seekTo + " start " + start); if(start == undefined) start = 0; if(seekTo == undefined) seekTo = 0; - SC.Widget(Player.soundcloud_player).seekTo((start + seekTo) * 1000); + SC.Widget(Player.soundcloud_player).seekTo((seekTo) * 1000); } else { - SC.Widget(Player.soundcloud_player).load(id, { - auto_play: true, - buying:false, - sharing:false, - download:false, - show_user:false, - callback: function() { - Player.stopVideo(); - SC.Widget(Player.soundcloud_player).setVolume(embed ? 100 : Crypt.get_volume()); - console.log(start, seekTo); - if(start == undefined) start = 0; - if(seekTo == undefined) seekTo = 0; - SC.Widget(Player.soundcloud_player).seekTo((start + seekTo) * 1000); - Helper.css(document.getElementById("player_overlay"), "background", "url('" + full_playlist[full_playlist.length - 1].thumbnail + "')"); - Helper.css(document.getElementById("player_overlay"), "background-size", "auto"); - Helper.css(document.getElementById("player_overlay"), "background-position", "20%"); - Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); - Helper.addClass("#player_overlay_text", "hide"); - } - }); + console.log("loaded here"); + document.querySelector("#soundcloud_container").innerHTML = ''; + Player.soundcloud_player = document.querySelector("#soundcloud_player"); + soundcloud_loading = true; + SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.FINISH, Player.soundcloudFinish); + SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.PAUSE, Player.soundcloudPause); + SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.PLAY, Player.soundcloudPlay); + SC.Widget(Player.soundcloud_player).setVolume(embed ? 100 : Crypt.get_volume()); + console.log(start, seekTo); + if(start == undefined) start = 0; + if(seekTo == undefined) seekTo = 0; + + SC.Widget(Player.soundcloud_player).seekTo((seekTo) * 1000); } + Helper.css(document.getElementById("player_overlay"), "background", "url('" + full_playlist[full_playlist.length - 1].thumbnail + "')"); + Helper.css(document.getElementById("player_overlay"), "background-size", "auto"); + Helper.css(document.getElementById("player_overlay"), "background-position", "20%"); + Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); + Helper.addClass("#player_overlay_text", "hide"); //SC.Widget(Player.soundcloud_player).play(); } else { //window.player = Player.player; @@ -498,27 +499,46 @@ var Player = { else e = Player.np.end; if(videoSource == "soundcloud") { - Helper.removeClass(document.getElementById("player_overlay"), "hide"); - Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); - SC.Widget(Player.soundcloud_player).load(id, { - auto_play: false, - buying:false, - sharing:false, - download:false, - show_user:false, - callback: function() { + if(videoSource == "soundcloud") { + console.log(Player.soundcloud_player.src.indexOf(id), seekTo); + Player.stopVideo(); + Helper.removeClass(document.getElementById("player_overlay"), "hide"); + document.getElementById("player_overlay_text").innerText = "Loading SoundCloud"; + Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); + if(Player.soundcloud_player.src.indexOf(id) > -1) { + console.log("seekto " + seekTo + " start " + start); + if(start == undefined) start = 0; + if(seekTo == undefined) seekTo = 0; + SC.Widget(Player.soundcloud_player).seekTo((seekTo) * 1000); + } else { + console.log("loaded here"); + document.querySelector("#soundcloud_container").innerHTML = ''; + Player.soundcloud_player = document.querySelector("#soundcloud_player"); + soundcloud_loading = true; + SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.FINISH, Player.soundcloudFinish); + SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.PAUSE, Player.soundcloudPause); + SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.PLAY, Player.soundcloudPlay); SC.Widget(Player.soundcloud_player).setVolume(embed ? 100 : Crypt.get_volume()); console.log(start, seekTo); if(start == undefined) start = 0; if(seekTo == undefined) seekTo = 0; - SC.Widget(Player.soundcloud_player).seekTo((start + seekTo) * 1000); - Helper.css(document.getElementById("player_overlay"), "background", "url('" + full_playlist[full_playlist.length - 1].thumbnail + "')"); - Helper.css(document.getElementById("player_overlay"), "background-size", "cover"); - Helper.css(document.getElementById("player_overlay"), "background-position", "20%"); - Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); - Helper.addClass("#player_overlay_text", "hide"); + SC.Widget(Player.soundcloud_player).seekTo((seekTo) * 1000); } - }); + Helper.css(document.getElementById("player_overlay"), "background", "url('" + full_playlist[full_playlist.length - 1].thumbnail + "')"); + Helper.css(document.getElementById("player_overlay"), "background-size", "auto"); + Helper.css(document.getElementById("player_overlay"), "background-position", "20%"); + Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); + Helper.addClass("#player_overlay_text", "hide"); + //SC.Widget(Player.soundcloud_player).play(); + } else { + //window.player = Player.player; + Helper.addClass(document.getElementById("player_overlay"), "hide"); + Helper.css(document.getElementById("player_overlay"), "background", "none"); + Helper.removeClass("#player_overlay_text", "hide"); + Player.player.loadVideoById({'videoId': id, 'startSeconds': s, 'endSeconds': e}); + } } else { Player.player.cueVideoById({'videoId': id, 'startSeconds': s, 'endSeconds': e}); } @@ -708,8 +728,13 @@ var Player = { soundcloudPlay: function() { console.log("playing"); + console.log(videoSource, soundcloud_loading); if(videoSource == "youtube") { SC.Widget(Player.soundcloud_player).pause(); + } else if(soundcloud_loading){ + SC.Widget(Player.soundcloud_player).seekTo((seekTo) * 1000); + console.log("We need to skip !", Player.np.start, seekTo) + soundcloud_loading = false; } if(embed) { Helper.css("#player", "visibility", "visible"); @@ -931,6 +956,7 @@ var Player = { } else { currDurr = Player.player.getCurrentTime() !== undefined ? Math.floor(Player.player.getCurrentTime()) : seekTo; } + console.log(Player.np.start, currDurr, Player.np.end); if(currDurr - Player.np.start > duration && !offline) { currDurr = duration - Player.np.start; } diff --git a/server/public/layouts/client/embed.handlebars b/server/public/layouts/client/embed.handlebars index 88b20d73..b1ef791d 100644 --- a/server/public/layouts/client/embed.handlebars +++ b/server/public/layouts/client/embed.handlebars @@ -12,9 +12,11 @@
- +
+ +
diff --git a/server/public/partials/channel/players.handlebars b/server/public/partials/channel/players.handlebars index 3185e9d3..78bf8d8b 100644 --- a/server/public/partials/channel/players.handlebars +++ b/server/public/partials/channel/players.handlebars @@ -3,9 +3,11 @@
{{/unless}}
- +
+ +
diff --git a/server/public/partials/donate.handlebars b/server/public/partials/donate.handlebars index 6f4b699a..3cea5fd0 100644 --- a/server/public/partials/donate.handlebars +++ b/server/public/partials/donate.handlebars @@ -8,7 +8,7 @@
- bitcoin-image + bitcoin-image
diff --git a/server/routing/client/api.js b/server/routing/client/api.js index 07579e2a..d372518f 100644 --- a/server/routing/client/api.js +++ b/server/routing/client/api.js @@ -751,7 +751,8 @@ router.route('/api/list/:channel_name/:video_id').post(function(req,res) { postEnd(channel_name, configs, new_song, guid, res, authenticated, authorized); }); } else if(set_np) { - Frontpage.update_frontpage(channel_name, video_id, title, function() { + var thumbnail = req.body.thumbnail != undefined ? req.body.thumbnail : undefined; + Frontpage.update_frontpage(channel_name, video_id, title, thumbnail, function() { io.to(channel_name).emit("np", {np: [new_song], conf: [conf]}); postEnd(channel_name, configs, new_song, guid, res, authenticated, authorized); });