diff options
author | Yuto Tokunaga <yuntan.sub1@gmail.com> | 2018-03-05 04:32:24 +0900 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2018-03-04 20:32:24 +0100 |
commit | 4e929b2d173fa22b722c58c0e9f8223eb4f44b0e (patch) | |
tree | bd7b1a99dab4b8b96e788e0173c247eca24ebb5c /app/javascript/mastodon/features/ui/components/image_loader.js | |
parent | ef44c62d17085e71a807705f25c549553676c5f1 (diff) |
[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
Diffstat (limited to 'app/javascript/mastodon/features/ui/components/image_loader.js')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/image_loader.js | 32 |
1 files changed, 18 insertions, 14 deletions
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 ( <div className={className}> - <canvas - className='image-loader__preview-canvas' - width={width} - height={height} - ref={this.setCanvasRef} - style={{ opacity: loading ? 1 : 0 }} - /> - - {!loading && ( - <img - alt={alt} - className='image-loader__img' - src={src} + {loading ? ( + <canvas + className='image-loader__preview-canvas' + ref={this.setCanvasRef} width={width} height={height} /> + ) : ( + <ZoomableImage + alt={alt} + src={src} + onClick={onClick} + /> )} </div> ); |