masto-fe/app/javascript/mastodon/features/ui/components/video_modal.js
Yuto Tokunaga 4e929b2d17 [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
2018-03-04 20:32:24 +01:00

34 lines
870 B
JavaScript

import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import Video from '../../video';
import ImmutablePureComponent from 'react-immutable-pure-component';
export default class VideoModal extends ImmutablePureComponent {
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
time: PropTypes.number,
onClose: PropTypes.func.isRequired,
};
render () {
const { media, time, onClose } = this.props;
return (
<div className='modal-root__modal video-modal'>
<div>
<Video
preview={media.get('preview_url')}
src={media.get('url')}
startTime={time}
onCloseVideo={onClose}
detailed
description={media.get('description')}
/>
</div>
</div>
);
}
}