mirror of
https://github.com/Nezumi-2711/onedrive-vercel-index.git
synced 2026-09-22 13:38:45 +00:00
formatting tailwind classes with prettier
This commit is contained in:
spencerwooo
@@ -41,7 +41,9 @@ import type { OdFileObject, OdFolderObject } from '../types'
|
||||
|
||||
// Disabling SSR for some previews (image gallery view, and PDF view)
|
||||
const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
|
||||
const EPUBPreview = dynamic(() => import('./previews/EPUBPreview'), { ssr: false })
|
||||
const EPUBPreview = dynamic(() => import('./previews/EPUBPreview'), {
|
||||
ssr: false,
|
||||
})
|
||||
|
||||
/**
|
||||
* Convert url query into path string
|
||||
@@ -151,7 +153,9 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
|
||||
const [selected, setSelected] = useState<{ [key: string]: boolean }>({})
|
||||
const [totalSelected, setTotalSelected] = useState<0 | 1 | 2>(0)
|
||||
const [totalGenerating, setTotalGenerating] = useState<boolean>(false)
|
||||
const [folderGenerating, setFolderGenerating] = useState<{ [key: string]: boolean }>({})
|
||||
const [folderGenerating, setFolderGenerating] = useState<{
|
||||
[key: string]: boolean
|
||||
}>({})
|
||||
|
||||
const router = useRouter()
|
||||
const clipboard = useClipboard()
|
||||
@@ -283,7 +287,9 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
|
||||
downloadMultipleFiles({ toastId, router, files, folder })
|
||||
.then(() => {
|
||||
setTotalGenerating(false)
|
||||
toast.success('Finished downloading selected files.', { id: toastId })
|
||||
toast.success('Finished downloading selected files.', {
|
||||
id: toastId,
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
setTotalGenerating(false)
|
||||
@@ -312,7 +318,13 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
|
||||
setFolderGenerating({ ...folderGenerating, [id]: true })
|
||||
const toastId = toast.loading(DownloadingToast(router))
|
||||
|
||||
downloadTreelikeMultipleFiles({ toastId, router, files, basePath: path, folder: name })
|
||||
downloadTreelikeMultipleFiles({
|
||||
toastId,
|
||||
router,
|
||||
files,
|
||||
basePath: path,
|
||||
folder: name,
|
||||
})
|
||||
.then(() => {
|
||||
setFolderGenerating({ ...folderGenerating, [id]: false })
|
||||
toast.success('Finished downloading folder.', { id: toastId })
|
||||
@@ -394,7 +406,9 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
|
||||
render: <FontAwesomeIcon icon={['fas', 'copy']} />,
|
||||
onClick: i => {
|
||||
clipboard.copy(i.alt ? `${getBaseUrl()}/api?path=${path + '/' + i.alt}&raw=true` : '')
|
||||
toast('Copied image permanent link to clipboard.', { icon: '👌' })
|
||||
toast('Copied image permanent link to clipboard.', {
|
||||
icon: '👌',
|
||||
})
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -544,7 +558,9 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
|
||||
const fileName = file.name
|
||||
const fileExtension = fileName.slice(((fileName.lastIndexOf('.') - 1) >>> 0) + 2).toLowerCase()
|
||||
|
||||
const previewType = getPreviewType(fileExtension, { video: Boolean(file.video) })
|
||||
const previewType = getPreviewType(fileExtension, {
|
||||
video: Boolean(file.video),
|
||||
})
|
||||
if (previewType) {
|
||||
switch (previewType) {
|
||||
case preview.image:
|
||||
|
||||
@@ -4,7 +4,7 @@ const FourOhFour: React.FC<{ errorMsg: string }> = ({ errorMsg }) => {
|
||||
return (
|
||||
<div className="my-12">
|
||||
<div className="w-1/3 mx-auto">
|
||||
<Image src='/images/fabulous-rip-2.png' alt="404" width={912} height={912} priority />
|
||||
<Image src="/images/fabulous-rip-2.png" alt="404" width={912} height={912} priority />
|
||||
</div>
|
||||
<div className="mt-6 text-gray-500 max-w-xl mx-auto">
|
||||
<div className="text-xl font-bold mb-8">
|
||||
|
||||
@@ -81,7 +81,9 @@ export async function downloadMultipleFiles({
|
||||
|
||||
// Create zip file and download it
|
||||
const b = await zip.generateAsync({ type: 'blob' }, metadata => {
|
||||
toast.loading(DownloadingToast(router, metadata.percent.toFixed(0)), { id: toastId })
|
||||
toast.loading(DownloadingToast(router, metadata.percent.toFixed(0)), {
|
||||
id: toastId,
|
||||
})
|
||||
})
|
||||
downloadBlob({ blob: b, name: folder ? folder + '.zip' : 'download.zip' })
|
||||
}
|
||||
@@ -147,7 +149,9 @@ export async function downloadTreelikeMultipleFiles({
|
||||
|
||||
// Create zip file and download it
|
||||
const b = await zip.generateAsync({ type: 'blob' }, metadata => {
|
||||
toast.loading(DownloadingToast(router, metadata.percent.toFixed(0)), { id: toastId })
|
||||
toast.loading(DownloadingToast(router, metadata.percent.toFixed(0)), {
|
||||
id: toastId,
|
||||
})
|
||||
})
|
||||
downloadBlob({ blob: b, name: folder ? folder + '.zip' : 'download.zip' })
|
||||
}
|
||||
@@ -214,7 +218,7 @@ export async function* traverseFolder(path: string): AsyncGenerator<
|
||||
isFolder: boolean
|
||||
error?: { status: number; message: string }
|
||||
}[]
|
||||
yield * items
|
||||
yield* items
|
||||
folderPaths = items
|
||||
.filter(({ error }) => !error)
|
||||
.filter(i => i.isFolder)
|
||||
|
||||
@@ -21,10 +21,10 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
||||
return (
|
||||
<>
|
||||
<PreviewContainer>
|
||||
<div className="md:flex-row md:space-x-4 flex flex-col space-y-4">
|
||||
<div className="dark:bg-gray-700 aspect-square flex items-center justify-center w-full md:w-40 transition-all duration-75 bg-gray-100 rounded">
|
||||
<div className="flex flex-col space-y-4 md:flex-row md:space-x-4">
|
||||
<div className="flex aspect-square w-full items-center justify-center rounded bg-gray-100 transition-all duration-75 dark:bg-gray-700 md:w-40">
|
||||
{playerStatus === PlayerState.Loading ? (
|
||||
<LoadingIcon className="animate-spin w-5 h-5 inline-block" />
|
||||
<LoadingIcon className="inline-block h-5 w-5 animate-spin" />
|
||||
) : (
|
||||
<FontAwesomeIcon
|
||||
className={`h-5 w-5 ${playerStatus === PlayerState.Playing ? 'animate-spin' : ''}`}
|
||||
@@ -33,7 +33,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col w-full space-y-2">
|
||||
<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:{' '}
|
||||
@@ -44,7 +44,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
||||
</div>
|
||||
|
||||
<ReactAudioPlayer
|
||||
className="w-full h-11"
|
||||
className="h-11 w-full"
|
||||
src={file['@microsoft.graph.downloadUrl']}
|
||||
controls
|
||||
onCanPlay={() => setPlayerStatus(PlayerState.Ready)}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
export function PreviewContainer({ children }): JSX.Element {
|
||||
return <div className="dark:bg-gray-900 p-3 bg-white rounded dark:text-white">{children}</div>
|
||||
return <div className="rounded bg-white p-3 dark:bg-gray-900 dark:text-white">{children}</div>
|
||||
}
|
||||
|
||||
export function DownloadBtnContainer({ children }): JSX.Element {
|
||||
return (
|
||||
<div className="border-t rounded border-gray-900/10 dark:border-gray-500/30 p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
|
||||
<div className="sticky bottom-0 left-0 right-0 z-10 rounded border-t border-gray-900/10 bg-white bg-opacity-80 p-2 backdrop-blur-md dark:border-gray-500/30 dark:bg-gray-900">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -13,53 +13,53 @@ const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
||||
return (
|
||||
<div>
|
||||
<PreviewContainer>
|
||||
<div className="md:flex px-5 py-4 md:space-x-8 items-center">
|
||||
<div className="text-center border rounded-lg px-10 py-20 border-gray-900/10 dark:border-gray-500/30">
|
||||
<div className="items-center px-5 py-4 md:flex md:space-x-8">
|
||||
<div className="rounded-lg border border-gray-900/10 px-10 py-20 text-center dark:border-gray-500/30">
|
||||
<FontAwesomeIcon icon={getFileIcon(file.name, { video: Boolean(file.video) })} />
|
||||
<div className="font-medium text-sm mt-6 md:w-20 overflow-hidden truncate">{file.name}</div>
|
||||
<div className="mt-6 overflow-hidden truncate text-sm font-medium md:w-20">{file.name}</div>
|
||||
</div>
|
||||
|
||||
<div className="md:flex-1 flex flex-col py-4 space-y-2">
|
||||
<div className="flex flex-col space-y-2 py-4 md:flex-1">
|
||||
<div>
|
||||
<div className="font-medium text-xs opacity-80 uppercase py-2">Last modified</div>
|
||||
<div className="py-2 text-xs font-medium uppercase opacity-80">Last modified</div>
|
||||
<div>{formatModifiedDateTime(file.lastModifiedDateTime)}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="font-medium text-xs opacity-80 uppercase py-2">File size</div>
|
||||
<div className="py-2 text-xs font-medium uppercase opacity-80">File size</div>
|
||||
<div>{humanFileSize(file.size)}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="font-medium text-xs opacity-80 uppercase py-2">MIME type</div>
|
||||
<div className="py-2 text-xs font-medium uppercase opacity-80">MIME type</div>
|
||||
<div>{file.file.mimeType}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="font-medium text-xs opacity-80 uppercase py-2">Hashes</div>
|
||||
<table className="w-full overflow-scroll block md:table whitespace-nowrap text-sm">
|
||||
<div className="py-2 text-xs font-medium uppercase opacity-80">Hashes</div>
|
||||
<table className="block w-full overflow-scroll whitespace-nowrap text-sm md:table">
|
||||
<tbody>
|
||||
<tr className="bg-white border-y dark:bg-gray-900 dark:border-gray-700">
|
||||
<td className="bg-gray-50 dark:bg-gray-800 py-1 px-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
|
||||
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
||||
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
||||
Quick XOR
|
||||
</td>
|
||||
<td className="py-1 px-3 text-gray-500 whitespace-nowrap dark:text-gray-400 font-mono">
|
||||
<td className="whitespace-nowrap py-1 px-3 font-mono text-gray-500 dark:text-gray-400">
|
||||
{file.file.hashes.quickXorHash}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white border-y dark:bg-gray-900 dark:border-gray-700">
|
||||
<td className="bg-gray-50 dark:bg-gray-800 py-1 px-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
|
||||
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
||||
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
||||
SHA1
|
||||
</td>
|
||||
<td className="py-1 px-3 text-gray-500 whitespace-nowrap dark:text-gray-400 font-mono">
|
||||
<td className="whitespace-nowrap py-1 px-3 font-mono text-gray-500 dark:text-gray-400">
|
||||
{file.file.hashes.sha1Hash}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white border-y dark:bg-gray-900 dark:border-gray-700">
|
||||
<td className="bg-gray-50 dark:bg-gray-800 py-1 px-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
|
||||
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
||||
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
||||
SHA256
|
||||
</td>
|
||||
<td className="py-1 px-3 text-gray-500 whitespace-nowrap dark:text-gray-400 font-mono">
|
||||
<td className="whitespace-nowrap py-1 px-3 font-mono text-gray-500 dark:text-gray-400">
|
||||
{file.file.hashes.sha256Hash}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -36,11 +36,17 @@ const EPUBPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded"
|
||||
className="no-scrollbar flex w-full flex-col overflow-scroll rounded bg-white dark:bg-gray-900 md:p-3"
|
||||
style={{ maxHeight: '90vh' }}
|
||||
>
|
||||
<div className="no-scrollbar flex-1 w-full overflow-scroll" ref={epubContainer} style={{ minHeight: '70vh' }}>
|
||||
<div style={{ position: 'absolute', width: epubContainerWidth, height: '70vh' }}>
|
||||
<div className="no-scrollbar w-full flex-1 overflow-scroll" ref={epubContainer} style={{ minHeight: '70vh' }}>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: epubContainerWidth,
|
||||
height: '70vh',
|
||||
}}
|
||||
>
|
||||
<ReactReader
|
||||
url={file['@microsoft.graph.downloadUrl']}
|
||||
getRendition={rendition => fixEpub(rendition)}
|
||||
|
||||
@@ -14,11 +14,11 @@ import DownloadButtonGroup from '../DownloadBtnGtoup'
|
||||
import useAxiosGet from '../../utils/fetchOnMount'
|
||||
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
||||
|
||||
const MarkdownPreview: FC<{ file: any; path: string; standalone?: boolean }> = ({
|
||||
file,
|
||||
path,
|
||||
standalone = true,
|
||||
}) => {
|
||||
const MarkdownPreview: FC<{
|
||||
file: any
|
||||
path: string
|
||||
standalone?: boolean
|
||||
}> = ({ file, path, standalone = true }) => {
|
||||
const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
|
||||
|
||||
// The parent folder of the markdown file, which is also the relative image folder
|
||||
|
||||
@@ -9,7 +9,7 @@ const PDFEmbedPreview: React.FC<{ file: any }> = ({ file }) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="w-full rounded overflow-hidden" style={{ height: '90vh' }}>
|
||||
<div className="w-full overflow-hidden rounded" style={{ height: '90vh' }}>
|
||||
<iframe src={url} frameBorder="0" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
<DownloadBtnContainer>
|
||||
|
||||
@@ -33,7 +33,7 @@ const TextPreview = ({ file }) => {
|
||||
return (
|
||||
<div>
|
||||
<PreviewContainer>
|
||||
<pre className="md:p-3 p-0 overflow-x-scroll text-sm">{content}</pre>
|
||||
<pre className="overflow-x-scroll p-0 text-sm md:p-3">{content}</pre>
|
||||
</PreviewContainer>
|
||||
<DownloadBtnContainer>
|
||||
<DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
|
||||
|
||||
@@ -40,7 +40,7 @@ const TextPreview = ({ file }) => {
|
||||
return (
|
||||
<div>
|
||||
<PreviewContainer>
|
||||
<pre className="md:p-3 p-0 overflow-x-scroll text-sm">{content}</pre>
|
||||
<pre className="overflow-x-scroll p-0 text-sm md:p-3">{content}</pre>
|
||||
</PreviewContainer>
|
||||
<DownloadBtnContainer>
|
||||
<div className="flex justify-center">
|
||||
|
||||
@@ -27,7 +27,10 @@ const VideoPreview: React.FC<{ file: OdFileObject }> = ({ file }) => {
|
||||
options={{
|
||||
volume: 1.0,
|
||||
lang: 'en',
|
||||
video: { url: file['@microsoft.graph.downloadUrl'], pic: thumbnail },
|
||||
video: {
|
||||
url: file['@microsoft.graph.downloadUrl'],
|
||||
pic: thumbnail,
|
||||
},
|
||||
subtitle: { url: subtitle },
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user