Unfloyded/Legamunt
0
0
Fork 0
Code Activity

[RFC] Improved media modal (#5956)

Browse source 
* 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
This commit is contained in:
Yuto Tokunaga 2018-03-05 04:32:24 +09:00 • committed by Eugen Rochko
parent ef44c62d17
commit 4e929b2d17
6 changed files with 330 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

32
app/javascript/mastodon/features/ui/components/image_loader.js
View file

@ -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>
);