mirror of
https://codeberg.org/Hyperpipe/Hyperpipe
synced 2025-06-27 20:58:01 +02:00
Playlists, Play Next, Code Refactor
This commit is contained in:
Shiny Nematoda
parent
5486be7613
commit
51c56abe16
17 changed files with 664 additions and 204 deletions
13
README.md
13
README.md
|
|
@ -2,13 +2,15 @@
|
|||
|
||||
|
||||
|
||||
A Privacy Respecting Frontend for YouTube Music inspired and built with [Piped][piped] ( and a tiny bit of messy custom scrapers ).
|
||||
A Privacy Respecting Frontend for YouTube Music inspired and built with the help [Piped][piped] and YouTube's innertube API.
|
||||
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
***HYPERPIPE IS ONLY BEING DEVELOPED, EXPECT BUGS AND MESSY CODE***
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
|
@ -35,15 +37,15 @@ npm run build
|
|||
|
||||
## Instances
|
||||
|
||||
| Instance | Country | Country (Backend) | Offical |
|
||||
| ---------------------------- | ------- | ----------------- | ------- |
|
||||
| [hyperpipe.surge.sh][hypipe] | 🇺🇸 | 🇩🇪 | ✅ |
|
||||
| Instance | Country (Backend) |
|
||||
| :--------------------------: | :---------------: |
|
||||
| [hyperpipe.surge.sh][hypipe] | 🇩🇪 |
|
||||
|
||||
## LICENSE
|
||||
|
||||
### GPL v3 Only
|
||||
|
||||
Please refer to LICENSE.
|
||||
Please refer to [LICENSE][LICENSE].
|
||||
|
||||
You can reach out to me on <TODO>
|
||||
|
||||
|
|
@ -58,6 +60,7 @@ You can reach out to me on <TODO>
|
|||
|
||||
[hypipe]: https://hyperpipe.surge.sh
|
||||
[piped]: https://piped.kavin.rocks
|
||||
[LICENSE]: https://codeberg.org/Hyperpipe/Hyperpipe/src/branch/main/LICENSE.txt
|
||||
[vue]: https://github.com/vuejs/core/blob/main/LICENSE
|
||||
[vite]: https://github.com/vitejs/vite/blob/main/LICENSE
|
||||
[bi]: https://github.com/twbs/icons/blob/main/LICENSE.md
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
|
||||
<link rel="preconnect" href="https://hyperpipeapi.onrender.com" />
|
||||
<link rel="dns-prefetch" href="https://hyperpipe-proxy.onrender.com" />
|
||||
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>Hyperpipe</title>
|
||||
|
|
|
|||
9
public/manifest.json
Normal file
9
public/manifest.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"name": "Hyperpipe",
|
||||
"short_name": "Hyperpipe",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#fff",
|
||||
"description": "Privacy respecting YouTube Music Frontend.",
|
||||
|
||||
}
|
||||
127
src/App.vue
127
src/App.vue
|
|
@ -5,10 +5,13 @@ import NavBar from './components/NavBar.vue';
|
|||
import StatusBar from './components/StatusBar.vue';
|
||||
import NowPlaying from './components/NowPlaying.vue';
|
||||
import Search from './components/Search.vue';
|
||||
import NewPlaylist from './components/NewPlaylist.vue';
|
||||
import Playlists from './components/Playlists.vue';
|
||||
import Artist from './components/Artist.vue';
|
||||
|
||||
import { getJson, getJsonPiped } from './scripts/fetch.js';
|
||||
import { useLazyLoad } from './scripts/util.js';
|
||||
import { useUpdatePlaylist } from './scripts/db.js'
|
||||
|
||||
const data = reactive({
|
||||
artUrl: '',
|
||||
|
|
@ -36,7 +39,7 @@ const artist = reactive({
|
|||
thumbnails: [],
|
||||
});
|
||||
|
||||
const search = ref('');
|
||||
const search = ref(''), page = ref('home');
|
||||
|
||||
const audio = ref(null);
|
||||
|
||||
|
|
@ -47,6 +50,9 @@ function parseUrl() {
|
|||
|
||||
switch (loc[3].replace(location.search, '')) {
|
||||
case '':
|
||||
search.value = ''
|
||||
page.value = 'home'
|
||||
break;
|
||||
case 'search':
|
||||
search.value = loc[4];
|
||||
console.log(search.value);
|
||||
|
|
@ -69,17 +75,7 @@ function parseUrl() {
|
|||
|
||||
function Toggle(e) {
|
||||
console.log(e, data[e]);
|
||||
|
||||
if (data[e]) {
|
||||
data[e] = false;
|
||||
} else {
|
||||
data[e] = true;
|
||||
}
|
||||
}
|
||||
|
||||
function Update(e) {
|
||||
search.value = e;
|
||||
console.log('update');
|
||||
data[e] = !data[e]
|
||||
}
|
||||
|
||||
function timeUpdate(t) {
|
||||
|
|
@ -126,7 +122,7 @@ function playNext(u) {
|
|||
audio.value.src = '';
|
||||
|
||||
const i = data.urls.map((s) => s.url).indexOf(data.url),
|
||||
next = data.urls[i + 1];
|
||||
next = data.urls[i + 1];
|
||||
|
||||
console.log('Index: ' + i);
|
||||
console.log(data.url, data.urls, next);
|
||||
|
|
@ -134,6 +130,7 @@ function playNext(u) {
|
|||
if (data.urls.length > i && data.urls.length != 0 && next) {
|
||||
getSong(next.url);
|
||||
} else if (data.loop) {
|
||||
console.log(data.url, data.urls[0]);
|
||||
data.url = data.urls[0].url;
|
||||
getSong(data.urls[0].url);
|
||||
} else {
|
||||
|
|
@ -203,7 +200,7 @@ async function getArtist(e) {
|
|||
}
|
||||
|
||||
async function getNext(hash) {
|
||||
if (!data.urls || data.urls.map((s) => s.url).indexOf(data.url) <= 0) {
|
||||
if (!data.urls || data.urls.map((s) => s.url).indexOf(data.url) < 0 || data.urls.length == 1) {
|
||||
const json = await getJson(
|
||||
'https://hyperpipeapi.onrender.com/next/' + hash,
|
||||
);
|
||||
|
|
@ -257,7 +254,7 @@ function Stream(res) {
|
|||
}
|
||||
|
||||
function audioCanPlay() {
|
||||
lazyLoad();
|
||||
useLazyLoad();
|
||||
audio.value.play();
|
||||
data.state = 'pause';
|
||||
|
||||
|
|
@ -268,12 +265,24 @@ function audioCanPlay() {
|
|||
document.title = `Playing: ${data.nowtitle} by ${data.nowartist}`;
|
||||
}
|
||||
|
||||
function SaveTrack(e) {
|
||||
useUpdatePlaylist(e, {
|
||||
url: data.url,
|
||||
title: data.nowtitle
|
||||
}, (e) => {
|
||||
if (e === true) {
|
||||
console.log('Added Song To '+ e)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function setMetadata() {
|
||||
if ('mediaSession' in navigator) {
|
||||
const i = data.urls.map((u) => u.url).indexOf(data.url);
|
||||
|
||||
let artwork = [],
|
||||
album = undefined;
|
||||
album = undefined;
|
||||
|
||||
console.log(i);
|
||||
|
||||
if (i >= 0) {
|
||||
|
|
@ -303,43 +312,19 @@ function setMetadata() {
|
|||
}
|
||||
}
|
||||
|
||||
function lazyLoad() {
|
||||
let lazyElems;
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
lazyElems = document.querySelectorAll('.bg-img:not(.lazy)');
|
||||
|
||||
let imgObs = new IntersectionObserver((elems, obs) => {
|
||||
elems.forEach((elem) => {
|
||||
setTimeout(() => {
|
||||
if (elem.isIntersecting) {
|
||||
let ele = elem.target;
|
||||
|
||||
ele.classList.add('lazy');
|
||||
imgObs.unobserve(ele);
|
||||
}
|
||||
}, 20);
|
||||
});
|
||||
});
|
||||
|
||||
lazyElems.forEach((img) => {
|
||||
imgObs.observe(img);
|
||||
});
|
||||
} else {
|
||||
console.log('Failed');
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
lazyLoad();
|
||||
useLazyLoad();
|
||||
|
||||
document.addEventListener('scroll', lazyLoad);
|
||||
document.addEventListener('resize', lazyLoad);
|
||||
document.addEventListener('orientationChange', lazyLoad);
|
||||
document.addEventListener('scroll', useLazyLoad);
|
||||
document.addEventListener('resize', useLazyLoad);
|
||||
document.addEventListener('orientationChange', useLazyLoad);
|
||||
|
||||
window.addEventListener('popstate', parseUrl);
|
||||
|
||||
window.onbeforeunload = () => {
|
||||
return 'Are you Sure?';
|
||||
if (data.url) {
|
||||
return 'Are you Sure?';
|
||||
}
|
||||
};
|
||||
|
||||
if ('mediaSession' in navigator) {
|
||||
|
|
@ -359,6 +344,33 @@ onMounted(() => {
|
|||
});
|
||||
}
|
||||
|
||||
if ('indexedDB' in window) {
|
||||
const req = indexedDB.open('hyperpipedb', 1)
|
||||
|
||||
req.onupgradeneeded = e => {
|
||||
const db = e.target.result;
|
||||
console.log(db)
|
||||
|
||||
if (!db.objectStoreNames.contains("playlist")) {
|
||||
|
||||
const store = db.createObjectStore("playlist", { keyPath: 'name' })
|
||||
|
||||
store.createIndex('urls', 'urls', { unique: false })
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
req.onerror = e => {
|
||||
console.log("Please let me use indexedDB!!")
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
req.onsuccess = e => {
|
||||
window.db = e.target.result
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
parseUrl();
|
||||
|
||||
console.log('Mounted <App>!');
|
||||
|
|
@ -372,6 +384,7 @@ onMounted(() => {
|
|||
search = e;
|
||||
}
|
||||
"
|
||||
@update-page="(e) => { page = e }"
|
||||
:search="search" />
|
||||
|
||||
<template v-if="artist">
|
||||
|
|
@ -388,20 +401,27 @@ onMounted(() => {
|
|||
<div v-if="data.cover" class="art bg-img" :style="data.cover"></div>
|
||||
|
||||
<div class="wrapper">
|
||||
<NowPlaying :title="data.nowtitle" :artist="data.nowartist" />
|
||||
<NowPlaying
|
||||
:title="data.nowtitle"
|
||||
:artist="data.nowartist" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="placeholder">
|
||||
<Search
|
||||
<template v-if="page == 'home'">
|
||||
<Search
|
||||
@get-album="getAlbum"
|
||||
@get-artist="getArtist"
|
||||
@lazy="lazyLoad"
|
||||
@play-urls="playList"
|
||||
@add-song="addSong"
|
||||
:items="data.items"
|
||||
:songItems="data.songItems"
|
||||
:search="search" />
|
||||
</template>
|
||||
<template v-if="page == 'playlist'">
|
||||
<NewPlaylist @play-urls="playList" />
|
||||
</template>
|
||||
|
||||
</main>
|
||||
|
||||
<Playlists
|
||||
|
|
@ -415,6 +435,7 @@ onMounted(() => {
|
|||
@vol="setVolume"
|
||||
@list="Toggle"
|
||||
@loop="Toggle"
|
||||
@save="SaveTrack"
|
||||
@change-time="setTime"
|
||||
:state="data.state"
|
||||
:time="data.time"
|
||||
|
|
@ -492,10 +513,6 @@ a,
|
|||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
main .grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
header {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -141,6 +141,17 @@ button {
|
|||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.textbox {
|
||||
padding: .5rem 1rem;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background-mute);
|
||||
border-radius: .25rem;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
appearence: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
background-image: linear-gradient(45deg, #88c0d0, #5e81ac);
|
||||
background-position: center;
|
||||
|
|
@ -175,25 +186,38 @@ button {
|
|||
}
|
||||
|
||||
.popup-wrap {
|
||||
--display: none;
|
||||
position: relative;
|
||||
}
|
||||
.popup-wrap:hover,
|
||||
.popup-wrap:focus,
|
||||
.popup:focus,
|
||||
.popup:active {
|
||||
--display: flex;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
display: var(--display);
|
||||
display: flex;
|
||||
background-color: var(--color-background);
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.125rem;
|
||||
z-index: 999;
|
||||
bottom: 1.25rem;
|
||||
box-shadow: 0 0 0.5rem var(--color-border);
|
||||
animation: fade 0.4s ease;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media (min-width: 530px) {
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.grid-3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.bars-wrap {
|
||||
|
|
@ -222,22 +246,15 @@ button {
|
|||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
@keyframes fill {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: var(--width);
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes heightc {
|
||||
50% {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<script setup>
|
||||
defineProps({
|
||||
name: String,
|
||||
author: String,
|
||||
author: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
grad: String,
|
||||
art: {
|
||||
type: String,
|
||||
default: '--art: linear-gradient(45deg, #88c0d0, #5e81ac);',
|
||||
default: 'linear-gradient(45deg, #88c0d0, #5e81ac)',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['open-album']);
|
||||
|
||||
function onClick() {
|
||||
emit('open-album');
|
||||
}
|
||||
defineEmits(['open-album']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="album card pop" @click="onClick">
|
||||
<div class="card-bg bg-img pop-2" :style="art"></div>
|
||||
<div class="album card pop" @click="$emit('open-album')">
|
||||
<div class="card-bg bg-img pop-2"></div>
|
||||
|
||||
<div class="card-text">
|
||||
<h4>{{ name }}</h4>
|
||||
|
|
@ -38,6 +38,8 @@ function onClick() {
|
|||
background-color: var(--color-background);
|
||||
}
|
||||
.card-bg {
|
||||
--art: v-bind('grad || art');
|
||||
background: v-bind('grad');
|
||||
height: 13rem;
|
||||
width: 13rem;
|
||||
}
|
||||
|
|
|
|||
104
src/components/Modal.vue
Normal file
104
src/components/Modal.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps(['display', 'title', 'n']),
|
||||
emit = defineEmits(['show']),
|
||||
show = ref(props.display);
|
||||
|
||||
watch(() => props.display, (n) => {
|
||||
console.log(n, props.display)
|
||||
show.value = n
|
||||
})
|
||||
watch(show, (n) => {
|
||||
emit('show', show.value)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<Transition name="fade">
|
||||
<div class="modal" v-if="show">
|
||||
<span class="bi bi-x modal-close" @click="show = false"></span>
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">{{ title }}</div>
|
||||
<div class="modal-content">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
<div class="modal-buttons">
|
||||
<slot name="buttons"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.modal {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #00000066;
|
||||
z-index: 9999;
|
||||
}
|
||||
.modal-box {
|
||||
width: 50vw;
|
||||
border-radius: .5rem;
|
||||
background-color: var(--color-background-soft);
|
||||
}
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid var(--color-shadow);
|
||||
}
|
||||
.modal-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
.modal-content * {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
.modal-close {
|
||||
color: var(--color-background);
|
||||
font-size: 2rem;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
.modal-buttons {
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--color-shadow);
|
||||
}
|
||||
.modal-buttons button {
|
||||
padding: 1rem 2rem;
|
||||
color: var(--color-foreground);
|
||||
width: calc(100% / v-bind('n'));
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
border-right: 1px solid var(--color-shadow);
|
||||
}
|
||||
.modal-buttons button:first-child {
|
||||
color: indianred;
|
||||
border-bottom-left-radius: .5rem;
|
||||
}
|
||||
.modal-buttons button:last-child {
|
||||
border: none;
|
||||
border-bottom-right-radius: .5rem;
|
||||
}
|
||||
.modal-buttons button:hover {
|
||||
background-color: var(--color-background-mute);
|
||||
}
|
||||
|
||||
@media (max-width: 530px) {
|
||||
.modal-box {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.modal-box {
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,35 @@
|
|||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
import SearchBar from '../components/SearchBar.vue';
|
||||
|
||||
defineEmits(['update-search']);
|
||||
const emit = defineEmits(['update-page', 'update-search']);
|
||||
|
||||
const page = reactive({
|
||||
home: true,
|
||||
playlist: false
|
||||
})
|
||||
|
||||
function Toggle(p) {
|
||||
for (let pg in page) {
|
||||
page[pg] = false
|
||||
}
|
||||
page[p] = true
|
||||
emit('update-page', p);
|
||||
}
|
||||
function home() {
|
||||
history.pushState('', {}, '/')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav>
|
||||
<h1>Hyperpipe</h1>
|
||||
<h1 class="bi bi-vinyl" @click="home"></h1>
|
||||
|
||||
<div class="wrap">
|
||||
<span :class="'nav-ico bi bi-house ' + page.home" @click="Toggle('home')"></span>
|
||||
<span :class="'nav-ico bi bi-collection ' + page.playlist" @click="Toggle('playlist')"></span>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<SearchBar
|
||||
|
|
@ -26,10 +49,18 @@ nav {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
h1.bi {
|
||||
font-size: calc(1.75rem + 1.5vw);
|
||||
}
|
||||
.bi {
|
||||
font-size: calc(1rem + 1vw);
|
||||
}
|
||||
.wrap {
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
.nav-ico {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
90
src/components/NewPlaylist.vue
Normal file
90
src/components/NewPlaylist.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import AlbumItem from './AlbumItem.vue'
|
||||
import Modal from './Modal.vue'
|
||||
|
||||
import { useRand } from '../scripts/colors.js'
|
||||
import { useListPlaylists, useGetPlaylist, useCreatePlaylist } from '../scripts/db.js'
|
||||
|
||||
const emit = defineEmits(['play-urls'])
|
||||
|
||||
const list = ref([]),
|
||||
show = ref(false),
|
||||
text = ref('');
|
||||
|
||||
function Play(key) {
|
||||
console.log(key);
|
||||
|
||||
useGetPlaylist(key, res => {
|
||||
console.log(res);
|
||||
emit('play-urls', res.urls)
|
||||
})
|
||||
}
|
||||
function List() {
|
||||
useListPlaylists((res) => {
|
||||
list.value = res
|
||||
})
|
||||
}
|
||||
function Create() {
|
||||
if (text.value) {
|
||||
useCreatePlaylist(text.value, [], () => {
|
||||
List()
|
||||
show.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
List()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="npl-wrap">
|
||||
|
||||
<Modal n="2" :display="show" title="Create a new Playlist..." @show="(e) => { show = e }" >
|
||||
<template #content>
|
||||
<input type="text" placeholder="Playlist name..." class="textbox" v-model="text" />
|
||||
</template>
|
||||
<template #buttons>
|
||||
<button @click="show = false">Cancel</button>
|
||||
<button @click="Create">Create</button>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<div class="npl-box bi bi-plus-lg pop" @click="show = true"></div>
|
||||
<div class="grid-3">
|
||||
<template v-for="i in list">
|
||||
<AlbumItem :name="i.name" :grad="useRand()" @open-album="Play(i.name)" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.npl-wrap {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
.npl-box {
|
||||
margin: 0 auto 5rem auto;
|
||||
border-radius: .5rem;
|
||||
background-color: var(--color-background-mute);
|
||||
padding: 2rem 3rem;
|
||||
font-size: 4rem;
|
||||
width: 10rem;
|
||||
}
|
||||
.npl-box:hover {
|
||||
background-color: var(--color-background-soft);
|
||||
}
|
||||
.npl-round {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
border-radius: 50%;
|
||||
background: v-bind('bg');
|
||||
}
|
||||
.text-box {
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,22 +8,24 @@ defineEmits(['playthis']);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="show" class="modal placeholder">
|
||||
<template v-for="plurl in urls">
|
||||
<div class="pl-item" @click="$emit('playthis', plurl)">
|
||||
<span v-if="url == plurl.url" class="bars-wrap">
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
</span>
|
||||
<span class="pl-main caps">{{ plurl.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<div v-if="show" class="pl-modal placeholder">
|
||||
<template v-for="plurl in urls">
|
||||
<div class="pl-item" @click="$emit('playthis', plurl)">
|
||||
<span v-if="url == plurl.url" class="bars-wrap">
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
<div class="bars"></div>
|
||||
</span>
|
||||
<span class="pl-main caps">{{ plurl.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal {
|
||||
.pl-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
|
|
@ -37,8 +39,6 @@ defineEmits(['playthis']);
|
|||
z-index: 99999;
|
||||
box-shadow: 0.1rem 0.1rem 1rem var(--color-shadow);
|
||||
padding: 1rem;
|
||||
transition: width 0.4s ease;
|
||||
animation: fade 0.4s ease;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.placeholder:empty:before {
|
||||
|
|
|
|||
|
|
@ -5,16 +5,11 @@ import SongItem from './SongItem.vue';
|
|||
import AlbumItem from './AlbumItem.vue';
|
||||
|
||||
import { getJsonPiped, getPipedQuery } from '../scripts/fetch.js';
|
||||
import { useLazyLoad } from '../scripts/util.js';
|
||||
|
||||
const props = defineProps(['search', 'songItems', 'items']);
|
||||
|
||||
const emit = defineEmits([
|
||||
'get-album',
|
||||
'get-artist',
|
||||
'lazy',
|
||||
'play-urls',
|
||||
'add-song',
|
||||
]);
|
||||
const emit = defineEmits(['get-album', 'get-artist', 'play-urls', 'add-song']);
|
||||
|
||||
const data = reactive({
|
||||
notes: null,
|
||||
|
|
@ -47,7 +42,7 @@ function getSearch(q) {
|
|||
document.title = 'Search Results for ' + q;
|
||||
|
||||
getResults(pq);
|
||||
emit('lazy');
|
||||
useLazyLoad();
|
||||
} else {
|
||||
Reset();
|
||||
|
||||
|
|
@ -103,7 +98,7 @@ watch(
|
|||
data[i] = {};
|
||||
data[i].items = itms[i];
|
||||
|
||||
console.log(i + ': ' + data[i]);
|
||||
console.log(i, data[i]);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
@ -111,7 +106,7 @@ watch(
|
|||
|
||||
<template>
|
||||
<div v-if="data.songs && data.songs.corrected" class="text-full">
|
||||
I Fixed your Typo, "<span class="caps">{{ data.songs.suggestion }}</span
|
||||
Did you mean, "<span class="caps">{{ data.songs.suggestion }}</span
|
||||
>"!!
|
||||
</div>
|
||||
|
||||
|
|
@ -129,11 +124,12 @@ watch(
|
|||
:title="song.title || song.name"
|
||||
:channel="song.uploaderUrl || ''"
|
||||
:play="song.url || '/watch?v=' + song.id"
|
||||
:art="'url(' + (song.thumbnail || song.thumbnails[1].url) + ')'"
|
||||
@open-song="
|
||||
$emit('play-urls', [
|
||||
{
|
||||
url: song.url || '/watch?v=' + song.id,
|
||||
title: song.title || song.name,
|
||||
title: (song.title || song.name),
|
||||
},
|
||||
])
|
||||
"
|
||||
|
|
@ -141,15 +137,7 @@ watch(
|
|||
(e) => {
|
||||
$emit('get-artist', e);
|
||||
}
|
||||
">
|
||||
<template #art>
|
||||
<div
|
||||
:style="`--art: url(${
|
||||
song.thumbnail || song.thumbnails[1].url
|
||||
});`"
|
||||
class="pop-2 bg-img song-bg"></div>
|
||||
</template>
|
||||
</SongItem>
|
||||
" />
|
||||
</template>
|
||||
</div>
|
||||
<a
|
||||
|
|
@ -168,9 +156,7 @@ watch(
|
|||
<AlbumItem
|
||||
:author="album.uploaderName || album.subtitle"
|
||||
:name="album.name || album.title"
|
||||
:art="
|
||||
'--art: url(' + (album.thumbnail || album.thumbnails[0].url) + ');'
|
||||
"
|
||||
:art="'url(' + (album.thumbnail || album.thumbnails[0].url) + ')'"
|
||||
@open-album="
|
||||
$emit('get-album', album.url || '/playlist?list=' + album.id)
|
||||
" />
|
||||
|
|
@ -185,7 +171,7 @@ watch(
|
|||
<AlbumItem
|
||||
:author="single.subtitle"
|
||||
:name="single.title"
|
||||
:art="'--art: url(' + single.thumbnails[0].url + ');'"
|
||||
:art="'url(' + single.thumbnails[0].url + ')'"
|
||||
@open-album="$emit('get-album', '/playlist?list=' + single.id)" />
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -200,7 +186,7 @@ watch(
|
|||
<AlbumItem
|
||||
:author="artist.subtitle"
|
||||
:name="artist.title"
|
||||
:art="'--art: url(' + artist.thumbnails[0].url + ');'"
|
||||
:art="'url(' + artist.thumbnails[0].url + ')'"
|
||||
@open-album="$emit('get-artist', artist.id)" />
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -219,11 +205,6 @@ watch(
|
|||
.search-albums h2 {
|
||||
text-align: center;
|
||||
}
|
||||
.search-albums .grid-3,
|
||||
.search-artists .grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.search-artists {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -236,26 +217,9 @@ watch(
|
|||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.song-bg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.more {
|
||||
margin: 1.5rem 0.5rem;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media (min-width: 530px) {
|
||||
.search-albums .grid-3,
|
||||
.search-artists .grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.search-albums .grid-3,
|
||||
.search-artists .grid-3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,26 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps(['search']);
|
||||
defineEmits(['update-search']);
|
||||
|
||||
const show = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="bi bi-search popup-wrap">
|
||||
<div class="popup">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
@change="$emit('update-search', $event.target.value)"
|
||||
:value="search" />
|
||||
</div>
|
||||
<button
|
||||
class="bi bi-search popup-wrap"
|
||||
@mouseenter="show = true"
|
||||
@mouseleave="show = false">
|
||||
<Transition name="fade">
|
||||
<div v-if="show" class="popup">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
@change="$emit('update-search', $event.target.value)"
|
||||
:value="search" />
|
||||
</div>
|
||||
</Transition>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
@ -24,8 +33,7 @@ defineEmits(['update-search']);
|
|||
}
|
||||
.popup input {
|
||||
color: var(--color-text);
|
||||
--width: calc(100vw - 4rem);
|
||||
width: 1.5rem;
|
||||
width: calc(100vw - 4rem);
|
||||
max-width: 600px;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
|
|
@ -33,10 +41,5 @@ defineEmits(['update-search']);
|
|||
background: var(--color-background-mute);
|
||||
outline: none;
|
||||
text-align: center;
|
||||
animation: fill 0.4s ease;
|
||||
transform: width 0.4s ease;
|
||||
}
|
||||
.popup input:hover {
|
||||
width: var(--width);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
author: String,
|
||||
title: String,
|
||||
channel: String,
|
||||
play: String,
|
||||
art: String,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['get-artist', 'open-song']);
|
||||
|
||||
const show = ref(false);
|
||||
|
||||
function openSong(el) {
|
||||
if (!el.classList.contains('ign')) {
|
||||
emit('open-song', props.play);
|
||||
|
|
@ -38,10 +43,14 @@ async function Share() {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log(props)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="song card flex pop" @click="openSong($event.target)">
|
||||
<slot name="art"></slot>
|
||||
<div class="pop-2 bg-img song-bg"></div>
|
||||
|
||||
<span class="flex content">
|
||||
<h4>{{ title }}</h4>
|
||||
|
|
@ -53,16 +62,21 @@ async function Share() {
|
|||
</a>
|
||||
</span>
|
||||
|
||||
<span class="bi bi-three-dots-vertical popup-wrap ign">
|
||||
<div class="popup ign">
|
||||
<span
|
||||
class="bi bi-plus-lg ign"
|
||||
@click="
|
||||
$parent.$emit('add-song', { url: play, title: title })
|
||||
"></span>
|
||||
<span
|
||||
class="bi bi-three-dots-vertical popup-wrap ign"
|
||||
@mouseenter="show = true"
|
||||
@mouseleave="show = false">
|
||||
<Transition name="fade">
|
||||
<div v-if="show" class="popup ign">
|
||||
<span
|
||||
class="bi bi-plus-lg ign"
|
||||
@click="
|
||||
$parent.$emit('add-song', { url: play, title: title })
|
||||
"></span>
|
||||
|
||||
<span class="bi bi-share ign" @click="Share"></span>
|
||||
</div>
|
||||
<span class="bi bi-share ign" @click="Share"></span>
|
||||
</div>
|
||||
</Transition>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -92,4 +106,9 @@ span.bi-three-dots-vertical {
|
|||
.popup span {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.song-bg {
|
||||
--art: v-bind('art');
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,44 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import Modal from './Modal.vue'
|
||||
import { useListPlaylists } from '../scripts/db.js'
|
||||
|
||||
defineProps({
|
||||
state: String,
|
||||
time: Number,
|
||||
show: Boolean,
|
||||
loop: Boolean,
|
||||
});
|
||||
defineEmits(['vol', 'play', 'list', 'loop', 'change-time']);
|
||||
|
||||
const emit = defineEmits(['vol', 'play', 'list', 'loop', 'save', 'change-time']),
|
||||
showVol = ref(false), vol = ref(1), showmenu = ref(false), showpl = ref(false), pl = ref(''), list = ref([]);
|
||||
|
||||
function Save() {
|
||||
showpl.value = true;
|
||||
useListPlaylists((res) => {
|
||||
console.log(res);
|
||||
list.value = res;
|
||||
showmenu.value = false;
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<Modal n="2" :display="showpl" title="Select Playlist to Add" @show="(e) => { showpl = e }">
|
||||
<template #content>
|
||||
<template v-for="i in list">
|
||||
<div class="flex" @click="pl = i.name"><span>{{ i.name }}</span><span class="ml-auto">{{ i.urls.length || '' }}</span></div>
|
||||
</template>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<button @click="showpl = false">Cancel</button>
|
||||
<button @click="if (pl) $emit('save', pl); showpl = false">Add</button>
|
||||
</template>
|
||||
</Modal>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
<div id="statusbar" class="flex">
|
||||
<div class="flex statusbar-left">
|
||||
<button
|
||||
|
|
@ -29,25 +60,36 @@ defineEmits(['vol', 'play', 'list', 'loop', 'change-time']);
|
|||
</div>
|
||||
|
||||
<div class="flex statusbar-right">
|
||||
<button id="vol-btn" class="popup-wrap bi bi-volume-up">
|
||||
<div id="vol" class="popup">
|
||||
<input
|
||||
id="vol-input"
|
||||
type="range"
|
||||
value="1"
|
||||
max="1"
|
||||
step=".01"
|
||||
@input="$emit('vol', $event.target.value)" />
|
||||
</div>
|
||||
<button
|
||||
id="vol-btn"
|
||||
@click="showVol = !showVol"
|
||||
class="popup-wrap bi bi-volume-up">
|
||||
<Transition name="fade">
|
||||
<div v-if="showVol" id="vol" class="popup">
|
||||
<input
|
||||
id="vol-input"
|
||||
type="range"
|
||||
:value="vol"
|
||||
max="1"
|
||||
step=".01"
|
||||
@input="$emit('vol', $event.target.value); vol = $event.target.value" />
|
||||
</div>
|
||||
</Transition>
|
||||
</button>
|
||||
<button
|
||||
id="list-btn"
|
||||
:class="'bi bi-music-note-list ' + show"
|
||||
@click="$emit('list', 'showplaylist')"></button>
|
||||
<button
|
||||
id="loop-btn"
|
||||
:class="'bi bi-infinity ' + loop"
|
||||
@click="$emit('loop', 'loop')"></button>
|
||||
<button class="bi bi-three-dots" @click="showmenu = !showmenu; if (show) $emit('list', 'showplaylist')"></button>
|
||||
<div id="menu" v-if="showmenu" class="popup">
|
||||
<button id="addToPlaylist" title="Add Current Song to a Playlist" class="bi bi-collection" @click="Save"></button>
|
||||
<button
|
||||
id="list-btn"
|
||||
title="Current Playlist"
|
||||
:class="'bi bi-music-note-list ' + show"
|
||||
@click="$emit('list', 'showplaylist')"></button>
|
||||
<button
|
||||
id="loop-btn"
|
||||
title="Loop"
|
||||
:class="'bi bi-infinity ' + loop"
|
||||
@click="$emit('loop', 'loop')"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -80,9 +122,19 @@ defineEmits(['vol', 'play', 'list', 'loop', 'change-time']);
|
|||
.bi-infinity {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
.popup {
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
#menu {
|
||||
bottom: 1.5rem;
|
||||
left: -1.75rem;
|
||||
box-shadow: .5rem .5rem 2rem var(--color-shadow);
|
||||
}
|
||||
#vol {
|
||||
--h: 6.5rem;
|
||||
--w: 1rem;
|
||||
display: flex;
|
||||
box-shadow: -.5rem -.5rem 2rem var(--color-shadow);
|
||||
transform: rotateZ(270deg) translateX(calc(calc(var(--h) / 2) - 0.5rem))
|
||||
translateY(calc(calc(var(--w) + 2rem) * -1));
|
||||
}
|
||||
|
|
|
|||
16
src/scripts/colors.js
Normal file
16
src/scripts/colors.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
const c = [
|
||||
"linear-gradient(45deg, #88c0d0, #5e81ac)",
|
||||
"linear-gradient(45deg, #5e81ac, #b48ead)",
|
||||
"linear-gradient(45deg, #a3be8c, #88c0d0)",
|
||||
"linear-gradient(45deg, #ebcb8b, #a3be8c)",
|
||||
"linear-gradient(45deg, #d08770, #bf616a)"
|
||||
];
|
||||
|
||||
export function useColors() {
|
||||
return c
|
||||
}
|
||||
|
||||
export function useRand() {
|
||||
const i = Math.floor(Math.random() * c.length);
|
||||
return c[i]
|
||||
}
|
||||
98
src/scripts/db.js
Normal file
98
src/scripts/db.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
export function useUpdatePlaylist(key, obj, cb = () => null) {
|
||||
|
||||
if (window.db && key) {
|
||||
|
||||
const store = window.db.transaction(['playlist'], "readwrite").objectStore('playlist'),
|
||||
req = store.get(key);
|
||||
|
||||
req.onerror = (e) => {
|
||||
console.log('Error!!', e)
|
||||
}
|
||||
|
||||
req.onsuccess = e => {
|
||||
const itm = e.target.result;
|
||||
|
||||
if (itm) {
|
||||
itm.urls.push(obj)
|
||||
store.put(itm)
|
||||
cb(true)
|
||||
}
|
||||
}
|
||||
|
||||
} else alert('No indexedDB Created')
|
||||
|
||||
}
|
||||
|
||||
export function useCreatePlaylist(key, obj, cb = () => null ) {
|
||||
if (window.db && key && obj) {
|
||||
|
||||
const store = window.db.transaction(['playlist'], "readwrite").objectStore('playlist'),
|
||||
req = store.get(key);
|
||||
|
||||
req.onerror = (e) => {
|
||||
console.log('Error!!', e)
|
||||
}
|
||||
|
||||
req.onsuccess = (e) => {
|
||||
const res = e.target.result;
|
||||
|
||||
if (!res) {
|
||||
|
||||
store.add({
|
||||
name: key, urls: obj
|
||||
});
|
||||
|
||||
cb(res);
|
||||
|
||||
} else {
|
||||
console.log(e.target.result);
|
||||
alert(`Error: Playlist with name ${key} exists`)
|
||||
}
|
||||
|
||||
}
|
||||
} else alert('No indexedDB Created')
|
||||
}
|
||||
|
||||
export function useGetPlaylist(key, cb = () => null ) {
|
||||
|
||||
if (window.db && key) {
|
||||
|
||||
const store = window.db.transaction(['playlist']).objectStore('playlist'),
|
||||
req = store.get(key);
|
||||
|
||||
req.onerror = (e) => {
|
||||
console.log('Error!!', e)
|
||||
}
|
||||
|
||||
req.onsuccess = e => {
|
||||
const res = e.target.result;
|
||||
|
||||
if (res) {
|
||||
cb(res)
|
||||
}
|
||||
}
|
||||
|
||||
} else alert('No indexedDB Created')
|
||||
}
|
||||
|
||||
export function useListPlaylists(cb = () => null) {
|
||||
if (window.db) {
|
||||
|
||||
let pls = [];
|
||||
|
||||
const store = window.db.transaction(['playlist']).objectStore('playlist'),
|
||||
cursor = store.openCursor();
|
||||
|
||||
cursor.onsuccess = (e) => {
|
||||
const pl = e.target.result;
|
||||
|
||||
if (pl) {
|
||||
pls.push(pl.value)
|
||||
pl.continue()
|
||||
} else {
|
||||
cb(pls)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
33
src/scripts/util.js
Normal file
33
src/scripts/util.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
export function usePrefs(key) {
|
||||
if (localStorage) {
|
||||
if (localStorage.get(key)) return true
|
||||
else return false
|
||||
} else return false
|
||||
}
|
||||
|
||||
export function useLazyLoad() {
|
||||
let lazyElems;
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
lazyElems = document.querySelectorAll('.bg-img:not(.lazy)');
|
||||
|
||||
let imgObs = new IntersectionObserver((elems, obs) => {
|
||||
elems.forEach((elem) => {
|
||||
setTimeout(() => {
|
||||
if (elem.isIntersecting) {
|
||||
let ele = elem.target;
|
||||
|
||||
ele.classList.add('lazy');
|
||||
imgObs.unobserve(ele);
|
||||
}
|
||||
}, 20);
|
||||
});
|
||||
});
|
||||
|
||||
lazyElems.forEach((img) => {
|
||||
imgObs.observe(img);
|
||||
});
|
||||
} else {
|
||||
console.log('Failed');
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue