Swap string literals for translatable items

src/localisation/lang/en/locale.json

@@ -56,5 +56,8 @@
     "delete-playlist": "Delete Playlist",
     "total-download-size": "Total Download Size",
     "retry-failed-downloads": "Retry Failed Downloads",
-    "you-are-offline-message": "You are currently offline. You can only play previously downloaded music."
+    "you-are-offline-message": "You are currently offline. You can only play previously downloaded music.",
+    "playing-on": "Playing on",
+    "local-playback": "Local playback",
+    "streaming": "Streaming"
 }

src/localisation/lang/nl/locale.json

@@ -56,6 +56,8 @@
     "delete-playlist": "Verwijder Playlist",
     "total-download-size": "Totale grootte downloads",
     "retry-failed-downloads": "Probeer Mislukte Downloads Opnieuw",
-    "you-are-offline-message": "Je bent op dit moment offline. Je kunt alleen eerder gedownloade nummers afspelen."
-
+    "you-are-offline-message": "Je bent op dit moment offline. Je kunt alleen eerder gedownloade nummers afspelen.",
+    "playing-on": "Speelt af op",
+    "local-playback": "Lokaal afspelen",
+    "streaming": "Streamen"
 }

src/localisation/types.ts

@@ -54,4 +54,7 @@ export type LocaleKeys = 'play-next'
 | 'total-download-size'
 | 'no-downloads'
 | 'retry-failed-downloads'
-| 'you-are-offline-message'
+| 'you-are-offline-message'
+| 'playing-on'
+| 'local-playback'
+| 'streaming'

src/screens/modals/Player/components/Casting.ios.tsx

@@ -6,6 +6,7 @@ import { TouchableOpacity } from 'react-native';
 import styled, { css } from 'styled-components/native';
 import AirplayAudioIcon from 'assets/icons/airplay-audio.svg';
 import useDefaultStyles from 'components/Colors';
+import { t } from '@localisation';
 
 const Container = styled.View<{ active?: boolean }>`
     display: flex;
@@ -46,8 +47,8 @@ function Casting() {
                 />
                 <Label active={routes.length > 0} numberOfLines={1}>
                     {routes.length > 0
-                        ? `Playing on ${routes.map((route) => route.portName).join(', ')}`
-                        : 'Local Playback'
+                        ? `${t('playing-on')} ${routes.map((route) => route.portName).join(', ')}`
+                        : t('local-playback')
                     }
                 </Label>
             </Container>

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

@@ -6,6 +6,7 @@ import useDefaultStyles from 'components/Colors';
 import { Text } from 'components/Typography';
 import styled from 'styled-components/native';
 import Casting from './Casting';
+import { t } from '@localisation';
 
 const ICON_SIZE = 16;
 
@@ -44,12 +45,12 @@ function StreamStatus() {
                 {isLocalPlay ? (
                     <>
                         <InternalDriveIcon width={ICON_SIZE} height={ICON_SIZE} fill={defaultStyles.icon.color} />
-                        <Label numberOfLines={1}>Local Playback</Label>
+                        <Label numberOfLines={1}>{t('local-playback')}</Label>
                     </>
                 ) : (
                     <>
                         <CloudIcon width={ICON_SIZE} height={ICON_SIZE} fill={defaultStyles.icon.color} />
-                        <Label numberOfLines={1}>Streaming</Label>
+                        <Label numberOfLines={1}>{t('streaming')}</Label>
                     </>
                 )}
             </Group>