diff --git a/products/ASC.Files/Client/src/components/Article/Body/index.js b/products/ASC.Files/Client/src/components/Article/Body/index.js index a4e8bc9dd5..cfb051bb76 100644 --- a/products/ASC.Files/Client/src/components/Article/Body/index.js +++ b/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} /> )} { - 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 { ); })} - {playlist.length > 0 && this.state.mediaViewerVisible && + {playlist.length > 0 && mediaViewerVisible && { 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))); diff --git a/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js b/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js index 1ed52c368f..83a74a729a 100644 --- a/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js +++ b/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)); diff --git a/products/ASC.Files/Client/src/store/files/actions.js b/products/ASC.Files/Client/src/store/files/actions.js index e071c05c56..fae904a6f5 100644 --- a/products/ASC.Files/Client/src/store/files/actions.js +++ b/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 = []; diff --git a/products/ASC.Files/Client/src/store/files/reducers.js b/products/ASC.Files/Client/src/store/files/reducers.js index 3a1c0c81c3..7ff61a9592 100644 --- a/products/ASC.Files/Client/src/store/files/reducers.js +++ b/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; }