Added media localization

l10n/bundle.l10n.json

@@ -6,6 +6,7 @@
   "common.search": "Search",
   "common.save": "Save",
   "common.menu": "Menu",
+  "common.insert": "Insert",
   "common.error.message": "Sorry, something went wrong.",
 
   "field.required": "Required field",
@@ -153,6 +154,19 @@
   "dashboard.media.item.infoDialog.snippet.description": "Select the media snippet to use for the current media file.",
   "dashboard.media.item.alert.delete.description": "Are you sure you want to delete the file from the {0} folder?",
 
+  "dashboard.media.media.description": "Select the media file to add to your content.",
+  "dashboard.media.media.dragAndDrop": "You can also drag and drop images from your desktop and select them once uploaded.",
+  "dashboard.media.media.folder.upload": "Upload to {0}",
+  "dashboard.media.media.folder.default": "No folder selected, files you drop will be added to the {0} folder",
+  "dashboard.media.media.placeholder": "No media files to show. You can drag & drop new files by holding your [shift] key.",
+  "dashboard.media.media.currentFolder": "Content folder",
+  "dashboard.media.media.publicFolder": "Public folder",
+
+  "dashboard.media.mediaHeaderTop.searchbox.placeholder": "Search in folder",
+
+  "dashboard.media.mediaSnippetForm.formDialog.title": "Insert media: {0}",
+  "dashboard.media.mediaSnippetForm.formDialog.description": "Insert the {0} media file into the current article",
+
   "panel.actions.title": "Actions",
   "panel.actions.openDashboard": "Open dashboard",
   "panel.actions.openPreview": "Open preview",

src/dashboardWebView/components/Media/Lightbox.tsx

