Add support for internazionalization to Swing Music

package.json

@@ -23,10 +23,12 @@
     "pinia": "^2.0.17",
     "pinia-plugin-persistedstate": "^3.2.0",
     "qr-code-styling": "^1.6.0-rc.1",
+    "universal-cookie": "^8.0.1",
     "v-wave": "^1.5.0",
     "vue": "^v3.5.13",
     "vue-boring-avatars": "^1.4.0",
     "vue-debounce": "^3.0.2",
+    "vue-i18n": "^11",
     "vue-router": "^4.1.3",
     "vue-template-compiler": "^2.0.0",
     "vue-virtual-scroller": "^2.0.0-beta.7",

src/components/AlbumView/AlbumDiscBar.vue

@@ -3,7 +3,7 @@
         <div class="disc_number">
             Disc {{ album_disc.album_page_disc_number }}
             <span @click="$emit('playDisc', album_disc.album_page_disc_number || 0)" class="play">
-                <PlaySvg /> Play Disc {{ album_disc.album_page_disc_number }}</span
+                <PlaySvg /> {{ $t('AlbumView.PlayDisc') }} {{ album_disc.album_page_disc_number }}</span
             >
         </div>
         <div class="play"></div>
@@ -13,6 +13,9 @@
 <script setup lang="ts">
 import PlaySvg from '@/assets/icons/play.svg'
 import { AlbumDisc } from '@/interfaces'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 defineProps<{
     album_disc: AlbumDisc

src/components/AlbumView/GenreBanner.vue

@@ -7,7 +7,7 @@
   >
     <div class="scrollable">
       <div class="rounded pad-sm genre-pill">
-        {{ genres.length ? "Genres" : "No genres" }}
+        {{ genres.length ? $t('AlbumView.GenreBanner.GenreExists') : $t('AlbumView.GenreBanner.GenreDoesNotExist') }}
       </div>
       <div
         v-for="genre in genres"
@@ -27,9 +27,12 @@
 import useAlbumStore from "@/stores/pages/album";
 import useArtistStore from "@/stores/pages/artist";
 import { computed, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 
 import { getShift } from "@/utils/colortools/shift";
 
+const { t } = useI18n();
+
 const album = useAlbumStore();
 const store = useArtistStore();
 

src/components/AlbumView/Header/Stats.vue

@@ -6,25 +6,28 @@
         :albumartists="''"
         :small="true"
         :append="!isSmallPhone ? statsText : ''"
-        :prepend="isSmallPhone ? 'Album by ' : ''"
+        :prepend="isSmallPhone ? $t('AlbumView.AlbumBy') : ''"
       />
     </div>
     <div v-if="isSmallPhone" class="stats2">
-      {{ new Date(album.date * 1000).getFullYear() }} {{ !album.is_single ? `• ${album.trackcount} Tracks` : "" }} •
+      {{ new Date(album.date * 1000).getFullYear() }} {{ !album.is_single ? `• ${album.trackcount} ${$t('Common.Track', album.trackcount)}` : "" }} •
       {{ formatSeconds(album.duration, true) }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
 import { Album } from "@/interfaces";
 import { isSmallPhone } from "@/stores/content-width";
 import { formatSeconds } from "@/utils";
 
 import ArtistName from "@/components/shared/ArtistName.vue";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   album: Album;
 }>();
@@ -34,7 +37,7 @@ const statsText = computed(() => {
 
   // hide track count if it's a single, also add an s to track if it's plural
   return `• ${new Date(props.album.date * 1000).getFullYear()} ${
-    !is_single ? `• ${props.album.trackcount.toLocaleString()} Track${props.album.trackcount > 1 ? "s" : ""}` : ""
+    !is_single ? `• ${props.album.trackcount.toLocaleString()} ${t('Common.Track', props.album.trackcount)}` : ""
   } • ${formatSeconds(props.album.duration, true)}`;
 });
 </script>

src/components/ArtistView/AlbumsFetcher.vue

@@ -1,15 +1,18 @@
 <template>
   <div style="height: 1px">
-    <button v-if="show_text" @click="fetch_callback">Load More</button>
+    <button v-if="show_text" @click="fetch_callback">{{ $t('ArtistView.LoadMore') }}</button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { nextTick, onMounted } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
+import { useI18n } from "vue-i18n";
 
 import { updateCardWidth } from "@/stores/content-width";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   show_text?: boolean;
   fetch_callback: () => Promise<void>;

src/components/ArtistView/HeaderComponents/Info.vue

@@ -6,16 +6,16 @@
         }"
     >
         <section class="text">
-            <div class="card-title">Artist</div>
+            <div class="card-title">{{ $t('ArtistView.Title') }}</div>
             <div class="artist-name" :class="`${useCircularImage ? 'ellip' : 'ellip2'}`" :title="artist.name">
                 {{ artist.name }}
             </div>
             <div class="stats">
                 <span v-if="artist.trackcount">
-                    {{ artist.trackcount.toLocaleString() }} Track{{ `${artist.trackcount == 1 ? '' : 's'} • ` }}
+                    {{ artist.trackcount.toLocaleString() }} {{ `${ $t('Common.Track', artist.trackcount) } • `}}
                 </span>
                 <span v-if="artist.albumcount">
-                    {{ artist.albumcount.toLocaleString() }} Album{{ `${artist.albumcount == 1 ? '' : 's'} • ` }}
+                    {{ artist.albumcount.toLocaleString() }} {{ `${ $t('Common.Album', artist.albumcount) } • ` }}
                 </span>
                 <span v-if="artist.duration">
                     {{ `${formatSeconds(artist.duration, true)}` }}
@@ -32,6 +32,9 @@ import { getTextColor } from '@/utils/colortools/shift'
 import { Artist } from '@/interfaces'
 import formatSeconds from '@/utils/useFormatSeconds'
 import Buttons from './Buttons.vue'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 defineProps<{
     artist: Artist

src/components/ArtistView/TopTracks.vue

@@ -14,7 +14,7 @@
                 @playThis="playHandler(index)"
             />
         </div>
-        <div v-if="!tracks.length" class="error">No tracks</div>
+        <div v-if="!tracks.length" class="error">{{ $t('ArtistView.NoTracks') }}</div>
     </div>
 </template>
 
@@ -24,6 +24,9 @@ import { Track } from '@/interfaces'
 import { isMedium, isSmall } from '@/stores/content-width'
 import SeeAll from '../shared/SeeAll.vue'
 import SongItem from '../shared/SongItem.vue'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 defineProps<{
     tracks: Track[]

src/components/BottomBar/Left.vue

@@ -7,7 +7,7 @@
         />
         <RouterLink
             v-else
-            title="Go to Now Playing"
+            :title="$t('BottomBar.GoToNowPlaying')"
             :to="{
                 name: Routes.nowPlaying,
                 params: {
@@ -30,14 +30,14 @@
         >
             <div v-tooltip class="title">
                 <span class="ellip">
-                    {{ queue.currenttrack?.title || 'Hello there' }}
+                    {{ queue.currenttrack?.title || $t('BottomBar.PlaceholderTitle') }}
                 </span>
                 <ExplicitIcon class="explicit-icon" v-if="queue.currenttrack?.explicit" />
                 <MasterFlag :bitrate="queue.currenttrack?.bitrate || 0" />
             </div>
             <ArtistName
                 :artists="queue.currenttrack?.artists || []"
-                :albumartists="queue.currenttrack?.albumartists || 'Welcome to Swing Music'"
+                :albumartists="queue.currenttrack?.albumartists || $t('BottomBar.PlaceholderArtist')"
                 class="artist"
             />
         </div>
@@ -55,6 +55,9 @@ import useColorStore from '@/stores/colors'
 import { isLargerMobile, isMobile } from '@/stores/content-width'
 import useQStore from '@/stores/queue'
 import useSettingsStore from '@/stores/settings'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 import ExpandSvg from '@/assets/icons/expand.svg'
 import ArtistName from '@/components/shared/ArtistName.vue'

src/components/BottomBar/Right.vue

@@ -5,18 +5,18 @@
         <button
             class="repeat"
             :class="{ 'repeat-disabled': settings.repeat == 'none' }"
-            :title="settings.repeat == 'all' ? 'Repeat all' : settings.repeat == 'one' ? 'Repeat one' : 'No repeat'"
+            :title="settings.repeat == 'all' ? $t('BottomBar.RepeatOptions.All') : settings.repeat == 'one' ? $t('BottomBar.RepeatOptions.One') : $t('BottomBar.RepeatOptions.None')"
             @click="settings.toggleRepeatMode"
         >
             <RepeatOneSvg v-if="settings.repeat == 'one'" />
             <RepeatAllSvg v-else />
         </button>
-        <button title="Shuffle" @click="queue.shuffleQueue">
+        <button :title="$t('BottomBar.Shuffle')" @click="queue.shuffleQueue">
             <ShuffleSvg />
         </button>
         <HeartSvg
             v-if="!hideHeart"
-            title="Favorite"
+            :title="$t('BottomBar.Favorite')"
             :state="queue.currenttrack?.is_favorite"
             @handleFav="() => $emit('handleFav')"
         />
@@ -26,6 +26,9 @@
 <script setup lang="ts">
 import useQueue from '@/stores/queue'
 import useSettings from '@/stores/settings'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 import RepeatOneSvg from '@/assets/icons/repeat-one.svg'
 import RepeatAllSvg from '@/assets/icons/repeat.svg'

src/components/CardListView/SortBanner.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="itemsortby">
-        <div class="tt select circular">Sort By</div>
+        <div class="tt select circular">{{ $t('CardList.SortBy') }}</div>
         <div class="left group">
             <SortKey
                 :items="($route.name == Routes.AlbumList ? albumitems : artistitems).concat(items)"
@@ -22,31 +22,34 @@ import { useRoute } from 'vue-router'
 import { useAlbumList, useArtistList } from '@/stores/pages/itemlist'
 import SortKey from './SortKey.vue'
 import ChartSvg from '@/assets/icons/chart.svg'
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const route = useRoute()
 const store = route.name === Routes.AlbumList ? useAlbumList() : useArtistList()
 
 const items = [
-    { key: 'trackcount', displayName: 'No. of tracks' },
-    { key: 'duration', displayName: 'Duration' },
-    { key: 'created_date', displayName: 'Date added' },
-    { key: 'lastplayed', displayName: 'Last played' },
+    { key: 'trackcount', displayName: t('CardList.SortByOptions.TrackCount') },
+    { key: 'duration', displayName: t('CardList.SortByOptions.Duration') },
+    { key: 'created_date', displayName: t('CardList.SortByOptions.CreatedDate') },
+    { key: 'lastplayed', displayName: t('CardList.SortByOptions.LastPlayed') },
 ]
 
 const statitems = [
-    { key: 'playcount', displayName: 'Plays' },
-    { key: 'playduration', displayName: 'Play duration' },
+    { key: 'playcount', displayName: t('CardList.SortByOptions.PlayCount') },
+    { key: 'playduration', displayName: t('CardList.SortByOptions.PlayDuration') },
 ]
 
 const albumitems = [
-    { key: 'title', displayName: 'Title' },
-    { key: 'albumartists', displayName: 'Artist' },
-    { key: 'date', displayName: 'Year released' },
+    { key: 'title', displayName: t('CardList.SortByOptions.Title') },
+    { key: 'albumartists', displayName: t('CardList.SortByOptions.AlbumArtists') },
+    { key: 'date', displayName: t('CardList.SortByOptions.Date') },
 ]
 
 const artistitems = [
-    { key: 'name', displayName: 'Name' },
-    { key: 'albumcount', displayName: 'No. of albums' },
+    { key: 'name', displayName: t('CardList.SortByOptions.Name') },
+    { key: 'albumcount', displayName: t('CardList.SortByOptions.NoOfAlbums') },
 ]
 </script>
 

src/components/Favorites/RecentsItemCard.vue

@@ -20,7 +20,7 @@
       {{ fav.type === "artist" ? fav.item.name : fav.item.title }}
     </div>
     <div class="label ellip" :class="{ on_artist: fav.type === 'artist' }">
-      {{ fav.type === "album" ? fav.item.artist : "Artist" }}
+      {{ fav.type === "album" ? fav.item.artist : $t('Favorites.Album')}}
     </div>
   </RouterLink>
 </template>
@@ -29,6 +29,9 @@
 import { RecentFavResult } from "@/interfaces";
 import { Routes } from "@/router";
 import { paths } from "../../config";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 defineProps<{
   fav: RecentFavResult;

src/components/FolderView/FolderItem.vue

@@ -17,7 +17,7 @@
       <div class="info">
         <div class="f-item-text ellip">{{ folder.name }}</div>
         <div class="f-count" v-if="folder.trackcount">
-          {{ folder.trackcount.toLocaleString() + ` File${folder.trackcount == 1 ? "" : "s"}` }}
+          {{ folder.trackcount.toLocaleString() + $t('FolderView.FileCount', folder.trackcount) }}
         </div>
       </div>
       <div v-if="!folder_page" class="check">
@@ -31,6 +31,9 @@
 <script setup lang="ts">
 import { Routes } from "@/router";
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 import { Folder } from "@/interfaces";