From 4e929b2d173fa22b722c58c0e9f8223eb4f44b0e Mon Sep 17 00:00:00 2001 From: Yuto Tokunaga Date: Mon, 5 Mar 2018 04:32:24 +0900 Subject: [PATCH] [RFC] Improved media modal (#5956) * Improved media modal ImageLoader: Impliment pinch zoom by CSS `transform: scale(X)` ImageLoader: Impliment panning by CSS `overflow: scroll` ImageLoader: Larger image MediaModal: Larger close button MediaModal: Close the modal by swiping vertically MediaModal: Show/hide close button and right/left navigation on tapping image MediaModal: Change the `pointer-event` CSS prpp to get more blank space to close the modal ImageLoader: Zoom/reset zoom on double tap MediaModal: disable vertical swiping while horizontally swiped ImageLoader: prevent propagating touchmove event to MediaModal MediaModal: Adjust size and potision of buttons ImageLoader: Adjust scroll potision on pinch zoom * Remove "swipe to close" and "double tap to zoom" features * remove unused prop and functions removed `onScroll` prop and `handleScroll` func in ImageLoader * separate zoom functionary to ZoomableImage component adjust styling of ImageLoader add styling for ZoomableImage * adjust size and potision of close button of media modal * Fix for gif video add `onClick` prop to ExtendedVideoPlayer specify `onClick` prop to video tag for switching nav of `MediaModal` add `.video-modal` class to scss to separate styling for `VideoModal` * fix styling for centering specify height of `ZoomableImage` by pixel clean styling for `ImageLoader` * fix lint errors * small fix * fixed designated parts --- .../components/extended_video_player.js | 8 + .../features/ui/components/image_loader.js | 32 ++-- .../features/ui/components/media_modal.js | 84 ++++++++-- .../features/ui/components/video_modal.js | 2 +- .../features/ui/components/zoomable_image.js | 151 ++++++++++++++++++ .../styles/mastodon/components.scss | 146 ++++++++++------- 6 files changed, 330 insertions(+), 93 deletions(-) create mode 100644 app/javascript/mastodon/features/ui/components/zoomable_image.js diff --git a/app/javascript/mastodon/components/extended_video_player.js b/app/javascript/mastodon/components/extended_video_player.js index f8bd067e8..9e2f6835a 100644 --- a/app/javascript/mastodon/components/extended_video_player.js +++ b/app/javascript/mastodon/components/extended_video_player.js @@ -11,6 +11,7 @@ export default class ExtendedVideoPlayer extends React.PureComponent { time: PropTypes.number, controls: PropTypes.bool.isRequired, muted: PropTypes.bool.isRequired, + onClick: PropTypes.func, }; handleLoadedData = () => { @@ -31,6 +32,12 @@ export default class ExtendedVideoPlayer extends React.PureComponent { this.video = c; } + handleClick = e => { + e.stopPropagation(); + const handler = this.props.onClick; + if (handler) handler(); + } + render () { const { src, muted, controls, alt } = this.props; @@ -46,6 +53,7 @@ export default class ExtendedVideoPlayer extends React.PureComponent { muted={muted} controls={controls} loop={!controls} + onClick={this.handleClick} /> ); diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js index e3e7197c5..c7360a726 100644 --- a/app/javascript/mastodon/features/ui/components/image_loader.js +++ b/app/javascript/mastodon/features/ui/components/image_loader.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import ZoomableImage from './zoomable_image'; export default class ImageLoader extends React.PureComponent { @@ -10,6 +11,7 @@ export default class ImageLoader extends React.PureComponent { previewSrc: PropTypes.string, width: PropTypes.number, height: PropTypes.number, + onClick: PropTypes.func, } static defaultProps = { @@ -24,6 +26,7 @@ export default class ImageLoader extends React.PureComponent { } removers = []; + canvas = null; get canvasContext() { if (!this.canvas) { @@ -43,6 +46,10 @@ export default class ImageLoader extends React.PureComponent { } } + componentWillUnmount () { + this.removeEventListeners(); + } + loadImage (props) { this.removeEventListeners(); this.setState({ loading: true, error: false }); @@ -118,7 +125,7 @@ export default class ImageLoader extends React.PureComponent { } render () { - const { alt, src, width, height } = this.props; + const { alt, src, width, height, onClick } = this.props; const { loading } = this.state; const className = classNames('image-loader', { @@ -128,22 +135,19 @@ export default class ImageLoader extends React.PureComponent { return (
- - - {!loading && ( - {alt} + ) : ( + )}
); diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js index 02591a51f..72ef32256 100644 --- a/app/javascript/mastodon/features/ui/components/media_modal.js +++ b/app/javascript/mastodon/features/ui/components/media_modal.js @@ -3,6 +3,7 @@ import ReactSwipeableViews from 'react-swipeable-views'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import ExtendedVideoPlayer from '../../../components/extended_video_player'; +import classNames from 'classnames'; import { defineMessages, injectIntl } from 'react-intl'; import IconButton from '../../../components/icon_button'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -26,6 +27,7 @@ export default class MediaModal extends ImmutablePureComponent { state = { index: null, + navigationHidden: false, }; handleSwipe = (index) => { @@ -68,14 +70,21 @@ export default class MediaModal extends ImmutablePureComponent { return this.state.index !== null ? this.state.index : this.props.index; } + toggleNavigation = () => { + this.setState(prevState => ({ + navigationHidden: !prevState.navigationHidden, + })); + }; + render () { const { media, intl, onClose } = this.props; + const { navigationHidden } = this.state; const index = this.getIndex(); let pagination = []; - const leftNav = media.size > 1 && ; - const rightNav = media.size > 1 && ; + const leftNav = media.size > 1 && ; + const rightNav = media.size > 1 && ; if (media.size > 1) { pagination = media.map((item, i) => { @@ -92,9 +101,30 @@ export default class MediaModal extends ImmutablePureComponent { const height = image.getIn(['meta', 'original', 'height']) || null; if (image.get('type') === 'image') { - return ; + return ( + + ); } else if (image.get('type') === 'gifv') { - return ; + return ( + + ); } return null; @@ -104,21 +134,43 @@ export default class MediaModal extends ImmutablePureComponent { alignItems: 'center', // center vertically }; + const navigationClassName = classNames('media-modal__navigation', { + 'media-modal__navigation--hidden': navigationHidden, + }); + return (
- {leftNav} - -
- - - {content} - +
+
+ + {content} + +
+
+
+ + {leftNav} + {rightNav} +
    + {pagination} +
-
    - {pagination} -
- - {rightNav}
); } diff --git a/app/javascript/mastodon/features/ui/components/video_modal.js b/app/javascript/mastodon/features/ui/components/video_modal.js index 6a883759f..9ed4a43ad 100644 --- a/app/javascript/mastodon/features/ui/components/video_modal.js +++ b/app/javascript/mastodon/features/ui/components/video_modal.js @@ -16,7 +16,7 @@ export default class VideoModal extends ImmutablePureComponent { const { media, time, onClose } = this.props; return ( -
+