Modified rest, and added client-version

2025-10-29 18:00:23 +00:00 · 2018-03-12 17:06:47 +01:00
parent 79fa8805b2
commit c21eee838a
17 changed files with 329 additions and 153 deletions
--- a/server/REST.md
+++ b/server/REST.md
@@ -90,31 +90,9 @@ Returns 429 if you're doing too much of this request, with a Retry-After int val
 Returns 200 and the newly added configuration if successful
 ```

-Get channelsettings
-```
-GET /api/conf/:channel_name/
-
-Returns 403 for bad authentication (if you get this, try POST with userpassword attached)
-Returns 404 if the channel doesn't exist
-Returns 200 and the settings-object
-```
-
-Get channelsettings (protected)
-```
-POST /api/conf/:channel_name/
-    {
-        "userpass": USERPASS
-    }
-
-Returns 400 for bad request
-Returns 403 for bad authentication
-Returns 404 if the channel doesn't exist
-Returns 200 and the settings-object
-```
-
 Get song in channel
 ```
-GET /api/list/:channel_name/
+GET /api/list/:channel_name/:video_id

 Returns 403 for bad authentication (if you get this, the channel is protected, try getting the full channel with POST, and search through the object)
 Returns 404 if the song doesn't exist
@@ -124,10 +102,10 @@ Returns 200 and the song
 Get song in channel (protected)
 ```
 // Important fetch_song is present, or else the request will try to add a song to the channel
-POST /api/list/:channel_name/
+POST /api/list/:channel_name/:video_id
    {
        "fetch_song": ANYTHING_HERE,
-        "userpass": USERPASS
+        "userpass": SHA256(USERPASS)
    }

 Returns 400 for bad request
@@ -136,6 +114,29 @@ Returns 404 if the song doesn't exist
 Returns 200 and the song
 ```

+Get list
+```
+GET /api/list/:channel_name/
+
+Returns 403 for bad authentication (if you get this, the channel is protected, try getting the full channel with POST, and search through the object)
+Returns 404 if the song doesn't exist
+Returns 200 and the song
+```
+
+Get list (protected)
+```
+// Important fetch_song is present, or else the request will try to add a song to the channel
+POST /api/list/:channel_name/
+    {
+        "userpass": SHA256(USERPASS)
+    }
+
+Returns 400 for bad request
+Returns 403 for bad authentication
+Returns 404 if the list doesn't exist
+Returns 200 and the song
+```
+
 Get channelsettings
 ```
 GET /api/conf/:channel_name/
@@ -149,7 +150,7 @@ Get channelsettings (protected)
 ```
 POST /api/conf/:channel_name/
    {
-        "userpass": USERPASS
+        "userpass": SHA256(USERPASS)
    }

 Returns 400 for bad request
