Added a host-mode

- Fullscreen video + playlist
- Removed fullscreenbutton in host-mode
- Removed skip-button in host-mode
- Disabled skipping in host-mode
- Removed buttons and rightclick menus in host-mode
- Host mode for easily having a computer playing at a party without being able to modifying the currently playing video/song

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;*/

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;

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() {

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);

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");
 });

server/public/partials/channel/panel.handlebars

@@ -229,6 +229,30 @@
             </ul>
         </div>
     </li>
+    <li class="no-padding host-mode-panel hide-on-small-only">
+        <div class="collapsible-header bold waves-effect">Host Mode
+            <i class="material-icons">hearing</i>
+        </div>
+        <div class="collapsible-body">
+            <ul>
+                <li>
+                    <span class="switch-text">
+                        Host Mode
+                    </span>
+                    <div class="switch">
+                        <label>
+                            Disabled
+                            <input name="host_switch" type="checkbox" class="host_switch_class" /><span class="lever"></span>
+                            Enabled
+                        </label>
+                    </div>
+                    <div id="host-info">
+                        By enabling host mode, the channel will go inn fullscreen, this computer can not click any of the vote buttons/remove songs, and the skip-button will be removed. The only things displayed will be the video and the playlist.
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </li>
 
     <li class="no-padding show-only-mobile mobile-remote-panel">
         <div class="collapsible-header bold waves-effect import-a">Remote Controller

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": { }