Start-end event updated

- Visual fixes - Set start-time and end-time for soundcloud player working
2025-10-29 18:00:23 +00:00 · 2018-05-03 15:32:42 +02:00
parent 2e404e6a61
commit 7d9873efd8
7 changed files with 72 additions and 37 deletions
--- 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{
--- 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;
--- 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"});
        }
    }
--- 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,11 +1004,20 @@ var Player = {
            firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

+
+
+            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);
                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);
-            console.log("hello");

                tagSearch.onload = function() {
                    if(firstLoad == "") {
@@ -1009,14 +1034,6 @@ var Player = {
                      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);
            }
        }
    }
--- 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())
--- 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");
                        //$("<div style='display:none;' id='inner-results' class='empty-inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
                        document.getElementById("results").insertAdjacentHTML("beforeend", "<div style='display:block;' id='inner-results' style='height:calc(100vh - 64px);' class='empty-inner-results'>"+empty_results_html+"</div>");
                        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");
+                                    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 = {
                                    //$("<div style='display:none;' id='inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
                                    document.getElementById("results").insertAdjacentHTML("beforeend", "<div style='display:block;' id='inner-results' style='height:calc(100vh - 64px);'>"+empty_results_html+"</div>");
                                    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;
--- a/server/public/partials/channel/search.handlebars
+++ b/server/public/partials/channel/search.handlebars
@@ -1,4 +1,4 @@
-<div class="row search_results hide">
+<div class="row search_results" style="display:none;">
    <div class="col s12">
      <ul class="results-tabs">
        <li class="tab col s6"><a class="active" href="#results">YouTube</a></li>