move obs scenes to a list view...

reaby · Feb 4, 2021 · 10b482a · 10b482a
1 parent 9439dfc
commit 10b482a
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 204 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Petri Järvisalo
+Copyright (c) 2021 Petri Järvisalo
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # LoistoTxt
-Song lyrics and lower 3rd titles displayer to obs, vmix or any casting software that supports browser source. Additionally you can remote control whitelisted scenes at OBS (required additional plugin to install)
+Song lyrics and lower 3rd titles displayer to obs, vmix or any casting software that supports browser source. Additionally you can remote control whitelisted scenes at OBS (additional plugin required for this).
 
 ## Install
 
@@ -39,8 +39,8 @@ structure of the file is quite obvious:
         }
     }
 
-Scenes here are the whitelist of scene names for changing the scenes at loistoTxt admin ui. These scenes become green and active buttons, which you can then double click to change, others are disabled to change, but you see the status.
-
+Scenes is a whitelist of scene names. You can use `"*"` to whitelist all scenes for changing.
+Active scene is displayed with green color on the ui.
 
 # Usage
 

diff --git a/bin/websocket.js b/bin/websocket.js
@@ -79,7 +79,7 @@ class websocket {
                     io.emit("callback.dataUpdate", self.getIndexFile());
                 });
 
-          
+
                 client.on("moveSong", (oldIndex, newIndex) => {
                     let song = self.serverOptions.showData.songs.splice(oldIndex, 1);
                     self.serverOptions.showData.songs.splice(newIndex, 0, song[0]);
@@ -180,7 +180,7 @@ class websocket {
                     name: scene.name,
                     enabled: false
                 }
-                if (config.obs.scenes.indexOf(scene.name) != -1) {
+                if (config.obs.scenes.includes("*") || config.obs.scenes.indexOf(scene.name) != -1) {
                     obj.enabled = true;
                 }
                 outScenes.push(obj);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "loistotxt",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "start": "node ./bin/www",

diff --git a/public/javascripts/admin.js b/public/javascripts/admin.js
@@ -84,10 +84,9 @@ $(function () {
     });
 
     $(window).on('viewportResize', function () {
-        //  $("#col1").css("height", ($(window).height() - (40 + $("#preview iframe").height() + $(".menu").height() * 2)) + "px")
-        $("#col1").css("height", ($(window).height() - (20 + $(".menu").height() * 2)) + "px")
-        $("#col2").css("height", ($(window).height() - (20 + $(".menu").height() * 2)) + "px")
-        $("#col3").css("height", ($(window).height() - (20 + $(".menu").height() * 2)) + "px")
+        $("#col1").css("height", ($(window).height() - (50 + $("#preview iframe").height() + $(".menu").height())) + "px")
+        $("#col2").css("height", ($(window).height() - (50 + $(".menu").height())) + "px")
+        $("#col3").css("height", ($(window).height() - (50 + $(".menu").height())) + "px")
     });
 
     $(window).trigger('viewportResize');
@@ -123,10 +122,12 @@ socket.on('obs.scenelist', data => {
             action = `ondblClick="setScene('${scene.name}', this)"`;
             color = "";
         }
-
         output += `
-        <button id="scene_${idx}" class="mini ui button ${color}" ${action} style="margin: 0 3px;">${scene.name}</button>
-    `;
+        <div class="ui left aligned gray message inverted item" id=scene_${idx}">
+            <div class="ui content noselect">                 
+                <button class="ui small basic inverted icon button" onclick="setScene('${scene.name}', this)"><i class="play icon"></i></button> ${scene.name}
+            </div>
+        </div>`;
         idx++;
     }
     $("#sceneList").html(output);
@@ -149,6 +150,8 @@ function openShow() {
     $('#showContent').DataTable().destroy();
     $('#showContent').DataTable({
         paging: false,
+        scrollCollapse: true,
+        info: false,
         ajax: '/ajax/shows',
         columns: [
             { data: "file" }
@@ -167,28 +170,6 @@ function openShow() {
             socket.emit("loadShow", $("#dialogFilename").val());
         }
     }).modal('show');
-
-    /*$.getJSON("/ajax/shows", function (json) {
-        let data = ``;
-        for (let elem of json) {
-            data += `
-            <div class="item" onclick="selectShowFile(this);">
-                <i class="file icon"></i>
-                <div class="content noselect">
-                    <div class="header">${elem}</div>
-                </div>
-            </div>`;
-        }
-        $("#showContent").html(data);
-        $('#showDialog').modal({
-            blurring: true,
-            onApprove: function () {
-                socket.emit("loadShow", $("#dialogFilename").val());
-            }
-        }).modal('show');
-      
-    });
-  */
 }
 
 function saveShow() {
@@ -198,6 +179,7 @@ function saveShow() {
     $('#showContent').DataTable({
         paging: false,
         scrollCollapse: true,
+        info: false,
         ajax: '/ajax/shows',
         columns: [
             { data: "file" }
@@ -283,12 +265,12 @@ function updateSongs() {
     let i = 0;
     for (var song of serverOptions.showData.songs) {
         output += `
-        <div class="ui left aligned gray message inverted item" data-song="${song.file}" onclick="loadSong('${song.file}', ${i})">
+        <div class="ui left aligned gray message inverted item handle" data-song="${song.file}" >
             <div class="right floated content noselect">
                 <button class="ui small basic inverted icon button" onclick="removeSong(${i})"><i class="delete icon"></i></button>
             </div>
-            <div class="ui content noselect">
-                 <div class="ui inverted basic icon button handle"><i class="move icon"></i></div>
+            <div class="ui content noselect" onclick="loadSong('${song.file}', ${i})">
+                 <div class="ui inverted basic icon button" onclick="loadSong('${song.file}', ${i})"><i class="play icon"></i></div>
                  <i class="music icon"></i> ${song.title} (${song.artist})
             </div>
         </div>`;
@@ -426,10 +408,11 @@ function renderUI() {
         $('#toggleTitlesButton').addClass("inverted");
     }
 
-    $("#sceneList button").each(function (idx, elem) {
-        $(elem).removeClass("blue loading").addClass("black inverted");
+    $("#sceneList .item").each(function (idx, elem) {
+        $(elem).find("button").removeClass("green loading");
+        $(elem).removeClass("green").addClass("gray");
         if (obsScenes[idx].name == serverOptions.obs.currentScene) {
-            $(elem).removeClass("black inverted").addClass("blue");
+            $(elem).removeClass("gray").addClass("green");
         }
         idx++;
     });
@@ -447,12 +430,12 @@ function renderUI() {
     i = 0;
     for (var title of serverOptions.showData.titles) {
         titles += `
-        <div class="ui left aligned gray message inverted item" data-idx="${title[0]}">
+        <div class="ui left aligned gray message inverted item handle" data-idx="${title[0]}" >
         <div class="right floated content noselect">
             <button class="ui small basic inverted icon button" onclick="removeTitle(${i})"><i class="delete icon"></i></button>
         </div>
         <div class="ui content noselect" onclick="showTitle(${i})">
-             <div class="ui inverted basic icon button handle"><i class="move icon"></i></div>
+             <div class="ui inverted basic icon button" onclick="showTitle(${i})"><i class="play icon"></i></div>
              ${title[0]}
         </div>
         </div>`;

diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
@@ -78,7 +78,7 @@ iframe {
 }
 
 #allSongs .message {
-  margin: 0;
+  margin: 0.5rem;
 }
 
 .ui.inverted.segment .verse {