change unknown file preview to readable format

components/FileListing.tsx

@@ -10,6 +10,7 @@ import { ImageDecorator } from 'react-viewer/lib/ViewerProps'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 
+import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
 import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
 import { extensions, preview } from '../utils/getPreviewType'
 import { useProtectedSWRInfinite } from '../utils/fetchWithSWR'
@@ -30,30 +31,15 @@ import CodePreview from './previews/CodePreview'
 import OfficePreview from './previews/OfficePreview'
 import AudioPreview from './previews/AudioPreview'
 import VideoPreview from './previews/VideoPreview'
-import DownloadButtonGroup from './DownloadBtnGtoup'
 import PDFPreview from './previews/PDFPreview'
 import URLPreview from './previews/URLPreview'
-import { DownloadBtnContainer, PreviewContainer } from './previews/Containers'
+import DefaultPreview from './previews/DefaultPreview'
+import { PreviewContainer } from './previews/Containers'
 
 // 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 })
 
-/**
- * Convert raw bits file/folder size into a human readable string
- *
- * @param size File or folder size, in raw bits
- * @returns Human readable form of the file or folder size
- */
-const humanFileSize = (size: number) => {
-  if (size < 1024) return size + ' B'
-  const i = Math.floor(Math.log(size) / Math.log(1024))
-  const num = size / Math.pow(1024, i)
-  const round = Math.round(num)
-  const formatted = round < 10 ? num.toFixed(2) : round < 100 ? num.toFixed(1) : round
-  return `${formatted} ${'KMGTPEZY'[i - 1]}B`
-}
-
 /**
  * Convert url query into path string
  *
@@ -92,14 +78,7 @@ const FileListItem: FC<{
         </div>
       </div>
       <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', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: false,
-        })}
+        {formatModifiedDateTime(c.lastModifiedDateTime)}
       </div>
       <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)}
@@ -600,22 +579,11 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
           return <URLPreview file={file} />
 
         default:
-          return <PreviewContainer>{fileName}</PreviewContainer>
+          return <DefaultPreview file={file} />
       }
+    } else {
+      return <DefaultPreview file={file} />
     }
-
-    return (
-      <>
-        <PreviewContainer>
-          <FourOhFour
-            errorMsg={`Preview for file ${fileName} is not available, download directly with the button below.`}
-          />
-        </PreviewContainer>
-        <DownloadBtnContainer>
-          <DownloadButtonGroup downloadUrl={downloadUrl} />
-        </DownloadBtnContainer>
-      </>
-    )
   }
 
   return (

components/previews/DefaultPreview.tsx

@@ -0,0 +1,79 @@
+import { OdFileObject } from '../../types'
+import { FC } from 'react'
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import { getFileIcon } from '../../utils/getFileIcon'
+import { formatModifiedDateTime, humanFileSize } from '../../utils/fileDetails'
+
+import DownloadButtonGroup from '../DownloadBtnGtoup'
+import { DownloadBtnContainer, PreviewContainer } from './Containers'
+
+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">
+            <FontAwesomeIcon icon={getFileIcon(file.name)} />
+            <div className="font-medium text-sm mt-6">{file.name}</div>
+          </div>
+
+          <div className="md:flex-1 flex flex-col py-4 space-y-2">
+            <div>
+              <div className="font-medium text-xs opacity-80 uppercase py-2">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>{humanFileSize(file.size)}</div>
+            </div>
+
+            <div>
+              <div className="font-medium text-xs opacity-80 uppercase py-2">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">
+                <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">
+                      Quick XOR
+                    </td>
+                    <td className="py-1 px-3 text-gray-500 whitespace-nowrap dark:text-gray-400 font-mono">
+                      {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">
+                      SHA1
+                    </td>
+                    <td className="py-1 px-3 text-gray-500 whitespace-nowrap dark:text-gray-400 font-mono">
+                      {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">
+                      SHA256
+                    </td>
+                    <td className="py-1 px-3 text-gray-500 whitespace-nowrap dark:text-gray-400 font-mono">
+                      {file.file.hashes.sha256Hash}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </PreviewContainer>
+      <DownloadBtnContainer>
+        <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
+      </DownloadBtnContainer>
+    </div>
+  )
+}
+
+export default DefaultPreview