mirrors/Hyperpipe
1
0
Fork 0
mirror of https://codeberg.org/Hyperpipe/Hyperpipe synced 2025-06-28 13:08:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Preferences Improvements, Error Handling...

Browse source
This commit is contained in:
Shiny Nematoda 2022-05-23 22:23:41 +05:30
parent 592ac8c470
commit abcd8eb7b5
13 changed files with 285 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/components/Prefs.vue
View file

@ -2,8 +2,10 @@
import { ref } from 'vue';
import { getJson } from '../scripts/fetch.js';
import { useStore } from '../scripts/util.js';
const instances = ref([]);
const instances = ref([]),
hls = ref(false);
getJson('https://piped-instances.kavin.rocks').then(i => {
instances.value = i;
@ -11,29 +13,73 @@ getJson('https://piped-instances.kavin.rocks').then(i => {
console.log(i);
});
function bi(val) {
function getBool(val) {
return 'bi ' + (val ? 'bi-check2' : 'bi-x-lg');
}
function get(key) {
return localStorage.getItem(key);
function getStore(key) {
return useStore().getItem(key);
}
function set(key, value) {
function setStore(key, value) {
console.log(key, value);
localStorage.setItem(key, value);
useStore().setItem(key, value);
}
function getTheme() {
return document.body.getAttribute('data-theme') || 'dark';
}
function setTheme(theme) {
document.body.setAttribute('data-theme', theme);
setStore('theme', theme);
}
hls.value = getStore('hls') || true;
</script>
<template>
<h2>Theme</h2>
<select
id="pref-theme"
:value="getTheme()"
@change="setTheme($event.target.value)">
<option value="dark">Dark (Default)</option>
<option value="light">Light</option>
</select>
<h2>Audio Player</h2>
<div class="left">
<input
type="checkbox"
name="pref-chk-hls"
id="pref-chk-hls"
@change="setStore('hls', $event.target.checked)"
v-model="hls" />
<label for="pref-chk-hls">Live Streaming</label>
</div>
<div class="left">
<input
type="number"
name="pref-volume"
id="pref-volume"
max="100"
min="0"
:value="getStore('vol') || 100"
@change="setStore('vol', $event.target.value)" />
<label for="pref-volume">Default Volume</label>
</div>
<h2>Piped Instance</h2>
<select
v-if="instances"
:value="get('pipedapi') || 'pipedapi.kavin.rocks'"
@change="set('pipedapi', $event.target.value)">
:value="getStore('pipedapi') || 'pipedapi.kavin.rocks'"
@change="setStore('pipedapi', $event.target.value)">
<option
v-for="i in instances"
:key="i.name"
:key="i.name.replace('Official', 'Default')"
:value="i.api_url.replace('https://', '').replace('http://', '')">
{{ i.name }}
</option>
@ -53,13 +99,13 @@ function set(key, value) {
<tbody v-for="i in instances">
<tr>
<td>
{{ i.name.replaceAll('Official', 'Default') }}
{{ i.name.replace('Official', 'Default') }}
</td>
<td>
{{ i.locations.replaceAll(',', '') }}
</td>
<td :class="bi(i.cdn)" :data-active="i.cdn"></td>
<td :class="bi(i.up_to_date)" :data-active="i.up_to_date"></td>
<td :class="getBool(i.cdn)" :data-active="i.cdn"></td>
<td :class="getBool(i.up_to_date)" :data-active="i.up_to_date"></td>
<td>
{{ i.version }}
</td>
@ -78,20 +124,55 @@ function set(key, value) {
</template>
<style scoped>
h2 {
margin-top: 1rem;
}
h2,
label,
footer {
text-align: center;
}
select {
select,
input {
font-size: 1rem;
margin: 1rem auto;
padding: 0.5rem 0.75rem;
outline: none;
border: none;
color: var(--color-text);
max-width: 20rem;
border-radius: 0.125rem;
background-color: var(--color-background-mute);
}
input[type='number'] {
width: 4.5rem;
}
input[type='checkbox'] {
appearance: none;
border: 0.25rem solid var(--color-background-mute);
margin: 0;
padding: 0;
width: 1.5rem;
height: 1.5rem;
}
input[type='checkbox']:checked {
background: var(--color-foreground);
}
label {
margin: 0 0.5rem;
display: inline-block;
line-height: 1rem;
font-size: 1rem;
}
label[for*='pref-chk'],
label[for^='pref-chk'] {
vertical-align: 0.35rem;
}
.left {
float: left;
margin: 0 auto;
padding: 1rem;
}
.table-wrap {
overflow-x: auto;
margin-bottom: 2rem;