Web: Files: moved the media viewer visible to redux

products/ASC.Files/Client/src/components/Article/Body/index.js

@@ -119,7 +119,6 @@ class ArticleBodyContent extends React.Component {
             onLoading={onLoading}
             folderId={newFolderId}
             files={newFiles}
-            filter={filter}
           />
         )}
         <TreeFolders

products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js

@@ -28,7 +28,8 @@ import {
   moveToFolder,
   copyToFolder,
   getProgress,
-  setDragItem
+  setDragItem,
+  setMediaViewerData
 } from '../../../../../store/files/actions';
 import { isFileSelected, getFileIcon, getFolderIcon, getFolderType, loopTreeFolders, isImage, isSound, isVideo } from '../../../../../store/files/selectors';
 import store from "../../../../../store/store";
@@ -77,9 +78,7 @@ class SectionBodyContent extends React.Component {
     this.state = {
       editingId: null,
       showSharingPanel: false,
-      currentItem: null,
-      currentMediaFileId: 0,
-      mediaViewerVisible: false
+      currentItem: null
     };
 
     this.tooltipRef = React.createRef();
@@ -639,15 +638,12 @@ class SectionBodyContent extends React.Component {
     )
   }
   onMediaViewerClose = () => {
-    this.setState({
-      mediaViewerVisible: false
-    });
+    const item = { visible: false, id: null };
+    this.props.setMediaViewerData(item);
   }
   onMediaFileClick = (id) => {
-    this.setState({
-      mediaViewerVisible: true,
-      currentMediaFileId: id
-    });
+    const item = { visible: true, id };
+    this.props.setMediaViewerData(item);
   }
   onDownloadMediaFile = (id) => {
     if (this.props.files.length > 0) {
@@ -919,7 +915,9 @@ class SectionBodyContent extends React.Component {
       isLoading,
       currentFolderCount,
       currentFolderType,
-      dragging
+      dragging,
+      mediaViewerVisible,
+      currentMediaFileId
     } = this.props;
 
     const { editingId, showSharingPanel, currentItem } = this.state;
@@ -1024,13 +1022,13 @@ class SectionBodyContent extends React.Component {
                 );
               })}
             </RowContainer>
