diff options
5 files changed, 31 insertions, 8 deletions
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 102551c58..b5606aca5 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -362,7 +362,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/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js index b95860fcf..95e5675f3 100644 --- a/app/javascript/mastodon/features/audio/index.js +++ b/app/javascript/mastodon/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/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 980aa0655..e97f18f08 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -116,7 +116,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/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index ee8a7d265..e7114ed07 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -104,7 +104,8 @@ html { .box-widget input[type="email"], .box-widget input[type="password"], .box-widget textarea, -.statuses-grid .detailed-status { +.statuses-grid .detailed-status, +.audio-player { border: 1px solid lighten($ui-base-color, 8%); } @@ -700,3 +701,10 @@ html { .compose-form .compose-form__warning { 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; +} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index c8c4af538..36466d5c1 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5062,6 +5062,19 @@ a.status-card.compact:hover { &__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 { |