wip

tamland · Nov 26, 2024 · 7ceb306 · 7ceb306
1 parent 696c9b7
commit 7ceb306
Show file tree

Hide file tree

Showing 36 changed files with 269 additions and 225 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@iconify-icons/bi": "^1.2.2",
     "@vueuse/core": "^11.1.0",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^5.3.3",
     "bootstrap-vue": "^2.23.1",
     "icecast-metadata-stats": "^0.1.1",
     "lodash-es": "^4.17.21",

diff --git a/public/index.html b/public/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="light"  >
   <head data-build="<%= process.env.VUE_APP_BUILD %>">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <% if (process.env.NODE_ENV === "production") { %>
-    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src *; media-src *; manifest-src 'self'; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-624gmqlO23N0g1Ru4tkjuaPEoL/hXP4w7tUqel4WM98=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-5uOIRR03mYcVoiexgzGGALQ0p1Babe2XxbeIl9t1UpA=' 'sha256-lM8P08IzH0mbT5Tvlm1F5BY3h0gPsb0qNpnZW9YHc7A='; script-src 'self'; base-uri 'self';">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src data: *; media-src *; manifest-src 'self'; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-624gmqlO23N0g1Ru4tkjuaPEoL/hXP4w7tUqel4WM98=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-5uOIRR03mYcVoiexgzGGALQ0p1Babe2XxbeIl9t1UpA=' 'sha256-lM8P08IzH0mbT5Tvlm1F5BY3h0gPsb0qNpnZW9YHc7A='; script-src 'self'; base-uri 'self';">
     <% } else { %>
-    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src *; media-src *; manifest-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; base-uri 'self';">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src *; img-src data: *; media-src *; manifest-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; base-uri 'self';">
     <% } %>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000" />

diff --git a/src/app/Logo.vue b/src/app/Logo.vue
@@ -18,15 +18,15 @@
         <rect width="5.994" height="22.372" x="119.04" y="230.78" rx="2.997" ry="2.997" />
       </g>
     </svg>
-    <span class="text-body ml-2 text-nowrap">
+    <span class="text-body ms-2 text-nowrap">
       <span>airsonic&nbsp;</span>
       <span class="text-muted">(refix)</span>
     </span>
   </div>
 </template>
 <style scoped>
   svg {
-    fill: var(--primary);
+    fill: var(--bs-primary);
     height: 32px;
     margin-bottom: 2px;
   }

diff --git a/src/app/Sidebar.vue b/src/app/Sidebar.vue
@@ -3,30 +3,40 @@
     <div class="sidebar-fixed d-none d-md-block">
       <SidebarNav />
     </div>
-    <b-sidebar
-      :visible="store.menuVisible"
-      class="d-md-none"
-      sidebar-class="elevated"
-      bg-variant=""
-      shadow="lg"
-      no-header
-      backdrop
-      backdrop-variant=""
-      @hidden="store.hideMenu"
+
+    <div
+      class="offcanvas-start"
+      tabindex="-1"
+      :class="store.menuVisible ? 'offcanvas showing': 'offcanvas hiding'"
+      @click="store.hideMenu"
     >
-      <SidebarNav />
-    </b-sidebar>
+      <div class="offcanvas-body p-0">
+        <SidebarNav />
+      </div>
+
+      <!--      <b-sidebar-->
+      <!--      :visible="store.menuVisible"-->
+      <!--      class="d-md-none"-->
+      <!--      sidebar-class="elevated offcanvas"-->
+      <!--      bg-variant=""-->
+      <!--      shadow="lg"-->
+      <!--      no-header-->
+      <!--      backdrop-->
+      <!--      backdrop-variant=""-->
+      <!--      @hidden="store.hideMenu"-->
+      <!--    >-->
+      <!--      <SidebarNav />-->
+      <!--    </b-sidebar>-->
+    </div>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue'
   import SidebarNav from './SidebarNav.vue'
   import { useMainStore } from '@/shared/store'