-            {playlist.length > 0 && this.state.mediaViewerVisible &&
+            {playlist.length > 0 && mediaViewerVisible &&
               <MediaViewer
-                currentFileId={this.state.currentMediaFileId}
+                currentFileId={currentMediaFileId}
                 allowConvert={true} //TODO
                 canDelete={(fileId) => { return true }} //TODO 
                 canDownload={(fileId) => { return true }} //TODO 
-                visible={this.state.mediaViewerVisible}
+                visible={mediaViewerVisible}
                 playlist={playlist}
                 onDelete={this.onDeleteMediaFile}
                 onDownload={this.onDownloadMediaFile}
@@ -1058,7 +1056,7 @@ SectionBodyContent.defaultProps = {
 };
 
 const mapStateToProps = state => {
-  const { selectedFolder, treeFolders, selection, dragItem } = state.files;
+  const { selectedFolder, treeFolders, selection, dragItem, mediaViewerData } = state.files;
   const { id, title, foldersCount, filesCount, pathParts } = selectedFolder;
   const currentFolderType = getFolderType(id, treeFolders);
 
@@ -1090,7 +1088,9 @@ const mapStateToProps = state => {
     dragItem,
     isShare: pathParts[0] === shareFolderId,
     isCommon: pathParts[0] === commonFolderId,
-    isAdmin: state.auth.user.isAdmin
+    isAdmin: state.auth.user.isAdmin,
+    mediaViewerVisible: mediaViewerData.visible,
+    currentMediaFileId: mediaViewerData.id
   };
 };
 
@@ -1108,6 +1108,7 @@ export default connect(
     moveToFolder,
     copyToFolder,
     getProgress,
-    setDragItem
+    setDragItem,
+    setMediaViewerData
   }
 )(withRouter(withTranslation()(SectionBodyContent)));

products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js

@@ -26,7 +26,7 @@ import {
   StyledFooter
 } from "../StyledPanels";
 import { getFileIcon, getFolderIcon, canWebEdit, isImage, isSound, isVideo } from "../../../store/files/selectors";
-import { fetchFiles } from '../../../store/files/actions';
+import { fetchFiles, setMediaViewerData } from '../../../store/files/actions';
 import store from "../../../store/store";
 
 const { changeLanguage } = commonUtils;
@@ -66,14 +66,14 @@ class NewFilesPanelComponent extends React.Component {
   };
 
   onNewFilesClick = item => {
-    const { setNewFilesCount, onClose, onLoading, folderId } = this.props;
+    const { setNewFilesCount, onClose, /*onLoading,*/ folderId } = this.props;
     const folderIds = [];
     const fileId = [];
     const isFile = item.fileExst;
 
     isFile ? fileId.push(item.id) : folderIds.push(item.id);
 
-    onLoading(true);
+    //onLoading(true);
 
     api.files.markAsRead(folderIds, fileId)
       .then(() => {
@@ -83,13 +83,13 @@ class NewFilesPanelComponent extends React.Component {
       .catch(err => toastr.error(err))
       .finally(() => {
         !isFile && onClose();
-        onLoading(false);
+        //onLoading(false);
       });
   }
 
   onFilesClick = item => {
     const { id, fileExst, viewUrl } = item;
-    const { filter, /*onMediaFileClick*/ } = this.props;
+    const { filter, setMediaViewerData } = this.props;
     if (!fileExst) {
 
       fetchFiles(id, filter, store.dispatch)
@@ -102,7 +102,8 @@ class NewFilesPanelComponent extends React.Component {
       const isOpenMedia = isImage(fileExst) || isSound(fileExst) || isVideo(fileExst);
 
       if (isOpenMedia) {
-        //onMediaFileClick(id);
+        const mediaItem = { visible: true, id };
+        setMediaViewerData(mediaItem);
         return;
       }
 
@@ -191,7 +192,8 @@ const NewFilesPanel = (props) => (
 );
 
 const mapStateToProps = (state) => {
-  return {};
+  const { filter } = state.files
+  return { filter };
 };
 
-export default connect(mapStateToProps, {})(withRouter(NewFilesPanel));
+export default connect(mapStateToProps, { setMediaViewerData })(withRouter(NewFilesPanel));

products/ASC.Files/Client/src/store/files/actions.js

@@ -32,6 +32,7 @@ export const SELECT_FILE = "SELECT_FILE";
 export const DESELECT_FILE = "DESELECT_FILE";
 export const SET_ACTION = "SET_ACTION";
 export const SET_DRAG_ITEM = "SET_DRAG_ITEM";
+export const SET_MEDIA_VIEWER_VISIBLE = "SET_MEDIA_VIEWER_VISIBLE";
 
 export function setFile(file) {
   return {
@@ -131,6 +132,13 @@ export function deselectFile(file) {
   };
 }
 
+export function setMediaViewerData(mediaViewerData) {
+  return {
+    type: SET_MEDIA_VIEWER_VISIBLE,
+    mediaViewerData
+  };
+}
+
 export function setFilterUrl(filter) {
   const defaultFilter = FilesFilter.getDefault();
   const params = [];

products/ASC.Files/Client/src/store/files/reducers.js

@@ -12,7 +12,8 @@ import {
   SET_SELECTION,
   SELECT_FILE,
   DESELECT_FILE,
-  SET_DRAG_ITEM
+  SET_DRAG_ITEM,
+  SET_MEDIA_VIEWER_VISIBLE
 } from "./actions";
 import { api } from "asc-web-common";
 import { isFileSelected, skipFile, getFilesBySelected } from "./selectors";
@@ -29,7 +30,8 @@ const initialState = {
   selected: "none",
   selectedFolder: null,
   selection: [],
-  dragItem: null
+  dragItem: null,
+  mediaViewerData: {visible: false, id: null}
 };
 
 const filesReducer = (state = initialState, action) => {
@@ -99,6 +101,10 @@ const filesReducer = (state = initialState, action) => {
       return Object.assign({}, state, {
         dragItem: action.dragItem
       });
+    case SET_MEDIA_VIEWER_VISIBLE: 
+      return Object.assign({}, state, {
+        mediaViewerData: action.mediaViewerData
+      });
     default:
       return state;
   }