moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Video fixes

This commit is contained in:
Alex Gleason 2021-05-17 20:08:09 -05:00
parent c7bd447930
commit 4afb0a9868
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/soapbox/features/video/index.js
View File

@ -399,9 +399,6 @@ class Video extends React.PureComponent {
const { src, inline, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio } = this.props; const { src, inline, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = (currentTime / duration) * 100; const progress = (currentTime / duration) * 100;
const volumeWidth = (muted) ? 0 : volume * this.volWidth;
const volumeHandleLoc = (muted) ? this.volHandleOffset(0) : this.volHandleOffset(volume);
const playerStyle = {}; const playerStyle = {};
let { width, height } = this.props; let { width, height } = this.props;
@ -486,12 +483,12 @@ class Video extends React.PureComponent {
<button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button> <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
<button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button> <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
<div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}> <div className={classNames('video-player__volume', { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
<div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} /> <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
<span <span
className={classNames('video-player__volume__handle')} className={classNames('video-player__volume__handle')}
tabIndex='0' tabIndex='0'
style={{ left: `${volumeHandleLoc}px` }} style={{ left: `${volume * 100}%` }}
/> />
</div> </div>

2
app/styles/components/audio-player.scss
View File

@ -67,7 +67,7 @@
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
background: var(--foreground-color); background: $base-shadow-color;
border-radius: 4px; border-radius: 4px;
padding-bottom: 44px; padding-bottom: 44px;
direction: ltr; direction: ltr;

6
app/styles/components/modal.scss
View File

@ -45,6 +45,12 @@
position: relative; position: relative;
} }
.video-modal {
.video-player video {
height: auto;
}
}
.media-modal { .media-modal {
width: 100%; width: 100%;
height: 100%; height: 100%;

4
app/styles/components/video-player.scss
View File

@ -121,8 +121,6 @@
video { video {
object-fit: contain; object-fit: contain;
position: relative; position: relative;
top: 50%;
transform: translateY(-50%);
} }
} }
@ -144,6 +142,8 @@
} }
&.inactive { &.inactive {
min-height: 300px;
video, video,
.video-player__controls { .video-player__controls {
visibility: hidden; visibility: hidden;