@@ -7,7 +7,7 @@ import { LightboxAtom } from '../../state';
 export interface ILightboxProps { }
 
 export const Lightbox: React.FunctionComponent<ILightboxProps> = (
-  props: React.PropsWithChildren<ILightboxProps>
+  _: React.PropsWithChildren<ILightboxProps>
 ) => {
   const [lightbox, setLightbox] = useRecoilState(LightboxAtom);
   const { getColors } = useThemeColors();

src/dashboardWebView/components/Media/Media.tsx

@@ -26,11 +26,13 @@ import { parseWinPath } from '../../../helpers/parseWinPath';
 import { basename, extname, join } from 'path';
 import { MediaInfo } from '../../../models';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IMediaProps { }
 
 export const Media: React.FunctionComponent<IMediaProps> = (
-  props: React.PropsWithChildren<IMediaProps>
+  _: React.PropsWithChildren<IMediaProps>
 ) => {
   const { media } = useMedia();
   const settings = useRecoilValue(SettingsSelector);
@@ -166,9 +168,9 @@ export const Media: React.FunctionComponent<IMediaProps> = (
       <div className="w-full h-full pb-6" {...getRootProps()}>
         {viewData?.data?.filePath && (
           <div className={`text-lg text-center mb-6`}>
-            <p>Select the media file to add to your content.</p>
+            <p>{l10n.t(LocalizationKey.dashboardMediaMediaDescription)}</p>
             <p className={`opacity-80 text-base`}>
-              You can also drag and drop images from your desktop and select them once uploaded.
+              {l10n.t(LocalizationKey.dashboardMediaMediaDragAndDrop)}
             </p>
           </div>
         )}
@@ -182,9 +184,8 @@ export const Media: React.FunctionComponent<IMediaProps> = (
             <UploadIcon className={`h-32`} />
             <p className={`text-xl max-w-md text-center`}>
               {selectedFolder
-                ? `Upload to ${selectedFolder}`
-                : `No folder selected, files you drop will be added to the ${currentStaticFolder || 'public'
-                } folder.`}
+                ? l10n.t(LocalizationKey.dashboardMediaMediaFolderUpload, selectedFolder)
+                : l10n.t(LocalizationKey.dashboardMediaMediaFolderDefault, currentStaticFolder || 'public')}
             </p>
           </div>
         )}
@@ -198,8 +199,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
               />
 
               <p className={`text-xl font-medium`}>
-                No media files to show. You can drag &amp; drop new files by holding your [shift]
-                key.
+                {l10n.t(LocalizationKey.dashboardMediaMediaPlaceholder)}
               </p>
             </div>
           </div>
@@ -213,7 +213,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
               group.folders.length > 0 && (
                 <div key={`group-${idx}`} className={`mb-8`}>
                   <h2 className="text-lg mb-8 first-letter:uppercase">
-                    Content folder: <b>{group.title}</b>
+                    {l10n.t(LocalizationKey.dashboardMediaMediaCurrentFolder)}: <b>{group.title}</b>
                   </h2>
 
                   <List gap={0}>
@@ -234,7 +234,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
           <div className={`mb-8`}>
             {contentFolders && contentFolders.length > 0 && (
               <h2 className="text-lg mb-8">
-                Public folder
+                {l10n.t(LocalizationKey.dashboardMediaMediaPublicFolder)}
                 {currentStaticFolder && (
                   <span>
                     : <b>{currentStaticFolder}</b>

src/dashboardWebView/components/Media/MediaHeaderBottom.tsx

@@ -10,7 +10,7 @@ import { Pagination } from '../Header/Pagination';
 export interface IMediaHeaderBottomProps { }
 
 export const MediaHeaderBottom: React.FunctionComponent<IMediaHeaderBottomProps> = (
-  props: React.PropsWithChildren<IMediaHeaderBottomProps>
+  _: React.PropsWithChildren<IMediaHeaderBottomProps>
 ) => {
   const settings = useRecoilValue(SettingsAtom);
   const { getColors } = useThemeColors();

src/dashboardWebView/components/Media/MediaHeaderTop.tsx

@@ -17,6 +17,8 @@ import {
 import { Searchbox } from '../Header';
 import { PaginationStatus } from '../Header/PaginationStatus';
 import { FolderCreation } from './FolderCreation';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IMediaHeaderTopProps { }
 
@@ -88,7 +90,7 @@ export const MediaHeaderTop: React.FunctionComponent<
         }`}
       aria-label="Pagination"
     >
-      <Searchbox placeholder={`Search in folder`} />
+      <Searchbox placeholder={l10n.t(LocalizationKey.dashboardMediaMediaHeaderTopSearchboxPlaceholder)} />
 
       <PaginationStatus />
 

src/dashboardWebView/components/Media/MediaSnippetForm.tsx

@@ -5,6 +5,8 @@ import { MediaInfo, Snippet } from '../../../models';
 import { ViewDataSelector } from '../../state';
 import { FormDialog } from '../Modals/FormDialog';
 import SnippetForm, { SnippetFormHandle } from '../SnippetsView/SnippetForm';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IMediaSnippetFormProps {
   media: MediaInfo;
@@ -31,15 +33,13 @@ export const MediaSnippetForm: React.FunctionComponent<IMediaSnippetFormProps> =
 
   return (
     <FormDialog
-      title={`Insert media: ${media.title || media.filename}`}
-      description={`Insert the ${
-        media.title || media.filename
-      } media file into the current article`}
+      title={l10n.t(LocalizationKey.dashboardMediaMediaSnippetFormFormDialogTitle, media.title || media.filename)}
+      description={l10n.t(LocalizationKey.dashboardMediaMediaSnippetFormFormDialogDescription, media.title || media.filename)}
       isSaveDisabled={false}
       trigger={insertToArticle}
       dismiss={onDismiss}
-      okBtnText="Insert"
-      cancelBtnText="Cancel"
+      okBtnText={l10n.t(LocalizationKey.commonInsert)}
+      cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
     >
       <SnippetForm
         ref={formRef}

src/localization/localization.enum.ts

@@ -27,6 +27,10 @@ export enum LocalizationKey {
    * Menu
    */
   commonMenu = 'common.menu',
+  /**
+   * Insert
+   */
+  commonInsert = 'common.insert',
   /**
    * Sorry, something went wrong.
    */
@@ -471,6 +475,46 @@ export enum LocalizationKey {
    * Are you sure you want to delete the file from the {0} folder?
    */
   dashboardMediaItemAlertDeleteDescription = 'dashboard.media.item.alert.delete.description',
+  /**
+   * Select the media file to add to your content.
+   */
+  dashboardMediaMediaDescription = 'dashboard.media.media.description',
+  /**
+   * You can also drag and drop images from your desktop and select them once uploaded.
+   */
+  dashboardMediaMediaDragAndDrop = 'dashboard.media.media.dragAndDrop',
+  /**
+   * Upload to {0}
+   */
+  dashboardMediaMediaFolderUpload = 'dashboard.media.media.folder.upload',
+  /**
+   * No folder selected, files you drop will be added to the {0} folder
+   */
+  dashboardMediaMediaFolderDefault = 'dashboard.media.media.folder.default',
+  /**
+   * No media files to show. You can drag & drop new files by holding your [shift] key.
+   */
+  dashboardMediaMediaPlaceholder = 'dashboard.media.media.placeholder',
+  /**
+   * Content folder
+   */
+  dashboardMediaMediaCurrentFolder = 'dashboard.media.media.currentFolder',
+  /**
+   * Public folder
+   */
+  dashboardMediaMediaPublicFolder = 'dashboard.media.media.publicFolder',
+  /**
+   * Search in folder
+   */
+  dashboardMediaMediaHeaderTopSearchboxPlaceholder = 'dashboard.media.mediaHeaderTop.searchbox.placeholder',
+  /**
+   * Insert media: {0}
+   */
+  dashboardMediaMediaSnippetFormFormDialogTitle = 'dashboard.media.mediaSnippetForm.formDialog.title',
+  /**
+   * Insert the {0} media file into the current article
+   */
+  dashboardMediaMediaSnippetFormFormDialogDescription = 'dashboard.media.mediaSnippetForm.formDialog.description',
   /**
    * Actions
    */