From aad8613f9a72ca9708020324136b01adc68a8274 Mon Sep 17 00:00:00 2001
From: Conrad Chan <conradchan@box.com>
Date: Tue, 25 May 2021 14:13:06 -0700
Subject: [PATCH] chore: pr comments

---
 src/lib/viewers/controls/media/_styles.scss | 34 ++++++++++++++
 src/lib/viewers/media/Dash.scss             |  4 --
 src/lib/viewers/media/DashControls.scss     |  2 +-
 src/lib/viewers/media/MP4.scss              |  4 --
 src/lib/viewers/media/MP4Controls.scss      |  2 +-
 src/lib/viewers/media/_mediaBase.scss       | 51 ++++-----------------
 6 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/src/lib/viewers/controls/media/_styles.scss b/src/lib/viewers/controls/media/_styles.scss
index baa844e16..0325cc3c8 100644
--- a/src/lib/viewers/controls/media/_styles.scss
+++ b/src/lib/viewers/controls/media/_styles.scss
@@ -6,3 +6,37 @@ $bp-MediaControl-width: 36px;
 @mixin bp-MediaButton {
     @include bp-Control($width: $bp-MediaControl-width, $height: $bp-MediaControl-height);
 }
+
+@mixin bp-VideoControls {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-image: linear-gradient(to top, rgba($black, .6) 0%, rgba($black, 0) 100%);
+
+    .bp-FullscreenToggle {
+        width: $bp-MediaControl-width;
+        height: $bp-MediaControl-height;
+    }
+}
+
+@mixin bp-VideoControls-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px 5px;
+}
+
+@mixin bp-VideoControls-group {
+    display: flex;
+    align-items: center;
+}
+
+@mixin bp-VideoControls-settings {
+    .bp-SettingsFlyout {
+        right: 15px;
+    }
+
+    .bp-SettingsToggle {
+        width: $bp-MediaControl-width;
+        height: $bp-MediaControl-height;
+    }
+}
diff --git a/src/lib/viewers/media/Dash.scss b/src/lib/viewers/media/Dash.scss
index 235602167..e0fd08ce1 100644
--- a/src/lib/viewers/media/Dash.scss
+++ b/src/lib/viewers/media/Dash.scss
@@ -25,10 +25,6 @@
             cursor: pointer;
         }
     }
-
-    .bp-VideoControlsRoot {
-        @include bp-VideoControlsRoot;
-    }
 }
 
 .bp-media-filmstrip-container {
diff --git a/src/lib/viewers/media/DashControls.scss b/src/lib/viewers/media/DashControls.scss
index 331962222..a943611f6 100644
--- a/src/lib/viewers/media/DashControls.scss
+++ b/src/lib/viewers/media/DashControls.scss
@@ -1,4 +1,4 @@
-@import './mediaBase';
+@import '../controls//media/styles';
 
 .bp-DashControls {
     @include bp-VideoControls;
diff --git a/src/lib/viewers/media/MP4.scss b/src/lib/viewers/media/MP4.scss
index 3b080799b..fe397e3b8 100644
--- a/src/lib/viewers/media/MP4.scss
+++ b/src/lib/viewers/media/MP4.scss
@@ -34,8 +34,4 @@
             opacity: 1;
         }
     }
-
-    .bp-VideoControlsRoot {
-        @include bp-VideoControlsRoot;
-    }
 }
diff --git a/src/lib/viewers/media/MP4Controls.scss b/src/lib/viewers/media/MP4Controls.scss
index c0bc9a1d5..24a353fb1 100644
--- a/src/lib/viewers/media/MP4Controls.scss
+++ b/src/lib/viewers/media/MP4Controls.scss
@@ -1,4 +1,4 @@
-@import './mediaBase';
+@import '../controls//media/styles';
 
 .bp-MP4Controls {
     @include bp-VideoControls;
diff --git a/src/lib/viewers/media/_mediaBase.scss b/src/lib/viewers/media/_mediaBase.scss
index 1b3cbd977..31be33973 100644
--- a/src/lib/viewers/media/_mediaBase.scss
+++ b/src/lib/viewers/media/_mediaBase.scss
@@ -1,48 +1,5 @@
 @import '../../boxuiVariables';
 @import './MediaControls';
-@import '../controls/media/styles';
-
-@mixin bp-VideoControlsRoot {
-    position: absolute;
-    right: 0;
-    bottom: -1px;
-    left: 0;
-    width: 100%;
-}
-
-@mixin bp-VideoControls {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    background-image: linear-gradient(to top, rgba($black, .6) 0%, rgba($black, 0) 100%);
-
-    .bp-FullscreenToggle {
-        width: $bp-MediaControl-width;
-        height: $bp-MediaControl-height;
-    }
-}
-
-@mixin bp-VideoControls-bar {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 10px 5px;
-}
-
-@mixin bp-VideoControls-group {
-    display: flex;
-    align-items: center;
-}
-
-@mixin bp-VideoControls-settings {
-    .bp-SettingsFlyout {
-        right: 15px;
-    }
-
-    .bp-SettingsToggle {
-        width: $bp-MediaControl-width;
-        height: $bp-MediaControl-height;
-    }
-}
 
 .bp-media {
     position: absolute;
@@ -134,3 +91,11 @@
         display: none;
     }
 }
+
+.bp-VideoControlsRoot {
+    position: absolute;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    width: 100%;
+}