nezumi/onedrive-vercel-index
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/onedrive-vercel-index.git synced 2026-09-22 13:38:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

format according to headwind sequence

Browse Source
This commit is contained in:
spencerwooo
2021-09-04 15:15:09 +01:00
parent 047508e5da
commit 97a0eb91fc
17 changed files with 91 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Auth.tsx
+5 -5
View File
@@ -14,11 +14,11 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
const [token, setToken] = useLocalStorage(authTokenPath, '') const [token, setToken] = useLocalStorage(authTokenPath, '')
return ( return (
<div className="flex flex-col space-y-4 max-w-sm mx-auto md:my-10"> <div className="md:my-10 flex flex-col max-w-sm mx-auto space-y-4">
<div className="mx-auto w-3/4 md:w-5/6"> <div className="md:w-5/6 w-3/4 mx-auto">
<Image src={'/images/no-looking.png'} alt="authenticate" width={912} height={912} /> <Image src={'/images/no-looking.png'} alt="authenticate" width={912} height={912} />
</div> </div>
<div className="dark:text-gray-100 text-gray-900 text-lg font-bold">Enter Password</div> <div className="dark:text-gray-100 text-lg font-bold text-gray-900">Enter Password</div>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
This route (the folder itself and the files inside) is password protected. If you know the password, please This route (the folder itself and the files inside) is password protected. If you know the password, please
@@ -26,7 +26,7 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
</p> </p>
<input <input
className="font-mono p-2 bg-blue-50 dark:bg-gray-600 dark:text-white rounded focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none" className="bg-blue-50 dark:bg-gray-600 dark:text-white focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none p-2 font-mono rounded"
autoFocus autoFocus
type="text" type="text"
placeholder="************" placeholder="************"
@@ -41,7 +41,7 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
}} }}
/> />
<button <button
className="inline-flex space-x-2 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600" className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 inline-flex items-center justify-center px-4 py-2 space-x-2 text-white bg-blue-500 rounded"
onClick={() => { onClick={() => {
router.reload() router.reload()
}} }}
components/Breadcrumb.tsx
+4 -4
View File
@@ -8,14 +8,14 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
const { path } = query const { path } = query
if (Array.isArray(path)) { if (Array.isArray(path)) {
return ( return (
<div className="pb-4 text-sm text-gray-600 dark:text-gray-300 flex overflow-x-scroll no-scrollbar"> <div className="dark:text-gray-300 no-scrollbar flex pb-4 overflow-x-scroll text-sm text-gray-600">
<div className="p-1 hover:opacity-80 transition-all duration-75 flex-shrink-0"> <div className="hover:opacity-80 flex-shrink-0 p-1 transition-all duration-75">
<Link href="/">🚩 Home</Link> <Link href="/">🚩 Home</Link>
</div> </div>
{path.map((q: string, i: number) => ( {path.map((q: string, i: number) => (
<div key={i} className="flex items-center flex-shrink-0"> <div key={i} className="flex items-center flex-shrink-0">
<div>/</div> <div>/</div>
<div className="p-1 hover:opacity-80 transition-all duration-75"> <div className="hover:opacity-80 p-1 transition-all duration-75">
<Link <Link
href={`/${path href={`/${path
.slice(0, i + 1) .slice(0, i + 1)
@@ -33,7 +33,7 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
} }
return ( return (
<div className="pb-4 text-sm text-gray-600 dark:text-gray-300 hover:opacity-80 transition-all duration-75"> <div className="dark:text-gray-300 hover:opacity-80 pb-4 text-sm text-gray-600 transition-all duration-75">
<div className="p-1"> <div className="p-1">
<Link href="/">🚩 Home</Link> <Link href="/">🚩 Home</Link>
</div> </div>
components/DownloadBtn.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
const clipboard = useClipboard() const clipboard = useClipboard()
return ( return (
<div className="flex flex-wrap space-x-2 justify-center"> <div className="flex flex-wrap justify-center space-x-2">
<Toaster <Toaster
toastOptions={{ toastOptions={{
style: { style: {
@@ -21,7 +21,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
}} }}
/> />
<a <a
className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2" className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
href={downloadUrl} href={downloadUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -30,7 +30,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
<span>Download</span> <span>Download</span>
</a> </a>
<button <button
className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2" className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
onClick={() => { onClick={() => {
clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`) clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
toast.success('Copied direct link to clipboard.') toast.success('Copied direct link to clipboard.')
components/FileListing.tsx
+24 -24
View File
@@ -66,10 +66,10 @@ const FileListItem: FunctionComponent<{
const renderEmoji = emojiIcon && !emojiIcon.index const renderEmoji = emojiIcon && !emojiIcon.index
return ( return (
<div className="p-3 grid grid-cols-11 items-center space-x-2 cursor-pointer"> <div className="grid items-center grid-cols-11 p-3 space-x-2 cursor-pointer">
<div className="flex space-x-2 items-center col-span-11 md:col-span-7 truncate"> <div className="md:col-span-7 flex items-center col-span-11 space-x-2 truncate">
{/* <div>{c.file ? c.file.mimeType : 'folder'}</div> */} {/* <div>{c.file ? c.file.mimeType : 'folder'}</div> */}
<div className="w-5 text-center flex-shrink-0"> <div className="flex-shrink-0 w-5 text-center">
{renderEmoji ? ( {renderEmoji ? (
<span>{emojiIcon ? emojiIcon[0] : '📁'}</span> <span>{emojiIcon ? emojiIcon[0] : '📁'}</span>
) : ( ) : (
@@ -80,7 +80,7 @@ const FileListItem: FunctionComponent<{
{renderEmoji ? c.name.replace(emojiIcon ? emojiIcon[0] : '', '').trim() : c.name} {renderEmoji ? c.name.replace(emojiIcon ? emojiIcon[0] : '', '').trim() : c.name}
</div> </div>
</div> </div>
<div className="hidden md:block text-sm font-mono col-span-3 text-gray-700 dark:text-gray-500 flex-shrink-0"> <div className="md:block dark:text-gray-500 flex-shrink-0 hidden col-span-3 font-mono text-sm text-gray-700">
{new Date(c.lastModifiedDateTime).toLocaleString('en-US', { {new Date(c.lastModifiedDateTime).toLocaleString('en-US', {
year: 'numeric', year: 'numeric',
month: '2-digit', month: '2-digit',
@@ -90,7 +90,7 @@ const FileListItem: FunctionComponent<{
hour12: false, hour12: false,
})} })}
</div> </div>
<div className="hidden md:block text-sm font-mono col-span-1 truncate text-gray-700 dark:text-gray-500 flex-shrink-0"> <div className="md:block dark:text-gray-500 flex-shrink-0 hidden col-span-1 font-mono text-sm text-gray-700 truncate">
{humanFileSize(c.size)} {humanFileSize(c.size)}
</div> </div>
</div> </div>
@@ -110,14 +110,14 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
if (error) { if (error) {
return ( return (
<div className="shadow bg-white dark:bg-gray-900 rounded p-3"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
{error.message.includes('401') ? <Auth redirect={path} /> : <FourOhFour errorMsg={error.message} />} {error.message.includes('401') ? <Auth redirect={path} /> : <FourOhFour errorMsg={error.message} />}
</div> </div>
) )
} }
if (!data) { if (!data) {
return ( return (
<div className="shadow bg-white dark:bg-gray-900 rounded p-3"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<Loading loadingText="Loading ..." /> <Loading loadingText="Loading ..." />
</div> </div>
) )
@@ -164,12 +164,12 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
}) })
return ( return (
<div className="bg-white dark:bg-gray-900 dark:text-gray-100 shadow rounded"> <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded shadow">
<div className="p-3 grid grid-cols-12 items-center space-x-2 border-b border-gray-200 dark:border-gray-700"> <div className="dark:border-gray-700 grid items-center grid-cols-12 p-3 space-x-2 border-b border-gray-200">
<div className="col-span-12 md:col-span-7 font-bold">Name</div> <div className="md:col-span-7 col-span-12 font-bold">Name</div>
<div className="hidden md:block font-bold col-span-3">Last Modified</div> <div className="md:block hidden col-span-3 font-bold">Last Modified</div>
<div className="hidden md:block font-bold">Size</div> <div className="md:block hidden font-bold">Size</div>
<div className="hidden md:block font-bold">Actions</div> <div className="md:block hidden font-bold">Actions</div>
</div> </div>
<Toaster <Toaster
@@ -219,7 +219,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
)} )}
{children.map((c: any) => ( {children.map((c: any) => (
<div className="grid grid-cols-12 hover:bg-gray-100 dark:hover:bg-gray-850" key={c.id}> <div className="hover:bg-gray-100 dark:hover:bg-gray-850 grid grid-cols-12" key={c.id}>
<div <div
className="col-span-11" className="col-span-11"
onClick={e => { onClick={e => {
@@ -236,10 +236,10 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
<FileListItem fileContent={c} /> <FileListItem fileContent={c} />
</div> </div>
{c.folder ? ( {c.folder ? (
<div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400"> <div className="md:flex dark:text-gray-400 hidden p-1 text-gray-700">
<span <span
title="Copy folder permalink" title="Copy folder permalink"
className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600" className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
onClick={() => { onClick={() => {
clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`) clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
toast.success('Copied folder permalink.') toast.success('Copied folder permalink.')
@@ -249,10 +249,10 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
</span> </span>
</div> </div>
) : ( ) : (
<div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400"> <div className="md:flex dark:text-gray-400 hidden p-1 text-gray-700">
<span <span
title="Copy raw file permalink" title="Copy raw file permalink"
className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600" className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
onClick={() => { onClick={() => {
clipboard.copy(`${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${c.name}&raw=true`) clipboard.copy(`${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${c.name}&raw=true`)
toast.success('Copied raw file permalink.') toast.success('Copied raw file permalink.')
@@ -262,7 +262,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
</span> </span>
<a <a
title="Download file" title="Download file"
className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600" className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
href={c['@microsoft.graph.downloadUrl']} href={c['@microsoft.graph.downloadUrl']}
> >
<FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} /> <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
@@ -273,7 +273,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
))} ))}
{renderReadme && ( {renderReadme && (
<div className="border-t dark:border-gray-700"> <div className="dark:border-gray-700 border-t">
<MarkdownPreview file={readmeFile} path={path} standalone={false} /> <MarkdownPreview file={readmeFile} path={path} standalone={false} />
</div> </div>
)} )}
@@ -290,7 +290,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
switch (extensions[fileExtension]) { switch (extensions[fileExtension]) {
case preview.image: case preview.image:
return ( return (
<div className="shadow bg-white rounded p-3 w-full"> <div className="w-full p-3 bg-white rounded shadow">
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img className="mx-auto" src={downloadUrl} alt={fileName} /> <img className="mx-auto" src={downloadUrl} alt={fileName} />
</div> </div>
@@ -318,13 +318,13 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
return <OfficePreview file={resp} /> return <OfficePreview file={resp} />
default: default:
return <div className="bg-white dark:bg-gray-900 shadow rounded">{fileName}</div> return <div className="dark:bg-gray-900 bg-white rounded shadow">{fileName}</div>
} }
} }
return ( return (
<> <>
<div className="shadow bg-white dark:bg-gray-900 rounded p-3"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<FourOhFour <FourOhFour
errorMsg={`Preview for file ${resp.name} is not available, download directly with the button below.`} errorMsg={`Preview for file ${resp.name} is not available, download directly with the button below.`}
/> />
@@ -337,7 +337,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
} }
return ( return (
<div className="shadow bg-white dark:bg-gray-900 rounded p-3"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<FourOhFour errorMsg={`Cannot preview ${resp.name}.`} /> <FourOhFour errorMsg={`Cannot preview ${resp.name}.`} />
</div> </div>
) )
components/FourOhFour.tsx
+4 -4
View File
@@ -3,13 +3,13 @@ import { FunctionComponent } from 'react'
const FourOhFour: FunctionComponent<{ errorMsg: string }> = ({ errorMsg }) => { const FourOhFour: FunctionComponent<{ errorMsg: string }> = ({ errorMsg }) => {
return ( return (
<div className="text-center my-20"> <div className="my-20 text-center">
<div className="mx-auto w-1/2 md:w-1/3"> <div className="md:w-1/3 w-1/2 mx-auto">
<Image src={'/images/empty.png'} alt="404" width={912} height={912} /> <Image src={'/images/empty.png'} alt="404" width={912} height={912} />
</div> </div>
<div className="text-gray-500 mt-5"> <div className="mt-5 text-gray-500">
Error: {errorMsg}.{' '} Error: {errorMsg}.{' '}
<kbd className="border bg-gray-200 font-mono text-sm px-2 py-1 rounded border-opacity-20">F12</kbd> for more <kbd className="border-opacity-20 px-2 py-1 font-mono text-sm bg-gray-200 border rounded">F12</kbd> for more
details. details.
</div> </div>
</div> </div>
components/Loading.tsx
+2 -2
View File
@@ -2,9 +2,9 @@ import { FunctionComponent } from 'react'
const Loading: FunctionComponent<{ loadingText: string }> = ({ loadingText }) => { const Loading: FunctionComponent<{ loadingText: string }> = ({ loadingText }) => {
return ( return (
<div className="flex items-center justify-center rounded py-32 space-x-1 dark:text-white"> <div className="dark:text-white flex items-center justify-center py-32 space-x-1 rounded">
<svg <svg
className="animate-spin -ml-1 mr-3 h-5 w-5" className="animate-spin w-5 h-5 mr-3 -ml-1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
components/Navbar.tsx
+13 -13
View File
@@ -42,13 +42,13 @@ const Navbar = () => {
return ( return (
<div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]"> <div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
<div className="max-w-4xl w-full mx-auto flex items-center justify-between"> <div className="flex items-center justify-between w-full max-w-4xl mx-auto">
<Toaster /> <Toaster />
<Link href="/"> <Link href="/">
<a className="flex items-center space-x-2 font-bold text-xl p-2 dark:text-white hover:opacity-80"> <a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2 text-xl font-bold">
<Image src={siteConfig.icon} alt="icon" width="32" height="32" /> <Image src={siteConfig.icon} alt="icon" width="32" height="32" />
<span className="hidden sm:block">{siteConfig.title}</span> <span className="sm:block hidden">{siteConfig.title}</span>
</a> </a>
</Link> </Link>
@@ -59,7 +59,7 @@ const Navbar = () => {
href={c.link} href={c.link}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="p-2 rounded hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700" className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 p-2 rounded"
> >
{c.platform === 'email' ? ( {c.platform === 'email' ? (
<FontAwesomeIcon icon={['far', 'envelope']} size="lg" /> <FontAwesomeIcon icon={['far', 'envelope']} size="lg" />
@@ -71,7 +71,7 @@ const Navbar = () => {
{tokenPresent && ( {tokenPresent && (
<button <button
className="flex space-x-2 items-center p-2 rounded hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700" className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 flex items-center p-2 space-x-2 rounded"
onClick={() => setIsOpen(true)} onClick={() => setIsOpen(true)}
> >
<span>Logout</span> <span>Logout</span>
@@ -93,7 +93,7 @@ const Navbar = () => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Dialog.Overlay className="fixed inset-0 bg-gray-50 dark:bg-gray-800" /> <Dialog.Overlay className="bg-gray-50 dark:bg-gray-800 fixed inset-0" />
</Transition.Child> </Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */} {/* This element is to trick the browser into centering the modal contents. */}
@@ -109,8 +109,8 @@ const Navbar = () => {
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-900 shadow-lg rounded"> <div className="dark:bg-gray-900 inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white rounded shadow-lg">
<Dialog.Title className="text-lg font-bold text-gray-900 dark:text-gray-100"> <Dialog.Title className="dark:text-gray-100 text-lg font-bold text-gray-900">
Clear all tokens? Clear all tokens?
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <div className="mt-2">
@@ -120,24 +120,24 @@ const Navbar = () => {
</p> </p>
</div> </div>
<div className="mt-4 font-mono text-sm dark:text-gray-100 max-h-32 overflow-y-scroll"> <div className="dark:text-gray-100 max-h-32 mt-4 overflow-y-scroll font-mono text-sm">
{siteConfig.protectedRoutes.map((r, i) => ( {siteConfig.protectedRoutes.map((r, i) => (
<div key={i} className="flex space-x-1 items-center"> <div key={i} className="flex items-center space-x-1">
<FontAwesomeIcon icon="key" /> <FontAwesomeIcon icon="key" />
<span className="truncate">{r}</span> <span className="truncate">{r}</span>
</div> </div>
))} ))}
</div> </div>
<div className="mt-8 flex justify-end items-center"> <div className="flex items-center justify-end mt-8">
<button <button
className="inline-flex space-x-2 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mr-3" className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 inline-flex items-center justify-center px-4 py-2 mr-3 space-x-2 text-white bg-blue-500 rounded"
onClick={() => setIsOpen(false)} onClick={() => setIsOpen(false)}
> >
Cancel Cancel
</button> </button>
<button <button
className="inline-flex space-x-2 items-center justify-center bg-red-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-red-300 hover:bg-red-600" className="focus:outline-none focus:ring focus:ring-red-300 hover:bg-red-600 inline-flex items-center justify-center px-4 py-2 space-x-2 text-white bg-red-500 rounded"
onClick={() => clearTokens()} onClick={() => clearTokens()}
> >
<FontAwesomeIcon icon={['far', 'trash-alt']} /> <FontAwesomeIcon icon={['far', 'trash-alt']} />
components/previews/AudioPreview.tsx
+5 -5
View File
@@ -16,13 +16,13 @@ export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
return ( return (
<> <>
<div className="bg-white dark:bg-gray-900 dark:text-white rounded shadow p-3 w-full"> <div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded shadow">
<div className="flex flex-col space-y-4 md:flex-row md:space-x-4"> <div className="md:flex-row md:space-x-4 flex flex-col space-y-4">
<div className="flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded w-full h-72 md:w-40 md:h-36 transition-all duration-75"> <div className="dark:bg-gray-700 h-72 md:w-40 md:h-36 flex items-center justify-center w-full transition-all duration-75 bg-gray-100 rounded">
{playerStatus === PlayerState.Loading ? ( {playerStatus === PlayerState.Loading ? (
<div> <div>
<svg <svg
className="animate-spin h-5 w-5" className="animate-spin w-5 h-5"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -45,7 +45,7 @@ export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</div> </div>
<div className="flex flex-col w-full space-y-2"> <div className="flex flex-col w-full space-y-2">
<div>{file.name}</div> <div>{file.name}</div>
<div className="text-gray-500 text-sm pb-4"> <div className="pb-4 text-sm text-gray-500">
Last modified:{' '} Last modified:{' '}
{new Date(file.lastModifiedDateTime).toLocaleString(undefined, { {new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
dateStyle: 'short', dateStyle: 'short',
components/previews/CodePreview.tsx
+3 -3
View File
@@ -18,14 +18,14 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
if (error) { if (error) {
return ( return (
<div className="shadow bg-white dark:bg-gray-900 rounded p-3"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<FourOhFour errorMsg={error.message} /> <FourOhFour errorMsg={error.message} />
</div> </div>
) )
} }
if (!data) { if (!data) {
return ( return (
<div className="shadow bg-white dark:bg-gray-900 rounded p-3"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<Loading loadingText="Loading file content..." /> <Loading loadingText="Loading file content..." />
</div> </div>
) )
@@ -33,7 +33,7 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
return ( return (
<> <>
<div className="markdown-body shadow bg-gray-900 rounded p-3"> <div className="markdown-body p-3 bg-gray-900 rounded shadow">
<pre className={`language-${getExtension(file.name)}`}> <pre className={`language-${getExtension(file.name)}`}>
<code>{data}</code> <code>{data}</code>
</pre> </pre>
components/previews/MarkdownPreview.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
// The parent folder of the markdown file, which is also the relative image folder // The parent folder of the markdown file, which is also the relative image folder
const parentPath = path.substring(0, path.lastIndexOf('/')) const parentPath = path.substring(0, path.lastIndexOf('/'))
// Check if the image is relative path instead of a absolute url // Check if the image is relative path instead of a absolute url
const isUrlAbsolute = url => url.indexOf('://') > 0 || url.indexOf('//') === 0 const isUrlAbsolute = (url: string | string[]) => url.indexOf('://') > 0 || url.indexOf('//') === 0
// Custom renderer to render images with relative path // Custom renderer to render images with relative path
const relativeImagePathRenderer = { const relativeImagePathRenderer = {
img: ({ img: ({
components/previews/OfficePreview.tsx
+2 -6
View File
@@ -13,12 +13,8 @@ const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
return ( return (
<> <>
<div className="shadow overflow-scroll" ref={docContainer} style={{ maxHeight: '90vh' }}> <div className="overflow-scroll shadow" ref={docContainer} style={{ maxHeight: '90vh' }}>
<Preview <Preview url={file['@microsoft.graph.downloadUrl']} width={docContainerWidth.toString()} height="800" />
url={file['@microsoft.graph.downloadUrl']}
width={docContainerWidth.toString()}
height="800"
/>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} /> <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
components/previews/PDFPreview.tsx
+7 -7
View File
@@ -26,12 +26,12 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
return ( return (
<> <>
<div <div
className="flex flex-col bg-white dark:bg-gray-900 rounded shadow md:p-3 w-full overflow-scroll no-scrollbar" className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded shadow"
style={{ maxHeight: '90vh' }} style={{ maxHeight: '90vh' }}
> >
<div className="w-full flex-1 overflow-scroll no-scrollbar" ref={pdfContainter} style={{ maxHeight: '80vh' }}> <div className="no-scrollbar flex-1 w-full overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
<Document <Document
className="bg-gray-100 dark:bg-gray-800" className="dark:bg-gray-800 bg-gray-100"
file={file['@microsoft.graph.downloadUrl']} file={file['@microsoft.graph.downloadUrl']}
onLoadSuccess={onDocumentLoadSuccess} onLoadSuccess={onDocumentLoadSuccess}
loading={<Loading loadingText={loadingText} />} loading={<Loading loadingText={loadingText} />}
@@ -46,9 +46,9 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</Document> </Document>
</div> </div>
<div className="flex flex-wrap space-x-2 my-4 md:mb-0 w-full items-center justify-center dark:text-white"> <div className="md:mb-0 dark:text-white flex flex-wrap items-center justify-center w-full my-4 space-x-2">
<button <button
className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50" className="focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 disabled:opacity-50 px-4 py-2 text-white transition-all duration-75 bg-red-500 rounded cursor-pointer"
onClick={() => { onClick={() => {
pageNumber > 1 && setPageNumber(pageNumber - 1) pageNumber > 1 && setPageNumber(pageNumber - 1)
}} }}
@@ -60,7 +60,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
Page{' '} Page{' '}
<input <input
value={pageNumber} value={pageNumber}
className="w-10 mr-1 text-center p-1 bg-red-50 dark:bg-gray-600 rounded focus:ring focus:ring-red-300 dark:focus:ring-red-700 focus:outline-none" className="bg-red-50 dark:bg-gray-600 focus:ring focus:ring-red-300 dark:focus:ring-red-700 focus:outline-none w-10 p-1 mr-1 text-center rounded"
style={{ style={{
maxWidth: 50, maxWidth: 50,
}} }}
@@ -74,7 +74,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
/<span className="ml-1 text-center">{totalPages}</span> /<span className="ml-1 text-center">{totalPages}</span>
</div> </div>
<button <button
className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50" className="focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 disabled:opacity-50 px-4 py-2 text-white transition-all duration-75 bg-red-500 rounded cursor-pointer"
onClick={() => { onClick={() => {
pageNumber < totalPages && setPageNumber(pageNumber + 1) pageNumber < totalPages && setPageNumber(pageNumber + 1)
}} }}
components/previews/TextPreview.tsx
+4 -4
View File
@@ -9,14 +9,14 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl']) const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
if (error) { if (error) {
return ( return (
<div className="shadow bg-white dark:bg-gray-900 rounded p-3"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<FourOhFour errorMsg={error.message} /> <FourOhFour errorMsg={error.message} />
</div> </div>
) )
} }
if (!data) { if (!data) {
return ( return (
<div className="shadow bg-white dark:bg-gray-900 rounded p-3"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<Loading loadingText="Loading file content..." /> <Loading loadingText="Loading file content..." />
</div> </div>
) )
@@ -24,8 +24,8 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
return ( return (
<> <>
<div className="shadow bg-white dark:bg-gray-900 dark:text-gray-100 rounded p-3"> <div className="dark:bg-gray-900 dark:text-gray-100 p-3 bg-white rounded shadow">
<pre className="p-0 md:p-3 overflow-scroll">{data}</pre> <pre className="md:p-3 p-0 overflow-scroll">{data}</pre>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} /> <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
components/previews/VideoPreview.tsx
+7 -7
View File
@@ -14,7 +14,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
return ( return (
<> <>
<div className="bg-white dark:bg-gray-900 rounded shadow p-3"> <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
<div className="relative" style={{ paddingTop: '56.25%' }}> <div className="relative" style={{ paddingTop: '56.25%' }}>
<ReactPlayer <ReactPlayer
className="absolute top-0 left-0 w-full h-full" className="absolute top-0 left-0 w-full h-full"
@@ -27,7 +27,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</div> </div>
</div> </div>
<div className="flex flex-wrap space-x-2 justify-center mt-4"> <div className="flex flex-wrap justify-center mt-4 space-x-2">
<Toaster <Toaster
toastOptions={{ toastOptions={{
style: { style: {
@@ -37,7 +37,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
}} }}
/> />
<a <a
className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2" className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
href={file['@microsoft.graph.downloadUrl']} href={file['@microsoft.graph.downloadUrl']}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -47,7 +47,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</a> </a>
<button <button
className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2" className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
onClick={() => { onClick={() => {
clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`) clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
toast.success('Copied direct link to clipboard.') toast.success('Copied direct link to clipboard.')
@@ -58,7 +58,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</button> </button>
<a <a
className="flex space-x-2 items-center justify-center bg-gray-700 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-gray-600 mb-2" className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-gray-600 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-gray-700 rounded"
href={`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`} href={`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -67,7 +67,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
<span>IINA</span> <span>IINA</span>
</a> </a>
<a <a
className="flex space-x-2 items-center justify-center bg-yellow-600 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-500 mb-2" className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-500 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-600 rounded"
href={`vlc://${file['@microsoft.graph.downloadUrl']}`} href={`vlc://${file['@microsoft.graph.downloadUrl']}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -76,7 +76,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
<span>VLC</span> <span>VLC</span>
</a> </a>
<a <a
className="flex space-x-2 items-center justify-center bg-yellow-400 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-300 mb-2" className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-300 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-400 rounded"
href={`potplayer://${file['@microsoft.graph.downloadUrl']}`} href={`potplayer://${file['@microsoft.graph.downloadUrl']}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
pages/[...path].tsx
+3 -3
View File
@@ -11,14 +11,14 @@ export default function Folders() {
const { query } = useRouter() const { query } = useRouter()
return ( return (
<div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900"> <div className="dark:bg-gray-900 flex flex-col items-center justify-center min-h-screen bg-white">
<Head> <Head>
<title>{siteConfig.title}</title> <title>{siteConfig.title}</title>
</Head> </Head>
<main className="flex flex-col w-full flex-1 bg-gray-50 dark:bg-gray-800"> <main className="bg-gray-50 dark:bg-gray-800 flex flex-col flex-1 w-full">
<Navbar /> <Navbar />
<div className="mx-auto w-full max-w-4xl p-4"> <div className="w-full max-w-4xl p-4 mx-auto">
<Breadcrumb query={query} /> <Breadcrumb query={query} />
<FileListing query={query} /> <FileListing query={query} />
</div> </div>
pages/index.tsx
+3 -3
View File
@@ -8,14 +8,14 @@ import Breadcrumb from '../components/Breadcrumb'
export default function Home() { export default function Home() {
return ( return (
<div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900"> <div className="dark:bg-gray-900 flex flex-col items-center justify-center min-h-screen bg-white">
<Head> <Head>
<title>{siteConfig.title}</title> <title>{siteConfig.title}</title>
</Head> </Head>
<main className="flex flex-col w-full flex-1 bg-gray-50 dark:bg-gray-800"> <main className="bg-gray-50 dark:bg-gray-800 flex flex-col flex-1 w-full">
<Navbar /> <Navbar />
<div className="mx-auto w-full max-w-4xl p-4"> <div className="w-full max-w-4xl p-4 mx-auto">
<Breadcrumb /> <Breadcrumb />
<FileListing /> <FileListing />
</div> </div>
utils/getPreviewType.ts
+1 -1
View File
@@ -51,7 +51,7 @@ const extensions = {
webm: preview.video, webm: preview.video,
m3u8: preview.video, m3u8: preview.video,
mkv: preview.video, mkv: preview.video,
avi: preview.video, // won't work! avi: preview.video, // won't work!
mp3: preview.audio, mp3: preview.audio,
m4a: preview.audio, m4a: preview.audio,