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

closes #131

Browse source
This commit is contained in:
Shiny Nematoda 2023-07-25 12:06:44 +00:00
parent 0eafbe497c
commit 635591a073
9 changed files with 70 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -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. A Privacy Respecting Frontend for YouTube Music inspired and built with the help of [Piped][piped] and YouTube's InnerTube API.
![](https://img.shields.io/badge/youtube-music-red?style=for-the-badge&logo=youtube-music) ![](https://img.shields.io/badge/youtube-music-red?style=for-the-badge&logo=youtube-music)
![Offical instance](https://img.shields.io/website?down_color=red&down_message=offline&label=status&style=for-the-badge&up_color=cornflowerblue&up_message=online&url=https%3A%2F%2Fhyperpipe.surge.sh) ![Offical instance](https://img.shields.io/website?down_color=red&down_message=offline&label=status&style=for-the-badge&up_color=cornflowerblue&up_message=online&url=https%3A%2F%2Fhyperpipe.surge.sh%2f1x1.png)
</div> </div>

9
index.html
View file

@ -16,6 +16,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="referrer" content="no-referrer" /> <meta name="referrer" content="no-referrer" />
<meta name="robots" content="noindex,nofollow" />
<meta property="og:title" content="Hyperpipe" /> <meta property="og:title" content="Hyperpipe" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -27,10 +28,10 @@
<title>Hyperpipe</title> <title>Hyperpipe</title>
</head> </head>
<body> <body>
<noscript <noscript>
>JavaScript is required for this site to function. Please enable it in JavaScript is required for this site to function. Please enable it in your
your browser or browser extension settings.</noscript browser or browser extension settings.
> </noscript>
<div id="app"></div> <div id="app"></div>

20
package-lock.json generated
View file

@ -20,7 +20,7 @@
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.2.3", "@vitejs/plugin-vue": "^4.2.3",
"prettier": "^3.0.0", "prettier": "^3.0.0",
"vite": "^4.4.6", "vite": "^4.4.7",
"vite-plugin-pwa": "^0.16.4" "vite-plugin-pwa": "^0.16.4"
} }
}, },
@ -2752,9 +2752,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.468", "version": "1.4.470",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.468.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.470.tgz",
"integrity": "sha512-6M1qyhaJOt7rQtNti1lBA0GwclPH+oKCmsra/hkcWs5INLxfXXD/dtdnaKUYQu/pjOBP/8Osoe4mAcNvvzoFag==", "integrity": "sha512-zZM48Lmy2FKWgqyvsX9XK+J6FfP7aCDUFLmgooLJzA7v1agCs/sxSoBpTIwDLhmbhpx9yJIxj2INig/ncjJRqg==",
"dev": true "dev": true
}, },
"node_modules/eme-encryption-scheme-polyfill": { "node_modules/eme-encryption-scheme-polyfill": {
@ -4675,9 +4675,9 @@
} }
}, },
"node_modules/tslib": { "node_modules/tslib": {
"version": "2.6.0", "version": "2.6.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
"integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
}, },
"node_modules/type-fest": { "node_modules/type-fest": {
"version": "0.16.0", "version": "0.16.0",
@ -4882,9 +4882,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.4.6", "version": "4.4.7",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.6.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
"integrity": "sha512-EY6Mm8vJ++S3D4tNAckaZfw3JwG3wa794Vt70M6cNJ6NxT87yhq7EC8Rcap3ahyHdo8AhCmV9PTk+vG1HiYn1A==", "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",

2
package.json
View file

@ -22,7 +22,7 @@
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.2.3", "@vitejs/plugin-vue": "^4.2.3",
"prettier": "^3.0.0", "prettier": "^3.0.0",
"vite": "^4.4.6", "vite": "^4.4.7",
"vite-plugin-pwa": "^0.16.4" "vite-plugin-pwa": "^0.16.4"
} }
} }

4
src/App.vue
View file

@ -112,7 +112,9 @@ onBeforeMount(() => {
if (store.prm == 'true') document.body.classList.add('prm'); if (store.prm == 'true') document.body.classList.add('prm');
/* Set the default locale if set */ /* 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); if (loc) setupLocale(loc);
/* Set the default tab */ /* Set the default tab */

2
src/assets/version.json
View file

@ -1,3 +1,3 @@
{ {
"date": "2023-07-23" "date": "2023-07-25"
} }

53
src/components/AddToPlaylist.vue
View file

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, watch, onMounted, onActivated } from 'vue'; import { ref, watch, computed, onMounted } from 'vue';
import Modal from './Modal.vue'; import Modal from './Modal.vue';
@ -15,32 +15,43 @@ const { t } = useI18n(),
player = usePlayer(), player = usePlayer(),
store = useStore(); store = useStore();
const props = defineProps({
show: Boolean,
song: String,
title: String,
}),
emit = defineEmits(['show']);
const pl = ref(''), const pl = ref(''),
list = ref([]), list = ref([]),
remote = ref([]), remote = ref([]),
plRemote = ref(false); 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() { function Save() {
if (pl.value) { if (pl.value) {
if (plRemote.value == true && store.auth) { if (plRemote.value == true && store.auth) {
useAuthAddToPlaylist(pl.value, data.state.url); useAuthAddToPlaylist(pl.value, url());
} else if (plRemote.value == false) { } else if (plRemote.value == false) {
useUpdatePlaylist( useUpdatePlaylist(pl.value, { url: url(), title: title() }, e => {
pl.value, if (e === true) console.log('Added Song');
{ });
url: data.state.url,
title: data.state.title,
},
e => {
if (e === true) console.log('Added Song');
},
);
} }
} }
} }
function List() { function List() {
player.state.add = true; show.is = true;
useListPlaylists(res => { useListPlaylists(res => {
list.value = res; list.value = res;
}); });
@ -50,9 +61,13 @@ function List() {
} }
watch( watch(
() => player.state.add, () => (props.song ? false : player.state.add),
e => e == true && List(), e => e === true && List(),
); );
onMounted(() => {
props.song && List();
});
</script> </script>
<template> <template>
@ -60,11 +75,11 @@ watch(
<Transition name="fade"> <Transition name="fade">
<Modal <Modal
n="2" n="2"
:display="player.state.add" :display="show.is"
:title="t('playlist.select')" :title="t('playlist.select')"
@show=" @show="
e => { e => {
player.state.add = e; show.is = e;
} }
"> ">
<template #content> <template #content>
@ -94,7 +109,7 @@ watch(
</div> </div>
</template> </template>
<template #buttons> <template #buttons>
<button aria-label="Cancel" @click="player.state.add = false"> <button aria-label="Cancel" @click="show.is = false">
{{ t('action.cancel') }} {{ t('action.cancel') }}
</button> </button>
@ -102,7 +117,7 @@ watch(
aria-label="Add Song" aria-label="Add Song"
@click=" @click="
Save(); Save();
player.state.add = false; show.is = false;
"> ">
{{ t('action.add') }} {{ t('action.add') }}
</button> </button>

18
src/components/SongItem.vue
View file

@ -1,6 +1,8 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import AddToPlaylist from '@/components/AddToPlaylist.vue';
import { getJsonAuth } from '@/scripts/fetch.js'; import { getJsonAuth } from '@/scripts/fetch.js';
import { useRand } from '@/scripts/colors.js'; import { useRand } from '@/scripts/colors.js';
import { useStore, useShare } from '@/scripts/util.js'; import { useStore, useShare } from '@/scripts/util.js';
@ -28,12 +30,11 @@ const props = defineProps({
}), }),
emit = defineEmits(['open-song', 'nxt-song', 'remove']); emit = defineEmits(['open-song', 'nxt-song', 'remove']);
const show = ref(false); const show = ref(false),
showPl = ref(false);
const openSong = el => { const openSong = el => {
if (!el.classList.contains('ign')) { if (!el.classList.contains('ign')) emit('open-song', props.play);
emit('open-song', props.play);
}
}, },
addSong = () => { addSong = () => {
data.state.urls.push({ data.state.urls.push({
@ -101,6 +102,12 @@ onMounted(() => {
}); });
</script> </script>
<template> <template>
<AddToPlaylist
v-if="showPl"
:song="play"
:title="title"
@show="e => (showPl = e)" />
<div class="song card flex pop" @click="openSong($event.target)"> <div class="song card flex pop" @click="openSong($event.target)">
<img class="pop-2 bg-img song-bg" loading="lazy" :src="art" alt /> <img class="pop-2 bg-img song-bg" loading="lazy" :src="art" alt />
@ -127,6 +134,9 @@ onMounted(() => {
<span <span
class="bi bi-chevron-bar-right clickable ign" class="bi bi-chevron-bar-right clickable ign"
@click="appendSong"></span> @click="appendSong"></span>
<span
class="bi bi-collection clickable ign"
@click="showPl = true"></span>
<span <span
class="bi bi-broadcast clickable ign" class="bi bi-broadcast clickable ign"
@click="$emit('nxt-song')"></span> @click="$emit('nxt-song')"></span>

4
src/stores/misc.js
View file

@ -121,9 +121,7 @@ export const useNav = defineStore('nav', () => {
export const useI18n = defineStore('i18n', () => { export const useI18n = defineStore('i18n', () => {
const locale = ref('en'), const locale = ref('en'),
map = ref({ map = ref({ en });
en: en,
});
function t(path) { function t(path) {
const msgs = map.value[locale.value], const msgs = map.value[locale.value],