chore: translation

src/localisation/lang/en/locale.json

@@ -76,5 +76,9 @@
     "delete": "Delete",
     "cancel": "Cancel",
     "disc": "Disc",
-    "lyrics": "Lyrics"
+    "lyrics": "Lyrics",
+    "direct-play": "Direct play",
+    "transcoded": "Transcoded",
+    "khz": "kHz",
+    "kbps": "kbps"
 }

src/localisation/lang/nl/locale.json

@@ -75,5 +75,9 @@
     "sleep-timer": "Slaaptimer",
     "delete": "Verwijder",
     "cancel": "Annuleer",
-    "disc": "Schijf"
+    "disc": "Schijf",
+    "direct-play": "Direct afgespeeld",
+    "transcoded": "Getranscodeerd",
+    "khz": "kHz",
+    "kbps": "kbps"
 }

src/localisation/types.ts

@@ -75,4 +75,8 @@ export type LocaleKeys = 'play-next'
 | 'delete'
 | 'cancel'
 | 'disc'
-| 'lyrics';
+| 'lyrics'
+| 'direct-play'
+| 'transcoded'
+| 'khz'
+| 'kbps'

src/screens/modals/Player/components/MediaInformation.tsx

@@ -1,15 +1,16 @@
 import { Text } from '@/components/Typography';
-import { useTypedSelector } from '@/store';
 import useCurrentTrack from '@/utility/useCurrentTrack';
 import React from 'react-native';
 import WaveformIcon from '@/assets/icons/waveform.svg';
 import useDefaultStyles from '@/components/Colors';
 import styled, { css } from 'styled-components/native';
+import { useMemo } from 'react';
+import { t } from '@/localisation';
 
 const Container = styled.View`
     flex-direction: row;
     gap: 8px;
-    margin-top: 8px;
+    margin-top: 12px;
     margin-bottom: 16px;
 `;
 
@@ -30,24 +31,28 @@ const Label = styled(Text)<{ overflow?: boolean }>`
     `}
 `;
 
+/**
+ * This component displays information about the media that is being played
+ * back, such as the bitrate, sample rate, codec and whether it's transcoded.
+ */
 export default function MediaInformation() {
     const styles = useDefaultStyles();
-    const { track } = useCurrentTrack();
-    const { entities } = useTypedSelector((state) => state.music.tracks);
+    const { track, albumTrack } = useCurrentTrack();
 
-    if (!track) {
+    const mediaStream = useMemo(() => (
+        albumTrack?.MediaStreams?.find((d) => d.Type === 'Audio')
+    ), [albumTrack]);
+
+    if (!albumTrack || !track) {
         return null;
     }
 
-    const albumTrack = entities[track.backendId];
-    const mediaStream = albumTrack.MediaStreams?.find((d) => d.Type === 'Audio');
-
     return (
         <Container>
             <WaveformIcon fill={styles.icon.color} height={16} width={16} />
             <Info>
                 <Label numberOfLines={1} overflow>
-                    {track.isDirectPlay ? 'Direct play' : 'Transcoded'}
+                    {track.isDirectPlay ? t('direct-play') : t('transcoded')}
                 </Label>
                 <Label numberOfLines={1} overflow>
                     {track.isDirectPlay
@@ -58,9 +63,13 @@ export default function MediaInformation() {
                 {mediaStream && (
                     <>
                         <Label numberOfLines={1} overflow>
-                            {((track.isDirectPlay ? mediaStream.BitRate : track.bitRate) / 1000).toFixed(0)}{'kbps'}</Label>
+                            {((track.isDirectPlay ? mediaStream.BitRate : track.bitRate) / 1000)
+                                .toFixed(0)}
+                            {t('kbps')}
+                        </Label>
                         <Label numberOfLines={1} overflow>
-                            {(mediaStream.SampleRate / 1000).toFixed(1)}{'kHz'}
+                            {(mediaStream.SampleRate / 1000).toFixed(1)}
+                            {t('khz')}
                         </Label>
                     </>
                 )}