From 172d0a97ebb8b80735d19f812c58e5d31022b167 Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Wed, 29 Dec 2021 15:52:18 +0800
Subject: [PATCH] sticky download button so long previews doesn't push buttons
 down, closes #205

---
 components/previews/AudioPreview.tsx    |  3 ++-
 components/previews/CodePreview.tsx     |  6 +++---
 components/previews/EPUBPreview.tsx     |  6 +++---
 components/previews/MarkdownPreview.tsx |  6 +++---
 components/previews/OfficePreview.tsx   | 12 ++++++++----
 components/previews/PDFPreview.tsx      |  8 ++++----
 components/previews/TextPreview.tsx     |  6 +++---
 components/previews/VideoPreview.tsx    |  2 --
 8 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/components/previews/AudioPreview.tsx b/components/previews/AudioPreview.tsx
index 07657bb..cefef1e 100644
--- a/components/previews/AudioPreview.tsx
+++ b/components/previews/AudioPreview.tsx
@@ -73,7 +73,8 @@ const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           </div>
         </div>
       </div>
-      <div className="mt-4">
+
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
     </>
diff --git a/components/previews/CodePreview.tsx b/components/previews/CodePreview.tsx
index a19605f..adb8666 100644
--- a/components/previews/CodePreview.tsx
+++ b/components/previews/CodePreview.tsx
@@ -32,16 +32,16 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
   }
 
   return (
-    <>
+    <div>
       <div className="markdown-body p-3 bg-gray-900 rounded">
         <pre className={`language-${getExtension(file.name)}`}>
           <code>{data}</code>
         </pre>
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/components/previews/EPUBPreview.tsx b/components/previews/EPUBPreview.tsx
index f7ae28c..f250bd6 100644
--- a/components/previews/EPUBPreview.tsx
+++ b/components/previews/EPUBPreview.tsx
@@ -32,7 +32,7 @@ const EPUBPreview: FunctionComponent<{file: any}> = ({ file }) => {
   }
 
   return (
-    <>
+    <div>
       <div
         className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded"
         style={{ maxHeight: '90vh' }}
@@ -51,10 +51,10 @@ const EPUBPreview: FunctionComponent<{file: any}> = ({ file }) => {
           </div>
         </div>
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/components/previews/MarkdownPreview.tsx b/components/previews/MarkdownPreview.tsx
index e513478..8149fbc 100644
--- a/components/previews/MarkdownPreview.tsx
+++ b/components/previews/MarkdownPreview.tsx
@@ -81,7 +81,7 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
   }
 
   return (
-    <>
+    <div>
       <div
         className={
           standalone
@@ -99,11 +99,11 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
         </ReactMarkdown>
       </div>
       {standalone && (
-        <div className="mt-4">
+        <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
           <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
         </div>
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/components/previews/OfficePreview.tsx b/components/previews/OfficePreview.tsx
index 607d17a..c049e80 100644
--- a/components/previews/OfficePreview.tsx
+++ b/components/previews/OfficePreview.tsx
@@ -12,14 +12,18 @@ const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
   }, [])
 
   return (
-    <>
+    <div>
       <div className="overflow-scroll" ref={docContainer} style={{ maxHeight: '90vh' }}>
-        <Preview url={encodeURIComponent(file['@microsoft.graph.downloadUrl'])} width={docContainerWidth.toString()} height="800" />
+        <Preview
+          url={encodeURIComponent(file['@microsoft.graph.downloadUrl'])}
+          width={docContainerWidth.toString()}
+          height="600"
+        />
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/components/previews/PDFPreview.tsx b/components/previews/PDFPreview.tsx
index bd0ce73..7a17fb7 100644
--- a/components/previews/PDFPreview.tsx
+++ b/components/previews/PDFPreview.tsx
@@ -9,14 +9,14 @@ const PDFEmbedPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   )}`
 
   return (
-    <>
-      <div className="w-full rounded overflow-hidden" style={{ height: '80vh' }}>
+    <div>
+      <div className="w-full rounded overflow-hidden" style={{ height: '90vh' }}>
         <iframe src={url} frameBorder="0" width="100%" height="100%"></iframe>
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/components/previews/TextPreview.tsx b/components/previews/TextPreview.tsx
index 95022ce..c822f91 100644
--- a/components/previews/TextPreview.tsx
+++ b/components/previews/TextPreview.tsx
@@ -23,14 +23,14 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   }
 
   return (
-    <>
+    <div>
       <div className="dark:bg-gray-900 dark:text-gray-100 p-3 bg-white rounded">
         <pre className="md:p-3 p-0 overflow-scroll">{data}</pre>
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx
index c739e96..e3840f2 100644
--- a/components/previews/VideoPreview.tsx
+++ b/components/previews/VideoPreview.tsx
@@ -1,9 +1,7 @@
 import { FunctionComponent } from 'react'
 import ReactPlayer from 'react-player'
-import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useClipboard } from 'use-clipboard-copy'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 
 import { getBaseUrl } from '../../utils/getBaseUrl'