From 1a2a4c32d858d17f3869779d6cd6b2cef6042ab4 Mon Sep 17 00:00:00 2001
From: Amy Resnik <aresnik@codecademy.com>
Date: Fri, 4 Oct 2024 12:53:21 -0400
Subject: [PATCH 1/3] first stab at moving off scss

---
 packages/gamut/src/Video/index.tsx | 57 +++++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index dc3905bfd6..bda7afa12c 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,22 +1,50 @@
 import { PlayIcon } from '@codecademy/gamut-icons';
-import cx from 'classnames';
+import { css } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import { useState } from 'react';
 import * as React from 'react';
 import ReactPlayer from 'react-player';
 
+import { Box, FlexBox } from '../Box';
 import { useIsMounted } from '../utils';
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles/index.module.scss';
+
+const ReactVideoPlayer = styled(ReactPlayer)(
+  css({
+    width: '100% !important',
+    height: '100% !important',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    border: 'none',
+    padding: 0,
+    '&:focus-visible': {
+      outlineOffset: '3px',
+    },
+  })
+);
 
 const OverlayPlayButton = ({ videoTitle }: { videoTitle?: string }) => {
   return (
-    <div
-      className={styles.overlay}
+    <FlexBox
       role="button"
       aria-label={`play video${videoTitle ? `: ${videoTitle}` : ''}`}
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      position="relative"
+      color="white"
+      width="100%"
+      height="100%"
+      opacity="0.5"
     >
-      <PlayIcon className={styles.hoverButton} />
-    </div>
+      <PlayIcon
+        width="15%"
+        height="26.7%"
+        minWidth="75px"
+        minHeight="75px"
+        color="white"
+      />
+    </FlexBox>
   );
 };
 
@@ -54,16 +82,21 @@ export const Video: React.FC<VideoProps> = ({
   const [loading, setLoading] = useState(true);
   const isMounted = useIsMounted();
   return (
-    <div
-      className={cx(styles.videoWrapper, loading && styles.loading, className)}
+    <Box
+      position="relative"
+      width="100%"
+      pt={'56.25%' as any}
+      borderRadius="md"
+      overflow="hidden"
+      // bg={loading ? 'blue-1100'}
     >
       {isMounted ? (
-        <ReactPlayer
+        <ReactVideoPlayer
+          className={className}
           url={videoUrl}
           light={placeholderImage}
           title={videoTitle}
           playing={autoplay}
-          className={styles.iframe}
           controls={controls === undefined ? true : controls}
           loop={loop}
           muted={muted}
@@ -75,6 +108,6 @@ export const Video: React.FC<VideoProps> = ({
           onPlay={onPlay}
         />
       ) : null}
-    </div>
+    </Box>
   );
 };

From efd8511777b217b6afd1df11d7a95519ef5519bd Mon Sep 17 00:00:00 2001
From: Amy Resnik <aresnik@codecademy.com>
Date: Fri, 11 Oct 2024 14:23:15 -0400
Subject: [PATCH 2/3] fix css

---
 packages/gamut/src/Video/index.tsx            | 27 +++++------
 .../gamut/src/Video/styles/index.module.scss  | 45 -------------------
 2 files changed, 12 insertions(+), 60 deletions(-)
 delete mode 100644 packages/gamut/src/Video/styles/index.module.scss

diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index bda7afa12c..a06b921b77 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,5 +1,4 @@
 import { PlayIcon } from '@codecademy/gamut-icons';
-import { css } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import * as React from 'react';
@@ -8,20 +7,18 @@ import ReactPlayer from 'react-player';
 import { Box, FlexBox } from '../Box';
 import { useIsMounted } from '../utils';
 
-const ReactVideoPlayer = styled(ReactPlayer)(
-  css({
-    width: '100% !important',
-    height: '100% !important',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    border: 'none',
-    padding: 0,
-    '&:focus-visible': {
-      outlineOffset: '3px',
-    },
-  })
-);
+const ReactVideoPlayer = styled(ReactPlayer)`
+  width: 100% !important;
+  height: 100% !important;
+  border: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  & :focus-visible {
+    outline-offset: 3px;
+  }
+`;
 
 const OverlayPlayButton = ({ videoTitle }: { videoTitle?: string }) => {
   return (
diff --git a/packages/gamut/src/Video/styles/index.module.scss b/packages/gamut/src/Video/styles/index.module.scss
deleted file mode 100644
index 898fbb3936..0000000000
--- a/packages/gamut/src/Video/styles/index.module.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import "~@codecademy/gamut-styles/utils";
-
-.videoWrapper {
-  position: relative;
-  width: 100%;
-  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
-  border-radius: 4px;
-  overflow: hidden;
-  &.loading {
-    background-color: $color-blue-1100;
-  }
-}
-
-.overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  width: 100%;
-  height: 100%;
-  color: $color-white;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-
-.iframe {
-  width: 100% !important;
-  height: 100% !important;
-  border: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  & :focus-visible {
-    outline-offset: 3px;
-  }
-}
-
-.hoverButton {
-  width: 15%;
-  height: 26.7%;
-  min-width: px-rem(75px);
-  min-height: px-rem(75px);
-  color: $color-white;
-}

From f262413ba0e3c7ad3bb2d8f5858ed8aaebca622c Mon Sep 17 00:00:00 2001
From: Amy Resnik <aresnik@codecademy.com>
Date: Tue, 15 Oct 2024 10:51:18 -0400
Subject: [PATCH 3/3] update loading and control panels bg

---
 packages/gamut/src/Video/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index a06b921b77..3ace8d0daa 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,4 +1,5 @@
 import { PlayIcon } from '@codecademy/gamut-icons';
+import { theme } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import * as React from 'react';
@@ -18,6 +19,12 @@ const ReactVideoPlayer = styled(ReactPlayer)`
   & :focus-visible {
     outline-offset: 3px;
   }
+  video::-webkit-media-controls-panel {
+    background-image: linear-gradient(
+      transparent 15%,
+      ${theme.colors['navy-900']} 55%
+    );
+  }
 `;
 
 const OverlayPlayButton = ({ videoTitle }: { videoTitle?: string }) => {
@@ -85,7 +92,7 @@ export const Video: React.FC<VideoProps> = ({
       pt={'56.25%' as any}
       borderRadius="md"
       overflow="hidden"
-      // bg={loading ? 'blue-1100'}
+      bg={loading ? 'black' : undefined}
     >
       {isMounted ? (
         <ReactVideoPlayer