Merge pull request #416 from ThibG/glitch-soc/features/media-modal

Port various media modal improvements to glitch-soc
This commit is contained in:
David Yip 2018-04-12 00:20:19 -05:00 committed by GitHub
commit ef678ae350
11 changed files with 393 additions and 115 deletions

View file

@ -11,6 +11,7 @@ export default class ExtendedVideoPlayer extends React.PureComponent {
time: PropTypes.number, time: PropTypes.number,
controls: PropTypes.bool.isRequired, controls: PropTypes.bool.isRequired,
muted: PropTypes.bool.isRequired, muted: PropTypes.bool.isRequired,
onClick: PropTypes.func,
}; };
handleLoadedData = () => { handleLoadedData = () => {
@ -31,6 +32,12 @@ export default class ExtendedVideoPlayer extends React.PureComponent {
this.video = c; this.video = c;
} }
handleClick = e => {
e.stopPropagation();
const handler = this.props.onClick;
if (handler) handler();
}
render () { render () {
const { src, muted, controls, alt } = this.props; const { src, muted, controls, alt } = this.props;
@ -46,6 +53,7 @@ export default class ExtendedVideoPlayer extends React.PureComponent {
muted={muted} muted={muted}
controls={controls} controls={controls}
loop={!controls} loop={!controls}
onClick={this.handleClick}
/> />
</div> </div>
); );

View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Immutable from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import punycode from 'punycode'; import punycode from 'punycode';
import classnames from 'classnames'; import classnames from 'classnames';
@ -24,6 +25,7 @@ export default class Card extends React.PureComponent {
static propTypes = { static propTypes = {
card: ImmutablePropTypes.map, card: ImmutablePropTypes.map,
maxDescription: PropTypes.number, maxDescription: PropTypes.number,
onOpenMedia: PropTypes.func.isRequired,
}; };
static defaultProps = { static defaultProps = {
@ -34,6 +36,27 @@ export default class Card extends React.PureComponent {
width: 0, width: 0,
}; };
handlePhotoClick = () => {
const { card, onOpenMedia } = this.props;
onOpenMedia(
Immutable.fromJS([
{
type: 'image',
url: card.get('url'),
description: card.get('title'),
meta: {
original: {
width: card.get('width'),
height: card.get('height'),
},
},
},
]),
0
);
};
renderLink () { renderLink () {
const { card, maxDescription } = this.props; const { card, maxDescription } = this.props;
@ -73,9 +96,16 @@ export default class Card extends React.PureComponent {
const { card } = this.props; const { card } = this.props;
return ( return (
<a href={card.get('url')} className='status-card-photo' target='_blank' rel='noopener'> <img
<img src={card.get('url')} alt={card.get('title')} width={card.get('width')} height={card.get('height')} /> className='status-card-photo'
</a> onClick={this.handlePhotoClick}
role='button'
tabIndex='0'
src={card.get('url')}
alt={card.get('title')}
width={card.get('width')}
height={card.get('height')}
/>
); );
} }

View file

@ -77,7 +77,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
); );
mediaIcon = 'picture-o'; mediaIcon = 'picture-o';
} }
} else media = <CardContainer statusId={status.get('id')} />; } else media = <CardContainer onOpenMedia={this.props.onOpenMedia} statusId={status.get('id')} />;
if (status.get('application')) { if (status.get('application')) {
applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener'>{status.getIn(['application', 'name'])}</a></span>; applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener'>{status.getIn(['application', 'name'])}</a></span>;

View file

@ -1,15 +1,17 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import ZoomableImage from './zoomable_image';
export default class ImageLoader extends React.PureComponent { export default class ImageLoader extends React.PureComponent {
static propTypes = { static propTypes = {
alt: PropTypes.string, alt: PropTypes.string,
src: PropTypes.string.isRequired, src: PropTypes.string.isRequired,
previewSrc: PropTypes.string.isRequired, previewSrc: PropTypes.string,
width: PropTypes.number, width: PropTypes.number,
height: PropTypes.number, height: PropTypes.number,
onClick: PropTypes.func,
} }
static defaultProps = { static defaultProps = {
@ -24,6 +26,7 @@ export default class ImageLoader extends React.PureComponent {
} }
removers = []; removers = [];
canvas = null;
get canvasContext() { get canvasContext() {
if (!this.canvas) { if (!this.canvas) {
@ -43,11 +46,15 @@ export default class ImageLoader extends React.PureComponent {
} }
} }
componentWillUnmount () {
this.removeEventListeners();
}
loadImage (props) { loadImage (props) {
this.removeEventListeners(); this.removeEventListeners();
this.setState({ loading: true, error: false }); this.setState({ loading: true, error: false });
Promise.all([ Promise.all([
this.loadPreviewCanvas(props), props.previewSrc && this.loadPreviewCanvas(props),
this.hasSize() && this.loadOriginalImage(props), this.hasSize() && this.loadOriginalImage(props),
].filter(Boolean)) ].filter(Boolean))
.then(() => { .then(() => {
@ -118,7 +125,7 @@ export default class ImageLoader extends React.PureComponent {
} }
render () { render () {
const { alt, src, width, height } = this.props; const { alt, src, width, height, onClick } = this.props;
const { loading } = this.state; const { loading } = this.state;
const className = classNames('image-loader', { const className = classNames('image-loader', {
@ -128,22 +135,19 @@ export default class ImageLoader extends React.PureComponent {
return ( return (
<div className={className}> <div className={className}>
<canvas {loading ? (
className='image-loader__preview-canvas' <canvas
width={width} className='image-loader__preview-canvas'
height={height} ref={this.setCanvasRef}
ref={this.setCanvasRef}
style={{ opacity: loading ? 1 : 0 }}
/>
{!loading && (
<img
alt={alt}
className='image-loader__img'
src={src}
width={width} width={width}
height={height} height={height}
/> />
) : (
<ZoomableImage
alt={alt}
src={src}
onClick={onClick}
/>
)} )}
</div> </div>
); );

View file

@ -3,6 +3,7 @@ import ReactSwipeableViews from 'react-swipeable-views';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ExtendedVideoPlayer from 'flavours/glitch/components/extended_video_player'; import ExtendedVideoPlayer from 'flavours/glitch/components/extended_video_player';
import classNames from 'classnames';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import IconButton from 'flavours/glitch/components/icon_button'; import IconButton from 'flavours/glitch/components/icon_button';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
@ -26,6 +27,7 @@ export default class MediaModal extends ImmutablePureComponent {
state = { state = {
index: null, index: null,
navigationHidden: false,
}; };
handleSwipe = (index) => { handleSwipe = (index) => {
@ -68,14 +70,21 @@ export default class MediaModal extends ImmutablePureComponent {
return this.state.index !== null ? this.state.index : this.props.index; return this.state.index !== null ? this.state.index : this.props.index;
} }
toggleNavigation = () => {
this.setState(prevState => ({
navigationHidden: !prevState.navigationHidden,
}));
};
render () { render () {
const { media, intl, onClose } = this.props; const { media, intl, onClose } = this.props;
const { navigationHidden } = this.state;
const index = this.getIndex(); const index = this.getIndex();
let pagination = []; let pagination = [];
const leftNav = media.size > 1 && <button tabIndex='0' className='modal-container__nav modal-container__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><i className='fa fa-fw fa-chevron-left' /></button>; const leftNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><i className='fa fa-fw fa-chevron-left' /></button>;
const rightNav = media.size > 1 && <button tabIndex='0' className='modal-container__nav modal-container__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><i className='fa fa-fw fa-chevron-right' /></button>; const rightNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><i className='fa fa-fw fa-chevron-right' /></button>;
if (media.size > 1) { if (media.size > 1) {
pagination = media.map((item, i) => { pagination = media.map((item, i) => {
@ -92,33 +101,77 @@ export default class MediaModal extends ImmutablePureComponent {
const height = image.getIn(['meta', 'original', 'height']) || null; const height = image.getIn(['meta', 'original', 'height']) || null;
if (image.get('type') === 'image') { if (image.get('type') === 'image') {
return <ImageLoader previewSrc={image.get('preview_url')} src={image.get('url')} width={width} height={height} alt={image.get('description')} key={image.get('preview_url')} />; return (
<ImageLoader
previewSrc={image.get('preview_url')}
src={image.get('url')}
width={width}
height={height}
alt={image.get('description')}
key={image.get('url')}
onClick={this.toggleNavigation}
/>
);
} else if (image.get('type') === 'gifv') { } else if (image.get('type') === 'gifv') {
return <ExtendedVideoPlayer src={image.get('url')} muted controls={false} width={width} height={height} key={image.get('preview_url')} alt={image.get('description')} />; return (
<ExtendedVideoPlayer
src={image.get('url')}
muted
controls={false}
width={width}
height={height}
key={image.get('preview_url')}
alt={image.get('description')}
onClick={this.toggleNavigation}
/>
);
} }
return null; return null;
}).toArray(); }).toArray();
// you can't use 100vh, because the viewport height is taller
// than the visible part of the document in some mobile
// browsers when it's address bar is visible.
// https://developers.google.com/web/updates/2016/12/url-bar-resizing
const swipeableViewsStyle = {
width: '100%',
height: '100%',
};
const containerStyle = { const containerStyle = {
alignItems: 'center', // center vertically alignItems: 'center', // center vertically
}; };
const navigationClassName = classNames('media-modal__navigation', {
'media-modal__navigation--hidden': navigationHidden,
});
return ( return (
<div className='modal-root__modal media-modal'> <div className='modal-root__modal media-modal'>
{leftNav} <div
className='media-modal__closer'
<div className='media-modal__content'> role='presentation'
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} /> onClick={onClose}
<ReactSwipeableViews containerStyle={containerStyle} onChangeIndex={this.handleSwipe} index={index}> >
<ReactSwipeableViews
style={swipeableViewsStyle}
containerStyle={containerStyle}
onChangeIndex={this.handleSwipe}
onSwitching={this.handleSwitching}
index={index}
>
{content} {content}
</ReactSwipeableViews> </ReactSwipeableViews>
</div> </div>
<ul className='media-modal__pagination'> <div className={navigationClassName}>
{pagination} <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
</ul> {leftNav}
{rightNav}
{rightNav} <ul className='media-modal__pagination'>
{pagination}
</ul>
</div>
</div> </div>
); );
} }

View file

@ -16,7 +16,7 @@ export default class VideoModal extends ImmutablePureComponent {
const { media, time, onClose } = this.props; const { media, time, onClose } = this.props;
return ( return (
<div className='modal-root__modal media-modal'> <div className='modal-root__modal video-modal'>
<div> <div>
<Video <Video
preview={media.get('preview_url')} preview={media.get('preview_url')}

View file

@ -0,0 +1,151 @@
import React from 'react';
import PropTypes from 'prop-types';
const MIN_SCALE = 1;
const MAX_SCALE = 4;
const getMidpoint = (p1, p2) => ({
x: (p1.clientX + p2.clientX) / 2,
y: (p1.clientY + p2.clientY) / 2,
});
const getDistance = (p1, p2) =>
Math.sqrt(Math.pow(p1.clientX - p2.clientX, 2) + Math.pow(p1.clientY - p2.clientY, 2));
const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
export default class ZoomableImage extends React.PureComponent {
static propTypes = {
alt: PropTypes.string,
src: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number,
onClick: PropTypes.func,
}
static defaultProps = {
alt: '',
width: null,
height: null,
};
state = {
scale: MIN_SCALE,
}
removers = [];
container = null;
image = null;
lastTouchEndTime = 0;
lastDistance = 0;
componentDidMount () {
let handler = this.handleTouchStart;
this.container.addEventListener('touchstart', handler);
this.removers.push(() => this.container.removeEventListener('touchstart', handler));
handler = this.handleTouchMove;
// on Chrome 56+, touch event listeners will default to passive
// https://www.chromestatus.com/features/5093566007214080
this.container.addEventListener('touchmove', handler, { passive: false });
this.removers.push(() => this.container.removeEventListener('touchend', handler));
}
componentWillUnmount () {
this.removeEventListeners();
}
removeEventListeners () {
this.removers.forEach(listeners => listeners());
this.removers = [];
}
handleTouchStart = e => {
if (e.touches.length !== 2) return;
this.lastDistance = getDistance(...e.touches);
}
handleTouchMove = e => {
const { scrollTop, scrollHeight, clientHeight } = this.container;
if (e.touches.length === 1 && scrollTop !== scrollHeight - clientHeight) {
// prevent propagating event to MediaModal
e.stopPropagation();
return;
}
if (e.touches.length !== 2) return;
e.preventDefault();
e.stopPropagation();
const distance = getDistance(...e.touches);
const midpoint = getMidpoint(...e.touches);
const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance);
this.zoom(scale, midpoint);
this.lastMidpoint = midpoint;
this.lastDistance = distance;
}
zoom(nextScale, midpoint) {
const { scale } = this.state;
const { scrollLeft, scrollTop } = this.container;
// math memo:
// x = (scrollLeft + midpoint.x) / scrollWidth
// x' = (nextScrollLeft + midpoint.x) / nextScrollWidth
// scrollWidth = clientWidth * scale
// scrollWidth' = clientWidth * nextScale
// Solve x = x' for nextScrollLeft
const nextScrollLeft = (scrollLeft + midpoint.x) * nextScale / scale - midpoint.x;
const nextScrollTop = (scrollTop + midpoint.y) * nextScale / scale - midpoint.y;
this.setState({ scale: nextScale }, () => {
this.container.scrollLeft = nextScrollLeft;
this.container.scrollTop = nextScrollTop;
});
}
handleClick = e => {
// don't propagate event to MediaModal
e.stopPropagation();
const handler = this.props.onClick;
if (handler) handler();
}
setContainerRef = c => {
this.container = c;
}
setImageRef = c => {
this.image = c;
}
render () {
const { alt, src } = this.props;
const { scale } = this.state;
const overflow = scale === 1 ? 'hidden' : 'scroll';
return (
<div
className='zoomable-image'
ref={this.setContainerRef}
style={{ overflow }}
>
<img
role='presentation'
ref={this.setImageRef}
alt={alt}
src={src}
style={{
transform: `scale(${scale})`,
transformOrigin: '0 0',
}}
onClick={this.handleClick}
/>
</div>
);
}
}

View file

@ -353,35 +353,42 @@
.image-loader { .image-loader {
position: relative; position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
&.image-loader--loading { .image-loader__preview-canvas {
.image-loader__preview-canvas { max-width: $media-modal-media-max-width;
filter: blur(2px); max-height: $media-modal-media-max-height;
} background: url('~images/void.png') repeat;
object-fit: contain;
} }
.image-loader__img { &.image-loader--loading .image-loader__preview-canvas {
position: absolute; filter: blur(2px);
top: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
background-image: none;
} }
&.image-loader--amorphous { &.image-loader--amorphous .image-loader__preview-canvas {
position: static; display: none;
}
}
.image-loader__preview-canvas { .zoomable-image {
display: none; position: relative;
} width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.image-loader__img { img {
position: static; max-width: $media-modal-media-max-width;
width: auto; max-height: $media-modal-media-max-height;
height: auto; width: auto;
} height: auto;
object-fit: contain;
} }
} }

View file

@ -157,43 +157,85 @@
position: absolute; position: absolute;
} }
.media-modal { .video-modal {
max-width: 80vw; max-width: 100vw;
max-height: 80vh; max-height: 100vh;
position: relative; position: relative;
.extended-video-player, .extended-video-player {
img, width: 100%;
canvas, height: 100%;
video {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
margin: auto;
}
.extended-video-player,
video {
display: flex; display: flex;
width: 80vw; align-items: center;
height: 80vh; justify-content: center;
}
img, video {
canvas { max-width: $media-modal-media-max-width;
display: block; max-height: $media-modal-media-max-height;
background: url('~images/void.png') repeat; }
object-fit: contain;
}
.react-swipeable-view-container {
max-width: 80vw;
} }
} }
.media-modal__content { .media-modal {
background: $base-overlay-background; width: 100%;
height: 100%;
position: relative;
}
.media-modal__closer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.media-modal__navigation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
transition: opacity 0.3s linear;
will-change: opacity;
* {
pointer-events: auto;
}
&.media-modal__navigation--hidden {
opacity: 0;
* {
pointer-events: none;
}
}
}
.media-modal__nav {
background: rgba($base-overlay-background, 0.5);
box-sizing: border-box;
border: 0;
color: $primary-text-color;
cursor: pointer;
display: flex;
align-items: center;
font-size: 24px;
height: 20vmax;
margin: auto 0;
padding: 30px 15px;
position: absolute;
top: 0;
bottom: 0;
}
.media-modal__nav--left {
left: 0;
}
.media-modal__nav--right {
right: 0;
} }
.media-modal__pagination { .media-modal__pagination {
@ -201,7 +243,8 @@
text-align: center; text-align: center;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: -40px; bottom: 20px;
pointer-events: none;
} }
.media-modal__page-dot { .media-modal__page-dot {
@ -225,8 +268,8 @@
.media-modal__close { .media-modal__close {
position: absolute; position: absolute;
right: 4px; right: 8px;
top: 4px; top: 8px;
z-index: 100; z-index: 100;
} }
@ -244,8 +287,8 @@
@include fullwidth-gallery; @include fullwidth-gallery;
video { video {
height: 100%; max-width: 100vw;
width: 100%; max-height: 80vh;
z-index: 1; z-index: 1;
object-fit: cover; object-fit: cover;
position: relative; position: relative;

View file

@ -2,29 +2,6 @@
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
} }
.modal-container__nav {
align-items: center;
background: rgba($base-overlay-background, 0.5);
box-sizing: border-box;
border: 0;
color: $primary-text-color;
cursor: pointer;
display: flex;
font-size: 24px;
height: 100%;
padding: 30px 15px;
position: absolute;
top: 0;
}
.modal-container__nav--left {
left: -61px;
}
.modal-container__nav--right {
right: -61px;
}
.modal-root { .modal-root {
transition: opacity 0.3s linear; transition: opacity 0.3s linear;
will-change: opacity; will-change: opacity;

View file

@ -31,6 +31,11 @@ $ui-highlight-color: $classic-highlight-color !default; // Vibrant
// Language codes that uses CJK fonts // Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
// Avatar border size (8% default, 100% for rounded avatars) // Avatar border size (8% default, 100% for rounded avatars)
$ui-avatar-border-size: 8%; $ui-avatar-border-size: 8%;