From acda89122e48205f4564a5eff96c20a0da18de8f Mon Sep 17 00:00:00 2001 From: and94x Date: Mon, 15 Aug 2022 11:06:56 +0200 Subject: [PATCH] re-designed options page --- base/favicon.ico | Bin 0 -> 15406 bytes base/options/options.css | 56 ++++++++++++++++++++ base/options/options.html | 48 ++++++++++++----- base/options/options.js | 60 +++++++++++++++------- out/artifacts/chrome/options/options.html | 46 +++++++++++++---- out/artifacts/chrome/options/options.js | 50 +++++++++++++----- 6 files changed, 204 insertions(+), 56 deletions(-) create mode 100644 base/favicon.ico create mode 100644 base/options/options.css diff --git a/base/favicon.ico b/base/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..b7dabe4056848f03fe85e10f6745b0f6a2fdfda5 GIT binary patch literal 15406 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 img { + filter: blur(2px); + -webkit-filter: blur(2px); + -moz-filter: blur(2px); + -o-filter: blur(2px); + -ms-filter: blur(2px); +} + +.stv-playlist { + overflow: scroll hidden; + -ms-overflow-style: none; + scrollbar-width: none; + flex-flow: row; +} + +.stv-main-grid { + display: grid; + grid-template-areas: + "player player clients" + "player player clients" + "playlist playlist clients"; +} + +.stv-main-grid > .stv-player-grid { + min-height: 721px; + min-width: 1422px; + padding-left: 128px; + margin-bottom: 40px; + grid-area: player; +} + +.stv-main-grid > .stv-clients-grid { + padding-right: 20px; + text-align: end; + grid-area: clients; +} + +.stv-main-grid > .stv-playlist-grid { + padding-left: 128px; + min-width: 1422px; + grid-area: playlist; +} + +#playlist > div > div.card-img-overlay.p-2 > h5 > a { + color: white; + text-decoration: none; +} \ No newline at end of file diff --git a/base/options/options.html b/base/options/options.html index bf4fdab..034d8dc 100644 --- a/base/options/options.html +++ b/base/options/options.html @@ -1,20 +1,44 @@ - + Options for StammTV Chrome Extension + + + - -
- - -
+ +
+

StammTV Extension Settings StammTV Logo

+ +
+
+ +
+ + + Enter the StammTV Base URL, beginning with http:// or https:// + +
-
- +
+
+ +
+ + + Enter the StammTV WSS URL, beginning with wss:// + +
+
+
+ +
+
diff --git a/base/options/options.js b/base/options/options.js index 7ef8389..4c6f936 100644 --- a/base/options/options.js +++ b/base/options/options.js @@ -1,32 +1,54 @@ +const stammTVBaseUrl = document.getElementById('stammtv-base-url'); +const stammTVWSSUrl = document.getElementById('stammtv-wss-url'); +const saveButton = document.getElementById('save'); + // Saves options to chrome.storage function save_options() { - var stammTVBaseUrl = document.getElementById('stammtv-base-url').value;; - var stammTVWSSUrl = document.getElementById('stammtv-wss-url').value;; - chrome.storage.local.set({ - baseURL: stammTVBaseUrl, - wssURL: stammTVWSSUrl - }, function () { - // Update status to let user know options were saved. - var status = document.getElementById('status'); - status.textContent = 'Saved.'; - status.style.color = '00FF00'; - setTimeout(function () { - status.textContent = ''; - }, 1500); - }); + let valid = true; + if (stammTVBaseUrl.value.startsWith('http')) { + stammTVBaseUrl.classList.add('is-valid'); + valid = valid && true; + } else { + stammTVBaseUrl.classList.add('is-invalid'); + valid = false; + } + + if (stammTVWSSUrl.value.startsWith('wss://')) { + stammTVWSSUrl.classList.add('is-valid'); + valid = valid && true; + } else { + stammTVWSSUrl.classList.add('is-invalid'); + valid = false; + } + + if(valid) { + chrome.storage.local.set({ + baseURL: stammTVBaseUrl.value, + wssURL: stammTVWSSUrl.value + }, function () { + // Update form controls to let user know options were saved. + saveButton.classList.replace('btn-primary', 'btn-success'); + saveButton.classList.replace('btn-danger', 'btn-success'); + saveButton.textContent = '... saved!'; + }); + } else { + saveButton.classList.replace('btn-primary', 'btn-danger'); + saveButton.classList.replace('btn-success', 'btn-danger'); + saveButton.textContent = '... failed to save!'; + } } // Restores select box and checkbox state using the preferences // stored in chrome.storage. -function restore_options() { +function load_options() { chrome.storage.local.get({ baseURL: 'Please fill in.', wssURL: 'Please fill in.' }, function (items) { - document.getElementById('stammtv-base-url').value = items.baseURL; - document.getElementById('stammtv-wss-url').value = items.wssURL; + stammTVBaseUrl.value = items.baseURL; + stammTVWSSUrl.value = items.wssURL; }); } -document.addEventListener('DOMContentLoaded', restore_options); -document.getElementById('save').addEventListener('click', save_options); \ No newline at end of file +document.addEventListener('DOMContentLoaded', load_options); +saveButton.addEventListener('click', save_options); \ No newline at end of file diff --git a/out/artifacts/chrome/options/options.html b/out/artifacts/chrome/options/options.html index bf4fdab..6e70d54 100644 --- a/out/artifacts/chrome/options/options.html +++ b/out/artifacts/chrome/options/options.html @@ -2,19 +2,43 @@ Options for StammTV Chrome Extension + + + - -
- - -
+ +
+

