diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index bc84b115..9d8d55cd 100755 --- a/server/public/assets/css/style.css +++ b/server/public/assets/css/style.css @@ -1781,7 +1781,7 @@ nav .zbrand.channel-logo-container { flex:1; z-index: 9; position: relative; - height: calc(100vh - 64px) !important; + height: calc(100vh - 64px); min-width: 338px; /*background-color:rgba(0,0,0,0.2);*/ } @@ -2185,6 +2185,10 @@ nav ul li:hover, nav ul li.active { height: calc(100vh - 48px - 64px) !important; } +.host-mode-wrapper { + height: calc(100vh - 48px + 15px) !important; +} + /** settings **/ @@ -2687,13 +2691,21 @@ nav ul li:hover, nav ul li.active { background-color:rgba(0, 0, 0, 0.3); } -#offline-info{ +#offline-info, #host-info{ color: black; line-height: 20px; margin: 0 24px; padding-bottom: 15px; } +.host-mode-height { + height: 100vh !important; +} + +.host-mode-width { + width: 100vw !important; +} + #seekToDuration{ position: absolute; background: #2d2d2d; @@ -3577,7 +3589,7 @@ nav ul li:hover, nav ul li.active { #playlist{ /*padding:0px 15px;*/ height: 90%; - height: calc(100% - 64px); + height: calc(100vh - 64px); overflow: hidden; padding-right: 0px; /*padding:0px 0px 0px 0px;*/ diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js index 32e1b279..e51eb869 100644 --- a/server/public/assets/js/channel.js +++ b/server/public/assets/js/channel.js @@ -435,6 +435,9 @@ var Channel = { add_context_menu: function() { addListener("contextmenu", ".vote-container", function(e) { + if(hostMode) { + return; + } this.preventDefault(); this.preventDefault(); var that = this; diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js index 24dcb35a..3ddf847f 100644 --- a/server/public/assets/js/functions.js +++ b/server/public/assets/js/functions.js @@ -446,6 +446,69 @@ function setup_now_playing_listener(){ socket.on("np", Player.now_playing_listener); } +function exitHandler(event) { + if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) { + if(!document.getElementById("main-row").classList.contains("fullscreened")) { + Helper.addClass("#main-row", "fullscreened"); + } else { + Helper.removeClass("#main-row", "fullscreened"); + document.querySelector(".host_switch_class").checked = false + enable_host_mode(false); + } + } +} + +function enable_host_mode(enabled) { + if(!hostMode) { + var playerElement = document.querySelector("main"); + var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen; + if (requestFullScreen) { + requestFullScreen.bind(playerElement)(); + M.Tabs.getInstance(document.querySelector('.playlist-tabs-loggedIn')).select("wrapper"); + Helper.addClass("#main-row", "host-mode-height"); + Helper.addClass("#main-row", "host-mode-width"); + Helper.addClass("main", "host-mode-height"); + Helper.addClass("main", "host-mode-width"); + Helper.addClass("#video-container", "host-mode-height"); + Helper.addClass("#playlist", "host-mode-height"); + Helper.css(".playlist-tabs-loggedIn", "display", "none"); + Helper.removeClass("#wrapper", "tabs_height"); + Helper.addClass("#wrapper", "host-mode-wrapper"); + Helper.css(".skip", "display", "none"); + var removeElements = document.querySelectorAll(".list-remove"); + for(var i = 0; i < removeElements.length; i++) { + removeElements[i].style.display = "none"; + } + Helper.css("#fullscreen", "display", "none"); + Helper.css("#playlist", "backgroundColor", "inherit"); + Helper.css("#main-row", "backgroundColor", "inherit"); + Helper.css(".main", "backgroundColor", "inherit"); + hostMode = enabled; + document.addEventListener('webkitfullscreenchange', exitHandler, false); + document.addEventListener('mozfullscreenchange', exitHandler, false); + document.addEventListener('fullscreenchange', exitHandler, false); + document.addEventListener('MSFullscreenChange', exitHandler, false); + } + } else { + Helper.removeClass("#main-row", "host-mode-height"); + Helper.removeClass("#main-row", "host-mode-width"); + Helper.removeClass(".main", "host-mode-height"); + Helper.removeClass(".main", "host-mode-width"); + Helper.removeClass("#video-container", "host-mode-height"); + Helper.removeClass("#playlist", "host-mode-height"); + Helper.css(".playlist-tabs-loggedIn", "display", "flex"); + Helper.addClass("#wrapper", "tabs_height"); + Helper.removeClass("#wrapper", "host-mode-wrapper"); + Helper.css(".skip", "display", "block"); + var removeElements = document.querySelectorAll(".list-remove"); + for(var i = 0; i < removeElements.length; i++) { + removeElements[i].style.display = "block"; + } + Helper.css("#fullscreen", "display", "block"); + hostMode = false; + } +} + function get_list_listener(){ socket.on("get_list", function(){ var add = ""; @@ -707,7 +770,7 @@ function removeListener(type, element) { delete dynamicListeners[type][element]; } -function toast(msg) { +function toast(msg, _class) { switch(msg) { case "other_list_pass": msg = "The other list has a pass, can't import the songs.."; @@ -865,7 +928,8 @@ function toast(msg) { break; } before_toast(); - M.toast({ html: msg, displayLength: 4000}); + var classes = _class == undefined ? "" : _class; + M.toast({ html: msg, displayLength: 4000, classes: classes}); } function emit() { diff --git a/server/public/assets/js/list.js b/server/public/assets/js/list.js index e305486d..a27a1000 100755 --- a/server/public/assets/js/list.js +++ b/server/public/assets/js/list.js @@ -1128,6 +1128,9 @@ var List = { if(!embed) { song.querySelector(".mobile-delete").remove(); } + if(hostMode) { + song.querySelector(".list-remove").style.display = "none"; + } song.querySelector(".list-title").innerText = video_title; song.querySelector(".list-title").setAttribute("title", video_title); song.querySelector(attr).setAttribute("data-video-id", video_id); diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 738e1f39..cc0389b0 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -9,6 +9,7 @@ var videoSource; var dynamicListeners = {}; var socket_connected = false; var hasadmin = 0; +var hostMode = false; var soundcloud_loading = false; var buffering = false; var list_html = document.querySelectorAll("#list-song-html").length > 0 ? document.querySelector("#list-song-html").innerHTML : undefined; @@ -966,6 +967,12 @@ addListener("change", '.offline_switch_class', function() change_offline(offline, !offline); }); +addListener("change", '.host_switch_class', function() +{ + var host = document.getElementsByName("host_switch")[0].checked; + enable_host_mode(host); +}); + addListener("change", '.conf', function(e) { this.preventDefault(); @@ -1443,6 +1450,11 @@ addListener("click", "#add-many", function(e){ }); addListener("click", ".vote-container", function(e, target){ + if(hostMode) { + toast("Can't vote while in host mode!", "red lighten"); + document.querySelector("#toast-container").setAttribute("style", "z-index: 99999999999 !important"); + return; + } var id = e.getAttribute("data-video-id"); List.vote(id, "pos"); }); diff --git a/server/public/partials/channel/panel.handlebars b/server/public/partials/channel/panel.handlebars index 8181e9aa..7ad1afb3 100755 --- a/server/public/partials/channel/panel.handlebars +++ b/server/public/partials/channel/panel.handlebars @@ -229,6 +229,30 @@ +
  • +
    Host Mode + hearing +
    +
    + +
    +
  • Remote Controller diff --git a/server/routing/client/api.js b/server/routing/client/api.js index 8b712273..b58d3308 100644 --- a/server/routing/client/api.js +++ b/server/routing/client/api.js @@ -1136,7 +1136,6 @@ router.route('/api/list/:channel_name').post(function(req, res) { } ] } }; - var channel_name = req.params.channel_name; db.collection(channel_name).aggregate([ { "$match": { }