Merge pull request #468 from zoff-music/feature/add-song-to-other-list

Feature/add song to other list

server/handlers/list_change.js

@@ -415,8 +415,9 @@ function add_function(arr, coll, guid, offline, socket) {
             }
             db.collection(coll + "_settings").find(function(err, docs){
                 if(docs.length > 0 && (docs[0].userpass == undefined || docs[0].userpass == "" || (arr.hasOwnProperty('pass') && docs[0].userpass == arr.pass))) {
-                    Functions.check_inlist(coll, guid, socket, offline, undefined, "place 5");
-
+                    if((arr.hasOwnProperty("offsiteAdd") && !arr.offsiteAdd) || !arr.hasOwnProperty("offsiteAdd")) {
+                        Functions.check_inlist(coll, guid, socket, offline, undefined, "place 5");
+                    }
                     var id = arr.id + "";
                     var title = arr.title;
                     var hash = arr.adminpass;
@@ -504,7 +505,11 @@ function add_function(arr, coll, guid, offline, socket) {
                         });
                     }
                 } else {
-                    socket.emit("auth_required");
+                    if((arr.hasOwnProperty("offsiteAdd") && !arr.offsiteAdd) || !arr.hasOwnProperty("offsiteAdd")) {
+                        socket.emit("auth_required");
+                    } else {
+                        socket.emit("toast", "listhaspass");
+                    }
                 }
             });
         });

server/public/assets/css/style.css

@@ -2564,12 +2564,12 @@ nav ul li:hover, nav ul li.active {
     margin-left: 5px;
 }
 
-#playpause:hover, #volume-button:hover, #fullscreen:hover
+#playpause:hover, #volume-button:hover, #fullscreen:hover, #addToOtherList
 {
     color:rgba(255,255,255,0.5);
 }
 
-#fullscreen
+#fullscreen, #addToOtherList
 {
     float:right;
     color:white;
@@ -2580,6 +2580,11 @@ nav ul li:hover, nav ul li.active {
     padding-left: 3px;
 }
 
+#addToOtherList {
+    margin-right: 5px;
+    height: 100% !important;
+}
+
 #duration, #viewers
 {
     margin-top:5px;
@@ -2602,7 +2607,7 @@ nav ul li:hover, nav ul li.active {
     margin-right: 5px;
 }
 
-#play, #pause, #volume-button, #fullscreen
+#play, #pause, #volume-button, #fullscreen, #addToOtherList
 {
     font-size: 24px;
     cursor:pointer;
@@ -2610,6 +2615,8 @@ nav ul li:hover, nav ul li.active {
     line-height: 31px;
 }
 
+
+
 .ui-slider-vertical {
     width: .8em;
     height: 100px;
@@ -2842,7 +2849,7 @@ nav ul li:hover, nav ul li.active {
     width: 100vw !important;
 }
 
-#seekToDuration{
+#seekToDuration, #addToListInput{
     position: absolute;
     background: #2d2d2d;
     color:white;
@@ -2858,6 +2865,29 @@ nav ul li:hover, nav ul li.active {
     pointer-events: none;
 }
 
+#addToListInput {
+    top: -125px;
+    right: 10px;
+    z-index: 999999;
+    pointer-events: all;
+}
+
+#addToListInput .input-field {
+    margin-right: 25px;
+    margin-bottom: 15px !important;
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+#addToListInput span {
+    color: white;
+}
+
+#addToListInput .input-field input {
+    color: white;
+}
+
 .ewresize{
     cursor: ew-resize;
 }
@@ -3673,6 +3703,15 @@ nav ul li:hover, nav ul li.active {
         width: 80% !important;
     }
 
+    #addToListInput {
+        top: -85px;
+        right: 35px;
+    }
+
+    #addToOtherList {
+        padding: 0 10px;
+    }
+
     .result-object-slid {
         /*-webkit-transform: translateX(calc(-100% + 45px)) !important;
         transform: translateX(calc(-100% + 45px)) !important;*/

server/public/assets/js/channel.js

@@ -263,6 +263,12 @@ var Channel = {
                 html: "Viewers"
             });
 
+            Helper.tooltip("#addToOtherList", {
+                delay: 5,
+                position: "top",
+                html: "Add to other playlist"
+            });
+
             Helper.tooltip("#fullscreen", {
                 delay: 5,
                 position: "top",
@@ -508,6 +514,7 @@ var Channel = {
             if(!Helper.mobilecheck()) {
                 Helper.tooltip('.castButton', "destroy");
                 Helper.tooltip("#viewers", "destroy");
+                Helper.tooltip('#addToOtherList', 'destroy');
                 //$('.castButton-unactive').tooltip("destroy");
                 Helper.tooltip("#offline-mode", "destroy");
                 Helper.tooltip('#admin-lock', "destroy");
@@ -559,6 +566,7 @@ var Channel = {
             Helper.css("#embed-button", "display", "none");
             if(!Helper.mobilecheck()) {
                 Helper.tooltip(".castButton", "destroy");
+                Helper.tooltip('#addToOtherList', 'destroy');
                 Helper.tooltip("#viewers", "destroy");
                 Helper.tooltip("#offline-mode", "destroy");
                 Helper.tooltip("search-btn", "destroy");

server/public/assets/js/listeners.js

@@ -829,6 +829,7 @@ function addDynamicListeners() {
             if(!Helper.mobilecheck()) {
                 Helper.tooltip('.castButton', "destroy");
                 Helper.tooltip("#viewers", "destroy");
+                Helper.tooltip('#addToOtherList', 'destroy');
                 //$('.castButton-unactive').tooltip("destroy");
                 Helper.tooltip("#offline-mode", "destroy");
                 Helper.tooltip('#admin-lock', "destroy");
@@ -1000,6 +1001,18 @@ function addDynamicListeners() {
         Player.playVideo();
     });
 
+    addListener("click", "#addToOtherList", function(event) {
+        this.preventDefault();
+        Helper.toggleClass("#addToListInput", "hide");
+    });
+
+    addListener("submit", "#addToOtherListForm", function() {
+        this.preventDefault();
+        emit("add", {offsiteAdd: true, id: Player.np.id, start: Player.np.start, end: Player.np.end, title: Player.np.title, list: document.getElementById("other-list-name-add").value.toLowerCase(), duration: Player.np.duration, source: Player.np.source, thumbnail: Player.np.thumbnail});
+        Helper.toggleClass("#addToListInput", "hide");
+        document.getElementById("other-list-name-add").value = "";
+    });
+
     addListener("click", "#listExport", function(event){
         this.preventDefault();
         if(!youtube_authenticated){

server/public/partials/channel/players.handlebars

@@ -66,7 +66,18 @@
                 <div id="volume"></div>
             </div>
             <div id="viewers" data-position="top"></div>
+            <div id="addToOtherList" class="playbar-btn">
+                <i class="material-icons">playlist_add</i>
+            </div>
             <div id="bar"></div>
         </div>
+        <div id="addToListInput" class="hide">
+            <div class="input-field field-settings">
+                <span>Add to other list</span>
+                <form action="#" id="addToOtherListForm" onsubmit="return false;">
+                    <input placeholder="List-name" id="other-list-name-add" type="text" autocomplete="off">
+                </form>
+            </div>
+        </div>
     </div>
 </div>