moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use StillImage on media items and fix autoPlayGif on account gallery

This commit is contained in:
Bárbara de Castro Fernandes 2020-06-09 18:24:31 -03:00
parent 2da584b5ee
commit e19f350111
3 changed files with 41 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/soapbox/components/media_gallery.js
View File

@ -11,6 +11,7 @@ import { decode } from 'blurhash';
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
import { Map as ImmutableMap } from 'immutable';
import { getSettings } from 'soapbox/actions/settings';
import StillImage from 'soapbox/components/still_image';
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
@ -60,8 +61,7 @@ class Item extends React.PureComponent {
hoverToPlay() {
const { attachment, autoPlayGif } = this.props;
return !autoPlayGif &&
(attachment.get('type') === 'gifv' || attachment.getIn(['pleroma', 'mime_type']) === 'image/gif');
return !autoPlayGif && attachment.get('type') === 'gifv';
}
handleClick = (e) => {
@ -72,7 +72,7 @@ class Item extends React.PureComponent {
e.preventDefault();
} else {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
if (!this.canvas && this.hoverToPlay()) {
if (this.hoverToPlay()) {
e.target.pause();
e.target.currentTime = 0;
}
@ -112,23 +112,12 @@ class Item extends React.PureComponent {
this.canvas = c;
}
setImageRef = i => {
this.image = i;
}
handleImageLoad = () => {
this.setState({ loaded: true });
if (this.hoverToPlay()) {
const image = this.image;
const canvas = this.canvas;
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
canvas.getContext('2d').drawImage(image, 0, 0);
}
}
render() {
const { attachment, standalone, displayWidth, visible, dimensions, autoPlayGif } = this.props;
const { attachment, standalone, visible, dimensions, autoPlayGif } = this.props;
let width = 100;
let height = '100%';
@ -162,39 +151,17 @@ class Item extends React.PureComponent {
);
} else if (attachment.get('type') === 'image') {
const previewUrl = attachment.get('preview_url');
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
const originalUrl = attachment.get('url');
const originalWidth = attachment.getIn(['meta', 'original', 'width']);
const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number';
const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null;
const sizes = hasSize && (displayWidth > 0) ? `${displayWidth * (width / 100)}px` : null;
const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
const x = ((focusX / 2) + .5) * 100;
const y = ((focusY / -2) + .5) * 100;
thumbnail = (
<a
className={classNames('media-gallery__item-thumbnail', { 'media-gallery__item-thumbnail--play-on-hover': this.hoverToPlay() })}
className='media-gallery__item-thumbnail'
href={attachment.get('remote_url') || originalUrl}
onClick={this.handleClick}
target='_blank'
>
<img
src={previewUrl}
srcSet={srcSet}
sizes={sizes}
alt={attachment.get('description')}
title={attachment.get('description')}
style={{ objectPosition: `${x}% ${y}%` }}
onLoad={this.handleImageLoad}
ref={this.setImageRef}
/>
{this.hoverToPlay() && <canvas ref={this.setCanvasRef} style={{ objectPosition: `${x}% ${y}%` }} />}
<StillImage src={previewUrl} alt={attachment.get('description')} />
</a>
);
} else if (attachment.get('type') === 'gifv') {

5
app/soapbox/features/account_gallery/components/media_item.js
View File

@ -8,6 +8,7 @@ import classNames from 'classnames';
import { decode } from 'blurhash';
import { isIOS } from 'soapbox/is_mobile';
import { getSettings } from 'soapbox/actions/settings';
import StillImage from 'soapbox/components/still_image';
const mapStateToProps = state => ({
autoPlayGif: getSettings(state).get('autoPlayGif'),
@ -113,12 +114,10 @@ class MediaItem extends ImmutablePureComponent {
const y = ((focusY / -2) + .5) * 100;
thumbnail = (
<img
<StillImage
src={attachment.get('preview_url')}
alt={attachment.get('description')}
title={attachment.get('description')}
style={{ objectPosition: `${x}% ${y}%` }}
onLoad={this.handleImageLoad}
/>
);
} else if (['gifv', 'video'].indexOf(attachment.get('type')) !== -1) {

70
app/styles/components/media-gallery.scss
View File

@ -28,47 +28,26 @@
z-index: 1;
&,
img,
canvas {
.still-image {
height: 100%;
width: 100%;
}
img,
canvas {
object-fit: cover;
}
&--play-on-hover {
&::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
bottom: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
}
img {
position: absolute;
}
img,
&:hover::before {
visibility: hidden;
}
&:hover img {
visibility: visible;
}
.still-image--play-on-hover::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
bottom: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
}
}
@ -82,6 +61,23 @@
z-index: 0;
background: var(--background-color);
.still-image--play-on-hover::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
bottom: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
}
&--hidden {
display: none;
}