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

Audio: ingest attachment metadata

This commit is contained in:
Alex Gleason 2021-10-05 00:44:49 -05:00
parent 115d324e9b
commit 59e7c6538e
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 51 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/soapbox/components/status.js
View File

@ -414,21 +414,22 @@ class Status extends ImmutablePureComponent {
</Bundle> </Bundle>
); );
} else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) { } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
const audio = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
media = ( media = (
<Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} > <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
{Component => ( {Component => (
<Component <Component
src={audio.get('url')} src={attachment.get('url')}
alt={audio.get('description')} alt={attachment.get('description')}
poster={attachment.get('preview_url') !== attachment.get('url') ? attachment.get('preview_url') : status.getIn(['account', 'avatar_static'])}
backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
width={this.props.cachedMediaWidth} width={this.props.cachedMediaWidth}
height={263} height={263}
inline
sensitive={status.get('sensitive')}
cacheWidth={this.props.cacheMediaWidth} cacheWidth={this.props.cacheMediaWidth}
visible={this.state.showMedia}
onOpenAudio={this.handleOpenAudio}
/> />
)} )}
</Bundle> </Bundle>

10
app/soapbox/features/audio/index.js
View File

@ -467,13 +467,13 @@ class Audio extends React.PureComponent {
aria-label={alt} aria-label={alt}
/> />
<img {this.props.poster && <img
src={this.props.poster} src={this.props.poster}
alt='' alt=''
width={(this._getRadius() - TICK_SIZE) * 2 || null} width={(this._getRadius() - TICK_SIZE) * 2 || null}
height={(this._getRadius() - TICK_SIZE) * 2 || null} height={(this._getRadius() - TICK_SIZE) * 2 || null}
style={{ position: 'absolute', left: this._getCX(), top: this._getCY(), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }} style={{ position: 'absolute', left: this._getCX(), top: this._getCY(), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
/> />}
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}> <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
<div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} /> <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
@ -490,8 +490,8 @@ class Audio extends React.PureComponent {
<div className='video-player__controls active'> <div className='video-player__controls active'>
<div className='video-player__buttons-bar'> <div className='video-player__buttons-bar'>
<div className='video-player__buttons left'> <div className='video-player__buttons left'>
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button> <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/icons/player-play.svg') : require('@tabler/icons/icons/player-pause.svg')} /></button>
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button> <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/icons/volume-3.svg') : require('@tabler/icons/icons/volume.svg')} /></button>
<div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}> <div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
<div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} /> <div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@ -521,7 +521,7 @@ class Audio extends React.PureComponent {
download download
target='_blank' target='_blank'
> >
<Icon id={'download'} fixedWidth /> <Icon src={require('@tabler/icons/icons/download.svg')} />
</a> </a>
</div> </div>
</div> </div>

16
app/soapbox/features/status/components/detailed_status.js
View File

@ -123,16 +123,18 @@ export default class DetailedStatus extends ImmutablePureComponent {
/> />
); );
} else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) { } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
const audio = status.getIn(['media_attachments', 0]); const attachment = status.getIn(['media_attachments', 0]);
media = ( media = (
<Audio <Audio
src={audio.get('url')} src={attachment.get('url')}
alt={audio.get('description')} alt={attachment.get('description')}
inline duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
sensitive={status.get('sensitive')} poster={attachment.get('preview_url') !== attachment.get('url') ? attachment.get('preview_url') : status.getIn(['account', 'avatar_static'])}
visible={this.props.showMedia} backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
onToggleVisibility={this.props.onToggleMediaVisibility} foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
height={150}
/> />
); );
} else { } else {

58
app/soapbox/features/ui/components/media_modal.js
View File

@ -159,65 +159,65 @@ class MediaModal extends ImmutablePureComponent {
return false; return false;
}).toArray(); }).toArray();
const content = media.map((image) => { const content = media.map(attachment => {
const width = image.getIn(['meta', 'original', 'width']) || null; const width = attachment.getIn(['meta', 'original', 'width']) || null;
const height = image.getIn(['meta', 'original', 'height']) || null; const height = attachment.getIn(['meta', 'original', 'height']) || null;
const link = (status && account && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>); const link = (status && account && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>);
if (image.get('type') === 'image') { if (attachment.get('type') === 'image') {
return ( return (
<ImageLoader <ImageLoader
previewSrc={image.get('preview_url')} previewSrc={attachment.get('preview_url')}
src={image.get('url')} src={attachment.get('url')}
width={width} width={width}
height={height} height={height}
alt={image.get('description')} alt={attachment.get('description')}
key={image.get('url')} key={attachment.get('url')}
onClick={this.toggleNavigation} onClick={this.toggleNavigation}
/> />
); );
} else if (image.get('type') === 'video') { } else if (attachment.get('type') === 'video') {
const { time } = this.props; const { time } = this.props;
return ( return (
<Video <Video
preview={image.get('preview_url')} preview={attachment.get('preview_url')}
blurhash={image.get('blurhash')} blurhash={attachment.get('blurhash')}
src={image.get('url')} src={attachment.get('url')}
width={image.get('width')} width={attachment.get('width')}
height={image.get('height')} height={attachment.get('height')}
startTime={time || 0} startTime={time || 0}
onCloseVideo={onClose} onCloseVideo={onClose}
detailed detailed
link={link} link={link}
alt={image.get('description')} alt={attachment.get('description')}
key={image.get('url')} key={attachment.get('url')}
/> />
); );
} else if (image.get('type') === 'audio') { } else if (attachment.get('type') === 'audio') {
const { time } = this.props;
return ( return (
<Audio <Audio
src={image.get('url')} src={attachment.get('url')}
startTime={time || 0} alt={attachment.get('description')}
detailed poster={attachment.get('preview_url') !== attachment.get('url') ? attachment.get('preview_url') : (status && status.getIn(['account', 'avatar_static']))}
link={link} backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
alt={image.get('description')} foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
key={image.get('url')} accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
key={attachment.get('url')}
/> />
); );
} else if (image.get('type') === 'gifv') { } else if (attachment.get('type') === 'gifv') {
return ( return (
<ExtendedVideoPlayer <ExtendedVideoPlayer
src={image.get('url')} src={attachment.get('url')}
muted muted
controls={false} controls={false}
width={width} width={width}
link={link} link={link}
height={height} height={height}
key={image.get('preview_url')} key={attachment.get('preview_url')}
alt={image.get('description')} alt={attachment.get('description')}
onClick={this.toggleNavigation} onClick={this.toggleNavigation}
/> />
); );