add translations for preview components

also fix ellipsis in zh-CN

components/previews/AudioPreview.tsx

@@ -3,6 +3,7 @@ import { FC, useState } from 'react'
 
 import ReactAudioPlayer from 'react-audio-player'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useTranslation } from 'next-i18next'
 
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
@@ -18,6 +19,8 @@ enum PlayerState {
 const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
   const [playerStatus, setPlayerStatus] = useState(PlayerState.Loading)
 
+  const { t } = useTranslation()
+
   return (
     <>
       <PreviewContainer>
@@ -36,7 +39,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
           <div className="flex w-full flex-col space-y-2">
             <div>{file.name}</div>
             <div className="pb-4 text-sm text-gray-500">
-              Last modified:{' '}
+              {t('Last modified:') + ' '}
               {new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
                 dateStyle: 'short',
                 timeStyle: 'short',

components/previews/CodePreview.tsx

@@ -1,5 +1,6 @@
 import { useEffect, FC } from 'react'
 import Prism from 'prismjs'
+import { useTranslation } from 'next-i18next'
 
 import { getExtension } from '../../utils/getFileIcon'
 import useAxiosGet from '../../utils/fetchOnMount'
@@ -11,6 +12,8 @@ import { DownloadBtnContainer, PreviewContainer } from './Containers'
 const CodePreview: FC<{ file: any }> = ({ file }) => {
   const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
 
+  const { t } = useTranslation()
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
       Prism.highlightAll()
@@ -27,7 +30,7 @@ const CodePreview: FC<{ file: any }> = ({ file }) => {
   if (validating) {
     return (
       <PreviewContainer>
-        <Loading loadingText="Loading file content..." />
+        <Loading loadingText={t('Loading file content...')} />
       </PreviewContainer>
     )
   }

components/previews/DefaultPreview.tsx

@@ -2,6 +2,7 @@ import type { OdFileObject } from '../../types'
 import { FC } from 'react'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useTranslation } from 'next-i18next'
 
 import { getFileIcon } from '../../utils/getFileIcon'
 import { formatModifiedDateTime, humanFileSize } from '../../utils/fileDetails'
@@ -10,6 +11,8 @@ import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
 
 const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => {
+  const { t } = useTranslation()
+
   return (
     <div>
       <PreviewContainer>
@@ -21,22 +24,22 @@ const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => {
 
           <div className="flex flex-col space-y-2 py-4 md:flex-1">
             <div>
-              <div className="py-2 text-xs font-medium uppercase opacity-80">Last modified</div>
+              <div className="py-2 text-xs font-medium uppercase opacity-80">{t('Last modified')}</div>
               <div>{formatModifiedDateTime(file.lastModifiedDateTime)}</div>
             </div>
 
             <div>
-              <div className="py-2 text-xs font-medium uppercase opacity-80">File size</div>
+              <div className="py-2 text-xs font-medium uppercase opacity-80">{t('File size')}</div>
               <div>{humanFileSize(file.size)}</div>
             </div>
 
             <div>
-              <div className="py-2 text-xs font-medium uppercase opacity-80">MIME type</div>
+              <div className="py-2 text-xs font-medium uppercase opacity-80">{t('MIME type')}</div>
-              <div>{file.file?.mimeType || 'Unavailable'}</div>
+              <div>{file.file?.mimeType || t('Unavailable')}</div>
             </div>
 
             <div>
-              <div className="py-2 text-xs font-medium uppercase opacity-80">Hashes</div>
+              <div className="py-2 text-xs font-medium uppercase opacity-80">{t('Hashes')}</div>
               <table className="block w-full overflow-scroll whitespace-nowrap text-sm md:table">
                 <tbody>
                   <tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">

components/previews/EPUBPreview.tsx

@@ -2,6 +2,7 @@ import type { OdFileObject } from '../../types'
 
 import { FC, useEffect, useRef, useState } from 'react'
 import { ReactReader } from 'react-reader'
+import { useTranslation } from 'next-i18next'
 
 import Loading from '../Loading'
 import DownloadButtonGroup from '../DownloadBtnGtoup'
@@ -18,6 +19,8 @@ const EPUBPreview: FC<{ file: OdFileObject }> = ({ file }) => {
   const [location, setLocation] = useState<string>()
   const onLocationChange = (cfiStr: string) => setLocation(cfiStr)
 
+  const { t } = useTranslation()
+
   // Fix for not valid epub files according to
   // https://github.com/gerhardsletten/react-reader/issues/33#issuecomment-673964947
   const fixEpub = rendition => {
@@ -50,7 +53,7 @@ const EPUBPreview: FC<{ file: OdFileObject }> = ({ file }) => {
             <ReactReader
               url={file['@microsoft.graph.downloadUrl']}
               getRendition={rendition => fixEpub(rendition)}
-              loadingView={<Loading loadingText="Loading EPUB ..." />}
+              loadingView={<Loading loadingText={t('Loading EPUB ...')} />}
               location={location}
               locationChanged={onLocationChange}
               epubInitOptions={{ openAs: 'epub' }}

components/previews/MarkdownPreview.tsx

@@ -5,6 +5,7 @@ import gfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import rehypeKatex from 'rehype-katex'
 import rehypeRaw from 'rehype-raw'
+import { useTranslation } from 'next-i18next'
 
 import 'katex/dist/katex.min.css'
 
@@ -21,6 +22,8 @@ const MarkdownPreview: FC<{
 }> = ({ file, path, standalone = true }) => {
   const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
 
+  const { t } = useTranslation()
+
   // The parent folder of the markdown file, which is also the relative image folder
   const parentPath = path.substring(0, path.lastIndexOf('/'))
   // Check if the image is relative path instead of a absolute url
@@ -76,7 +79,7 @@ const MarkdownPreview: FC<{
   if (validating) {
     return (
       <PreviewContainer>
-        <Loading loadingText="Loading file content..." />
+        <Loading loadingText={t('Loading file content...')} />
       </PreviewContainer>
     )
   }

components/previews/TextPreview.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'next-i18next'
+
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
 import DownloadButtonGroup from '../DownloadBtnGtoup'
@@ -5,6 +7,8 @@ import useAxiosGet from '../../utils/fetchOnMount'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
 
 const TextPreview = ({ file }) => {
+  const { t } = useTranslation()
+
   const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
   if (error) {
     return (
@@ -17,7 +21,7 @@ const TextPreview = ({ file }) => {
   if (validating) {
     return (
       <PreviewContainer>
-        <Loading loadingText="Loading file content..." />
+        <Loading loadingText={t('Loading file content...')} />
       </PreviewContainer>
     )
   }
@@ -25,7 +29,7 @@ const TextPreview = ({ file }) => {
   if (!content) {
     return (
       <PreviewContainer>
-        <FourOhFour errorMsg="File is empty." />
+        <FourOhFour errorMsg={t('File is empty.')} />
       </PreviewContainer>
     )
   }

components/previews/URLPreview.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'next-i18next'
+
 import FourOhFour from '../FourOhFour'
 import Loading from '../Loading'
 import { DownloadButton } from '../DownloadBtnGtoup'
@@ -12,6 +14,8 @@ const parseDotUrl = (content: string): string | undefined => {
 }
 
 const TextPreview = ({ file }) => {
+  const { t } = useTranslation()
+
   const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
   if (error) {
     return (
@@ -24,7 +28,7 @@ const TextPreview = ({ file }) => {
   if (validating) {
     return (
       <PreviewContainer>
-        <Loading loadingText="Loading file content..." />
+        <Loading loadingText={t('Loading file content...')} />
       </PreviewContainer>
     )
   }
@@ -32,7 +36,7 @@ const TextPreview = ({ file }) => {
   if (!content) {
     return (
       <PreviewContainer>
-        <FourOhFour errorMsg="File is empty." />
+        <FourOhFour errorMsg={t('File is empty.')} />
       </PreviewContainer>
     )
   }
@@ -47,9 +51,9 @@ const TextPreview = ({ file }) => {
           <DownloadButton
             onClickCallback={() => window.open(parseDotUrl(content) || '')}
             btnColor="blue"
-            btnText="Open URL"
+            btnText={t('Open URL')}
             btnIcon="external-link-alt"
-            btnTitle={`Open URL ${parseDotUrl(content) || ''}`}
+            btnTitle={t('Open URL{{url}}', { url: ' ' + parseDotUrl(content) || '' })}
           />
         </div>
       </DownloadBtnContainer>

components/previews/VideoPreview.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import { useClipboard } from 'use-clipboard-copy'
 import DPlayer from 'react-dplayer'
 import toast from 'react-hot-toast'
+import { useTranslation } from 'next-i18next'
 
 import { getBaseUrl } from '../../utils/getBaseUrl'
 import { DownloadButton } from '../DownloadBtnGtoup'
@@ -13,6 +14,8 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
   const { asPath } = useRouter()
   const clipboard = useClipboard()
 
+  const { t } = useTranslation()
+
   // OneDrive generates thumbnails for its video files, we pick the thumbnail with the highest resolution
   const thumbnail = file.thumbnails && file.thumbnails.length > 0 ? file.thumbnails[0].large.url : ''
 
@@ -41,7 +44,7 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
           <DownloadButton
             onClickCallback={() => window.open(file['@microsoft.graph.downloadUrl'])}
             btnColor="blue"
-            btnText="Download"
+            btnText={t('Download')}
             btnIcon="file-download"
           />
           {/* <DownloadButton
@@ -49,16 +52,16 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
               window.open(`/api/proxy?url=${encodeURIComponent(file['@microsoft.graph.downloadUrl'])}`)
             }
             btnColor="teal"
-            btnText="Proxy download"
+            btnText={t('Proxy download')}
             btnIcon="download"
           /> */}
           <DownloadButton
             onClickCallback={() => {
               clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
-              toast.success('Copied direct link to clipboard.')
+              toast.success(t('Copied direct link to clipboard.'))
             }}
             btnColor="pink"
-            btnText="Copy direct link"
+            btnText={t('Copy direct link')}
             btnIcon="copy"
           />
 

public/locales/en/common.json

@@ -32,16 +32,24 @@
   "Failed to download folder {{path}}: {{status}} {{message}} Skipped it to continue.": "Failed to download folder {{path}}: {{status}} {{message}} Skipped it to continue.",
   "Failed to download folder.": "Failed to download folder.",
   "Failed to download selected files.": "Failed to download selected files.",
+  "File is empty.": "File is empty.",
+  "File size": "File size",
   "Finished downloading folder.": "Finished downloading folder.",
   "Finished downloading selected files.": "Finished downloading selected files.",
   "Grid": "Grid",
+  "Hashes": "Hashes",
   "Home": "Home",
   "If you know the password, please enter it below.": "If you know the password, please enter it below.",
+  "Last modified": "Last modified",
   "Last Modified": "Last Modified",
+  "Last modified:": "Last modified:",
   "List": "List",
   "Load more": "Load more",
   "Loading ...": "Loading ...",
+  "Loading EPUB ...": "Loading EPUB ...",
+  "Loading file content...": "Loading file content...",
   "Logout": "Logout",
+  "MIME type": "MIME type",
   "Name": "Name",
   "No more files": "No more files",
   "Nothing here.": "Nothing here.",
@@ -50,6 +58,8 @@
   "of {{count}} file(s) -——loading——one": "of ... file(s) -",
   "of {{count}} file(s) -——loading——other": "of ... file(s) -",
   "Oops, that&apos;s a <1>four-oh-four</1>.": "Oops, that&apos;s a <1>four-oh-four</1>.",
+  "Open URL": "Open URL",
+  "Open URL{{url}}": "Open URL{{url}}",
   "Press <2>F12</2> and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions</6>.": "Press <2>F12</2> and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions</6>.",
   "Search ...": "Search ...",
   "Select all files": "Select all files",
@@ -58,5 +68,6 @@
   "Size": "Size",
   "These tokens are used to authenticate yourself into password protected folders, ": "These tokens are used to authenticate yourself into password protected folders, ",
   "This route (the folder itself and the files inside) is password protected. ": "This route (the folder itself and the files inside) is password protected. ",
+  "Unavailable": "Unavailable",
   "Weibo": "Weibo"
 }

public/locales/zh-CN/common.json

@@ -23,29 +23,39 @@
   "Downloading {{progress}}%": "已下载 {{progress}}%",
   "Downloading folder, refresh page to cancel": "下载文件夹中，刷新页面以取消",
   "Downloading selected files, refresh page to cancel": "下载选定文件中，刷新页面以取消",
-  "Downloading selected files...": "下载选定文件中...",
+  "Downloading selected files...": "下载选定文件中……",
   "Email": "电子邮件",
   "Enter Password": "输入密码",
   "Error: {{message}}": "错误：{{message}}",
   "Failed to download folder {{path}}: {{status}} {{message}} Skipped it to continue.": "下载文件夹 {{path}} 失败：{{status}} {{message}} 已忽略此错误并继续下载。",
   "Failed to download folder.": "下载文件夹失败。",
   "Failed to download selected files.": "下载选定文件失败。",
+  "File is empty.": "文件为空。",
+  "File size": "文件大小",
   "Finished downloading folder.": "下载文件夹成功。",
   "Finished downloading selected files.": "下载选定文件成功。",
   "Grid": "图格",
+  "Hashes": "哈希值",
   "Home": "首页",
   "If you know the password, please enter it below.": "如果您知晓密码，请在下面输入。",
+  "Last modified": "最后修改时间",
   "Last Modified": "最后修改时间",
+  "Last modified:": "最后修改时间：",
   "List": "列表",
   "Load more": "加载更多",
   "Loading ...": "加载中……",
+  "Loading EPUB ...": "加载 EPUB 中……",
+  "Loading file content...": "加载文件内容中……",
   "Logout": "注销",
+  "MIME type": "MIME 类型",
   "Name": "文件名",
   "No more files": "加载完毕",
   "Nothing here.": "无内容。",
   "of {{count}} file(s) -——loaded——other": "共 {{count}} 个文件",
-  "of {{count}} file(s) -——loading——other": "共 ... 个文件",
+  "of {{count}} file(s) -——loading——other": "共……个文件",
   "Oops, that&apos;s a <1>four-oh-four</1>.": "Oops，这里是 <1>404</1> 页面。",
+  "Open URL": "打开 URL",
+  "Open URL{{url}}": "打开 URL{{url}}",
   "Press <2>F12</2> and open devtools for more details, or seek help at <6>onedrive-vercel-index discussions</6>.": "请按下 <2>F12</2> 来打开开发者工具窗口以获取详细信息，或是到 <6>onedrive-vercel-index 社区讨论</6> 处寻求帮助。",
   "Search ...": "搜索……",
   "Select all files": "选择所有文件",
@@ -54,5 +64,6 @@
   "Size": "文件大小",
   "These tokens are used to authenticate yourself into password protected folders, ": "这些密钥是用来验证您的身份以访问密钥保护下的文件夹的，",
   "This route (the folder itself and the files inside) is password protected. ": "此路由（此文件夹和其中的文件）是受密钥保护的。",
+  "Unavailable": "无",
   "Weibo": "微博"
 }