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>
<html>
<html lang="de">
<head>
<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>
<body>
<div style="display: grid;">
<label>
StammTV Base URL: <input type="url" id="stammtv-base-url" style="min-width: 20rem;">
</label>
<label>
StammTV WSS URL: <input type="url" id="stammtv-wss-url" style="min-width: 20rem;">
</label>
</div>
<body class="bg-dark" style="width: 80%;margin: 0 auto ">
<div style="display: grid">
<h1 class="mb-5 text-center">StammTV Extension Settings <img src="../stammtv-large.png" alt="StammTV Logo"/></h1>
<form>
<div class="form-group row mb-3">
<label for="stammtv-base-url" class="col-sm-2 col-form-label">StammTV Base URL</label>
<div class="col-sm-10">
<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>
<button id="save">Save</button>
</div>
<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>
</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
function save_options() {
var stammTVBaseUrl = document.getElementById('stammtv-base-url').value;;
var stammTVWSSUrl = document.getElementById('stammtv-wss-url').value;;
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,
wssURL: stammTVWSSUrl
baseURL: stammTVBaseUrl.value,
wssURL: stammTVWSSUrl.value
}, 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);
// 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);
document.addEventListener('DOMContentLoaded', load_options);
saveButton.addEventListener('click', save_options);

@ -2,19 +2,43 @@
<html>
<head>
<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>
<body>
<div style="display: grid;">
<label>
StammTV Base URL: <input type="url" id="stammtv-base-url" style="min-width: 20rem;">
</label>
<label>
StammTV WSS URL: <input type="url" id="stammtv-wss-url" style="min-width: 20rem;">
</label>
</div>
<body class="bg-dark" style="width: 80%;margin: 0 auto ">
<div style="display: grid">
<h1 class="mb-5 text-center">StammTV Extension Settings <img src="../stammtv-large.png"/></h1>
<form>
<div class="form-group row mb-3">
<label for="stammtv-base-url" class="col-sm-2 col-form-label">StammTV Base URL</label>
<div class="col-sm-10">
<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>
<button id="save">Save</button>
</div>
<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>
</body>

@ -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;;
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,
wssURL: stammTVWSSUrl
baseURL: stammTVBaseUrl.value,
wssURL: stammTVWSSUrl.value
}, 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);
// 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

Loading…
Cancel
Save