replace background image with svg

- add symlink svg - fix validate playlist thumbnails
2026-06-03 20:13:02 +00:00 · 2022-06-23 12:32:07 +03:00
parent de7aba3ba7
commit 3eaab97f1f
14 changed files with 835 additions and 125 deletions
@@ -18,6 +18,7 @@
    "register-service-worker": "^1.7.1",
    "sass": "^1.49.0",
    "sass-loader": "^10",
+    "vite-svg-loader": "^3.4.0",
    "vue": "^3.0.0",
    "vue-debounce": "^3.0.2",
    "vue-router": "^4.0.0-0",
@@ -28,7 +29,8 @@
    "@vue/compiler-sfc": "^3.0.0",
    "eslint": "^8.7.0",
    "eslint-plugin-vue": "^8.3.0",
-    "vite": "^2.5.4"
+    "vite": "^2.5.4",
+    "vue-svg-loader": "^0.16.0"
  },
  "packageManager": "yarn@3.1.1"
 }
@@ -11,9 +11,10 @@ from PIL import Image

 from app import helpers, settings
 from app.lib import watchdoge
-from app.lib.albumslib import ValidateThumbs
+from app.lib.albumslib import ValidateAlbumThumbs
 from app.lib import trackslib
 from app.lib.populate import CreateAlbums, Populate
+from app.lib.playlistlib import ValidatePlaylistThumbs


@helpers.background
@@ -31,7 +32,8 @@ def run_checks():
    if helpers.Ping()():
        CheckArtistImages()()

-    ValidateThumbs()
+    ValidateAlbumThumbs()
+    ValidatePlaylistThumbs()


@helpers.background
@@ -1,36 +1,16 @@
 """
 This library contains all the functions related to albums.
 """
-from concurrent.futures import ThreadPoolExecutor
-from multiprocessing import Manager
-from dataclasses import dataclass
 import os
 import random
+from dataclasses import dataclass
 from typing import List

-from app import helpers, models
+from app import helpers, instances, models
 from app.lib import taglib
-from tqdm import tqdm
-
-from app.settings import THUMBS_PATH
-from app import instances
 from app.logger import logg
-
-# def get_all_albums() -> List[models.Album]:
-#     """
-#     Returns a list of album objects for all albums in the database.
-#     """
-#     print("Getting all albums...")
-
-#     albums: List[models.Album] = []
-
-#     db_albums = instances.album_instance.get_all_albums()
-
-#     for album in tqdm(db_albums, desc="Creating albums"):
-#         aa = models.Album(album)
-#         albums.append(aa)
-
-#     return albums
+from app.settings import THUMBS_PATH
+from tqdm import tqdm


@dataclass
@@ -54,7 +34,7 @@ class RipAlbumImage:
                break


-class ValidateThumbs:
+class ValidateAlbumThumbs:
    @staticmethod
    def remove_obsolete():
        """
@@ -90,7 +70,7 @@ class ValidateThumbs:
                hash = t_hash.replace(".webp", "")
                RipAlbumImage(hash)

-        logg.info("Ripping lost album thumbnails...")
+        logg.info("Ripping lost album thumbnails")
        # with ThreadPoolExecutor() as pool:
        #     i = pool.map(rip_image, thumbs)
        #     [a for a in i]
@@ -98,7 +78,7 @@ class ValidateThumbs:
        for thumb in thumbs:
            rip_image(thumb)

-        logg.info("Ripping lost album thumbnails...done")
+        logg.info("Ripping lost album thumbnails ... ✅")

    def __init__(self) -> None:
        self.remove_obsolete()
@@ -7,9 +7,6 @@ import string
 from datetime import datetime
 from typing import List

-from tqdm import tqdm
-
-from app import api
 from app import exceptions
 from app import instances
 from app import models
@@ -19,9 +16,13 @@ from PIL import ImageSequence
 from werkzeug import datastructures

 from app.lib import trackslib
+from app.helpers import Get
+from app.logger import get_logger

 TrackExistsInPlaylist = exceptions.TrackExistsInPlaylist

+logg = get_logger()
+

 def add_track(playlistid: str, trackid: str):
    """
@@ -93,27 +94,31 @@ def save_p_image(file: datastructures.FileStorage, pid: str):
    return img_path, thumb_path


-def validate_images():
+class ValidatePlaylistThumbs:
    """
    Removes all unused images in the images/playlists folder.
    """
