refactor(PdfAsset): files & structure

src/script/components/FileCard/FileCardRoot/FileCardRoot.styles.ts

@@ -41,7 +41,8 @@ export const wrapperStylesSmall: CSSObject = {
 export const wrapperStylesLarge: CSSObject = {
   ...wrapperStyles,
   height: 'auto',
-  width: '500px',
+  maxWidth: '500px',
+  width: '100%',
 };
 
 export const contentStyles: CSSObject = {

src/script/components/MessagesList/Message/ContentMessage/asset/PdfAsset/PdfFileAsset.tsx → src/script/components/MessagesList/Message/ContentMessage/asset/PdfAsset/PdfAsset.tsx

@@ -37,12 +37,12 @@ export interface PdfFileAssetProps {
 }
 
 const PdfAssetPreview = lazy(() =>
-  import('./PdfAssetContent/PdfAssetPreview').then(module => ({
+  import('./PdfAssetPreview/PdfAssetPreview').then(module => ({
     default: module.PdfAssetPreview,
   })),
 );
 
-export const PdfFileAsset = ({message, isFileShareRestricted}: PdfFileAssetProps) => {
+export const PdfAsset = ({message, isFileShareRestricted}: PdfFileAssetProps) => {
   const asset = message.getFirstAsset() as FileAsset;
   const {isUploading, getAssetUrl, uploadProgress} = useAssetTransfer(message);
   const {elementRef, hasBeenInView} = useInView();

src/script/components/MessagesList/Message/ContentMessage/asset/PdfAsset/PdfAssetError/PdfAssetError.tsx

@@ -26,7 +26,7 @@ import {wrapperStyles, iconStyles, textStyles} from './PdfAssetError.styles';
 import {PdfAssetPlaceholder} from '../common/PdfAssetPlaceholder/PdfAssetPlaceholder';
 
 interface PdfAssetErrorProps {
-  isFileShareRestricted: boolean;
+  isFileShareRestricted?: boolean;
 }
 
 export const PdfAssetError = ({isFileShareRestricted}: PdfAssetErrorProps) => {

src/script/components/MessagesList/Message/ContentMessage/asset/PdfAsset/PdfAssetContent/PdfAssetPreview.styles.ts → src/script/components/MessagesList/Message/ContentMessage/asset/PdfAsset/PdfAssetPreview/PdfAssetPreview.styles.ts

@@ -19,6 +19,11 @@
 
 import {CSSObject} from '@emotion/react';
 
+export const wrapperStyles: CSSObject = {
+  marginTop: 'auto',
+  width: '100%',
+};
+
 export const documentStyles: CSSObject = {
   pointerEvents: 'none',
   userSelect: 'none',

src/script/components/MessagesList/Message/ContentMessage/asset/PdfAsset/PdfAssetContent/PdfAssetPreview.tsx → src/script/components/MessagesList/Message/ContentMessage/asset/PdfAsset/PdfAssetPreview/PdfAssetPreview.tsx

@@ -21,18 +21,31 @@ import {Document, Page} from 'react-pdf';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
 
-import {documentStyles} from './PdfAssetPreview.styles';
+import {useResizeObserver} from 'Hooks/useResizeObserver/useResizeObserver';
+
+import {documentStyles, wrapperStyles} from './PdfAssetPreview.styles';
 
 import {PdfAssetLoader} from '../common/PdfAssetLoader/PdfAssetLoader';
+import {PdfAssetError} from '../PdfAssetError/PdfAssetError';
 
 interface PdfAssetPreviewProps {
   url: string;
 }
 
 export const PdfAssetPreview = ({url}: PdfAssetPreviewProps) => {
+  const {ref, width, height} = useResizeObserver();
+
   return (
-    <Document file={url} loading={<PdfAssetLoader />} css={documentStyles}>
-      <Page pageNumber={1} />
-    </Document>
+    <div ref={ref} css={wrapperStyles}>
+      <Document file={url} loading={<PdfAssetLoader />} noData={<PdfAssetError />} css={documentStyles}>
+        <Page
+          pageNumber={1}
+          loading={<></>}
+          width={width || undefined}
+          height={height || undefined}
+          renderAnnotationLayer={false}
+        />
+      </Document>
+    </div>
   );
 };

src/script/components/MessagesList/Message/ContentMessage/asset/VideoAsset/useVideoPlayback/useVideoPlayback.ts

@@ -82,27 +82,24 @@ export const useVideoPlayback = ({url, videoElement, isEnabled}: UseVideoPlaybac
     await videoElement.play();
   }, [videoElement]);
 
-  const handlePlay = useCallback(
-    async (url?: string): Promise<void> => {
-      if (!isEnabled || !url || !videoElement) {
-        return;
-      }
+  const handlePlay = useCallback(async (): Promise<void> => {
+    if (!isEnabled || !url || !videoElement) {
+      return;
+    }
 
-      if (playabilityStatusRef.current !== 'not-checked') {
-        await play();
-        return;
-      }
+    if (playabilityStatusRef.current !== 'not-checked') {
+      await play();
+      return;
+    }
 
-      const playabilityStatus = await getPlayabilityStatus(url);
+    const playabilityStatus = await getPlayabilityStatus(url);
 
-      if (playabilityStatus === 'unplayable') {
-        return;
-      }
+    if (playabilityStatus === 'unplayable') {
+      return;
+    }
 
-      await play();
-    },
-    [getPlayabilityStatus, isEnabled, play, videoElement],
-  );
+    await play();
+  }, [getPlayabilityStatus, isEnabled, play, url, videoElement]);
 
   const handlePause = useCallback(() => {
     setIsPlaying(false);

src/script/components/MessagesList/Message/ContentMessage/asset/common/AssetHeader/AssetHeader.tsx

@@ -21,10 +21,9 @@ import React from 'react';
 
 import cx from 'classnames';
 
+import type {Message} from 'src/script/entity/message/Message';
 import {formatDayMonthNumeral, formatTimeShort} from 'Util/TimeUtil';
 
-import type {Message} from '../../../../../../../entity/message/Message';
-
 export interface AssetHeaderProps extends Partial<HTMLDivElement> {
   message: Message;
 }

src/script/components/MessagesList/Message/ContentMessage/asset/common/MediaButton/MediaButton.tsx

@@ -22,12 +22,12 @@ import React, {useEffect, useState} from 'react';
 import cx from 'classnames';
 
 import {useMessageFocusedTabIndex} from 'Components/MessagesList/Message/util';
+import {AssetTransferState} from 'src/script/assets/AssetTransferState';
+import type {FileAsset} from 'src/script/entity/message/FileAsset';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {t} from 'Util/LocalizerUtil';
 import {noop} from 'Util/util';
 
-import {AssetTransferState} from '../../../../../../../assets/AssetTransferState';
-import type {FileAsset} from '../../../../../../../entity/message/FileAsset';
 import {AssetLoader} from '../AssetLoader/AssetLoader';
 
 export interface MediaButtonProps {

src/script/components/MessagesList/Message/ContentMessage/asset/common/useAssetTransfer/useAssetTransfer.ts

@@ -21,14 +21,13 @@ import {useEffect, useState} from 'react';
 
 import {container} from 'tsyringe';
 
+import {AssetRemoteData} from 'src/script/assets/AssetRemoteData';
+import {AssetRepository} from 'src/script/assets/AssetRepository';
+import {AssetTransferState} from 'src/script/assets/AssetTransferState';
+import {ContentMessage} from 'src/script/entity/message/ContentMessage';
+import {FileAsset} from 'src/script/entity/message/FileAsset';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 
-import {AssetRemoteData} from '../../../../../../../assets/AssetRemoteData';
-import {AssetRepository} from '../../../../../../../assets/AssetRepository';
-import {AssetTransferState} from '../../../../../../../assets/AssetTransferState';
-import {ContentMessage} from '../../../../../../../entity/message/ContentMessage';
-import {FileAsset} from '../../../../../../../entity/message/FileAsset';
-
 export type AssetUrl = {
   url: string;
   dispose: () => void;

src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx

@@ -35,7 +35,7 @@ import {ImageAsset} from './ImageAsset';
 import {LinkPreviewAsset} from './LinkPreviewAssetComponent';
 import {LocationAsset} from './LocationAsset';
 import {MessageButton} from './MessageButton';
-import {PdfFileAsset} from './PdfAsset/PdfFileAsset';
+import {PdfAsset} from './PdfAsset/PdfAsset';
 import {TextMessageRenderer} from './TextMessageRenderer';
 import {VideoAssetV2} from './VideoAsset/VideoAssetV2';
 
@@ -132,7 +132,7 @@ const ContentAsset = ({
 
       if ((asset as FileAssetType).isPdf()) {
         // return <p>pdf</p>;
-        return <PdfFileAsset message={message} isFileShareRestricted={isFileShareRestricted} />;
+        return <PdfAsset message={message} isFileShareRestricted={isFileShareRestricted} />;
       }
 
     case AssetType.IMAGE:

src/script/hooks/useInView/useInView.test.ts

@@ -144,19 +144,16 @@ describe('useInView', () => {
 
     expect(result.current.hasBeenInView).toBe(false);
 
-    // Simulate element coming into view
     act(() => {
       observerCallback([{isIntersecting: true} as IntersectionObserverEntry]);
     });
 
     expect(result.current.hasBeenInView).toBe(true);
 
-    // Simulate element going out of view
     act(() => {
       observerCallback([{isIntersecting: false} as IntersectionObserverEntry]);
     });
 
-    // hasBeenInView should remain true even when element is no longer in view
     expect(result.current.hasBeenInView).toBe(true);
     expect(result.current.isInView).toBe(false);
   });

src/script/main/app.ts

@@ -26,6 +26,7 @@ import {ClientClassification, ClientType} from '@wireapp/api-client/lib/client/'
 import {EVENTS as CoreEvents} from '@wireapp/core/lib/Account';
 import {amplify} from 'amplify';
 import platform from 'platform';
+import {pdfjs} from 'react-pdf';
 import {container} from 'tsyringe';
 
 import {Runtime} from '@wireapp/commons';
@@ -115,6 +116,8 @@ import {UserService} from '../user/UserService';
 import {ViewModelRepositories} from '../view_model/MainViewModel';
 import {Warnings} from '../view_model/WarningsContainer';
 
+pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 export function doRedirect(signOutReason: SIGN_OUT_REASON) {
   let url = `/auth/${location.search}`;
 

src/script/main/index.tsx

@@ -23,7 +23,6 @@ import 'core-js/full/reflect';
 // eslint-disable-next-line import/order
 import {ClientType} from '@wireapp/api-client/lib/client/';
 import {createRoot} from 'react-dom/client';
-import {pdfjs} from 'react-pdf';
 
 import {Runtime} from '@wireapp/commons';
 
@@ -38,8 +37,6 @@ import {SIGN_OUT_REASON} from '../auth/SignOutReason';
 import {Config} from '../Config';
 import {StorageKey} from '../storage';
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
-
 document.addEventListener('DOMContentLoaded', async () => {
   const config = Config.getConfig();
 

src/style/components/pdf-preview.less

@@ -1,19 +1,21 @@
+// Customize predefinned classes for react-pdf
+
 .react-pdf__Page__canvas {
   width: 100%;
 }
 
 .react-pdf__Document {
+  display: flex;
   width: 100%;
   height: 100%;
-  display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
 .react-pdf__Page {
+  position: relative;
   max-width: 100%;
   max-height: 100%;
-  position: relative;
   margin-top: auto;
 }