@@ -172,7 +173,7 @@ Get now playing song (protected)
 ```
 POST /api/list/:channel_name/__np__
    {
-        "userpass": USERPASS
+        "userpass": SHA256(USERPASS)
    }

 Returns 400 for bad request
--- a/server/handlers/search.js
+++ b/server/handlers/search.js
@@ -79,7 +79,9 @@ function check_error_video(msg, channel) {
                 got: msg.hasOwnProperty("title") ? typeof(msg.title) : undefined,
             },
         };
-         socket.emit("update_required", result);
+         if(socket) {
+             socket.emit("update_required", result);
+         }
        return;
    }

--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -2045,6 +2045,10 @@ nav ul li:hover, nav ul li.active {
    overflow:auto;
 }

+.client-wrapper {
+    height: calc(100vh - 48px - 64px) !important;
+}
+

 /** settings **/

@@ -2266,6 +2270,10 @@ nav ul li:hover, nav ul li.active {
    margin-left:10px;
 }

+.skip_next_client {
+    float: left;
+}
+
 #volume-button{
    padding-top: 3px;
    padding-left: 2px;
@@ -2795,6 +2803,18 @@ nav ul li:hover, nav ul li.active {
        overflow:initial;
    }

+    .client-wrapper {
+        height: calc(100vh - 48px - 64px - 36px) !important;
+    }
+
+    .client-results-height {
+        margin-top: 50px !important;
+    }
+
+    .client-pagination-height {
+        height: 80px;
+    }
+
    .brand-mobile{
        padding-left:0px !important;
    }
@@ -3019,6 +3039,10 @@ nav ul li:hover, nav ul li.active {
        width: 120px;
    }

+    .client-control-list {
+        width: auto;
+    }
+
    .page-footer{
        padding-top: 40px !important;
    }
@@ -3164,6 +3188,10 @@ nav ul li:hover, nav ul li.active {
        transition: margin .5s;
    }

+    #user_password {
+        width: 80% !important;
+    }
+
    .result-object-slid {
        /*-webkit-transform: translateX(calc(-100% + 45px)) !important;
        transform: translateX(calc(-100% + 45px)) !important;*/
--- a/server/public/assets/js/admin.js
+++ b/server/public/assets/js/admin.js
@@ -33,11 +33,15 @@ var Admin = {
        if($(".password_protected").prop("checked")) {
            $(".change_user_pass").removeClass("hide");
        }
-        if(!Helper.contains($(".playlist-tabs").attr("class").split(" "), "hide")) {
-            $(".playlist-tabs-loggedIn").removeClass("hide");
-            $(".playlist-tabs").addClass("hide");
+        if(!client) {
+            if(!Helper.contains($(".playlist-tabs").attr("class").split(" "), "hide")) {
+                $(".playlist-tabs-loggedIn").removeClass("hide");
+                $(".playlist-tabs").addClass("hide");
+            }
+            if($(".tabs").length > 0 && !changing_to_frontpage) {
+                $('ul.playlist-tabs-loggedIn').tabs('select_tab', $(".playlist-tabs li a.active").attr("href").substring(1));
+            }
        }
-
        if($("#admin-lock").html() != "lock_open"){
            $("#admin-lock").addClass("clickable");
            $("#admin-lock").html("lock_open");
@@ -49,9 +53,6 @@ var Admin = {
                });
            }
        }
-        if($(".tabs").length > 0 && !changing_to_frontpage) {
-            $('ul.playlist-tabs-loggedIn').tabs('select_tab', $(".playlist-tabs li a.active").attr("href").substring(1));
-        }
    },

    conf: function(msg) {
@@ -120,18 +121,19 @@ var Admin = {
        if(!$(".change_user_pass").hasClass("hide")) {
            $(".change_user_pass").addClass("hide");
        }
+        if(!client) {
+            if(!Helper.contains($(".playlist-tabs-loggedIn").attr("class").split(" "), "hide")) {
+                $(".playlist-tabs-loggedIn").addClass("hide");
+                $(".playlist-tabs").removeClass("hide");
+            }

-        if(!Helper.contains($(".playlist-tabs-loggedIn").attr("class").split(" "), "hide")) {
-            $(".playlist-tabs-loggedIn").addClass("hide");
-            $(".playlist-tabs").removeClass("hide");
-        }
-
-        if($("ul.playlist-tabs-loggedIn .playlist-tab-links.active").attr("href") == "#suggestions" && $(".tabs").length > 0 && !changing_to_frontpage)
-        {
-            $('ul.playlist-tabs').tabs('select_tab', 'wrapper');
-            $('ul.playlist-tabs-loggedIn').tabs('select_tab', 'wrapper');
-        } else if($(".tabs").length > 0 && !changing_to_frontpage){
-            $('ul.playlist-tabs').tabs('select_tab', $(".playlist-tabs-loggedIn li a.active").attr("href").substring(1));
+            if($("ul.playlist-tabs-loggedIn .playlist-tab-links.active").attr("href") == "#suggestions" && $(".tabs").length > 0 && !changing_to_frontpage)
+            {
+                $('ul.playlist-tabs').tabs('select_tab', 'wrapper');
+                $('ul.playlist-tabs-loggedIn').tabs('select_tab', 'wrapper');
+            } else if($(".tabs").length > 0 && !changing_to_frontpage){
+                $('ul.playlist-tabs').tabs('select_tab', $(".playlist-tabs-loggedIn li a.active").attr("href").substring(1));
+            }
        }
        $("#admin-lock").removeClass("clickable");
        $("#password").attr("placeholder", "Enter admin password");
--- a/server/public/assets/js/channel.js
+++ b/server/public/assets/js/channel.js
@@ -1,5 +1,22 @@
 var Channel = {
    init: function() {
+        if(client) {
+            $(".tabs").addClass("hide");
+            $("#wrapper").removeClass("tabs_height");
+            $("#wrapper").addClass("client-wrapper");
+            $(".embed-button-footer").addClass("hide");
+            $(".skip_next_client").removeClass("hide");
+            if(!Helper.mobilecheck()) {
+                $(".skip_next_client").tooltip({
+                    delay: 5,
+                    position: "bottom",
+                    tooltip: "Skip"
+                });
+            }
+            $("#results").addClass("client-results-height");
+            $(".pagination-results").addClass("client-pagination-height");
+            $(".control-list").addClass("client-control-list");
+        }
        Admin.display_logged_out();
        number_suggested = 0;
        var no_socket = true;
@@ -24,11 +41,13 @@ var Channel = {
        if(window.location.hostname == "zoff.me" || window.location.hostname == "fb.zoff.me") add = "https://zoff.me";
        else add = window.location.hostname;

-        if(Player !== undefined) Player.stopInterval= false;
+        if(Player !== undefined && !client) Player.stopInterval= false;

-        $('ul.playlist-tabs').tabs();
-        $('ul.playlist-tabs-loggedIn').tabs();
-        $('ul.chatTabs').tabs();
+        if(!client) {
+            $('ul.playlist-tabs').tabs();
+            $('ul.playlist-tabs-loggedIn').tabs();
+            $('ul.chatTabs').tabs();
+        }
        $("#settings").sideNav({
            menuWidth: 310,
            edge: side,
@@ -55,9 +74,17 @@ var Channel = {
        $('.collapsible').collapsible({
            accordion : true
        });
-        $("#help").modal();
+        if(!client) {
+            $("#help").modal();
+            $("#embed").modal();
+        } else {
+            $("#help").remove();
+            $("#embed").remove();
+            $(".help-button-footer").remove();
+            $(".embed-button-footer").remove();
+            $(".tabs").remove();
+        }
        $("#contact").modal();
-        $("#embed").modal();
        $("#channel-share-modal").modal();
        $("#delete_song_alert").modal({
            dismissible: false
@@ -122,25 +149,34 @@ var Channel = {
            $("#player").css("opacity", "1");
            $("#controls").css("opacity", "1");
            $(".playlist").css("opacity", "1");
-            Player.readyLooks();
-            Playercontrols.initYoutubeControls(Player.player);
-            Playercontrols.initSlider();
-            Player.player.setVolume(Crypt.get_volume());
-            $(".video-container").removeClass("no-opacity");
-
-            var codeURL = "https://remote."+window.location.hostname+"/"+id;
-            $("#code-text").text(id);
-            $("#code-qr").attr("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+codeURL);
-            $("#code-link").attr("href", codeURL);
+            if(!client) {
+                Player.readyLooks();
+                Playercontrols.initYoutubeControls(Player.player);
+                Playercontrols.initSlider();
+                Player.player.setVolume(Crypt.get_volume());
+                $(".video-container").removeClass("no-opacity");
+                var codeURL = "https://remote."+window.location.hostname+"/"+id;
+                $("#code-text").text(id);
+                $("#code-qr").attr("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+codeURL);
+                $("#code-link").attr("href", codeURL);
+            }
        }

-        var shareCodeUrl = window.location.protocol + "//"+window.location.hostname+"/"+chan.toLowerCase();
-        $("#share-join-qr").attr("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+shareCodeUrl);
-        $("#channel-name-join").text(window.location.hostname + "/" + chan.toLowerCase());
+
+        if(!client) {
+            var shareCodeUrl = window.location.protocol + "//client."+window.location.hostname+"/"+chan.toLowerCase();
+            $("#share-join-qr").attr("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+shareCodeUrl);
+            $("#channel-name-join").text("client." + window.location.hostname + "/" + chan.toLowerCase());
+        } else {
+            $(".video-container").remove();
+            $(".offline-panel").remove();
+            $(".remote-panel").remove();
+            $(".mobile-remote-panel").remove();
+            $(".import-panel").remove();
+            $(".export-panel").remove();
+        }
        if(no_socket || Helper.mobilecheck()){
-            var add = "";
-            if(private_channel) add = Crypt.getCookie("_uI") + "_";
-            socket.emit("list", {version: parseInt(localStorage.getItem("VERSION")), channel: add + chan.toLowerCase(), pass: embed ? '' : Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true)});
+            emit_list();
        }

        if((!localStorage.getItem("_jSeen") || localStorage.getItem("_jSeen") != "seen") && !Helper.mobilecheck()) {
@@ -184,29 +220,64 @@ var Channel = {
            });
        }

-        window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
-        if(Player.player === "" || Player.player === undefined || Helper.mobilecheck()) Player.loadPlayer();
+        if(!client) {
+            window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
+            if(Player.player === "" || Player.player === undefined || Helper.mobilecheck()) Player.loadPlayer();
+        }
        //}

        if(Helper.mobilecheck()) {
-            Mobile_remote.initiate_volume();
+            if(!client) {
+                Mobile_remote.initiate_volume();
+            }
            $(".close-settings").addClass("hide");
        }	else {
            $('input#chan_description').characterCounter();
-            Channel.window_width_volume_slider();
+            if(!client) {
+                Channel.window_width_volume_slider();
+            }
        }

        setup_admin_listener();
        setup_list_listener();
-        setup_chat_listener();
-        get_history();
+        if(!client) {
+            setup_chat_listener();
+            get_history();
+            //console.log(Crypt.get_userpass(chan.toLowerCase()));
+        } else {
+            var c = Crypt.get_userpass(chan.toLowerCase());
+            $.ajax({
+                type: "POST",
+                data: {
+                    userpass: c,
+                },
+                url: "/api/list/" + chan.toLowerCase(),
+                success: function(response) {
+                    if(response.results.length > 0) {
+                        $("#channel-load").remove();
+                        if(response.status == 403) {
+                            start_auth();
+                        }
+                        $("#channel-load").remove();
+                        List.populate_list(response.results);
+                    }
+                },
+                error: function(response) {
+                    if(response.responseJSON.status == 403) {
+                        start_auth();
+                    }
+                    $("#channel-load").remove();
+                    //List.populate_list(response.responseJSON.results);
+                }
+            });
+        }

-        if(!Helper.msieversion() && !Helper.mobilecheck()) Notification.requestPermission();
+        if(!Helper.msieversion() && !Helper.mobilecheck() && !client) Notification.requestPermission();

        $(".search_input").focus();

        Helper.sample();
-        if(!Helper.mobilecheck()) {
+        if(!Helper.mobilecheck() && !client) {
            $('.castButton').tooltip({
                delay: 5,
                position: "top",
@@ -242,21 +313,21 @@ var Channel = {
        $("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color));
        $("#search").attr("placeholder", "Find song on YouTube...");

-        if(!$("footer").hasClass("padding-bottom-novideo")) {
+        if(!$("footer").hasClass("padding-bottom-novideo") && !client) {
            $("footer").addClass("padding-bottom-novideo");
        }

-        if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck()){
+        if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck() && !client){
            $(".castButton").css("display", "none");
        }

        Helper.log(["chromecastAvailable " + chromecastAvailable, "chromecastReady " + chromecastReady]);

-        if(chromecastAvailable){
+        if(chromecastAvailable && !client){
            hide_native(1);
-        } else if(chromecastReady) {
+        } else if(chromecastReady && !client) {
            initializeCastApi();
-        } else {
+        } else if(!client){
            window['__onGCastApiAvailable'] = function(loaded, errorInfo) {
                if (loaded) {
                    setTimeout(function(){
@@ -483,6 +554,10 @@ var Channel = {
            if(private_channel) add = Crypt.getCookie("_uI") + "_";
            socket.emit("list", {version: parseInt(localStorage.getItem("VERSION")), channel: add + chan.toLowerCase(), pass: embed ? '' : Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true)});
        } else if(url_split[3] === "") {
+            if(client) {
+                var host = window.location.hostname.split(".");
+                window.location.hostname = host[host.length -1];
+            }
            clearTimeout(timed_remove_check);
            changing_to_frontpage = true;
            $.contextMenu( 'destroy', ".playlist-element" );
--- a/server/public/assets/js/embed.js
+++ b/server/public/assets/js/embed.js
@@ -3,6 +3,7 @@ var timed_remove_check;
 var gotten_np = false;
 var song_title = "";
 var paused = false;
+var client = false;
 var startTime = 0;
 var player_ready = false;
 var list_html = $("#list-song-html").html();
--- a/server/public/assets/js/functions.js
+++ b/server/public/assets/js/functions.js
@@ -136,8 +136,8 @@ function chromecastListener(evt, data) {
    }
 }

-function setup_auth_listener() {
-    socket.on('auth_required', function() {
+function start_auth() {
+    if(!user_auth_started) {
        user_auth_started = true;
        $("#player_overlay").removeClass("hide");
        $("#player_overlay").css("display", "block");
@@ -145,6 +145,24 @@ function setup_auth_listener() {
        Crypt.remove_userpass(chan.toLowerCase());
        before_toast();
        Materialize.toast("That is not the correct password, try again..", 4000);
+    }
+}
+
+function emit_list() {
+    var add = "";
+    if(private_channel) add = Crypt.getCookie("_uI") + "_";
+    if(socket.id) {
+        socket.emit("list", {version: parseInt(localStorage.getItem("VERSION")), channel: add + chan.toLowerCase(), pass: embed ? '' : Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true)});
+    } else {
+        setTimeout(function(){
+            emit_list();
+        }, 50);
+    }
+}
+
+function setup_auth_listener() {
+    socket.on('auth_required', function() {
+        start_auth();
    });

    socket.on('auth_accepted', function(msg) {
@@ -232,7 +250,9 @@ function setup_chat_listener(){
 }

 function setup_list_listener(){
-    socket.on("color", Player.setBGimage);
+    //if(!client) {
+        socket.on("color", Player.setBGimage);
+    //}
    socket.on("channel", List.channel_function);
 }

@@ -242,13 +262,17 @@ function setup_playlist_listener(){
 }

 function setup_host_initialization(){
-    Helper.log(["Setting up host initialization listener"]);
-    socket.on("id", Hostcontroller.host_listener);
+    if(!client) {
+        Helper.log(["Setting up host initialization listener"]);
+        socket.on("id", Hostcontroller.host_listener);
+    }
 }

 function setup_host_listener(id){
-    Helper.log(["Setting up host action listener"]);
-    socket.on(id, Hostcontroller.host_on_action);
+    if(!client) {
+        Helper.log(["Setting up host action listener"]);
+        socket.on(id, Hostcontroller.host_on_action);
+    }
 }

 function enable_debug(){
--- a/server/public/assets/js/list.js
+++ b/server/public/assets/js/list.js
@@ -152,17 +152,20 @@ var List = {

    populate_list: function(msg, no_reset) {
        // This math is fucked and I don't know how it works. Should be fixed sometime
-        if(!Helper.mobilecheck() && !embed){
+        if(!Helper.mobilecheck() && !embed && !client){
            List.can_fit = Math.round(($("#wrapper").height()) / 71)+1;
            List.element_height = (($("#wrapper").height()) / List.can_fit)-5.3;
        } else if(embed) {
            List.can_fit = Math.round(($("#wrapper").height()) / 91) + 1;
            List.element_height = (($("#wrapper").height()) / List.can_fit)-4;
-        } else {
+        } else if(!client){
            List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / 71)+1;
            List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / List.can_fit)-5;
+        } else {
+            List.can_fit = Math.round(($(window).height() - $("header").height() - $("#pageButtons").height()) / 80)+1;
+            List.element_height = (($(window).height() - $("header").height() - $("#pageButtons").height()) / List.can_fit) - 8;
        }
-        if(List.element_height < 55.2){
+        if(List.element_height < 55.2 && !client){
            List.can_fit = List.can_fit - 1;
            List.element_height = 55.2;
            List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 40) / 71);
--- a/server/public/assets/js/listeners.js
+++ b/server/public/assets/js/listeners.js
@@ -1,5 +1,10 @@
 var chan 				  		= window.chan === undefined ? $("#chan").html() : window.chan;
 var w_p 				  		= true;
+var domain = window.location.host.split(".");
+var client = false;
+if(domain.length > 0 && domain[0] == "client") {
+    client = true;
+}
 var hasadmin			  		= 0;
 var list_html 			  		= $("#list-song-html").html();
 var unseen 			   	  		= false;
@@ -866,6 +871,10 @@ $(document).on("click", "#skipbutton_remote", function(e) {
    Mobile_remote.skip_remote();
 });

+$(document).on("click", ".skip_next_client", function(e) {
+    e.preventDefault();
+});
+
 $(document).on("submit", "#remoteform", function(e) {
    e.preventDefault();
    Mobile_remote.get_input($("#remote_channel").val());
--- a/server/public/assets/js/player.js
+++ b/server/public/assets/js/player.js
@@ -527,12 +527,13 @@ var Player = {
            title = titt;
        }
        if(window.location.pathname != "/"){
-            var elem          = document.getElementById('song-title');
-            var getTitleViews = document.getElementById('viewers');
+            //var elem          = document.getElementById('song-title');
+            //var getTitleViews = document.getElementById('viewers');

-            elem.innerHTML    = title;
-            getTitleViews.innerHTML = outPutWord + " " + v;
-            elem.title        = title;
+            $("#song-title").text(title);
+            $("#viewers").html(outPutWord + " " + v);
+            $("#song-title").attr("title", title);
+            //elem.title        = title;
            if(chromecastAvailable){
                $("#player_overlay").css("background", "url(https://img.youtube.com/vi/" + video_id + "/hqdefault.jpg)");
                $("#player_overlay").css("background-position", "center");
@@ -622,11 +623,13 @@ var Player = {
        if(window.location.pathname != "/" && ((offline && c.only) || (!offline && !c.only) || (!offline && c.only))) {
            document.getElementById("main-container").style.backgroundColor = Helper.rgbToHsl(color,true);
            $("meta[name=theme-color]").attr("content", Helper.rgbToHex(color[0], color[1], color[2]));
-            var new_color =  Helper.rgbToHex(color[0], color[1], color[2]);
-            new_color = Helper.hexToComplimentary(new_color);
-            new_color = Helper.hexToRgb(new_color);
-            new_color = Helper.rgbToHsl([new_color.r, new_color.g, new_color.b], true);
-            $("#controls").css("background", new_color);
+            if(!client) {
+                var new_color =  Helper.rgbToHex(color[0], color[1], color[2]);
+                new_color = Helper.hexToComplimentary(new_color);
+                new_color = Helper.hexToRgb(new_color);
+                new_color = Helper.rgbToHsl([new_color.r, new_color.g, new_color.b], true);
+                $("#controls").css("background", new_color);
+            }
        }
    },

--- a/server/public/layouts/client/channel.handlebars
+++ b/server/public/layouts/client/channel.handlebars
@@ -5,7 +5,10 @@
    </div>
    <main class="container center-align main">
        <div id="main-row" class="row">
-            {{> channel/players}}
+            {{#if client}}
+            {{else}}
+                {{> channel/players}}
+            {{/if}}
            {{> channel/tabs}}
        </div>
        <!--<div id="playbar">
--- a/server/public/partials/channel/header.handlebars
+++ b/server/public/partials/channel/header.handlebars
@@ -37,6 +37,11 @@
                            <i class="material-icons">search</i>
                        </a>
                    </li>
+                    <li class="skip_next_client hide">
+                        <a href="#skip" class="nav-btn skip">
+                            <i class="material-icons">skip_next</i>
+                        </a>
+                    </li>
                    <li>
                        <a class="nav-btn" href="#stir" id="shuffle">
                            <i class="material-icons">shuffle</i>
--- a/server/public/partials/channel/modal.handlebars
+++ b/server/public/partials/channel/modal.handlebars
@@ -1,35 +1,5 @@
-<div id="channel-share-modal" class="modal">
-    <div class="modal-content">
-        <p>To join this channel, go to</p>
-        <p><span id="channel-name-join"></span></p>
-        <img id="share-join-qr" alt="QR code for joining" title="Link to join this Zoff channel" src="https://chart.googleapis.com/chart?chs=221x221&amp;cht=qr&amp;choe=UTF-8&amp;chld=L%7C1&amp;chl=http://zoff.me" />
-    </div>
-</div>
-<div id="user_password" class="modal">
-    <div class="modal-content">
-        <h5>Locked Channel</h5>
-        <form id="user-password-channel-form">
-            <div class="input-field">
-                <input id="user-pass-input" name="user-pass" type="password" autocomplete="off" />
-                <label for="user-pass-input" class="noselect">Password</label>
-            </div>
-        </form>
-    </div>
-    <div class="modal-footer">
-        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat close-user-password">Close</a>
-        <a href="#!" class="waves-effect waves-green btn-flat submit-user-password">Submit</a>
-    </div>
-</div>
-<div id="delete_song_alert" class="modal">
-    <div class="modal-content">
-        <h5>Delete songs</h5>
-        <p>Are you sure you want to delete all the songs in the channel?</p>
-    </div>
-    <div class="modal-footer">
-        <a href="#!" class="waves-effect waves-red btn-flat accept-delete right red-text">Delete</a>
-        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat cancel-song-delete">Cancel</a>
-    </div>
-</div>
+{{#if client}}
+{{else}}
 <div id="help" class="modal modal-fixed-footer">
    <div class="modal-content">
        <h4>Help</h4>
@@ -67,3 +37,36 @@
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
    </div>
 </div>
+<div id="channel-share-modal" class="modal">
+    <div class="modal-content">
+        <p>To join this channel, go to</p>
+        <p><span id="channel-name-join"></span></p>
+        <img id="share-join-qr" alt="QR code for joining" title="Link to join this Zoff channel" src="https://chart.googleapis.com/chart?chs=221x221&amp;cht=qr&amp;choe=UTF-8&amp;chld=L%7C1&amp;chl=http://zoff.me" />
+    </div>
+</div>
+{{/if}}
+<div id="user_password" class="modal">
+    <div class="modal-content">
+        <h5>Locked Channel</h5>
+        <form id="user-password-channel-form">
+            <div class="input-field">
+                <input id="user-pass-input" name="user-pass" type="password" autocomplete="off" />
+                <label for="user-pass-input" class="noselect">Password</label>
+            </div>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat close-user-password">Close</a>
+        <a href="#!" class="waves-effect waves-green btn-flat submit-user-password">Submit</a>
+    </div>
+</div>
+<div id="delete_song_alert" class="modal">
+    <div class="modal-content">
+        <h5>Delete songs</h5>
+        <p>Are you sure you want to delete all the songs in the channel?</p>
+    </div>
+    <div class="modal-footer">
+        <a href="#!" class="waves-effect waves-red btn-flat accept-delete right red-text">Delete</a>
+        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat cancel-song-delete">Cancel</a>
+    </div>
+</div>
--- a/server/public/partials/channel/panel.handlebars
+++ b/server/public/partials/channel/panel.handlebars
@@ -179,6 +179,8 @@
        </li>
    </ul>
 </li>
+{{#if client}}
+{{else}}
 <li class="no-padding remote-panel hide-on-small-only">
    <ul class="collapsible collapsible-accordion">
        <li>
@@ -212,7 +214,6 @@
        </li>
    </ul>
 </li>
-
 <li class="no-padding offline-panel">
    <ul class="collapsible collapsible-accordion">
        <li>
@@ -242,7 +243,7 @@
    </ul>
 </li>

-<li class="no-padding show-only-mobile">
+<li class="no-padding show-only-mobile mobile-remote-panel">
    <ul class="collapsible collapsible-accordion">
        <li>
            <a class="collapsible-header bold waves-effect import-a">Remote Controller
@@ -287,7 +288,7 @@
    </ul>
 </li>

-<li class="no-padding">
+<li class="no-padding import-panel">
    <ul class="collapsible collapsible-accordion">
        <li>
            <a class="collapsible-header bold waves-effect import-a">Import Playlist
@@ -349,7 +350,7 @@
    </ul>
 </li>

-<li class="no-padding">
+<li class="no-padding export-panel">
    <ul class="collapsible collapsible-accordion white-bg">
        <li>
            <a class="collapsible-header bold waves-effect export-a">Export Playlist
@@ -405,3 +406,4 @@
        </li>
    </ul>
 </li>
+{{/if}}
--- a/server/public/partials/channel/tabs.handlebars
+++ b/server/public/partials/channel/tabs.handlebars
@@ -1,4 +1,6 @@
 <div id="playlist" class="col s12 m3">
+    {{#if client}}
+    {{else}}
    <ul class="tabs playlist-tabs tabs-fixed-width" style="width:96%">
        <li class="tab col s3"><a class="playlist-tab-links playlist-link active truncate" href="#wrapper">Playlist</a></li>
        <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat<span class="new badge white hide"></span></a></li>
@@ -8,6 +10,7 @@
        <li class="tab col s3"><a class="playlist-tab-links suggested-link truncate" href="#suggestions">Suggested<span class="new badge white hide"></span></a></li>
        <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat<span class="new badge white hide"></span></a></li>
    </ul>
+    {{/if}}
    <div id="find_div" class="hide">
        <form id="find_form">
            <input type="text" name="find_value" placeholder="Find.." id="find_input" autocomplete="off" />
@@ -18,6 +21,9 @@
        </form>
    </div>
    {{> channel/playlist}}
-    {{> channel/suggestions}}
-    {{> channel/chat}}
+    {{#if client}}
+    {{else}}
+        {{> channel/suggestions}}
+        {{> channel/chat}}
+    {{/if}}
 </div>
--- a/server/routing/client/api.js
+++ b/server/routing/client/api.js
@@ -142,7 +142,7 @@ router.route('/api/list/:channel_name/:video_id').delete(function(req, res) {
        var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        var guid = Functions.hash_pass(req.get('User-Agent') + ip + req.headers["accept-language"]);
        var adminpass = req.body.adminpass == "" ? "" : Functions.hash_pass(crypto.createHash('sha256').update(req.body.adminpass, 'utf8').digest("hex"));
-        req.body.userpass = req.body.userpass == "" ? "" : crypto.createHash('sha256').update(req.body.userpass, 'utf8').digest("hex");
+        req.body.userpass = req.body.userpass == "" ? "" : req.body.userpass;
        var userpass = req.body.userpass;
        var channel_name = cleanChannelName(req.params.channel_name);
        var video_id = req.params.video_id;
@@ -243,7 +243,7 @@ router.route('/api/conf/:channel_name').put(function(req, res) {
        var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        var guid = Functions.hash_pass(req.get('User-Agent') + ip + req.headers["accept-language"]);
        var adminpass = req.body.adminpass == "" ? "" : Functions.hash_pass(crypto.createHash('sha256').update(req.body.adminpass, 'utf8').digest("hex"));
-        req.body.userpass = req.body.userpass == "" ? "" : crypto.createHash('sha256').update(req.body.userpass, 'utf8').digest("hex");
+        req.body.userpass = req.body.userpass == "" ? "" : req.body.userpass;
        var userpass = req.body.userpass;
        var voting = req.body.vote;
        var addsongs = req.body.addsongs;
@@ -398,7 +398,7 @@ router.route('/api/list/:channel_name/:video_id').put(function(req,res) {
        var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        var guid = Functions.hash_pass(req.get('User-Agent') + ip + req.headers["accept-language"]);
        var adminpass = req.body.adminpass == "" ? "" : Functions.hash_pass(crypto.createHash('sha256').update(req.body.adminpass, 'utf8').digest("hex"));
-        req.body.userpass = req.body.userpass == "" ? "" : crypto.createHash('sha256').update(req.body.userpass, 'utf8').digest("hex");
+        req.body.userpass = req.body.userpass == "" ? "" : req.body.userpass;
        var userpass = req.body.userpass;
        var channel_name = cleanChannelName(req.params.channel_name);
        var video_id = req.params.video_id;
@@ -485,7 +485,7 @@ router.route('/api/list/:channel_name/__np__').post(function(req, res) {
        var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        var guid = Functions.hash_pass(req.get('User-Agent') + ip + req.headers["accept-language"]);
        var channel_name = req.params.channel_name;
-        req.body.userpass = req.body.userpass == "" ? "" : crypto.createHash('sha256').update(req.body.userpass, 'utf8').digest("hex");
+        req.body.userpass = req.body.userpass == "" ? "" : req.body.userpass;
        var userpass = req.body.userpass;
        var token = "";
        if(req.body.hasOwnProperty("token")) {
@@ -569,7 +569,7 @@ router.route('/api/list/:channel_name/:video_id').post(function(req,res) {

        var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        var guid = Functions.hash_pass(req.get('User-Agent') + ip + req.headers["accept-language"]);
-        req.body.userpass = req.body.userpass == "" ? "" : crypto.createHash('sha256').update(req.body.userpass, 'utf8').digest("hex");
+        req.body.userpass = req.body.userpass == "" ? "" : req.body.userpass;
        var userpass = req.body.userpass;
        var channel_name = cleanChannelName(req.params.channel_name);
        var video_id = req.params.video_id;
@@ -817,7 +817,7 @@ router.route('/api/conf/:channel_name').post(function(req, res) {
        var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        var guid = Functions.hash_pass(req.get('User-Agent') + ip + req.headers["accept-language"]);
        var channel_name = req.params.channel_name;
-        req.body.userpass = req.body.userpass == "" ? "" : crypto.createHash('sha256').update(req.body.userpass, 'utf8').digest("hex");
+        req.body.userpass = req.body.userpass == "" ? "" : req.body.userpass;
        var userpass = req.body.userpass;

        if(typeof(userpass) != "string") {
@@ -916,7 +916,6 @@ router.route('/api/list/:channel_name').post(function(req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header({"Content-Type": "application/json"});
-
    try {
        if(!req.body.hasOwnProperty('userpass')) {
            throw "Wrong format";
@@ -929,7 +928,7 @@ router.route('/api/list/:channel_name').post(function(req, res) {
        var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        var guid = Functions.hash_pass(req.get('User-Agent') + ip + req.headers["accept-language"]);
        var channel_name = req.params.channel_name;
-        req.body.userpass = req.body.userpass == "" ? "" : crypto.createHash('sha256').update(req.body.userpass, 'utf8').digest("hex");
+        req.body.userpass = req.body.userpass == "" ? "" : req.body.userpass;
        var userpass = req.body.userpass;

        if(typeof(userpass) != "string") {
--- a/server/routing/client/router.js
+++ b/server/routing/client/router.js
@@ -103,10 +103,10 @@ function root(req, res, next) {
    try{
        var url = req.headers['x-forwarded-host'] ? req.headers['x-forwarded-host'] : req.headers.host.split(":")[0];
        var subdomain = req.headers['x-forwarded-host'] ? req.headers['x-forwarded-host'].split(".") : req.headers.host.split(":")[0].split(".");
-        if(url != "zoff.me" && url != "admin.localhost" && url != "admin.zoff.me" && url != "remote.zoff.me" && url != "fb.zoff.me" && url != "remote.localhost" && url != "localhost") {
+        /*if(url != "zoff.me" && url != "admin.localhost" && url != "admin.zoff.me" && url != "remote.zoff.me" && url != "fb.zoff.me" && url != "remote.localhost" && url != "localhost") {
            res.redirect("https://zoff.me");
            return;
-        }
+        }*/
        if(subdomain[0] == "remote") {
            var data = {
                year: year,
@@ -115,11 +115,13 @@ function root(req, res, next) {
                analytics: analytics,
                stylesheet: "style.css",
                embed: false,
+                client: false
            }
            res.render('layouts/client/remote', data);
        } else if(subdomain[0] == "www") {
            res.redirect("https://zoff.me");
        } else {
+
            var data = {
                year: year,
                javascript_file: "main.min.js",
@@ -127,6 +129,10 @@ function root(req, res, next) {
                analytics: analytics,
                stylesheet: "style.css",
                embed: false,
+                client: false
+            }
+            if(subdomain == "client") {
+                data.client = true;
            }
            res.render('layouts/client/frontpage', data);
        }
@@ -140,10 +146,10 @@ function channel(req, res, next) {
    try{
        var url = req.headers['x-forwarded-host'] ? req.headers['x-forwarded-host'] : req.headers.host.split(":")[0];
        var subdomain = req.headers['x-forwarded-host'] ? req.headers['x-forwarded-host'].split(".") : req.headers.host.split(":")[0].split(".");
-        if(url != "zoff.me" && url != "admin.localhost" && url != "admin.zoff.me" && url != "remote.zoff.me" && url != "fb.zoff.me" && url != "remote.localhost" && url != "localhost") {
+        /*if(url != "zoff.me" && url != "admin.localhost" && url != "admin.zoff.me" && url != "remote.zoff.me" && url != "fb.zoff.me" && url != "remote.localhost" && url != "localhost") {
            res.redirect("https://zoff.me");
            return;
-        }
+        }*/
        if(subdomain[0] == "remote") {
            var data = {
                year: year,
@@ -152,6 +158,7 @@ function channel(req, res, next) {
                analytics: analytics,
                stylesheet: "style.css",
                embed: false,
+                client: false
            }
            res.render('layouts/client/remote', data);
        } else if(subdomain.length >= 2 && subdomain[0] == "www") {
@@ -180,8 +187,11 @@ function channel(req, res, next) {
                    analytics: analytics,
                    stylesheet: "style.css",
                    embed: false,
+                    client:false
+                }
+                if(subdomain == "client") {
+                    data.client = true;
                }
-

                if(req.params.channel_name == "404") {
                    res.status(404);