Web:Common:Components:MediaViewer Added thumbnail for video

packages/client/src/store/MediaViewerDataStore.js

@@ -2,6 +2,7 @@ import { makeAutoObservable, runInAction } from "mobx";
 import {
   isNullOrUndefined,
   findNearestIndex,
+  isVideo,
 } from "@docspace/common/components/MediaViewer/helpers";
 import { thumbnailStatuses } from "SRC_DIR/helpers/filesConstants";
 import api from "@docspace/common/api";
@@ -151,14 +152,17 @@ class MediaViewerDataStore {
             fileStatus: file.fileStatus,
             canShare: file.canShare,
             version: file.version,
-            thumbnailUrl:
-              file.thumbnailStatus === thumbnailStatuses.CREATED &&
-              file.viewAccessability.ImageView
-                ? file.thumbnailUrl
-                : null,
+            thumbnailUrl: file.thumbnailUrl,
           });
 
-          if (file.viewAccessability.ImageView) itemsWithoutThumb.push(file);
+          const thumbnailIsNotCreated =
+            file.thumbnailStatus === thumbnailStatuses.WAITING;
+
+          const isVideoOrImage =
+            file.viewAccessability.ImageView || isVideo(file.fileExst);
+
+          if (thumbnailIsNotCreated && isVideoOrImage)
+            itemsWithoutThumb.push(file);
 
           id++;
         }
@@ -175,11 +179,7 @@ class MediaViewerDataStore {
         fileId: this.previewFile.id,
         src: this.previewFile.viewUrl,
         version: this.previewFile.version,
-        thumbnailUrl:
-          this.previewFile.thumbnailStatus === thumbnailStatuses.CREATED &&
-          this.previewFile.viewAccessability.ImageView
-            ? this.previewFile.thumbnailUrl
-            : null,
+        thumbnailUrl: this.previewFile.thumbnailUrl,
       });
 
       if (this.previewFile.viewAccessability.ImageView) {

packages/common/components/MediaViewer/helpers/index.ts

@@ -58,6 +58,10 @@ export const mapSupplied = {
   ".mpg": { supply: "m4v", type: mediaTypes.video, convertable: true },
 } as Record<string, { supply: string; type: number } | undefined>;
 
+export function isVideo(fileExst: string): boolean {
+  return mapSupplied[fileExst]?.type === mediaTypes.video;
+}
+
 export const isNullOrUndefined = (arg: unknown): arg is NullOrUndefined => {
   return arg === undefined || arg === null;
 };

packages/common/components/MediaViewer/sub-components/Viewer/index.tsx

@@ -194,10 +194,11 @@ function Viewer(props: ViewerProps) {
             containerRef.current
           )
         : (props.isVideo || props.isAudio) &&
-            ReactDOM.createPortal(
+          ReactDOM.createPortal(
             <ViewerPlayer
               isError={isError}
               src={props.fileUrl}
+              thumbnailSrc={targetFile.thumbnailUrl}
               isAudio={props.isAudio}
               isVideo={props.isVideo}
               panelVisible={panelVisible}

packages/common/components/MediaViewer/sub-components/ViewerPlayer/ViewerPlayer.props.ts

@@ -14,7 +14,7 @@ interface ViewerPlayerProps {
   isPreviewFile: boolean;
   isOpenContextMenu: boolean;
   mobileDetails: JSX.Element;
-
+  thumbnailSrc?: string;
   onMask: VoidFunction;
   onPrev: VoidFunction;
   onNext: VoidFunction;

packages/common/components/MediaViewer/sub-components/ViewerPlayer/index.tsx

@@ -48,6 +48,7 @@ function ViewerPlayer({
   isFistImage,
   isFullScreen,
   panelVisible,
+  thumbnailSrc,
   mobileDetails,
   isPreviewFile,
   isOpenContextMenu,
@@ -266,6 +267,7 @@ function ViewerPlayer({
   const onExitFullScreen = () => {
     if (!document.fullscreenElement) {
       setIsFullScreen(false);
+      handleResize();
     }
   };
 
@@ -544,11 +546,12 @@ function ViewerPlayer({
         >
           <animated.video
             style={lodash.omit(style, ["x", "y"])}
-            src={`${src}#t=0.001`}
+            src={thumbnailSrc ? src : `${src}#t=0.001`}
             playsInline
             ref={videoRef}
             hidden={isAudio}
             preload="metadata"
+            poster={thumbnailSrc && `${thumbnailSrc}&size=1280x720`}
             onClick={handleClickVideo}
             onEnded={handleVideoEnded}
             onDurationChange={handleDurationChange}