mirror of
https://codeberg.org/Hyperpipe/Hyperpipe
synced 2025-06-27 04:48:00 +02:00
closes #131
This commit is contained in:
Shiny Nematoda
parent
0eafbe497c
commit
635591a073
9 changed files with 70 additions and 44 deletions
|
|
@ -7,7 +7,7 @@
|
|||
A Privacy Respecting Frontend for YouTube Music inspired and built with the help of [Piped][piped] and YouTube's InnerTube API.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
|
||||
<meta property="og:title" content="Hyperpipe" />
|
||||
<meta property="og:type" content="website" />
|
||||
|
|
@ -27,10 +28,10 @@
|
|||
<title>Hyperpipe</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript
|
||||
>JavaScript is required for this site to function. Please enable it in
|
||||
your browser or browser extension settings.</noscript
|
||||
>
|
||||
<noscript>
|
||||
JavaScript is required for this site to function. Please enable it in your
|
||||
browser or browser extension settings.
|
||||
</noscript>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
|
|
|
|||
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -20,7 +20,7 @@
|
|||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"prettier": "^3.0.0",
|
||||
"vite": "^4.4.6",
|
||||
"vite": "^4.4.7",
|
||||
"vite-plugin-pwa": "^0.16.4"
|
||||
}
|
||||
},
|
||||
|
|
@ -2752,9 +2752,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.468",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.468.tgz",
|
||||
"integrity": "sha512-6M1qyhaJOt7rQtNti1lBA0GwclPH+oKCmsra/hkcWs5INLxfXXD/dtdnaKUYQu/pjOBP/8Osoe4mAcNvvzoFag==",
|
||||
"version": "1.4.470",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.470.tgz",
|
||||
"integrity": "sha512-zZM48Lmy2FKWgqyvsX9XK+J6FfP7aCDUFLmgooLJzA7v1agCs/sxSoBpTIwDLhmbhpx9yJIxj2INig/ncjJRqg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eme-encryption-scheme-polyfill": {
|
||||
|
|
@ -4675,9 +4675,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
|
||||
"integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
|
||||
"integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
|
||||
},
|
||||
"node_modules/type-fest": {
|
||||
"version": "0.16.0",
|
||||
|
|
@ -4882,9 +4882,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.4.6",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.6.tgz",
|
||||
"integrity": "sha512-EY6Mm8vJ++S3D4tNAckaZfw3JwG3wa794Vt70M6cNJ6NxT87yhq7EC8Rcap3ahyHdo8AhCmV9PTk+vG1HiYn1A==",
|
||||
"version": "4.4.7",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
|
||||
"integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.18.10",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"prettier": "^3.0.0",
|
||||
"vite": "^4.4.6",
|
||||
"vite": "^4.4.7",
|
||||
"vite-plugin-pwa": "^0.16.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,7 +112,9 @@ onBeforeMount(() => {
|
|||
if (store.prm == 'true') document.body.classList.add('prm');
|
||||
|
||||
/* Set the default locale if set */
|
||||
const loc = store.locale || (navigator.language.startsWith('en') ? null : navigator.language)
|
||||
const loc =
|
||||
store.locale ||
|
||||
(navigator.language.startsWith('en') ? null : navigator.language);
|
||||
if (loc) setupLocale(loc);
|
||||
|
||||
/* Set the default tab */
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"date": "2023-07-23"
|
||||
"date": "2023-07-25"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, watch, onMounted, onActivated } from 'vue';
|
||||
import { ref, watch, computed, onMounted } from 'vue';
|
||||
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
|
|
@ -15,32 +15,43 @@ const { t } = useI18n(),
|
|||
player = usePlayer(),
|
||||
store = useStore();
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
song: String,
|
||||
title: String,
|
||||
}),
|
||||
emit = defineEmits(['show']);
|
||||
|
||||
const pl = ref(''),
|
||||
list = ref([]),
|
||||
remote = ref([]),
|
||||
plRemote = ref(false);
|
||||
|
||||
const url = () => props.song || data.state.url,
|
||||
title = () => props.title || data.state.title,
|
||||
show = {
|
||||
get is() {
|
||||
return props.song ? true : player.state.add;
|
||||
},
|
||||
set is(e) {
|
||||
props.song ? emit('show', e) : (player.state.add = e);
|
||||
},
|
||||
};
|
||||
|
||||
function Save() {
|
||||
if (pl.value) {
|
||||
if (plRemote.value == true && store.auth) {
|
||||
useAuthAddToPlaylist(pl.value, data.state.url);
|
||||
useAuthAddToPlaylist(pl.value, url());
|
||||
} else if (plRemote.value == false) {
|
||||
useUpdatePlaylist(
|
||||
pl.value,
|
||||
{
|
||||
url: data.state.url,
|
||||
title: data.state.title,
|
||||
},
|
||||
e => {
|
||||
useUpdatePlaylist(pl.value, { url: url(), title: title() }, e => {
|
||||
if (e === true) console.log('Added Song');
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function List() {
|
||||
player.state.add = true;
|
||||
show.is = true;
|
||||
useListPlaylists(res => {
|
||||
list.value = res;
|
||||
});
|
||||
|
|
@ -50,9 +61,13 @@ function List() {
|
|||
}
|
||||
|
||||
watch(
|
||||
() => player.state.add,
|
||||
e => e == true && List(),
|
||||
() => (props.song ? false : player.state.add),
|
||||
e => e === true && List(),
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
props.song && List();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -60,11 +75,11 @@ watch(
|
|||
<Transition name="fade">
|
||||
<Modal
|
||||
n="2"
|
||||
:display="player.state.add"
|
||||
:display="show.is"
|
||||
:title="t('playlist.select')"
|
||||
@show="
|
||||
e => {
|
||||
player.state.add = e;
|
||||
show.is = e;
|
||||
}
|
||||
">
|
||||
<template #content>
|
||||
|
|
@ -94,7 +109,7 @@ watch(
|
|||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<button aria-label="Cancel" @click="player.state.add = false">
|
||||
<button aria-label="Cancel" @click="show.is = false">
|
||||
{{ t('action.cancel') }}
|
||||
</button>
|
||||
|
||||
|
|
@ -102,7 +117,7 @@ watch(
|
|||
aria-label="Add Song"
|
||||
@click="
|
||||
Save();
|
||||
player.state.add = false;
|
||||
show.is = false;
|
||||
">
|
||||
{{ t('action.add') }}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
import AddToPlaylist from '@/components/AddToPlaylist.vue';
|
||||
|
||||
import { getJsonAuth } from '@/scripts/fetch.js';
|
||||
import { useRand } from '@/scripts/colors.js';
|
||||
import { useStore, useShare } from '@/scripts/util.js';
|
||||
|
|
@ -28,12 +30,11 @@ const props = defineProps({
|
|||
}),
|
||||
emit = defineEmits(['open-song', 'nxt-song', 'remove']);
|
||||
|
||||
const show = ref(false);
|
||||
const show = ref(false),
|
||||
showPl = ref(false);
|
||||
|
||||
const openSong = el => {
|
||||
if (!el.classList.contains('ign')) {
|
||||
emit('open-song', props.play);
|
||||
}
|
||||
if (!el.classList.contains('ign')) emit('open-song', props.play);
|
||||
},
|
||||
addSong = () => {
|
||||
data.state.urls.push({
|
||||
|
|
@ -101,6 +102,12 @@ onMounted(() => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<AddToPlaylist
|
||||
v-if="showPl"
|
||||
:song="play"
|
||||
:title="title"
|
||||
@show="e => (showPl = e)" />
|
||||
|
||||
<div class="song card flex pop" @click="openSong($event.target)">
|
||||
<img class="pop-2 bg-img song-bg" loading="lazy" :src="art" alt />
|
||||
|
||||
|
|
@ -127,6 +134,9 @@ onMounted(() => {
|
|||
<span
|
||||
class="bi bi-chevron-bar-right clickable ign"
|
||||
@click="appendSong"></span>
|
||||
<span
|
||||
class="bi bi-collection clickable ign"
|
||||
@click="showPl = true"></span>
|
||||
<span
|
||||
class="bi bi-broadcast clickable ign"
|
||||
@click="$emit('nxt-song')"></span>
|
||||
|
|
|
|||
|
|
@ -121,9 +121,7 @@ export const useNav = defineStore('nav', () => {
|
|||
|
||||
export const useI18n = defineStore('i18n', () => {
|
||||
const locale = ref('en'),
|
||||
map = ref({
|
||||
en: en,
|
||||
});
|
||||
map = ref({ en });
|
||||
|
||||
function t(path) {
|
||||
const msgs = map.value[locale.value],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue