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

Merge branch 'main' into ™

Browse source
This commit is contained in:
HexagonCDN 2023-01-25 09:10:52 +00:00
commit 0f79b7039d
22 changed files with 7588 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -119,7 +119,7 @@ You can reach out to me personally on:
--- ---
*Hyperpipe does not host any content. All content on Hyperpipe is from YouTube Music. YouTube and YouTube Music are trademarks of Google LLC. Hyperpipe is not affiliated with YouTube or YouTube Music.* *All content on Hyperpipe is from YouTube Music. YouTube and YouTube Music are trademarks of Google LLC. Hyperpipe is not affiliated with YouTube or YouTube Music.*
[hypipe]: https://hyperpipe.surge.sh [hypipe]: https://hyperpipe.surge.sh
[piped]: https://piped.kavin.rocks [piped]: https://piped.kavin.rocks

1
index.html
View file

@ -14,7 +14,6 @@
<link rel="dns-prefetch" href="https://hyperpipe-proxy.onrender.com" /> <link rel="dns-prefetch" href="https://hyperpipe-proxy.onrender.com" />
<link rel="dns-prefetch" href="https://piped-instances.kavin.rocks" /> <link rel="dns-prefetch" href="https://piped-instances.kavin.rocks" />
<link rel="manifest" href="/manifest.json" />
<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" />

7689
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

13
package.json
View file

@ -10,20 +10,21 @@
"check": "prettier --check ." "check": "prettier --check ."
}, },
"dependencies": { "dependencies": {
"bootstrap-icons": "^1.10.2", "bootstrap-icons": "^1.10.3",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"dompurify": "^2.4.1", "dompurify": "^2.4.3",
"mux.js": "^6.2.0", "mux.js": "^6.2.0",
"peerjs": "^1.4.7", "peerjs": "^1.4.7",
"pinia": "^2.0.28", "pinia": "^2.0.29",
"shaka-player": "^4.3.1", "shaka-player": "^4.3.3",
"stream-browserify": "^3.0.0", "stream-browserify": "^3.0.0",
"vue": "^3.2.38", "vue": "^3.2.38",
"xml-js": "^1.6.11" "xml-js": "^1.6.11"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.0.0", "@vitejs/plugin-vue": "^4.0.0",
"prettier": "^2.8.1", "prettier": "^2.8.3",
"vite": "^4.0.0" "vite": "^4.0.4",
"vite-plugin-pwa": "^0.14.1"
} }
} }

26
public/manifest.json
View file

@ -1,26 +0,0 @@
{
"name": "Hyperpipe",
"short_name": "Hyperpipe",
"start_url": "/",
"display": "standalone",
"background_color": "#000",
"description": "Privacy respecting YouTube Music Frontend.",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/android-maskable.png",
"sizes": "1024x1024",
"type": "image/png",
"purpose": "maskable"
}
]
}

5
src/App.vue
View file

@ -109,9 +109,8 @@ function playList(a) {
/* Lifestyle hooks */ /* Lifestyle hooks */
onBeforeMount(() => { onBeforeMount(() => {
/* Set the default theme if set */ /* Set the default theme if set */
if (store.theme) { if (store.theme) document.body.setAttribute('data-theme', store.theme);
document.body.setAttribute('data-theme', store.theme); if (store.compact == 'true') document.body.setAttribute('data-compact', '');
}
/* Set the default locale if set */ /* Set the default locale if set */
if (store.locale) setupLocale(store.locale); if (store.locale) setupLocale(store.locale);

14
src/assets/base.css
View file

@ -327,15 +327,26 @@ img {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@media (max-width: 530px) {
[data-compact] .grid-3 {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 530px) { @media (min-width: 530px) {
.grid-3 { .grid-3 {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
[data-compact] .grid-3 {
grid-template-columns: 1fr 1fr 1fr;
}
} }
@media (min-width: 780px) { @media (min-width: 780px) {
.grid-3 { .grid-3 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
[data-compact] .grid-3 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
} }
@media (min-width: 930px) { @media (min-width: 930px) {
.grid { .grid {
@ -347,6 +358,9 @@ img {
.grid-3 { .grid-3 {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
} }
[data-compact] .grid-3 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
} }
/* Animations */ /* Animations */

2
src/assets/version.json
View file

@ -1,3 +1,3 @@
{ {
"date": "2023-01-13" "date": "2023-01-24"
} }

13
src/components/AlbumItem.vue
View file

@ -45,5 +45,18 @@ defineEmits(['open-album']);
} }
.card-text { .card-text {
margin-top: 0.5rem; margin-top: 0.5rem;
cursor: default;
}
[data-compact] .card {
min-height: 12rem;
width: 10rem;
}
[data-compact] .card-bg {
width: 7rem;
height: 7rem;
}
[data-compact] .card-text {
margin-top: 0.25rem;
} }
</style> </style>

20
src/components/Artist.vue
View file

@ -14,19 +14,17 @@ const subs = JSON.parse(store.subs ? store.subs : '[]'),
isSub = ref(subs.includes(hash)); isSub = ref(subs.includes(hash));
function Sub() { function Sub() {
if (artist.state.title) { if (!artist.state.title) return;
if (isSub.value) {
subs.splice(subs.indexOf(hash), 1);
store.setItem('subs', JSON.stringify(subs));
isSub.value = false;
} else {
subs.push(hash);
store.setItem('subs', JSON.stringify(subs));
isSub.value = true;
}
alert(JSON.stringify(subs)); if (isSub.value) {
subs.splice(subs.indexOf(hash), 1);
isSub.value = false;
} else {
subs.push(hash);
isSub.value = true;
} }
store.setItem('subs', JSON.stringify(subs));
} }
</script> </script>

22
src/components/Player.vue
View file

@ -118,6 +118,11 @@ async function Stream() {
} }
} }
function destroy() {
window.audioPlayer.destroy();
window.audioPlayer = undefined;
}
watch( watch(
() => player.state.play, () => player.state.play,
() => { () => {
@ -150,8 +155,9 @@ onMounted(() => {
if ('mediaSession' in navigator) { if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('play', () => { navigator.mediaSession.setActionHandler('play', () => {
player.state.status = 'pause'; player.state.status = 'pause';
audio.value.play().catch(err => { audio.value.play().catch(err => {
alert(err); console.log(err);
player.state.status = 'play'; player.state.status = 'play';
}); });
}); });
@ -163,7 +169,7 @@ onMounted(() => {
navigator.mediaSession.setActionHandler('previoustrack', () => { navigator.mediaSession.setActionHandler('previoustrack', () => {
if (data.state.urls.length > 2) { if (data.state.urls.length > 2) {
const i = data.state.urls.map(s => s.url).indexOf(data.state.url); const i = data.state.urls.findIndex(s => s.url == data.state.url);
data.getSong(data.state.urls[i - 1].url); data.getSong(data.state.urls[i - 1].url);
} }
@ -171,7 +177,7 @@ onMounted(() => {
navigator.mediaSession.setActionHandler('nexttrack', () => { navigator.mediaSession.setActionHandler('nexttrack', () => {
if (data.state.urls.length > 2) { if (data.state.urls.length > 2) {
const i = data.state.urls.map(s => s.url).indexOf(data.state.url); const i = data.state.urls.findIndex(s => s.url == data.state.url);
data.getSong(data.state.urls[i + 1].url); data.getSong(data.state.urls[i + 1].url);
} }
@ -188,16 +194,10 @@ onMounted(() => {
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (window.audioPlayer) { if (window.audioPlayer) destroy();
window.audioPlayer.destroy();
window.audioPlayer = undefined;
}
}); });
onUnmounted(() => { onUnmounted(() => {
if (window.audioPlayer) { if (window.audioPlayer) destroy();
window.audioPlayer.destroy();
window.audioPlayer = undefined;
}
}); });
</script> </script>

25
src/components/Prefs.vue
View file

@ -19,7 +19,8 @@ import('@/assets/version.json').then(v => {
const { t, setupLocale } = useI18n(), const { t, setupLocale } = useI18n(),
instances = ref([]), instances = ref([]),
hypInstances = ref([]), hypInstances = ref([]),
next = ref(false); next = ref(false),
compact = ref(false);
getJson('https://piped-instances.kavin.rocks').then(i => { getJson('https://piped-instances.kavin.rocks').then(i => {
instances.value = i; instances.value = i;
@ -60,8 +61,14 @@ function setLang(locale) {
setStore('locale', locale); setStore('locale', locale);
} }
function setCodec(codec) {
setStore('codec', codec);
if (window.audioPlayer)
window.audioPlayer.configure('preferredAudioCodecs', codec.split(':'));
}
function getStoreBool(key, ele) { function getStoreBool(key, ele) {
ele.value = getStore(key) || true; ele.value = getStore(key) || ele.value;
} }
const verifyApi = computed(() => const verifyApi = computed(() =>
@ -82,6 +89,7 @@ const verifyApi = computed(() =>
onMounted(() => { onMounted(() => {
getStoreBool('next', next); getStoreBool('next', next);
getStoreBool('compact', compact);
}); });
</script> </script>
@ -100,6 +108,17 @@ onMounted(() => {
<option value="nord">{{ t('pref.nord') }}</option> <option value="nord">{{ t('pref.nord') }}</option>
</select> </select>
<div class="left">
<input
type="checkbox"
name="pref-chk-compact"
id="pref-chk-compact"
class="input"
@change="setStore('compact', $event.target.checked)"
v-model="compact" />
<label for="pref-chk-compact">{{ t('pref.compact') }}</label>
</div>
<h2>Language</h2> <h2>Language</h2>
<select <select
@ -145,7 +164,7 @@ onMounted(() => {
name="pref-codec" name="pref-codec"
class="input" class="input"
:value="getStore('codec') || 'opus:mp4a'" :value="getStore('codec') || 'opus:mp4a'"
@change="setStore('codec', $event.target.value)"> @change="setCodec($event.target.value)">
<option value="opus:mp4a">opus, mp4a</option> <option value="opus:mp4a">opus, mp4a</option>
<option value="mp4a:opus">mp4a, opus</option> <option value="mp4a:opus">mp4a, opus</option>
<option value="opus">opus</option> <option value="opus">opus</option>

8
src/components/SongItem.vue
View file

@ -173,4 +173,12 @@ span.bi-three-dots-vertical {
.bi-dash-lg { .bi-dash-lg {
color: indianred; color: indianred;
} }
[data-compact] .card {
margin: 0;
}
[data-compact] .song-bg {
width: 70px;
height: 70px;
}
</style> </style>

3
src/locales/cs.json
View file

@ -37,7 +37,8 @@
"explore": "Procházet", "explore": "Procházet",
"charts": "Žebříčky", "charts": "Žebříčky",
"home": "Domů", "home": "Domů",
"library": "Knihovna" "library": "Knihovna",
"compact": "Kompaktní zobrazení"
}, },
"instances": { "instances": {
"name": "Název", "name": "Název",

3
src/locales/de.json
View file

@ -56,7 +56,8 @@
"library": "Bibliothek", "library": "Bibliothek",
"charts": "Diagramme", "charts": "Diagramme",
"explore": "Erkunden", "explore": "Erkunden",
"home": "Startseite" "home": "Startseite",
"compact": "Kompakte Ansicht"
}, },
"info": { "info": {
"no_info": "Keine Informationen verfügbar", "no_info": "Keine Informationen verfügbar",

1
src/locales/en.json
View file

@ -44,6 +44,7 @@
"blur_light": "Blur (Light)", "blur_light": "Blur (Light)",
"dracula": "Dracula", "dracula": "Dracula",
"nord": "Nord", "nord": "Nord",
"compact": "Compact View",
"tab": "Default Tab", "tab": "Default Tab",
"player": "Audio Player", "player": "Audio Player",
"auto_queue": "Automatically Queue Songs", "auto_queue": "Automatically Queue Songs",

3
src/locales/es.json
View file

@ -56,7 +56,8 @@
"home": "Inicio", "home": "Inicio",
"library": "Biblioteca", "library": "Biblioteca",
"charts": "Gráfica", "charts": "Gráfica",
"explore": "Explorar" "explore": "Explorar",
"compact": "Vista compacta"
}, },
"info": { "info": {
"see_all": "Ver todo", "see_all": "Ver todo",

3
src/locales/fr.json
View file

@ -46,7 +46,8 @@
"charts": "Graphiques", "charts": "Graphiques",
"explore": "Explorer", "explore": "Explorer",
"home": "Accueil", "home": "Accueil",
"library": "Bibliothèque" "library": "Bibliothèque",
"compact": "Vue compacte"
}, },
"info": { "info": {
"see_all": "Voir tout", "see_all": "Voir tout",

3
src/locales/it.json
View file

@ -19,7 +19,8 @@
"library": "Raccolta", "library": "Raccolta",
"home": "Pagina principale", "home": "Pagina principale",
"charts": "Grafici", "charts": "Grafici",
"explore": "Esplora" "explore": "Esplora",
"compact": "Vista compatta"
}, },
"title": { "title": {
"albums": "Album", "albums": "Album",

3
src/locales/tr.json
View file

@ -56,7 +56,8 @@
"charts": "Grafikler", "charts": "Grafikler",
"library": "Kütüphane", "library": "Kütüphane",
"explore": "Keşfet", "explore": "Keşfet",
"home": "Ana sayfa" "home": "Ana sayfa",
"compact": "Sıkı Görünüm"
}, },
"info": { "info": {
"see_all": "Hepsini Gör", "see_all": "Hepsini Gör",

34
src/stores/player.js
View file

@ -8,18 +8,17 @@ const store = useStore();
export const useData = defineStore('data', () => { export const useData = defineStore('data', () => {
const state = reactive({ const state = reactive({
title: '', title: '',
description: '', description: '',
artist: '', artist: '',
art: '', art: '',
url: '', url: '',
artistUrl: '', artistUrl: '',
lyrics: '', lyrics: '',
src: [], src: [],
urls: [], urls: [],
}); }),
player = usePlayer();
const player = usePlayer();
async function getSong(e) { async function getSong(e) {
console.log(e); console.log(e);
@ -48,7 +47,7 @@ export const useData = defineStore('data', () => {
if ( if (
store.getItem('next') !== 'false' && store.getItem('next') !== 'false' &&
(!state.urls || (!state.urls ||
!state.urls.filter(s => s.url == state.url)[0] || state.urls.findIndex(s => s.url == state.url) < 0 ||
state.urls.length == 1) state.urls.length == 1)
) { ) {
const json = await getJsonHyp('/next/' + hash); const json = await getJsonHyp('/next/' + hash);
@ -98,8 +97,7 @@ export const useData = defineStore('data', () => {
} }
function playNext(u) { function playNext(u) {
const now = state.urls.filter(s => s.url === state.url)[0], const i = state.urls.findIndex(s => s.url === state.url);
i = state.urls.indexOf(now);
if (player.state.loop == 2) getSong(state.url); if (player.state.loop == 2) getSong(state.url);
else if ( else if (
@ -117,8 +115,7 @@ export const useData = defineStore('data', () => {
} }
function prevTrack() { function prevTrack() {
const now = state.urls.filter(s => s.url === state.url)[0], const i = state.urls.findIndex(s => s.url === state.url);
i = state.urls.indexOf(now);
if (state.urls[i - 1]) getSong(state.urls[i - 1].url); if (state.urls[i - 1]) getSong(state.urls[i - 1].url);
else if (player.state.loop == 1) { else if (player.state.loop == 1) {
@ -130,8 +127,7 @@ export const useData = defineStore('data', () => {
} }
function nextTrack() { function nextTrack() {
const now = state.urls.filter(s => s.url === state.url)[0], const i = state.urls.findIndex(s => s.url === state.url);
i = state.urls.indexOf(now);
if (state.urls[i + 1]) getSong(state.urls[i + 1].url); if (state.urls[i + 1]) getSong(state.urls[i + 1].url);
else if (player.state.loop == 1) { else if (player.state.loop == 1) {

41
vite.config.js
View file

@ -2,10 +2,49 @@ import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
workbox: {
globPatterns: [
'**/*.{js,css,html,png,svg,woff2}',
'manifest.webmanifest',
],
},
manifest: {
name: 'Hyperpipe',
short_name: 'Hyperpipe',
start_url: '/',
display: 'standalone',
background_color: '#000',
theme_color: '#000',
description: 'Privacy respecting YouTube Music Frontend.',
icons: [
{
src: '/android-chrome-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: '/android-maskable.png',
sizes: '1024x1024',
type: 'image/png',
purpose: 'maskable',
},
],
},
}),
],
resolve: { resolve: {
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)), '@': fileURLToPath(new URL('./src', import.meta.url)),