From 3aeaf9b897a7fff8ebb08055b06717e78e5cf914 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 23 Aug 2019 22:38:02 +0200 Subject: [Glitch] Add audio player Port 4190e31626907059aebf32b1be66715dacb989a9 to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/components/status.js | 30 ++++++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) (limited to 'app/javascript/flavours/glitch/components/status.js') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 5b69ac4da..47e110128 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -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
; + return
; } renderLoadingVideoPlayer () { - return
; + return
; + } + + renderLoadingAudioPlayer () { + return
; } 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 = ( + + {Component => ( + + )} + + ); + 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 { />)} ); - mediaIcon = attachment.get('type') === 'video' ? 'video-camera' : 'music'; + mediaIcon = 'video-camera'; } else { // Media type is 'image' or 'gifv' media = ( -- cgit From b90bd31cfdc812da770ec3abd3a1a3a597d85a04 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 25 Aug 2019 15:09:19 +0200 Subject: [Glitch] Fix more visual issues with the audio player Port 2e99e3cab349db6102505736e3b4b94abe776b80 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/components/status.js | 3 ++- app/javascript/flavours/glitch/features/audio/index.js | 11 ++++++----- .../glitch/features/status/components/detailed_status.js | 2 +- app/javascript/flavours/glitch/styles/components/media.scss | 13 +++++++++++++ .../flavours/glitch/styles/mastodon-light/diff.scss | 7 +++++++ 5 files changed, 29 insertions(+), 7 deletions(-) (limited to 'app/javascript/flavours/glitch/components/status.js') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 47e110128..e7bf1f4d0 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -575,7 +575,8 @@ class Status extends ImmutablePureComponent { src={attachment.get('url')} alt={attachment.get('description')} duration={attachment.getIn(['meta', 'original', 'duration'], 0)} - height={110} + peaks={[0]} + height={70} /> )} diff --git a/app/javascript/flavours/glitch/features/audio/index.js b/app/javascript/flavours/glitch/features/audio/index.js index bdd297d86..0830a4684 100644 --- a/app/javascript/flavours/glitch/features/audio/index.js +++ b/app/javascript/flavours/glitch/features/audio/index.js @@ -14,8 +14,6 @@ const messages = defineMessages({ unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' }, }); -const arrayOf = (length, fill) => (new Array(length)).fill(fill); - export default @injectIntl class Audio extends React.PureComponent { @@ -23,6 +21,7 @@ class Audio extends React.PureComponent { src: PropTypes.string.isRequired, alt: PropTypes.string, duration: PropTypes.number, + peaks: PropTypes.arrayOf(PropTypes.number), height: PropTypes.number, preload: PropTypes.bool, editable: PropTypes.bool, @@ -77,7 +76,7 @@ class Audio extends React.PureComponent { } _updateWaveform () { - const { src, height, duration, preload } = this.props; + const { src, height, duration, peaks, preload } = this.props; const progressColor = window.getComputedStyle(document.querySelector('.audio-player__progress-placeholder')).getPropertyValue('background-color'); const waveColor = window.getComputedStyle(document.querySelector('.audio-player__wave-placeholder')).getPropertyValue('background-color'); @@ -94,7 +93,8 @@ class Audio extends React.PureComponent { cursorWidth: 0, progressColor, waveColor, - forceDecode: true, + backend: 'MediaElement', + interact: preload, }); wavesurfer.setVolume(this.state.volume); @@ -103,7 +103,7 @@ class Audio extends React.PureComponent { wavesurfer.load(src); this.loaded = true; } else { - wavesurfer.load(src, arrayOf(1, 0.5), null, duration); + wavesurfer.load(src, peaks, 'none', duration); this.loaded = false; } @@ -123,6 +123,7 @@ class Audio extends React.PureComponent { this.wavesurfer.createBackend(); this.wavesurfer.createPeakCache(); this.wavesurfer.load(this.props.src); + this.wavesurfer.toggleInteraction(); this.loaded = true; } diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index b676410d6..5242c7d5c 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -140,7 +140,7 @@ export default class DetailedStatus extends ImmutablePureComponent { src={attachment.get('url')} alt={attachment.get('description')} duration={attachment.getIn(['meta', 'original', 'duration'], 0)} - height={150} + height={110} preload /> ); diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index e207562a5..6dee7725c 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -347,6 +347,19 @@ &__waveform { padding: 15px 0; + position: relative; + overflow: hidden; + + &::before { + content: ""; + display: block; + position: absolute; + border-top: 1px solid lighten($ui-base-color, 4%); + width: 100%; + height: 0; + left: 0; + top: calc(50% + 1px); + } } &__progress-placeholder { diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 35a8ce7a3..4c2b76a21 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -372,3 +372,10 @@ .directory__tag > div { box-shadow: none; } + +.audio-player .video-player__controls button, +.audio-player .video-player__time-sep, +.audio-player .video-player__time-current, +.audio-player .video-player__time-total { + color: $primary-text-color; +} -- cgit