-    images = []
-    p = instances.playlist_instance.get_all_playlists()
-    playlists = [models.Playlist(p) for p in p]

-    for playlist in playlists:
-        if playlist.image:
-            img_path = playlist.image.split("/")[-1]
-            thumb_path = playlist.thumb.split("/")[-1]
+    def __init__(self) -> None:
+        images = []
+        playlists = Get.get_all_playlists()

-            images.append(img_path)
-            images.append(thumb_path)
+        logg.info("Validating playlist thumbnails")
+        for playlist in playlists:
+            if playlist.image:
+                img_path = playlist.image.split("/")[-1]
+                thumb_path = playlist.thumb.split("/")[-1]

-    p_path = os.path.join(settings.APP_DIR, "images", "playlists")
+                images.append(img_path)
+                images.append(thumb_path)

-    for image in os.listdir(p_path):
-        if image not in images:
-            os.remove(os.path.join(p_path, image))
+        p_path = os.path.join(settings.APP_DIR, "images", "playlists")
+
+        for image in os.listdir(p_path):
+            if image not in images:
+                os.remove(os.path.join(p_path, image))
+
+        logg.info("Validating playlist thumbnails ... ✅")


 def create_new_date():
@@ -13,7 +13,7 @@ class CustomFormatter(logging.Formatter):
    # format = (
    #     "%(asctime)s - %(name)s - %(levelname)s - %(message)s (%(filename)s:%(lineno)d)"
    # )
