mirror of
https://codeberg.org/Hyperpipe/Hyperpipe
synced 2025-06-28 13:08:01 +02:00
Preferences Improvements, Error Handling...
This commit is contained in:
Shiny Nematoda
parent
592ac8c470
commit
abcd8eb7b5
13 changed files with 285 additions and 133 deletions
|
|
@ -9,11 +9,14 @@ const props = defineProps({
|
|||
iniurl: String,
|
||||
}),
|
||||
text = ref(''),
|
||||
source = ref('');
|
||||
source = ref(''),
|
||||
status = ref(false);
|
||||
|
||||
console.log(props);
|
||||
|
||||
function get() {
|
||||
status.value = false;
|
||||
|
||||
if (props.id && props.curl === props.iniurl) {
|
||||
console.log(props.id);
|
||||
|
||||
|
|
@ -21,6 +24,7 @@ function get() {
|
|||
res => {
|
||||
text.value = res.text;
|
||||
source.value = res.source;
|
||||
status.value = true;
|
||||
},
|
||||
);
|
||||
} else if (props.curl) {
|
||||
|
|
@ -28,12 +32,15 @@ function get() {
|
|||
'https://hyperpipeapi.onrender.com/next/' +
|
||||
props.curl.replace('/watch?v=', ''),
|
||||
).then(next => {
|
||||
getJson('https://hyperpipeapi.onrender.com/browse/' + next.lyricsId).then(
|
||||
res => {
|
||||
if (next.lyricsId) {
|
||||
getJson(
|
||||
'https://hyperpipeapi.onrender.com/browse/' + next.lyricsId,
|
||||
).then(res => {
|
||||
text.value = res.text;
|
||||
source.value = res.source;
|
||||
},
|
||||
);
|
||||
status.value = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -50,7 +57,9 @@ watch(
|
|||
|
||||
<template>
|
||||
<div class="ly-modal">
|
||||
<pre>{{ text }}</pre>
|
||||
<pre class="placeholder" :data-loaded="curl ? status : true">{{
|
||||
text
|
||||
}}</pre>
|
||||
<div>{{ source }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -78,6 +87,16 @@ pre {
|
|||
letter-spacing: 0.125rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
pre:empty::before {
|
||||
--ico: '\f3a5';
|
||||
}
|
||||
pre[data-loaded='false']:empty::after {
|
||||
--text: 'Fetching Lyrics...';
|
||||
}
|
||||
pre[data-loaded='true']:empty::after {
|
||||
--text: 'No Lyrics...';
|
||||
}
|
||||
|
||||
div {
|
||||
padding: 1rem;
|
||||
letter-spacing: 0.1rem;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
import { reactive } from 'vue';
|
||||
import SearchBar from '../components/SearchBar.vue';
|
||||
|
||||
defineProps({
|
||||
search: String,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update-page', 'update-search']),
|
||||
page = reactive({
|
||||
home: true,
|
||||
|
|
@ -41,6 +45,7 @@ const Toggle = p => {
|
|||
|
||||
<div class="wrap">
|
||||
<SearchBar
|
||||
:search="search"
|
||||
@update-search="
|
||||
e => {
|
||||
$emit('update-search', e);
|
||||
|
|
|
|||
|
|
@ -42,11 +42,10 @@ defineEmits(['playthis']);
|
|||
overflow-y: auto;
|
||||
}
|
||||
.placeholder:empty:before {
|
||||
--url: url('/bg_playlist.svg');
|
||||
--ico: '\f64d';
|
||||
}
|
||||
.placeholder:empty:after {
|
||||
--text: 'Add Songs to Your Playlist...';
|
||||
padding-top: 2rem;
|
||||
--text: 'Add Songs to Playlist...';
|
||||
}
|
||||
.pl-item {
|
||||
padding: 1rem;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps(['search']);
|
||||
defineProps({
|
||||
search: String,
|
||||
});
|
||||
|
||||
defineEmits(['update-search']);
|
||||
|
||||
const show = ref(false);
|
||||
|
|
@ -14,7 +17,7 @@ const show = ref(false);
|
|||
@mouseenter="show = true"
|
||||
@mouseleave="show = false">
|
||||
<Transition name="fade">
|
||||
<div v-if="show" class="popup">
|
||||
<div v-show="show" class="popup">
|
||||
<input
|
||||
type="text"
|
||||
aria-label="Search Input"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<script setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
import { useStore } from '../scripts/util.js';
|
||||
import { useListPlaylists } from '../scripts/db.js';
|
||||
|
||||
defineProps({
|
||||
|
|
@ -11,16 +14,8 @@ defineProps({
|
|||
lyrics: Boolean,
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'vol',
|
||||
'play',
|
||||
'list',
|
||||
'lyrics',
|
||||
'loop',
|
||||
'save',
|
||||
'change-time',
|
||||
]),
|
||||
vol = ref(1),
|
||||
const emit = defineEmits(['vol', 'play', 'toggle', 'save', 'change-time']),
|
||||
vol = ref(useStore().vol / 100 || 1),
|
||||
showme = reactive({
|
||||
menu: false,
|
||||
pl: false,
|
||||
|
|
@ -81,10 +76,7 @@ function Save() {
|
|||
:class="'bi bi-' + state"
|
||||
@click="$emit('play')"></button>
|
||||
|
||||
<div
|
||||
id="statusbar-progress"
|
||||
class="range-wrap"
|
||||
:style="'--fw:' + time + '%;'">
|
||||
<div id="statusbar-progress" class="range-wrap">
|
||||
<input
|
||||
aria-label="Change Time"
|
||||
:value="time"
|
||||
|
|
@ -122,7 +114,8 @@ function Save() {
|
|||
aria-label="More Controls"
|
||||
@click="
|
||||
showme.menu = !showme.menu;
|
||||
show ?? $emit('list', 'showplaylist');
|
||||
show ? $emit('toggle', 'showplaylist') : '';
|
||||
lyrics ? $emit('toggle', 'showlyrics') : '';
|
||||
"></button>
|
||||
<div id="menu" v-if="showme.menu" class="popup">
|
||||
<button
|
||||
|
|
@ -136,17 +129,17 @@ function Save() {
|
|||
title="Current Playlist"
|
||||
aria-label="Current Playlist"
|
||||
:class="'bi bi-music-note-list ' + show"
|
||||
@click="$emit('list', 'showplaylist')"></button>
|
||||
@click="$emit('toggle', 'showplaylist')"></button>
|
||||
<button
|
||||
id="btn-lyrics"
|
||||
:class="'bi bi-file-music ' + lyrics"
|
||||
@click="$emit('lyrics', 'showlyrics')"></button>
|
||||
@click="$emit('toggle', 'showlyrics')"></button>
|
||||
<button
|
||||
id="loop-btn"
|
||||
title="Loop"
|
||||
aria-label="Loop"
|
||||
:class="'bi bi-infinity ' + loop"
|
||||
@click="$emit('loop', 'loop')"></button>
|
||||
@click="$emit('toggle', 'loop')"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -206,7 +199,8 @@ input[type='range'] {
|
|||
width: var(--h);
|
||||
height: var(--w);
|
||||
appearance: none;
|
||||
-webkit-appearence: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: none;
|
||||
border-radius: 5rem;
|
||||
background: transparent;
|
||||
|
|
@ -217,6 +211,8 @@ input[type='range'] {
|
|||
input[type='range']:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Webkit */
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
|
@ -230,7 +226,7 @@ input[type='range']:hover::-webkit-slider-thumb,
|
|||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-radius: 50%;
|
||||
margin-top: -0.45rem;
|
||||
margin-top: -0.4rem;
|
||||
}
|
||||
input[type='range']::-webkit-slider-runnable-track {
|
||||
height: 100%;
|
||||
|
|
@ -239,6 +235,33 @@ input[type='range']::-webkit-slider-runnable-track {
|
|||
#vol input[type='range']::-webkit-slider-runnable-track {
|
||||
height: 0.1rem;
|
||||
}
|
||||
|
||||
/* Moz */
|
||||
input[type='range']::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
input[type='range']:hover::-moz-range-thumb,
|
||||
#vol input[type='range']::-moz-range-thumb {
|
||||
background-color: var(--color-foreground);
|
||||
opacity: 1;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-radius: 50%;
|
||||
margin-top: -0.45rem;
|
||||
}
|
||||
input[type='range']::-moz-range-track {
|
||||
height: 100%;
|
||||
background-color: var(--color-border);
|
||||
}
|
||||
#vol input[type='range']::-moz-range-track {
|
||||
height: 0.1rem;
|
||||
}
|
||||
|
||||
.range-wrap {
|
||||
--fw: 0%;
|
||||
display: flex;
|
||||
|
|
@ -264,8 +287,16 @@ input[type='range']::-webkit-slider-runnable-track {
|
|||
top: 0;
|
||||
}
|
||||
#statusbar-progress {
|
||||
--fw: v-bind('time + "%"');
|
||||
width: 50vw;
|
||||
min-width: 200px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
#menu {
|
||||
left: initial;
|
||||
right: -0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue