mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-19 04:00:59 -04:00
Beta ready
This commit is contained in:
nuttylmao
@@ -106,10 +106,17 @@ async function AddBroadcast(data) {
|
||||
const existingDiv = broadcastList.querySelector(`#${data.id}`);
|
||||
|
||||
// Create a new instance of the template
|
||||
const instance = existingDiv ? existingDiv : template.content.cloneNode(true);
|
||||
let instance;
|
||||
|
||||
if (existingDiv)
|
||||
instance = existingDiv;
|
||||
else {
|
||||
instance = template.content.firstElementChild.cloneNode(true);
|
||||
instance.id = data.id;
|
||||
broadcastList.appendChild(instance);
|
||||
}
|
||||
|
||||
// Get divs
|
||||
const broadcastEl = instance.querySelector('.broadcast');
|
||||
const platformIconEl = instance.querySelector('#platform-icon');
|
||||
const titleEl = instance.querySelector('#broadcast-title');
|
||||
const categoryEl = instance.querySelector('#broadcast-category');
|
||||
@@ -118,21 +125,6 @@ async function AddBroadcast(data) {
|
||||
const dashboardButtonEl = instance.querySelector('#broadcast-dashboard-button');
|
||||
const editButtonEl = instance.querySelector('#broadcast-edit-button');
|
||||
|
||||
// Set properties
|
||||
if (!existingDiv)
|
||||
broadcastEl.id = data.id;
|
||||
|
||||
// Set the platform icon
|
||||
platformIconEl.src = `icons/platforms/${data.platform}.png`;
|
||||
|
||||
// Set the stream title
|
||||
if (data.title)
|
||||
titleEl.textContent = data.title;
|
||||
|
||||
// Set the stream category
|
||||
if (data.category)
|
||||
categoryEl.textContent = data.category;
|
||||
|
||||
// Streamer.bot does not provide title/category for Kick, so pull from API
|
||||
if (data.platform == 'kick')
|
||||
{
|
||||
@@ -142,14 +134,14 @@ async function AddBroadcast(data) {
|
||||
// The current title is only provided if the stream if currently live
|
||||
if (response_data.livestream)
|
||||
{
|
||||
titleEl.textContent = response_data.livestream.session_title;
|
||||
categoryEl.textContent = response_data.livestream.categories[0].name;
|
||||
data.title = response_data.livestream.session_title;
|
||||
data.category = response_data.livestream.categories[0].name;
|
||||
kickWarningEl.style.display = 'none';
|
||||
}
|
||||
else if (response_data.previous_livestreams)
|
||||
else if (response_data.previous_livestreams.length > 0)
|
||||
{
|
||||
titleEl.textContent = response_data.previous_livestreams[0].session_title;
|
||||
categoryEl.textContent = response_data.previous_livestreams[0].categories[0].name;
|
||||
data.title = response_data.previous_livestreams[0].session_title;
|
||||
data.category = response_data.previous_livestreams[0].categories[0].name;
|
||||
kickWarningEl.style.display = 'inline';
|
||||
}
|
||||
else
|
||||
@@ -157,6 +149,37 @@ async function AddBroadcast(data) {
|
||||
kickWarningEl.style.display = 'inline';
|
||||
}
|
||||
}
|
||||
|
||||
// Flash green to show that it updated
|
||||
if (titleEl.textContent != data.title || categoryEl.textContent != data.category)
|
||||
{
|
||||
instance.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--confirm-flash');
|
||||
setTimeout(() => {
|
||||
instance.style.backgroundColor = '';
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Set the platform icon
|
||||
platformIconEl.src = `icons/platforms/${data.platform}.png`;
|
||||
|
||||
// Special logo for YouTube shorts
|
||||
if (data.platform == 'youtube') {
|
||||
const targets = ["vertical", "shorts"];
|
||||
|
||||
const isShort = data.tags.some(item =>
|
||||
targets.some(target => item.toLowerCase() === target.toLowerCase())
|
||||
);
|
||||
if (isShort)
|
||||
platformIconEl.src = `icons/platforms/youtube-shorts.png`;
|
||||
}
|
||||
|
||||
// Set the stream title
|
||||
if (data.title)
|
||||
titleEl.textContent = data.title;
|
||||
|
||||
// Set the stream category
|
||||
if (data.category)
|
||||
categoryEl.textContent = data.category;
|
||||
|
||||
streamButtonEl.onclick = function() {
|
||||
//window.open(data.streamUrl, '_blank');
|
||||
@@ -171,29 +194,31 @@ async function AddBroadcast(data) {
|
||||
editButtonEl.onclick = function() {
|
||||
switch (data.platform) {
|
||||
case 'twitch':
|
||||
document.getElementById('update-twitch-title-input').value = titleEl.textContent;
|
||||
document.getElementById('update-twitch-category-input').value = categoryEl.textContent;
|
||||
document.getElementById('twitch-title-input').value = data.title;
|
||||
document.getElementById('twitch-category-input').value = data.category;
|
||||
document.getElementById('twitch-tags-input').value = data.tags.join(", ");
|
||||
ValidateTwitchDialog();
|
||||
updateTwitchDialog.style.display = "flex";
|
||||
break;
|
||||
case 'kick':
|
||||
document.getElementById('update-kick-title-input').value = titleEl.textContent;
|
||||
document.getElementById('update-kick-category-input').value = categoryEl.textContent;
|
||||
document.getElementById('kick-title-input').value = titleEl.textContent;
|
||||
document.getElementById('kick-category-input').value = categoryEl.textContent;
|
||||
ValidateKickDialog();
|
||||
updateKickDialog.style.display = "flex";
|
||||
break;
|
||||
case 'youtube':
|
||||
currentBroadcastId = broadcastEl.id;
|
||||
document.getElementById('update-youtube-title-input').value = data.title;
|
||||
document.getElementById('update-youtube-description-input').value = data.description;
|
||||
document.getElementById('update-youtube-category-input').value = data.category;
|
||||
document.getElementById('update-youtube-privacy-select').value = data.privacy;
|
||||
currentBroadcastId = data.id;
|
||||
document.getElementById('youtube-title-input').value = data.title;
|
||||
document.getElementById('youtube-description-input').value = data.description;
|
||||
document.getElementById('youtube-category-input').value = data.category;
|
||||
document.getElementById('youtube-tags-input').value = data.tags.join(", ");
|
||||
document.getElementById('youtube-privacy-select').value = data.privacy;
|
||||
ValidateYouTubeDialog();
|
||||
updateYouTubeDialog.style.display = "flex";
|
||||
break;
|
||||
}
|
||||
blurLayer.style.display = "block";
|
||||
};
|
||||
|
||||
if (!existingDiv)
|
||||
broadcastList.appendChild(instance);
|
||||
}
|
||||
|
||||
|
||||
@@ -216,8 +241,6 @@ async function OpenURL(url) {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////////
|
||||
// PAGE INTERACTIONS //
|
||||
///////////////////////
|
||||
@@ -254,8 +277,8 @@ async function UpdateAllSubmit() {
|
||||
},
|
||||
args = {
|
||||
platform: 'all',
|
||||
title: document.getElementById('update-all-title-input').value,
|
||||
category: document.getElementById('update-all-category-input').value
|
||||
title: document.getElementById('all-title-input').value,
|
||||
category: document.getElementById('all-category-input').value
|
||||
}
|
||||
);
|
||||
|
||||
@@ -269,9 +292,9 @@ async function UpdateTwitchSubmit() {
|
||||
},
|
||||
args = {
|
||||
platform: 'twitch',
|
||||
title: document.getElementById('update-twitch-title-input').value,
|
||||
category: document.getElementById('update-twitch-category-input').value,
|
||||
tags: document.getElementById('update-twitch-tags-input').value
|
||||
title: document.getElementById('twitch-title-input').value,
|
||||
category: document.getElementById('twitch-category-input').value,
|
||||
tags: document.getElementById('twitch-tags-input').value
|
||||
}
|
||||
);
|
||||
|
||||
@@ -285,8 +308,8 @@ async function UpdateKickSubmit() {
|
||||
},
|
||||
args = {
|
||||
platform: 'kick',
|
||||
title: document.getElementById('update-kick-title-input').value,
|
||||
category: document.getElementById('update-kick-category-input').value
|
||||
title: document.getElementById('kick-title-input').value,
|
||||
category: document.getElementById('kick-category-input').value
|
||||
}
|
||||
);
|
||||
|
||||
@@ -300,11 +323,11 @@ async function UpdateYouTubeSubmit() {
|
||||
},
|
||||
args = {
|
||||
platform: 'youtube',
|
||||
title: document.getElementById('update-youtube-title-input').value,
|
||||
description: document.getElementById('update-youtube-description-input').value,
|
||||
category: document.getElementById('update-youtube-category-input').value,
|
||||
tags: document.getElementById('update-youtube-tags-input').value,
|
||||
privacy: document.getElementById('update-youtube-privacy-select').value,
|
||||
title: document.getElementById('youtube-title-input').value,
|
||||
description: document.getElementById('youtube-description-input').value,
|
||||
category: document.getElementById('youtube-category-input').value,
|
||||
tags: document.getElementById('youtube-tags-input').value,
|
||||
privacy: document.getElementById('youtube-privacy-select').value,
|
||||
broadcastId: currentBroadcastId
|
||||
}
|
||||
);
|
||||
@@ -314,6 +337,204 @@ async function UpdateYouTubeSubmit() {
|
||||
|
||||
|
||||
|
||||
/////////////////////
|
||||
// DATA VALIDATION //
|
||||
/////////////////////
|
||||
|
||||
const GLOBAL_TITLE_MAX = 100;
|
||||
const TWITCH_TITLE_MAX = 140;
|
||||
const TWITCH_TAGS_MAX = 10;
|
||||
const KICK_TITLE_MAX = 100;
|
||||
const YOUTUBE_TITLE_MAX = 100;
|
||||
const YOUTUBE_DESCRIPTION_MAX = 5000;
|
||||
const YOUTUBE_TAGS_MAX = 500;
|
||||
|
||||
const allTitleInput = document.getElementById("all-title-input");
|
||||
const twitchTitleInput = document.getElementById("twitch-title-input");
|
||||
const twitchTagsInput = document.getElementById("twitch-tags-input");
|
||||
const kickTitleInput = document.getElementById("kick-title-input");
|
||||
const youtubeTitleInput = document.getElementById("youtube-title-input");
|
||||
const youtubeDescriptionInput = document.getElementById("youtube-description-input");
|
||||
const youtubeTagsInput = document.getElementById("youtube-tags-input");
|
||||
|
||||
// Function to update char count and handle validation
|
||||
function ValidateUpdateAllDialog() {
|
||||
// Get references to elements
|
||||
const allTitleCharLimit = document.getElementById('all-title-char-limit');
|
||||
const allCharCount = document.getElementById('all-title-char-count');
|
||||
const allTitleCharMax = document.getElementById('all-title-char-max');
|
||||
const allUpdateButton = document.getElementById('all-submit-button');
|
||||
|
||||
// Validate title field
|
||||
const currentLength = allTitleInput.value.length;
|
||||
allCharCount.textContent = currentLength;
|
||||
allTitleCharMax.textContent = GLOBAL_TITLE_MAX;
|
||||
|
||||
if (currentLength > GLOBAL_TITLE_MAX)
|
||||
allTitleCharLimit.style.color = getComputedStyle(document.documentElement).getPropertyValue('--error-text-color');
|
||||
else
|
||||
allTitleCharLimit.style.color = ""; // reset to default
|
||||
|
||||
// Set button interactability (yes, that is a word — look it up)
|
||||
if (currentLength > GLOBAL_TITLE_MAX)
|
||||
allUpdateButton.disabled = true;
|
||||
else
|
||||
allUpdateButton.disabled = false;
|
||||
}
|
||||
|
||||
// Function to update char count and handle validation
|
||||
function ValidateTwitchDialog() {
|
||||
// Get references to elements
|
||||
const twitchTitleCharLimit = document.getElementById('twitch-title-char-limit');
|
||||
const twitchCharCount = document.getElementById('twitch-title-char-count');
|
||||
const twitchTitleCharMax = document.getElementById('twitch-title-char-max');
|
||||
const twitchTagsCharLimit = document.getElementById('twitch-tags-char-limit');
|
||||
const twitchTagsCharCount = document.getElementById('twitch-tags-char-count');
|
||||
const twitchTagsCharMax = document.getElementById('twitch-tags-char-max');
|
||||
const twitchTagsTooLongWarning = document.getElementById('twitch-tags-too-long-warning');
|
||||
const twitchUpdateButton = document.getElementById('twitch-submit-button');
|
||||
|
||||
// Validate title field
|
||||
const currentLength = twitchTitleInput.value.length;
|
||||
twitchCharCount.textContent = currentLength;
|
||||
twitchTitleCharMax.textContent = TWITCH_TITLE_MAX;
|
||||
|
||||
if (currentLength > TWITCH_TITLE_MAX)
|
||||
twitchTitleCharLimit.style.color = getComputedStyle(document.documentElement).getPropertyValue('--error-text-color');
|
||||
else
|
||||
twitchTitleCharLimit.style.color = ""; // reset to default
|
||||
|
||||
// Validate tags field
|
||||
// Split by comma, trim each tag, sum lengths
|
||||
const tagsArray = twitchTagsInput.value
|
||||
.split(',')
|
||||
.map(tag => tag.trim())
|
||||
.filter(tag => tag.length > 0);
|
||||
|
||||
const tagsLength = tagsArray.length;
|
||||
twitchTagsCharCount.textContent = tagsLength;
|
||||
twitchTagsCharMax.textContent = TWITCH_TAGS_MAX;
|
||||
|
||||
if (tagsLength > TWITCH_TAGS_MAX)
|
||||
twitchTagsCharLimit.style.color = getComputedStyle(document.documentElement).getPropertyValue('--error-text-color');
|
||||
else
|
||||
twitchTagsCharLimit.style.color = ""; // reset to default
|
||||
|
||||
// Also check that each tag is under 25 characters
|
||||
const hasLongTag = tagsArray.some(tag => tag.length > 25);
|
||||
if (hasLongTag) {
|
||||
twitchTagsTooLongWarning.style.display = 'inline';
|
||||
twitchTagsCharLimit.style.color = getComputedStyle(document.documentElement).getPropertyValue('--error-text-color');
|
||||
}
|
||||
else {
|
||||
twitchTagsTooLongWarning.style.display = 'none';
|
||||
twitchTagsCharLimit.style.color = ""; // reset to default
|
||||
}
|
||||
|
||||
// Set button interactability (yes, that is a word — look it up)
|
||||
if (currentLength > TWITCH_TITLE_MAX || tagsLength > TWITCH_TAGS_MAX || hasLongTag)
|
||||
twitchUpdateButton.disabled = true;
|
||||
else
|
||||
twitchUpdateButton.disabled = false;
|
||||
}
|
||||
|
||||
// Function to update char count and handle validation
|
||||
function ValidateKickDialog() {
|
||||
// Get references to elements
|
||||
const kickTitleCharLimit = document.getElementById('kick-title-char-limit');
|
||||
const kickCharCount = document.getElementById('kick-title-char-count');
|
||||
const kickTitleCharMax = document.getElementById('kick-title-char-max');
|
||||
const kickUpdateButton = document.getElementById('kick-submit-button');
|
||||
|
||||
// Validate title field
|
||||
const currentLength = kickTitleInput.value.length;
|
||||
kickCharCount.textContent = currentLength;
|
||||
kickTitleCharMax.textContent = KICK_TITLE_MAX;
|
||||
|
||||
if (currentLength > KICK_TITLE_MAX)
|
||||
kickTitleCharLimit.style.color = getComputedStyle(document.documentElement).getPropertyValue('--error-text-color');
|
||||
else
|
||||
kickTitleCharLimit.style.color = ""; // reset to default
|
||||
|
||||
// Set button interactability (yes, that is a word — look it up)
|
||||
if (currentLength > KICK_TITLE_MAX)
|
||||
kickUpdateButton.disabled = true;
|
||||
else
|
||||
kickUpdateButton.disabled = false;
|
||||
}
|
||||
|
||||
function ValidateYouTubeDialog() {
|
||||
// Get references to elements
|
||||
const youtubeTitleCharLimit = document.getElementById('youtube-title-char-limit');
|
||||
const youtubeTitleCharCount = document.getElementById('youtube-title-char-count');
|
||||
const youtubeTitleCharMax = document.getElementById('youtube-title-char-max');
|
||||
const youtubeDescriptionCharLimit = document.getElementById('youtube-description-char-limit');
|
||||
const youtubeDescriptionCharCount = document.getElementById('youtube-description-char-count');
|
||||
const youtubeDescriptionCharMax = document.getElementById('youtube-description-char-max');
|
||||
const youtubeTagsCharLimit = document.getElementById('youtube-tags-char-limit');
|
||||
const youtubeTagsCharCount = document.getElementById('youtube-tags-char-count');
|
||||
const youtubeTagsCharMax = document.getElementById('youtube-tags-char-max');
|
||||
const youtubeUpdateButton = document.getElementById('youtube-submit-button');
|
||||
|
||||
// Validate title field
|
||||
const titleLength = youtubeTitleInput.value.length;
|
||||
youtubeTitleCharCount.textContent = titleLength;
|
||||
youtubeTitleCharMax.textContent = YOUTUBE_TITLE_MAX;
|
||||
|
||||
if (titleLength > YOUTUBE_TITLE_MAX)
|
||||
youtubeTitleCharLimit.style.color = getComputedStyle(document.documentElement).getPropertyValue('--error-text-color');
|
||||
else
|
||||
youtubeTitleCharLimit.style.color = ""; // reset to default
|
||||
|
||||
// Validate description field
|
||||
const descriptionLength = youtubeDescriptionInput.value.length;
|
||||
youtubeDescriptionCharCount.textContent = descriptionLength;
|
||||
youtubeDescriptionCharMax.textContent = YOUTUBE_DESCRIPTION_MAX;
|
||||
|
||||
if (descriptionLength > YOUTUBE_DESCRIPTION_MAX)
|
||||
youtubeDescriptionCharLimit.style.color = getComputedStyle(document.documentElement).getPropertyValue('--error-text-color');
|
||||
else
|
||||
youtubeDescriptionCharLimit.style.color = ""; // reset to default
|
||||
|
||||
// Validate tags field
|
||||
// Split by comma, trim each tag, sum lengths
|
||||
const tagsArray = youtubeTagsInput.value
|
||||
.split(',')
|
||||
.map(tag => tag.trim())
|
||||
.filter(tag => tag.length > 0);
|
||||
|
||||
const tagsLength = tagsArray.reduce((sum, tag) => sum + tag.length, 0) + (tagsArray.length > 0 ? tagsArray.length - 1 : 0);
|
||||
youtubeTagsCharCount.textContent = tagsLength;
|
||||
youtubeTagsCharMax.textContent = YOUTUBE_TAGS_MAX;
|
||||
|
||||
if (tagsLength > YOUTUBE_TAGS_MAX)
|
||||
youtubeTagsCharLimit.style.color = getComputedStyle(document.documentElement).getPropertyValue('--error-text-color');
|
||||
else
|
||||
youtubeTagsCharLimit.style.color = ""; // reset to default
|
||||
|
||||
// Set button interactability (yes, that is a word — look it up)
|
||||
if (titleLength > YOUTUBE_TITLE_MAX || descriptionLength > YOUTUBE_DESCRIPTION_MAX || tagsLength > YOUTUBE_TAGS_MAX)
|
||||
youtubeUpdateButton.disabled = true;
|
||||
else
|
||||
youtubeUpdateButton.disabled = false;
|
||||
}
|
||||
|
||||
// Attach event listener
|
||||
allTitleInput.addEventListener("input", ValidateUpdateAllDialog);
|
||||
twitchTitleInput.addEventListener("input", ValidateTwitchDialog);
|
||||
twitchTagsInput.addEventListener("input", ValidateTwitchDialog);
|
||||
kickTitleInput.addEventListener("input", ValidateKickDialog);
|
||||
youtubeTitleInput.addEventListener("input", ValidateYouTubeDialog);
|
||||
youtubeDescriptionInput.addEventListener("input", ValidateYouTubeDialog);
|
||||
youtubeTagsInput.addEventListener("input", ValidateYouTubeDialog);
|
||||
|
||||
// Initial check (in case the input has prefilled text)
|
||||
ValidateUpdateAllDialog();
|
||||
ValidateTwitchDialog();
|
||||
ValidateKickDialog();
|
||||
ValidateYouTubeDialog();
|
||||
|
||||
|
||||
|
||||
|
||||
////////////////////////////
|
||||
|
||||
Reference in New Issue
Block a user