From 4afb0a9868fcf66942d266ccdfa0edec8027d7c9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 17 May 2021 20:08:09 -0500
Subject: [PATCH] Video fixes

---
 app/soapbox/features/video/index.js     | 9 +++------
 app/styles/components/audio-player.scss | 2 +-
 app/styles/components/modal.scss        | 6 ++++++
 app/styles/components/video-player.scss | 4 ++--
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index c80a86677..04ce94133 100644
--- a/app/soapbox/features/video/index.js
+++ b/app/soapbox/features/video/index.js
@@ -399,9 +399,6 @@ class Video extends React.PureComponent {
     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 progress = (currentTime / duration) * 100;
-
-    const volumeWidth = (muted) ? 0 : volume * this.volWidth;
-    const volumeHandleLoc = (muted) ? this.volHandleOffset(0) : this.volHandleOffset(volume);
     const playerStyle = {};
 
     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(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='video-player__volume__current' style={{ width: `${volumeWidth}px` }} />
+              <div className={classNames('video-player__volume', { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
+                <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
                 <span
                   className={classNames('video-player__volume__handle')}
                   tabIndex='0'
-                  style={{ left: `${volumeHandleLoc}px` }}
+                  style={{ left: `${volume * 100}%` }}
                 />
               </div>
 
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
index 183f49139..17f72d3aa 100644
--- a/app/styles/components/audio-player.scss
+++ b/app/styles/components/audio-player.scss
@@ -67,7 +67,7 @@
   overflow: hidden;
   box-sizing: border-box;
   position: relative;
-  background: var(--foreground-color);
+  background: $base-shadow-color;
   border-radius: 4px;
   padding-bottom: 44px;
   direction: ltr;
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index a4c82d516..015b7c294 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -45,6 +45,12 @@
   position: relative;
 }
 
+.video-modal {
+  .video-player video {
+    height: auto;
+  }
+}
+
 .media-modal {
   width: 100%;
   height: 100%;
diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index 57986e64c..3c02abdf1 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -121,8 +121,6 @@
     video {
       object-fit: contain;
       position: relative;
-      top: 50%;
-      transform: translateY(-50%);
     }
   }
 
@@ -144,6 +142,8 @@
   }
 
   &.inactive {
+    min-height: 300px;
+
     video,
     .video-player__controls {
       visibility: hidden;