Fixed issues with embedded player

server/public/assets/css/embed.css

@@ -21,6 +21,20 @@
     width: 50vw;
 }
 
+.soundcloud_info_container {
+    position: absolute;
+    bottom: 20px;
+    right: 0px;
+    padding-left: 20px;
+    display: flex;
+    align-items: center;
+    background: rgba(0,0,0,.7);
+}
+
+.soundcloud_info_container a {
+    margin: 0 10px;
+}
+
 .card {
 	cursor:pointer;
   background-color: rgba(255, 255, 255, 0.04) !important;

server/public/assets/js/channel.js

@@ -169,7 +169,7 @@ var Channel = {
                 Playercontrols.initSlider();
                 if(player_ready) {
                     Player.player.setVolume(Crypt.get_volume());
-                    SC.Widget(Player.soundcloud_player).setVolume(Crypt.get_volume());
+                    Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100);
                 }
                 Helper.removeClass(".video-container", "no-opacity");
                 var codeURL = "https://remote."+window.location.hostname+"/"+id;

server/public/assets/js/embed.js

@@ -8,6 +8,9 @@ var startTime = 0;
 var socket_connected = false;
 var dynamicListeners = {};
 var player_ready = false;
+var empty_clear = false;
+var fix_too_far = false;
+var beginning = false;
 var soundcloud_loading = false;
 var firstLoad = "";
 var list_html = document.getElementById("list-song-html").innerHTML;

server/public/assets/js/functions.js

@@ -84,7 +84,7 @@ function hide_native(way) {
             Helper.setHtml("#chromecast_text", "Playing on<br>" + castSession.La.friendlyName);
         }
         Player.player.setVolume(100);
-        SC.Widget(Player.soundcloud_player).setVolume(100);
+        Player.soundcloud_player.setVolume(1);
 
         Helper.toggleClass("#player_overlay_text", "hide");
     } else if(way == 0){
@@ -109,7 +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());
+            Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100);
         }
         Helper.addClass("#player_overlay", "hide");
         Helper.toggleClass("#player_overlay_text", "hide");

server/public/assets/js/hostcontroller.js

