Used realfavicongenerator.net to generate new favicons

server/public/assets/css/style.css

@@ -2479,7 +2479,7 @@ nav ul li:hover, nav ul li.active {
     }
 
     .footer-copyright {
-      margin-bottom: 40px;
+      margin-bottom: 10px;
     }
 
     #duration{

server/public/assets/images/safari-pinned-tab.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4855 10233 c-394 -26 -679 -71 -1020 -158 -1295 -331 -2412 -1169
+-3115 -2335 -83 -138 -254 -475 -314 -620 -161 -385 -269 -757 -335 -1155 -19
+-117 -23 -146 -36 -270 -4 -33 -9 -71 -11 -85 -24 -154 -24 -766 0 -970 2 -14
+7 -56 11 -95 4 -38 8 -77 10 -85 1 -8 6 -40 9 -70 4 -30 11 -77 16 -105 5 -27
+12 -66 15 -85 3 -19 22 -106 41 -194 54 -241 111 -432 219 -726 34 -95 135
+-321 203 -455 276 -547 649 -1040 1108 -1465 79 -74 256 -224 320 -271 32 -24
+61 -46 64 -49 11 -13 182 -132 291 -203 351 -231 772 -433 1191 -571 237 -78
+556 -156 783 -191 113 -17 352 -45 445 -51 205 -15 757 -8 858 10 9 2 46 7 82
+11 98 10 201 24 305 41 66 11 276 57 389 85 636 160 1269 465 1808 871 325
+245 606 515 892 858 127 153 329 446 452 655 389 662 622 1424 681 2226 14
+199 7 727 -12 842 -2 12 -9 67 -15 122 -35 308 -117 677 -222 990 -212 637
+-535 1207 -982 1730 -586 685 -1383 1220 -2251 1510 -373 125 -793 212 -1150
+240 -44 4 -91 9 -105 11 -27 6 -560 11 -625 7z"/>
+</g>
+</svg>

server/public/assets/js/frontpage.js

