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>
);
} 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 = (
<Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
{Component => (
<Component
src={audio.get('url')}
alt={audio.get('description')}
src={attachment.get('url')}
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}
height={263}
inline
sensitive={status.get('sensitive')}
cacheWidth={this.props.cacheMediaWidth}
visible={this.state.showMedia}
onOpenAudio={this.handleOpenAudio}
/>
)}
</Bundle>

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

@ -467,13 +467,13 @@ class Audio extends React.PureComponent {
aria-label={alt}
/>
<img
{this.props.poster && <img
src={this.props.poster}
alt=''
width={(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' }}
/>
/>}
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
<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__buttons-bar'>
<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(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(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 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='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@ -521,7 +521,7 @@ class Audio extends React.PureComponent {
download
target='_blank'
>
<Icon id={'download'} fixedWidth />
<Icon src={require('@tabler/icons/icons/download.svg')} />
</a>
</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) {
const audio = status.getIn(['media_attachments', 0]);
const attachment = status.getIn(['media_attachments', 0]);
media = (
<Audio
src={audio.get('url')}
alt={audio.get('description')}
inline
sensitive={status.get('sensitive')}
visible={this.props.showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility}
src={attachment.get('url')}
alt={attachment.get('description')}
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
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'])}
height={150}
/>
);
} else {

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

@ -159,65 +159,65 @@ class MediaModal extends ImmutablePureComponent {
return false;
}).toArray();
const content = media.map((image) => {
const width = image.getIn(['meta', 'original', 'width']) || null;
const height = image.getIn(['meta', 'original', 'height']) || null;
const content = media.map(attachment => {
const width = attachment.getIn(['meta', 'original', 'width']) || 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>);
if (image.get('type') === 'image') {
if (attachment.get('type') === 'image') {
return (
<ImageLoader
previewSrc={image.get('preview_url')}
src={image.get('url')}
previewSrc={attachment.get('preview_url')}
src={attachment.get('url')}
width={width}
height={height}
alt={image.get('description')}
key={image.get('url')}
alt={attachment.get('description')}
key={attachment.get('url')}
onClick={this.toggleNavigation}
/>
);
} else if (image.get('type') === 'video') {
} else if (attachment.get('type') === 'video') {
const { time } = this.props;
return (
<Video
preview={image.get('preview_url')}
blurhash={image.get('blurhash')}
src={image.get('url')}
width={image.get('width')}
height={image.get('height')}
preview={attachment.get('preview_url')}
blurhash={attachment.get('blurhash')}
src={attachment.get('url')}
width={attachment.get('width')}
height={attachment.get('height')}
startTime={time || 0}
onCloseVideo={onClose}
detailed
link={link}
alt={image.get('description')}
key={image.get('url')}
alt={attachment.get('description')}
key={attachment.get('url')}
/>
);
} else if (image.get('type') === 'audio') {
const { time } = this.props;
} else if (attachment.get('type') === 'audio') {
return (
<Audio
src={image.get('url')}
startTime={time || 0}
detailed
link={link}
alt={image.get('description')}
key={image.get('url')}
src={attachment.get('url')}
alt={attachment.get('description')}
poster={attachment.get('preview_url') !== attachment.get('url') ? attachment.get('preview_url') : (status && 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)}
key={attachment.get('url')}
/>
);
} else if (image.get('type') === 'gifv') {
} else if (attachment.get('type') === 'gifv') {
return (
<ExtendedVideoPlayer
src={image.get('url')}
src={attachment.get('url')}
muted
controls={false}
width={width}
link={link}
height={height}
key={image.get('preview_url')}
alt={image.get('description')}
key={attachment.get('preview_url')}
alt={attachment.get('description')}
onClick={this.toggleNavigation}
/>
);