diff --git a/base/favicon.ico b/base/favicon.ico new file mode 100644 index 0000000..b7dabe4 Binary files /dev/null and b/base/favicon.ico differ diff --git a/base/options/options.css b/base/options/options.css new file mode 100644 index 0000000..1041cf4 --- /dev/null +++ b/base/options/options.css @@ -0,0 +1,56 @@ +body { + color: #ffffff; + font-family: 'Courier New', monospace; +} + +.stv-blurimagemask { + opacity: 0.5; +} + +.stv-blurimagemask > 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