Embedded version

- Embedded version now working with soundcloud-player

server/public/assets/css/embed.css

@@ -13,6 +13,14 @@
   transition: all .3s !important;
 }
 
+#player_overlay {
+    position: absolute;
+    height: calc(100% - 32px);
+    top: 0px;
+    left: 0px;
+    width: 50vw;
+}
+
 .card {
 	cursor:pointer;
   background-color: rgba(255, 255, 255, 0.04) !important;

server/public/assets/js/embed.js

@@ -8,6 +8,7 @@ var startTime = 0;
 var socket_connected = false;
 var dynamicListeners = {};
 var player_ready = false;
+var firstLoad = "";
 var list_html = document.getElementById("list-song-html").innerHTML;
 var w_p		= true;
 var lazy_load	= false;
@@ -85,6 +86,7 @@ window.addEventListener("DOMContentLoaded", function() {
     });
     color = "#" + hash[1];
     add = "https://zoff.me";
+    if(window.location.hostname == "localhost") add = "localhost";
     //add = "localhost";
     socket = io.connect(''+add+':8080', connection_options);
 
@@ -299,6 +301,10 @@ addListener("click", ".prev_page", function(e) {
     List.dynamicContentPage(-1);
 });
 
+addListener("click", "#player_overlay", function(event) {
+    if(videoSource == "soundcloud") Playercontrols.play_pause();
+});
+
 addListener("click", ".next_page", function(e) {
     event.preventDefault();
     List.dynamicContentPage(1);

server/public/assets/js/player.js

@@ -251,7 +251,7 @@ var Player = {
             empty_clear = false;
         }
         try {
-            document.getElementById("play").focus();
+            //document.getElementById("play").focus();
             console.log("focused");
             if(videoSource == "soundcloud") {
                 Player.player.stopVideo();
@@ -453,7 +453,7 @@ var Player = {
                     show_user:false,
                     callback: function() {
                         Player.stopVideo();
-                        SC.Widget(Player.soundcloud_player).setVolume(Crypt.get_volume());
+                        SC.Widget(Player.soundcloud_player).setVolume(embed ? 100 : Crypt.get_volume());
                         console.log(start, seekTo);
                         if(start == undefined) start = 0;
                         if(seekTo == undefined) seekTo = 0;
@@ -498,7 +498,7 @@ var Player = {
                 download:false,
                 show_user:false,
                 callback: function() {
-                    SC.Widget(Player.soundcloud_player).setVolume(Crypt.get_volume());
+                    SC.Widget(Player.soundcloud_player).setVolume(embed ? 100 : Crypt.get_volume());
                     console.log(start, seekTo);
                     if(start == undefined) start = 0;
                     if(seekTo == undefined) seekTo = 0;
@@ -946,7 +946,7 @@ var Player = {
                     document.getElementById("bar").style.width = per+"%";
                 }
                 if(videoSource == "soundcloud") {
-                    
+
                     SC.Widget(Player.soundcloud_player).isPaused(function(paused) {
                         if(currDurr > Player.np.end && !paused) {
                             end_programmatically = true;

server/public/layouts/client/embed.handlebars

@@ -10,6 +10,11 @@
 <div id="container" style="display:inline-flex;">
     <div id="player-container">
         <div id="player"></div>
+        <div id="player_overlay" class="hide valign-wrapper">
+        </div>
+        <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 id="zoffbutton" title="Visit the channel!"></div>
         <div id="controls" class="noselect">
             <div id="playpause">