Bugfix/fix display images in media viewer

packages/asc-web-common/components/MediaViewer/MediaViewer.js

@@ -308,6 +308,9 @@ class MediaViewer extends React.Component {
     this.setState({
       playlistPos: currentPlaylistPos,
     });
+
+    const id = playlist[currentPlaylistPos].fileId;
+    this.props.onChangeUrl(id);
   };
 
   nextMedia = () => {
@@ -319,6 +322,9 @@ class MediaViewer extends React.Component {
     this.setState({
       playlistPos: currentPlaylistPos,
     });
+
+    const id = playlist[currentPlaylistPos].fileId;
+    this.props.onChangeUrl(id);
   };
 
   getOffset = () => {
@@ -419,8 +425,8 @@ class MediaViewer extends React.Component {
     }
   };
 
-  onClose = () => {
-    this.props.onClose();
+  onClose = (e) => {
+    this.props.onClose(e);
     this.setState({ visible: false });
   };
 
@@ -450,7 +456,7 @@ class MediaViewer extends React.Component {
       canDelete,
       canDownload,
       errorLabel,
-      previewFile,
+      isPreviewFile,
     } = this.props;
 
     const currentFileId =
@@ -547,7 +553,7 @@ class MediaViewer extends React.Component {
         <div className="mediaViewerToolbox" ref={this.viewerToolbox}>
           {!isImage && (
             <span>
-              {canDelete(currentFileId) && !previewFile && (
+              {canDelete(currentFileId) && !isPreviewFile && (
                 <ControlBtn onClick={this.onDelete}>
                   <div className="deleteBtnContainer">
                     <StyledMediaDeleteIcon size="scale" />
@@ -585,7 +591,8 @@ MediaViewer.propTypes = {
   onEmptyPlaylistError: PropTypes.func,
   deleteDialogVisible: PropTypes.bool,
   errorLabel: PropTypes.string,
-  previewFile: PropTypes.bool,
+  isPreviewFile: PropTypes.bool,
+  onChangeUrl: PropTypes.func,
 };
 
 MediaViewer.defaultProps = {
@@ -598,7 +605,7 @@ MediaViewer.defaultProps = {
   canDownload: () => {
     return true;
   },
-  previewFile: false,
+  isPreviewFile: false,
 };
 
 export default MediaViewer;

products/ASC.Files/Client/src/HOCs/withFileActions.js

@@ -204,7 +204,11 @@ export default function withFileActions(WrappedFileItem) {
         }
 
         if (isMediaOrImage) {
+          localStorage.setItem("isFirstUrl", window.location.href);
           setMediaViewerData({ visible: true, id });
+
+          const url = "/products/files/#preview/" + id;
+          history.pushState(null, null, url);
           return;
         }
 

products/ASC.Files/Client/src/pages/Home/MediaViewer/index.js

@@ -27,6 +27,7 @@ const FilesMediaViewer = (props) => {
     setIsLoading,
     setFirstLoad,
     setExpandedKeys,
+    setToPreviewFile,
     expandedKeys,
   } = props;
 
@@ -39,6 +40,25 @@ const FilesMediaViewer = (props) => {
     }
   }, [removeQuery, onMediaFileClick]);
 
+  useEffect(() => {
+    window.addEventListener("popstate", onButtonBackHandler);
+  }, [onButtonBackHandler]);
+
+  const onButtonBackHandler = () => {
+    const hash = window.location.hash;
+    const id = +hash.slice(9);
+    if (!id) {
+      setMediaViewerData({ visible: false, id: null });
+      return;
+    }
+    setMediaViewerData({ visible: true, id });
+  };
+
+  const onChangeUrl = (id) => {
+    const url = "/products/files/#preview/" + id;
+    window.history.pushState(null, null, url);
+  };
+
   const removeQuery = (queryName) => {
     const queryParams = new URLSearchParams(location.search);
 
@@ -52,6 +72,7 @@ const FilesMediaViewer = (props) => {
 
   const onMediaFileClick = (id) => {
     //const itemId = typeof id !== "object" ? id : this.props.selection[0].id; TODO:
+
     if (typeof id !== "object") {
       const item = { visible: true, id };
       setMediaViewerData(item);
@@ -84,7 +105,7 @@ const FilesMediaViewer = (props) => {
     }
   };
 
-  const onMediaViewerClose = () => {
+  const onMediaViewerClose = (e) => {
     if (previewFile) {
       setIsLoading(true);
       setFirstLoad(true);
@@ -98,9 +119,19 @@ const FilesMediaViewer = (props) => {
         .finally(() => {
           setIsLoading(false);
           setFirstLoad(false);
+          setToPreviewFile(null);
         });
     }
     setMediaViewerData({ visible: false, id: null });
+
+    if (e) {
+      const url = localStorage.getItem("isFirstUrl");
+
+      if (!url) {
+        return;
+      }
+      window.history.replaceState(null, null, url);
+    }
   };
 
   return (
@@ -121,7 +152,8 @@ const FilesMediaViewer = (props) => {
         extsMediaPreviewed={mediaViewerMediaFormats} //TODO:
         extsImagePreviewed={mediaViewerImageFormats} //TODO:
         errorLabel={t("Translations:MediaLoadError")}
-        previewFile={previewFile}
+        isPreviewFile={!!previewFile}
+        onChangeUrl={onChangeUrl}
       />
     )
   );
@@ -149,6 +181,7 @@ export default inject(
       setMediaViewerData,
       playlist,
       previewFile,
+      setToPreviewFile,
     } = mediaViewerDataStore;
     const { deleteItemAction } = filesActionsStore;
     const { media, images } = formatsStore.mediaViewersFormatsStore;
@@ -171,6 +204,7 @@ export default inject(
       setIsLoading,
       setFirstLoad,
       setExpandedKeys,
+      setToPreviewFile,
       expandedKeys,
     };
   }

products/ASC.Files/Client/src/pages/Home/index.js

@@ -38,15 +38,23 @@ class PureHome extends React.Component {
       expandedKeys,
       setExpandedKeys,
       setToPreviewFile,
+      playlist,
       mediaViewersFormatsStore,
       getFileInfo,
     } = this.props;
 
+    if (!window.location.href.includes("#preview")) {
+      localStorage.removeItem("isFirstUrl");
+    }
+
     const reg = new RegExp(`${homepage}((/?)$|/filter)`, "gmi"); //TODO: Always find?
     const match = window.location.pathname.match(reg);
     let filterObj = null;
 
-    if (window.location.href.indexOf("/files/#preview") > 1) {
+    if (
+      window.location.href.indexOf("/files/#preview") > 1 &&
+      playlist.length < 1
+    ) {
       const pathname = window.location.href;
       const fileId = pathname.slice(pathname.indexOf("#preview") + 9);
 
@@ -67,6 +75,10 @@ class PureHome extends React.Component {
     }
 
     if (match && match.length > 0) {
+      if (window.location.href.includes("#preview")) {
+        return;
+      }
+
       filterObj = FilesFilter.getFilter(window.location);
 
       if (!filterObj) {
@@ -393,7 +405,7 @@ export default inject(
       ? filesStore.selectionTitle
       : null;
 
-    const { setToPreviewFile } = mediaViewerDataStore;
+    const { setToPreviewFile, playlist } = mediaViewerDataStore;
     if (!firstLoad) {
       if (isLoading) {
         showLoader();
@@ -441,6 +453,7 @@ export default inject(
       isHeaderVisible: auth.settingsStore.isHeaderVisible,
       setHeaderVisible: auth.settingsStore.setHeaderVisible,
       setToPreviewFile,
+      playlist,
       mediaViewersFormatsStore,
       getFileInfo,
     };

products/ASC.Files/Client/src/store/MediaViewerDataStore.js

@@ -20,7 +20,15 @@ class MediaViewerDataStore {
   };
 
   setToPreviewFile = (file, visible) => {
+    if (file === null) {
+      this.previewFile = null;
+      this.id = null;
+      this.visible = false;
+      return;
+    }
+
     if (!file.canOpenPlayer) return;
+
     this.previewFile = file;
     this.id = file.id;
     this.visible = visible;
@@ -55,6 +63,7 @@ class MediaViewerDataStore {
         title: this.previewFile.title,
       });
     }
+
     return playlist;
   }
 }