wip

tamland · Nov 20, 2024 · 6726c78 · 6726c78
1 parent 696c9b7
commit 6726c78
Show file tree

Hide file tree

Showing 36 changed files with 231 additions and 199 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
@@ -78,17 +78,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
@@ -4,7 +4,7 @@
       <Icon icon="nav" />
     </button>
 
-    <div class="ml-auto" />
+    <div class="ms-auto" />
 
     <SearchForm />
 
@@ -15,9 +15,9 @@
             <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>

diff --git a/src/library/podcast/AddPodcastModal.vue b/src/library/podcast/AddPodcastModal.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">
+        Add podcast
+      </h5>
+      <button class="btn-close" @click="change" />
     </template>
-    <template #modal-title>
-      Add podcast
-    </template>
-    <div class="form-group">
-      <label>URL</label>
+    <div class="mb-3">
+      <label class="form-label">URL</label>
       <input v-model="url" class="form-control" type="text" :class="{'is-invalid': hasError}">
       <div class="invalid-feedback">
         Required

diff --git a/src/library/podcast/PodcastDetails.vue b/src/library/podcast/PodcastDetails.vue
@@ -8,7 +8,7 @@
         {{ podcast.description }}
       </OverflowFade>
       <div class="text-nowrap">
-        <b-button variant="secondary" class="mr-2" :disabled="playableTracks.length === 0" @click="playNow">
+        <b-button variant="secondary" class="me-2" :disabled="playableTracks.length === 0" @click="playNow">
           <Icon icon="play" /> Play
         </b-button>
         <b-button variant="secondary" :disabled="playableTracks.length === 0" @click="shuffleNow">
@@ -24,7 +24,7 @@
 
     <BaseTable v-if="podcast.tracks.length > 0">
       <BaseTableHead>
-        <th class="text-right d-none d-md-table-cell">
+        <th class="text-end d-none d-md-table-cell">
           Duration
         </th>
       </BaseTableHead>

diff --git a/src/library/podcast/PodcastLibrary.vue b/src/library/podcast/PodcastLibrary.vue
@@ -14,7 +14,7 @@
         </li>
       </ul>
       <div>
-        <b-button variant="link" class="mr-2" @click="showAddModal = true">
+        <b-button variant="link" class="me-2" @click="showAddModal = true">
           <Icon icon="plus" />
         </b-button>
         <b-button icon="refresh" variant="link" @click="refresh()">

diff --git a/src/library/radio/RadioStations.vue b/src/library/radio/RadioStations.vue
@@ -1,7 +1,7 @@
 <template>
   <ContentLoader v-slot :loading="items === null">
     <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">
         Radio
       </h1>
       <b-button variant="link" :disabled="unsupported" @click="openAddModal">
@@ -28,16 +28,16 @@
         {{ item?.id ? "Edit" : "Add" }} Radio Station
       </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.title" class="form-control" type="text">
         </div>
-        <div class="form-group">
-          <label>Stream URL</label>
+        <div class="mb-3">
+          <label class="form-label">Stream URL</label>
           <input v-model="item.url" class="form-control" type="text">
         </div>
-        <div class="form-group">
-          <label class="mb-0">Home Page URL</label>
+        <div class="mb-3">
+          <label class="form-label mb-0">Home Page URL</label>
           <input v-model="item.description" class="form-control" type="text">
         </div>
       </template>

diff --git a/src/library/search/SearchForm.vue b/src/library/search/SearchForm.vue
@@ -3,7 +3,7 @@
     <form class="form-inline my-2 my-lg-0" @submit.prevent="search">
       <input
         v-model="query"
-        class="form-control mr-sm-2" type="search"
+        class="form-control me-sm-2" type="search"
         placeholder="Search">
     </form>
   </div>