diff options
Diffstat (limited to 'app/javascript')
5 files changed, 29 insertions, 7 deletions
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} /> )} </Bundle> 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; +} |