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/styles/components/media.scss | 35 ++++++++++++++++++++++ .../glitch/styles/components/single_column.scss | 6 ++-- .../flavours/glitch/styles/components/status.scss | 9 ++++-- 3 files changed, 45 insertions(+), 5 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 39ffcae9d..e207562a5 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -333,15 +333,50 @@ } +.audio-player { + box-sizing: border-box; + position: relative; + background: darken($ui-base-color, 8%); + border-radius: 4px; + padding-bottom: 44px; + + &.editable { + border-radius: 0; + height: 100%; + } + + &__waveform { + padding: 15px 0; + } + + &__progress-placeholder { + background-color: rgba(lighten($ui-highlight-color, 8%), 0.5); + } + + &__wave-placeholder { + background-color: lighten($ui-base-color, 16%); + } + + .video-player__controls { + padding: 0 15px; + padding-top: 10px; + background: darken($ui-base-color, 8%); + border-top: 1px solid lighten($ui-base-color, 4%); + border-radius: 0 0 4px 4px; + } +} + .video-player { overflow: hidden; position: relative; background: $base-shadow-color; max-width: 100%; border-radius: 4px; + box-sizing: border-box; &.editable { border-radius: 0; + height: 100% !important; } &:focus { diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index 83c5d351b..d22cd4a8b 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -107,7 +107,8 @@ padding: 15px; .media-gallery, - .video-player { + .video-player, + .audio-player { margin-top: 15px; } } @@ -131,7 +132,8 @@ .media-gallery, &__action-bar, - .video-player { + .video-player, + .audio-player { margin-top: 10px; } } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 40db7b3cb..2c7c1e8aa 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -263,7 +263,8 @@ opacity: 1; animation: fade 150ms linear; - .video-player { + .video-player, + .audio-player { margin-top: 8px; } @@ -453,7 +454,8 @@ white-space: normal; } - .video-player { + .video-player, + .audio-player { margin-top: 8px; max-width: 250px; } @@ -561,7 +563,8 @@ } } - .video-player { + .video-player, + .audio-player { margin-top: 8px; } } -- 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/styles') 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