refactor(Video): Remove SCSS from Video

.nx/version-plans/version-plan-1783360840721.md

@@ -0,0 +1,5 @@
+---
+gamut: minor
+---
+
+remove scss from video

packages/gamut/project.json

@@ -14,7 +14,7 @@
           "rm -rf ./dist",
           "babel ./src --out-dir ./dist --extensions \".ts,.tsx\"",
           "tsc --emitDeclarationOnly --project ./tsconfig.lib.json",
-          "cpy './src/**/*.{d.ts,scss,svg,png}' ./dist"
+          "cpy './src/**/*.{d.ts,scss,css,svg,png}' ./dist"
         ],
         "parallel": false
       }

packages/gamut/src/Video/lib/VidstackPlayer.tsx

@@ -1,7 +1,9 @@
+/* Third-party Vidstack default theme styles */
 /* eslint-disable gamut/no-css-standalone */
-import '../styles/vds_base_theme.scss';
+import '../vidstack-vendor.css';
 
 import { styledOptions } from '@codecademy/gamut-styles';
+import { Global } from '@emotion/react';
 import styled, { CSSObject } from '@emotion/styled';
 import {
   isYouTubeProvider,
@@ -18,6 +20,7 @@ import React, { useRef } from 'react';
 
 import { Box } from '../../Box';
 import { VideoProps } from '..';
+import { vdsBaseThemeStyles } from '../styles';
 import { keyboardShortcuts } from './utils/constants';
 import { vdsVariables } from './utils/variables';
 import { VideoLayout } from './VideoLayout';
@@ -80,6 +83,7 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
       style={{ width, height }}
       variables={vdsVariables}
     >
+      <Global styles={vdsBaseThemeStyles} />
       <MediaPlayer
         autoPlay={autoplay}
         controls={showDefaultProviderControls}

packages/gamut/src/Video/styles.ts

@@ -0,0 +1,101 @@
+import { css } from '@emotion/react';
+
+export const vdsBaseThemeStyles = css`
+  /**
+   * Youtube overlay
+   * - Why 120% ? hiding yt logo and copy link button which are not accessible.
+   */
+  iframe.vds-youtube[data-no-controls] {
+    height: 120%;
+  }
+
+  [data-started] iframe.vds-youtube[data-no-controls] {
+    height: 1000%;
+  }
+
+  /* Control buttons */
+  :where(.vds-button .vds-icon) {
+    border-radius: unset;
+  }
+
+  .vds-controls button {
+    border-radius: var(--media-button-border-radius);
+  }
+
+  :where(.vds-video-layout[data-sm]) :where(.vds-button) {
+    padding: 0px 4px !important;
+  }
+
+  /* Small layout volume / time slider */
+  :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track) {
+    background-color: var(--color-gray-600);
+  }
+  :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill) {
+    background-color: var(--color-secondary);
+  }
+  .vds-video-layout .vds-time-slider .vds-slider-value {
+    border: unset;
+    color: white;
+  }
+
+  /* Tooltip */
+  .vds-tooltip-content::after {
+    content: '';
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    border-style: solid;
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    position: absolute;
+    border-color: currentColor;
+  }
+  :where(.vds-tooltip-content[data-placement~='top'])::after {
+    border-width: 0 1px 1px 0;
+    bottom: -0.5rem;
+    left: calc(50% - 0.5rem);
+    background-image: linear-gradient(
+      to top left,
+      var(--color-background-contrast) 55%,
+      rgba(0, 0, 0, 0) 20%
+    );
+  }
+
+  :where(.vds-tooltip-content[data-placement~='bottom'])::after {
+    border-width: 1px 0px 0px 1px;
+    top: -0.5rem;
+    left: calc(50% - 0.5rem);
+    background-image: linear-gradient(
+      to bottom right,
+      var(--color-background-contrast) 55%,
+      rgba(0, 0, 0, 0) 20%
+    );
+  }
+
+  :where(.vds-tooltip-content[data-placement~='start'])::after {
+    left: calc(0% + 0.5rem);
+  }
+  :where(.vds-tooltip-content[data-placement~='end'])::after {
+    left: unset;
+    right: calc(0% + 0.5rem);
+  }
+
+  @keyframes vds-tooltip-exit {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes vds-tooltip-enter {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;

packages/gamut/src/Video/vidstack-vendor.css

@@ -0,0 +1,3 @@
+@import "~@vidstack/react/player/styles/default/theme.css";
+@import "~@vidstack/react/player/styles/default/layouts/video.css";
+@import "~@vidstack/react/player/styles/default/layouts/audio.css";