@@ -193,7 +193,7 @@ var Frontpage = {
             var img = new Image();
             img.src = "/assets/images/thumbnails/"+id+".jpg";
 
-            img.onerror = function(){ // Failed to load
+            img.onerror = function(e){ // Failed to load
                 $.ajax({
                     type: "POST",
                     data: {id:id},

server/public/assets/js/listeners.js

@@ -351,6 +351,10 @@ function init(){
     $("#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")) {
+        $("footer").addClass("padding-bottom-novideo");
+    }
+
     if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck()){
         $(".castButton").css("display", "none");
     }
@@ -1919,7 +1923,7 @@ function onepage_load(){
                 else $("main").append($(response.find("#main_section_frontpage")).wrap("<div>").parent().html());
                 $(".page-footer").removeClass("padding-bottom-extra");
                 $(".page-footer").removeClass("padding-bottom-novideo");
-                $("#favicon").attr("href", "/assets/images/favicon.png");
+                $("#favicon").attr("href", "/assets/images/favicon-32x32.png");
 
                 $(".context-menu-list").remove();
                 Helper.log(socket);

server/public/assets/manifest.json

@@ -1,16 +1,31 @@
 {
     "short_name": "Zoff",
-  "name": "Zoff",
+    "name": "Zoff - the shared YouTube based radio",
-  "icons": [
+    "description": "A free YouTube based radio, where no registration is needed for listening to channels, or creating your own channels. ",
-    {
+    "dir": "ltr",
-      "src": "/assets/images/144x144.png",
+    "lang": "en-US",
-      "sizes": "144x144",
-      "type": "image/png"
-    }
-  ],
     "start_url": "/",
     "display": "standalone",
     "background_color": "#2D2D2D",
     "theme_color": "#2D2D2D",
-  "orientation": "portrait"
+    "orientation": "portrait",
+    "related_applications": [
+        {
+            "platform": "play",
+            "id": "zoff.me.zoff",
+            "url": "https://play.google.com/store/apps/details?id=zoff.me.zoff"
+        }
+    ],
+    "icons": [
+        {
+            "src": "/assets/images/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/images/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
 }

server/public/layouts/channel.handlebars

@@ -1,5 +1,5 @@
 <div id="main-container" class="channelpage noselect cursor-default">
-<header>
+    <header>
         <div class="navbar-fixed">
             <nav id="nav">
                 <div class="nav-wrapper">
@@ -218,13 +218,13 @@
     --><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>
-              </ul>
+</ul>
-              <ul class="tabs playlist-tabs-loggedIn hide tabs-fixed-width" style="width: 96%;">
+<ul class="tabs playlist-tabs-loggedIn hide 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 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>
+</ul>
-              <div id="find_div" class="hide">
+<div id="find_div" class="hide">
     <form id="find_form">
         <input type="text" name="find_value" placeholder="Find.." id="find_input" autocomplete="off" />
         <div class="num_of_found">
@@ -232,8 +232,8 @@
         </div>
         <a href="#" id="close_find_form_button"><i class="material-icons">clear</i></a>
     </form>
-              </div>
+</div>
-                <div id="wrapper" class="tabs_height">
+<div id="wrapper" class="tabs_height">
     <div id="list-song-html">
         <div id="list-song" class="card left-align list-song playlist-element waves-effect waves-light">
             <div class="clickable vote-container" title="Vote!">
@@ -262,16 +262,16 @@
             <div class="mobile-delete red">DELETE</div>
         </div>
     </div>
-                </div>
+</div>
-                <div id="suggestions" class="tabs_height" style="display:none;">
+<div id="suggestions" class="tabs_height" style="display:none;">
     <p class="suggest-title-info">YouTube Suggests:</p>
     <div class="suggest_bar" id="suggest-song-html">
     </div>
     <p class="suggest-title-info" id="user_suggests">Users Suggests:</p>
     <div class="suggest_bar" id="user-suggest-html">
     </div>
-                </div>
+</div>
-                <div id="chatPlaylist" class="tabs_height" style="display:none;">
+<div id="chatPlaylist" class="tabs_height" style="display:none;">
     <ul class="" id="chat-bar">
         <li id="chat-log">
             <ul class="inherit-height">
@@ -298,10 +298,10 @@
             </form>
         </li>
     </ul>
-                </div>
+</div>
-            </div>
+</div>
-        </div>
+</div>
-        <div id="playbar">
+<div id="playbar">
-        </div>
+</div>
-    </main>
+</main>
 </div>

server/public/layouts/main.handlebars

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
 
     <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     |    Zoff                                                         |
@@ -11,12 +11,12 @@
     <title>Zoff - the shared YouTube based radio</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <meta name="author" content="Nicolas 'Nixo' Almagro Tonne &amp; Kasper 'KasperRT' Rynning-Tønnesen"/>
-    <meta name="description" content="The Shared (free) YouTube radio."/>
+    <meta name="description" content="The shared (free) YouTube radio."/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#2D2D2D" />
-    <meta property="og:image" content="https://zoff.me/assets/images/favicon.png" />
+    <meta property="og:image" content="https://zoff.me/assets/images/favicon-32x32.png" />
     <meta property="og:url" content="https://zoff.me" />
     <meta property="og:title" content="Zoff"/>
     <meta property="og:description" content="The Shared (free) YouTube radio."/>
@@ -28,7 +28,10 @@
     <link type="text/css" rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" />
     <link type="text/css" rel="stylesheet" href="/assets/css/materialize.min.css" />
     <link rel="stylesheet" type="text/css" href="/assets/css/style.css" title="Default" />
-    <link rel="icon" id="favicon" type="image/png" href="/assets/images/favicon.png"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
+    <link rel="icon" id="favicon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
+    <link rel="mask-icon" href="/assets/images/safari-pinned-tab.svg" color="#2d2d2d">
     <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -51,8 +54,8 @@
     <script type="text/javascript" src="/assets/dist/lib/sha256.js"></script>
     <script type="text/javascript" src="/assets/dist/lib/aes.js"></script>
     <script type="text/javascript" src="/assets/dist/{{javascript_file}}"></script>
-  </head>
+</head>
-  <body class="noselect">
+<body class="noselect">
     {{{body}}}
     <div class="tap-target" data-activates="castButton">
         <div class="tap-target-content">
@@ -204,4 +207,4 @@
         </footer>
         <textarea class="copy_video_id" style="display:none;"></textarea>
     </body>
-</html>
+    </html>

server/public/layouts/remote.handlebars

@@ -47,12 +47,12 @@
                 <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
             </div>
         </div>
-</header>
+    </header>
 
-<main class="center-align container remote-container">
+    <main class="center-align container remote-container">
-<div class="section">
+        <div class="section">
-<h3 id="remote-text">Remote Controller</h3>
+            <h3 id="remote-text">Remote Controller</h3>
-</div>
+        </div>
         <div class="section">
             <form id="remoteform" class="row">
                 <div class="input-field col s12">
@@ -96,4 +96,4 @@
             To find the ID of your player, click the Conf <i class="material-icons">menu</i> icon on the top right of the player page, then "Remote Control".
             <br>You can either scan the QR code or type the ID manually.
         </div>
-</main>
+    </main>

server/public/partials/panel.handlebars

@@ -110,8 +110,8 @@
                     </div>
                 </li>
             </ul>
-</li>
+        </li>
-<li class="no-padding">
+        <li class="no-padding">
             <ul class="collapsible collapsible-accordion">
                 <li>
                     <a class="collapsible-header bold waves-effect">Channel Info
@@ -143,8 +143,8 @@
                         </ul>
                     </div>
                 </ul>
-</li>
+            </li>
-<li class="no-padding remote-panel hide-on-small-only">
+            <li class="no-padding remote-panel hide-on-small-only">
                 <ul class="collapsible collapsible-accordion">
                     <li>
                         <a class="collapsible-header bold waves-effect">Remote Control
@@ -175,9 +175,9 @@
                     </div>
                 </li>
             </ul>
-</li>
+        </li>
 
-<li class="no-padding offline-panel">
+        <li class="no-padding offline-panel">
             <ul class="collapsible collapsible-accordion">
                 <li>
                     <a class="collapsible-header bold waves-effect">Local Mode
@@ -203,9 +203,9 @@
                 </div>
             </li>
         </ul>
-</li>
+    </li>
 
-<li class="no-padding show-only-mobile">
+    <li class="no-padding show-only-mobile">
         <ul class="collapsible collapsible-accordion">
             <li>
                 <a class="collapsible-header bold waves-effect import-a">Remote Controller
@@ -247,9 +247,9 @@
                     </div>
                 </li>
             </ul>
-</li>
+        </li>
 
-<li class="no-padding">
+        <li class="no-padding">
             <ul class="collapsible collapsible-accordion">
                 <li>
                     <a class="collapsible-header bold waves-effect import-a">Import Playlist
@@ -400,9 +400,9 @@
                         </div>
                     </li>
                 </ul>
-</li>
+            </li>
 
-<li class="no-padding">
+            <li class="no-padding">
                 <ul class="collapsible collapsible-accordion white-bg">
                     <li>
                         <a class="collapsible-header bold waves-effect export-a">Export Playlist
@@ -501,11 +501,11 @@
                         </div>
                     </li>
                 </ul>
-</li>
+            </li>
 
-<!--
+            <!--
-<li class="no-padding">
+            <li class="no-padding">
             <h5 id="desc-title">List description</h5>
             <span id="description"></span>
-</li>
+        </li>
--->
+    -->

server/routing/router.js

@@ -11,6 +11,10 @@ router.use(function(req, res, next) {
     next(); // make sure we go to the next routes and don't stop here
 });
 
+router.route('/favicon.ico').get(function(req, res, next) {
+    res.sendFile(path.join(pathThumbnails, '/public/assets/images/favicon.ico'));
+});
+
 router.route('/:channel_name').get(function(req, res, next){
     try{
         var url = req.headers['x-forwarded-host'] ? req.headers['x-forwarded-host'] : req.headers.host.split(":")[0];