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

Changes:

Browse source 
- Closes #14
- Removed margin for player (#9)
- Bug Fixes
- Blur theme
This commit is contained in:
Shiny Nematoda 2022-08-25 11:53:13 +00:00
parent 6b349380af
commit 8548a3646e
No known key found for this signature in database
GPG key ID: 6506D50F5613A42D
11 changed files with 85 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Dockerfile
View file

@ -7,9 +7,9 @@ WORKDIR /app/
COPY . .
RUN sed -i "s/hyperpipeapi.onrender.com/$api/g" src/scripts/fetch.js src/components/Prefs.vue
RUN sed -i "s/hyperpipeapi.onrender.com/$api/g" index.html src/scripts/fetch.js src/components/Prefs.vue
RUN sed -i "s/pipedapi.kavin.rocks/$pipedapi/g" src/scripts/fetch.js src/components/Prefs.vue
RUN sed -i "s/pipedapi.kavin.rocks/$pipedapi/g" index.html src/scripts/fetch.js src/components/Prefs.vue
RUN npm install && \
npm run build

8
index.html
View file

@ -4,11 +4,11 @@
<meta charset="UTF-8" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src *; media-src * blob:; script-src 'self'; style-src 'unsafe-inline' 'self' cdn.jsdelivr.net; font-src cdn.jsdelivr.net; connect-src *" />
content="default-src 'self'; img-src *; media-src * blob:; style-src 'unsafe-inline' 'self'; connect-src *" />
<link rel="icon" href="/favicon.svg" />
<link rel="preconnect" href="https://pipedapi.kavin.rocks" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://hyperpipeapi.onrender.com" />
<link rel="dns-prefetch" href="https://pipedapi.kavin.rocks" />
<link rel="dns-prefetch" href="https://hyperpipe-proxy.onrender.com" />
<link rel="dns-prefetch" href="https://piped-instances.kavin.rocks" />
@ -22,9 +22,9 @@
<div id="app"></div>
<link
<!--link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css" />
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css" /-->
<script type="module" src="/src/main.js" defer></script>
</body>
</html>

63
package-lock.json generated
View file

@ -8,12 +8,12 @@
"name": "hyperpipe",
"version": "0.0.0",
"dependencies": {
"bootstrap-icons": "^1.9.1",
"buffer": "^6.0.3",
"dompurify": "^2.3.10",
"mux.js": "^6.2.0",
"peerjs": "^1.4.6",
"pinia": "^2.0.16",
"readable-stream": "^4.1.0",
"shaka-player": "^4.1.2",
"stream-browserify": "^3.0.0",
"vue": "^3.2.31",
@ -175,17 +175,6 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
"integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
},
"node_modules/abort-controller": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
"integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
"dependencies": {
"event-target-shim": "^5.0.0"
},
"engines": {
"node": ">=6.5"
}
},
"node_modules/base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@ -205,6 +194,11 @@
}
]
},
"node_modules/bootstrap-icons": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
"integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
},
"node_modules/buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@ -608,14 +602,6 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
"node_modules/event-target-shim": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
"integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
"engines": {
"node": ">=6"
}
},
"node_modules/eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@ -871,17 +857,6 @@
"node": ">= 0.6.0"
}
},
"node_modules/readable-stream": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.1.0.tgz",
"integrity": "sha512-sVisi3+P2lJ2t0BPbpK629j8wRW06yKGJUcaLAGXPAUhyUxVJm7VsCTit1PFgT4JHUDMrGNR+ZjSKpzGaRF3zw==",
"dependencies": {
"abort-controller": "^3.0.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
@ -1255,19 +1230,16 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
"integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
},
"abort-controller": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
"integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
"requires": {
"event-target-shim": "^5.0.0"
}
},
"base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
},
"bootstrap-icons": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
"integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
},
"buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@ -1470,11 +1442,6 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
"event-target-shim": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
"integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
},
"eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@ -1625,14 +1592,6 @@
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
},
"readable-stream": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.1.0.tgz",
"integrity": "sha512-sVisi3+P2lJ2t0BPbpK629j8wRW06yKGJUcaLAGXPAUhyUxVJm7VsCTit1PFgT4JHUDMrGNR+ZjSKpzGaRF3zw==",
"requires": {
"abort-controller": "^3.0.0"
}
},
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",

1
package.json
View file

