feature: Add internazionalization

.gitignore

@@ -27,4 +27,7 @@ pnpm-debug.log*
 # TODO.md
 
 __pycache__
-dev-dist/*
+dev-dist/*
+
+# Local patches
+*.patch

package.json

@@ -25,10 +25,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.4",
     "vue-router": "^4.1.3",
     "vue-template-compiler": "^2.0.0",
     "vue-virtual-scroller": "^2.0.0-beta.7",

src/components/AlbumView/AlbumDiscBar.vue

@@ -1,9 +1,9 @@
 <template>
     <div v-if="album_disc.is_album_disc_number" class="album_disc_header no-select">
         <div class="disc_number">
-            Disc {{ album_disc.album_page_disc_number }}
+            {{ $t('AlbumView.DiskNumber', { num: 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>

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"

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 { useT } from "@/i18n";
 
 import { Album } from "@/interfaces";
 import { isSmallPhone } from "@/stores/content-width";
 import { formatSeconds } from "@/utils";
 
 import ArtistName from "@/components/shared/ArtistName.vue";
 
+const { t } = useT();
+
 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,6 +1,6 @@
 <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>
 

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)}` }}

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>
 
@@ -25,6 +25,7 @@ import { isMedium, isSmall } from '@/stores/content-width'
 import SeeAll from '../shared/SeeAll.vue'
 import SongItem from '../shared/SongItem.vue'
 
+
 defineProps<{
     tracks: Track[]
     route: string

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: {
@@ -37,7 +37,7 @@
         >
             <div v-tooltip class="title">
                 <TextLoader
-                    :text="queue.currenttrack?.title || 'Hello there'"
+                    :text="queue.currenttrack?.title || $t('BottomBar.PlaceholderTitle') "
                     :duration="1000"
                     :fade-duration="1000"
                     :direction="queue.direction"
@@ -51,7 +51,7 @@
             </div>
             <ArtistName
                 :artists="queue.currenttrack?.artists || []"
-                :albumartists="queue.currenttrack?.albumartists || 'Welcome to Swing Music'"
+                :albumartists="queue.currenttrack?.albumartists || $t('BottomBar.PlaceholderArtist')""
                 class="artist"
             />
         </div>

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 class="shuffle" title="Shuffle" @click="queue.shuffleQueue">
+        <button class="shuffle" :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')"
         />
@@ -27,6 +27,7 @@
 import useQueue from '@/stores/queue'
 import useSettings from '@/stores/settings'
 
+
 import RepeatOneSvg from '@/assets/icons/repeat-one.svg'
 import RepeatAllSvg from '@/assets/icons/repeat.svg'
 import ShuffleSvg from '@/assets/icons/shuffle.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 { useT } from '@/i18n'
+
+const { t } = useT();
 
 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>

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">

src/components/HomeView/Browse.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="homebrowse">
-    <div class="btitle"><b>Browse Library</b></div>
+    <div class="btitle"><b>{{ $t('HomeView.Browse.Title') }}</b></div>
     <div class="browselist">
       <RouterLink
         v-for="i in browselist"
@@ -34,57 +34,60 @@ import { triggerScan } from "@/requests/settings/rootdirs";
 import { Routes } from "@/router";
 import { album_card_with } from "@/stores/content-width";
 import useDialog from "@/stores/modal";
+import { useT } from "@/i18n";
+
+const { t } = useT();
 
 const browselist = [
   {
-    title: "Folders",
+    title: t('HomeView.Browse.BrowseList.Folders'),
     route: Routes.folder,
     params: {
       path: "$home",
     },
     icon: FolderIcon,
   },
   {
-    title: "Albums",
+    title: t('HomeView.Browse.BrowseList.Albums'),
     route: Routes.AlbumList,
     icon: AlbumIcon,
   },
   {
-    title: "Artists",
+    title: t('HomeView.Browse.BrowseList.Artists'),
     route: Routes.ArtistList,
     icon: ArtistIcon,
   },
   {
-    title: "Playlists",
+    title: t('HomeView.Browse.BrowseList.Playlists'),
     route: Routes.playlists,
     icon: PlaylistIcon,
   },
   {
-    title: "Favorites",
+    title: t('HomeView.Browse.BrowseList.Favorites'),
     route: Routes.favorites,
     icon: HeartIcon,
     class: "favorite",
   },
   {
-    title: "Fav. tracks",
+    title: t('HomeView.Browse.BrowseList.FavTracks'),
     route: Routes.favoriteTracks,
     icon: HeartIcon,
     class: "favorite",
   },
   {
-    title: "Fav. artists",
+    title: t('HomeView.Browse.BrowseList.FavArtists'),
     route: Routes.favoriteArtists,
     icon: ArtistIcon,
     class: "favorite",
   },
   {
-    title: "Fav. albums",
+    title: t('HomeView.Browse.BrowseList.FavAlbums'),
     route: Routes.favoriteAlbums,
     icon: AlbumIcon,
     class: "favorite",
   },
   // {
-  //   title: "Settings",
+  //   title: t('Common.Settings'),
   //   route: null,
   //   icon: SettingsIcon,
   //   action: () => {
@@ -93,7 +96,7 @@ const browselist = [
   //   class: "settings",
   // },
   {
-    title: "Stats",
+    title: t('HomeView.Browse.BrowseList.Stats'),
     icon: AlbumIcon,
     route: Routes.Stats,
   }

src/components/LeftSidebar/MobileNav.vue

@@ -33,5 +33,6 @@
 </template>
 
 <script setup lang="ts">
-import { menus } from "./navitems";
+import { useNavItems } from "../LeftSidebar/navitems";
+const { menus } = useNavItems();
 </script>

src/components/LeftSidebar/NP/Bitrate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="q.currenttrack?.bitrate" class="bitrate" title="file type • bitrate">
+  <div v-if="q.currenttrack?.bitrate" class="bitrate" :title="$t('LeftSidebar.FileTypeBitrate')">
     {{ q.currenttrack.filepath?.split(".").pop() }} • {{ q.currenttrack.bitrate }}
   </div>
 </template>

src/components/LeftSidebar/NavButtons.vue

@@ -25,7 +25,8 @@
 </template>
 
 <script setup lang="ts">
-import { menus } from "./navitems";
+import { useNavItems } from "../LeftSidebar/navitems";
+const { menus } = useNavItems();
 </script>
 
 <style lang="scss">