Improve FilePage and file preview

Author: Polleps

.gitignore

@@ -22,3 +22,4 @@ data-browser/coverage
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+.DS_Store

data-browser/src/components/EditableTitle.tsx

@@ -8,6 +8,7 @@ export interface EditableTitleProps {
   resource: Resource;
   /** Uses `name` by default */
   parentRef?: React.RefObject<HTMLInputElement>;
+  className?: string;
 }
 
 const opts = {
@@ -18,6 +19,7 @@ const opts = {
 export function EditableTitle({
   resource,
   parentRef,
+  className,
   ...props
 }: EditableTitleProps): JSX.Element {
   const [text, setText] = useTitle(resource, Infinity, opts);
@@ -56,6 +58,7 @@ export function EditableTitle({
       onChange={e => setText(e.target.value)}
       value={text || ''}
       onBlur={() => setIsEditing(false)}
+      className={className}
     />
   ) : (
     <Title
@@ -64,6 +67,7 @@ export function EditableTitle({
       data-test='editable-title'
       onClick={handleClick}
       subtle={!!canEdit && !text}
+      className={className}
     >
       <>
         {text || placeholder}

data-browser/src/components/ImageViewer.tsx

@@ -1,38 +1,101 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 import styled from 'styled-components';
+import { DialogPortalContext } from './Dialog/dialogContext';
+
+interface ImageViewerProps {
+  src: string;
+  alt?: string;
+  className?: string;
+}
 
 /** Shows an image that becomes fullscreen on click */
-export function ImageViewer(props): JSX.Element {
+export function ImageViewer({
+  src,
+  alt,
+  className,
+}: ImageViewerProps): JSX.Element {
   const [showFull, setShowFull] = useState(false);
+  const portalRef = useContext(DialogPortalContext);
+
+  useHotkeys('esc', () => setShowFull(false), { enabled: showFull });
+
+  if (!portalRef.current) {
+    return <></>;
+  }
 
   return (
-    <ImageViewerStyled
-      data-test={`image-viewer`}
-      onClick={() => setShowFull(!showFull)}
-      {...props}
+    <WrapperButton
       showFull={showFull}
-    />
+      title='Click to enlarge'
+      onClick={() => setShowFull(prev => !prev)}
+    >
+      {!showFull && (
+        <img
+          src={src}
+          alt={alt ?? ''}
+          className={className}
+          data-test={`image-viewer`}
+        />
+      )}
+      {showFull &&
+        createPortal(
+          <Viewer>
+            <img src={src} alt={alt ?? ''} data-test={`image-viewer`} />
+          </Viewer>,
+          portalRef.current,
+        )}
+    </WrapperButton>
   );
 }
 
-interface Props {
+interface WrapperProps {
   showFull: boolean;
 }
 
-const ImageViewerStyled = styled.img<Props>`
-  max-width: 100%;
-  max-height: 100%;
-  position: ${t => (t.showFull ? 'fixed' : 'relative')};
+const WrapperButton = styled.button<WrapperProps>`
   cursor: ${t => (t.showFull ? 'zoom-out' : 'zoom-in')};
-  width: ${t => (t.showFull ? '100%' : 'auto')};
-  z-index: ${t => (t.showFull ? '100' : 'auto')};
-  object-fit: contain;
-  /* Depends on navbarheight */
-  /* top: ${t => (t.showFull ? '2.5rem' : '0')}; */
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: ${t => t.theme.colors.bg};
+  border: none;
+  padding: 0;
+  width: fit-content;
+  height: fit-content;
+  user-select: none;
+  border-radius: ${p => p.theme.radius};
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    outline: 2px solid ${p => p.theme.colors.main};
+  }
+
+  & img {
+    border-radius: ${p => p.theme.radius};
+    vertical-align: sub;
+  }
+`;
+
+const Viewer = styled.div`
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100%;
+  max-height: 100vh;
+  max-height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: ${p => p.theme.margin}rem;
+  z-index: 200;
+  background-color: rgba(0, 0, 0, 0.85);
+  cursor: zoom-out;
+  backdrop-filter: blur(5px);
+
+  & img {
+    height: 90%;
+    max-width: 100%;
+    max-height: 100vh;
+    object-fit: contain;
+    border-radius: ${p => p.theme.radius};
+  }
 `;

data-browser/src/hooks/useFile.ts

@@ -0,0 +1,20 @@
+import { properties, Resource, useNumber, useString } from '@tomic/react';
+import { useCallback } from 'react';
+
+export function useFileInfo(resource: Resource) {
+  const [downloadUrl] = useString(resource, properties.file.downloadUrl);
+  const [mimeType] = useString(resource, properties.file.mimetype);
+
+  const [bytes] = useNumber(resource, properties.file.filesize);
+
+  const downloadFile = useCallback(() => {
+    window.open(downloadUrl);
+  }, [downloadUrl]);
+
+  return {
+    downloadFile,
+    downloadUrl,
+    bytes,
+    mimeType,
+  };
+}

data-browser/src/views/Card/FileCard.tsx

@@ -13,7 +13,7 @@ import { Card } from '../../components/Card';
 import CollectionCard from './CollectionCard';
 import { ErrorLook } from '../../components/ErrorLook';
 import { ValueForm } from '../../components/forms/ValueForm';
-import FileCard from './FileCard';
+import FileCard from '../File/FileCard';
 import { defaultHiddenProps } from '../ResourcePageDefault';
 import { MessageCard } from './MessageCard';
 import { BookmarkCard } from './BookmarkCard.jsx';

data-browser/src/views/Card/ResourceCard.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FaDownload } from 'react-icons/fa';
+import styled from 'styled-components';
+import { IconButton } from '../../components/IconButton/IconButton';
+import { displayFileSize } from './displayFileSize';
+
+interface DownloadButtonProps {
+  downloadFile: () => void;
+  fileSize?: number;
+}
+
+export function DownloadButton({
+  downloadFile,
+  fileSize,
+}: DownloadButtonProps): JSX.Element {
+  return (
+    <IconButton
+      title={`Download file (${displayFileSize(fileSize ?? 0)})`}
+      onClick={downloadFile}
+    >
+      <DownloadIcon />
+    </IconButton>
+  );
+}
+
+const DownloadIcon = styled(FaDownload)`
+  color: ${({ theme }) => theme.colors.main};
+`;

data-browser/src/views/File/DownloadButton.tsx

@@ -0,0 +1,28 @@
+import { useTitle } from '@tomic/react';
+import React from 'react';
+
+import { AtomicLink } from '../../components/AtomicLink';
+import { Row } from '../../components/Row';
+import { useFileInfo } from '../../hooks/useFile';
+import { CardViewProps } from '../Card/CardViewProps';
+import { DownloadButton } from './DownloadButton';
+import { FilePreview } from './FilePreview';
+
+function FileCard({ resource }: CardViewProps): JSX.Element {
+  const [title] = useTitle(resource);
+  const { downloadFile, bytes } = useFileInfo(resource);
+
+  return (
+    <React.Fragment>
+      <Row justify='space-between'>
+        <AtomicLink subject={resource.getSubject()}>
+          <h2>{title}</h2>
+        </AtomicLink>
+        <DownloadButton downloadFile={downloadFile} fileSize={bytes} />
+      </Row>
+      <FilePreview resource={resource} />
+    </React.Fragment>
+  );
+}
+
+export default FileCard;

data-browser/src/views/File/FileCard.tsx

@@ -0,0 +1,33 @@
+import { properties } from '@tomic/react';
+import React from 'react';
+import styled from 'styled-components';
+import { ContainerWide } from '../../components/Containers';
+import { EditableTitle } from '../../components/EditableTitle';
+import { ValueForm } from '../../components/forms/ValueForm';
+import { Column, Row } from '../../components/Row';
+import { useFileInfo } from '../../hooks/useFile';
+import { ResourcePageProps } from '../ResourcePage';
+import { DownloadButton } from './DownloadButton';
+import { FilePreview } from './FilePreview';
+
+/** Full page File resource for showing and downloading files */
+export function FilePage({ resource }: ResourcePageProps) {
+  const { downloadFile, bytes } = useFileInfo(resource);
+
+  return (
+    <ContainerWide about={resource.getSubject()}>
+      <Column>
+        <Row center>
+          <DownloadButton downloadFile={downloadFile} fileSize={bytes} />
+          <StyledEditableTitle resource={resource} />
+        </Row>
+        <ValueForm resource={resource} propertyURL={properties.description} />
+        <FilePreview resource={resource} />
+      </Column>
+    </ContainerWide>
+  );
+}
+
+const StyledEditableTitle = styled(EditableTitle)`
+  margin: 0;
+`;

data-browser/src/views/File/FilePage.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Resource } from '@tomic/react';
+import { ImageViewer } from '../../components/ImageViewer';
+import { useFileInfo } from '../../hooks/useFile';
+import styled from 'styled-components';
+import { TextPreview } from './TextPreview';
+interface FilePreviewProps {
+  resource: Resource;
+}
+
+export function FilePreview({ resource }: FilePreviewProps) {
+  const { downloadUrl, mimeType } = useFileInfo(resource);
+
+  if (mimeType?.startsWith('image/')) {
+    return <StyledImageViewer src={downloadUrl ?? ''} />;
+  }
+
+  if (mimeType?.startsWith('video/')) {
+    return (
+      // Don't know how to get captions here
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      <video controls width='100%'>
+        <source src={downloadUrl} type={mimeType} />
+        {"Sorry, your browser doesn't support embedded videos."}
+      </video>
+    );
+  }
+
+  if (mimeType?.startsWith('audio/')) {
+    return (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      <audio controls>
+        <source src={downloadUrl} type={mimeType} />
+      </audio>
+    );
+  }
+
+  if (mimeType?.startsWith('text/') || mimeType?.startsWith('application/')) {
+    return <TextPreview downloadUrl={downloadUrl ?? ''} mimeType={mimeType} />;
+  }
+
+  return <NoPreview>No preview available</NoPreview>;
+}
+
+const StyledImageViewer = styled(ImageViewer)`
+  width: 100%;
+`;
+
+const NoPreview = styled.div`
+  display: grid;
+  place-items: center;
+  border: 1px solid ${({ theme }) => theme.colors.bg2};
+  border-radius: ${({ theme }) => theme.radius};
+  background-color: ${({ theme }) => theme.colors.bg1};
+  height: 8rem;
+`;