From 9b1e91783edbd522edcb9bb837aab3a284ae0cd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Thu, 3 May 2018 14:27:54 +0200 Subject: [PATCH 01/21] Soundcloud-player + soundcloud-search added --- server/handlers/functions.js | 19 + server/handlers/list.js | 4 +- server/handlers/list_change.js | 22 +- server/handlers/search.js | 1 + server/handlers/suggestions.js | 20 +- server/public/assets/css/style.css | 40 +- server/public/assets/js/channel.js | 2 + server/public/assets/js/frontpage.js | 12 +- server/public/assets/js/functions.js | 13 +- server/public/assets/js/hostcontroller.js | 1 + server/public/assets/js/list.js | 98 ++-- server/public/assets/js/listeners.js | 37 +- server/public/assets/js/player.js | 257 ++++++++- server/public/assets/js/playercontrols.js | 78 ++- server/public/assets/js/search.js | 526 +++++++++++------- server/public/assets/js/suggestions.js | 1 + .../partials/channel/players.handlebars | 3 + .../public/partials/channel/search.handlebars | 77 +-- server/routing/client/api.js | 8 +- 19 files changed, 863 insertions(+), 356 deletions(-) diff --git a/server/handlers/functions.js b/server/handlers/functions.js index f988cfb0..f99d9171 100644 --- a/server/handlers/functions.js +++ b/server/handlers/functions.js @@ -19,6 +19,24 @@ function remove_name_from_db(guid, name) { }); } +function isUrl(str) { + var pattern = new RegExp("\\b(((ht|f)tp(s?)\\:\\/\\/|~\\/|\\/)|www.)" + + "(\\w+:\\w+@)?(([-\\w]+\\.)+(com|org|net|gov" + + "|mil|biz|info|mobi|name|aero|jobs|museum" + + "|travel|[a-z]{2}))(:[\\d]{1,5})?" + + "(((\\/([-\\w~!$+|.,=]|%[a-f\\d]{2})+)+|\\/)+|\\?|#)?" + + "((\\?([-\\w~!$+|.,*:]|%[a-f\\d{2}])+=?" + + "([-\\w~!$+|.,*:=]|%[a-f\\d]{2})*)" + + "(&(?:[-\\w~!$+|.,*:]|%[a-f\\d{2}])+=?" + + "([-\\w~!$+|.,*:=]|%[a-f\\d]{2})*)*)*" + + "(#([-\\w~!$+|.,*:=]|%[a-f\\d]{2})*)?\\b"); + if(!pattern.test(str)) { + return false; + } else { + return true; + } +} + function getSession(socket) { try { /*var cookieParser = require("cookie-parser"); @@ -273,6 +291,7 @@ function removeSessionAdminPass(id, channel, callback) { }); } +module.exports.isUrl = isUrl; module.exports.removeEmojis = removeEmojis; module.exports.getSessionChatPass = getSessionChatPass; module.exports.setSessionChatPass = setSessionChatPass; diff --git a/server/handlers/list.js b/server/handlers/list.js index a360f3cc..cadf108d 100644 --- a/server/handlers/list.js +++ b/server/handlers/list.js @@ -84,7 +84,9 @@ function list(msg, guid, coll, offline, socket) { db.collection(coll + "_settings").insert(configs, function(err, docs){ socket.join(coll); List.send_list(coll, socket, true, false, true); - db.collection("frontpage_lists").insert({"_id": coll, "count" : 0, "frontpage": true, "accessed": Functions.get_time(), "viewers": 1}); + db.collection("frontpage_lists").insert({"_id": coll, "count" : 0, "frontpage": true, "accessed": Functions.get_time(), "viewers": 1}, function(e,d){ + console.log("added new channel", coll); + }); Functions.check_inlist(coll, guid, socket, offline); }); }); diff --git a/server/handlers/list_change.js b/server/handlers/list_change.js index 831ed281..1bf94646 100644 --- a/server/handlers/list_change.js +++ b/server/handlers/list_change.js @@ -298,7 +298,9 @@ function add_function(arr, coll, guid, offline, socket) { if(typeof(arr.id) != "string" || typeof(arr.start) != "number" || typeof(arr.end) != "number" || typeof(arr.title) != "string" || - typeof(arr.list) != "string" || typeof(arr.duration) != "number") { + typeof(arr.list) != "string" || typeof(arr.duration) != "number" || + typeof(arr.source) != "string" || + (arr.source == "soundcloud" && (!arr.hasOwnProperty("thumbnail") || !Functions.isUrl(arr.thumbnail)))) { var result = { start: { expected: "number or string that can be cast to int", @@ -327,6 +329,14 @@ function add_function(arr, coll, guid, offline, socket) { adminpass: { expected: "string", got: arr.hasOwnProperty("adminpass") ? typeof(arr.adminpass) : undefined + }, + source: { + expected: "string (youtube or soundcloud)", + got: arr.hasOwnProperty("source") ? typeof(arr.source) : undefined + }, + thumbnail: { + expected: "url if source == soundcloud", + got: arr.hasOwnProperty("thumbnail") ? typeof(arr.thumbnail) : undefined } }; socket.emit('update_required', result); @@ -350,6 +360,7 @@ function add_function(arr, coll, guid, offline, socket) { var title = arr.title; var hash = Functions.hash_pass(Functions.hash_pass(Functions.decrypt_string(arr.adminpass), true)); var duration = parseInt(arr.duration); + var source = arr.source; /*db.collection(coll + "_settings").find(function(err, docs) {*/ conf = docs; @@ -366,7 +377,10 @@ function add_function(arr, coll, guid, offline, socket) { } else { np = false; } - var new_song = {"added": added,"guids":guids,"id":id,"now_playing":np,"title":title,"votes":votes, "duration":duration, "start": parseInt(start), "end": parseInt(end), "type": "video"}; + var new_song = {"added": added,"guids":guids,"id":id,"now_playing":np,"title":title,"votes":votes, "duration":duration, "start": parseInt(start), "end": parseInt(end), "type": "video", "source": source}; + if(source == "soundcloud") new_song.thumbnail = arr.thumbnail; + console.log(new_song); + //return; db.collection(coll).update({id: id}, new_song, {upsert: true}, function(err, docs){ new_song._id = "asd"; if(np) { @@ -374,10 +388,10 @@ function add_function(arr, coll, guid, offline, socket) { db.collection(coll + "_settings").update({ id: "config" }, {$set:{startTime: Functions.get_time()}}); List.send_play(coll, undefined); Frontpage.update_frontpage(coll, id, title); - Search.get_correct_info(new_song, coll, false); + if(source != "soundcloud") Search.get_correct_info(new_song, coll, false); } else { io.to(coll).emit("channel", {type: "added", value: new_song}); - Search.get_correct_info(new_song, coll, true); + if(source != "soundcloud") Search.get_correct_info(new_song, coll, true); } db.collection("frontpage_lists").update({_id:coll}, {$inc:{count:1}, $set:{accessed: Functions.get_time()}}, {upsert:true}, function(err, docs){}); List.getNextSong(coll); diff --git a/server/handlers/search.js b/server/handlers/search.js index 9671f399..7961a416 100644 --- a/server/handlers/search.js +++ b/server/handlers/search.js @@ -82,6 +82,7 @@ function check_error_video(msg, channel) { }; return; } + if(msg.source == "soundcloud") return; channel = channel.replace(/ /g,''); request({ type: "GET", diff --git a/server/handlers/suggestions.js b/server/handlers/suggestions.js index ba87ef96..1851aaf5 100644 --- a/server/handlers/suggestions.js +++ b/server/handlers/suggestions.js @@ -1,23 +1,7 @@ -function isUrl(str) { - var pattern = new RegExp("\\b(((ht|f)tp(s?)\\:\\/\\/|~\\/|\\/)|www.)" + - "(\\w+:\\w+@)?(([-\\w]+\\.)+(com|org|net|gov" + - "|mil|biz|info|mobi|name|aero|jobs|museum" + - "|travel|[a-z]{2}))(:[\\d]{1,5})?" + - "(((\\/([-\\w~!$+|.,=]|%[a-f\\d]{2})+)+|\\/)+|\\?|#)?" + - "((\\?([-\\w~!$+|.,*:]|%[a-f\\d{2}])+=?" + - "([-\\w~!$+|.,*:=]|%[a-f\\d]{2})*)" + - "(&(?:[-\\w~!$+|.,*:]|%[a-f\\d{2}])+=?" + - "([-\\w~!$+|.,*:=]|%[a-f\\d]{2})*)*)*" + - "(#([-\\w~!$+|.,*:=]|%[a-f\\d]{2})*)?\\b"); - if(!pattern.test(str)) { - return false; - } else { - return true; - } -} + function thumbnail(msg, coll, guid, offline, socket) { - if(msg.thumbnail != undefined && msg.channel && msg.channel != undefined && isUrl(msg.thumbnail)){ + if(msg.thumbnail != undefined && msg.channel && msg.channel != undefined && Functions.isUrl(msg.thumbnail)){ if(typeof(msg.channel) != "string" || typeof(msg.thumbnail) != "string") { var result = { diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index 267ee457..7b31106a 100755 --- a/server/public/assets/css/style.css +++ b/server/public/assets/css/style.css @@ -1480,7 +1480,7 @@ margin:-1px; } #inner-results { - height: calc(100vh - 64px - 76px); + height: calc(100vh - 64px - 76px - 64px); overflow-y: scroll; overflow-x: hidden; } @@ -1602,6 +1602,38 @@ ul #chat-log{ align-items: center; } +.search_results { + + background: black; + position: absolute; + width: 100vw; + top: 64px; + /* height: 100vh; */ + +} + +.results-tabs li { + width: 50%; + text-align: center; +} + +.results-tabs .indicator { + height: 2px; + z-index: 9; + position: absolute; + margin-left: -16px; + margin-top: 64px; + width: 50%; +} + +#results_soundcloud { + padding: 0; +} + +#results_soundcloud #inner-results { + height: calc(100vh - 64px - 76px); +} + #search_loader_inner{ display: flex; } @@ -2011,11 +2043,15 @@ nav ul li:hover, nav ul li.active { position: absolute; width: 100%; top: 64px; - max-height: calc(100vh - 64px); + max-height: calc(100vh - 128px); overflow: overlay; overflow-x: hidden; /* z-index: 99999999; */ } + +#results_soundcloud { + max-height: calc(100vh - 64px - 64px); +} .result:hover, .hoverResults { background-color: rgba(0,0,0,0.4); } diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js index ee29bd47..2afc9528 100644 --- a/server/public/assets/js/channel.js +++ b/server/public/assets/js/channel.js @@ -77,6 +77,7 @@ var Channel = { } Helper.tabs('.chatTabs'); + Helper.tabs('.results-tabs'); } var sidenavElem = document.getElementsByClassName("sidenav")[0]; M.Sidenav.init(sidenavElem, { @@ -165,6 +166,7 @@ var Channel = { Playercontrols.initSlider(); if(player_ready) { Player.player.setVolume(Crypt.get_volume()); + SC.Widget(Player.soundcloud_player).setVolume(Crypt.get_volume()); } Helper.removeClass(".video-container", "no-opacity"); var codeURL = "https://remote."+window.location.hostname+"/"+id; diff --git a/server/public/assets/js/frontpage.js b/server/public/assets/js/frontpage.js index a4198532..27105ba4 100755 --- a/server/public/assets/js/frontpage.js +++ b/server/public/assets/js/frontpage.js @@ -26,6 +26,7 @@ var Frontpage = { document.getElementById("channel-list-container").insertAdjacentHTML("beforeend", "

No channels yet

"); } else { Frontpage.populate_channels(msg.channels, true); + console.log(msg.channels); } Frontpage.set_viewers(msg.viewers); }, @@ -77,9 +78,14 @@ var Frontpage = { var id = lists[x].id; var viewers = lists[x].viewers; var description = lists[x].description; - var img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');"; - if(lists[x].thumbnail) { - img = "background-image:url('" + lists[x].thumbnail + "');"; + var img; + if(id.indexOf("soundcloud.com") > -1) { + img = "background-image:url('http://icons.iconarchive.com/icons/uiconstock/socialmedia/128/Soundcloud-icon.png');"; + } else { + img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');"; + if(lists[x].thumbnail) { + img = "background-image:url('" + lists[x].thumbnail + "');"; + } } var song_count = lists[x].count; diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js index 8d155fd3..033edc13 100644 --- a/server/public/assets/js/functions.js +++ b/server/public/assets/js/functions.js @@ -84,6 +84,7 @@ function hide_native(way) { Helper.setHtml("#chromecast_text", "Playing on
" + castSession.La.friendlyName); } Player.player.setVolume(100); + SC.Widget(Player.soundcloud_player).setVolume(100); Helper.toggleClass("#player_overlay_text", "hide"); } else if(way == 0){ @@ -108,6 +109,7 @@ function hide_native(way) { if(!Helper.mobilecheck()){ Player.player.setVolume(Crypt.get_volume()); Playercontrols.visualVolume(Crypt.get_volume()); + SC.Widget(Player.soundcloud_player).setVolume(Crypt.get_volume()); } Helper.addClass("#player_overlay", "hide"); Helper.toggleClass("#player_overlay_text", "hide"); @@ -235,6 +237,11 @@ function contextListener(that, event) { } else if(top < 0) { top = 15; } + if(parent.getAttribute("data-video-source") == "soundcloud") { + Helper.addClass(".find-context-menu", "context-menu-disabled"); + } else { + Helper.removeClass(".find-context-menu", "context-menu-disabled"); + } Helper.css(".context-menu-root", "left", left + "px"); Helper.css(".context-menu-root", "top", top + "px"); Helper.removeClass(".context-menu-root","hide"); @@ -318,7 +325,7 @@ function del_ajax(id) { }) } -function add_ajax(id, title, duration, playlist, num, full_num, start, end) { +function add_ajax(id, title, duration, playlist, num, full_num, start, end, source, thumbnail) { /*var a = Crypt.get_pass(chan.toLowerCase()); var u = Crypt.get_userpass(chan.toLowerCase()); if(a == undefined) a = ""; @@ -332,6 +339,8 @@ function add_ajax(id, title, duration, playlist, num, full_num, start, end) { duration: duration, end_time: end, start_time: start, + thumbnail: thumbnail, + source: source, token: zoff_api_token }, headers: {"Content-Type": "application/json;charset=UTF-8"}, @@ -901,9 +910,11 @@ function searchTimeout(event) { } if(code == 13){ Search.search(search_input); + Search.soundcloudSearch(search_input); }else{ timeout_search = setTimeout(function(){ Search.search(search_input); + Search.soundcloudSearch(search_input); }, 1000); } } diff --git a/server/public/assets/js/hostcontroller.js b/server/public/assets/js/hostcontroller.js index c071de08..5b6d0917 100755 --- a/server/public/assets/js/hostcontroller.js +++ b/server/public/assets/js/hostcontroller.js @@ -38,6 +38,7 @@ var Hostcontroller = { if(arr.type == "volume") { Playercontrols.visualVolume(arr.value); Player.setVolume(arr.value); + SC.Widget(Player.soundcloud_player).setVolume(arr.value); localStorage.setItem("volume", arr.value); Playercontrols.choose_button(arr.value, false); } else if(arr.type == "channel") { diff --git a/server/public/assets/js/list.js b/server/public/assets/js/list.js index 73c54151..1787e69b 100755 --- a/server/public/assets/js/list.js +++ b/server/public/assets/js/list.js @@ -245,7 +245,7 @@ var List = { check_error_videos: function(i) { //Helper.log("Empty-checker at " + i); - if(full_playlist.length == 0) return; + if(full_playlist.length == 0 || full_playlist[i].source == "soundcloud") return; Helper.ajax({ method: "get", url: 'https://www.googleapis.com/youtube/v3/videos?id=' + full_playlist[i].id @@ -255,7 +255,7 @@ var List = { //Helper.log("Empty-checker items " + data.items.length); if (data.items.length == 0) { Helper.log(["Emtpy-checker error at " + full_playlist[i].id + " " + full_playlist[i].title]); - socket.emit("error_video", {channel: chan.toLowerCase(), id: full_playlist[i].id, title: full_playlist[i].title}); + socket.emit("error_video", {channel: chan.toLowerCase(), id: full_playlist[i].id, title: full_playlist[i].title, source: full_playlist[i].source}); } if(full_playlist.length > i + 1 && window.location.pathname != "/") { List.check_error_videos(i + 1); @@ -356,7 +356,7 @@ var List = { full_playlist.push(now_playing); } - if(document.querySelectorAll("#suggested-"+added.id).length > 0) { + if(added.source != "soundcloud" && document.querySelectorAll("#suggested-"+added.id).length > 0) { number_suggested = number_suggested - 1; if(number_suggested < 0) number_suggested = 0; @@ -366,9 +366,9 @@ var List = { } document.querySelector(".suggested-link span.badge.new.white").innerText = to_display; + Helper.removeElement("#suggested-"+added.id); } - Helper.removeElement("#suggested-"+added.id); if(List.empty){ List.empty = false; } @@ -832,43 +832,60 @@ var List = { }, addToYoutubePlaylist: function(playlist_id, full_playlist, num, request_url) { - var _data = JSON.stringify({ - 'snippet': { - 'playlistId': playlist_id, - 'resourceId': { - 'kind': 'youtube#video', - 'videoId': full_playlist[num].id + if(full_playlist[num].source != "soundcloud") { + var _data = JSON.stringify({ + 'snippet': { + 'playlistId': playlist_id, + 'resourceId': { + 'kind': 'youtube#video', + 'videoId': full_playlist[num].id + } } - } - }); - Helper.ajax({ - type: "POST", - url: request_url, - headers: { - 'Authorization': 'Bearer ' + access_token_data_youtube.access_token, - 'Content-Type': 'application/json' - }, - data: _data, - success: function(response){ - response = JSON.parse(response); - Helper.log(["Added video: " + full_playlist[num].id + " to playlist id " + playlist_id]); - if(num == full_playlist.length - 1){ - Helper.log(["All videoes added!"]); - Helper.log(["url: https://www.youtube.com/playlist?list=" + playlist_id]); - document.querySelector(".exported-list").insertAdjacentHTML("beforeend", "" + chan + ""); - Helper.addClass("#playlist_loader_export", "hide"); - Helper.addClass(".current_number", "hide"); - //$(".youtube_export_button").removeClass("hide"); - } else { - //setTimeout(function(){ - Helper.removeClass(".current_number", "hide"); - document.querySelector(".current_number").innerText = (num + 1) + " of " + (full_playlist.length); - List.addToYoutubePlaylist(playlist_id, full_playlist, num + 1, request_url) - //}, 50); + }); + Helper.ajax({ + type: "POST", + url: request_url, + headers: { + 'Authorization': 'Bearer ' + access_token_data_youtube.access_token, + 'Content-Type': 'application/json' + }, + data: _data, + success: function(response){ + response = JSON.parse(response); + Helper.log(["Added video: " + full_playlist[num].id + " to playlist id " + playlist_id]); + if(num == full_playlist.length - 1){ + Helper.log(["All videoes added!"]); + Helper.log(["url: https://www.youtube.com/playlist?list=" + playlist_id]); + document.querySelector(".exported-list").insertAdjacentHTML("beforeend", "" + chan + ""); + Helper.addClass("#playlist_loader_export", "hide"); + Helper.addClass(".current_number", "hide"); + //$(".youtube_export_button").removeClass("hide"); + } else { + //setTimeout(function(){ + Helper.removeClass(".current_number", "hide"); + document.querySelector(".current_number").innerText = (num + 1) + " of " + (full_playlist.length); + List.addToYoutubePlaylist(playlist_id, full_playlist, num + 1, request_url); + //}, 50); + } } - } - }); + }); + } else { + if(num == full_playlist.length - 1){ + Helper.log(["All videoes added!"]); + Helper.log(["url: https://www.youtube.com/playlist?list=" + playlist_id]); + document.querySelector(".exported-list").insertAdjacentHTML("beforeend", "" + chan + ""); + Helper.addClass("#playlist_loader_export", "hide"); + Helper.addClass(".current_number", "hide"); + //$(".youtube_export_button").removeClass("hide"); + } else { + //setTimeout(function(){ + Helper.removeClass(".current_number", "hide"); + document.querySelector(".current_number").innerText = (num + 1) + " of " + (full_playlist.length); + List.addToYoutubePlaylist(playlist_id, full_playlist, num + 1, request_url); + //}, 50); + } + } }, sortList: function() { @@ -899,6 +916,9 @@ var List = { var video_title = _song_info.title; var video_votes = _song_info.votes; var video_thumb_url = "//img.youtube.com/vi/"+video_id+"/mqdefault.jpg"; + if(_song_info.source == "soundcloud") { + video_thumb_url = _song_info.thumbnail; + } var video_thumb = "background-image:url('" + video_thumb_url + "');"; var song = document.createElement("div"); song.innerHTML = list_html; @@ -924,9 +944,11 @@ var List = { song.querySelector(".list-image").setAttribute(image_attr,video_thumb); if(list){ + song.querySelector("#list-song") song.querySelector(".list-votes").innerText = video_votes; song.querySelector("#list-song").setAttribute("data-video-id", video_id); song.querySelector("#list-song").setAttribute("data-video-type", "song"); + song.querySelector("#list-song").setAttribute("data-video-source", _song_info.source); song.querySelector("#list-song").setAttribute("id", video_id); song.classList.remove("hide"); song.querySelector(".vote-container").setAttribute("title", video_title); diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 1c8e3aab..81a7cfdd 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -5,6 +5,10 @@ var client = false; if(domain.length > 0 && domain[0] == "client") { client = true; } +var _SC1; +var _SC2; +var firstLoad = ""; +var videoSource; var dynamicListeners = {}; var socket_connected = false; var hasadmin = 0; @@ -420,6 +424,7 @@ addListener("submit", "#description_form", function(event){ }); addListener("click", "#playpause-overlay", function(){ + console.log("playpause"); if(document.getElementById("play-overlay").classList.contains("hide")){ Player.pauseVideo(); Helper.toggleClass("#play-overlay", "hide"); @@ -488,6 +493,9 @@ addListener("click", ".copy-context-menu", function(e) { addListener("click", ".find-context-menu", function(e) { this.preventDefault(); var that = e; + if(that.classList.contains("context-menu-disabled")) { + return; + } var parent = that.parentElement; var id = parent.getAttribute("data-id"); Search.search(id, false, true); @@ -580,6 +588,12 @@ document.addEventListener("keydown", function(event) { document.querySelector("#import") != document.activeElement && document.querySelector("#find_input") != document.activeElement && document.querySelector("#import_spotify") != document.activeElement) { + console.log("play pause space", videoSource); + if(videoSource == "soundcloud") { + event.preventDefault(); + Playercontrols.play_pause(); + return false; + } if(Player.player.getPlayerState() == 1) { event.preventDefault(); Player.player.pauseVideo(); @@ -741,6 +755,10 @@ addListener("click", ".modal-close", function(event){ this.preventDefault(); }); +addListener("click", "#player_overlay", function(event) { + if(videoSource == "soundcloud") Playercontrols.play_pause(); +}); + /* addListener("change", ".password_protected", function(event) { this.preventDefault(); @@ -1254,9 +1272,16 @@ addListener("click", ".result-object", function(e){ var original_length = e.getAttribute("data-video-length"); var start = parseInt(e.querySelector(".result-start").value); var end = parseInt(e.querySelector(".result-end").value); + var source = "youtube"; + var thumbnail; + if(e.getAttribute("data-type-source") != undefined) { + source = "soundcloud"; + thumbnail = e.getAttribute("data-type-thumbnail"); + } if(end > original_length) { end = original_length; } + console.log(source); if(start > end) { M.toast({html: "Start can't be before the end..", displayLength: 3000, classes: "red lighten"}); } else if(start < 0) { @@ -1264,7 +1289,7 @@ addListener("click", ".result-object", function(e){ } else { try { var length = parseInt(end) - parseInt(start); - Search.submitAndClose(id, title, length, start, end); + Search.submitAndClose(id, title, length, start, end, source, thumbnail); } catch(err) { M.toast({html: "Only numbers are accepted as song start and end parameters..", displayLength: 3000, classes: "red lighten"}); } @@ -1349,6 +1374,12 @@ addListener("click", "#add-many", function(e){ if(end > original_length) { end = original_length; } + var source = "youtube"; + if(e.getAttribute("data-type-source") != undefined) { + source = "soundcloud"; + thumbnail = e.getAttribute("data-type-thumbnail"); + } + console.log(source); if(start > end) { M.toast({html: "Start can't be before the end..", displayLength: 3000, classes: "red lighten"}); } else if(start < 0) { @@ -1357,7 +1388,7 @@ addListener("click", "#add-many", function(e){ try { var length = parseInt(end) - parseInt(start); e.parentElement.parentElement.parentElement.remove(); - Search.submit(id, title, length, false, 0, 1, start, end); + Search.submit(id, title, length, false, 0, 1, start, end, source, thumbnail); } catch(event) { M.toast({html: "Only numbers are accepted as song start and end parameters..", displayLength: 3000, classes: "red lighten"}); } @@ -1380,7 +1411,7 @@ addListener("click", ".add-suggested", function(e){ var title = e.getAttribute("data-video-title"); var length = e.getAttribute("data-video-length"); var added_by = e.getAttribute("data-added-by"); - Search.submit(id, title, parseInt(length), false, 0, 1, 0, parseInt(length)); + Search.submit(id, title, parseInt(length), false, 0, 1, 0, parseInt(length), "youtube"); if(added_by == "user") { number_suggested = number_suggested - 1; if(number_suggested < 0) number_suggested = 0; diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index c25008f8..dd85d4a8 100755 --- a/server/public/assets/js/player.js +++ b/server/public/assets/js/player.js @@ -7,6 +7,7 @@ var Player = { stopInterval: false, fireplace: "", np: {}, + soundcloud_player: document.querySelector('#soundcloud_player'), youtube_listener: function(obj) { Helper.log(["object", obj]); @@ -44,6 +45,7 @@ var Player = { 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"; if(player_ready) { Player.cueVideoById(video_id, duration); Player.stopVideo(); @@ -107,6 +109,7 @@ var Player = { Player.stopVideo(); } video_id = obj.np[0].id; + videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube"; Player.np = { id: video_id, start: obj.np[0].start, @@ -156,6 +159,7 @@ var Player = { 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.setThumbnail(conf, video_id); if(mobile_beginning && Helper.mobilecheck() && seekTo === 0 && !chromecastAvailable) { seekTo = 1 + Player.np.start; @@ -246,12 +250,23 @@ var Player = { } else { empty_clear = false; } + try { + if(videoSource == "soundcloud") { + Player.player.stopVideo(); + } else { + SC.Widget(Player.soundcloud_player).pause(); + } + } catch(e) {} }, setThumbnail: function(conf, video_id) { if(embed) return; if(!conf.hasOwnProperty("thumbnail") || conf.thumbnail == "") { - document.getElementById("thumbnail_image").innerHTML = "thumbnail"; + if(videoSource == "soundcloud") { + document.getElementById("thumbnail_image").innerHTML = "thumbnail"; + } else { + document.getElementById("thumbnail_image").innerHTML = "thumbnail"; + } } }, @@ -366,11 +381,18 @@ var Player = { } //Playercontrols.play_pause(); } else { - Player.player.playVideo(); + console.log(videoSource); + if(videoSource == "soundcloud") { + console.log("you need to play now"); + SC.Widget(document.querySelector("#soundcloud_player")).play(); + } else { + Player.player.playVideo(); + } } }, pauseVideo: function(){ + console.log("pause"); if(chromecastAvailable){ castSession.sendMessage("urn:x-cast:zoff.me", {type: "pauseVideo"}); if(document.getElementById("play").classList.contains("hide")){ @@ -379,8 +401,14 @@ var Player = { } //Playercontrols.play_pause(); } else { + console.log(videoSource); paused = true; - Player.player.pauseVideo(); + if(videoSource == "soundcloud") { + console.log("you need to pause now"); + SC.Widget(document.querySelector("#soundcloud_player")).pause(); + } else { + Player.player.pauseVideo(); + } } }, @@ -406,8 +434,35 @@ var Player = { 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 { + if(videoSource == "soundcloud") { + Helper.removeClass(document.getElementById("player_overlay"), "hide"); + SC.Widget(Player.soundcloud_player).load(id, { + auto_play: true, + buying:false, + sharing:false, + download:false, + show_user:false, + callback: function() { + SC.Widget(Player.soundcloud_player).setVolume(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", document.querySelector("#controls").style.backgroundColor); + Helper.addClass("#player_overlay_text", "hide"); + } + }); + //SC.Widget(Player.soundcloud_player).play(); + } else { //window.player = Player.player; - Player.player.loadVideoById({'videoId': id, 'startSeconds': s, 'endSeconds': e}); + 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}); + } } if(offline) { getColor(id); @@ -423,8 +478,29 @@ var Player = { if(end) e = end; else e = Player.np.end; - Player.player.cueVideoById({'videoId': id, 'startSeconds': s, 'endSeconds': e}); - + if(videoSource == "soundcloud") { + SC.Widget(Player.soundcloud_player).load(id, { + auto_play: false, + buying:false, + sharing:false, + download:false, + show_user:false, + callback: function() { + SC.Widget(Player.soundcloud_player).setVolume(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", document.querySelector("#controls").style.backgroundColor); + Helper.addClass("#player_overlay_text", "hide"); + } + }); + } else { + Player.player.cueVideoById({'videoId': id, 'startSeconds': s, 'endSeconds': e}); + } }, stopVideo: function(){ @@ -442,6 +518,7 @@ var Player = { castSession.setVolume(vol/100); } else { Player.player.setVolume(vol); + SC.Widget(Player.soundcloud_player).setVolume(vol); } }, @@ -571,6 +648,92 @@ var Player = { } }, + soundcloudFinish: function() { + playing = false; + paused = false; + + if(!offline) { + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + socket.emit("end", {id: video_id, channel: chan.toLowerCase()}); + } else { + Player.playNext(); + } + }, + + soundcloudPause: function() { + if(end_programmatically) { + paused = false; + playing = false; + end_programmatically = false; + } else { + if(!chromecastAvailable){ + if(beginning && mobile_beginning) { + Helper.css("#playpause", "visibility", "visible"); + Helper.css("#playpause", "pointer-events", "all"); + Helper.css("#channel-load", "display", "none"); + } + if(!empty_clear && !gotten_np) { + paused = true; + } + if(gotten_np) gotten_np = false; + if(window.location.pathname != "/") Playercontrols.play_pause_show(); + mobile_beginning = true; + } + Helper.removeClass("#play", "hide"); + Helper.addClass("#pause", "hide"); + } + }, + + soundcloudPlay: function() { + if(embed) { + Helper.css("#player", "visibility", "visible"); + } + if(embed && !autoplay) autoplay = true; + if(!window.MSStream) { + Helper.css("#player", "opacity", "1"); + //if(!Helper.mobilecheck()) { + Helper.css("#channel-load", "display", "none"); + + //} + } + Helper.css("#playpause", "visibility", "visible"); + Helper.css("#playpause", "pointer-events", "all"); + playing = true; + if(beginning && Helper.mobilecheck() && !chromecastAvailable){ + //Player.pauseVideo(); + beginning = false; + mobile_beginning = false; + + } + //if(!embed && window.location.pathname != "/" && !chromecastAvailable) Helper.addClass("#player_overlay", "hide"); + if(window.location.pathname != "/"){ + Helper.addClass("#play", "hide"); + Helper.removeClass("#pause", "hide"); + } + if((paused || was_stopped) && !offline) { + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + socket.emit('pos', {channel: chan.toLowerCase()}); + paused = false; + was_stopped = false; + } + }, + + soundcloudReady: function() { + console.log("loaded"); + 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).load("https://soundcloud.com/kid-astray/kid-astray-back-to-the-ordinary", { + auto_play: false, + buying:false, + sharing:false, + download:false, + show_user:false, + }); + }, + onPlayerReady: function(event) { try{ beginning = true; @@ -734,7 +897,13 @@ var Player = { dMinutes = Math.floor(duration / 60); dSeconds = duration - dMinutes * 60; - currDurr = Player.player.getCurrentTime() !== undefined ? Math.floor(Player.player.getCurrentTime()) : seekTo; + if(videoSource == "soundcloud") { + SC.Widget(Player.soundcloud_player).getPosition(function(dur) { + currDurr = Math.floor(dur) / 1000; + }); + } else { + currDurr = Player.player.getCurrentTime() !== undefined ? Math.floor(Player.player.getCurrentTime()) : seekTo; + } if(currDurr - Player.np.start > duration && !offline) { currDurr = duration - Player.np.start; } @@ -761,17 +930,33 @@ var Player = { if(!dragging) { document.getElementById("bar").style.width = per+"%"; } + if(videoSource == "soundcloud") { + SC.Widget(Player.soundcloud_player).isPaused(function(paused) { + if(Math.floor(currDurr / 1000) > Player.np.end && !paused) { + end_programmatically = true; - if(Player.player.getCurrentTime() > Player.np.end && Player.player.getPlayerState() == YT.PlayerState.PLAYING) { - end_programmatically = true; + if(!offline) { + SC.Widget(Player.soundcloud_player).pause(); + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + socket.emit("end", {id: video_id, channel: chan.toLowerCase()}); + } else { + Player.playNext(); + } + } + }); + } else { + if(Player.player.getCurrentTime() > Player.np.end && Player.player.getPlayerState() == YT.PlayerState.PLAYING) { + end_programmatically = true; - if(!offline) { - Player.player.pauseVideo(); - /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); - if(u == undefined) u = "";*/ - socket.emit("end", {id: video_id, channel: chan.toLowerCase()}); - } else { - Player.playNext(); + if(!offline) { + Player.player.pauseVideo(); + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + socket.emit("end", {id: video_id, channel: chan.toLowerCase()}); + } else { + Player.playNext(); + } } } } @@ -794,6 +979,46 @@ var Player = { firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); } + + if(document.querySelectorAll("script[src='https://w.soundcloud.com/player/api.js']").length == 1) { + SC.Widget(Player.soundcloud_player); + } else { + tag = document.createElement('script'); + tag.src = "https://w.soundcloud.com/player/api.js"; + firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + + tagSearch = document.createElement('script'); + tagSearch.src = "https://connect.soundcloud.com/sdk/sdk-3.3.0.js"; + firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tagSearch, firstScriptTag); + console.log("hello"); + + tagSearch.onload = function() { + if(firstLoad == "") { + firstLoad = "search"; + _SC2 = SC; + } else { + _SC2 = SC; + SC = _SC1; + _SC1 = _SC2; + } + console.log("loaded1") + window._SC1 = _SC1; + _SC1.initialize({ + client_id: 'ed53fc01f248f15becddf8eb52cc91ef' + }); + } + + tag.onload = function() { + if(firstLoad == "") { + firstLoad = "widget"; + _SC1 = SC; + } + SC.Widget(Player.soundcloud_player); + SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.READY, Player.soundcloudReady); + } + } } }; diff --git a/server/public/assets/js/playercontrols.js b/server/public/assets/js/playercontrols.js index 975c6e99..20371f30 100755 --- a/server/public/assets/js/playercontrols.js +++ b/server/public/assets/js/playercontrols.js @@ -8,6 +8,7 @@ var Playercontrols = { }, initControls: function() { + console.log("init controls"); document.getElementById("volume-button").addEventListener("click", Playercontrols.mute_video); document.getElementById("playpause").addEventListener("click", Playercontrols.play_pause); document.getElementById("volume-button-overlay").addEventListener("click", Playercontrols.mute_video); @@ -189,25 +190,36 @@ var Playercontrols = { }, play_pause: function() { + console.log("play pause here"); if(!chromecastAvailable){ - if(Player.player.getPlayerState() == YT.PlayerState.PLAYING) - { - Player.pauseVideo(); - if(Helper.mobilecheck() && !window.MSStream){ + if(videoSource == "soundcloud") { + SC.Widget(Player.soundcloud_player).isPaused(function(paused) { + if(paused) { + Player.playVideo(); + } else { + Player.pauseVideo(); + } + }); + } else { + if(Player.player.getPlayerState() == YT.PlayerState.PLAYING) + { + Player.pauseVideo(); + if(Helper.mobilecheck() && !window.MSStream){ + //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ + //document.getElementById("player").style.display = "none"; + Helper.css("#player", "display", "none"); + Helper.toggleClass(".video-container", "click-through"); + Helper.toggleClass(".page-footer", "padding-bottom-extra"); + } + } else if(Player.player.getPlayerState() == YT.PlayerState.PAUSED || Player.player.getPlayerState() === YT.PlayerState.ENDED || (Player.player.getPlayerState() === YT.PlayerState.CUED)){ + Player.playVideo(); //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ - //document.getElementById("player").style.display = "none"; - Helper.css("#player", "display", "none"); - Helper.toggleClass(".video-container", "click-through"); - Helper.toggleClass(".page-footer", "padding-bottom-extra"); - } - } else if(Player.player.getPlayerState() == YT.PlayerState.PAUSED || Player.player.getPlayerState() === YT.PlayerState.ENDED || (Player.player.getPlayerState() === YT.PlayerState.CUED)){ - Player.playVideo(); - //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ - if(Helper.mobilecheck() && !window.MSStream){ - //document.getElementById("player").style.display = "block"; - Helper.css("#player", "display", "block"); - Helper.toggleClass(".video-container", "click-through"); - Helper.toggleClass(".page-footer", "padding-bottom-extra"); + if(Helper.mobilecheck() && !window.MSStream){ + //document.getElementById("player").style.display = "block"; + Helper.css("#player", "display", "block"); + Helper.toggleClass(".video-container", "click-through"); + Helper.toggleClass(".page-footer", "padding-bottom-extra"); + } } } } else { @@ -216,6 +228,7 @@ var Playercontrols = { }, play_pause_show: function() { + console.log("pause2"); if(chromecastAvailable){ if(document.getElementById("play").classList.contains("hide")){ Player.pauseVideo(); @@ -265,6 +278,8 @@ var Playercontrols = { setVolume: function(vol) { Player.setVolume(vol); + console.log(vol); + SC.Widget(Player.soundcloud_player).setVolume(vol); Playercontrols.choose_button(vol, false); if(Player.player.isMuted()) Player.player.unMute(); @@ -345,12 +360,29 @@ var Playercontrols = { }, playPause: function() { - state = Player.player.getPlayerState(); - button = document.getElementById("playpause"); - if(state == YT.PlayerState.PLAYING) { - Player.pauseVideo(); - } else if(state == YT.PlayerState.PAUSED) { - Player.playVideo(); + console.log("playpause", videoSource); + if(videoSource == "soundcloud") { + console.log("hello"); + SC.Widget(Player.soundcloud_player).isPaused(function(paused) { + console.log(paused); + if(paused) { + Helper.addClass("#play", "hide"); + Helper.removeClass("#pause", "hide"); + SC.Widget(Player.soundcloud_player).play(); + } else { + Helper.removeClass("#play", "hide"); + Helper.addClass("#pause", "hide"); + SC.Widget(Player.soundcloud_player).pause(); + } + }) + } else { + state = Player.player.getPlayerState(); + button = document.getElementById("playpause"); + if(state == YT.PlayerState.PLAYING) { + Player.pauseVideo(); + } else if(state == YT.PlayerState.PAUSED) { + Player.playVideo(); + } } }, diff --git a/server/public/assets/js/search.js b/server/public/assets/js/search.js index d6b15e46..8324fe6a 100755 --- a/server/public/assets/js/search.js +++ b/server/public/assets/js/search.js @@ -17,28 +17,29 @@ var Search = { //$("#results").empty(); if(document.querySelector("#search-btn i").innerText == "close") { document.querySelector("body").setAttribute("style", "overflow-y:auto") - /*$("#results").slideUp({ - complete: function() { - $("#results").empty(); - } - });*/ + document.getElementById("results").innerHTML = ""; + document.getElementById("results_soundcloud").innerHTML = ""; + Helper.css(".search_results", "display", "none"); + Helper.css(".results-tabs", "display", "none"); document.querySelector(".search_input").value = ""; document.querySelector("#search-btn i").innerText = "search"; } else { document.querySelector("#search-btn i").innerText = "close"; + Helper.css(".search_results", "display", "block"); } document.querySelector("#search").focus(); }, search: function(search_input, retried, related, pagination){ + if(result_html === undefined || empty_results_html === undefined) { result_html = document.getElementById("temp-results-container"); empty_results_html = Helper.html("#empty-results-container"); } if(!pagination && document.querySelectorAll("#inner-results").length == 0) { - Helper.setHtml(".search_results", ''); + Helper.setHtml("#results", ''); } if(search_input !== ""){ searching = true; @@ -55,7 +56,8 @@ var Search = { Helper.addClass(".search_loader_spinner", "active"); - Helper.removeClass("#results", "hide"); + Helper.removeClass(".search_results", "hide"); + Helper.css(".results-tabs", "display", "none"); Helper.ajax({ type: "GET", @@ -63,11 +65,13 @@ var Search = { dataType: "jsonp", success: function(response){ response = JSON.parse(response); + var output = ""; var nextPageToken = response.nextPageToken; var prevPageToken = response.prevPageToken; if(response.items.length === 0) { document.getElementById("results").innerHTML = ""; Helper.css("#results", "display", "block"); + Helper.css(".results-tabs", "display", "block"); //$("").appendTo($("#results")).show("blind", 83.33); document.getElementById("results").insertAdjacentHTML("beforeend", "
"+empty_results_html+"
"); Helper.removeClass(".search_loader_spinner", "active"); @@ -88,18 +92,17 @@ var Search = { pre_result.innerHTML = result_html.outerHTML; //$("#results").append(result_html); - for(var i = 0; i < response.items.length; i++) { var song = response.items[i]; var duration=song.contentDetails.duration; - secs=Search.durationToSeconds(duration); + var secs=Search.durationToSeconds(duration); var _temp_duration = Helper.secondsToOther(secs); if(!longsongs || secs<720){ - title=song.snippet.title; - enc_title=title;//encodeURIComponent(title).replace(/'/g, "\\\'"); - id=song.id; + var title=song.snippet.title; + var enc_title=title;//encodeURIComponent(title).replace(/'/g, "\\\'"); + var id=song.id; duration = duration.replace("PT","").replace("H","h ").replace("M","m ").replace("S","s"); - thumb=song.snippet.thumbnails.medium.url; + var thumb=song.snippet.thumbnails.medium.url; //$("#results").append(result_html); var songs = pre_result.cloneNode(true); @@ -127,7 +130,7 @@ var Search = { if(document.querySelectorAll("#inner-results").length == 0) { fresh = true; } - document.getElementsByClassName("search_results")[0].innerHTML = ""; + document.getElementById("results").innerHTML = ""; if(output.length > 0) { //$(window).scrollTop(0); if(!pagination && fresh) { @@ -158,6 +161,7 @@ var Search = { Helper.removeClass(".search_loader_spinner", "active"); Helper.css(".search_results", "display", "block"); + Helper.css(".results-tabs", "display", "block"); } else if(!retried){ Search.search(search_input, true); @@ -179,6 +183,104 @@ var Search = { } }, + soundcloudSearch: function(keyword) { + _SC1.get('/tracks', { + q: keyword + }).then(function(tracks) { + + var pre_result = document.createElement("div"); + pre_result.innerHTML = result_html.outerHTML; + + //$("#results").append(result_html); + var output = ""; + for(var i = 0; i < tracks.length; i++) { + var song = tracks[i]; + + var duration=Math.floor(song.duration / 1000); + //var secs=Search.durationToSeconds(duration); + var secs = duration; + var _temp_duration = Helper.secondsToOther(secs); + if(!longsongs || secs<720){ + var title=song.title; + var enc_title=title;//encodeURIComponent(title).replace(/'/g, "\\\'"); + var id=song.permalink_url; + //duration = duration.replace("PT","").replace("H","h ").replace("M","m ").replace("S","s"); + //thumb=song.artwork_url; + var thumb = null; + if(thumb == null) thumb = song.waveform_url; + console.log(song); + //$("#results").append(result_html); + var songs = pre_result.cloneNode(true); + songs.querySelector(".search-title").innerText = title; + songs.querySelector(".result_info").innerText = Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1]); + songs.querySelector(".thumb").setAttribute("src", thumb); + //songs.querySelector(".add-many").attr("onclick", "submit('"+id+"','"+enc_title+"',"+secs+");"); + songs.querySelector("#add-many").setAttribute("data-video-id", id); + songs.querySelector("#add-many").setAttribute("data-video-title", enc_title); + songs.querySelector("#add-many").setAttribute("data-video-length", secs); + //$($(songs).querySelector("div")[0]).setAttribute("onclick", "submitAndClose('"+id+"','"+enc_title+"',"+secs+");"); + songs.querySelector("#temp-results").setAttribute("data-video-id", id); + songs.querySelector("#temp-results").setAttribute("data-video-title", enc_title); + songs.querySelector("#temp-results").setAttribute("data-video-length", secs); + songs.querySelector(".open-externally").setAttribute("href", song.permalink_url); + songs.querySelector(".result-end").setAttribute("value", secs); + songs.querySelector("#temp-results").setAttribute("data-type-source", "soundcloud"); + songs.querySelector("#temp-results").setAttribute("data-type-thumbnail", thumb); + //$($(songs).querySelector("div")[0]).setAttribute("id", id) + //output += undefined; + if(songs.innerHTML != undefined && songs.innerHTML != "") { + output += songs.innerHTML; + } + } + } + var fresh = false; + if(document.querySelectorAll("#inner-results").length == 0) { + fresh = true; + } + document.getElementById("results_soundcloud").innerHTML = ""; + //console.log(output); + if(output.length > 0) { + //$(window).scrollTop(0); + /*if(!pagination && fresh) { + //Helper.css(".search_results", "display", "none"); + }*/ + //document.getElementById("results_soundcloud").insertAdjacentHTML("beforeend", pagination_buttons_html); + //$("
"+output+"
").prependTo($("#results")); + document.getElementById("results_soundcloud").insertAdjacentHTML("afterbegin", "
"+output+"
"); + if(!pagination && fresh) { + //$(".search_results").slideDown(); + } + document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:hidden !important") + + /*if(nextPageToken) { + document.querySelector(".next-results-button").setAttribute("data-pagination", nextPageToken); + } else { + Helper.addClass(".next-results-button", "disabled"); + } + if(prevPageToken) { + document.querySelector(".prev-results-button").setAttribute("data-pagination", prevPageToken); + } else { + Helper.addClass(".prev-results-button", "disabled"); + } + + document.querySelector(".pagination-results a").setAttribute("data-original-search", search_input); + */ + //setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250); + + /*Helper.removeClass(".search_loader_spinner", "active"); + Helper.css(".search_results", "display", "block");*/ + + } /*else if(!retried){ + Search.search(search_input, true); + } else { + //$("").appendTo($("#results_soundcloud")).show("blind", 83.33); + document.getElementById("results_soundcloud").insertAdjacentHTML("beforeend", "
"+empty_results_html+"
"); + Helper.css("#results_soundcloud", "display", "block"); + Helper.removeClass(".search_loader_spinner", "active"); + }*/ + }); + }, + backgroundSearch: function(title, artist, length, totalNumber, current){ var keyword= encodeURIComponent(title + " " + artist); var yt_url = "https://www.googleapis.com/youtube/v3/search?key="+api_key+"&videoEmbeddable=true&part=id,snippet&fields=items(id,snippet)&type=video&order=relevance&safeSearch=none&maxResults=10&videoCategoryId=10"; @@ -299,112 +401,57 @@ var Search = { if((Search.submitArray.length - 1) == Search.submitArrayExpected) { socket.emit("addPlaylist", {channel: chan.toLowerCase(), songs: Search.submitArray}); /*$.each(Search.submitArray, function(i, data){ - Search.submit(data.id, data.title, data.duration, true, i, Search.submitArray.length - 1, 0, data.duration); - });*/ - document.getElementById("import_spotify").disabled = false; - Helper.removeClass("#import_spotify", "hide"); - Helper.addClass("#playlist_loader_spotify", "hide"); - Search.submitArray = []; - Search.submitArrayExpected = null; - } - }, + Search.submit(data.id, data.title, data.duration, true, i, Search.submitArray.length - 1, 0, data.duration); + });*/ + document.getElementById("import_spotify").disabled = false; + Helper.removeClass("#import_spotify", "hide"); + Helper.addClass("#playlist_loader_spotify", "hide"); + Search.submitArray = []; + Search.submitArrayExpected = null; + } +}, - submitAndClose: function(id,title,duration, start, end){ - Search.submit(id,title, duration, false, 0, 1, start, end); - Helper.setHtml("#results", ''); - Search.showSearch(); - document.getElementById("search").value = ""; - document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:auto") - Helper.setHtml("#results",""); - Helper.removeClass(".main", "blurT"); - Helper.removeClass("#controls", "blurT"); - Helper.removeClass(".main", "clickthrough"); - }, +submitAndClose: function(id,title,duration, start, end, source, thumbnail){ + Search.submit(id,title, duration, false, 0, 1, start, end, source, thumbnail); + Helper.setHtml("#results", ''); + Search.showSearch(); + document.getElementById("search").value = ""; + document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:auto") + Helper.setHtml("#results",""); + Helper.setHtml("#results-soundcloud", ""); + Helper.removeClass(".main", "blurT"); + Helper.removeClass("#controls", "blurT"); + Helper.removeClass(".main", "clickthrough"); + Helper.css(".search_results", "display", "none"); +}, - importPlaylist: function(pId,pageToken){ - token = ""; - var headers; - var datatype; - if(pageToken !== undefined) - token = "&pageToken="+pageToken; - playlist_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=49&key="+api_key+"&playlistId="+pId+token; - if(youtube_authenticated) { - datatype = "html"; - headers = { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + access_token_data_youtube.access_token - }; - } else { - headers = {};//'Content-Type': 'application/json'}; - datatype = "jsonp"; - } - Helper.ajax({ - type: "GET", - url: playlist_url, - dataType: datatype, - //dataType:"jsonp", - headers: headers, - success: function(response) { - response = JSON.parse(response); - if(response.error){ - if(response.error.errors[0].reason == "playlistItemsNotAccessible"){ - var nonce = Helper.randomString(29); - window.callback = function(data) { - access_token_data_youtube = data; - if(access_token_data_youtube.state == nonce){ - youtube_authenticated = true; - setTimeout(function(){ - youtube_authenticated = false; - access_token_data_youtube = {}; - }, access_token_data_youtube.expires_in * 1000); - Search.importPlaylist(pId, pageToken); - } else { - access_token_data_youtube = ""; - console.error("Nonce doesn't match"); - } - youtube_window.close(); - window.callback = ""; - }; - youtube_window = window.open("/o_callback#youtube=true&nonce=" + nonce, "", "width=600, height=600"); - } else { - Helper.log([ - "import list error: ", - response.error - ]); - document.getElementById("import").disabled = false; - Helper.addClass("#playlist_loader", "hide"); - Helper.removeClass("#import", "hide"); - before_toast(); - M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000}); - } - - } else { - var ids=""; - var this_length = 0; - if(typeof(response) == "string") response = JSON.parse(response); - //Search.addVideos(response.items[0].contentDetails.videoId); - //response.items.shift(); - for(var i = 0; i < response.items.length; i++) { - var data = response.items[i]; - ids+=data.contentDetails.videoId+","; - Search.submitYouTubeArrayIds.push(data.contentDetails.videoId); - this_length += 1; - Search.submitYouTubeExpected += 1; - } - - if(response.nextPageToken) { - //Search.addVideos(ids, true, 0, false, this_length); - Search.importPlaylist(pId, response.nextPageToken); - } else { - Search.addVideos(Search.submitYouTubeArrayIds); - //Search.addVideos(ids, true, Search.submitYouTubeExpected, true, this_length); - //Search.submitYouTubeExpected = 0; - } - document.getElementById("import").value = ""; - } - }, - error: function(e) { - if(e.status == 403){ +importPlaylist: function(pId,pageToken){ + token = ""; + var headers; + var datatype; + if(pageToken !== undefined) + token = "&pageToken="+pageToken; + playlist_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=49&key="+api_key+"&playlistId="+pId+token; + if(youtube_authenticated) { + datatype = "html"; + headers = { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + access_token_data_youtube.access_token + }; + } else { + headers = {};//'Content-Type': 'application/json'}; + datatype = "jsonp"; + } + Helper.ajax({ + type: "GET", + url: playlist_url, + dataType: datatype, + //dataType:"jsonp", + headers: headers, + success: function(response) { + response = JSON.parse(response); + if(response.error){ + if(response.error.errors[0].reason == "playlistItemsNotAccessible"){ var nonce = Helper.randomString(29); window.callback = function(data) { access_token_data_youtube = data; @@ -434,110 +481,167 @@ var Search = { before_toast(); M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000}); } - } - }); - }, - importSpotifyPlaylist: function(url){ - Helper.ajax({ - method: "get", - url: url, - headers: { - 'Authorization': 'Bearer ' + access_token_data.access_token - }, - success: function(response) { - response = JSON.parse(response); + } else { + var ids=""; + var this_length = 0; + if(typeof(response) == "string") response = JSON.parse(response); + //Search.addVideos(response.items[0].contentDetails.videoId); + //response.items.shift(); for(var i = 0; i < response.items.length; i++) { var data = response.items[i]; - //ids+=data.contentDetails.videoId+","; - Search.backgroundSearch(data.track.name, data.track.artists.map(function(elem){return elem.name;}).join(" "), Math.floor(data.track.duration_ms/1000), response.total, i + response.offset); + ids+=data.contentDetails.videoId+","; + Search.submitYouTubeArrayIds.push(data.contentDetails.videoId); + this_length += 1; + Search.submitYouTubeExpected += 1; + } + if(response.nextPageToken) { + //Search.addVideos(ids, true, 0, false, this_length); + Search.importPlaylist(pId, response.nextPageToken); + } else { + Search.addVideos(Search.submitYouTubeArrayIds); + //Search.addVideos(ids, true, Search.submitYouTubeExpected, true, this_length); + //Search.submitYouTubeExpected = 0; } - if(response.next){ - Search.importSpotifyPlaylist(response.next); - } - }, - error: function(e) { - document.getElementById("import_spotify").disabled = false; - Helper.removeClass("#import_spotify", "hide"); - Helper.addClass("#playlist_loader_spotify", "hide"); + document.getElementById("import").value = ""; + } + }, + error: function(e) { + if(e.status == 403){ + var nonce = Helper.randomString(29); + window.callback = function(data) { + access_token_data_youtube = data; + if(access_token_data_youtube.state == nonce){ + youtube_authenticated = true; + setTimeout(function(){ + youtube_authenticated = false; + access_token_data_youtube = {}; + }, access_token_data_youtube.expires_in * 1000); + Search.importPlaylist(pId, pageToken); + } else { + access_token_data_youtube = ""; + console.error("Nonce doesn't match"); + } + youtube_window.close(); + window.callback = ""; + }; + youtube_window = window.open("/o_callback#youtube=true&nonce=" + nonce, "", "width=600, height=600"); + } else { + Helper.log([ + "import list error: ", + response.error + ]); + document.getElementById("import").disabled = false; + Helper.addClass("#playlist_loader", "hide"); + Helper.removeClass("#import", "hide"); before_toast(); M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000}); } - }); - }, - - addVideos: function(ids){ - var more = false; - var next_ids = []; - var request_url="https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=" + api_key + "&id="; - for(var i = 0; i < ids.length; i++) { - if(i > 48) { - more = true; - next_ids = ids.slice(i, ids.length); - break; - } - request_url += ids[i] + ","; } - Helper.ajax({ - type: "GET", - url: request_url, - success: function(response){ - response = JSON.parse(response); - var x = 0; - if(response.error) { - Search.submitYouTubeError = true; - } - for(var i = 0; i < response.items.length; i++) { - var song = response.items[i]; - var duration=Search.durationToSeconds(song.contentDetails.duration); - if(!longsongs || duration<720){ - enc_title= song.snippet.title;//encodeURIComponent(song.snippet.title); - //Search.submit(song.id, enc_title, duration, playlist, i); - x += 1; - Search.submitYouTubeArray.push({id: song.id, title: enc_title, duration: duration}); - } - } - if(more) Search.addVideos(next_ids); - else { - socket.emit("addPlaylist", {channel: chan.toLowerCase(), songs: Search.submitYouTubeArray}); - Search.submitYouTubeArray = []; - Search.submitYouTubeExpected = 0; - } - }, - error: function(e) { - console.log(e); - } - }); - }, + }); +}, - submit: function(id,title,duration, playlist, num, full_num, start, end){ - if((client || Helper.mobilecheck()) && !socket_connected) { - add_ajax(id, title, duration, playlist, num, full_num, start, end); - return; +importSpotifyPlaylist: function(url){ + Helper.ajax({ + method: "get", + url: url, + headers: { + 'Authorization': 'Bearer ' + access_token_data.access_token + }, + success: function(response) { + response = JSON.parse(response); + for(var i = 0; i < response.items.length; i++) { + var data = response.items[i]; + //ids+=data.contentDetails.videoId+","; + Search.backgroundSearch(data.track.name, data.track.artists.map(function(elem){return elem.name;}).join(" "), Math.floor(data.track.duration_ms/1000), response.total, i + response.offset); + + } + if(response.next){ + Search.importSpotifyPlaylist(response.next); + } + }, + error: function(e) { + document.getElementById("import_spotify").disabled = false; + Helper.removeClass("#import_spotify", "hide"); + Helper.addClass("#playlist_loader_spotify", "hide"); + before_toast(); + M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000}); } - if(offline && document.getElementsByName("addsongs")[0].checked && document.getElementsByName("addsongs")[0].disabled){ - var found_array = []; - for(var i = 0; i < full_playlist.length; i++) { - if(full_playlist[i].id == id) found_array.push(i); - } - if(found_array.length == 0){ - List.channel_function({type: "added", start: start, end: end, value: {added: (new Date).getTime()/1000, guids: [1], id: id, title: title, duration: duration, now_playing: false, votes: 1}}); - } else { - List.vote(id, "pos"); - } - } else { - /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); - if(u == undefined) u = "";*/ - emit("add", {id: id, start: start, end: end, title: title, list: chan.toLowerCase(), duration: duration}); - }//[id, decodeURIComponent(title), adminpass, duration, playlist]); - }, + }); +}, - durationToSeconds: function(duration) { - var matches = duration.match(time_regex); - hours= parseInt(matches[12])||0; - minutes= parseInt(matches[14])||0; - seconds= parseInt(matches[16])||0; - return hours*60*60+minutes*60+seconds; +addVideos: function(ids){ + var more = false; + var next_ids = []; + var request_url="https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=" + api_key + "&id="; + for(var i = 0; i < ids.length; i++) { + if(i > 48) { + more = true; + next_ids = ids.slice(i, ids.length); + break; + } + request_url += ids[i] + ","; } + Helper.ajax({ + type: "GET", + url: request_url, + success: function(response){ + response = JSON.parse(response); + var x = 0; + if(response.error) { + Search.submitYouTubeError = true; + } + for(var i = 0; i < response.items.length; i++) { + var song = response.items[i]; + var duration=Search.durationToSeconds(song.contentDetails.duration); + if(!longsongs || duration<720){ + enc_title= song.snippet.title;//encodeURIComponent(song.snippet.title); + //Search.submit(song.id, enc_title, duration, playlist, i); + x += 1; + Search.submitYouTubeArray.push({id: song.id, title: enc_title, duration: duration}); + } + } + if(more) Search.addVideos(next_ids); + else { + socket.emit("addPlaylist", {channel: chan.toLowerCase(), songs: Search.submitYouTubeArray}); + Search.submitYouTubeArray = []; + Search.submitYouTubeExpected = 0; + } + }, + error: function(e) { + console.log(e); + } + }); +}, + +submit: function(id,title,duration, playlist, num, full_num, start, end, source, thumbnail){ + if((client || Helper.mobilecheck()) && !socket_connected) { + add_ajax(id, title, duration, playlist, num, full_num, start, end, source, thumbnail); + return; + } + if(offline && document.getElementsByName("addsongs")[0].checked && document.getElementsByName("addsongs")[0].disabled){ + var found_array = []; + for(var i = 0; i < full_playlist.length; i++) { + if(full_playlist[i].id == id) found_array.push(i); + } + if(found_array.length == 0){ + List.channel_function({type: "added", start: start, end: end, value: {added: (new Date).getTime()/1000, guids: [1], id: id, title: title, duration: duration, now_playing: false, votes: 1}}); + } else { + List.vote(id, "pos"); + } + } else { + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + emit("add", {id: id, start: start, end: end, title: title, list: chan.toLowerCase(), duration: duration, source: source, thumbnail: thumbnail}); + }//[id, decodeURIComponent(title), adminpass, duration, playlist]); +}, + +durationToSeconds: function(duration) { + var matches = duration.match(time_regex); + hours= parseInt(matches[12])||0; + minutes= parseInt(matches[14])||0; + seconds= parseInt(matches[16])||0; + return hours*60*60+minutes*60+seconds; +} }; diff --git a/server/public/assets/js/suggestions.js b/server/public/assets/js/suggestions.js index 7141bc8b..84fb22b9 100755 --- a/server/public/assets/js/suggestions.js +++ b/server/public/assets/js/suggestions.js @@ -37,6 +37,7 @@ var Suggestions = { }, fetchYoutubeSuggests: function(id){ + if(videoSource == "soundcloud") return; var get_url = "https://www.googleapis.com/youtube/v3/search?part=snippet&relatedToVideoId="+id+"&type=video&key="+api_key; var video_urls = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id="; diff --git a/server/public/partials/channel/players.handlebars b/server/public/partials/channel/players.handlebars index 0dd00980..3185e9d3 100644 --- a/server/public/partials/channel/players.handlebars +++ b/server/public/partials/channel/players.handlebars @@ -3,6 +3,9 @@
{{/unless}}
+
diff --git a/server/public/partials/channel/search.handlebars b/server/public/partials/channel/search.handlebars index f4e48a08..adae34e8 100644 --- a/server/public/partials/channel/search.handlebars +++ b/server/public/partials/channel/search.handlebars @@ -1,43 +1,52 @@ -
-
-
-
-
-
- Thumb - -
-
-
-
- Start/End - - / - +
+
+ +
+
+
+
+
+
+
+ Thumb +
-
- keyboard_arrow_left +
+
+
+ Start/End + + / + +
+
+ keyboard_arrow_left +
-
-
- - open_in_new - -
- playlist_add +
+ + open_in_new + +
+ playlist_add +
-
-
-
- No results found.. +
+
+ No results found.. +
+
+
+ Prev + Next
-
- Prev - Next -
-
+
Test 2
+
diff --git a/server/routing/client/api.js b/server/routing/client/api.js index 6f4e87df..07579e2a 100644 --- a/server/routing/client/api.js +++ b/server/routing/client/api.js @@ -622,7 +622,8 @@ router.route('/api/list/:channel_name/:video_id').post(function(req,res) { if(!fetch_only && (!req.body.hasOwnProperty('adminpass') || !req.body.hasOwnProperty('userpass') || !req.params.hasOwnProperty('channel_name') || !req.params.hasOwnProperty('video_id') || !req.body.hasOwnProperty('duration') || !req.body.hasOwnProperty('start_time') || - !req.body.hasOwnProperty('end_time') || !req.body.hasOwnProperty('title'))) { + !req.body.hasOwnProperty('end_time') || !req.body.hasOwnProperty('title') || + !req.body.hasOwnProperty('source'))) { throw "Wrong format"; } @@ -637,6 +638,8 @@ router.route('/api/list/:channel_name/:video_id').post(function(req,res) { var duration = parseInt(req.body.duration); var start_time = parseInt(req.body.start_time); var end_time = parseInt(req.body.end_time); + var source = req.body.source; + if(source == "soundcloud" && !req.body.hasOwnProperty("thumbnail")) throw "Wrong format"; if(duration != end_time - start_time) duration = end_time - start_time; var title = req.body.title; if(typeof(userpass) != "string" || typeof(adminpass) != "string" || @@ -715,7 +718,8 @@ router.route('/api/list/:channel_name/:video_id').post(function(req,res) { if(now_playing.length == 0 && authenticated) { set_np = true; } - var new_song = {"added": Functions.get_time(),"guids":[guid],"id":video_id,"now_playing":set_np,"title":title,"votes":1, "duration":duration, "start": parseInt(start_time), "end": parseInt(end_time), "type": song_type}; + var new_song = {"added": Functions.get_time(),"guids":[guid],"id":video_id,"now_playing":set_np,"title":title,"votes":1, "duration":duration, "start": parseInt(start_time), "end": parseInt(end_time), "type": song_type, "source": source}; + if(source == "soundcloud") new_song.thumbnail = req.body.thumbnail; Search.get_correct_info(new_song, channel_name, false, function(element, found) { if(!found) { res.status(404).send(JSON.stringify(error.not_found.youtube)); From 2e404e6a61a02ec7716f3812c61885bbd5064447 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Thu, 3 May 2018 14:30:49 +0200 Subject: [PATCH 02/21] Prettier soundcloud results and search-tabs --- server/public/assets/js/search.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/server/public/assets/js/search.js b/server/public/assets/js/search.js index 8324fe6a..95f0c596 100755 --- a/server/public/assets/js/search.js +++ b/server/public/assets/js/search.js @@ -24,6 +24,7 @@ var Search = { Helper.css(".results-tabs", "display", "none"); document.querySelector(".search_input").value = ""; document.querySelector("#search-btn i").innerText = "search"; + Helper.css(document.querySelector(".search_results .col.s12"), "display", "none"); } else { document.querySelector("#search-btn i").innerText = "close"; Helper.css(".search_results", "display", "block"); @@ -68,6 +69,7 @@ var Search = { var output = ""; var nextPageToken = response.nextPageToken; var prevPageToken = response.prevPageToken; + Helper.css(document.querySelector(".search_results .col.s12"), "display", "block"); if(response.items.length === 0) { document.getElementById("results").innerHTML = ""; Helper.css("#results", "display", "block"); From 7d9873efd8544a031fb55439670f036af036f535 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Thu, 3 May 2018 15:32:42 +0200 Subject: [PATCH 03/21] Start-end event updated - Visual fixes - Set start-time and end-time for soundcloud player working --- server/public/assets/css/style.css | 2 +- server/public/assets/js/list.js | 1 + server/public/assets/js/listeners.js | 6 ++ server/public/assets/js/player.js | 65 ++++++++++++------- server/public/assets/js/playercontrols.js | 1 - server/public/assets/js/search.js | 32 ++++++--- .../public/partials/channel/search.handlebars | 2 +- 7 files changed, 72 insertions(+), 37 deletions(-) diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index 7b31106a..b2852aff 100755 --- a/server/public/assets/css/style.css +++ b/server/public/assets/css/style.css @@ -1631,7 +1631,7 @@ ul #chat-log{ } #results_soundcloud #inner-results { - height: calc(100vh - 64px - 76px); + height: calc(100vh - 64px - 64px); } #search_loader_inner{ diff --git a/server/public/assets/js/list.js b/server/public/assets/js/list.js index 1787e69b..74ad95c8 100755 --- a/server/public/assets/js/list.js +++ b/server/public/assets/js/list.js @@ -356,6 +356,7 @@ var List = { full_playlist.push(now_playing); } + console.log(added.source); if(added.source != "soundcloud" && document.querySelectorAll("#suggested-"+added.id).length > 0) { number_suggested = number_suggested - 1; if(number_suggested < 0) number_suggested = 0; diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 81a7cfdd..038283f7 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -650,6 +650,7 @@ document.addEventListener("keyup", function(event) { } });*/ document.querySelector("#results").innerHTML = ""; + document.querySelector("#results_soundcloud").innerHTML = ""; document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:auto") document.querySelector("#search-btn i").innerText = "search"; document.querySelector(".search_input").value = ""; @@ -1375,10 +1376,13 @@ addListener("click", "#add-many", function(e){ end = original_length; } var source = "youtube"; + var thumbnail; if(e.getAttribute("data-type-source") != undefined) { + source = "soundcloud"; thumbnail = e.getAttribute("data-type-thumbnail"); } + console.log(start, end); console.log(source); if(start > end) { M.toast({html: "Start can't be before the end..", displayLength: 3000, classes: "red lighten"}); @@ -1387,9 +1391,11 @@ addListener("click", "#add-many", function(e){ } else { try { var length = parseInt(end) - parseInt(start); + e.parentElement.parentElement.parentElement.remove(); Search.submit(id, title, length, false, 0, 1, start, end, source, thumbnail); } catch(event) { + console.log(event); M.toast({html: "Only numbers are accepted as song start and end parameters..", displayLength: 3000, classes: "red lighten"}); } } diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index dd85d4a8..b64a77f2 100755 --- a/server/public/assets/js/player.js +++ b/server/public/assets/js/player.js @@ -202,7 +202,7 @@ var Player = { } } if(!paused){ - if(((!mobile_beginning || chromecastAvailable) && prev_state != 2) && autoplay) { + if(((!mobile_beginning || chromecastAvailable) && prev_state != 2) && autoplay && videoSource != "soundcloud") { Player.playVideo(); } if(!durationBegun) { @@ -251,6 +251,8 @@ var Player = { empty_clear = false; } try { + document.getElementById("play").focus(); + console.log("focused"); if(videoSource == "soundcloud") { Player.player.stopVideo(); } else { @@ -302,6 +304,11 @@ var Player = { } break; case YT.PlayerState.PLAYING: + if(videoSource == "soundcloud") { + console.log("Supposed to play soundcloud not youtube"); + Player.player.stopVideo(); + return; + } if(embed) { Helper.css("#player", "visibility", "visible"); } @@ -435,7 +442,9 @@ var Player = { chrome.cast.Image('https://img.youtube.com/vi/'+id+'/mqdefault.jpg'); } else { if(videoSource == "soundcloud") { + Player.stopVideo(); 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: true, buying:false, @@ -443,6 +452,7 @@ var Player = { download:false, show_user:false, callback: function() { + Player.stopVideo(); SC.Widget(Player.soundcloud_player).setVolume(Crypt.get_volume()); console.log(start, seekTo); if(start == undefined) start = 0; @@ -451,7 +461,7 @@ var Player = { 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", document.querySelector("#controls").style.backgroundColor); + Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); Helper.addClass("#player_overlay_text", "hide"); } }); @@ -479,6 +489,8 @@ 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, @@ -494,7 +506,7 @@ var Player = { 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", document.querySelector("#controls").style.backgroundColor); + Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d"); Helper.addClass("#player_overlay_text", "hide"); } }); @@ -686,6 +698,9 @@ var Player = { }, soundcloudPlay: function() { + if(videoSource == "youtube") { + SC.Widget(Player.soundcloud_player).pause(); + } if(embed) { Helper.css("#player", "visibility", "visible"); } @@ -931,8 +946,9 @@ var Player = { document.getElementById("bar").style.width = per+"%"; } if(videoSource == "soundcloud") { + SC.Widget(Player.soundcloud_player).isPaused(function(paused) { - if(Math.floor(currDurr / 1000) > Player.np.end && !paused) { + if(currDurr > Player.np.end && !paused) { end_programmatically = true; if(!offline) { @@ -988,27 +1004,7 @@ var Player = { firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); - tagSearch = document.createElement('script'); - tagSearch.src = "https://connect.soundcloud.com/sdk/sdk-3.3.0.js"; - firstScriptTag = document.getElementsByTagName('script')[0]; - firstScriptTag.parentNode.insertBefore(tagSearch, firstScriptTag); - console.log("hello"); - tagSearch.onload = function() { - if(firstLoad == "") { - firstLoad = "search"; - _SC2 = SC; - } else { - _SC2 = SC; - SC = _SC1; - _SC1 = _SC2; - } - console.log("loaded1") - window._SC1 = _SC1; - _SC1.initialize({ - client_id: 'ed53fc01f248f15becddf8eb52cc91ef' - }); - } tag.onload = function() { if(firstLoad == "") { @@ -1017,6 +1013,27 @@ var Player = { } SC.Widget(Player.soundcloud_player); SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.READY, Player.soundcloudReady); + tagSearch = document.createElement('script'); + tagSearch.setAttribute("async", true); + tagSearch.src = "https://connect.soundcloud.com/sdk/sdk-3.3.0.js"; + firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tagSearch, firstScriptTag); + + tagSearch.onload = function() { + if(firstLoad == "") { + firstLoad = "search"; + _SC2 = SC; + } else { + _SC2 = SC; + SC = _SC1; + _SC1 = _SC2; + } + console.log("loaded1") + window._SC1 = _SC1; + _SC1.initialize({ + client_id: 'ed53fc01f248f15becddf8eb52cc91ef' + }); + } } } } diff --git a/server/public/assets/js/playercontrols.js b/server/public/assets/js/playercontrols.js index 20371f30..bc30570c 100755 --- a/server/public/assets/js/playercontrols.js +++ b/server/public/assets/js/playercontrols.js @@ -278,7 +278,6 @@ var Playercontrols = { setVolume: function(vol) { Player.setVolume(vol); - console.log(vol); SC.Widget(Player.soundcloud_player).setVolume(vol); Playercontrols.choose_button(vol, false); if(Player.player.isMuted()) diff --git a/server/public/assets/js/search.js b/server/public/assets/js/search.js index 95f0c596..db641278 100755 --- a/server/public/assets/js/search.js +++ b/server/public/assets/js/search.js @@ -21,13 +21,13 @@ var Search = { document.getElementById("results").innerHTML = ""; document.getElementById("results_soundcloud").innerHTML = ""; Helper.css(".search_results", "display", "none"); - Helper.css(".results-tabs", "display", "none"); + //Helper.css(".results-tabs", "display", "none"); document.querySelector(".search_input").value = ""; document.querySelector("#search-btn i").innerText = "search"; - Helper.css(document.querySelector(".search_results .col.s12"), "display", "none"); + //Helper.css(document.querySelector(".search_results .col.s12"), "display", "none"); } else { document.querySelector("#search-btn i").innerText = "close"; - Helper.css(".search_results", "display", "block"); + //Helper.css(".search_results", "display", "block"); } document.querySelector("#search").focus(); @@ -57,8 +57,8 @@ var Search = { Helper.addClass(".search_loader_spinner", "active"); - Helper.removeClass(".search_results", "hide"); - Helper.css(".results-tabs", "display", "none"); + //Helper.removeClass(".search_results", "hide"); + //Helper.css(".results-tabs", "display", "none"); Helper.ajax({ type: "GET", @@ -69,11 +69,11 @@ var Search = { var output = ""; var nextPageToken = response.nextPageToken; var prevPageToken = response.prevPageToken; - Helper.css(document.querySelector(".search_results .col.s12"), "display", "block"); + //Helper.css(document.querySelector(".search_results .col.s12"), "display", "block"); if(response.items.length === 0) { document.getElementById("results").innerHTML = ""; Helper.css("#results", "display", "block"); - Helper.css(".results-tabs", "display", "block"); + //Helper.css(".results-tabs", "display", "block"); //$("").appendTo($("#results")).show("blind", 83.33); document.getElementById("results").insertAdjacentHTML("beforeend", "
"+empty_results_html+"
"); Helper.removeClass(".search_loader_spinner", "active"); @@ -162,7 +162,9 @@ var Search = { //setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250); Helper.removeClass(".search_loader_spinner", "active"); - Helper.css(".search_results", "display", "block"); + if(document.querySelector("#results_soundcloud").innerHTML.length > 0) { + Helper.css(".search_results", "display", "block"); + } Helper.css(".results-tabs", "display", "block"); } else if(!retried){ @@ -171,6 +173,9 @@ var Search = { //$("").appendTo($("#results")).show("blind", 83.33); document.getElementById("results").insertAdjacentHTML("beforeend", "
"+empty_results_html+"
"); Helper.css("#results", "display", "block"); + if(document.querySelector("#results_soundcloud").innerHTML.length > 0) { + Helper.css(".search_results", "display", "block"); + } Helper.removeClass(".search_loader_spinner", "active"); } } @@ -194,6 +199,7 @@ var Search = { pre_result.innerHTML = result_html.outerHTML; //$("#results").append(result_html); + //Helper.css(document.querySelector(".search_results .col.s12"), "display", "block"); var output = ""; for(var i = 0; i < tracks.length; i++) { var song = tracks[i]; @@ -207,8 +213,8 @@ var Search = { var enc_title=title;//encodeURIComponent(title).replace(/'/g, "\\\'"); var id=song.permalink_url; //duration = duration.replace("PT","").replace("H","h ").replace("M","m ").replace("S","s"); - //thumb=song.artwork_url; - var thumb = null; + var thumb=song.artwork_url; + //var thumb = null; if(thumb == null) thumb = song.waveform_url; console.log(song); //$("#results").append(result_html); @@ -217,6 +223,8 @@ var Search = { songs.querySelector(".result_info").innerText = Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1]); songs.querySelector(".thumb").setAttribute("src", thumb); //songs.querySelector(".add-many").attr("onclick", "submit('"+id+"','"+enc_title+"',"+secs+");"); + songs.querySelector("#add-many").setAttribute("data-type-source", "soundcloud"); + songs.querySelector("#add-many").setAttribute("data-type-thumbnail", thumb); songs.querySelector("#add-many").setAttribute("data-video-id", id); songs.querySelector("#add-many").setAttribute("data-video-title", enc_title); songs.querySelector("#add-many").setAttribute("data-video-length", secs); @@ -242,6 +250,9 @@ var Search = { document.getElementById("results_soundcloud").innerHTML = ""; //console.log(output); if(output.length > 0) { + if(document.querySelector("#results").innerHTML.length > 0) { + Helper.css(".search_results", "display", "block"); + } //$(window).scrollTop(0); /*if(!pagination && fresh) { //Helper.css(".search_results", "display", "none"); @@ -618,6 +629,7 @@ addVideos: function(ids){ }, submit: function(id,title,duration, playlist, num, full_num, start, end, source, thumbnail){ + console.log(id,title,duration, playlist, num, full_num, start, end, source, thumbnail); if((client || Helper.mobilecheck()) && !socket_connected) { add_ajax(id, title, duration, playlist, num, full_num, start, end, source, thumbnail); return; diff --git a/server/public/partials/channel/search.handlebars b/server/public/partials/channel/search.handlebars index adae34e8..2749a555 100644 --- a/server/public/partials/channel/search.handlebars +++ b/server/public/partials/channel/search.handlebars @@ -1,4 +1,4 @@ -
+