drop random gradients

package.json

@@ -11,17 +11,17 @@
   },
   "dependencies": {
     "bootstrap-icons": "^1.11.3",
-    "dompurify": "^3.0.9",
+    "dompurify": "^3.1.0",
     "peerjs": "^1.5.2",
     "pinia": "^2.1.7",
-    "shaka-player": "^4.7.11",
+    "shaka-player": "^4.7.13",
     "sortablejs": "^1.15.2",
     "vue": "^3.2.38"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
     "prettier": "^3.2.5",
-    "vite": "^5.1.5",
+    "vite": "^5.2.10",
-    "vite-plugin-pwa": "^0.19.2"
+    "vite-plugin-pwa": "^0.19.8"
   }
 }

src/App.vue

@@ -183,7 +183,6 @@ onMounted(() => {
     <img
       v-if="data.state.art"
       class="art"
-      loading="lazy"
       :src="data.state.art" />
 
     <div class="wrapper">

src/assets/base.css

@@ -34,6 +34,7 @@ body[date-theme^='black'] {
 
   --color-shadow: #000;
   --color-blur: #11111190;
+  --color-gradient: linear-gradient(45deg, oklab(0.9 -0.05 -0.04), oklab(0.57 -0.03 -0.09));
   --color-scrollbar: var(--vt-c-blue);
 
   --color-heading: var(--vt-c-text-dark-1);
@@ -72,7 +73,9 @@ body[data-theme^='nord'] {
   --color-border-hover: #4c566a;
 
   --color-shadow: #4c566a;
-  --color-scrollbar: #88c0d0;
+  --color-scrollbar: var(--color-foreground);
+
+  --color-gradient: linear-gradient(45deg, var(--color-foreground), #5E81AC);
 
   --color-heading: #d8dee9;
   --color-text: #d8dee9;
@@ -88,7 +91,9 @@ body[data-theme^='dracula'] {
   --color-border-hover: #44475a;
 
   --color-shadow: #6272a4;
-  --color-scrollbar: #bd93f9;
+  --color-scrollbar: var(--color-foreground);
+
+  --color-gradient: linear-gradient(45deg, var(--color-foreground), var(--color-shadow));
 
   --color-heading: var(--vt-c-text-dark-1);
   --color-text: var(--vt-c-text-dark-2);
@@ -302,7 +307,7 @@ img {
 }
 .bg-img {
   appearance: none;
-  background-image: var(--grad);
+  background-image: var(--color-gradient);
   background-position: center;
   background-size: cover;
   border-radius: 0.25rem;
@@ -325,8 +330,7 @@ img {
   --translate: 0;
   background: var(--background);
   box-shadow: var(--shadow);
-  transform: translateX(calc(var(--translate) / 2))
+  transform: translate(calc(var(--translate) / 2), calc(var(--translate) / 2));
-    translateY(calc(var(--translate) / 2));
 }
 .pop:hover {
   --background: var(--color-background-soft);
@@ -337,7 +341,7 @@ img {
   --background: var(--color-border);
 }
 .pop-2 {
-  transform: translateX(var(--translate)) translateY(var(--translate));
+  transform: translate(var(--translate), var(--translate));
   box-shadow: var(--shadow);
 }
 .prm .pop,

src/components/AlbumItem.vue

@@ -1,9 +1,7 @@
 <script setup>
-import { useRand } from '@/scripts/colors.js';
 import { useI18n } from '@/stores/misc.js';
 
-const rand = useRand(),
+const { t } = useI18n();
-  { t } = useI18n();
 
 defineProps({
   name: String,
@@ -11,7 +9,6 @@ defineProps({
     type: String,
     default: '',
   },
-  grad: String,
   art: {
     type: String,
     default: '/1x1.png',
@@ -45,7 +42,6 @@ defineEmits(['open-album']);
   margin: auto;
 }
 .card-bg {
-  --grad: v-bind('grad || rand');
   height: 13rem;
   width: 13rem;
 }

src/components/Artist.vue

@@ -117,7 +117,7 @@ p.more {
 }
 .subs:hover,
 .subs[data-active='true'] {
-  background-color: var(--color-foreground);
+  background: var(--color-gradient);
   color: var(--color-background);
   background-clip: border-box;
 }

src/components/Btn.vue

@@ -19,7 +19,7 @@ defineEmits(['click']);
   color: var(--color-text);
   padding: 0;
   line-height: 0;
-  background: var(--color-foreground);
+  background: var(--color-gradient);
   border-radius: 50%;
   vertical-align: -1rem;
   text-align: center;
@@ -27,7 +27,7 @@ defineEmits(['click']);
   margin-right: auto;
 }
 .bi-play {
-  color: var(--color-background-soft);
+  color: var(--color-background);
   box-shadow: 0 0 1rem var(--color-foreground);
   transition: all 0.4s ease;
 }

src/components/Library.vue

@@ -4,8 +4,7 @@ import { ref, reactive, watch, onMounted } from 'vue';
 import AlbumItem from './AlbumItem.vue';
 import Modal from './Modal.vue';
 
-import { useRand, parseThumb } from '@/scripts/colors.js';
+import { useStore, parseThumb } from '@/scripts/util.js';
-import { useStore } from '@/scripts/util.js';
 
 import {
   useListPlaylists,
@@ -444,7 +443,6 @@ onMounted(async () => {
     <div class="grid-3">
       <AlbumItem
         :name="t('title.offline')"
-        :grad="useRand()"
         @open-album="OpenOffline" />
       <AlbumItem
         v-for="i in list"
@@ -452,7 +450,6 @@ onMounted(async () => {
         :name="i.name"
         :author="t('title.songs') + ' • ' + i.urls.length"
         :art="parseThumb(i.urls[0]?.url, proxy)"
-        :grad="useRand()"
         @open-album="Open(i.name)" />
     </div>
 

src/components/SongItem.vue

@@ -4,7 +4,6 @@ import { ref } from 'vue';
 import AddToPlaylist from '@/components/AddToPlaylist.vue';
 
 import { getJsonAuth } from '@/scripts/fetch.js';
-import { useRand } from '@/scripts/colors.js';
 import { useStore, useShare } from '@/scripts/util.js';
 import { useUpdatePlaylist } from '@/scripts/db.js';
 
@@ -12,8 +11,7 @@ import { useResults, useArtist } from '@/stores/results.js';
 import { useData, usePlayer } from '@/stores/player.js';
 import { useI18n } from '@/stores/misc.js';
 
-const rand = useRand(),
+const data = useData(),
-  data = useData(),
   results = useResults(),
   player = usePlayer(),
   artist = useArtist(),
@@ -193,7 +191,6 @@ button.bi-three-dots-vertical {
   padding: 0.5rem;
 }
 .song-bg {
-  --grad: v-bind('rand');
   width: 120px;
   height: 120px;
 }

src/scripts/colors.js

@@ -1,20 +0,0 @@
-const c = [
-  'linear-gradient(45deg, oklab(0.9 -0.05 -0.04), oklab(0.57 -0.03 -0.09))',
-  //'linear-gradient(45deg, oklab(0.68 -0.02 -0.06), oklab(0.65 0.11 -0.05))',
-  //'linear-gradient(45deg, #a3be8c, #88c0d0)',
-  //'linear-gradient(45deg, #ebcb8b, #a3be8c)',
-  //'linear-gradient(45deg, oklab(0.82 0.09 0.07), oklab(0.58 0.14 0.04)',
-];
-
-export function useRand() {
-  const i = Math.floor(Math.random() * c.length);
-  return c[i];
-}
-
-export const parseThumb = (url, proxy) =>
-  url && proxy
-    ? `${proxy}/vi_webp/${url.replace(
-        '/watch?v=',
-        '',
-      )}/maxresdefault.webp?host=i.ytimg.com`
-    : '/1x1.png';

src/scripts/util.js

@@ -19,6 +19,14 @@ export function useAutoTheme(t) {
     : t;
 }
 
+export const parseThumb = (url, proxy) =>
+  url && proxy
+    ? `${proxy}/vi_webp/${url.replace(
+        '/watch?v=',
+        '',
+      )}/maxresdefault.webp?host=i.ytimg.com`
+    : '/1x1.png';
+
 export function useVerifyAuth(hash) {
   return PL_EXP.test(hash);
 }