re-designed options page

master
and94x 2 years ago
parent 7fce2733dd
commit acda89122e

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

@ -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;
}

@ -1,20 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="de">
<head> <head>
<title>Options for StammTV Chrome Extension</title> <title>Options for StammTV Chrome Extension</title>
<link rel="icon" type="image/x-icon" href="../stammtv-bitty.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<link rel="stylesheet" href="options.css"/>
</head> </head>
<body> <body class="bg-dark" style="width: 80%;margin: 0 auto ">
<div style="display: grid;"> <div style="display: grid">
<label> <h1 class="mb-5 text-center">StammTV Extension Settings <img src="../stammtv-large.png" alt="StammTV Logo"/></h1>
StammTV Base URL: <input type="url" id="stammtv-base-url" style="min-width: 20rem;">
</label> <form>
<label> <div class="form-group row mb-3">
StammTV WSS URL: <input type="url" id="stammtv-wss-url" style="min-width: 20rem;"> <label for="stammtv-base-url" class="col-sm-2 col-form-label">StammTV Base URL</label>
</label> <div class="col-sm-10">
</div> <input id="stammtv-base-url" type="url" class="form-control dark"
placeholder="https://..." aria-label="Add" required>
<small class="form-text text-white" id="stammtv-base-url-small">
Enter the StammTV Base URL, beginning with http:// or https://
</small>
</div>
<div id="status" style="color: #259025"></div> </div>
<button id="save">Save</button> <div class="form-group row mb-3">
<label for="stammtv-wss-url" class="col-sm-2 col-form-label">StammTV WSS URL</label>
<div class="col-sm-10">
<input id="stammtv-wss-url" type="url" class="form-control dark"
placeholder="wss://..." aria-label="Add" required>
<small class="form-text text-white" id="stammtv-wss-url-small">
Enter the StammTV WSS URL, beginning with wss://
</small>
</div>
</div>
<div id="status" style="color: #259025"></div>
<button class="btn btn-primary" type="button" id="save" title="Submit and save">
Save
</button>
</form>
</div>
<script src="options.js"></script> <script src="options.js"></script>
</body> </body>

@ -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 // Saves options to chrome.storage
function save_options() { function save_options() {
var stammTVBaseUrl = document.getElementById('stammtv-base-url').value;; let valid = true;
var stammTVWSSUrl = document.getElementById('stammtv-wss-url').value;; 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({ chrome.storage.local.set({
baseURL: stammTVBaseUrl, baseURL: stammTVBaseUrl.value,
wssURL: stammTVWSSUrl wssURL: stammTVWSSUrl.value
}, function () { }, function () {
// Update status to let user know options were saved. // Update form controls to let user know options were saved.
var status = document.getElementById('status'); saveButton.classList.replace('btn-primary', 'btn-success');
status.textContent = 'Saved.'; saveButton.classList.replace('btn-danger', 'btn-success');
status.style.color = '00FF00'; saveButton.textContent = '... saved!';
setTimeout(function () {
status.textContent = '';
}, 1500);
}); });
} 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 // Restores select box and checkbox state using the preferences
// stored in chrome.storage. // stored in chrome.storage.
function restore_options() { function load_options() {
chrome.storage.local.get({ chrome.storage.local.get({
baseURL: 'Please fill in.', baseURL: 'Please fill in.',
wssURL: 'Please fill in.' wssURL: 'Please fill in.'
}, function (items) { }, function (items) {
document.getElementById('stammtv-base-url').value = items.baseURL; stammTVBaseUrl.value = items.baseURL;
document.getElementById('stammtv-wss-url').value = items.wssURL; stammTVWSSUrl.value = items.wssURL;
}); });
} }
document.addEventListener('DOMContentLoaded', restore_options); document.addEventListener('DOMContentLoaded', load_options);
document.getElementById('save').addEventListener('click', save_options); saveButton.addEventListener('click', save_options);

@ -2,19 +2,43 @@
<html> <html>
<head> <head>
<title>Options for StammTV Chrome Extension</title> <title>Options for StammTV Chrome Extension</title>
<link rel="icon" type="image/x-icon" href="../stammtv-bitty.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<link rel="stylesheet" href="options.css"/>
</head> </head>
<body> <body class="bg-dark" style="width: 80%;margin: 0 auto ">
<div style="display: grid;"> <div style="display: grid">
<label> <h1 class="mb-5 text-center">StammTV Extension Settings <img src="../stammtv-large.png"/></h1>
StammTV Base URL: <input type="url" id="stammtv-base-url" style="min-width: 20rem;">
</label> <form>
<label> <div class="form-group row mb-3">
StammTV WSS URL: <input type="url" id="stammtv-wss-url" style="min-width: 20rem;"> <label for="stammtv-base-url" class="col-sm-2 col-form-label">StammTV Base URL</label>
</label> <div class="col-sm-10">
</div> <input id="stammtv-base-url" type="url" class="form-control dark"
placeholder="https://..." aria-label="Add" required>
<small class="form-text text-white" id="stammtv-base-url-small">
Enter the StammTV Base URL, beginning with http:// or https://
</small>
</div>
<div id="status" style="color: #259025"></div> </div>
<button id="save">Save</button> <div class="form-group row mb-3">
<label for="stammtv-wss-url" class="col-sm-2 col-form-label">StammTV WSS URL</label>
<div class="col-sm-10">
<input id="stammtv-wss-url" type="url" class="form-control dark"
placeholder="wss://..." aria-label="Add" required>
<small class="form-text text-white" id="stammtv-wss-url-small">
Enter the StammTV WSS URL, beginning with wss://
</small>
</div>
</div>
<div id="status" style="color: #259025"></div>
<button class="btn btn-primary" type="button" id="save" title="Submit and save">
Save
</button>
</form>
</div>
<script src="options.js"></script> <script src="options.js"></script>
</body> </body>

@ -1,19 +1,41 @@
// Saves options to chrome.storage // Saves options to chrome.storage
function save_options() { function save_options() {
var stammTVBaseUrl = document.getElementById('stammtv-base-url').value;; let stammTVBaseUrl = document.getElementById('stammtv-base-url');
var stammTVWSSUrl = document.getElementById('stammtv-wss-url').value;; 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({ chrome.storage.local.set({
baseURL: stammTVBaseUrl, baseURL: stammTVBaseUrl.value,
wssURL: stammTVWSSUrl wssURL: stammTVWSSUrl.value
}, function () { }, function () {
// Update status to let user know options were saved. // Update form controls to let user know options were saved.
var status = document.getElementById('status'); saveButton.classList.replace('btn-primary', 'btn-success');
status.textContent = 'Saved.'; saveButton.classList.replace('btn-danger', 'btn-success');
status.style.color = '00FF00'; saveButton.textContent = '... saved!';
setTimeout(function () {
status.textContent = '';
}, 1500);
}); });
} 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 // Restores select box and checkbox state using the preferences

Loading…
Cancel
Save