diff --git a/server/public/assets/css/embed.css b/server/public/assets/css/embed.css index 2b59d0b7..7a55ce3a0 100755 --- a/server/public/assets/css/embed.css +++ b/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; - width:50vw; - overflow:hidden; + height: 100vh; + width: 40vw; + overflow: hidden; + padding-left: 10px; + padding-right: 10px; + padding-top: 5px; } #zoffbutton{ - cursor:pointer; - position: absolute; - bottom: 35px; - left: 10px; - background-image: url('/assets/images/z.svg'); - width: 50px; + cursor: pointer; + background-image: url(/assets/images/z.svg); + width: 90px; height: 50px; - background-position: center; - background-size: 135%; + background-position: 50%; + 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{ diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js index 265940fc..a5d4685c 100755 --- a/server/public/assets/js/embed.js +++ b/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'); }); diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index 9d5aaa8d..e17db5ef 100755 --- a/server/public/assets/js/player.js +++ b/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(); diff --git a/server/public/layouts/client/embed.handlebars b/server/public/layouts/client/embed.handlebars index 16519e2f..f82c5ecd 100644 --- a/server/public/layouts/client/embed.handlebars +++ b/server/public/layouts/client/embed.handlebars @@ -23,7 +23,10 @@ -
+ + + +