handle text overflow on sidebar playlist duration

src/i18n/locales/en.json

@@ -30,6 +30,7 @@
         "toggleSmartPlaylistEditor": "toggle $t(entity.smartPlaylist) editor",
         "viewPlaylists": "view $t(entity.playlist_other)",
         "viewMore": "view more",
+        "openApplicationDirectory": "open application directory",
         "openIn": {
             "lastfm": "Open in Last.fm",
             "musicbrainz": "Open in MusicBrainz"
@@ -266,6 +267,12 @@
         "trackNumber": "track",
         "explicitStatus": "$t(common.explicitStatus)"
     },
+    "datetime": {
+        "minuteShort": "min",
+        "secondShort": "sec",
+        "hourShort": "hr",
+        "dayShort": "day"
+    },
     "filterOperator": {
         "after": "is after",
         "afterDate": "is after (date)",

src/main/features/core/settings/index.ts

@@ -11,6 +11,9 @@ export const store = new Store({
         '>=0.21.2': (store) => {
             store.set('window_bar_style', 'linux');
         },
+        '>=1.0.0': (store) => {
+            store.clear();
+        },
     },
 });
 

src/main/index.ts

@@ -46,24 +46,15 @@ export default class AppUpdater {
 
         const isBetaVersion = packageJson.version.includes('-beta');
         const releaseChannel = store.get('release_channel');
-        const isNotConfigured = !releaseChannel;
 
-        console.log('Release channel: ', releaseChannel);
-        console.log('Is beta version: ', isBetaVersion);
-
-        if (isNotConfigured) {
-            console.log(
-                'Release channel not configured, setting to ',
-                isBetaVersion ? 'beta' : 'latest',
-            );
-            store.set('release_channel', isBetaVersion ? 'beta' : 'latest');
-        }
+        console.log('[AppUpdater] Release channel from store: ', releaseChannel);
+        console.log('[AppUpdater] Is beta version: ', isBetaVersion);
 
         if (releaseChannel === 'beta') {
             autoUpdater.channel = 'beta';
             autoUpdater.allowPrerelease = true;
             autoUpdater.disableDifferentialDownload = true;
-        } else if (releaseChannel === 'latest') {
+        } else {
             autoUpdater.channel = 'latest';
             autoUpdater.allowDowngrade = true;
             autoUpdater.allowPrerelease = false;
@@ -702,3 +693,11 @@ if (!ipcMain.eventNames().includes('open-item')) {
         });
     });
 }
+
+// Register 'open-application-directory' handler globally, ensuring it is only registered once
+if (!ipcMain.eventNames().includes('open-application-directory')) {
+    ipcMain.handle('open-application-directory', async () => {
+        const userDataPath = app.getPath('userData');
+        shell.openPath(userDataPath);
+    });
+}

src/preload/utils.ts

@@ -6,6 +6,10 @@ const openItem = async (path: string) => {
     return ipcRenderer.invoke('open-item', path);
 };
 
+const openApplicationDirectory = async () => {
+    return ipcRenderer.invoke('open-application-directory');
+};
+
 const playerErrorListener = (cb: (event: IpcRendererEvent, data: { code: number }) => void) => {
     ipcRenderer.on('player-error-listener', cb);
 };
@@ -42,6 +46,7 @@ export const utils = {
     isWindows,
     logger,
     mainMessageListener,
+    openApplicationDirectory,
     openItem,
     playerErrorListener,
 };

src/renderer/features/albums/components/album-list-content.tsx

