feat: update locale (#245)

openstream-fm · Jan 11, 2024 · c7312c6 · c7312c6
2 parents a1c2a74 + e1fb086
commit c7312c6
Show file tree

Hide file tree

Showing 32 changed files with 959 additions and 399 deletions.
diff --git a/front/app/src/lib/components/Player/player.ts b/front/app/src/lib/components/Player/player.ts
@@ -5,6 +5,7 @@ import { _get } from "$share/net.client";
 import { derived, get, writable } from "svelte/store";
 import { page } from "$app/stores";
 import { equals } from "$server/util/collections";
+import { locale } from "$share/locale";
 import { STATION_PICTURES_VERSION } from "$server/defs/constants";
 
 export type PlayerState = PlayerState.Closed | PlayerState.Station | PlayerState.AudioFile;
@@ -134,8 +135,7 @@ export const player_subtitle = derived([player_state, now_playing], ([state, now
       } else if (artist) {
         return artist
       } else {
-        // TODO: locale
-        return "Live streaming";
+        return get(locale).misc.player.Live_Streaming;
       }
     } else if (now_playing.kind === "playlist") {
       const title = now_playing.title?.trim() || now_playing.filename.trim() || null;
@@ -147,12 +147,10 @@ export const player_subtitle = derived([player_state, now_playing], ([state, now
       } else if (artist) {
         return artist;
       } else {
-        // TODO: locale
-        return "Playlist"
+        return get(locale).misc.player.Playlist;
       }
     } else if(now_playing.kind === "external-relay") {
-      // TODO: locale
-      return "Relay"
+      return get(locale).misc.player.Relay;
     } 
 
     else {
@@ -265,8 +263,7 @@ if (hasMediaSession) {
               artist = $player_state.station.name;
             } else {
               title = $player_state.station.name;
-              // TODO: locale
-              artist = "Live Streaming";
+              artist = get(locale).misc.player.Live_Streaming
             }
           } else if ($now_playing.kind === "playlist") {
             if($now_playing.artist) {

diff --git a/front/app/src/routes/(root)/(online)/(app)/accounts/[account]/account-station-item.svelte b/front/app/src/routes/(root)/(online)/(app)/accounts/[account]/account-station-item.svelte
@@ -165,9 +165,7 @@
 
 				{#if merged_now_playing.kind === "none" && merged_now_playing.external_relay_error != null}
 					<div class="now-playing-sub now-playing-sub-error">
-						<!-- TODO: locale -->
-						External relay error
-						<!-- {merged_now_playing.external_relay_error} -->
+						{$locale.misc.External_relay_error}
 					</div>
 				{:else if merged_now_playing.kind === 'none'}
 					{#if merged_now_playing.start_on_connect}

diff --git a/...t/app/src/routes/(root)/(online)/(app)/accounts/[account]/stations/[station]/+page.svelte b/...t/app/src/routes/(root)/(online)/(app)/accounts/[account]/stations/[station]/+page.svelte
@@ -251,9 +251,8 @@
                   {$locale.pages["station/dashboard"].live}
                 {:else if data.now_playing.kind === "none"}
                   {#if data.now_playing.external_relay_error != null}
-                    <!-- TODO: locale -->
                     <span class="external-relay-error">
-                      External relay error
+                      {$locale.misc.External_relay_error}
                     </span>
                   {:else if data.now_playing.external_relay_url != null}
                     {$locale.misc.Relay}

diff --git a/.../routes/(root)/(online)/(app)/accounts/[account]/stations/[station]/settings/+page.svelte b/.../routes/(root)/(online)/(app)/accounts/[account]/stations/[station]/settings/+page.svelte
@@ -364,8 +364,7 @@
             <Validator value={external_relay_url} fn={_validate_external_relay_url} />
           </div>
           <div class="redirect-field" class:disabled={external_relay_enabled === false}>
-            <!-- TODO: locale -->
-            <BooleanField bind:value={external_relay_redirect} label={"Enable master relay redirect mode"} />
+            <BooleanField bind:value={external_relay_redirect} label={$locale.misc.Enable_master_relay_redirect_mode} />
           </div>          
 
           <button type="submit" class="relay-send ripple-container" use:ripple class:sending={saving_relay}>

diff --git a/front/app/src/routes/(root)/(online)/(app)/me/api-keys/+page.svelte b/front/app/src/routes/(root)/(online)/(app)/me/api-keys/+page.svelte
@@ -20,7 +20,7 @@
 	import Password from '$share/Form/Password.svelte';
 	import Email from '$share/Form/Email.svelte';
 	import copy from 'copy-to-clipboard';
-	// import { locale } from '$lib/locale';
+	import { locale } from '$lib/locale';
 
 	$: current = data.api_keys.items.find(item => item.is_current);
 	
@@ -31,8 +31,7 @@
 	const delete_key = action(async () => {
 		if (delete_item == null) return;
 		await _delete(`/api/me/api-keys/${delete_item._id}`);
-		// TODO: locale
-		_message("API key deleted");
+		_message($locale.misc.api_keys.API_key_deleted);
 		delete_item = null;
 		invalidate('resource:api-keys');
 	});
@@ -55,7 +54,6 @@
 			api_key
 		} = await _post<import("$api/me/api-keys/POST/Output").Output>(`/api/me/api-keys`, payload);
 
-		// TODO: locale
 		invalidate('resource:api-keys');
 		create_title = "";
 		create_password = "";
@@ -221,33 +219,22 @@
 
 
 <svelte:head>
-		<!-- TODO: locale -->
-		<!-- {$locale.pages['me/devices'].head.title}</title> -->
 	<title>
-		API keys
+		{$locale.misc.api_keys.API_Keys}
 	</title>
 </svelte:head>
 
 <Page compact>
 	<div class="page">
 		<div class="page-title">
-			<!-- TODO: locale -->
-			<!-- {$locale.pages['me/devices'].title} -->
-			API keys
+			{$locale.misc.api_keys.API_Keys}
 		</div>
 		<div class="note">
-			<!-- TODO: locale -->
-			<!-- {$locale.pages['me/devices'].note} -->
-			Create API keys to access your openstream accounts programatically or to grant access to third party apps and services.
+			{$locale.misc.api_keys.API_keys_page_message}
 		</div>
 
 		{#if current == null && keys.length === 0}
-			<!--
-				<div class="empty" transition:slide|local={{ duration: 400 }}>
-					<-- TODO: locale 
-					You didn't create any API key yet.
-				</div>
-			-->
+			<!-- -- -->
 		{:else}
 
 			<div class="list" transition:slide|local={{ duration: 400 }}>
@@ -266,47 +253,36 @@
 
 		<div class="create-out">
 			<button class="create-btn ripple-container" use:ripple on:click={() => create_open = true}>
-				Create a new API key
-				<!-- TODO: locale -->
+				{$locale.misc.api_keys.Create_a_new_API_key}
 			</button>
 		</div>
 	</div>
 </Page>
 
 {#if delete_item != null}
 	<Dialog
-		title={
-			// TODO: locale
-			// $locale.pages['me/devices'].dialogs.disconnect.title
-			"Remove API key"
-		}
+		title={$locale.misc.api_keys.Remove_API_key}
 		width="400px"
 		on_close={() => (delete_item = null)}
 	>
 		<div class="delete-dialog">
 			<div class="delete-dialog-text">
-				<!-- TODO: locale -->
-				<!-- {$locale.pages['me/devices'].dialogs.disconnect.message} -->
-				This action is permanent
+				{$locale.misc.This_action_is_permanent}
 			</div>
 			<div class="delete-dialog-btns">
 				<button
 					class="delete-dialog-btn-cancel ripple-container"
 					use:ripple
 					on:click={() => (delete_item = null)}
 				>
-					<!-- TODO: locale  -->
-					<!-- {$locale.pages['me/devices'].dialogs.disconnect.cancel} -->
-					Cancel
+					{$locale.misc.Cancel}
 				</button>
 
 				<button class="delete-dialog-btn-delete ripple-container" use:ripple on:click={delete_key}>
 					<div class="delete-dialog-btn-icon">
 						<Icon d={mdiTrashCanOutline} />
 					</div>
-					<!-- TODO: locale -->
-					<!-- {$locale.pages['me/devices'].dialogs.disconnect.submit} -->
-					Delete
+					{$locale.misc.Delete}
 				</button>
 			</div>
 		</div>
@@ -320,21 +296,15 @@
 			api_key_show_to_save = null;
 			create_open = false
 		}}
-		title={
-			// TODO: locale
-			"Create a new API key"
-		}
+		title={$locale.misc.api_keys.Create_a_new_API_key}
 	>
 		{#if api_key_show_to_save == null}
 			<Formy action={create} let:submit>
 	      <form novalidate class="create-dialog" on:submit={submit} transition:slide|local={{ duration: 300 }}>
 					<div class="create-dialog-fields">
 						<div class="create-dialog-field">
 							<TextField
-								label={
-									// $locale.pages["account/dashboard"].edit.dialog.field_label
-									"API key title"
-								}
+								label={$locale.misc.api_keys.API_key_title}
 								maxlength={
 									// TODO: validate and const
 									100
@@ -350,23 +320,19 @@
 								})}
 							/>
 							<div class="title-explain">
-								<!-- TODO: locale -->
-								The title will be used by you to identify this API key.
+								{$locale.misc.api_keys.API_key_title_explain}
 							</div>
 						</div>
 
 						<div class="create-dialog-user">
 							<div class="create-dialog-user-explain">
-								<!-- TODO: locale -->
-								Type your password to proceed with this action.
+								{$locale.misc.Type_password_proceed}
 							</div>
 							<div class="create-dialog-user-field">
-								<!-- TODO: locale -->
-								<Email label="You" readonly value={data.user.email} />
+								<Email label={$locale.misc.Your_email} readonly value={data.user.email} />
 							</div>
 							<div class="create-dialog-user-field">
-								<!-- TODO: locale -->
-								<Password label="Your password" autocomplete="off" bind:value={create_password} />
+								<Password label={$locale.misc.Your_password} autocomplete="off" bind:value={create_password} />
 								<Validator
 									value={create_password}
 									fn={_string({
@@ -383,39 +349,31 @@
 							type="button"
 							on:click|preventDefault={() => (create_open = false)}
 						>
-							<!-- TODO: locale  -->
-							<!-- {$locale.pages['me/devices'].dialogs.disconnect.cancel} -->
-							Cancel
+							{$locale.misc.Cancel}
 						</button>
 
 						<button type="submit" class="create-dialog-btn ripple-container" use:ripple>
-							<!-- TODO: locale -->
-							<!-- {$locale.pages["account/dashboard"].edit.dialog.save} -->
-							Create
+							{$locale.misc.Create}
 						</button>
 					</div>
 				</form>
     	</Formy>
 		{:else}
 			<div class="copy-dialog" transition:slide|local={{ duration: 300 }}>
 				<div class="copy-dialog-text">
-					<!-- TODO: locale -->
-					Copy the API key contents. This code will not be shown again.
+					{$locale.misc.api_keys.Copy_contents_message}
 				</div>
 				<div class="copy-dialog-field">
-					<!-- TODO: locale -->
 					<TextField
-						label="API key contents"
+						label={$locale.misc.api_keys.API_key_contents}
 						readonly
 						value={api_key_show_to_save}
 						btn={{
-							// TODO: locale
-							label: "Copy",
+							label: $locale.misc.Copy,
 							icon: mdiContentCopy,
 							action: () => {
 								copy(api_key_show_to_save ?? "");
-								// TODO: locale
-								_message("Copied to clipboard");
+								_message($locale.misc.Copied_to_clipboard);
 							}
 						}}
 					/>
@@ -426,8 +384,7 @@
 						api_key_show_to_save = null;
 						create_open = false
 					}}>
-						<!-- TODO: locale -->
-						Done
+						{$locale.misc.Done}
 					</button>
 				</div>
 			</div>

diff --git a/front/app/src/routes/(root)/(online)/(app)/me/api-keys/key.svelte b/front/app/src/routes/(root)/(online)/(app)/me/api-keys/key.svelte
@@ -28,29 +28,23 @@
     const data: Array<{ label: string, value: string }> = [];
    
     data.push({
-      // TODO: locale
-      label: "Id",
+      label: $locale.misc.Id,
       value: key._id,
     })
    
     
     data.push({
-      // TODO: locale
-      label: "Title",
+      label: $locale.misc.Title,
       value: key.title,
     })
    
     data.push({
-      // TODO: locale
-      // label: $locale.pages["me/devices"].device.connected,
-      label: "Created",
+      label: $locale.misc.Created,
       value: format_date(key.created_at),
     })
 
     data.push({
-      // TODO: locale,
-      // label: $locale.pages["me/devices"].device.last_used,
-      label: "Last used",
+      label: $locale.misc.Last_used,
       value: format_date(key.last_used_at || key.created_at)
     })
     
@@ -120,16 +114,8 @@
       <button 
         class="disconnect ripple-container"
         use:ripple
-        use:tooltip={
-          // TODO: locale
-          // $locale.pages["me/devices"].device.tooltips.disconnect
-          "Delete"
-        }
-        aria-label={
-          // TODO: locale
-          // $locale.pages["me/devices"].device.tooltips.disconnect
-          "Delete API key"
-        }
+        use:tooltip={$locale.misc.Delete}
+        aria-label={$locale.misc.Delete}
         on:click={on_remove}
       >
         <Icon d={mdiTrashCanOutline} />

diff --git a/front/app/src/routes/(root)/(online)/(app)/me/me.svelte b/front/app/src/routes/(root)/(online)/(app)/me/me.svelte
@@ -429,8 +429,7 @@
           <Icon d={mdiShieldKeyOutline} />
         </div>
         <span class="more-link-text">
-          <!-- TODO: locale-->
-          API Keys
+          {$locale.misc.api_keys.API_Keys}
         </span>
       </a>
     </div>