-  import { BSidebar } from 'bootstrap-vue'
 
   export default defineComponent({
     components: {
-      BSidebar,
       SidebarNav,
     },
     setup() {
@@ -37,12 +47,14 @@
   })
 </script>
 <style>
-  .sidebar-container .sidebar-fixed {
+  .sidebar-container .nav {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
+  }
+
+  .sidebar-container .sidebar-fixed {
     padding-bottom: 100px;
     width: 250px;
-
     position: sticky;
     top: 0;
     max-height: 100vh;
@@ -78,17 +90,17 @@
   }
 
   .sidebar-container .nav-link:not(.router-link-active) .icon {
-    color: var(--text-muted);
+    color: var(--bs-secondary-color); /* TODO */
   }
   .sidebar-container .nav-link:hover {
     color: inherit;
     background-color: rgba(255, 255, 255, 0.045);
   }
   .sidebar-container .nav-link.router-link-active {
-    color: var(--primary);
+    color: var(--bs-primary);
     background-color: rgba(255, 255, 255, 0.045);
   }
   .sidebar-container .nav-link.router-link-active:hover {
-    color: var(--primary);
+    color: var(--bs-primary);
   }
 </style>
diff --git a/src/app/TopNav.vue b/src/app/TopNav.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="d-flex align-items-center mb-2">
-    <button class="navbar-toggler text-white d-md-none" @click="store.showMenu">
+    <button class="btn navbar-toggler text-white d-md-none" @click="store.showMenu">
       <Icon icon="nav" />
     </button>
 
-    <div class="ml-auto" />
+    <div class="ms-auto" />
 
-    <SearchForm />
+    <SearchForm class="mx-2" />
 
     <template v-if="store.username">
-      <b-dropdown variant="link" right no-caret>
+      <b-dropdown variant="link" right no-caret toggle-class="px-0">
         <template #button-content>
           <Avatar>
             <Icon icon="person" />
           </Avatar>
         </template>
-        <b-dropdown-text>
+        <div class="px-3 py-1">
           {{ store.username }}
-        </b-dropdown-text>
+        </div>
         <b-dropdown-divider />
         <b-dropdown-item :href="store.server" target="_blank" rel="noopener noreferrer">
           Server <Icon icon="link" />

diff --git a/src/auth/Login.vue b/src/auth/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row align-items-center h-100 mt-5">
+  <div class="d-flex align-items-center h-100 mt-5">
     <div v-if="!displayForm" class="mx-auto">
       <span class="spinner-border " />
     </div>
@@ -10,25 +10,25 @@
             <div class="d-flex mb-2">
               <Logo class="mx-auto" />
             </div>
-            <div v-if="!config.serverUrl" class="form-group">
-              <label>Server</label>
+            <div v-if="!config.serverUrl" class="mb-3">
+              <label class="form-label">Server</label>
               <input v-model="server" name="server" type="text"
                      class="form-control" :class="{'is-invalid': hasError}">
             </div>
-            <div class="form-group">
-              <label>Username</label>
+            <div class="mb-3">
+              <label class="form-label">Username</label>
               <input v-model="username" name="username" type="text"
                      class="form-control" :class="{'is-invalid': hasError}">
             </div>
-            <div class="form-group">
-              <label>Password</label>
+            <div class="mb-3">
+              <label class="form-label">Password</label>
               <input v-model="password" name="password" type="password"
                      class="form-control" :class="{'is-invalid': hasError}">
             </div>
             <div v-if="error != null" class="alert alert-danger">
               Could not log in. ({{ error.message }})
             </div>
-            <button class="btn btn-primary btn-block" :disabled="busy" @click="login">
+            <button class="btn btn-primary w-100" :disabled="busy" @click="login">
               <span v-show="false" class="spinner-border spinner-border-sm" /> Log in
             </button>
           </form>

diff --git a/src/library/album/AlbumDetails.vue b/src/library/album/AlbumDetails.vue
@@ -18,12 +18,12 @@
           </span>
         </div>
         <span v-if="album.year" class="mx-1"> • {{ album.year }}</span>
-        <span class="mr-3" />
+        <span class="me-3" />
         <div class="d-flex flex-nowrap">
-          <ExternalLink v-if="album.lastFmUrl" :href="album.lastFmUrl" class="btn btn-link p-0 mr-2" title="Last.fm">
+          <ExternalLink v-if="album.lastFmUrl" :href="album.lastFmUrl" class="btn btn-link p-0 me-2" title="Last.fm">
             <IconLastFm />
           </ExternalLink>
-          <ExternalLink v-if="album.musicBrainzUrl" :href="album.musicBrainzUrl" class="btn btn-link mr-2 p-0" title="MusicBrainz">
+          <ExternalLink v-if="album.musicBrainzUrl" :href="album.musicBrainzUrl" class="btn btn-link me-2 p-0" title="MusicBrainz">
             <IconMusicBrainz />
           </ExternalLink>
         </div>
@@ -43,10 +43,10 @@
       </OverflowFade>
 
       <div class="text-nowrap mt-3">
-        <b-button variant="secondary" class="mr-2" @click="playNow">
+        <b-button variant="secondary" class="me-2" @click="playNow">
           <Icon icon="play" /> Play
         </b-button>
-        <b-button variant="secondary" class="mr-2" @click="shuffleNow">
+        <b-button variant="secondary" class="me-2" @click="shuffleNow">
           <Icon icon="shuffle" /> Shuffle
         </b-button>
         <OverflowMenu class="px-1">

diff --git a/src/library/artist/ArtistDetails.vue b/src/library/artist/ArtistDetails.vue
@@ -12,14 +12,14 @@
           <strong>{{ item.albumCount }}</strong> albums
         </span>
         <span class="mx-1">•</span>
-        <span class="text-nowrap mr-3">
+        <span class="text-nowrap me-3">
           <strong>{{ item.trackCount }}</strong> tracks
         </span>
         <div class="d-flex flex-nowrap">
-          <ExternalLink v-if="item.lastFmUrl" :href="item.lastFmUrl" class="btn btn-link p-0 mr-2" title="Last.fm">
+          <ExternalLink v-if="item.lastFmUrl" :href="item.lastFmUrl" class="btn btn-link p-0 me-2" title="Last.fm">
             <IconLastFm />
           </ExternalLink>
-          <ExternalLink v-if="item.musicBrainzUrl" :href="item.musicBrainzUrl" class="btn btn-link mr-2 p-0" title="MusicBrainz">
+          <ExternalLink v-if="item.musicBrainzUrl" :href="item.musicBrainzUrl" class="btn btn-link me-2 p-0" title="MusicBrainz">
             <IconMusicBrainz />
           </ExternalLink>
         </div>
@@ -38,7 +38,7 @@
       </OverflowFade>
 
       <div class="text-nowrap mt-3">
-        <b-button variant="secondary" :disabled="item.topTracks.length === 0" class="mr-2" @click="playNow">
+        <b-button variant="secondary" :disabled="item.topTracks.length === 0" class="me-2" @click="playNow">
           <Icon icon="play" /> Play
         </b-button>
         <b-button variant="secondary" :disabled="item.topTracks.length === 0" @click="shuffleNow">

diff --git a/src/library/file/Files.vue b/src/library/file/Files.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="d-flex justify-content-between align-items-center mb-2">
-      <h1 class="mb-0 mr-2 text-truncate">
+      <h1 class="mb-0 me-2 text-truncate">
         Files
       </h1>
     </div>

diff --git a/src/library/playlist/CreatePlaylistModal.vue b/src/library/playlist/CreatePlaylistModal.vue
@@ -1,13 +1,13 @@
 <template>
   <b-modal :visible="visible" @ok="confirm" @change="change">
-    <template #modal-header-close>
-      <Icon icon="x" />
+    <template #modal-header>
+      <h5 class="modal-title">
+        New playlist
+      </h5>
+      <button class="btn-close" @click="change" />
     </template>
-    <template #modal-title>
-      New playlist
-    </template>
-    <div class="form-group">
-      <label>Name</label>
+    <div class="mb-3">
+      <label class="form-label">Name</label>
       <input v-model="name" class="form-control" type="text">
     </div>
     <template #modal-ok>

diff --git a/src/library/playlist/Playlist.vue b/src/library/playlist/Playlist.vue
@@ -1,10 +1,10 @@
 <template>
   <ContentLoader v-slot :loading="playlist == null">
     <div class="d-flex align-items-center mb-2">
-      <h1 class="mb-0 mr-2 text-truncate">
+      <h1 class="mb-0 me-2 text-truncate">
         {{ playlist.name }}
       </h1>
-      <OverflowMenu class="ml-auto">
+      <OverflowMenu class="ms-auto">
         <ContextMenuItem icon="edit" :disabled="playlist.isReadOnly" @click="showEditModal = true">
           Edit
         </ContextMenuItem>
@@ -23,23 +23,23 @@
       <strong>{{ formatDuration(playlist.duration) }}</strong>
       <template v-if="playlist.isPublic">
         <span class="mx-1">•</span>
-        <span  class="badge badge-secondary badge-pill">
+        <span class="badge bg-secondary rounded-pill">
           Public
         </span>
       </template>
     </div>
 
-    <div v-if="playlist.comment"  class="mt-3">
+    <div v-if="playlist.comment" class="mt-3">
       {{ playlist.comment }}
     </div>
 
     <div class="text-nowrap mt-3">
-    <b-button variant="secondary" :disabled="playlist.tracks.length === 0" class="mr-2" @click="playNow">
-      <Icon icon="play" /> Play
-    </b-button>
-    <b-button variant="secondary" :disabled="playlist.tracks.length === 0" @click="shuffleNow">
-      <Icon icon="shuffle" /> Shuffle
-    </b-button>
+      <b-button variant="secondary" :disabled="playlist.tracks.length === 0" class="me-2" @click="playNow">
+        <Icon icon="play" /> Play
+      </b-button>
+      <b-button variant="secondary" :disabled="playlist.tracks.length === 0" @click="shuffleNow">
+        <Icon icon="shuffle" /> Shuffle
+      </b-button>
     </div>
 
     <TrackList v-if="playlist.tracks.length > 0" :tracks="playlist.tracks" class="mt-3">
@@ -56,16 +56,16 @@
         Edit playlist
       </template>
       <template #default="{ item }">
-        <div class="form-group">
-          <label>Name</label>
+        <div class="mb-3">
+          <label class="form-label">Name</label>
           <input v-model="item.name" class="form-control" type="text">
         </div>
-        <div class="form-group">
-          <label>Comment</label>
+        <div class="mb-3">
+          <label class="form-label">Comment</label>
           <textarea v-model="item.comment" class="form-control" />
         </div>
-        <div class="form-group">
-          <label class="mb-0">Public</label>
+        <div class="mb-3">
+          <label class="form-label mb-0">Public</label>
           <SwitchInput v-model="item.isPublic" />
         </div>
       </template>

diff --git a/src/library/playlist/PlaylistNav.vue b/src/library/playlist/PlaylistNav.vue
@@ -2,14 +2,14 @@
   <div class="mw-100">
     <small class="sidebar-heading text-muted">
       Playlists
-      <button type="button" class="btn btn-link btn-sm p-0 float-right" @click="showAddModal = true">
+      <button type="button" class="btn btn-link btn-sm p-0 float-end" @click="showAddModal = true">
         <Icon icon="plus" />
       </button>
       <CreatePlaylistModal :visible.sync="showAddModal" />
     </small>
 
     <router-link class="nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
-      <Icon icon="playlist" class="mr-2" /> Random
+      <Icon icon="playlist" class="me-2" /> Random
     </router-link>
 
     <template v-if="playlists">
@@ -19,7 +19,7 @@
         class="nav-link"
       >
         <span @dragover="onDragover" @drop="onDrop(item.id, $event)">
-          <Icon icon="playlist" class="mr-2" /> {{ item.name }}
+          <Icon icon="playlist" class="me-2" /> {{ item.name }}
         </span>
       </router-link>
     </template>