@@ -38,7 +38,7 @@ var Hostcontroller = {
             if(arr.type == "volume") {
                 Playercontrols.visualVolume(arr.value);
                 Player.setVolume(arr.value);
-                SC.Widget(Player.soundcloud_player).setVolume(arr.value);
+                Player.soundcloud_player.setVolume(arr.value / 100);
                 localStorage.setItem("volume", arr.value);
                 Playercontrols.choose_button(arr.value, false);
             } else if(arr.type == "channel") {

server/public/assets/js/listeners.js

@@ -199,21 +199,8 @@ window.addEventListener("DOMContentLoaded", function() {
         tag.onload = function() {
             console.log("loaded script")
             if(document.querySelectorAll("script[src='https://w.soundcloud.com/player/api.js']").length == 1) {
-                SC.Widget(Player.soundcloud_player);
+                
             } else {
-                tagS            = document.createElement('script');
-                tagS.src        = "https://w.soundcloud.com/player/api.js";
-                firstScriptTag = document.getElementsByTagName('script')[0];
-                firstScriptTag.parentNode.insertBefore(tagS, firstScriptTag);
-                tagS.setAttribute("async", true);
-
-
-                tagS.onload = function() {
-                    if(firstLoad == "") {
-                        firstLoad = "widget";
-                        SC = SC;
-                    }
-
                 tagSearch            = document.createElement('script');
                 tagSearch.setAttribute("async", true);
                 tagSearch.src        = "https://connect.soundcloud.com/sdk/sdk-3.3.0.js";
@@ -221,24 +208,15 @@ window.addEventListener("DOMContentLoaded", function() {
                 firstScriptTag.parentNode.insertBefore(tagSearch, firstScriptTag);
 
                 tagSearch.onload = function() {
-                        if(firstLoad == "") {
-                            firstLoad = "search";
-                            _SC2 = SC;
-                        } else {
-                            _SC2 = SC;
-                            SC = SC;
-                            SC = _SC2;
-                        }
-                        console.log("loaded1")
-                        window.SC = SC;
                     SC.initialize({
                       client_id: 'ed53fc01f248f15becddf8eb52cc91ef'
+                  }, function() {
+                      console.log("Loaded streamer");
                   });
                 }
             }
         }
     }
-    }
 
     if(Helper.mobilecheck()) {
         socket.on("guid", function(msg) {

server/public/assets/js/player.js

@@ -7,7 +7,9 @@ var Player = {
     stopInterval: false,
     fireplace: "",
     np: {},
-    soundcloud_player: undefined,
+    soundcloud_player: {
+        setVolume: function(val) {}
+    },
 
     youtube_listener: function(obj) {
         if(obj.np != undefined) {
@@ -64,7 +66,7 @@ var Player = {
         // Play video/autoplay video
         if(obj.np != undefined) {
             Player.getTitle(song_title, viewers);
-            if(((embed && autplay) || !embed ) && !offline && !was_stopped) {
+            if(((embed && autoplay) || !embed ) && !offline && !was_stopped) {
                 console.log("loadVideoById \nwas_stopped=",was_stopped,"\noffline=",offline)
                 Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
             } else {
@@ -253,7 +255,7 @@ var Player = {
         Player.stopVideo();
         if(_autoplay) was_stopped = false;
         Helper.removeClass(document.getElementById("player_overlay"), "hide");
-        document.getElementById("player_overlay_text").innerText = "Loading SoundCloud";
+        //document.getElementById("player_overlay_text").innerText = "Loading SoundCloud";
         Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d");
 
         //if(Player.soundcloud_player) {
@@ -263,11 +265,11 @@ var Player = {
             /*SC.Widget(Player.soundcloud_player).seekTo((seekTo) * 1000);
             SC.Widget(Player.soundcloud_player).setVolume(embed ? 100 : Crypt.get_volume());*/
             soundcloud_loading = false;
-            if(_autoplay) {
+
                 /*SC.Widget(Player.soundcloud_player).isPaused(function(paused) {
                     if(paused) SC.Widget(Player.soundcloud_player).play();
                 });*/
-            }
+
             //Player.soundcloud_player.listenTo("/tracks/" + id);
             /*SC.Widget(Player.soundcloud_player).getCurrentSound(function(sound) {
                 Helper.removeClass(".soundcloud_info_container", "hide");
@@ -301,8 +303,6 @@ var Player = {
                 Player.soundcloud_player.bind("pause", Player.soundcloudPause);
                 Player.soundcloud_player.bind("play", Player.soundcloudPlay);
                 window.player = player;
-                player.play().then(function(){
-                    console.log(id);
                 SC.get('/tracks', {
                     ids: id
                 }).then(function(tracks) {
@@ -312,12 +312,16 @@ var Player = {
                     document.querySelector(".soundcloud_info_container .green").href = sound.purchase_url;
                     document.querySelector(".soundcloud_info_container .red").href = sound.user.permalink_url;
                 });
+                if(_autoplay) {
+                    player.play().then(function(){
+                        console.log(id);
                         Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100);
                         Player.soundcloud_player.seek((seekTo) * 1000);
                         console.log('Playback started!');
                     }).catch(function(e){
                         console.error('Playback rejected. Try calling play() from a user interaction.', e);
                     });
+                }
               });
             soundcloud_loading = true;
             /*SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.FINISH, Player.soundcloudFinish);
@@ -972,12 +976,6 @@ var Player = {
                     //SC.Widget(Player.soundcloud_player);
                     //SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.READY, Player.soundcloudReady);
                 } else {
-                    tagS            = document.createElement('script');
-                    tagS.src        = "https://w.soundcloud.com/player/api.js";
-                    firstScriptTag = document.getElementsByTagName('script')[0];
-                    firstScriptTag.parentNode.insertBefore(tagS, firstScriptTag);
-                    tagS.setAttribute("async", true);
-
 
                     tagSearch            = document.createElement('script');
                     tagSearch.setAttribute("async", true);

server/public/assets/js/playercontrols.js

@@ -193,13 +193,11 @@ var Playercontrols = {
         console.log("play pause here");
         if(!chromecastAvailable){
             if(videoSource == "soundcloud") {
-                SC.Widget(Player.soundcloud_player).isPaused(function(paused) {
+                if(!Player.soundcloud_player.isPlaying()) {
-                    if(paused) {
                     Player.playVideo();
                 } else {
                     Player.pauseVideo();
                 }
-                });
             } else {
                 if(Player.player.getPlayerState() == YT.PlayerState.PLAYING)
                 {
@@ -278,7 +276,7 @@ var Playercontrols = {
 
     setVolume: function(vol) {
         Player.setVolume(vol);
-        SC.Widget(Player.soundcloud_player).setVolume(vol);
+        Player.soundcloud_player.setVolume(vol / 1000);
         Playercontrols.choose_button(vol, false);
         if(Player.player.isMuted())
         Player.player.unMute();
@@ -362,18 +360,15 @@ var Playercontrols = {
         console.log("playpause", videoSource);
         if(videoSource == "soundcloud") {
             console.log("hello");
-            SC.Widget(Player.soundcloud_player).isPaused(function(paused) {
+            if(!Player.soundcloud_player.isPlaying()) {
-                console.log(paused);
-                if(paused) {
                 Helper.addClass("#play", "hide");
                 Helper.removeClass("#pause", "hide");
-                    SC.Widget(Player.soundcloud_player).play();
+                Player.soundcloud_player.play();
             } else {
                 Helper.removeClass("#play", "hide");
                 Helper.addClass("#pause", "hide");
-                    SC.Widget(Player.soundcloud_player).pause();
+                Player.soundcloud_player.pause();
             }
-            })
         } else {
             state = Player.player.getPlayerState();
             button = document.getElementById("playpause");

server/public/layouts/client/embed.handlebars

@@ -11,11 +11,18 @@
     <div id="player-container">
         <div id="player"></div>
         <div id="player_overlay" class="hide valign-wrapper">
+            <div class="soundcloud_info_container hide">
+                <a href="#!" id="soundcloud_listen_link" target="_blank">
+                    <img src="https://developers.soundcloud.com/assets/powered_by_large_white-9c2af6a93ad2b1c541f423d9e9045980.png" />
+                </a>
+                <a href="#!" class="btn green waves-effect waves-light" target="_blank">Buy</a>
+                <a href="#!" class="btn red waves-effect waves-light" target="_blank">Artist</a>
+            </div>
+                <div id="player_loader_container" class="hide valign-wrapper">
+                <div id="player_loader" class="preloader-wrapper large active valign">
+                    {{> spinner}}
+                </div>
             </div>
-        <div id="soundcloud_container">
-            <iframe width="100%" id="soundcloud_player" height="166" scrolling="no" frameborder="no" style="top: 0px; left:0px; visibility: hidden;z-index: -999;position: absolute;pointer-events: none;"
-              src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/undefined&amp;{ auto_play: false, buying:false, sharing:false, download:false, show_user:false, }">
-            </iframe>
         </div>
         <div id="zoffbutton" title="Visit the channel!"></div>
         <div id="controls" class="noselect">