@@ -87,8 +87,9 @@ export const AlbumListView = ({
     table,
 }: ItemListSettings & { overrideQuery?: OverrideAlbumListQuery }) => {
     const server = useCurrentServer();
+    const { pageKey } = useListContext();
 
-    const { query } = useAlbumListFilters();
+    const { query } = useAlbumListFilters(pageKey as ItemListKey);
 
     const mergedQuery = useMemo(() => {
         if (!overrideQuery) {

src/renderer/features/albums/hooks/use-album-list-filters.ts

@@ -15,13 +15,15 @@ import {
 import { AlbumListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
-export const useAlbumListFilters = () => {
+export const useAlbumListFilters = (listKey?: ItemListKey) => {
+    const resolvedListKey = listKey ?? ItemListKey.ALBUM;
+
     const { setSortBy, sortBy } = useSortByFilter<AlbumListSort>(
         AlbumListSort.NAME,
-        ItemListKey.ALBUM,
+        resolvedListKey,
     );
 
-    const { setSortOrder, sortOrder } = useSortOrderFilter(SortOrder.ASC, ItemListKey.ALBUM);
+    const { setSortOrder, sortOrder } = useSortOrderFilter(SortOrder.ASC, resolvedListKey);
 
     const { searchTerm, setSearchTerm } = useSearchTermFilter('');
 

src/renderer/features/analytics/hooks/use-app-tracker.ts

@@ -127,15 +127,19 @@ const getPlayerProperties = (): Pick<
     const playbackSettings = useSettingsStore.getState().playback;
 
     return {
-        'player.mediaSession': playbackSettings.mediaSession,
+        'player.mediaSession': ignoreWeb(playbackSettings.mediaSession),
         'player.queueType': player.player.queueType,
         'player.style': player.player.transitionType,
         'player.transcoding': playbackSettings.transcode.enabled,
-        'player.type': playbackSettings.type,
-        'player.webAudio': playbackSettings.webAudio,
-    };
+        'player.type': ignoreWeb(playbackSettings.type),
+        'player.webAudio': ignoreWeb(playbackSettings.webAudio),
+    } as any;
 };
 
+function ignoreWeb<T>(value: T): T | undefined {
+    return isElectron() ? value : undefined;
+}
+
 const getSettingsProperties = (): SettingsProperties => {
     const settings = useSettingsStore.getState();
 
@@ -148,22 +152,30 @@ const getSettingsProperties = (): SettingsProperties => {
         'settings.autoDJItemCount': settings.autoDJ.itemCount,
         'settings.autoDJTiming': settings.autoDJ.timing,
         'settings.customCss': settings.css.enabled,
-        'settings.disableAutoUpdate': settings.window.disableAutoUpdate,
-        'settings.discord': settings.discord.enabled,
-        'settings.exitToTray': settings.window.exitToTray,
+        'settings.disableAutoUpdate': ignoreWeb(settings.window.disableAutoUpdate),
+        'settings.discord': ignoreWeb(settings.discord.enabled),
+        'settings.exitToTray': ignoreWeb(settings.window.exitToTray),
         'settings.followSystemTheme': settings.general.followSystemTheme,
         'settings.fontType': settings.font.type,
         'settings.globalHotkeys': settings.hotkeys.globalMediaHotkeys,
         'settings.homeFeature': settings.general.homeFeature,
         'settings.language': settings.general.language,
         // 'settings.lastFM': settings.general.lastFM,
-        'settings.lyrics.enableAutoTranslation': settings.lyrics.enableAutoTranslation,
-        'settings.lyrics.enableNeteaseTranslation': settings.lyrics.enableNeteaseTranslation,
-        'settings.lyrics.fetch': settings.lyrics.fetch,
-        'settings.lyrics.sources.genius': settings.lyrics.sources.includes(LyricSource.GENIUS),
-        'settings.lyrics.sources.lrclib': settings.lyrics.sources.includes(LyricSource.LRCLIB),
-        'settings.lyrics.sources.netease': settings.lyrics.sources.includes(LyricSource.NETEASE),
-        'settings.minimizeToTray': settings.window.minimizeToTray,
+        'settings.lyrics.enableAutoTranslation': ignoreWeb(settings.lyrics.enableAutoTranslation),
+        'settings.lyrics.enableNeteaseTranslation': ignoreWeb(
+            settings.lyrics.enableNeteaseTranslation,
+        ),
+        'settings.lyrics.fetch': ignoreWeb(settings.lyrics.fetch),
+        'settings.lyrics.sources.genius': ignoreWeb(
+            settings.lyrics.sources.includes(LyricSource.GENIUS),
+        ),
+        'settings.lyrics.sources.lrclib': ignoreWeb(
+            settings.lyrics.sources.includes(LyricSource.LRCLIB),
+        ),
+        'settings.lyrics.sources.netease': ignoreWeb(
+            settings.lyrics.sources.includes(LyricSource.NETEASE),
+        ),
+        'settings.minimizeToTray': ignoreWeb(settings.window.minimizeToTray),
         // 'settings.musicBrainz': settings.general.musicBrainz,
         'settings.nativeAspectRatio': settings.general.nativeAspectRatio,
         'settings.playerbarSliderType': settings.general.playerbarSlider
@@ -172,26 +184,26 @@ const getSettingsProperties = (): SettingsProperties => {
         // 'settings.playerbarWaveformBarWidth': settings.general.playerbarSlider.barWidth,
         // 'settings.playerbarWaveformGap': settings.general.playerbarSlider.barGap,
         // 'settings.playerbarWaveformRadius': settings.general.playerbarSlider.barRadius,
-        'settings.preventSleepOnPlayback': settings.window.preventSleepOnPlayback,
-        'settings.releaseChannel': settings.window.releaseChannel,
+        'settings.preventSleepOnPlayback': ignoreWeb(settings.window.preventSleepOnPlayback),
+        'settings.releaseChannel': ignoreWeb(settings.window.releaseChannel),
         'settings.resume': settings.general.resume,
         'settings.scrobble.enabled': settings.playback.scrobble.enabled,
-        'settings.scrobble.notify': settings.playback.scrobble.notify,
+        'settings.scrobble.notify': ignoreWeb(settings.playback.scrobble.notify),
         'settings.showLyricsInSidebar': settings.general.showLyricsInSidebar,
         'settings.showVisualizerInSidebar': settings.general.showVisualizerInSidebar,
         'settings.sideQueueType': settings.general.sideQueueType,
         // 'settings.skipBackwardSeconds': settings.general.skipButtons.skipBackwardSeconds,
         'settings.skipButtons': settings.general.skipButtons.enabled,
         // 'settings.skipForwardSeconds': settings.general.skipButtons.skipForwardSeconds,
-        'settings.startMinimized': settings.window.startMinimized,
+        'settings.startMinimized': ignoreWeb(settings.window.startMinimized),
         'settings.theme': settings.general.theme,
         'settings.themeDark': settings.general.themeDark,
         'settings.themeLight': settings.general.themeLight,
-        'settings.tray': settings.window.tray,
+        'settings.tray': ignoreWeb(settings.window.tray),
         'settings.useThemeAccentColor': settings.general.useThemeAccentColor,
-        'settings.windowBarStyle': settings.window.windowBarStyle,
-        'settings.zoomFactor': settings.general.zoomFactor,
-    };
+        'settings.windowBarStyle': ignoreWeb(settings.window.windowBarStyle),
+        'settings.zoomFactor': ignoreWeb(settings.general.zoomFactor),
+    } as any;
 };
 
 const getServer = (): 'unknown' | ServerType => {
@@ -202,6 +214,7 @@ const getServer = (): 'unknown' | ServerType => {
 
 export const useAppTracker = () => {
     const { mutate: trackAppMutation } = useMutation(appTrackerMutation);
+    const { mutate: trackAppViewMutation } = useMutation(appViewMutation);
     const hasRunOnMountRef = useRef(false);
 
     useEffect(() => {
@@ -246,6 +259,10 @@ export const useAppTracker = () => {
                     meta: { properties, todayUTC },
                 });
 
+                trackAppViewMutation(undefined, {
+                    onError: () => {},
+                });
+
                 trackAppMutation(properties, {
                     onError: () => {},
                     onSettled: () => {
@@ -275,9 +292,10 @@ export const useAppTracker = () => {
         const interval = setInterval(checkAndTrack, 1000 * 60 * 60);
 
         return () => clearInterval(interval);
-    }, [trackAppMutation]);
+    }, [trackAppMutation, trackAppViewMutation]);
 };
 
+// Sends the app event to the analytics server which includes usage data
 const appTrackerMutation = mutationOptions({
     mutationFn: (properties: AppTrackerProperties) => {
         try {
@@ -296,3 +314,24 @@ const appTrackerMutation = mutationOptions({
     retry: false,
     throwOnError: false,
 });
+
+// Sends a view event to the analytics server which only includes language, screen, and website
+// and triggers a page view event
+const appViewMutation = mutationOptions({
+    mutationFn: () => {
+        try {
+            window.umami?.track((props) => ({
+                language: props.language,
+                screen: props.screen,
+                website: props.website,
+            }));
+            return Promise.resolve();
+        } catch (error) {
+            return Promise.reject(error);
+        }
+    },
+    mutationKey: ['analytics', 'app-view'],
+    onSuccess: () => {},
+    retry: false,
+    throwOnError: false,
+});

src/renderer/features/context-menu/actions/add-to-playlist-action.tsx

@@ -202,8 +202,12 @@ export const AddToPlaylistAction = ({ items, itemType }: AddToPlaylistActionProp
                 }
 
                 if (allSongIds.length === 0) {
-                    toast.warn({
-                        message: t('common.noResultsFromQuery', { postProcess: 'sentenceCase' }),
+                    toast.success({
+                        message: t('form.addToPlaylist.success', {
+                            message: 0,
+                            numOfPlaylists: 1,
+                            postProcess: 'sentenceCase',
+                        }),
                     });
                     return;
                 }
@@ -241,8 +245,12 @@ export const AddToPlaylistAction = ({ items, itemType }: AddToPlaylistActionProp
                 }
 
                 if (songsToAdd.length === 0) {
-                    toast.warn({
-                        message: t('common.noResultsFromQuery', { postProcess: 'sentenceCase' }),
+                    toast.success({
+                        message: t('form.addToPlaylist.success', {
+                            message: 0,
+                            numOfPlaylists: 1,
+                            postProcess: 'sentenceCase',
+                        }),
                     });
                     return;
                 }

src/renderer/features/settings/components/window/cache-settngs.tsx

@@ -94,10 +94,25 @@ export const CacheSettings = () => {
         },
     ];
 
+    const handleOpenApplicationDirectory = async () => {
+        if (isElectron() && window.api?.utils) {
+            await window.api.utils.openApplicationDirectory();
+        }
+    };
+
     return (
-        <SettingsSection
-            options={options}
-            title={t('page.setting.cache', { postProcess: 'sentenceCase' })}
-        />
+        <>
+            <SettingsSection
+                options={options}
+                title={t('page.setting.cache', { postProcess: 'sentenceCase' })}
+            />
+            {isElectron() && (
+                <Button onClick={handleOpenApplicationDirectory} variant="default">
+                    {t('action.openApplicationDirectory', {
+                        postProcess: 'sentenceCase',
+                    })}
+                </Button>
+            )}
+        </>
     );
 };

src/renderer/features/sidebar/components/action-bar.tsx

@@ -41,7 +41,7 @@ export const ActionBar = () => {
                     <Group gap="sm" grow wrap="nowrap">
                         <DropdownMenu position="bottom-start">
                             <DropdownMenu.Target>
-                                <Button p="0.5rem">
+                                <Button p="0">
                                     <Icon icon="menu" size="lg" />
                                 </Button>
                             </DropdownMenu.Target>
@@ -62,10 +62,10 @@ const NavigateButtons = () => {
 
     return (
         <>
-            <Button onClick={() => navigate(-1)} p="0.5rem">
+            <Button onClick={() => navigate(-1)} p="0">
                 <Icon icon="arrowLeftS" size="lg" />
             </Button>
-            <Button onClick={() => navigate(1)} p="0.5rem">
+            <Button onClick={() => navigate(1)} p="0">
                 <Icon icon="arrowRightS" size="lg" />
             </Button>
         </>

src/renderer/features/sidebar/components/sidebar-playlist-list.module.css

@@ -59,17 +59,43 @@
     gap: var(--theme-spacing-md);
     align-items: center;
     min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .metadata-group-item {
     display: flex;
-    flex-shrink: 0;
+    flex-shrink: 1;
     flex-wrap: nowrap;
     gap: var(--theme-spacing-xs);
     align-items: center;
+    min-width: 0;
+    overflow: hidden;
     white-space: nowrap;
 }
 
+.metadata-group-item-no-shrink {
+    flex-shrink: 0;
+}
+
+.metadata-group-item > * {
+    flex-shrink: 0;
+}
+
+.metadata-group-item > *:last-child {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.metadata-group-item-no-shrink > *:last-child {
+    flex-shrink: 0;
+    overflow: visible;
+    text-overflow: clip;
+}
+
 .name {
     overflow: hidden;
     text-overflow: ellipsis;

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -20,7 +20,7 @@ import { usePlayButtonClick } from '/@/renderer/features/shared/hooks/use-play-b
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useCurrentServerId, usePermissions } from '/@/renderer/store';
-import { formatDurationStringShort } from '/@/renderer/utils';
+import { formatDurationString } from '/@/renderer/utils';
 import { Accordion } from '/@/shared/components/accordion/accordion';
 import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
 import { ButtonProps } from '/@/shared/components/button/button';
@@ -185,7 +185,12 @@ const PlaylistRowButton = memo(({ item, name, onContextMenu, to }: PlaylistRowBu
                         {name}
                     </Text>
                     <div className={styles.metadataGroup}>
-                        <div className={styles.metadataGroupItem}>
+                        <div
+                            className={clsx(
+                                styles.metadataGroupItem,
+                                styles.metadataGroupItemNoShrink,
+                            )}
+                        >
                             <Icon color="muted" icon="itemSong" size="sm" />
                             <Text isMuted size="sm">
                                 {item.songCount || 0}
@@ -194,7 +199,7 @@ const PlaylistRowButton = memo(({ item, name, onContextMenu, to }: PlaylistRowBu
                         <div className={styles.metadataGroupItem}>
                             <Icon color="muted" icon="duration" size="sm" />
                             <Text isMuted size="sm">
-                                {formatDurationStringShort(item.duration ?? 0)}
+                                {formatDurationString(item.duration ?? 0)}
                             </Text>
                         </div>
                         {item.ownerId === permissions.userId && Boolean(item.public) && (

src/renderer/features/songs/components/song-list-content.tsx

@@ -84,8 +84,9 @@ export const SongListView = ({
     table,
 }: ItemListSettings & { overrideQuery?: OverrideSongListQuery }) => {
     const server = useCurrentServer();
+    const { pageKey } = useListContext();
 
-    const { query } = useSongListFilters();
+    const { query } = useSongListFilters(pageKey as ItemListKey);
 
     const mergedQuery = useMemo(() => {
         if (!overrideQuery) {

src/renderer/features/songs/hooks/use-song-list-filters.ts

@@ -16,13 +16,12 @@ import {
 import { SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
-export const useSongListFilters = () => {
-    const { setSortBy, sortBy } = useSortByFilter<SongListSort>(
-        SongListSort.NAME,
-        ItemListKey.SONG,
-    );
+export const useSongListFilters = (listKey?: ItemListKey) => {
+    const resolvedListKey = listKey ?? ItemListKey.SONG;
 
-    const { setSortOrder, sortOrder } = useSortOrderFilter(SortOrder.ASC, ItemListKey.SONG);
+    const { setSortBy, sortBy } = useSortByFilter<SongListSort>(SongListSort.NAME, resolvedListKey);
+
+    const { setSortOrder, sortOrder } = useSortOrderFilter(SortOrder.ASC, resolvedListKey);
 
     const { searchTerm, setSearchTerm } = useSearchTermFilter('');
 

src/renderer/global.d.ts

@@ -4,6 +4,7 @@ declare global {
             identify(unique_id: string): void;
             identify(unique_id: string, data: object): void;
             identify(data: object): void;
+            track(): void;
             track(event_name: string, data: object): void;
             track(
                 callback: (props: {

src/renderer/hooks/use-sync-settings-to-main.ts

@@ -110,6 +110,15 @@ export const useSyncSettingsToMain = () => {
                     JSON.stringify(mainValueNormalized) !== JSON.stringify(rendererValueNormalized)
                 ) {
                     hasDifferences = true;
+
+                    logFn.warn(logMsg.system.settingsSynchronized, {
+                        meta: {
+                            mainStoreKey: mapping.mainStoreKey,
+                            mainValue: mainValueNormalized,
+                            rendererValue: rendererValueNormalized,
+                        },
+                    });
+
                     localSettings.set(mapping.mainStoreKey, rendererValue);
                 }
             }

src/renderer/utils/format.tsx

@@ -1,54 +1,118 @@
 import type { Album, AlbumArtist, Song } from '/@/shared/types/domain-types';
 
 import dayjs from 'dayjs';
+import 'dayjs/locale/ar';
+import 'dayjs/locale/ca';
+import 'dayjs/locale/cs';
+import 'dayjs/locale/de';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+import 'dayjs/locale/eu';
+import 'dayjs/locale/fa';
+import 'dayjs/locale/fi';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/hu';
+import 'dayjs/locale/id';
+import 'dayjs/locale/it';
+import 'dayjs/locale/ja';
+import 'dayjs/locale/ko';
+import 'dayjs/locale/nb';
+import 'dayjs/locale/nl';
+import 'dayjs/locale/pl';
+import 'dayjs/locale/pt';
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/ru';
+import 'dayjs/locale/sl';
+import 'dayjs/locale/sr';
+import 'dayjs/locale/sv';
+import 'dayjs/locale/ta';
+import 'dayjs/locale/tr';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/zh-tw';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import formatDuration from 'format-duration';
 
+import i18n from '/@/i18n/i18n';
 import { Rating } from '/@/shared/components/rating/rating';
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
+dayjs.extend(localizedFormat);
 
-const FORMATS: Record<number, string> = Object.freeze({
-    0: 'YYYY',
-    1: 'MMM YYYY',
-    2: 'MMM D, YYYY',
-});
+const getDayjsLocale = (i18nLang: string): string => {
+    const localeMap: Record<string, string> = {
+        ar: 'ar',
+        ca: 'ca',
+        cs: 'cs',
+        de: 'de',
+        en: 'en',
+        es: 'es',
+        eu: 'eu',
+        fa: 'fa',
+        fi: 'fi',
+        fr: 'fr',
+        hu: 'hu',
+        id: 'id',
+        it: 'it',
+        ja: 'ja',
+        ko: 'ko',
+        'nb-NO': 'nb',
+        nl: 'nl',
+        pl: 'pl',
+        pt: 'pt',
+        'pt-BR': 'pt-br',
+        ru: 'ru',
+        sl: 'sl',
+        sr: 'sr',
+        sv: 'sv',
+        ta: 'ta',
+        tr: 'tr',
+        'zh-Hans': 'zh-cn',
+        'zh-Hant': 'zh-tw',
+    };
 
-const getDateFormat = (key: string): string => {
-    const dashes = Math.min(key.split('-').length - 1, 2);
-    return FORMATS[dashes];
+    return localeMap[i18nLang] || 'en';
 };
 
-export const formatDateAbsolute = (key: null | string) =>
-    key ? dayjs(key).format(getDateFormat(key)) : '';
+const updateDayjsLocale = () => {
+    const dayjsLocale = getDayjsLocale(i18n.language);
+    dayjs.locale(dayjsLocale);
+};
+
+// Set initial locale
+updateDayjsLocale();
+
+// Listen for i18n language changes
+i18n.on('languageChanged', updateDayjsLocale);
+
+export const formatDateAbsolute = (key: null | string) => (key ? dayjs(key).format('LL') : '');
 
 export const formatDateAbsoluteUTC = (key: null | string) =>
-    key ? dayjs.utc(key).format(getDateFormat(key)) : '';
+    key ? dayjs.utc(key).format('LL') : '';
 
-export const formatHrDateTime = (key: null | string) =>
-    key ? dayjs(key).format('YYYY-MM-DD HH:mm') : '';
+export const formatHrDateTime = (key: null | string) => (key ? dayjs(key).format('LLL') : '');
 
 export const formatDateRelative = (key: null | string) => (key ? dayjs(key).fromNow() : '');
 
 export const formatDurationString = (duration: number) => {
-    const rawDuration = formatDuration(duration).split(':');
+    const rawDuration = formatDuration(duration, { leading: false }).split(':');
 
     let string;
 
     switch (rawDuration.length) {
         case 1:
-            string = `${rawDuration[0]} sec`;
+            string = `${rawDuration[0]} ${i18n.t('datetime.secondShort')}`;
             break;
         case 2:
-            string = `${rawDuration[0]} min ${rawDuration[1]} sec`;
+            string = `${rawDuration[0]} ${i18n.t('datetime.minuteShort')} ${rawDuration[1]} ${i18n.t('datetime.secondShort')}`;
             break;
         case 3:
-            string = `${rawDuration[0]} hr ${rawDuration[1]} min ${rawDuration[2]} sec`;
+            string = `${rawDuration[0]} ${i18n.t('datetime.hourShort')} ${rawDuration[1]} ${i18n.t('datetime.minuteShort')} ${rawDuration[2]} ${i18n.t('datetime.secondShort')}`;
             break;
         case 4:
-            string = `${rawDuration[0]} day ${rawDuration[1]} hr ${rawDuration[2]} min ${rawDuration[3]} sec`;
+            string = `${rawDuration[0]} ${i18n.t('datetime.dayShort')} ${rawDuration[1]} ${i18n.t('datetime.hourShort')} ${rawDuration[2]} ${i18n.t('datetime.minuteShort')} ${rawDuration[3]} ${i18n.t('datetime.secondShort')}`;
             break;
     }
 
@@ -58,15 +122,17 @@ export const formatDurationString = (duration: number) => {
 export const formatDurationStringShort = (duration: number) => {
     const rawDuration = formatDuration(duration).split(':');
 
-    if (rawDuration.length === 2) {
-        // Less than 1 hour: show "0h" and minutes
-        return `0h ${rawDuration[0]}m`;
-    } else if (rawDuration.length >= 3) {
-        // 1 hour or more: show hours and minutes
-        return `${rawDuration[0]}h ${rawDuration[1]}m`;
+    if (rawDuration.length === 4) {
+        return `${rawDuration[0]}${i18n.t('datetime.dayShort')} ${rawDuration[1]}${i18n.t('datetime.hourShort')}`;
+    } else if (rawDuration.length === 3) {
+        return `${rawDuration[0]}${i18n.t('datetime.hourShort')} ${rawDuration[1]}${i18n.t('datetime.minuteShort')}`;
+    } else if (rawDuration.length === 2) {
+        return `${rawDuration[0]}${i18n.t('datetime.minuteShort')} ${rawDuration[1]}${i18n.t('datetime.secondShort')}`;
+    } else if (rawDuration.length === 1) {
+        return `${rawDuration[0]}${i18n.t('datetime.secondShort')}`;
     }
 
-    return '0h 0m';
+    return rawDuration;
 };
 
 export const formatRating = (item: Album | AlbumArtist | Song) =>