IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Common: fixed MediaViewer close, fixed share dropdown styles

Browse Source
This commit is contained in:
Nikita Gopienko 2020-10-13 13:30:26 +03:00
parent 358d53e2be
commit 0712677297
4 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -209,10 +209,7 @@ class SectionBodyContent extends React.Component {
return false;
}
if (
!isEqual(this.props, nextProps) ||
!isEqual(this.state.mediaViewerVisible, nextState.mediaViewerVisible)
) {
if (!isEqual(this.props, nextProps)) {
return true;
}

2
products/ASC.Files/Client/src/components/panels/StyledPanels.js
View File

@ -202,7 +202,7 @@ const StyledSharingHeaderContent = styled.div`
position: relative;
.sharing_panel-drop-down {
padding: 8px 16px;
padding: 0px;
}
.sharing_panel-plus-icon {
margin-right: 12px;

54
web/ASC.Web.Common/src/components/MediaViewer/MediaViewer.js
View File

@ -35,10 +35,10 @@ class MediaViewer extends React.Component {
super(props);
this.state = {
visible: this.props.visible,
visible: props.visible,
allowConvert: true,
playlist: this.props.playlist,
playlistPos: this.props.playlist.length > 0 ? this.props.playlist.find(file => file.fileId === this.props.currentFileId).id : 0
playlist: props.playlist,
playlistPos: props.playlist.length > 0 ? props.playlist.find(file => file.fileId === props.currentFileId).id : 0
};
this.detailsContainer = React.createRef();
@ -63,25 +63,35 @@ class MediaViewer extends React.Component {
this.hammer.off('doubletap', this.prevMedia);
}
this.hammer = null;
setTimeout(function () {
setTimeout(function() {
try {
if (_this.canImageView(ext)) {
var pinch = new Hammer.Pinch();
_this.hammer = Hammer(document.getElementsByClassName('react-viewer-canvas')[0]);
_this.hammer.add([pinch]);
_this.hammer.on('pinchout', _this.handleZoomOut);
_this.hammer.on('pinchin', _this.handleZoomIn);
_this.hammer.on('pinchend', _this.handleZoomEnd);
_this.hammer.on('doubletap', _this.doubleTap);
} else if (_this.mapSupplied[ext] && (_this.mapSupplied[ext].type == mediaTypes.video || _this.mapSupplied[ext].type == mediaTypes.audio)) {
_this.hammer = Hammer(document.getElementsByClassName('videoViewerOverlay')[0]);
const pinch = new Hammer.Pinch();
_this.hammer = Hammer(
document.getElementsByClassName("react-viewer-canvas")[0]
);
_this.hammer.add([pinch]);
_this.hammer.on("pinchout", _this.handleZoomOut);
_this.hammer.on("pinchin", _this.handleZoomIn);
_this.hammer.on("pinchend", _this.handleZoomEnd);
_this.hammer.on("doubletap", _this.doubleTap);
} else if (
_this.mapSupplied[ext] &&
(_this.mapSupplied[ext].type == mediaTypes.video ||
_this.mapSupplied[ext].type == mediaTypes.audio)
) {
_this.hammer = Hammer(
document.getElementsByClassName("videoViewerOverlay")[0]
);
}
if (_this.hammer) {
_this.hammer.on('swipeleft', _this.nextMedia);
_this.hammer.on('swiperight', _this.prevMedia);
_this.hammer.on("swipeleft", _this.nextMedia);
_this.hammer.on("swiperight", _this.prevMedia);
}
}, 500)
} catch (ex) {
console.error("MediaViewer updateHammer", ex);
}
}, 500);
}
componentDidUpdate(prevProps) {
@ -306,6 +316,12 @@ class MediaViewer extends React.Component {
}
}
}
onClose = () => {
this.props.onClose();
this.setState({visible: false});
}
render() {
let currentPlaylistPos = this.state.playlistPos;
@ -363,7 +379,7 @@ class MediaViewer extends React.Component {
isImage ?
<ImageViewer
visible={this.state.visible}
onClose={() => { this.setState({ visible: false }); }}
onClose={this.onClose}
images={[
{ src: url, alt: '' }
]}

14
web/ASC.Web.Common/src/components/MediaViewer/sub-components/image-viewer.js
View File

@ -160,19 +160,13 @@ var customToolbar = [
];
class ImageViewer extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false,
};
}
componentDidUpdate(){
document.getElementsByClassName("iconContainer reset").length > 0 && document.getElementsByClassName("iconContainer reset")[0].click();
}
render() {
const { className, visible, images, inactive } = this.props;
const { className, visible, images, inactive, onClose } = this.props;
customToolbar.forEach((button) => {
switch (button.key) {
@ -198,6 +192,7 @@ class ImageViewer extends React.Component {
inactive={inactive}
visible={visible}
zoomSpeed={0.1}
onMaskClick={onClose}
customToolbar={(toolbars) => {
return customToolbar;
}}
@ -217,7 +212,8 @@ ImageViewer.propTypes = {
onNextClick: PropTypes.func,
onPrevClick: PropTypes.func,
onDeleteClick: PropTypes.func,
onDownloadClick: PropTypes.func
onDownloadClick: PropTypes.func,
onClose: PropTypes.func
}
export default ImageViewer;