feat: add file preview modal (#945)

2022-03-24 00:13:44 +05:30
parent 8715a8b8f4
commit 12e3bb0959
15 changed files with 445 additions and 135 deletions
--- a/app/assets/javascripts/components/ApplicationView.tsx
+++ b/app/assets/javascripts/components/ApplicationView.tsx
@@ -27,6 +27,7 @@ import { PremiumModalProvider } from './Premium';
 import { ConfirmSignoutContainer } from './ConfirmSignoutModal';
 import { TagsContextMenu } from './Tags/TagContextMenu';
 import { ToastContainer } from '@standardnotes/stylekit';
+import { FilePreviewModalProvider } from './Files/FilePreviewModalProvider';

 type Props = {
  application: WebApplication;
@@ -175,88 +176,78 @@ export class ApplicationView extends PureComponent<Props, State> {
    const renderAppContents = !this.state.needsUnlock && this.state.launched;

    return (
-      <PremiumModalProvider
-        application={this.application}
-        appState={this.appState}
-      >
-        <div className={this.platformString + ' main-ui-view sn-component'}>
-          {renderAppContents && (
-            <div
-              id="app"
-              className={this.state.appClass + ' app app-column-container'}
-            >
-              <Navigation application={this.application} />
-
-              <NotesView
-                application={this.application}
-                appState={this.appState}
-              />
-
-              <NoteGroupView application={this.application} />
-            </div>
-          )}
-
-          {renderAppContents && (
-            <>
-              <Footer
-                application={this.application}
-                applicationGroup={this.props.mainApplicationGroup}
-              />
-
-              <SessionsModal
-                application={this.application}
-                appState={this.appState}
-              />
-
-              <PreferencesViewWrapper
-                appState={this.appState}
-                application={this.application}
-              />
-
-              <RevisionHistoryModalWrapper
-                application={this.application}
-                appState={this.appState}
-              />
-            </>
-          )}
-
-          {this.state.challenges.map((challenge) => {
-            return (
-              <div className="sk-modal">
-                <ChallengeModal
-                  key={challenge.id}
+      <FilePreviewModalProvider application={this.application}>
+        <PremiumModalProvider
+          application={this.application}
+          appState={this.appState}
+        >
+          <div className={this.platformString + ' main-ui-view sn-component'}>
+            {renderAppContents && (
+              <div
+                id="app"
+                className={this.state.appClass + ' app app-column-container'}
+              >
+                <Navigation application={this.application} />
+                <NotesView
                  application={this.application}
-                  challenge={challenge}
-                  onDismiss={this.removeChallenge}
+                  appState={this.appState}
                />
+                <NoteGroupView application={this.application} />
              </div>
-            );
-          })}
-
-          {renderAppContents && (
-            <>
-              <NotesContextMenu
-                application={this.application}
-                appState={this.appState}
-              />
-
-              <TagsContextMenu appState={this.appState} />
-
-              <PurchaseFlowWrapper
-                application={this.application}
-                appState={this.appState}
-              />
-
-              <ConfirmSignoutContainer
-                appState={this.appState}
-                application={this.application}
-              />
-
-              <ToastContainer />
-            </>
-          )}
-        </div>
-      </PremiumModalProvider>
+            )}
+            {renderAppContents && (
+              <>
+                <Footer
+                  application={this.application}
+                  applicationGroup={this.props.mainApplicationGroup}
+                />
+                <SessionsModal
+                  application={this.application}
+                  appState={this.appState}
+                />
+                <PreferencesViewWrapper
+                  appState={this.appState}
+                  application={this.application}
+                />
+                <RevisionHistoryModalWrapper
+                  application={this.application}
+                  appState={this.appState}
+                />
+              </>
+            )}
+            {this.state.challenges.map((challenge) => {
+              return (
+                <div className="sk-modal">
+                  <ChallengeModal
+                    key={challenge.id}
+                    application={this.application}
+                    challenge={challenge}
+                    onDismiss={this.removeChallenge}
+                  />
+                </div>
+              );
+            })}
+            {renderAppContents && (
+              <>
+                <NotesContextMenu
+                  application={this.application}
+                  appState={this.appState}
+                />
+                <TagsContextMenu appState={this.appState} />
+                <PurchaseFlowWrapper
+                  application={this.application}
+                  appState={this.appState}
+                />
+                <ConfirmSignoutContainer
+                  appState={this.appState}
+                  application={this.application}
+                />
+                <ToastContainer />
+              </>
+            )}
+          </div>
+        </PremiumModalProvider>
+      </FilePreviewModalProvider>
    );
  }
 }
--- a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx
+++ b/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx
@@ -10,10 +10,10 @@ import {
 } from './PopoverFileItemAction';
 import { PopoverFileSubmenu } from './PopoverFileSubmenu';

-const getFileIconComponent = (iconType: string) => {
+export const getFileIconComponent = (iconType: string, className: string) => {
  const IconComponent = ICONS[iconType as keyof typeof ICONS];

-  return <IconComponent className="w-8 h-8 flex-shrink-0" />;
+  return <IconComponent className={className} />;
 };

 export type PopoverFileItemProps = {
@@ -69,7 +69,10 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
  return (
    <div className="flex items-center justify-between p-3">
      <div className="flex items-center">
-        {getFileIconComponent(getIconType(file.mimeType))}
+        {getFileIconComponent(
+          getIconType(file.mimeType),
+          'w-8 h-8 flex-shrink-0'
+        )}
        <div className="flex flex-col mx-4">
          {isRenamingFile ? (
            <input
@@ -82,7 +85,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
              onBlur={handleFileNameInputBlur}
            />
          ) : (
-            <div className="text-sm mb-1">{file.name}</div>
+            <div className="text-sm mb-1 break-word">{file.name}</div>
          )}
          <div className="text-xs color-grey-0">
            {file.created_at.toLocaleString()} ·{' '}
--- a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileSubmenu.tsx
+++ b/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileSubmenu.tsx
@@ -19,6 +19,7 @@ import {
 import { Icon } from '../Icon';
 import { Switch } from '../Switch';
 import { useCloseOnBlur } from '../utils';
+import { useFilePreviewModal } from '../Files/FilePreviewModalProvider';
 import { PopoverFileItemProps } from './PopoverFileItem';
 import { PopoverFileItemActionType } from './PopoverFileItemAction';

@@ -32,6 +33,8 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
  handleFileAction,
  setIsRenamingFile,
 }) => {
+  const filePreviewModal = useFilePreviewModal();
+
  const menuContainerRef = useRef<HTMLDivElement>(null);
  const menuButtonRef = useRef<HTMLButtonElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
@@ -99,6 +102,17 @@ export const PopoverFileSubmenu: FunctionComponent<Props> = ({
        >
          {isMenuOpen && (
            <>
+              <button
+                onBlur={closeOnBlur}
+                className="sn-dropdown-item focus:bg-info-backdrop"
+                onClick={() => {
+                  filePreviewModal.activate(file);
+                  closeMenu();
+                }}
+              >
+                <Icon type="file" className="mr-2 color-neutral" />
+                Preview file
+              </button>
              {isAttachedToNote ? (
                <button
                  onBlur={closeOnBlur}
--- a/app/assets/javascripts/components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/components/Files/FilePreviewModal.tsx
@@ -0,0 +1,194 @@
+import { WebApplication } from '@/ui_models/application';
+import { concatenateUint8Arrays } from '@/utils/concatenateUint8Arrays';
+import { DialogContent, DialogOverlay } from '@reach/dialog';
+import { SNFile } from '@standardnotes/snjs';
+import { NoPreviewIllustration } from '@standardnotes/stylekit';
+import { FunctionComponent } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { getFileIconComponent } from '../AttachedFilesPopover/PopoverFileItem';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { isFileTypePreviewable } from './isFilePreviewable';
+
+type Props = {
+  application: WebApplication;
+  file: SNFile;
+  onDismiss: () => void;
+};
+
+const getPreviewComponentForFile = (file: SNFile, objectUrl: string) => {
+  if (file.mimeType.startsWith('image/')) {
+    return <img src={objectUrl} />;
+  }
+
+  if (file.mimeType.startsWith('video/')) {
+    return <video className="w-full h-full" src={objectUrl} controls />;
+  }
+
+  if (file.mimeType.startsWith('audio/')) {
+    return <audio src={objectUrl} controls />;
+  }
+
+  return <object className="w-full h-full" data={objectUrl} />;
+};
+
+export const FilePreviewModal: FunctionComponent<Props> = ({
+  application,
+  file,
+  onDismiss,
+}) => {
+  const [objectUrl, setObjectUrl] = useState<string>();
+  const [isFilePreviewable, setIsFilePreviewable] = useState(false);
+  const [isLoadingFile, setIsLoadingFile] = useState(false);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+  const getObjectUrl = useCallback(async () => {
+    setIsLoadingFile(true);
+    try {
+      const chunks: Uint8Array[] = [];
+      await application.files.downloadFile(
+        file,
+        async (decryptedChunk: Uint8Array) => {
+          chunks.push(decryptedChunk);
+        }
+      );
+      const finalDecryptedBytes = concatenateUint8Arrays(chunks);
+      setObjectUrl(
+        URL.createObjectURL(
+          new Blob([finalDecryptedBytes], {
+            type: file.mimeType,
+          })
+        )
+      );
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoadingFile(false);
+    }
+  }, [application.files, file]);
+
+  useEffect(() => {
+    const isPreviewable = isFileTypePreviewable(file.mimeType);
+    setIsFilePreviewable(isPreviewable);
+
+    if (!objectUrl && isPreviewable) {
+      getObjectUrl();
+    }
+
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [file.mimeType, getObjectUrl, objectUrl]);
+
+  return (
+    <DialogOverlay
+      className="sn-component"
+      aria-label="File preview modal"
+      onDismiss={onDismiss}
+      initialFocusRef={closeButtonRef}
+    >
+      <DialogContent
+        className="flex flex-col rounded shadow-overlay"
+        style={{
+          width: '90%',
+          maxWidth: '90%',
+          minHeight: '90%',
+          background: 'var(--sn-stylekit-background-color)',
+        }}
+      >
+        <div className="flex flex-shrink-0 justify-between items-center min-h-6 px-4 py-3 border-0 border-b-1 border-solid border-main">
+          <div className="flex items-center">
+            <div className="w-6 h-6">
+              {getFileIconComponent(
+                application.iconsController.getIconForFileType(file.mimeType),
+                'w-6 h-6 flex-shrink-0'
+              )}
+            </div>
+            <span className="ml-3 font-medium">{file.name}</span>
+          </div>
+          <div className="flex items-center">
+            {objectUrl && (
+              <Button
+                type="primary"
+                className="mr-4"
+                onClick={() => {
+                  application
+                    .getArchiveService()
+                    .downloadData(objectUrl, file.name);
+                }}
+              >
+                Download
+              </Button>
+            )}
+            <button
+              ref={closeButtonRef}
+              onClick={onDismiss}
+              aria-label="Close modal"
+              className="flex p-1 bg-transparent border-0 cursor-pointer"
+            >
+              <Icon type="close" className="color-neutral" />
+            </button>
+          </div>
+        </div>
+        <div className="flex flex-grow items-center justify-center min-h-0 overflow-auto">
+          {objectUrl ? (
+            getPreviewComponentForFile(file, objectUrl)
+          ) : isLoadingFile ? (
+            <div className="sk-spinner w-5 h-5 spinner-info"></div>
+          ) : (
+            <div className="flex flex-col items-center">
+              <NoPreviewIllustration className="w-30 h-30 mb-4" />
+              <div className="font-bold text-base mb-2">
+                This file can't be previewed.
+              </div>
+              {isFilePreviewable ? (
+                <>
+                  <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
+                    There was an error loading the file. Try again, or download
+                    it and open it using another application.
+                  </div>
+                  <div className="flex items-center">
+                    <Button
+                      type="primary"
+                      className="mr-3"
+                      onClick={() => {
+                        getObjectUrl();
+                      }}
+                    >
+                      Try again
+                    </Button>
+                    <Button
+                      type="normal"
+                      onClick={() => {
+                        application.getAppState().files.downloadFile(file);
+                      }}
+                    >
+                      Download
+                    </Button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
+                    To view this file, download it and open it using another
+                    application.
+                  </div>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      application.getAppState().files.downloadFile(file);
+                    }}
+                  >
+                    Download
+                  </Button>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </DialogOverlay>
+  );
+};
--- a/app/assets/javascripts/components/Files/FilePreviewModalProvider.tsx
+++ b/app/assets/javascripts/components/Files/FilePreviewModalProvider.tsx
@@ -0,0 +1,53 @@
+import { WebApplication } from '@/ui_models/application';
+import { SNFile } from '@standardnotes/snjs';
+import { createContext, FunctionComponent } from 'preact';
+import { useContext, useState } from 'preact/hooks';
+import { FilePreviewModal } from './FilePreviewModal';
+
+type FilePreviewModalContextData = {
+  activate: (file: SNFile) => void;
+};
+
+const FilePreviewModalContext =
+  createContext<FilePreviewModalContextData | null>(null);
+
+export const useFilePreviewModal = (): FilePreviewModalContextData => {
+  const value = useContext(FilePreviewModalContext);
+
+  if (!value) {
+    throw new Error('FilePreviewModalProvider not found.');
+  }
+
+  return value;
+};
+
+export const FilePreviewModalProvider: FunctionComponent<{
+  application: WebApplication;
+}> = ({ application, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [file, setFile] = useState<SNFile>();
+
+  const activate = (file: SNFile) => {
+    setFile(file);
+    setIsOpen(true);
+  };
+
+  const close = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      {isOpen && file && (
+        <FilePreviewModal
+          application={application}
+          file={file}
+          onDismiss={close}
+        />
+      )}
+      <FilePreviewModalContext.Provider value={{ activate }}>
+        {children}
+      </FilePreviewModalContext.Provider>
+    </>
+  );
+};
--- a/app/assets/javascripts/components/Files/isFilePreviewable.ts
+++ b/app/assets/javascripts/components/Files/isFilePreviewable.ts
@@ -0,0 +1,12 @@
+export const isFileTypePreviewable = (fileType: string) => {
+  const isImage = fileType.startsWith('image/');
+  const isVideo = fileType.startsWith('video/');
+  const isAudio = fileType.startsWith('audio/');
+  const isPdf = fileType === 'application/pdf';
+
+  if (isImage || isVideo || isAudio || isPdf) {
+    return true;
+  }
+
+  return false;
+};
--- a/app/assets/javascripts/components/Icon.tsx
+++ b/app/assets/javascripts/components/Icon.tsx
@@ -27,9 +27,8 @@ import {
  EmailIcon,
  EyeIcon,
  EyeOffIcon,
-  FileIcon,
-  FolderIcon,
  FileDocIcon,
+  FileIcon,
  FileImageIcon,
  FileMovIcon,
  FileMusicIcon,
@@ -38,6 +37,7 @@ import {
  FilePptIcon,
  FileXlsIcon,
  FileZipIcon,
+  FolderIcon,
  HashtagIcon,
  HashtagOffIcon,
  HelpIcon,
@@ -165,7 +165,6 @@ export const ICONS = {
  settings: SettingsIcon,
  signIn: SignInIcon,
  signOut: SignOutIcon,
-  spellcheck: NotesIcon,
  spreadsheets: SpreadsheetsIcon,
  star: StarIcon,
  sync: SyncIcon,
--- a/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
@@ -161,7 +161,7 @@ const SpellcheckOptions: FunctionComponent<{
        disabled={!spellcheckControllable}
      >
        <span className="flex items-center">
-          <Icon type="spellcheck" className={iconClass} />
+          <Icon type="notes" className={iconClass} />
          Spellcheck
        </span>
        <Switch
--- a/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -3,13 +3,7 @@ import { STRING_RESTORE_LOCKED_ATTEMPT } from '@/strings';
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { getPlatformString } from '@/utils';
-import {
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogLabel,
-  AlertDialogOverlay,
-} from '@reach/alert-dialog';
-import VisuallyHidden from '@reach/visually-hidden';
+import { DialogContent, DialogOverlay } from '@reach/dialog';
 import {
  ButtonType,
  ContentType,
@@ -240,24 +234,22 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
    };

    return (
-      <AlertDialogOverlay
+      <DialogOverlay
        className={`sn-component ${getPlatformString()}`}
        onDismiss={dismissModal}
-        leastDestructiveRef={closeButtonRef}
+        initialFocusRef={closeButtonRef}
+        aria-label="Note revision history"
      >
-        <AlertDialogContent
+        <DialogContent
          className="rounded shadow-overlay"
          style={{
            width: '90%',
            maxWidth: '90%',
            minHeight: '90%',
-            background: '#fff',
+            background: 'var(--sn-stylekit-background-color)',
          }}
        >
-          <AlertDialogLabel>
-            <VisuallyHidden>Note revision history</VisuallyHidden>
-          </AlertDialogLabel>
-          <AlertDialogDescription
+          <div
            className={`bg-default flex flex-col h-full overflow-hidden ${
              isDeletingRevision ? 'pointer-events-none cursor-not-allowed' : ''
            }`}
@@ -333,9 +325,9 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                </div>
              )}
            </div>
-          </AlertDialogDescription>
-        </AlertDialogContent>
-      </AlertDialogOverlay>
+          </div>
+        </DialogContent>
+      </DialogOverlay>
    );
  });