diff --git a/Dockerfile b/Dockerfile index 3a89bda..9417a43 100644 --- a/Dockerfile +++ b/Dockerfile @@ -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 diff --git a/index.html b/index.html index a54dbfb..ea4a054 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,11 @@ + content="default-src 'self'; img-src *; media-src * blob:; style-src 'unsafe-inline' 'self'; connect-src *" /> - + @@ -22,9 +22,9 @@
- + href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css" /--> diff --git a/package-lock.json b/package-lock.json index b349240..855a6e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 5a8afc4..414b876 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.vue b/src/App.vue index 756eb33..357c0a4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -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(() => { - + + + - + + + - + + + diff --git a/src/assets/base.css b/src/assets/base.css index c3e0a1c..ab530ad 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -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); diff --git a/src/components/Prefs.vue b/src/components/Prefs.vue index 07580c5..1110f89 100644 --- a/src/components/Prefs.vue +++ b/src/components/Prefs.vue @@ -63,6 +63,7 @@ onMounted(() => { @change="setTheme($event.target.value)"> + diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue index e79bfcf..8a9e428 100644 --- a/src/components/SearchBar.vue +++ b/src/components/SearchBar.vue @@ -30,6 +30,7 @@ const show = ref(false), diff --git a/src/main.js b/src/main.js index 7694343..6cf6e19 100644 --- a/src/main.js +++ b/src/main.js @@ -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);