add getReadablePath util to make copied url readable

This commit is contained in:
myl7
2022-02-08 02:54:48 +08:00
parent f7771e5174
commit 73651e4f50
5 changed files with 61 additions and 6 deletions
+2 -1
View File
@@ -8,6 +8,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 = {
@@ -81,7 +82,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('Copied direct link to clipboard.')
}}
btnColor="pink"
+7 -2
View File
@@ -7,6 +7,7 @@ import { useClipboard } from 'use-clipboard-copy'
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 }) => {
@@ -104,7 +105,9 @@ const FolderGridLayout = ({
title="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('Copied folder permalink.', { icon: '👌' })
}}
>
@@ -132,7 +135,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('Copied raw file permalink.')
}}
+7 -2
View File
@@ -7,6 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { getBaseUrl } from '../utils/getBaseUrl'
import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
import { getReadablePath } from '../utils/getReadablePath'
import { Downloading, Checkbox, formatChildName, ChildIcon } from './FileListing'
@@ -100,7 +101,9 @@ const FolderListLayout = ({
title="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('Copied folder permalink.', { icon: '👌' })
}}
>
@@ -128,7 +131,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('Copied raw file permalink.')
}}
+2 -1
View File
@@ -8,6 +8,7 @@ import { getBaseUrl } from '../../utils/getBaseUrl'
import { DownloadButton } from '../DownloadBtnGtoup'
import { DownloadBtnContainer, PreviewContainer } from './Containers'
import { getExtension } from '../../utils/getFileIcon'
import { getReadablePath } from '../../utils/getReadablePath'
const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
const { asPath } = useRouter()
@@ -54,7 +55,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('Copied direct link to clipboard.')
}}
btnColor="pink"