re-designed options page
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);
|
||||||
Loading…
Reference in New Issue