mirror of
https://github.com/Nezumi-2711/onedrive-vercel-index.git
synced 2026-09-22 13:38:45 +00:00
readable link only on customise panel
This commit is contained in:
spencerwooo
@@ -1,5 +1,4 @@
|
||||
import { Dispatch, Fragment, SetStateAction, useRef, useState } from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { Dialog, Transition } from '@headlessui/react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
@@ -9,6 +8,24 @@ import { getBaseUrl } from '../utils/getBaseUrl'
|
||||
import { getStoredToken } from '../utils/protectedRouteHandler'
|
||||
import { getReadablePath } from '../utils/getReadablePath'
|
||||
|
||||
function LinkContainer({ title, value }: { title: string; value: string }) {
|
||||
const clipboard = useClipboard({ copiedTimeout: 1000 })
|
||||
return (
|
||||
<>
|
||||
<h4 className="py-2 text-xs font-medium uppercase tracking-wider">{title}</h4>
|
||||
<div className="group relative mb-2 max-h-24 overflow-y-scroll break-all rounded border border-gray-400/20 bg-gray-50 p-2.5 font-mono dark:bg-gray-800">
|
||||
<div className="opacity-80">{value}</div>
|
||||
<button
|
||||
onClick={() => clipboard.copy(value)}
|
||||
className="absolute top-[0.2rem] right-[0.2rem] w-8 rounded border border-gray-400/40 bg-gray-100 py-1.5 opacity-0 transition-all duration-100 hover:bg-gray-200 group-hover:opacity-100 dark:bg-gray-850 dark:hover:bg-gray-700"
|
||||
>
|
||||
{clipboard.copied ? <FontAwesomeIcon icon="check" /> : <FontAwesomeIcon icon="copy" />}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CustomEmbedLinkMenu({
|
||||
path,
|
||||
menuOpen,
|
||||
@@ -19,7 +36,6 @@ export default function CustomEmbedLinkMenu({
|
||||
setMenuOpen: Dispatch<SetStateAction<boolean>>
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const clipboard = useClipboard()
|
||||
|
||||
const hashedToken = getStoredToken(path)
|
||||
|
||||
@@ -79,39 +95,30 @@ export default function CustomEmbedLinkMenu({
|
||||
<div className="mt-4">
|
||||
<h4 className="py-2 text-xs font-medium uppercase tracking-wider">{t('Filename')}</h4>
|
||||
<input
|
||||
className="mb-2 w-full rounded border border-gray-600/10 p-1 font-mono focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:focus:ring-blue-700"
|
||||
className="mb-2 w-full rounded border border-gray-600/10 p-2.5 font-mono focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:focus:ring-blue-700"
|
||||
ref={focusInputRef}
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
/>
|
||||
<h4 className="py-2 text-xs font-medium uppercase tracking-wider">{t('Default')}</h4>
|
||||
<div className="mb-2 overflow-hidden break-all rounded border border-gray-400/20 bg-gray-50 p-1 font-mono dark:bg-gray-800">
|
||||
{`${getBaseUrl()}/api/raw/?path=${readablePath}${hashedToken ? `&odpt=${hashedToken}` : ''}`}
|
||||
</div>
|
||||
<h4 className="py-2 text-xs font-medium uppercase tracking-wider">{t('Customised')}</h4>
|
||||
<div className="mb-2 overflow-hidden break-all rounded border border-gray-400/20 bg-gray-50 p-1 font-mono dark:bg-gray-800">
|
||||
<span>{`${getBaseUrl()}/api/name/`}</span>
|
||||
<span className="underline decoration-blue-400 decoration-wavy">{name}</span>
|
||||
<span>{`/?path=${readablePath}${hashedToken ? `&odpt=${hashedToken}` : ''}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-2 mt-6 text-right">
|
||||
<button
|
||||
className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 px-4 py-2 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800"
|
||||
onClick={() => {
|
||||
clipboard.copy(
|
||||
`${getBaseUrl()}/api/name/${name}/?path=${readablePath}${
|
||||
hashedToken ? `&odpt=${hashedToken}` : ''
|
||||
}`
|
||||
)
|
||||
toast.success(t('Copied customised link to clipboard.'))
|
||||
closeMenu()
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon="copy" />
|
||||
<span className="ml-2">{t('Copy custom link to clipboard')}</span>
|
||||
</button>
|
||||
<LinkContainer
|
||||
title={t('Default')}
|
||||
value={`${getBaseUrl()}/api/raw/?path=${readablePath}${hashedToken ? `&odpt=${hashedToken}` : ''}`}
|
||||
/>
|
||||
<LinkContainer
|
||||
title={t('URL encoded')}
|
||||
value={`${getBaseUrl()}/api/raw/?path=${path}${hashedToken ? `&odpt=${hashedToken}` : ''}`}
|
||||
/>
|
||||
<LinkContainer
|
||||
title={t('Customised')}
|
||||
value={`${getBaseUrl()}/api/name/${name}/?path=${readablePath}${
|
||||
hashedToken ? `&odpt=${hashedToken}` : ''
|
||||
}`}
|
||||
/>
|
||||
<LinkContainer
|
||||
title={t('Customised and encoded')}
|
||||
value={`${getBaseUrl()}/api/name/${name}/?path=${path}${hashedToken ? `&odpt=${hashedToken}` : ''}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
|
||||
@@ -9,7 +9,6 @@ import Image from 'next/image'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
import { getBaseUrl } from '../utils/getBaseUrl'
|
||||
import { getReadablePath } from '../utils/getReadablePath'
|
||||
import { getStoredToken } from '../utils/protectedRouteHandler'
|
||||
import CustomEmbedLinkMenu from './CustomEmbedLinkMenu'
|
||||
|
||||
@@ -92,9 +91,7 @@ const DownloadButtonGroup = () => {
|
||||
/> */}
|
||||
<DownloadButton
|
||||
onClickCallback={() => {
|
||||
clipboard.copy(
|
||||
`${getBaseUrl()}/api/raw/?path=${getReadablePath(asPath)}${hashedToken ? `&odpt=${hashedToken}` : ''}`
|
||||
)
|
||||
clipboard.copy(`${getBaseUrl()}/api/raw/?path=${asPath}${hashedToken ? `&odpt=${hashedToken}` : ''}`)
|
||||
toast.success(t('Copied direct link to clipboard.'))
|
||||
}}
|
||||
btnColor="pink"
|
||||
|
||||
@@ -8,7 +8,6 @@ import { useTranslation } from 'next-i18next'
|
||||
|
||||
import { getBaseUrl } from '../utils/getBaseUrl'
|
||||
import { formatModifiedDateTime } from '../utils/fileDetails'
|
||||
import { getReadablePath } from '../utils/getReadablePath'
|
||||
import { Checkbox, ChildIcon, ChildName, Downloading } from './FileListing'
|
||||
import { getStoredToken } from '../utils/protectedRouteHandler'
|
||||
|
||||
@@ -115,7 +114,7 @@ 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()}${getReadablePath(getItemPath(c.name))}`)
|
||||
clipboard.copy(`${getBaseUrl()}${getItemPath(c.name)}`)
|
||||
toast(t('Copied folder permalink.'), { icon: '👌' })
|
||||
}}
|
||||
>
|
||||
@@ -140,7 +139,7 @@ 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/raw/?path=${getReadablePath(getItemPath(c.name))}${
|
||||
`${getBaseUrl()}/api/raw/?path=${getItemPath(c.name)}${
|
||||
hashedToken ? `&odpt=${hashedToken}` : ''
|
||||
}`
|
||||
)
|
||||
@@ -152,7 +151,7 @@ const FolderGridLayout = ({
|
||||
<a
|
||||
title={t('Download file')}
|
||||
className="cursor-pointer rounded px-1.5 py-1 hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
href={`${getBaseUrl()}/api/raw/?path=${getReadablePath(getItemPath(c.name))}${
|
||||
href={`${getBaseUrl()}/api/raw/?path=${getItemPath(c.name)}${
|
||||
hashedToken ? `&odpt=${hashedToken}` : ''
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -8,7 +8,6 @@ import { useTranslation } from 'next-i18next'
|
||||
|
||||
import { getBaseUrl } from '../utils/getBaseUrl'
|
||||
import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
|
||||
import { getReadablePath } from '../utils/getReadablePath'
|
||||
|
||||
import { Downloading, Checkbox, ChildIcon, ChildName } from './FileListing'
|
||||
import { getStoredToken } from '../utils/protectedRouteHandler'
|
||||
@@ -109,9 +108,7 @@ 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()}${getReadablePath(`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)}`
|
||||
)
|
||||
clipboard.copy(`${getBaseUrl()}${`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`}`)
|
||||
toast(t('Copied folder permalink.'), { icon: '👌' })
|
||||
}}
|
||||
>
|
||||
@@ -139,9 +136,7 @@ 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/raw/?path=${getReadablePath(getItemPath(c.name))}${
|
||||
hashedToken ? `&odpt=${hashedToken}` : ''
|
||||
}`
|
||||
`${getBaseUrl()}/api/raw/?path=${getItemPath(c.name)}${hashedToken ? `&odpt=${hashedToken}` : ''}`
|
||||
)
|
||||
toast.success(t('Copied raw file permalink.'))
|
||||
}}
|
||||
|
||||
@@ -12,7 +12,6 @@ import { useClipboard } from 'use-clipboard-copy'
|
||||
|
||||
import { getBaseUrl } from '../../utils/getBaseUrl'
|
||||
import { getExtension } from '../../utils/getFileIcon'
|
||||
import { getReadablePath } from '../../utils/getReadablePath'
|
||||
import { getStoredToken } from '../../utils/protectedRouteHandler'
|
||||
|
||||
import { DownloadButton } from '../DownloadBtnGtoup'
|
||||
@@ -143,9 +142,7 @@ const VideoPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
||||
/> */}
|
||||
<DownloadButton
|
||||
onClickCallback={() => {
|
||||
clipboard.copy(
|
||||
`${getBaseUrl()}/api/raw/?path=${getReadablePath(asPath)}${hashedToken ? `&odpt=${hashedToken}` : ''}`
|
||||
)
|
||||
clipboard.copy(`${getBaseUrl()}/api/raw/?path=${asPath}${hashedToken ? `&odpt=${hashedToken}` : ''}`)
|
||||
toast.success(t('Copied direct link to clipboard.'))
|
||||
}}
|
||||
btnColor="pink"
|
||||
|
||||
Reference in New Issue
Block a user