Merge branch 'main' into i18n

components/DownloadBtnGtoup.tsx

@@ -9,6 +9,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 
 import { getBaseUrl } from '../utils/getBaseUrl'
+import { getReadablePath } from '../utils/getReadablePath'
 
 const btnStyleMap = (btnColor?: string) => {
   const colorMap = {
@@ -47,7 +48,7 @@ export const DownloadButton = ({
 }) => {
   return (
     <button
-      className={`flex items-center space-x-2 py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border hover:bg-gray-100/10 focus:z-10 focus:ring-2 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-900 ${btnStyleMap(
+      className={`flex items-center space-x-2 rounded-lg border bg-white py-2 px-4 text-sm font-medium text-gray-900 hover:bg-gray-100/10 focus:z-10 focus:ring-2 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-900 ${btnStyleMap(
         btnColor
       )}`}
       title={btnTitle}
@@ -84,7 +85,7 @@ const DownloadButtonGroup: React.FC<{ downloadUrl: string }> = ({ downloadUrl })
       /> */}
       <DownloadButton
         onClickCallback={() => {
-          clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
+          clipboard.copy(`${getBaseUrl()}/api?path=${getReadablePath(asPath)}&raw=true`)
           toast.success(t('Copied direct link to clipboard.'))
         }}
         btnColor="pink"

components/FolderGridLayout.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'next-i18next'
 
 import { getBaseUrl } from '../utils/getBaseUrl'
 import { formatModifiedDateTime } from '../utils/fileDetails'
+import { getReadablePath } from '../utils/getReadablePath'
 import { Checkbox, ChildIcon, Downloading, formatChildName } from './FileListing'
 
 const GridItem = ({ c }: { c: OdFolderChildren }) => {
@@ -107,7 +108,9 @@ const FolderGridLayout = ({
                     title={t('Copy folder permalink')}
                     className="cursor-pointer rounded px-1.5 py-1 hover:bg-gray-300 dark:hover:bg-gray-600"
                     onClick={() => {
-                      clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
+                      clipboard.copy(
+                        `${getBaseUrl()}${getReadablePath(`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)}`
+                      )
                       toast(t('Copied folder permalink.'), { icon: '👌' })
                     }}
                   >
@@ -135,7 +138,9 @@ const FolderGridLayout = ({
                     className="cursor-pointer rounded px-1.5 py-1 hover:bg-gray-300 dark:hover:bg-gray-600"
                     onClick={() => {
                       clipboard.copy(
-                        `${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${encodeURIComponent(c.name)}&raw=true`
+                        `${getBaseUrl()}/api?path=${getReadablePath(
+                          `${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`
+                        )}&raw=true`
                       )
                       toast.success(t('Copied raw file permalink.'))
                     }}

components/FolderListLayout.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'next-i18next'
 
 import { getBaseUrl } from '../utils/getBaseUrl'
 import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
+import { getReadablePath } from '../utils/getReadablePath'
 
 import { Downloading, Checkbox, formatChildName, ChildIcon } from './FileListing'
 
@@ -103,7 +104,9 @@ const FolderListLayout = ({
                 title={t('Copy folder permalink')}
                 className="cursor-pointer rounded px-1.5 py-1 hover:bg-gray-300 dark:hover:bg-gray-600"
                 onClick={() => {
-                  clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
+                  clipboard.copy(
+                    `${getBaseUrl()}${getReadablePath(`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)}`
+                  )
                   toast(t('Copied folder permalink.'), { icon: '👌' })
                 }}
               >
@@ -131,7 +134,9 @@ const FolderListLayout = ({
                 className="cursor-pointer rounded px-1.5 py-1 hover:bg-gray-300 dark:hover:bg-gray-600"
                 onClick={() => {
                   clipboard.copy(
-                    `${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${encodeURIComponent(c.name)}&raw=true`
+                    `${getBaseUrl()}/api?path=${getReadablePath(
+                      `${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`
+                    )}&raw=true`
                   )
                   toast.success(t('Copied raw file permalink.'))
                 }}

components/previews/VideoPreview.tsx

@@ -4,11 +4,15 @@ import { useClipboard } from 'use-clipboard-copy'
 import DPlayer from 'react-dplayer'
 import toast from 'react-hot-toast'
 import { useTranslation } from 'next-i18next'
+import { useAsync } from 'react-async-hook'
 
 import { getBaseUrl } from '../../utils/getBaseUrl'
+import { getExtension } from '../../utils/getFileIcon'
+import { getReadablePath } from '../../utils/getReadablePath'
 import { DownloadButton } from '../DownloadBtnGtoup'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
-import { getExtension } from '../../utils/getFileIcon'
+import FourOhFour from '../FourOhFour'
+import Loading from '../Loading'
 
 const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
   const { asPath } = useRouter()
@@ -22,21 +26,49 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
   // We assume subtitle files are beside the video with the same name, only webvtt '.vtt' files are supported
   const subtitle = `/api?path=${asPath.replace(getExtension(file.name), 'vtt')}&raw=true`
 
+  const isFlv = getExtension(file.name) === 'flv'
+  const {
+    loading,
+    error,
+    result: flvjs,
+  } = useAsync(async () => {
+    if (isFlv) {
+      return (await import('flv.js')).default
+    }
+  }, [isFlv])
+
   return (
     <>
       <PreviewContainer>
-        <DPlayer
-          className="aspect-video"
-          options={{
-            volume: 1.0,
-            lang: 'en',
-            video: {
-              url: file['@microsoft.graph.downloadUrl'],
-              pic: thumbnail,
-            },
-            subtitle: { url: subtitle },
-          }}
-        />
+        {error ? (
+          <FourOhFour errorMsg={error.message} />
+        ) : loading && isFlv ? (
+          <Loading loadingText="Loading FLV extension..." />
+        ) : (
+          <DPlayer
+            className="aspect-video"
+            options={{
+              volume: 1.0,
+              lang: 'en',
+              video: {
+                url: file['@microsoft.graph.downloadUrl'],
+                pic: thumbnail,
+                type: isFlv ? 'customFlv' : 'auto',
+                customType: {
+                  customFlv: (video: HTMLVideoElement) => {
+                    const flvPlayer = flvjs!.createPlayer({
+                      type: 'flv',
+                      url: video.src,
+                    })
+                    flvPlayer.attachMediaElement(video)
+                    flvPlayer.load()
+                  },
+                },
+              },
+              subtitle: { url: subtitle },
+            }}
+          />
+        )}
       </PreviewContainer>
 
       <DownloadBtnContainer>
@@ -57,7 +89,7 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
           /> */}
           <DownloadButton
             onClickCallback={() => {
-              clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
+              clipboard.copy(`${getBaseUrl()}/api?path=${getReadablePath(asPath)}&raw=true`)
               toast.success(t('Copied direct link to clipboard.'))
             }}
             btnColor="pink"