StammTV Extension Settings

+ +
+
+ +
+ + + Enter the StammTV Base URL, beginning with http:// or https:// + +
-
- +
+
+ +
+ + + Enter the StammTV WSS URL, beginning with wss:// + +
+
+
+ +
+
diff --git a/out/artifacts/chrome/options/options.js b/out/artifacts/chrome/options/options.js index 7ef8389..1e1b0f8 100644 --- a/out/artifacts/chrome/options/options.js +++ b/out/artifacts/chrome/options/options.js @@ -1,19 +1,41 @@ // Saves options to chrome.storage function save_options() { - var stammTVBaseUrl = document.getElementById('stammtv-base-url').value;; - var stammTVWSSUrl = document.getElementById('stammtv-wss-url').value;; - chrome.storage.local.set({ - baseURL: stammTVBaseUrl, - wssURL: stammTVWSSUrl - }, function () { - // Update status to let user know options were saved. - var status = document.getElementById('status'); - status.textContent = 'Saved.'; - status.style.color = '00FF00'; - setTimeout(function () { - status.textContent = ''; - }, 1500); - }); + let stammTVBaseUrl = document.getElementById('stammtv-base-url'); + let stammTVWSSUrl = document.getElementById('stammtv-wss-url'); + let saveButton = document.getElementById('save'); + + let valid = true; + if (stammTVBaseUrl.value.startsWith('http')) { + stammTVBaseUrl.classList.add('is-valid'); + valid = valid && true; + } else { + stammTVBaseUrl.classList.add('is-invalid'); + valid = false; + } + + if (stammTVWSSUrl.value.startsWith('wss://')) { + stammTVWSSUrl.classList.add('is-valid'); + valid = valid && true; + } else { + stammTVWSSUrl.classList.add('is-invalid'); + valid = false; + } + + if(valid) { + chrome.storage.local.set({ + baseURL: stammTVBaseUrl.value, + wssURL: stammTVWSSUrl.value + }, function () { + // Update form controls to let user know options were saved. + saveButton.classList.replace('btn-primary', 'btn-success'); + saveButton.classList.replace('btn-danger', 'btn-success'); + saveButton.textContent = '... saved!'; + }); + } else { + saveButton.classList.replace('btn-primary', 'btn-danger'); + saveButton.classList.replace('btn-success', 'btn-danger'); + saveButton.textContent = '... failed to save!'; + } } // Restores select box and checkbox state using the preferences