Merge pull request #285 from zoff-music/feature/join-link-qr

Added a prettier QR-code link for joining on a channel

server/public/assets/css/style.css

@@ -95,6 +95,34 @@ body {
     line-height: 36px;
 }
 
+#channel-share-modal {
+    background: transparent !important;
+    text-align: center !important;
+    margin: auto;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    box-shadow: none;
+}
+
+.chan.tap-target-origin {
+    display: none;
+}
+
+.tap-target-join {
+    color: white;
+}
+
+#channel-share-modal p {
+    color: white;
+    font-size: 2rem;
+}
+
+#channel-share-modal.open {
+    display: flex !important;
+}
+
 #playing_on{
     display: none;
     text-align: left;

server/public/assets/js/channel.js

@@ -58,6 +58,7 @@ var Channel = {
         $("#help").modal();
         $("#contact").modal();
         $("#embed").modal();
+        $("#channel-share-modal").modal();
         $("#delete_song_alert").modal({
             dismissible: false
         });
@@ -128,12 +129,23 @@ var Channel = {
             $("#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(no_socket){
             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()))});
         }
 
+        if(!localStorage.getItem("_jSeen") || localStorage.getItem("_jSeen") != "seen") {
+            $('.tap-target-join').tapTarget('open');
+            tap_target_timeout = setTimeout(function() {
+                $('.tap-target-join').tapTarget('close');
+            }, 4000);
+            localStorage.setItem("_jSeen", "seen");
+        }
+
         if(!Helper.mobilecheck()) {
             $("#viewers").tooltip({
                 delay: 5,

server/public/assets/js/list.js

@@ -825,7 +825,7 @@ var List = {
     show: function() {
         if(!Helper.mobilecheck())
         {
-            if(showToggle){
+            /*if(showToggle){
                 showToggle=false;
                 $("#toptitle").empty();
                 $("#chan").addClass("bigChan");
@@ -836,7 +836,7 @@ var List = {
                 $("#toptitle").html("Zoff");
                 $("#chan").removeClass("bigChan");
                 $("#chan").html(chan);
-            }
+            }*/$("#channel-share-modal").modal("open");
         }
     },
 

server/public/assets/js/listeners.js

@@ -848,6 +848,10 @@ $(document).on("submit", "#adminForm", function(e){
     Admin.pass_save();
 });
 
+$(document).on("click", "#channel-share-modal", function(){
+	$("#channel-share-modal").modal("close")
+});
+
 $(document).on("click", ".chat-link", function(e){
     chat_active = true;
     unseen = false;

server/public/layouts/main.handlebars

@@ -65,6 +65,10 @@
                 <p>This site supports chromecasting!</p>
             </div>
         </div>
+        <div class="tap-target-join" data-activates="chan">
+            <div class="tap-target-content">
+            </div>
+        </div>
         {{> contact}}
         {{> donate}}
         {{> footer}}

server/public/partials/channel/modal.handlebars

@@ -1,3 +1,10 @@
+<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>