-
-
+
+
@@ -460,12 +460,14 @@ class Audio extends React.PureComponent {
{formatTime(Math.floor(currentTime))}
/
- {formatTime(this.state.duration || Math.floor(this.props.duration))}
+ {formatTime(Math.floor(this.state.duration || this.props.duration))}
-
+
+
-
);
diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.js b/app/javascript/flavours/glitch/features/ui/components/boost_modal.js
index 8092e862f3..12ad426c84 100644
--- a/app/javascript/flavours/glitch/features/ui/components/boost_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/boost_modal.js
@@ -78,9 +78,10 @@ class BoostModal extends ImmutablePureComponent {
-
-
diff --git a/app/javascript/flavours/glitch/features/ui/components/image_loader.js b/app/javascript/flavours/glitch/features/ui/components/image_loader.js
index 5e1cf75af7..c6f16a7923 100644
--- a/app/javascript/flavours/glitch/features/ui/components/image_loader.js
+++ b/app/javascript/flavours/glitch/features/ui/components/image_loader.js
@@ -13,6 +13,7 @@ export default class ImageLoader extends React.PureComponent {
width: PropTypes.number,
height: PropTypes.number,
onClick: PropTypes.func,
+ zoomButtonHidden: PropTypes.bool,
}
static defaultProps = {
@@ -151,6 +152,9 @@ export default class ImageLoader extends React.PureComponent {
alt={alt}
src={src}
onClick={onClick}
+ width={width}
+ height={height}
+ zoomButtonHidden={this.props.zoomButtonHidden}
/>
)}
diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.js b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
index aa6554107e..e37df72083 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
@@ -35,23 +35,39 @@ class MediaModal extends ImmutablePureComponent {
state = {
index: null,
navigationHidden: false,
+ zoomButtonHidden: false,
};
handleSwipe = (index) => {
this.setState({ index: index % this.props.media.size });
}
+ handleTransitionEnd = () => {
+ this.setState({
+ zoomButtonHidden: false,
+ });
+ }
+
handleNextClick = () => {
- this.setState({ index: (this.getIndex() + 1) % this.props.media.size });
+ this.setState({
+ index: (this.getIndex() + 1) % this.props.media.size,
+ zoomButtonHidden: true,
+ });
}
handlePrevClick = () => {
- this.setState({ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size });
+ this.setState({
+ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size,
+ zoomButtonHidden: true,
+ });
}
handleChangeIndex = (e) => {
const index = Number(e.currentTarget.getAttribute('data-index'));
- this.setState({ index: index % this.props.media.size });
+ this.setState({
+ index: index % this.props.media.size,
+ zoomButtonHidden: true,
+ });
}
handleKeyDown = (e) => {
@@ -128,6 +144,7 @@ class MediaModal extends ImmutablePureComponent {
alt={image.get('description')}
key={image.get('url')}
onClick={this.toggleNavigation}
+ zoomButtonHidden={this.state.zoomButtonHidden}
/>
);
} else if (image.get('type') === 'video') {
@@ -191,6 +208,7 @@ class MediaModal extends ImmutablePureComponent {
style={swipeableViewsStyle}
containerStyle={containerStyle}
onChangeIndex={this.handleSwipe}
+ onTransitionEnd={this.handleTransitionEnd}
index={index}
>
{content}
diff --git a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js
index 3f6562bc99..2efc708906 100644
--- a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js
+++ b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js
@@ -1,8 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
+import IconButton from 'flavours/glitch/components/icon_button';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+ compress: { id: 'lightbox.compress', defaultMessage: 'Compress image view box' },
+ expand: { id: 'lightbox.expand', defaultMessage: 'Expand image view box' },
+});
const MIN_SCALE = 1;
const MAX_SCALE = 4;
+const NAV_BAR_HEIGHT = 66;
const getMidpoint = (p1, p2) => ({
x: (p1.clientX + p2.clientX) / 2,
@@ -14,7 +22,77 @@ const getDistance = (p1, p2) =>
const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
-export default class ZoomableImage extends React.PureComponent {
+// Normalizing mousewheel speed across browsers
+// copy from: https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
+const normalizeWheel = event => {
+ // Reasonable defaults
+ const PIXEL_STEP = 10;
+ const LINE_HEIGHT = 40;
+ const PAGE_HEIGHT = 800;
+
+ let sX = 0,
+ sY = 0, // spinX, spinY
+ pX = 0,
+ pY = 0; // pixelX, pixelY
+
+ // Legacy
+ if ('detail' in event) {
+ sY = event.detail;
+ }
+ if ('wheelDelta' in event) {
+ sY = -event.wheelDelta / 120;
+ }
+ if ('wheelDeltaY' in event) {
+ sY = -event.wheelDeltaY / 120;
+ }
+ if ('wheelDeltaX' in event) {
+ sX = -event.wheelDeltaX / 120;
+ }
+
+ // side scrolling on FF with DOMMouseScroll
+ if ('axis' in event && event.axis === event.HORIZONTAL_AXIS) {
+ sX = sY;
+ sY = 0;
+ }
+
+ pX = sX * PIXEL_STEP;
+ pY = sY * PIXEL_STEP;
+
+ if ('deltaY' in event) {
+ pY = event.deltaY;
+ }
+ if ('deltaX' in event) {
+ pX = event.deltaX;
+ }
+
+ if ((pX || pY) && event.deltaMode) {
+ if (event.deltaMode === 1) { // delta in LINE units
+ pX *= LINE_HEIGHT;
+ pY *= LINE_HEIGHT;
+ } else { // delta in PAGE units
+ pX *= PAGE_HEIGHT;
+ pY *= PAGE_HEIGHT;
+ }
+ }
+
+ // Fall-back if spin cannot be determined
+ if (pX && !sX) {
+ sX = (pX < 1) ? -1 : 1;
+ }
+ if (pY && !sY) {
+ sY = (pY < 1) ? -1 : 1;
+ }
+
+ return {
+ spinX: sX,
+ spinY: sY,
+ pixelX: pX,
+ pixelY: pY,
+ };
+};
+
+export default @injectIntl
+class ZoomableImage extends React.PureComponent {
static propTypes = {
alt: PropTypes.string,
@@ -22,6 +100,8 @@ export default class ZoomableImage extends React.PureComponent {
width: PropTypes.number,
height: PropTypes.number,
onClick: PropTypes.func,
+ zoomButtonHidden: PropTypes.bool,
+ intl: PropTypes.object.isRequired,
}
static defaultProps = {
@@ -32,6 +112,22 @@ export default class ZoomableImage extends React.PureComponent {
state = {
scale: MIN_SCALE,
+ zoomMatrix: {
+ type: null, // 'full-width' 'full-height'
+ rate: null, // full screen scale rate
+ clientWidth: null,
+ clientHeight: null,
+ offsetWidth: null,
+ offsetHeight: null,
+ clientHeightFixed: null,
+ scrollTop: null,
+ scrollLeft: null,
+ },
+ zoomState: 'expand', // 'expand' 'compress'
+ navigationHidden: false,
+ dragPosition: { top: 0, left: 0, x: 0, y: 0 },
+ dragged: false,
+ lockScroll: { x: 0, y: 0 },
}
removers = [];
@@ -49,17 +145,99 @@ export default class ZoomableImage extends React.PureComponent {
// https://www.chromestatus.com/features/5093566007214080
this.container.addEventListener('touchmove', handler, { passive: false });
this.removers.push(() => this.container.removeEventListener('touchend', handler));
+
+ handler = this.mouseDownHandler;
+ this.container.addEventListener('mousedown', handler);
+ this.removers.push(() => this.container.removeEventListener('mousedown', handler));
+
+ handler = this.mouseWheelHandler;
+ this.container.addEventListener('wheel', handler);
+ this.removers.push(() => this.container.removeEventListener('wheel', handler));
+ // Old Chrome
+ this.container.addEventListener('mousewheel', handler);
+ this.removers.push(() => this.container.removeEventListener('mousewheel', handler));
+ // Old Firefox
+ this.container.addEventListener('DOMMouseScroll', handler);
+ this.removers.push(() => this.container.removeEventListener('DOMMouseScroll', handler));
+
+ this.initZoomMatrix();
}
componentWillUnmount () {
this.removeEventListeners();
}
+ componentDidUpdate () {
+ if (this.props.zoomButtonHidden) {
+ this.setState({ scale: MIN_SCALE }, () => {
+ this.container.scrollLeft = 0;
+ this.container.scrollTop = 0;
+ });
+ }
+
+ this.setState({ zoomState: this.state.scale >= this.state.zoomMatrix.rate ? 'compress' : 'expand' });
+
+ if (this.state.scale === 1) {
+ this.container.style.removeProperty('cursor');
+ }
+ }
+
removeEventListeners () {
this.removers.forEach(listeners => listeners());
this.removers = [];
}
+ mouseWheelHandler = e => {
+ e.preventDefault();
+
+ const event = normalizeWheel(e);
+
+ if (this.state.zoomMatrix.type === 'full-width') {
+ // full width, scroll vertical
+ this.container.scrollTop = Math.max(this.container.scrollTop + event.pixelY, this.state.lockScroll.y);
+ } else {
+ // full height, scroll horizontal
+ this.container.scrollLeft = Math.max(this.container.scrollLeft + event.pixelY, this.state.lockScroll.x);
+ }
+
+ // lock horizontal scroll
+ this.container.scrollLeft = Math.max(this.container.scrollLeft + event.pixelX, this.state.lockScroll.x);
+ }
+
+ mouseDownHandler = e => {
+ this.container.style.cursor = 'grabbing';
+ this.container.style.userSelect = 'none';
+
+ this.setState({ dragPosition: {
+ left: this.container.scrollLeft,
+ top: this.container.scrollTop,
+ // Get the current mouse position
+ x: e.clientX,
+ y: e.clientY,
+ } });
+
+ this.image.addEventListener('mousemove', this.mouseMoveHandler);
+ this.image.addEventListener('mouseup', this.mouseUpHandler);
+ }
+
+ mouseMoveHandler = e => {
+ const dx = e.clientX - this.state.dragPosition.x;
+ const dy = e.clientY - this.state.dragPosition.y;
+
+ this.container.scrollLeft = Math.max(this.state.dragPosition.left - dx, this.state.lockScroll.x);
+ this.container.scrollTop = Math.max(this.state.dragPosition.top - dy, this.state.lockScroll.y);
+
+ this.setState({ dragged: true });
+ }
+
+ mouseUpHandler = () => {
+ this.container.style.cursor = 'grab';
+ this.container.style.removeProperty('user-select');
+
+ this.image.removeEventListener('mousemove', this.mouseMoveHandler);
+ this.image.removeEventListener('mouseup', this.mouseUpHandler);
+ }
+
handleTouchStart = e => {
if (e.touches.length !== 2) return;
@@ -80,7 +258,8 @@ export default class ZoomableImage extends React.PureComponent {
const distance = getDistance(...e.touches);
const midpoint = getMidpoint(...e.touches);
- const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance);
+ const _MAX_SCALE = Math.max(MAX_SCALE, this.state.zoomMatrix.rate);
+ const scale = clamp(MIN_SCALE, _MAX_SCALE, this.state.scale * distance / this.lastDistance);
this.zoom(scale, midpoint);
@@ -110,8 +289,76 @@ export default class ZoomableImage extends React.PureComponent {
handleClick = e => {
// don't propagate event to MediaModal
e.stopPropagation();
+ const dragged = this.state.dragged;
+ this.setState({ dragged: false });
+ if (dragged) return;
const handler = this.props.onClick;
if (handler) handler();
+ this.setState({ navigationHidden: !this.state.navigationHidden });
+ }
+
+ handleMouseDown = e => {
+ e.preventDefault();
+ }
+
+ initZoomMatrix = () => {
+ const { width, height } = this.props;
+ const { clientWidth, clientHeight } = this.container;
+ const { offsetWidth, offsetHeight } = this.image;
+ const clientHeightFixed = clientHeight - NAV_BAR_HEIGHT;
+
+ const type = width/height < clientWidth / clientHeightFixed ? 'full-width' : 'full-height';
+ const rate = type === 'full-width' ? clientWidth / offsetWidth : clientHeightFixed / offsetHeight;
+ const scrollTop = type === 'full-width' ? (clientHeight - offsetHeight) / 2 - NAV_BAR_HEIGHT : (clientHeightFixed - offsetHeight) / 2;
+ const scrollLeft = (clientWidth - offsetWidth) / 2;
+
+ this.setState({
+ zoomMatrix: {
+ type: type,
+ rate: rate,
+ clientWidth: clientWidth,
+ clientHeight: clientHeight,
+ offsetWidth: offsetWidth,
+ offsetHeight: offsetHeight,
+ clientHeightFixed: clientHeightFixed,
+ scrollTop: scrollTop,
+ scrollLeft: scrollLeft,
+ },
+ });
+ }
+
+ handleZoomClick = e => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const { scale, zoomMatrix } = this.state;
+
+ if ( scale >= zoomMatrix.rate ) {
+ this.setState({
+ scale: MIN_SCALE,
+ lockScroll: {
+ x: 0,
+ y: 0,
+ },
+ }, () => {
+ this.container.scrollLeft = 0;
+ this.container.scrollTop = 0;
+ });
+ } else {
+ this.setState({
+ scale: zoomMatrix.rate,
+ lockScroll: {
+ x: zoomMatrix.scrollLeft,
+ y: zoomMatrix.scrollTop,
+ },
+ }, () => {
+ this.container.scrollLeft = zoomMatrix.scrollLeft;
+ this.container.scrollTop = zoomMatrix.scrollTop;
+ });
+ }
+
+ this.container.style.cursor = 'grab';
+ this.container.style.removeProperty('user-select');
}
setContainerRef = c => {
@@ -123,29 +370,47 @@ export default class ZoomableImage extends React.PureComponent {
}
render () {
- const { alt, src } = this.props;
+ const { alt, src, width, height, intl } = this.props;
const { scale } = this.state;
const overflow = scale === 1 ? 'hidden' : 'scroll';
+ const zoomButtonSshouldHide = !this.state.navigationHidden && !this.props.zoomButtonHidden ? '' : 'media-modal__zoom-button--hidden';
+ const zoomButtonTitle = this.state.zoomState === 'compress' ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand);
return (
-
- 
+
+
+
+
+
);
}
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js
index 95bee1331c..d22bc1d56a 100644
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@@ -211,7 +211,7 @@ class Video extends React.PureComponent {
handleTimeUpdate = () => {
this.setState({
currentTime: this.video.currentTime,
- duration: Math.floor(this.video.duration),
+ duration:this.video.duration,
});
}
@@ -551,8 +551,8 @@ class Video extends React.PureComponent {
-
-
+
+
@@ -568,7 +568,7 @@ class Video extends React.PureComponent {
{formatTime(Math.floor(currentTime))}
/
- {formatTime(duration)}
+ {formatTime(Math.floor(duration))}
)}
@@ -576,10 +576,10 @@ class Video extends React.PureComponent {
- {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && }
- {(!fullscreen && onOpenVideo) && }
- {onCloseVideo && }
-
+ {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && }
+ {(!fullscreen && onOpenVideo) && }
+ {onCloseVideo && }
+
-
diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.js b/app/javascript/mastodon/features/account_gallery/components/media_item.js
index c9a7af7f77..ba7ec46a33 100644
--- a/app/javascript/mastodon/features/account_gallery/components/media_item.js
+++ b/app/javascript/mastodon/features/account_gallery/components/media_item.js
@@ -122,7 +122,7 @@ export default class MediaItem extends ImmutablePureComponent {
diff --git a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
index 7073f76c2e..1bcce57310 100644
--- a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
+++ b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
@@ -6,13 +6,20 @@ import { changeComposeSensitivity } from 'mastodon/actions/compose';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
const messages = defineMessages({
- marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
- unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' },
+ marked: {
+ id: 'compose_form.sensitive.marked',
+ defaultMessage: '{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}',
+ },
+ unmarked: {
+ id: 'compose_form.sensitive.unmarked',
+ defaultMessage: '{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}',
+ },
});
const mapStateToProps = state => ({
active: state.getIn(['compose', 'sensitive']),
disabled: state.getIn(['compose', 'spoiler']),
+ mediaCount: state.getIn(['compose', 'media_attachments']).size,
});
const mapDispatchToProps = dispatch => ({
@@ -28,16 +35,17 @@ class SensitiveButton extends React.PureComponent {
static propTypes = {
active: PropTypes.bool,
disabled: PropTypes.bool,
+ mediaCount: PropTypes.number,
onClick: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
render () {
- const { active, disabled, onClick, intl } = this.props;
+ const { active, disabled, mediaCount, onClick, intl } = this.props;
return (
{content}
- {label}
+ {label && {label}}
);
}
diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js
index 6954d2a4c1..434148e8e7 100644
--- a/app/javascript/mastodon/features/audio/index.js
+++ b/app/javascript/mastodon/features/audio/index.js
@@ -246,7 +246,7 @@ class Audio extends React.PureComponent {
handleTimeUpdate = () => {
this.setState({
currentTime: this.audio.currentTime,
- duration: Math.floor(this.audio.duration),
+ duration: this.audio.duration,
});
}
@@ -438,14 +438,14 @@ class Audio extends React.PureComponent {
-
-
+
+
@@ -454,12 +454,14 @@ class Audio extends React.PureComponent {
{formatTime(Math.floor(currentTime))}
/
- {formatTime(this.state.duration || Math.floor(this.props.duration))}
+ {formatTime(Math.floor(this.state.duration || this.props.duration))}
-
+
+
-
);
diff --git a/app/javascript/mastodon/features/getting_started/components/announcements.js b/app/javascript/mastodon/features/getting_started/components/announcements.js
index 4853c39352..d53bd8055c 100644
--- a/app/javascript/mastodon/features/getting_started/components/announcements.js
+++ b/app/javascript/mastodon/features/getting_started/components/announcements.js
@@ -437,7 +437,7 @@ class Announcements extends ImmutablePureComponent {
selected={index === idx}
disabled={disableSwiping}
/>
- ))}
+ )).reverse()}
{announcements.size > 1 && (
diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.js b/app/javascript/mastodon/features/ui/components/boost_modal.js
index 00c0481f3a..963bb5dc4b 100644
--- a/app/javascript/mastodon/features/ui/components/boost_modal.js
+++ b/app/javascript/mastodon/features/ui/components/boost_modal.js
@@ -75,9 +75,10 @@ class BoostModal extends ImmutablePureComponent {
-
-
diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js
index 5e1cf75af7..c6f16a7923 100644
--- a/app/javascript/mastodon/features/ui/components/image_loader.js
+++ b/app/javascript/mastodon/features/ui/components/image_loader.js
@@ -13,6 +13,7 @@ export default class ImageLoader extends React.PureComponent {
width: PropTypes.number,
height: PropTypes.number,
onClick: PropTypes.func,
+ zoomButtonHidden: PropTypes.bool,
}
static defaultProps = {
@@ -151,6 +152,9 @@ export default class ImageLoader extends React.PureComponent {
alt={alt}
src={src}
onClick={onClick}
+ width={width}
+ height={height}
+ zoomButtonHidden={this.props.zoomButtonHidden}
/>
)}
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js
index 54ec51fcfe..d18f26b4ed 100644
--- a/app/javascript/mastodon/features/ui/components/media_modal.js
+++ b/app/javascript/mastodon/features/ui/components/media_modal.js
@@ -38,23 +38,39 @@ class MediaModal extends ImmutablePureComponent {
state = {
index: null,
navigationHidden: false,
+ zoomButtonHidden: false,
};
handleSwipe = (index) => {
this.setState({ index: index % this.props.media.size });
}
+ handleTransitionEnd = () => {
+ this.setState({
+ zoomButtonHidden: false,
+ });
+ }
+
handleNextClick = () => {
- this.setState({ index: (this.getIndex() + 1) % this.props.media.size });
+ this.setState({
+ index: (this.getIndex() + 1) % this.props.media.size,
+ zoomButtonHidden: true,
+ });
}
handlePrevClick = () => {
- this.setState({ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size });
+ this.setState({
+ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size,
+ zoomButtonHidden: true,
+ });
}
handleChangeIndex = (e) => {
const index = Number(e.currentTarget.getAttribute('data-index'));
- this.setState({ index: index % this.props.media.size });
+ this.setState({
+ index: index % this.props.media.size,
+ zoomButtonHidden: true,
+ });
}
handleKeyDown = (e) => {
@@ -149,6 +165,7 @@ class MediaModal extends ImmutablePureComponent {
alt={image.get('description')}
key={image.get('url')}
onClick={this.toggleNavigation}
+ zoomButtonHidden={this.state.zoomButtonHidden}
/>
);
} else if (image.get('type') === 'video') {
@@ -212,6 +229,7 @@ class MediaModal extends ImmutablePureComponent {
style={swipeableViewsStyle}
containerStyle={containerStyle}
onChangeIndex={this.handleSwipe}
+ onTransitionEnd={this.handleTransitionEnd}
index={index}
disabled={disableSwiping}
>
diff --git a/app/javascript/mastodon/features/ui/components/zoomable_image.js b/app/javascript/mastodon/features/ui/components/zoomable_image.js
index 3f6562bc99..4021967270 100644
--- a/app/javascript/mastodon/features/ui/components/zoomable_image.js
+++ b/app/javascript/mastodon/features/ui/components/zoomable_image.js
@@ -1,8 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
+import IconButton from 'mastodon/components/icon_button';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+ compress: { id: 'lightbox.compress', defaultMessage: 'Compress image view box' },
+ expand: { id: 'lightbox.expand', defaultMessage: 'Expand image view box' },
+});
const MIN_SCALE = 1;
const MAX_SCALE = 4;
+const NAV_BAR_HEIGHT = 66;
const getMidpoint = (p1, p2) => ({
x: (p1.clientX + p2.clientX) / 2,
@@ -14,7 +22,77 @@ const getDistance = (p1, p2) =>
const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
-export default class ZoomableImage extends React.PureComponent {
+// Normalizing mousewheel speed across browsers
+// copy from: https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
+const normalizeWheel = event => {
+ // Reasonable defaults
+ const PIXEL_STEP = 10;
+ const LINE_HEIGHT = 40;
+ const PAGE_HEIGHT = 800;
+
+ let sX = 0,
+ sY = 0, // spinX, spinY
+ pX = 0,
+ pY = 0; // pixelX, pixelY
+
+ // Legacy
+ if ('detail' in event) {
+ sY = event.detail;
+ }
+ if ('wheelDelta' in event) {
+ sY = -event.wheelDelta / 120;
+ }
+ if ('wheelDeltaY' in event) {
+ sY = -event.wheelDeltaY / 120;
+ }
+ if ('wheelDeltaX' in event) {
+ sX = -event.wheelDeltaX / 120;
+ }
+
+ // side scrolling on FF with DOMMouseScroll
+ if ('axis' in event && event.axis === event.HORIZONTAL_AXIS) {
+ sX = sY;
+ sY = 0;
+ }
+
+ pX = sX * PIXEL_STEP;
+ pY = sY * PIXEL_STEP;
+
+ if ('deltaY' in event) {
+ pY = event.deltaY;
+ }
+ if ('deltaX' in event) {
+ pX = event.deltaX;
+ }
+
+ if ((pX || pY) && event.deltaMode) {
+ if (event.deltaMode === 1) { // delta in LINE units
+ pX *= LINE_HEIGHT;
+ pY *= LINE_HEIGHT;
+ } else { // delta in PAGE units
+ pX *= PAGE_HEIGHT;
+ pY *= PAGE_HEIGHT;
+ }
+ }
+
+ // Fall-back if spin cannot be determined
+ if (pX && !sX) {
+ sX = (pX < 1) ? -1 : 1;
+ }
+ if (pY && !sY) {
+ sY = (pY < 1) ? -1 : 1;
+ }
+
+ return {
+ spinX: sX,
+ spinY: sY,
+ pixelX: pX,
+ pixelY: pY,
+ };
+};
+
+export default @injectIntl
+class ZoomableImage extends React.PureComponent {
static propTypes = {
alt: PropTypes.string,
@@ -22,6 +100,8 @@ export default class ZoomableImage extends React.PureComponent {
width: PropTypes.number,
height: PropTypes.number,
onClick: PropTypes.func,
+ zoomButtonHidden: PropTypes.bool,
+ intl: PropTypes.object.isRequired,
}
static defaultProps = {
@@ -32,6 +112,22 @@ export default class ZoomableImage extends React.PureComponent {
state = {
scale: MIN_SCALE,
+ zoomMatrix: {
+ type: null, // 'full-width' 'full-height'
+ rate: null, // full screen scale rate
+ clientWidth: null,
+ clientHeight: null,
+ offsetWidth: null,
+ offsetHeight: null,
+ clientHeightFixed: null,
+ scrollTop: null,
+ scrollLeft: null,
+ },
+ zoomState: 'expand', // 'expand' 'compress'
+ navigationHidden: false,
+ dragPosition: { top: 0, left: 0, x: 0, y: 0 },
+ dragged: false,
+ lockScroll: { x: 0, y: 0 },
}
removers = [];
@@ -49,17 +145,99 @@ export default class ZoomableImage extends React.PureComponent {
// https://www.chromestatus.com/features/5093566007214080
this.container.addEventListener('touchmove', handler, { passive: false });
this.removers.push(() => this.container.removeEventListener('touchend', handler));
+
+ handler = this.mouseDownHandler;
+ this.container.addEventListener('mousedown', handler);
+ this.removers.push(() => this.container.removeEventListener('mousedown', handler));
+
+ handler = this.mouseWheelHandler;
+ this.container.addEventListener('wheel', handler);
+ this.removers.push(() => this.container.removeEventListener('wheel', handler));
+ // Old Chrome
+ this.container.addEventListener('mousewheel', handler);
+ this.removers.push(() => this.container.removeEventListener('mousewheel', handler));
+ // Old Firefox
+ this.container.addEventListener('DOMMouseScroll', handler);
+ this.removers.push(() => this.container.removeEventListener('DOMMouseScroll', handler));
+
+ this.initZoomMatrix();
}
componentWillUnmount () {
this.removeEventListeners();
}
+ componentDidUpdate () {
+ if (this.props.zoomButtonHidden) {
+ this.setState({ scale: MIN_SCALE }, () => {
+ this.container.scrollLeft = 0;
+ this.container.scrollTop = 0;
+ });
+ }
+
+ this.setState({ zoomState: this.state.scale >= this.state.zoomMatrix.rate ? 'compress' : 'expand' });
+
+ if (this.state.scale === 1) {
+ this.container.style.removeProperty('cursor');
+ }
+ }
+
removeEventListeners () {
this.removers.forEach(listeners => listeners());
this.removers = [];
}
+ mouseWheelHandler = e => {
+ e.preventDefault();
+
+ const event = normalizeWheel(e);
+
+ if (this.state.zoomMatrix.type === 'full-width') {
+ // full width, scroll vertical
+ this.container.scrollTop = Math.max(this.container.scrollTop + event.pixelY, this.state.lockScroll.y);
+ } else {
+ // full height, scroll horizontal
+ this.container.scrollLeft = Math.max(this.container.scrollLeft + event.pixelY, this.state.lockScroll.x);
+ }
+
+ // lock horizontal scroll
+ this.container.scrollLeft = Math.max(this.container.scrollLeft + event.pixelX, this.state.lockScroll.x);
+ }
+
+ mouseDownHandler = e => {
+ this.container.style.cursor = 'grabbing';
+ this.container.style.userSelect = 'none';
+
+ this.setState({ dragPosition: {
+ left: this.container.scrollLeft,
+ top: this.container.scrollTop,
+ // Get the current mouse position
+ x: e.clientX,
+ y: e.clientY,
+ } });
+
+ this.image.addEventListener('mousemove', this.mouseMoveHandler);
+ this.image.addEventListener('mouseup', this.mouseUpHandler);
+ }
+
+ mouseMoveHandler = e => {
+ const dx = e.clientX - this.state.dragPosition.x;
+ const dy = e.clientY - this.state.dragPosition.y;
+
+ this.container.scrollLeft = Math.max(this.state.dragPosition.left - dx, this.state.lockScroll.x);
+ this.container.scrollTop = Math.max(this.state.dragPosition.top - dy, this.state.lockScroll.y);
+
+ this.setState({ dragged: true });
+ }
+
+ mouseUpHandler = () => {
+ this.container.style.cursor = 'grab';
+ this.container.style.removeProperty('user-select');
+
+ this.image.removeEventListener('mousemove', this.mouseMoveHandler);
+ this.image.removeEventListener('mouseup', this.mouseUpHandler);
+ }
+
handleTouchStart = e => {
if (e.touches.length !== 2) return;
@@ -80,7 +258,8 @@ export default class ZoomableImage extends React.PureComponent {
const distance = getDistance(...e.touches);
const midpoint = getMidpoint(...e.touches);
- const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance);
+ const _MAX_SCALE = Math.max(MAX_SCALE, this.state.zoomMatrix.rate);
+ const scale = clamp(MIN_SCALE, _MAX_SCALE, this.state.scale * distance / this.lastDistance);
this.zoom(scale, midpoint);
@@ -110,8 +289,76 @@ export default class ZoomableImage extends React.PureComponent {
handleClick = e => {
// don't propagate event to MediaModal
e.stopPropagation();
+ const dragged = this.state.dragged;
+ this.setState({ dragged: false });
+ if (dragged) return;
const handler = this.props.onClick;
if (handler) handler();
+ this.setState({ navigationHidden: !this.state.navigationHidden });
+ }
+
+ handleMouseDown = e => {
+ e.preventDefault();
+ }
+
+ initZoomMatrix = () => {
+ const { width, height } = this.props;
+ const { clientWidth, clientHeight } = this.container;
+ const { offsetWidth, offsetHeight } = this.image;
+ const clientHeightFixed = clientHeight - NAV_BAR_HEIGHT;
+
+ const type = width/height < clientWidth / clientHeightFixed ? 'full-width' : 'full-height';
+ const rate = type === 'full-width' ? clientWidth / offsetWidth : clientHeightFixed / offsetHeight;
+ const scrollTop = type === 'full-width' ? (clientHeight - offsetHeight) / 2 - NAV_BAR_HEIGHT : (clientHeightFixed - offsetHeight) / 2;
+ const scrollLeft = (clientWidth - offsetWidth) / 2;
+
+ this.setState({
+ zoomMatrix: {
+ type: type,
+ rate: rate,
+ clientWidth: clientWidth,
+ clientHeight: clientHeight,
+ offsetWidth: offsetWidth,
+ offsetHeight: offsetHeight,
+ clientHeightFixed: clientHeightFixed,
+ scrollTop: scrollTop,
+ scrollLeft: scrollLeft,
+ },
+ });
+ }
+
+ handleZoomClick = e => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const { scale, zoomMatrix } = this.state;
+
+ if ( scale >= zoomMatrix.rate ) {
+ this.setState({
+ scale: MIN_SCALE,
+ lockScroll: {
+ x: 0,
+ y: 0,
+ },
+ }, () => {
+ this.container.scrollLeft = 0;
+ this.container.scrollTop = 0;
+ });
+ } else {
+ this.setState({
+ scale: zoomMatrix.rate,
+ lockScroll: {
+ x: zoomMatrix.scrollLeft,
+ y: zoomMatrix.scrollTop,
+ },
+ }, () => {
+ this.container.scrollLeft = zoomMatrix.scrollLeft;
+ this.container.scrollTop = zoomMatrix.scrollTop;
+ });
+ }
+
+ this.container.style.cursor = 'grab';
+ this.container.style.removeProperty('user-select');
}
setContainerRef = c => {
@@ -123,29 +370,47 @@ export default class ZoomableImage extends React.PureComponent {
}
render () {
- const { alt, src } = this.props;
+ const { alt, src, width, height, intl } = this.props;
const { scale } = this.state;
const overflow = scale === 1 ? 'hidden' : 'scroll';
+ const zoomButtonSshouldHide = !this.state.navigationHidden && !this.props.zoomButtonHidden ? '' : 'media-modal__zoom-button--hidden';
+ const zoomButtonTitle = this.state.zoomState === 'compress' ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand);
return (
-
-
+
+
+
+
+
);
}
diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js
index 54c3baf76e..229a921408 100644
--- a/app/javascript/mastodon/features/video/index.js
+++ b/app/javascript/mastodon/features/video/index.js
@@ -198,7 +198,7 @@ class Video extends React.PureComponent {
handleTimeUpdate = () => {
this.setState({
currentTime: this.video.currentTime,
- duration: Math.floor(this.video.duration),
+ duration:this.video.duration,
});
}
@@ -534,8 +534,8 @@ class Video extends React.PureComponent {
-
-
+
+
@@ -551,7 +551,7 @@ class Video extends React.PureComponent {
{formatTime(Math.floor(currentTime))}
/
- {formatTime(duration)}
+ {formatTime(Math.floor(duration))}
)}
@@ -559,10 +559,10 @@ class Video extends React.PureComponent {
- {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && }
- {(!fullscreen && onOpenVideo) && }
- {onCloseVideo && }
-
+ {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && }
+ {(!fullscreen && onOpenVideo) && }
+ {onCloseVideo && }
+