@ -10,6 +10,7 @@
"check": "prettier --check ."
},
"dependencies": {
"bootstrap-icons": "^1.9.1",
"buffer": "^6.0.3",
"dompurify": "^2.3.10",
"mux.js": "^6.2.0",

14
src/App.vue
View file

@ -173,6 +173,7 @@ async function getAlbum(e) {
});
useRoute(e);
nav.state.page = 'home';
artist.reset();
}
@ -200,6 +201,7 @@ async function getArtist(e) {
artist.set(json);
useRoute('/channel/' + e);
nav.state.page = 'home';
}
async function getNext(hash) {
@ -385,11 +387,17 @@ onMounted(() => {
<Prefs v-if="nav.state.page == 'prefs'" />
</main>
<Playlists v-if="player.state.playlist" @playthis="playThis" />
<Transition name="fade">
<Playlists v-if="player.state.playlist" @playthis="playThis" />
</Transition>
<Lyrics v-if="player.state.lyrics" />
<Transition name="fade">
<Lyrics v-if="player.state.lyrics" />
</Transition>
<Info v-if="player.state.info" :text="data.state.description" />
<Transition name="fade">
<Info v-if="player.state.info" :text="data.state.description" />
</Transition>
<StatusBar @save="SaveTrack" />

18
src/assets/base.css
View file

@ -38,6 +38,24 @@ body[data-theme='dark'] {
--color-text: var(--vt-c-text-dark-2);
}
body[data-theme='black'] {
--color-background: #000;
--color-shadow: var(--vt-c-black);
}
body[data-theme='blur'] #statusbar,
body[data-theme='blur'] .txt-modal,
body[data-theme='blur'] .pl-modal,
body[data-theme='blur'] .modal-box,
body[data-theme='blur'] .popup input[type='text'] {
background: #11111199;
backdrop-filter: blur(10px);
}
body[data-theme='blur'] .modal {
backdrop-filter: blur(5px);
}
body[data-theme='light'] {
--color-foreground: cornflowerblue;
--color-background: var(--vt-c-white);

1
src/components/Prefs.vue
View file

@ -63,6 +63,7 @@ onMounted(() => {
@change="setTheme($event.target.value)">
<option value="dark">Dark (Default)</option>
<option value="light">Light</option>
<option value="blur">Blur</option>
<option value="dracula">Dracula</option>
<option value="nord">Nord</option>
</select>

1
src/components/SearchBar.vue
View file

@ -30,6 +30,7 @@ const show = ref(false),
<style scoped>
.popup {
background: transparent;
right: 0;
top: -0.5rem;
bottom: -0.5rem;

70
src/components/StatusBar.vue
View file

@ -118,38 +118,40 @@ function Save() {
player.state.lyrics ? player.toggle('lyrics') : '';
player.state.info ? player.toggle('info') : '';
"></button>
<div id="menu" v-if="showme.menu" class="popup">
<button
id="info-btn"
class="bi bi-info-circle"
aria-label="Show Information About Song"
@click="player.toggle('info')"></button>
<button
id="addToPlaylist"
title="Add Current Song to a Playlist"
aria-label="Add Current Song to a Playlist"
class="bi bi-collection"
@click="Save"></button>
<button
id="list-btn"
title="Current Playlist"
aria-label="Current Playlist"
class="bi bi-music-note-list"
:data-active="player.state.playlist"
@click="player.toggle('playlist')"></button>
<button
id="btn-lyrics"
class="bi bi-file-music"
:data-active="player.state.lyrics"
@click="player.toggle('lyrics')"></button>
<button
id="loop-btn"
title="Loop"
aria-label="Loop"
class="bi bi-infinity"
:data-active="player.state.loop"
@click="player.toggle('loop')"></button>
</div>
<Transition name="fade">
<div id="menu" v-if="showme.menu" class="popup">
<button
id="info-btn"
class="bi bi-info-circle"
aria-label="Show Information About Song"
@click="player.toggle('info')"></button>
<button
id="addToPlaylist"
title="Add Current Song to a Playlist"
aria-label="Add Current Song to a Playlist"
class="bi bi-collection"
@click="Save"></button>
<button
id="list-btn"
title="Current Playlist"
aria-label="Current Playlist"
class="bi bi-music-note-list"
:data-active="player.state.playlist"
@click="player.toggle('playlist')"></button>
<button
id="btn-lyrics"
class="bi bi-file-music"
:data-active="player.state.lyrics"
@click="player.toggle('lyrics')"></button>
<button
id="loop-btn"
title="Loop"
aria-label="Loop"
class="bi bi-infinity"
:data-active="player.state.loop"
@click="player.toggle('loop')"></button>
</div>
</Transition>
</div>
</div>
</template>
@ -165,12 +167,8 @@ function Save() {
background: var(--color-background);
min-height: 15vh;
}
.statusbar-left {
margin-left: auto;
}
.statusbar-right {
margin-left: 0.5rem;
margin-right: auto;
}
.bi-play,
.bi-pause {

2
src/components/TextModal.vue
View file

@ -33,6 +33,4 @@
letter-spacing: 0.1rem;
font-weight: 600;
}
@media();
</style>

2
src/main.js
View file

@ -3,6 +3,8 @@ import { createPinia } from 'pinia';
import App from './App.vue';
import('bootstrap-icons/font/bootstrap-icons.css');
const pinia = createPinia(),
app = createApp(App);