Prettifyied embedded player somewhat

server/public/assets/css/embed.css

@@ -73,7 +73,7 @@
   height: calc(100% - 32px);
   top: 0px;
   left: 0px;
-  width: 50vw;
+  width: 60vw;
 }
 
 .soundcloud_info_container {
@@ -119,7 +119,7 @@
 }
 
 #player{
-  width:50vw;
+  width:60vw;
   height: calc(100vh - 32px);
 }
 
@@ -257,22 +257,21 @@
 }
 
 #playlist{
-  /*background-color:grey;*/
+  height: 100vh;
-  height:100vh;
+  width: 40vw;
-  width:50vw;
+  overflow: hidden;
-  overflow:hidden;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
 }
 
 #zoffbutton{
-  cursor:pointer;
+  cursor: pointer;
-  position: absolute;
+  background-image: url(/assets/images/z.svg);
-  bottom: 35px;
+  width: 90px;
-  left: 10px;
-  background-image: url('/assets/images/z.svg');
-  width: 50px;
   height: 50px;
-  background-position: center;
+  background-position: 50%;
-  background-size: 135%;
+  background-size: 85%;
   background-repeat: no-repeat;
 }
 
@@ -289,7 +288,7 @@
   position: relative;
   opacity:0;
   height:32px;
-  width:50vw;
+  width:60vw;
   color:white;
   margin-top:-5px;
 }
@@ -343,7 +342,22 @@
   font-family:"Roboto", sans-serif;
   font-weight:300;
   margin-left:15px;
-  margin-right:5px;
+  margin-right:10px;
+}
+
+.channel-info-container {
+  align-items: center;
+  display: flex;
+  position: absolute;
+  bottom: 50px;
+  left: 0px;
+  background: rgba(0,0,0,.5);
+  padding-left: 5px;
+  padding-right: 25px;
+}
+
+.channel-title {
+  margin-left: -20px;
 }
 
 #viewers{

server/public/assets/js/embed.js

@@ -52,7 +52,7 @@ var seekTo;
 var socket;
 var video_id;
 var hash = window.location.hash.substring(1).split("&");
-var chan = hash[0];
+var chan = Helper.decodeChannelName(hash[0]);
 var autoplay = false;
 var color = "#808080";
 var dragging = false;
@@ -95,6 +95,7 @@ function receiveMessage(event) {
 
 window.addEventListener("message", receiveMessage, false);
 window.addEventListener("DOMContentLoaded", function() {
+
 });
 window.addEventListener("load", function() {
     if(hash.length >= 2 && hash.indexOf("autoplay") > 0){
@@ -128,6 +129,10 @@ window.addEventListener("load", function() {
         M.Modal.getInstance(document.getElementById("locked_channel")).open();
     });
 
+    document.querySelector(".channel-info-container").href = "https://zoff.me/" + chan.toLowerCase();
+    console.log("https://zoff.me/" + chan.toLowerCase());
+    document.querySelector(".channel-title").innerText = "/" + chan.toLowerCase();
+
     socket.on("get_list", function() {
         setTimeout(function(){socket.emit('list', {version: VERSION, channel: chan.toLowerCase(), pass: ''});},1000);
     });
@@ -426,7 +431,8 @@ document.addEventListener("click", function(e) {
     handleEvent(e, e.target, false, "click");
 }, false);
 
-addListener("click", "#zoffbutton", function(e) {
+addListener("click", ".channel-info-container", function(e) {
+    this.preventDefault();
     Player.pauseVideo();
     window.open("https://zoff.me/" + chan.toLowerCase() + "/", '_blank');
 });

server/public/assets/js/player.js

@@ -454,7 +454,6 @@ 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 {
-            console.log(videoSource);
             if(!durationBegun) {
                 durationBegun = true;
                 Player.durationSetter();

server/public/layouts/client/embed.handlebars

@@ -23,7 +23,10 @@
                 </div>
             </div>
         </div>
-        <div id="zoffbutton" title="Visit the channel!"></div>
+        <a href="https://zoff.me" class="channel-info-container" title="Visit the channel!">
+            <div id="zoffbutton"></div>
+            <div class="channel-title white-text"></div>
+        </a>
         <div id="controls" class="noselect">
             <div class="playbar-btn prev playbar hide">
                 <i class="material-icons">skip_previous</i>