add error page, download button
This commit is contained in:
parent
476c522e1f
commit
19b8212e1d
9 changed files with 180 additions and 72 deletions
20
components/DownloadBtn.tsx
Normal file
20
components/DownloadBtn.tsx
Normal file
|
@ -0,0 +1,20 @@
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { FunctionComponent } from 'react'
|
||||
|
||||
const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }) => {
|
||||
return (
|
||||
<div>
|
||||
<a
|
||||
className="mx-auto 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"
|
||||
href={downloadUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<FontAwesomeIcon icon="file-download" />
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DownloadBtn
|
|
@ -15,6 +15,8 @@ import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
|
|||
import { extensions, preview } from '../utils/getPreviewType'
|
||||
import { VideoPreview } from './previews/VideoPreview'
|
||||
import { AudioPreview } from './previews/AudioPreview'
|
||||
import FourOhFour from './FourOhFour'
|
||||
import TextPreview from './previews/TextPreview'
|
||||
|
||||
// Disabling SSR for some previews (image gallery view, and PDF view)
|
||||
const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
|
||||
|
@ -86,10 +88,15 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
|
||||
const { data, error } = useSWR(`/api?path=${path}`, fetcher, {
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
})
|
||||
|
||||
if (error) return <div>Failed to load</div>
|
||||
if (error) {
|
||||
return (
|
||||
<div className="shadow bg-white rounded p-3">
|
||||
<FourOhFour errorMsg={error.message} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="shadow bg-white rounded p-3">
|
||||
|
@ -187,7 +194,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
)
|
||||
|
||||
case preview.text:
|
||||
return <div>text</div>
|
||||
return <TextPreview file={resp} />
|
||||
|
||||
case preview.code:
|
||||
return <div>code</div>
|
||||
|
@ -210,7 +217,11 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
}
|
||||
}
|
||||
|
||||
return <div>404</div>
|
||||
return (
|
||||
<div className="shadow bg-white rounded p-3">
|
||||
<FourOhFour errorMsg={`Cannot preview ${resp.name}.`} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileListing
|
||||
|
|
15
components/FourOhFour.tsx
Normal file
15
components/FourOhFour.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import Image from 'next/image'
|
||||
import { FunctionComponent } from 'react'
|
||||
|
||||
const FourOhFour: FunctionComponent<{ errorMsg: string }> = ({ errorMsg }) => {
|
||||
return (
|
||||
<div className="text-center my-20">
|
||||
<div className="mx-auto w-1/2 md:w-1/3">
|
||||
<Image src={'/404.png'} alt="404" width={825} height={910} />
|
||||
</div>
|
||||
<div className="text-gray-500 mt-5">Error: {errorMsg}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FourOhFour
|
|
@ -2,6 +2,8 @@ import { FunctionComponent, useState } from 'react'
|
|||
import ReactPlayer from 'react-player'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
|
||||
import DownloadBtn from '../DownloadBtn'
|
||||
|
||||
enum PlayerState {
|
||||
Loading,
|
||||
Ready,
|
||||
|
@ -13,57 +15,67 @@ export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
|||
const [playerStatus, setPlayerStatus] = useState(PlayerState.Loading)
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded shadow p-3 w-full">
|
||||
<div className="flex flex-col space-y-4 md:flex-row md:space-x-4">
|
||||
<div className="flex items-center justify-center bg-gray-100 rounded w-full h-72 md:w-40 md:h-36 transition-all duration-75">
|
||||
{playerStatus === PlayerState.Loading ? (
|
||||
<div>
|
||||
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<FontAwesomeIcon
|
||||
className={`h-5 w-5 ${playerStatus === PlayerState.Playing ? 'animate-spin' : ''}`}
|
||||
icon="music"
|
||||
size="2x"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col w-full space-y-2">
|
||||
<div>{file.name}</div>
|
||||
<div className="text-gray-500 text-sm pb-4">
|
||||
Last modified:{' '}
|
||||
{new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'short',
|
||||
})}
|
||||
<>
|
||||
<div className="bg-white rounded shadow p-3 w-full">
|
||||
<div className="flex flex-col space-y-4 md:flex-row md:space-x-4">
|
||||
<div className="flex items-center justify-center bg-gray-100 rounded w-full h-72 md:w-40 md:h-36 transition-all duration-75">
|
||||
{playerStatus === PlayerState.Loading ? (
|
||||
<div>
|
||||
<svg
|
||||
className="animate-spin h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<FontAwesomeIcon
|
||||
className={`h-5 w-5 ${playerStatus === PlayerState.Playing ? 'animate-spin' : ''}`}
|
||||
icon="music"
|
||||
size="2x"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col w-full space-y-2">
|
||||
<div>{file.name}</div>
|
||||
<div className="text-gray-500 text-sm pb-4">
|
||||
Last modified:{' '}
|
||||
{new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'short',
|
||||
})}
|
||||
</div>
|
||||
<ReactPlayer
|
||||
url={file['@microsoft.graph.downloadUrl']}
|
||||
controls
|
||||
width="100%"
|
||||
height="48px"
|
||||
config={{ file: { forceAudio: true } }}
|
||||
onReady={() => {
|
||||
setPlayerStatus(PlayerState.Ready)
|
||||
}}
|
||||
onPlay={() => {
|
||||
setPlayerStatus(PlayerState.Playing)
|
||||
}}
|
||||
onPause={() => {
|
||||
setPlayerStatus(PlayerState.Paused)
|
||||
}}
|
||||
onError={() => setPlayerStatus(PlayerState.Paused)}
|
||||
onEnded={() => setPlayerStatus(PlayerState.Paused)}
|
||||
/>
|
||||
</div>
|
||||
<ReactPlayer
|
||||
url={file['@microsoft.graph.downloadUrl']}
|
||||
controls
|
||||
width="100%"
|
||||
height="48px"
|
||||
config={{ file: { forceAudio: true } }}
|
||||
onReady={() => {
|
||||
setPlayerStatus(PlayerState.Ready)
|
||||
}}
|
||||
onPlay={() => {
|
||||
setPlayerStatus(PlayerState.Playing)
|
||||
}}
|
||||
onPause={() => {
|
||||
setPlayerStatus(PlayerState.Paused)
|
||||
}}
|
||||
onError={() => setPlayerStatus(PlayerState.Paused)}
|
||||
onEnded={() => setPlayerStatus(PlayerState.Paused)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -3,6 +3,7 @@ import { Document, Page, pdfjs } from 'react-pdf'
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
|
||||
import Loading from '../Loading'
|
||||
import DownloadBtn from '../DownloadBtn'
|
||||
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`
|
||||
|
||||
|
@ -17,7 +18,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
|||
|
||||
return (
|
||||
<div className="bg-white rounded shadow md:p-3 w-full overflow-scroll" style={{ maxHeight: '90vh' }}>
|
||||
<div className="w-full mx-auto border-2 md:shadow overflow-scroll" style={{ maxHeight: '60vh' }}>
|
||||
<div className="w-full mx-auto overflow-scroll" style={{ maxHeight: '60vh' }}>
|
||||
<Document
|
||||
file={file['@microsoft.graph.downloadUrl']}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
|
@ -29,9 +30,9 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
|||
<Page pageNumber={pageNumber} />
|
||||
</Document>
|
||||
</div>
|
||||
<div className="flex space-x-2 my-4 md:mb-0 w-full items-center justify-center">
|
||||
<div className="flex flex-wrap space-x-2 my-4 md:mb-0 w-full items-center justify-center">
|
||||
<button
|
||||
className="px-3 py-1 bg-red-500 text-white rounded cursor-pointer focus:ring-2 focus:ring-red-500 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
|
||||
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"
|
||||
onClick={() => {
|
||||
pageNumber > 1 && setPageNumber(pageNumber - 1)
|
||||
}}
|
||||
|
@ -39,11 +40,11 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
|||
>
|
||||
<FontAwesomeIcon icon="arrow-left" />
|
||||
</button>
|
||||
<div className="px-3 py-1">
|
||||
<div className="px-4 py-2">
|
||||
Page{' '}
|
||||
<input
|
||||
value={pageNumber}
|
||||
className="w-10 mr-1 text-center p-1 bg-red-50 rounded focus:ring-2 focus:ring-red-500 focus:outline-none"
|
||||
className="w-10 mr-1 text-center p-1 bg-red-50 rounded focus:ring focus:ring-red-300 focus:outline-none"
|
||||
onChange={e => {
|
||||
const v = parseInt(e.target.value)
|
||||
if (v <= totalPages && v >= 0) {
|
||||
|
@ -54,7 +55,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
|||
/<span className="ml-1 text-center">{totalPages}</span>
|
||||
</div>
|
||||
<button
|
||||
className="px-3 py-1 bg-red-500 text-white rounded cursor-pointer focus:ring-2 focus:ring-red-500 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
|
||||
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"
|
||||
onClick={() => {
|
||||
pageNumber < totalPages && setPageNumber(pageNumber + 1)
|
||||
}}
|
||||
|
@ -62,6 +63,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
|||
>
|
||||
<FontAwesomeIcon icon="arrow-right" />
|
||||
</button>
|
||||
<DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
40
components/previews/TextPreview.tsx
Normal file
40
components/previews/TextPreview.tsx
Normal file
|
@ -0,0 +1,40 @@
|
|||
import axios from 'axios'
|
||||
import { FunctionComponent } from 'react'
|
||||
import useSWR from 'swr'
|
||||
|
||||
import FourOhFour from '../FourOhFour'
|
||||
import Loading from '../Loading'
|
||||
import DownloadBtn from '../DownloadBtn'
|
||||
|
||||
const fetcher = (url: string) => axios.get(url).then(res => res.data)
|
||||
|
||||
const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
||||
const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
|
||||
if (error) {
|
||||
return (
|
||||
<div className="shadow bg-white rounded p-3">
|
||||
<FourOhFour errorMsg={error.message} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="shadow bg-white rounded p-3">
|
||||
<Loading loadingText="Loading file content..." />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="shadow bg-white rounded p-3">
|
||||
<pre className="p-0 md:p-3 overflow-scroll">{data}</pre>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default TextPreview
|
|
@ -1,19 +1,26 @@
|
|||
import { FunctionComponent } from 'react'
|
||||
import ReactPlayer from 'react-player'
|
||||
|
||||
import DownloadBtn from '../DownloadBtn'
|
||||
|
||||
export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
|
||||
return (
|
||||
<div className="bg-white rounded shadow p-3">
|
||||
<div className="relative" style={{ paddingTop: '56.25%' }}>
|
||||
<ReactPlayer
|
||||
className="absolute top-0 left-0 w-full h-full"
|
||||
url={file['@microsoft.graph.downloadUrl']}
|
||||
controls
|
||||
width="100%"
|
||||
height="100%"
|
||||
config={{ file: { forceVideo: true } }}
|
||||
/>
|
||||
<>
|
||||
<div className="bg-white rounded shadow p-3">
|
||||
<div className="relative" style={{ paddingTop: '56.25%' }}>
|
||||
<ReactPlayer
|
||||
className="absolute top-0 left-0 w-full h-full"
|
||||
url={file['@microsoft.graph.downloadUrl']}
|
||||
controls
|
||||
width="100%"
|
||||
height="100%"
|
||||
config={{ file: { forceVideo: true } }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ import {
|
|||
faFile,
|
||||
faFolder,
|
||||
} from '@fortawesome/free-regular-svg-icons'
|
||||
import { faMusic, faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faMusic, faArrowLeft, faArrowRight, faFileDownload } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
import type { AppProps } from 'next/app'
|
||||
|
@ -36,7 +36,8 @@ library.add(
|
|||
faMarkdown,
|
||||
faMusic,
|
||||
faArrowLeft,
|
||||
faArrowRight
|
||||
faArrowRight,
|
||||
faFileDownload
|
||||
)
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
|
|
BIN
public/404.png
Normal file
BIN
public/404.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 97 KiB |
Loading…
Reference in a new issue