From 10b482ac9ad8c565e4f8a0e3ef79831d4113fc45 Mon Sep 17 00:00:00 2001 From: Reaby Date: Thu, 4 Feb 2021 17:07:17 +0200 Subject: [PATCH] move obs scenes to a list view... --- LICENSE | 2 +- README.md | 6 +- bin/websocket.js | 4 +- package.json | 2 +- public/javascripts/admin.js | 57 ++++----- public/stylesheets/styles.css | 2 +- views/admin.twig | 217 +++++++++------------------------- 7 files changed, 86 insertions(+), 204 deletions(-) diff --git a/LICENSE b/LICENSE index 665c323..0d11ddc 100644 --- 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 index d3c4b03..ddaeec0 100644 --- 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 index cf0f49e..cbd6a30 100644 --- 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 index 4c7fc40..3e77ddc 100644 --- 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 index 38dc19c..832c083 100644 --- 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 += ` - - `; +
+
+ ${scene.name} +
+
`; 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 += ` -
- -
-
${elem}
-
-
`; - } - $("#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 += ` -
+
-
-
+
+
${song.title} (${song.artist})
`; @@ -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 += ` -
+
-
+
${title[0]}
`; diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css index 219fd97..13ecef6 100644 --- 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 { diff --git a/views/admin.twig b/views/admin.twig index 1bfac75..000ec54 100644 --- a/views/admin.twig +++ b/views/admin.twig @@ -1,8 +1,8 @@ {% extends 'layout/layout.twig' %} {% block head %} - - + + {% endblock %} @@ -25,64 +25,6 @@
- - -
@@ -110,23 +52,11 @@ -
- - - -
-

+

- -
- - +
+
- -
- -
- -
-
- -
- - - -
- -
-
-
- - - -
+ +