[Glitch] Fix audio and video items in account gallery in web UI
Port 6cc5b822f5
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
parent
3f60b096b5
commit
dad3132046
5 changed files with 77 additions and 46 deletions
|
@ -63,71 +63,79 @@ export default class MediaItem extends ImmutablePureComponent {
|
||||||
const status = attachment.get('status');
|
const status = attachment.get('status');
|
||||||
const title = status.get('spoiler_text') || attachment.get('description');
|
const title = status.get('spoiler_text') || attachment.get('description');
|
||||||
|
|
||||||
let thumbnail = '';
|
let thumbnail, label, icon, content;
|
||||||
|
|
||||||
if (attachment.get('type') === 'unknown') {
|
if (!visible) {
|
||||||
// Skip
|
icon = (
|
||||||
} else if (attachment.get('type') === 'audio') {
|
|
||||||
thumbnail = (
|
|
||||||
<span className='account-gallery__item__icons'>
|
<span className='account-gallery__item__icons'>
|
||||||
<Icon id='music' />
|
<Icon id='eye-slash' />
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
if (['audio', 'video'].includes(attachment.get('type'))) {
|
||||||
|
content = (
|
||||||
|
<img
|
||||||
|
src={attachment.get('preview_url') || attachment.getIn(['account', 'avatar_static'])}
|
||||||
|
alt={attachment.get('description')}
|
||||||
|
onLoad={this.handleImageLoad}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (attachment.get('type') === 'audio') {
|
||||||
|
label = <Icon id='music' />;
|
||||||
|
} else {
|
||||||
|
label = <Icon id='play' />;
|
||||||
|
}
|
||||||
} else if (attachment.get('type') === 'image') {
|
} else if (attachment.get('type') === 'image') {
|
||||||
const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
|
const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
|
||||||
const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
|
const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
|
||||||
const x = ((focusX / 2) + .5) * 100;
|
const x = ((focusX / 2) + .5) * 100;
|
||||||
const y = ((focusY / -2) + .5) * 100;
|
const y = ((focusY / -2) + .5) * 100;
|
||||||
|
|
||||||
thumbnail = (
|
content = (
|
||||||
<img
|
<img
|
||||||
src={attachment.get('preview_url')}
|
src={attachment.get('preview_url')}
|
||||||
alt={attachment.get('description')}
|
alt={attachment.get('description')}
|
||||||
title={attachment.get('description')}
|
|
||||||
style={{ objectPosition: `${x}% ${y}%` }}
|
style={{ objectPosition: `${x}% ${y}%` }}
|
||||||
onLoad={this.handleImageLoad}
|
onLoad={this.handleImageLoad}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else if (['gifv', 'video'].indexOf(attachment.get('type')) !== -1) {
|
} else if (attachment.get('type') === 'gifv') {
|
||||||
const autoPlay = !isIOS() && autoPlayGif;
|
content = (
|
||||||
const label = attachment.get('type') === 'video' ? <Icon id='play' /> : 'GIF';
|
|
||||||
|
|
||||||
thumbnail = (
|
|
||||||
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
|
|
||||||
<video
|
<video
|
||||||
className='media-gallery__item-gifv-thumbnail'
|
className='media-gallery__item-gifv-thumbnail'
|
||||||
aria-label={attachment.get('description')}
|
aria-label={attachment.get('description')}
|
||||||
title={attachment.get('description')}
|
|
||||||
role='application'
|
role='application'
|
||||||
src={attachment.get('url')}
|
src={attachment.get('url')}
|
||||||
onMouseEnter={this.handleMouseEnter}
|
onMouseEnter={this.handleMouseEnter}
|
||||||
onMouseLeave={this.handleMouseLeave}
|
onMouseLeave={this.handleMouseLeave}
|
||||||
autoPlay={autoPlay}
|
autoPlay={!isIOS() && autoPlayGif}
|
||||||
loop
|
loop
|
||||||
muted
|
muted
|
||||||
/>
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
label = 'GIF';
|
||||||
|
}
|
||||||
|
|
||||||
|
thumbnail = (
|
||||||
|
<div className='media-gallery__gifv'>
|
||||||
|
{content}
|
||||||
|
|
||||||
<span className='media-gallery__gifv__label'>{label}</span>
|
<span className='media-gallery__gifv__label'>{label}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const icon = (
|
|
||||||
<span className='account-gallery__item__icons'>
|
|
||||||
<Icon id='eye-slash' />
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='account-gallery__item' style={{ width, height }}>
|
<div className='account-gallery__item' style={{ width, height }}>
|
||||||
<a className='media-gallery__item-thumbnail' href={status.get('url')} onClick={this.handleClick} title={title} target='_blank' rel='noopener noreferrer'>
|
<a className='media-gallery__item-thumbnail' href={status.get('url')} onClick={this.handleClick} title={title} target='_blank' rel='noopener noreferrer'>
|
||||||
<Blurhash
|
<Blurhash
|
||||||
hash={attachment.get('blurhash')}
|
hash={attachment.get('blurhash')}
|
||||||
className={classNames('media-gallery__preview', {
|
className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && loaded })}
|
||||||
'media-gallery__preview--hidden': visible && loaded,
|
|
||||||
})}
|
|
||||||
dummy={!useBlurhash}
|
dummy={!useBlurhash}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{visible ? thumbnail : icon}
|
{visible ? thumbnail : icon}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -113,9 +113,9 @@ class AccountGallery extends ImmutablePureComponent {
|
||||||
|
|
||||||
handleOpenMedia = attachment => {
|
handleOpenMedia = attachment => {
|
||||||
if (attachment.get('type') === 'video') {
|
if (attachment.get('type') === 'video') {
|
||||||
this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
|
this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status'), options: { autoPlay: true } }));
|
||||||
} else if (attachment.get('type') === 'audio') {
|
} else if (attachment.get('type') === 'audio') {
|
||||||
this.props.dispatch(openModal('AUDIO', { media: attachment, status: attachment.get('status') }));
|
this.props.dispatch(openModal('AUDIO', { media: attachment, status: attachment.get('status'), options: { autoPlay: true } }));
|
||||||
} else {
|
} else {
|
||||||
const media = attachment.getIn(['status', 'media_attachments']);
|
const media = attachment.getIn(['status', 'media_attachments']);
|
||||||
const index = media.findIndex(x => x.get('id') === attachment.get('id'));
|
const index = media.findIndex(x => x.get('id') === attachment.get('id'));
|
||||||
|
|
|
@ -37,6 +37,7 @@ class Audio extends React.PureComponent {
|
||||||
backgroundColor: PropTypes.string,
|
backgroundColor: PropTypes.string,
|
||||||
foregroundColor: PropTypes.string,
|
foregroundColor: PropTypes.string,
|
||||||
accentColor: PropTypes.string,
|
accentColor: PropTypes.string,
|
||||||
|
autoPlay: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -244,6 +245,14 @@ class Audio extends React.PureComponent {
|
||||||
this.setState({ hovered: false });
|
this.setState({ hovered: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleLoadedData = () => {
|
||||||
|
const { autoPlay } = this.props;
|
||||||
|
|
||||||
|
if (autoPlay) {
|
||||||
|
this.audio.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
_initAudioContext () {
|
_initAudioContext () {
|
||||||
const context = new AudioContext();
|
const context = new AudioContext();
|
||||||
const source = context.createMediaElementSource(this.audio);
|
const source = context.createMediaElementSource(this.audio);
|
||||||
|
@ -321,7 +330,7 @@ class Audio extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { src, intl, alt, editable } = this.props;
|
const { src, intl, alt, editable, autoPlay } = this.props;
|
||||||
const { paused, muted, volume, currentTime, duration, buffer, dragging } = this.state;
|
const { paused, muted, volume, currentTime, duration, buffer, dragging } = this.state;
|
||||||
const progress = (currentTime / duration) * 100;
|
const progress = (currentTime / duration) * 100;
|
||||||
|
|
||||||
|
@ -330,10 +339,11 @@ class Audio extends React.PureComponent {
|
||||||
<audio
|
<audio
|
||||||
src={src}
|
src={src}
|
||||||
ref={this.setAudioRef}
|
ref={this.setAudioRef}
|
||||||
preload='none'
|
preload={autoPlay ? 'auto' : 'none'}
|
||||||
onPlay={this.handlePlay}
|
onPlay={this.handlePlay}
|
||||||
onPause={this.handlePause}
|
onPause={this.handlePause}
|
||||||
onProgress={this.handleProgress}
|
onProgress={this.handleProgress}
|
||||||
|
onLoadedData={this.handleLoadedData}
|
||||||
crossOrigin='anonymous'
|
crossOrigin='anonymous'
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -2,16 +2,26 @@ import React from 'react';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Audio from 'flavours/glitch/features/audio';
|
import Audio from 'flavours/glitch/features/audio';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import Icon from 'flavours/glitch/components/icon';
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
|
|
||||||
export default class AudioModal extends ImmutablePureComponent {
|
const mapStateToProps = (state, { status }) => ({
|
||||||
|
account: state.getIn(['accounts', status.get('account')]),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
class AudioModal extends ImmutablePureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
media: ImmutablePropTypes.map.isRequired,
|
media: ImmutablePropTypes.map.isRequired,
|
||||||
status: ImmutablePropTypes.map,
|
status: ImmutablePropTypes.map,
|
||||||
|
options: PropTypes.shape({
|
||||||
|
autoPlay: PropTypes.bool,
|
||||||
|
}),
|
||||||
|
account: ImmutablePropTypes.map,
|
||||||
onClose: PropTypes.func.isRequired,
|
onClose: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -27,7 +37,8 @@ export default class AudioModal extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { media, status } = this.props;
|
const { media, status, account } = this.props;
|
||||||
|
const options = this.props.options || {};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='modal-root__modal audio-modal'>
|
<div className='modal-root__modal audio-modal'>
|
||||||
|
@ -37,10 +48,11 @@ export default class AudioModal extends ImmutablePureComponent {
|
||||||
alt={media.get('description')}
|
alt={media.get('description')}
|
||||||
duration={media.getIn(['meta', 'original', 'duration'], 0)}
|
duration={media.getIn(['meta', 'original', 'duration'], 0)}
|
||||||
height={150}
|
height={150}
|
||||||
poster={media.get('preview_url') || status.getIn(['account', 'avatar_static'])}
|
poster={media.get('preview_url') || account.get('avatar_static')}
|
||||||
backgroundColor={media.getIn(['meta', 'colors', 'background'])}
|
backgroundColor={media.getIn(['meta', 'colors', 'background'])}
|
||||||
foregroundColor={media.getIn(['meta', 'colors', 'foreground'])}
|
foregroundColor={media.getIn(['meta', 'colors', 'foreground'])}
|
||||||
accentColor={media.getIn(['meta', 'colors', 'accent'])}
|
accentColor={media.getIn(['meta', 'colors', 'accent'])}
|
||||||
|
autoPlay={options.autoPlay}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -183,12 +183,13 @@ export const makeGetNotification = () => {
|
||||||
export const getAccountGallery = createSelector([
|
export const getAccountGallery = createSelector([
|
||||||
(state, id) => state.getIn(['timelines', `account:${id}:media`, 'items'], ImmutableList()),
|
(state, id) => state.getIn(['timelines', `account:${id}:media`, 'items'], ImmutableList()),
|
||||||
state => state.get('statuses'),
|
state => state.get('statuses'),
|
||||||
], (statusIds, statuses) => {
|
(state, id) => state.getIn(['accounts', id]),
|
||||||
|
], (statusIds, statuses, account) => {
|
||||||
let medias = ImmutableList();
|
let medias = ImmutableList();
|
||||||
|
|
||||||
statusIds.forEach(statusId => {
|
statusIds.forEach(statusId => {
|
||||||
const status = statuses.get(statusId);
|
const status = statuses.get(statusId);
|
||||||
medias = medias.concat(status.get('media_attachments').map(media => media.set('status', status)));
|
medias = medias.concat(status.get('media_attachments').map(media => media.set('status', status).set('account', account)));
|
||||||
});
|
});
|
||||||
|
|
||||||
return medias;
|
return medias;
|
||||||
|
|
Loading…
Reference in a new issue