From 8376148195985183cbd3def78ab6feb1119c0a5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Wed, 24 Oct 2018 12:40:47 +0200 Subject: [PATCH] better embed player on small screens --- server/public/assets/css/embed.css | 54 ++++++++++++++++++- server/public/assets/js/embed.js | 20 +++++-- server/public/assets/js/list.js | 1 + server/public/assets/js/player.js | 4 +- server/public/assets/js/playercontrols.js | 4 +- server/public/layouts/client/embed.handlebars | 2 +- 6 files changed, 77 insertions(+), 8 deletions(-) diff --git a/server/public/assets/css/embed.css b/server/public/assets/css/embed.css index 3c3fbdf7..5213a3df 100755 --- a/server/public/assets/css/embed.css +++ b/server/public/assets/css/embed.css @@ -69,11 +69,12 @@ } #player_overlay { - position: absolute; + position: relative; height: calc(100% - 32px); top: 0px; left: 0px; width: 60vw; + margin-bottom: 5px; } .soundcloud_info_container { @@ -615,6 +616,16 @@ body { padding: 0 5px; } +#song-title { + position: absolute; + z-index: 9; + color: white; + background: rgba(0,0,0,.5); + font-size: 1.5rem; + padding: 10px; + width: 60vw; +} + /* .last_page, .last_page_hide, .first_page, .first_page_hide{ display: none !important; @@ -630,3 +641,44 @@ display: none !important; bottom: 90px; } } + +@media only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px) and (orientation: landscape){ + #player-container{ + /*display: none;*/ + position: absolute; + width: 100vw; + height: 200px; + bottom: 0px; + } + #controls { + width: 100vw; + margin-top: 0px; + } + + #player { + width: 100vw; + height: 170px; + display: block; + } + + #player_overlay { + position: relative; + width: 100vw; + margin-bottom: 0px; + } + + #playlist { + width: 100vw; + height: calc(100vh - 208px); + } + + #toast-container { + min-width: 96%; + bottom: auto; + } + + #song-title { + width: 100vw; + bottom: 149px; + } +} diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js index eb4a7f20..7d150890 100755 --- a/server/public/assets/js/embed.js +++ b/server/public/assets/js/embed.js @@ -13,6 +13,10 @@ try { } var SC_widget; var scUsingWidget = false; +var zoff_api_token = "DwpnKVkaMH2HdcpJT2YPy783SY33byF5/32rbs0+xdU="; +if(window.location.hostname == "localhost" || window.location.hostname == "client.localhost") { + var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ="; +} var SC_player; var durationTimeout; var sc_need_initialization = true; @@ -101,6 +105,11 @@ window.addEventListener("DOMContentLoaded", function() { }); +var Channel = { + set_title_width: function(){}, + window_width_volume_slider: function(){} +} + function getSearch(elem) { var result = {}; var search = window.location.search.split("&"); @@ -148,6 +157,7 @@ window.addEventListener("load", function() { document.querySelector(".channel-title").innerText = "/" + chan.toLowerCase(); socket.on("get_list", function() { + socket_connected = true; setTimeout(function(){socket.emit('list', {version: VERSION, channel: chan.toLowerCase(), pass: ''});},1000); }); @@ -191,6 +201,10 @@ window.addEventListener("load", function() { } }); +window.addEventListener("resize", function(){ + resizeFunction(); +}); + function resizePlaylistPlaying(){}; function startWaitTimerPlay() { @@ -362,7 +376,6 @@ function change_offline(enabled, already_offline){ Helper.removeClass(".margin-playbar", "margin-playbar"); Helper.addClass(".prev playbar", "margin-playbar"); Helper.removeClass(".prev playbar", "hide"); - Helper.removeClass(".skip playbar", "hide"); Helper.removeClass("#offline-mode", "waves-cyan"); Helper.addClass("#offline-mode", "cyan"); Helper.removeClass(".delete-context-menu", "context-menu-disabled"); @@ -402,7 +415,7 @@ function change_offline(enabled, already_offline){ Helper.addClass("#playpause", "margin-playbar"); Helper.removeClass("#viewers", "hide"); Helper.addClass(".prev playbar", "hide"); - Helper.addClass(".skip playbar", "hide"); + //Helper.addClass(".skip playbar", "hide"); Helper.addClass("#offline-mode", "waves-cyan"); Helper.removeClass("#offline-mode", "cyan"); if(!Helper.mobilecheck()) { @@ -454,6 +467,7 @@ addListener("click", ".channel-info-container", function(e) { addListener("click", ".vote-container", function(e) { var that = e; var id = that.getAttribute("data-video-id"); + List.vote(id, "pos"); }); @@ -479,7 +493,7 @@ addListener("click", ".prev", function(event){ addListener("click", ".skip", function(event){ this.preventDefault(); - if(!offline) return; + //if(!offline) return; List.skip(true); }); diff --git a/server/public/assets/js/list.js b/server/public/assets/js/list.js index 0c6fe0db..de89be36 100755 --- a/server/public/assets/js/list.js +++ b/server/public/assets/js/list.js @@ -569,6 +569,7 @@ var List = { "client " + client, "socket_connected " + socket_connected ]); + if((client || Helper.mobilecheck()) && !socket_connected) { if(vote != "del") { vote_ajax(id); diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index 944cc2f0..51af2fce 100755 --- a/server/public/assets/js/player.js +++ b/server/public/assets/js/player.js @@ -143,6 +143,7 @@ var Player = { } break; case YT.PlayerState.PLAYING: + if(embed) Helper.css("#song-title", "display", "none"); if(videoSource == "soundcloud") { Player.player.stopVideo(); //was_stopped = false; @@ -217,7 +218,7 @@ var Player = { if(window.location.pathname != "/") Playercontrols.play_pause_show(); mobile_beginning = true; if(!embed && !client && window.location.pathname != "/") { - if(Helper.mobilecheck()) { + if(Helper.mobilecheck() && !embed) { Helper.css("#player", "display", "none"); Helper.toggleClass(".video-container", "click-through"); Helper.toggleClass(".page-footer", "padding-bottom-extra"); @@ -775,6 +776,7 @@ var Player = { Helper.addClass("#player_loader_container", "hide"); Helper.css("#player_overlay", "display", "block"); Helper.addClass("#player", "hide"); + if(embed) Helper.css("#song-title", "display", "block"); if(videoSource == "youtube") { Player.soundcloud_player.pause(); } else if(soundcloud_loading){ diff --git a/server/public/assets/js/playercontrols.js b/server/public/assets/js/playercontrols.js index 229ae500..764f5015 100755 --- a/server/public/assets/js/playercontrols.js +++ b/server/public/assets/js/playercontrols.js @@ -28,7 +28,7 @@ var Playercontrols = { document.getElementById("volume").innerHTML = ""; } }catch(e){} - if(Helper.mobilecheck() || slider_type == "vertical") { + if((Helper.mobilecheck() || slider_type == "vertical") && !embed) { //slider_values.orientation = "vertical"; if(!document.querySelector(".volume-container").classList.contains("hide")) { Helper.toggleClass(".volume-container", "hide"); @@ -212,7 +212,7 @@ var Playercontrols = { if(Player.player.getPlayerState() == YT.PlayerState.PLAYING) { Player.pauseVideo(); - if(Helper.mobilecheck() && !window.MSStream){ + if(Helper.mobilecheck() && !window.MSStream && !embed){ //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ //document.getElementById("player").style.display = "none"; Helper.css("#player", "display", "none"); diff --git a/server/public/layouts/client/embed.handlebars b/server/public/layouts/client/embed.handlebars index f82c5ecd..9c6d636f 100644 --- a/server/public/layouts/client/embed.handlebars +++ b/server/public/layouts/client/embed.handlebars @@ -35,7 +35,7 @@ play_arrow pause -