tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add audio player

Browse Source 
Port 4190e31626 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko
2019-08-23 22:38:02 +02:00
committed by Thibaut Girka
parent 04de74c992
commit 3aeaf9b897
10 changed files with 325 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/javascript/flavours/glitch/components/status.js
View File

@ -10,7 +10,7 @@ import AttachmentList from './attachment_list';
import Card from '../features/status/components/card';
import { injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { MediaGallery, Video } from 'flavours/glitch/util/async-components';
import { MediaGallery, Video, Audio } from 'flavours/glitch/util/async-components';
import { HotKeys } from 'react-hotkeys';
import NotificationOverlayContainer from 'flavours/glitch/features/notifications/containers/overlay_container';
import classNames from 'classnames';
@ -443,11 +443,15 @@ class Status extends ImmutablePureComponent {
}
renderLoadingMediaGallery () {
return <div className='media_gallery' style={{ height: '110px' }} />;
return <div className='media-gallery' style={{ height: '110px' }} />;
}
renderLoadingVideoPlayer () {
return <div className='media-spoiler-video' style={{ height: '110px' }} />;
return <div className='video-player' style={{ height: '110px' }} />;
}
renderLoadingAudioPlayer () {
return <div className='audio-player' style={{ height: '110px' }} />;
}
render () {
@ -561,7 +565,23 @@ class Status extends ImmutablePureComponent {
media={status.get('media_attachments')}
/>
);
} else if (['video', 'audio'].includes(attachments.getIn([0, 'type']))) {
} else if (attachments.getIn([0, 'type']) === 'audio') {
const attachment = status.getIn(['media_attachments', 0]);
media = (
<Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
{Component => (
<Component
src={attachment.get('url')}
alt={attachment.get('description')}
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
height={110}
/>
)}
</Bundle>
);
mediaIcon = 'music';
} else if (attachments.getIn([0, 'type']) === 'video') {
const attachment = status.getIn(['media_attachments', 0]);
media = (
@ -584,7 +604,7 @@ class Status extends ImmutablePureComponent {
/>)}
</Bundle>
);
mediaIcon = attachment.get('type') === 'video' ? 'video-camera' : 'music';
mediaIcon = 'video-camera';
} else { // Media type is 'image' or 'gifv'
media = (
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>