• Minor aesthetic changes

• If no YouTube streams are found, a shortcut to your YouTube dashboard will now appear
This commit is contained in:
nuttylmao
2025-09-15 00:23:57 +10:00
parent c5e9890eb2
commit 24d2342b1e
5 changed files with 44 additions and 18 deletions
+1 -3
View File
@@ -101,14 +101,12 @@ button:disabled {
} }
.icon-button { .icon-button {
margin-left: auto;
width: 1em; width: 1em;
height: 1em; height: 1em;
background: transparent; background: transparent;
border: none; border: none;
font-size: 1.5em; font-size: 1.1em;
font-weight: 100;
padding: 1em; padding: 1em;
border-radius: 50%; border-radius: 50%;
} }
File diff suppressed because one or more lines are too long
+21 -6
View File
@@ -13,11 +13,26 @@
<img src="https://api.iconify.design/material-symbols:edit-square-outline.svg?color=%23ffffff"> Update All <img src="https://api.iconify.design/material-symbols:edit-square-outline.svg?color=%23ffffff"> Update All
</button> </button>
<!-- List of all broadcasts --> <div style="display: flex; flex-direction: column; gap: 0.5em;">
<div id="broadcast-list"> <!-- List of all broadcasts -->
</div> <div id="broadcast-list">
</div>
<label id="youtube-warning" class="setting-attribute"><i>YouTube stream info can only be updated while live</i></label> <!-- YouTube warning -->
<div id="youtube-warning" class="broadcast">
<img class="platform-icon" id="platform-icon" src="icons/platforms/youtube.png"/>
<div class="broadcast-info">
<label class="setting-attribute">
<i>YouTube stream info can only be updated while live</i>
</label>
</div>
<div id="broadcast-buttons">
<button id="broadcast-dashboard-button" class="icon-button" title="Dashboard"><img class="button-icon" src="https://api.iconify.design/gridicons:popout.svg?color=%23ffffff"></button>
</div>
</div>
</div>
<!-- Blur Layer --> <!-- Blur Layer -->
<div id="blur-layer" class="blur"></div> <div id="blur-layer" class="blur"></div>
@@ -137,12 +152,12 @@
<!-- Broadcast Template --> <!-- Broadcast Template -->
<template id="broadcast-template"> <template id="broadcast-template">
<div class="broadcast"> <div class="broadcast">
<img class="platform-icon" id="platform-icon" src="icons/platforms/twitch.png"/> <img class="platform-icon" id="platform-icon" src=""/>
<div class="broadcast-info"> <div class="broadcast-info">
<label id="broadcast-title"></label> <label id="broadcast-title"></label>
<label id="broadcast-category" class="setting-description"></label> <label id="broadcast-category" class="setting-description"></label>
<label id="kick-warning" class="setting-attribute"><br><i>Current stream info only available when live — Showing last known stream title</i></label> <label id="kick-warning" class="setting-attribute"><br><i>Stream info only available when live — Showing last known stream title</i></label>
</div> </div>
<div id="broadcast-buttons"> <div id="broadcast-buttons">
+17 -2
View File
@@ -7,6 +7,7 @@ const sbActionUpdateStreamInfo = '1c58eff0-e98a-4fab-86f0-6f5cee1d3ab3';
const sbActionOpenUrl = '14da1d44-6e29-4582-92c3-2c59388be57e'; const sbActionOpenUrl = '14da1d44-6e29-4582-92c3-2c59388be57e';
let currentBroadcastId = ''; let currentBroadcastId = '';
let runningActionId = '';
/////////////////// ///////////////////
@@ -32,6 +33,7 @@ window.addEventListener("message", (event) => {
}); });
window.parent.sbClient.on('General.Custom', (response) => { window.parent.sbClient.on('General.Custom', (response) => {
console.debug(response.data);
GeneralCustom(response.data); GeneralCustom(response.data);
}) })
@@ -42,6 +44,10 @@ window.parent.sbClient.on('General.Custom', (response) => {
/////////////////////////////// ///////////////////////////////
async function GeneralCustom(data) { async function GeneralCustom(data) {
// Only run if response matches the ID of the corresponding FetchBroadcasts() call
if (runningActionId != data.runningActionId)
return;
switch(data.actionId) { switch(data.actionId) {
case sbActionFetchBroadcasts: case sbActionFetchBroadcasts:
{ {
@@ -55,11 +61,19 @@ async function GeneralCustom(data) {
const broadcasterInfo = await window.parent.sbClient.getBroadcaster(); const broadcasterInfo = await window.parent.sbClient.getBroadcaster();
if (broadcasterInfo.platforms.youtube) if (broadcasterInfo.platforms.youtube)
{ {
// Only show the warning if there are 0 monitored broadcasts
const ytBroadcastCount = data.broadcastList.filter(b => b.platform === "youtube").length; const ytBroadcastCount = data.broadcastList.filter(b => b.platform === "youtube").length;
if (ytBroadcastCount <= 0) if (ytBroadcastCount <= 0)
youtubeWarning.style.display = 'inline'; youtubeWarning.style.display = 'flex';
else else
youtubeWarning.style.display = 'none'; youtubeWarning.style.display = 'none';
// Set the URL to the livestreaming dashboard
const broadcastButton = youtubeWarning.querySelector('#broadcast-dashboard-button');
broadcastButton.onclick = function() {
//window.open(data.streamUrl, '_blank');
OpenURL(`https://studio.youtube.com/channel/${broadcasterInfo.platforms.youtube.broadcastUserId}/livestreaming`);
};
} }
else else
youtubeWarning.style.display = 'none'; youtubeWarning.style.display = 'none';
@@ -81,7 +95,8 @@ async function GeneralCustom(data) {
async function FetchBroadcasts() { async function FetchBroadcasts() {
// Fetch from Streamer.bot // Fetch from Streamer.bot
await window.parent.sbClient.doAction({ id: sbActionFetchBroadcasts}); const response = await window.parent.sbClient.doAction({ id: sbActionFetchBroadcasts});
runningActionId = response.args.runningActionId;
} }
async function AddBroadcast(data) { async function AddBroadcast(data) {
+4 -6
View File
@@ -5,16 +5,16 @@ body {
margin: 1em; margin: 1em;
} }
button {
gap: 0.5em;
}
#broadcast-list { #broadcast-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0.5em;
} }
button {
gap: 0.5em;
}
.broadcast { .broadcast {
background-color: var(--dialog-background); background-color: var(--dialog-background);
border: 1px solid #40404080; border: 1px solid #40404080;
@@ -36,7 +36,6 @@ button {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
/* gap: 1em; */
margin-left: auto; margin-left: auto;
} }
@@ -74,5 +73,4 @@ button {
#youtube-warning { #youtube-warning {
display: none; display: none;
text-align: center;
} }