-    format = "[%(asctime)s] [%(levelname)s] [@%(name)s] >>> %(message)s [%(filename)s:%(lineno)d]"
+    format = "[%(asctime)s] [%(levelname)s] [@%(name)s]ℹ️ %(message)s"

    FORMATS = {
        logging.DEBUG: grey + format + reset,
@@ -42,10 +42,7 @@ logg.addHandler(ch)


 def get_logger():
-    if logger.enable:
-        return logg
-
-    return None
+    return logg


 logg = get_logger()
@@ -1,3 +1,3 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.9912 22.7422C18.9746 22.7422 23.0879 18.6289 23.0879 13.6543C23.0879 8.67969 18.9658 4.56641 13.9824 4.56641C9.00781 4.56641 4.90332 8.67969 4.90332 13.6543C4.90332 18.6289 9.0166 22.7422 13.9912 22.7422ZM13.9912 20.9316C9.95703 20.9316 6.73145 17.6885 6.73145 13.6543C6.73145 9.62012 9.95703 6.38574 13.9824 6.38574C18.0166 6.38574 21.2598 9.62012 21.2686 13.6543C21.2773 17.6885 18.0254 20.9316 13.9912 20.9316ZM14 17.0996C15.9072 17.0996 17.4453 15.5615 17.4453 13.6455C17.4453 11.7471 15.9072 10.2002 14 10.2002C12.084 10.2002 10.5459 11.7471 10.5459 13.6455C10.5459 15.5615 12.084 17.0996 14 17.0996Z" fill="#F2F2F2"/>
+<path d="M13.9912 22.7422C18.9746 22.7422 23.0879 18.6289 23.0879 13.6543C23.0879 8.67969 18.9658 4.56641 13.9824 4.56641C9.00781 4.56641 4.90332 8.67969 4.90332 13.6543C4.90332 18.6289 9.0166 22.7422 13.9912 22.7422ZM13.9912 20.9316C9.95703 20.9316 6.73145 17.6885 6.73145 13.6543C6.73145 9.62012 9.95703 6.38574 13.9824 6.38574C18.0166 6.38574 21.2598 9.62012 21.2686 13.6543C21.2773 17.6885 18.0254 20.9316 13.9912 20.9316ZM14 17.0996C15.9072 17.0996 17.4453 15.5615 17.4453 13.6455C17.4453 11.7471 15.9072 10.2002 14 10.2002C12.084 10.2002 10.5459 11.7471 10.5459 13.6455C10.5459 15.5615 12.084 17.0996 14 17.0996Z" fill="#fff"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.1318 14.1377C25.5928 14.1377 27.6582 12.0811 27.6582 9.61133C27.6582 7.12402 25.6104 5.08496 23.1318 5.08496C20.6533 5.08496 18.6055 7.13281 18.6055 9.61133C18.6055 12.0986 20.6533 14.1377 23.1318 14.1377ZM6.81055 21.7666H21.3916C23.0879 21.7666 24.0723 20.7822 24.0723 18.9014V15.3066C23.5977 15.4121 22.8857 15.4209 22.3232 15.3066V18.752C22.3232 19.5957 21.875 20.0176 21.0664 20.0176H6.9248C6.11621 20.0176 5.66797 19.5957 5.66797 18.7432V12.0723H17.9551C17.709 11.5977 17.5244 11.0791 17.4365 10.5342H5.66797V8.33691C5.66797 7.53711 6.11621 7.11523 6.89844 7.11523H8.56836C9.19238 7.11523 9.56152 7.26465 10.0625 7.66895L10.5547 8.08203C11.1699 8.57422 11.6445 8.75 12.5674 8.75H17.4453C17.5156 8.12598 17.6562 7.58105 17.9551 6.99219H13.0332C12.4004 6.99219 12.0225 6.85156 11.5303 6.44727L11.0381 6.04297C10.4141 5.5332 9.95703 5.36621 9.03418 5.36621H6.54688C4.89453 5.36621 3.91895 6.33301 3.91895 8.1875V18.9014C3.91895 20.791 4.91211 21.7666 6.81055 21.7666ZM23.0176 10.71C22.6836 10.71 22.4463 10.5166 22.4463 10.1826V10.1562C22.4463 9.64648 22.7451 9.36523 23.1406 9.09277C23.6064 8.76758 23.8789 8.58301 23.8789 8.22266C23.8789 7.89746 23.6152 7.67773 23.2109 7.67773C22.8594 7.67773 22.6309 7.82715 22.4375 8.0293C22.2793 8.1875 22.1387 8.35449 21.8662 8.35449C21.5234 8.35449 21.3213 8.14355 21.3213 7.84473C21.3213 7.12402 22.2617 6.63184 23.2285 6.63184C24.3711 6.63184 25.1357 7.27344 25.1357 8.16113C25.1357 8.88184 24.6699 9.1543 24.1689 9.51465C23.8438 9.76074 23.6592 9.91895 23.6152 10.2441C23.5625 10.543 23.3604 10.71 23.0176 10.71ZM23.0176 12.5293C22.6133 12.5293 22.2881 12.2217 22.2881 11.8262C22.2881 11.4307 22.6133 11.123 23.0176 11.123C23.4307 11.123 23.7471 11.4307 23.7471 11.8262C23.7471 12.2217 23.4307 12.5293 23.0176 12.5293Z" fill="#fff"/>
+</svg>
@@ -1,33 +1,36 @@
 <template>
-  <router-link
-    :to="{ name: 'FolderView', params: { path: props.folder.path } }"
-  >
+  <router-link :to="{ name: 'FolderView', params: { path: folder.path } }">
    <div class="f-item">
-      <div class="icon image"></div>
+      <div class="icon">
+        <FolderSvg v-if="!folder.is_sym" />
+        <SymLinkSvg v-if="folder.is_sym" />
+      </div>
      <div class="info">
-        <div class="f-item-text ellip">{{ props.folder.name }}</div>
+        <div class="f-item-text ellip">{{ folder.name }}</div>
        <div class="separator no-border"></div>
-        <div class="f-item-count">{{ props.folder.trackcount }} tracks</div>
+        <div class="f-item-count">{{ folder.trackcount }} tracks</div>
      </div>
    </div>
  </router-link>
 </template>

 <script setup lang="ts">
-const props = defineProps({
-  folder: {
-    type: Object,
-    required: true,
-  },
-});
+import { Folder } from "@/interfaces";
+import FolderSvg from "../../assets/icons/folder.svg";
+import SymLinkSvg from "../../assets/icons/symlink.svg";
+
+defineProps<{
+  folder: Folder;
+}>();
 </script>

 <style lang="scss">
 .f-container .f-item {
  height: 5rem;
-  display: flex;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  padding-right: 1rem;
  align-items: center;
-  position: relative;
  background-color: $gray4;
  transition: all 0.2s ease;
  border-radius: 0.75rem;
@@ -37,16 +40,10 @@ const props = defineProps({
  }

  .icon {
-    background-image: url(../../assets/icons/folder.svg);
-    width: 2rem;
-    height: 1.5rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
+    margin: 0 0.75rem;
  }

  .info {
-    width: 100%;
-
    .f-item-count {
      font-size: 0.8rem;
      color: rgba(219, 217, 217, 0.63);
@@ -7,7 +7,10 @@
    >
      <div class="nav-button" id="home-button" v-motion-slide-from-left-100>
        <div class="in">
-          <div class="nav-icon image" :id="`${menu.name}-icon`"></div>
+          <!-- <div class="nav-icon image" :id="`${menu.name}-icon`"></div> -->
+          <!-- <img src="../../assets/icons/a.svg" alt="" /> -->
+          <!-- <HomeSvg /> -->
+          <component :is="menu.icon"></component>
          <span>{{ menu.name }}</span>
        </div>
      </div>
@@ -16,39 +19,47 @@
 </template>

 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import HomeSvg from "../../assets/icons/home.svg";
+import AlbumSvg from "../../assets/icons/album.svg";
+import ArtistSvg from "../../assets/icons/artist.svg";
+import PlaylistSvg from "../../assets/icons/playlist.svg";
+import FolderSvg from "../../assets/icons/folder.svg";

 const menus = [
-  {
-    name: "home",
-    route_name: "Home",
-  },
-  {
-    name: "albums",
-    route_name: "AlbumsView",
-  },
-  {
-    name: "artists",
-    route_name: "ArtistsView",
-  },
+  // {
+  //   name: "home",
+  //   route_name: "Home",
+  //   icon: HomeSvg,
+  // },
+  // {
+  //   name: "albums",
+  //   route_name: "AlbumsView",
+  //   icon: AlbumSvg,
+  // },
+  // {
+  //   name: "artists",
+  //   route_name: "ArtistsView",
+  //   icon: ArtistSvg,
+  // },
  {
    name: "playlists",
    route_name: "Playlists",
+    icon: PlaylistSvg,
  },
  {
    name: "folders",
    route_name: "FolderView",
    params: { path: "$home" },
+    icon: FolderSvg,
  },
-  {
-    name: "tags",
-  },
-  {
-    name: "settings",
-    route_name: "SettingsView",
-  },
+  // {
+  //   name: "tags",
+  // },
+  // {
+  //   name: "settings",
+  //   route_name: "SettingsView",
+  // },
 ];
-
 </script>

 <style lang="scss">
@@ -85,35 +96,30 @@ const menus = [
      }
    }

-    #home-icon {
-      background-image: url(../../assets/icons/home.svg);
-    }
+    // #mixes-icon {
+    //   background-image: url(../../assets/icons/mix.svg);
+    // }

-    #albums-icon {
-      background-image: url(../../assets/icons/album.svg);
-    }
+    // #folders-icon {
+    //   background-image: url(../../assets/icons/folder.svg);
+    // }
+    // #settings-icon {
+    //   background-image: url(../../assets/icons/settings.svg);
+    // }
+    // #tags-icon {
+    //   background-image: url(../../assets/icons/tag.svg);
+    // }
+  }

-    #artists-icon {
-      background-image: url(../../assets/icons/artist.svg);
-    }
+  svg {
+    width: 2rem;
+    height: 2rem;
+    margin: 0 $small 0 $small;
+    border-radius: $small;
+  }

-    #playlists-icon {
-      background-image: url(../../assets/icons/playlist.svg);
-    }
-
-    #mixes-icon {
-      background-image: url(../../assets/icons/mix.svg);
-    }
-
-    #folders-icon {
-      background-image: url(../../assets/icons/folder.svg);
-    }
-    #settings-icon {
-      background-image: url(../../assets/icons/settings.svg);
-    }
-    #tags-icon {
-      background-image: url(../../assets/icons/tag.svg);
-    }
+  svg > path {
+    fill: $red !important;
  }
 }
 </style>
@@ -22,6 +22,7 @@ export interface Folder {
  path: string;
  trackcount: number;
  subdircount: number;
+  is_sym: boolean;
 }

 export interface AlbumInfo {
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
@@ -5,5 +5,6 @@
      "baseUrl": ["./"],
      "@/*": ["./src/*"]
    }
-  }
+  },
+  "include": ["src/svg.d.ts"]
 }
@@ -1,9 +1,11 @@
 import { defineConfig } from "vite";
+import svgLoader from 'vite-svg-loader'
 import vue from "@vitejs/plugin-vue";
+
 const path = require("path");

 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), svgLoader()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),