From bb53fd733012b3cf3a4fc67245116b164c6acb01 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Sun, 5 Jan 2025 18:02:48 +0530
Subject: [PATCH 01/29] vds initial poc integration

---
 package.json                                  |   2 +
 .../__snapshots__/gamut.test.ts.snap          |   1 +
 packages/gamut/src/VideoPlayer/index.tsx      |  87 +++++++++
 .../gamut/src/VideoPlayer/lib/VideoLayout.tsx |  52 +++++
 packages/gamut/src/VideoPlayer/lib/slots.tsx  |  21 +++
 packages/gamut/src/VideoPlayer/lib/utils.tsx  |  11 ++
 .../VideoPlayer/styles/_vds-variables.scss    |  58 ++++++
 .../src/VideoPlayer/styles/index.module.scss  | 177 ++++++++++++++++++
 packages/gamut/src/index.tsx                  |   1 +
 packages/styleguide/.storybook/main.ts        |   2 +-
 .../lib/Molecules/VideoPlayer/VideoPlayer.mdx |  59 ++++++
 .../VideoPlayer/VideoPlayer.stories.tsx       |  55 ++++++
 yarn.lock                                     |  89 ++++++---
 13 files changed, 586 insertions(+), 29 deletions(-)
 create mode 100644 packages/gamut/src/VideoPlayer/index.tsx
 create mode 100644 packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
 create mode 100644 packages/gamut/src/VideoPlayer/lib/slots.tsx
 create mode 100644 packages/gamut/src/VideoPlayer/lib/utils.tsx
 create mode 100644 packages/gamut/src/VideoPlayer/styles/_vds-variables.scss
 create mode 100644 packages/gamut/src/VideoPlayer/styles/index.module.scss
 create mode 100644 packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
 create mode 100644 packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx

diff --git a/package.json b/package.json
index 8b11bba5e8..c2e39f3dff 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@vidstack/react": "^1.12.12",
     "core-js": "3.7.0",
     "lodash": "^4.17.5",
     "react": "18.3.1",
@@ -86,6 +87,7 @@
     "prettier": "^2.6.2",
     "react-test-renderer": "18.3.1",
     "storybook": "^8.3.6",
+    "style-loader": "^4.0.0",
     "svgo": "^1.3.2",
     "syncpack": "^10.9.3",
     "ts-jest": "29.1.1",
diff --git a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
index 21c0132482..733311f713 100644
--- a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
+++ b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
@@ -123,5 +123,6 @@ exports[`Gamut Exported Keys 1`] = `
   "useLocalQuery",
   "useSubmitState",
   "Video",
+  "VideoPlayer",
 ]
 `;
diff --git a/packages/gamut/src/VideoPlayer/index.tsx b/packages/gamut/src/VideoPlayer/index.tsx
new file mode 100644
index 0000000000..ecf5fcd660
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/index.tsx
@@ -0,0 +1,87 @@
+/* eslint-disable gamut/no-css-standalone */
+import './styles/_vds-variables.scss';
+
+import { MediaPlayer, MediaPlayerInstance, MediaProvider, Poster, Track, TrackProps } from '@vidstack/react';
+import { ThumbnailSrc } from '@vidstack/react/types/vidstack';
+import cx from 'classnames';
+import * as React from 'react';
+import { useState } from 'react';
+
+import { useIsMounted } from '../utils';
+import { VideoLayout } from './lib/VideoLayout';
+import styles from './styles/index.module.scss';
+
+export type VideoPlayerProps = {
+  autoplay?: boolean;
+  className?: string;
+  controls?: boolean;
+  height?: number;
+  loop?: boolean;
+  muted?: boolean;
+  onPlay?: () => void;
+  onReady?: (player: any) => void;
+  placeholderImage?: string;
+  videoTitle?: string;
+  videoUrl: string;
+  width?: number;
+  textTracks: TrackProps[];
+  thumbnails?: ThumbnailSrc;
+};
+
+export const VideoPlayer: React.FC<VideoPlayerProps> = ({
+  autoplay = false,
+  className,
+  controls = false,
+  loop = false,
+  muted = false,
+  onPlay,
+  onReady,
+  placeholderImage,
+  videoTitle,
+  videoUrl,
+  textTracks,
+  thumbnails
+}) => {
+  const [loading, setLoading] = useState(true);
+  const [adActive, setAdActive] = useState(false);
+  const player = React.useRef<MediaPlayerInstance>(null);
+  const isMounted = useIsMounted();
+
+  return (
+    <div
+      className={cx(styles.videoWrapper, loading && styles.loading, className)}
+    >
+      {isMounted && (
+        <MediaPlayer
+          title={videoTitle}
+          src={videoUrl} 
+          playsInline
+          ref={player}
+          aspectRatio='16:9'
+          autoPlay={autoplay}
+          loop={loop}
+          muted={muted}
+          onLoad={() => setLoading(false)}
+          onPlay={onPlay}
+          onCanPlay={onReady}
+        >
+          <MediaProvider>
+            <Poster
+              className="vds-poster"
+              src={placeholderImage || null}
+            />
+            {textTracks?.map((track) => (
+              <Track {...track} key={track.src} />
+            ))}
+          </MediaProvider>
+          <VideoLayout
+            controls={controls}
+            thumbnails={thumbnails}
+            adActive={adActive}
+            setAdActive={setAdActive}
+          />
+        </MediaPlayer>
+      )}
+    </div>
+  );
+};
diff --git a/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx b/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
new file mode 100644
index 0000000000..eb6db77397
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
@@ -0,0 +1,52 @@
+import { ViewIcon, ViewOffIcon } from '@codecademy/gamut-icons';
+import { useMediaRemote } from '@vidstack/react';
+import { DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
+import { ThumbnailSrc } from '@vidstack/react/types/vidstack';
+
+import { IconButton } from '../../Button';
+import { customLayoutSlots } from './slots';
+import { customIcons } from './utils';
+
+export type VideoLayoutProps = {
+    controls?: boolean;
+    thumbnails?: ThumbnailSrc;
+    adActive: boolean;
+    setAdActive: (active: boolean) => void;
+  };
+  
+export const VideoLayout: React.FC<VideoLayoutProps> = ({
+    controls = false,
+    thumbnails,
+    adActive,
+    setAdActive,
+}) => {
+    const playerRemote = useMediaRemote();
+
+    return (
+        <DefaultVideoLayout
+            hidden={controls}
+            icons={customIcons}
+            // smallLayoutWhen={false}
+            playbackRates={[0.5, 1, 1.5, 2]}
+            thumbnails={thumbnails}
+            slots={{
+                ...customLayoutSlots,
+                beforeSettingsMenu: (
+                    <IconButton 
+                        mode='dark'
+                        icon={adActive ? ViewIcon : ViewOffIcon}
+                        tip='Audio Description'
+                        onClick={() => {
+                            if (adActive) {
+                                playerRemote.pause();
+                            } else {
+                                playerRemote.play();
+                            }
+                            setAdActive(!adActive)
+                        }}
+                    />
+                )
+            }}  
+        />
+    )
+}
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/lib/slots.tsx b/packages/gamut/src/VideoPlayer/lib/slots.tsx
new file mode 100644
index 0000000000..7ed8904237
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/lib/slots.tsx
@@ -0,0 +1,21 @@
+import { ArrowLeftIcon } from '@codecademy/gamut-icons';
+import { SeekButton } from '@vidstack/react';
+
+
+export const customLayoutSlots = {
+    smallLayout: {
+        beforeCaptionButton: (
+          <SeekButton className="vds-button" seconds={-10}>
+            <ArrowLeftIcon className="vds-icon" />
+          </SeekButton>
+        )
+      },
+      largeLayout: {
+        afterPlayButton: (
+          <SeekButton className="vds-button" seconds={-10}>
+            <ArrowLeftIcon className="vds-icon" />
+          </SeekButton>
+        ),
+      },
+      googleCastButton: null,
+}
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/lib/utils.tsx b/packages/gamut/src/VideoPlayer/lib/utils.tsx
new file mode 100644
index 0000000000..4dcdd402e8
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/lib/utils.tsx
@@ -0,0 +1,11 @@
+import { PauseIcon, PlayIcon, RefreshIcon } from '@codecademy/gamut-icons';
+import { defaultLayoutIcons, DefaultPlayButtonIcons } from '@vidstack/react/player/layouts/default';
+
+export const customIcons = {
+    ...defaultLayoutIcons,
+    PlayButton: { 
+        Play: PlayIcon as DefaultPlayButtonIcons['Play'],
+        Pause: PauseIcon as DefaultPlayButtonIcons['Pause'],
+        Replay: RefreshIcon as DefaultPlayButtonIcons['Replay']
+    }
+} 
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/styles/_vds-variables.scss b/packages/gamut/src/VideoPlayer/styles/_vds-variables.scss
new file mode 100644
index 0000000000..696c76c86d
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/styles/_vds-variables.scss
@@ -0,0 +1,58 @@
+@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";
+
+.vds-video-layout {
+    --video-font-family: "Apercu",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+    --media-button-border-radius: 0;
+    --video-brand: #f5f5f5;
+    --video-controls-color: #f5f5f5;
+    --video-focus-ring-color: rgb(78 156 246);
+    --video-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
+    
+    --video-bg: black;
+    --video-border-radius: 6px;
+    --video-border: 1px solid rgb(255 255 255 / 0.1);
+    
+    --video-fullscreen-chapter-title-font-size: 16px;
+    --video-gesture-seek-width: 20%;
+    
+    /* Load. */
+    --video-load-button-size: 56px;
+    --video-load-button-border: var(--color);
+    --video-load-button-bg: var(--media-brand);
+    --video-load-button-border-radius: 100%;
+    
+    --video-sm-load-button-size: 48px;
+    
+    /* Buttons. */
+    --video-sm-button-size: 32px;
+    --video-sm-play-button-size: 40px;
+    --video-sm-play-button-transform: translateY(25%);
+    --video-sm-play-button-bg: rgba(0 0 0 / 0.6);
+    
+    /* Sliders. */
+    --video-slider-thumbnail-border: 1px solid #f5f5f5;
+    --video-slider-thumbnail-border-radius: 2px;
+    --video-volume-slider-max-width: 72px;
+    
+    --video-sm-slider-focus-track-height: 12px;
+    
+    /* Time. */
+    --video-time-bg: unset;
+    --video-fullscreen-time-font-size: 16px;
+    
+    --video-sm-time-font-size: 14px;
+    --video-sm-start-duration-bg: rgba(0 0 0 / 0.64);
+    --video-sm-start-duration-padding: 3px 6px;
+    --video-sm-start-duration-color: var(--video: controls-color);
+    
+    /* Captions. */
+    --video-captions-offset: 78px;
+    --video-captions-transition: bottom 0.15s linear;
+    
+    --video-sm-captions-offset: 48px;
+    --video-lg-fullscreen-captions-offset: 54px;
+    
+    --video-sm-captions-offset: 48px;
+  }
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/styles/index.module.scss b/packages/gamut/src/VideoPlayer/styles/index.module.scss
new file mode 100644
index 0000000000..1f8dab1b92
--- /dev/null
+++ b/packages/gamut/src/VideoPlayer/styles/index.module.scss
@@ -0,0 +1,177 @@
+@import "~@codecademy/gamut-styles/utils";
+
+.videoWrapper {
+  position: relative;
+  width: 100%;
+}
+
+.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;
+}
+
+.player {
+  --media-brand: #f5f5f5;
+  --media-focus-ring-color: #4e9cf6;
+  --media-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
+  width: 100%;
+}
+
+.player[data-view-type='audio'] {
+  --media-tooltip-y-offset: 44px;
+  --media-menu-y-offset: 40px;
+  --media-slider-chapter-title-color: black;
+  --media-border-radius: 4px;
+  background-color: #212121;
+  border-radius: var(--media-border-radius);
+  contain: layout;
+}
+
+.player[data-view-type='video'] {
+  --media-tooltip-y-offset: 30px;
+  --media-menu-y-offset: 30px;
+  --media-border-radius: 6px;
+  aspect-ratio: 16 /9;
+  background-color: #212121;
+  border-radius: var(--media-border-radius);
+  contain: layout;
+}
+
+.player video,
+.poster {
+  border-radius: var(--media-border-radius);
+}
+
+.srcButtons {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin-top: 40px;
+  margin-inline: auto;
+  max-width: 300px;
+}
+
+/*************************************************************************************************
+ * Controls
+ *************************************************************************************************/
+
+ .controls :global(.vds-time-slider) {
+  --media-slider-height: 40px;
+}
+
+.controls :global(.vds-time-slider .vds-slider-value) {
+  background-color: unset;
+}
+
+.controls :global(.vds-volume-slider) {
+  --media-slider-height: 40px;
+  --media-slider-preview-offset: 32px;
+  margin-left: 1.5px;
+  max-width: 80px;
+}
+
+.controls :global(.vds-time-group) {
+  margin-left: 8px;
+}
+
+.controlsGroup {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.controlsGroup {
+  padding-inline: 8px;
+}
+
+.controlsGroup:last-child {
+  margin-top: -4px;
+  padding-bottom: 8px;
+}
+
+/*************************************************************************************************
+ * Gestures
+ *************************************************************************************************/
+
+.gesture {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.gesture[action='seek:-10'],
+.gesture[action='seek:10'] {
+  width: 20%;
+  z-index: 1;
+}
+
+.gesture[action='seek:10'] {
+  left: unset;
+  right: 0;
+}
+
+/* Remove toggle to pause on touch. */
+@media (pointer: coarse) {
+  .gesture[action='toggle:paused'] {
+    display: none;
+  }
+}
+
+/* Remove toggle controls on mouse. */
+@media not (pointer: coarse) {
+  .gesture[action='toggle:controls'] {
+    display: none;
+  }
+}
+
+/*************************************************************************************************
+ * Captions
+ *************************************************************************************************/
+
+.captions {
+  z-index: 10;
+  bottom: 0;
+  transition: bottom 0.15s linear;
+}
+
+/* Pull captions up when controls are visible. */
+:global(.media-player[data-controls]) .captions {
+  bottom: 80px;
+}
+
+/* Hide captions when interacting with time slider. */
+:global(.media-player[data-preview]) .captions {
+  opacity: 0;
+}
diff --git a/packages/gamut/src/index.tsx b/packages/gamut/src/index.tsx
index dd3b53107f..9fb8f4b034 100644
--- a/packages/gamut/src/index.tsx
+++ b/packages/gamut/src/index.tsx
@@ -57,3 +57,4 @@ export * from './Typography/Text';
 export type { HeadingTags } from './Typography/types';
 export * from './utils';
 export * from './Video';
+export * from './VideoPlayer';
diff --git a/packages/styleguide/.storybook/main.ts b/packages/styleguide/.storybook/main.ts
index 74a118f38b..516ac08b95 100644
--- a/packages/styleguide/.storybook/main.ts
+++ b/packages/styleguide/.storybook/main.ts
@@ -1,5 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
-import { resolve, dirname, join } from 'path';
+import { dirname, join, resolve } from 'path';
 
 const config: StorybookConfig = {
   stories: [
diff --git a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
new file mode 100644
index 0000000000..25b711ff13
--- /dev/null
+++ b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
@@ -0,0 +1,59 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
+import { ComponentHeader } from '~styleguide/blocks';
+
+import * as VideoStories from './VideoPlayer.stories';
+
+export const parameters = {
+  subtitle: `A video player that can play both youtube and vimeo videos
+given a video URL.`,
+  design: {
+    type: 'figma',
+    url:
+      'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=31226-41393',
+  },
+  status: 'updating',
+  source: {
+    repo: 'gamut',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Video/index.tsx',
+  },
+};
+
+<Meta of={VideoStories} />
+
+<ComponentHeader {...parameters} />
+
+## Usage
+
+Use the Video component to embed a YouTube or Vimeo video using a URL.
+
+### Best practices:
+
+- Some videos might have settings where you cannot share/embed them, make sure to check the video URL before making the Video go live.
+
+## Variants
+
+### Custom Video Link
+
+Here is an example with a custom video and placeholder.
+
+<Canvas of={VideoStories.VideoWithPlaceholder} />
+
+### Youtube link
+
+The following video has a YouTube URL.
+
+<Canvas of={VideoStories.Default} />
+
+### Vimeo
+
+Here is an example with a Vimeo URL.
+
+<Canvas of={VideoStories.Vimeo} />
+
+## Playground
+
+<Canvas sourceState="shown" of={VideoStories.Default} />
+
+<Controls />
diff --git a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx
new file mode 100644
index 0000000000..4e3bdc6901
--- /dev/null
+++ b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx
@@ -0,0 +1,55 @@
+import { VideoPlayer } from '@codecademy/gamut';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof VideoPlayer> = {
+  component: VideoPlayer,
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof VideoPlayer>;
+
+export const Default: Story = {
+  args: {
+    videoUrl: 'https://www.youtube.com/watch?v=wxds6MAtUQ0',
+    videoTitle: 'Intro to Programming: Loops',
+  },
+};
+
+export const Vimeo: Story = {
+  args: {
+    videoUrl:"https://vimeo.com/773539409",
+    videoTitle:"CODECADEMY | Develop Yourself",
+  },
+};
+
+export const VideoWithPlaceholder: Story = {
+  args: {
+    videoUrl: "https://files.vidstack.io/sprite-fight/720p.mp4",
+    videoTitle: "Sprite Fight",
+    placeholderImage: "https://files.vidstack.io/sprite-fight/poster.webp",
+    autoplay: false,
+    controls: false,
+    loop: false,
+    muted: false,
+    textTracks: [{
+      "src": "https://files.vidstack.io/sprite-fight/subs/english.vtt",
+      "label": "English",
+      "language": "en-US",
+      "kind": "subtitles"
+    }, {
+      "src": "https://files.vidstack.io/sprite-fight/subs/spanish.vtt",
+      "label": "Spanish",
+      "language": "es-ES",
+      "kind": "subtitles",
+      "default": true
+    }, {
+      "src": "https://files.vidstack.io/sprite-fight/chapters.vtt",
+      "language": "en-US",
+      "kind": "chapters",
+      "type": "vtt",
+      "default": true
+    }],
+    thumbnails: "https://files.vidstack.io/sprite-fight/thumbnails.vtt"
+  },
+};
diff --git a/yarn.lock b/yarn.lock
index 2ac8370d14..18eb45f8ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1553,6 +1553,14 @@
     "@floating-ui/core" "^1.6.0"
     "@floating-ui/utils" "^0.2.8"
 
+"@floating-ui/dom@^1.6.10":
+  version "1.6.12"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
 "@floating-ui/utils@^0.2.8":
   version "0.2.8"
   resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
@@ -1957,6 +1965,11 @@
   dependencies:
     "@lit-labs/ssr-dom-shim" "^1.0.0"
 
+"@maverick-js/signals@^5.10.3":
+  version "5.11.5"
+  resolved "https://registry.npmjs.org/@maverick-js/signals/-/signals-5.11.5.tgz#747490ad174320236378d791600e6fadf2c3072b"
+  integrity sha512-/GO94awrwN9ROYZDMTeByordjvbhcm3CMvB/2aL/sEUy9Va8nM/2GmNgOOe+rrooTGnz8/DzO73xomuBRrnYWw==
+
 "@mdx-js/react@^3.0.0", "@mdx-js/react@^3.1.0":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz#c4522e335b3897b9a845db1dbdd2f966ae8fb0ed"
@@ -4063,6 +4076,14 @@
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@vidstack/react@^1.12.12":
+  version "1.12.12"
+  resolved "https://registry.npmjs.org/@vidstack/react/-/react-1.12.12.tgz#abf8b794edb461bc4b7de6e97be355a19d75e102"
+  integrity sha512-rEwCkZdp/K0FopUU76lgYJqzOZa3AGM2FumQnTPPSCP9jwShYReY9mXgl4/UP5CH3v7MkaVl5ZT67rhfjPxx9Q==
+  dependencies:
+    "@floating-ui/dom" "^1.6.10"
+    media-captions "^1.0.4"
+
 "@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
   version "1.12.1"
   resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz#bb16a0e8b1914f979f45864c23819cc3e3f0d4bb"
@@ -10338,6 +10359,14 @@ marked@^4.3.0:
   resolved "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
   integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
 
+maverick.js@0.37.0:
+  version "0.37.0"
+  resolved "https://registry.npmjs.org/maverick.js/-/maverick.js-0.37.0.tgz#3dc371786540ba5cc327179a268b60c165a317d8"
+  integrity sha512-1Dk/9rienLiihlktVvH04ADC2UJTMflC1fOMVQCCaQAaz7hgzDI5i0p/arFbDM52hFFiIcq4RdXtYz47SgsLgw==
+  dependencies:
+    "@maverick-js/signals" "^5.10.3"
+    type-fest "^3.8.0"
+
 mdast-util-compact@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz#cabc69a2f43103628326f35b1acf735d55c99490"
@@ -10365,6 +10394,16 @@ mdn-data@2.0.4:
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+media-captions@0.0.18:
+  version "0.0.18"
+  resolved "https://registry.npmjs.org/media-captions/-/media-captions-0.0.18.tgz#ad2de78b06d6d222407057279a1595f8b0408a7e"
+  integrity sha512-JW18P6FuHdyLSGwC4TQ0kF3WdNj/+wMw2cKOb8BnmY6vSJGtnwJ+vkYj+IjHOV34j3XMc70HDeB/QYKR7E7fuQ==
+
+media-captions@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/media-captions/-/media-captions-1.0.4.tgz#aaacb6a554f7549fc7308b6b7cf766686cf42fad"
+  integrity sha512-cyDNmuZvvO4H27rcBq2Eudxo9IZRDCOX/I7VEyqbxsEiD2Ei7UYUhG/Sc5fvMZjmathgz3fEK7iAKqvpY+Ux1w==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -13625,16 +13664,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13738,14 +13768,7 @@ stringify-entities@^3.0.0:
     character-entities-legacy "^1.0.0"
     xtend "^4.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13824,6 +13847,11 @@ style-loader@^3.3.0, style-loader@^3.3.1:
   resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7"
   integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==
 
+style-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
+  integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==
+
 style-value-types@5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
@@ -14374,6 +14402,11 @@ type-fest@^2.19.0, type-fest@~2.19:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
 
+type-fest@^3.8.0:
+  version "3.13.1"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
+  integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -14845,6 +14878,15 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+vidstack@^0.6.15:
+  version "0.6.15"
+  resolved "https://registry.npmjs.org/vidstack/-/vidstack-0.6.15.tgz#478ce7f6f93615002e4ef10e70eec42078578437"
+  integrity sha512-pI2aixBuOpu/LSnRgNJ40tU/KFW+x1X+O2bW1hz946ZZShDM5oqRXF9pavDOuckHAHPgUN9HYUr9vUNTBUPF1Q==
+  dependencies:
+    maverick.js "0.37.0"
+    media-captions "0.0.18"
+    type-fest "^3.8.0"
+
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
@@ -15132,7 +15174,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -15150,15 +15192,6 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 2219eb6524a85f6977b3b982ae7a72314bd61b36 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Sun, 5 Jan 2025 18:36:00 +0530
Subject: [PATCH 02/29] cleanups & jest ignore module

---
 packages/gamut/jest.config.ts                 |   1 +
 .../src/VideoPlayer/styles/index.module.scss  | 171 ------------------
 packages/styleguide/.storybook/main.ts        |   2 +-
 3 files changed, 2 insertions(+), 172 deletions(-)

diff --git a/packages/gamut/jest.config.ts b/packages/gamut/jest.config.ts
index 4c754b1fbb..fcad1bb482 100644
--- a/packages/gamut/jest.config.ts
+++ b/packages/gamut/jest.config.ts
@@ -8,4 +8,5 @@ export default base('gamut', {
   setupFiles: ['<rootDir>/../../script/jest/base-setup.js'],
   setupFilesAfterEnv: ['<rootDir>/../../script/jest/rtl-setup.js'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  transformIgnorePatterns: ["node_modules/(?!(@vidstack/react)/)"],
 });
diff --git a/packages/gamut/src/VideoPlayer/styles/index.module.scss b/packages/gamut/src/VideoPlayer/styles/index.module.scss
index 1f8dab1b92..c0eb4f0446 100644
--- a/packages/gamut/src/VideoPlayer/styles/index.module.scss
+++ b/packages/gamut/src/VideoPlayer/styles/index.module.scss
@@ -4,174 +4,3 @@
   position: relative;
   width: 100%;
 }
-
-.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;
-}
-
-.player {
-  --media-brand: #f5f5f5;
-  --media-focus-ring-color: #4e9cf6;
-  --media-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
-  width: 100%;
-}
-
-.player[data-view-type='audio'] {
-  --media-tooltip-y-offset: 44px;
-  --media-menu-y-offset: 40px;
-  --media-slider-chapter-title-color: black;
-  --media-border-radius: 4px;
-  background-color: #212121;
-  border-radius: var(--media-border-radius);
-  contain: layout;
-}
-
-.player[data-view-type='video'] {
-  --media-tooltip-y-offset: 30px;
-  --media-menu-y-offset: 30px;
-  --media-border-radius: 6px;
-  aspect-ratio: 16 /9;
-  background-color: #212121;
-  border-radius: var(--media-border-radius);
-  contain: layout;
-}
-
-.player video,
-.poster {
-  border-radius: var(--media-border-radius);
-}
-
-.srcButtons {
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-  margin-top: 40px;
-  margin-inline: auto;
-  max-width: 300px;
-}
-
-/*************************************************************************************************
- * Controls
- *************************************************************************************************/
-
- .controls :global(.vds-time-slider) {
-  --media-slider-height: 40px;
-}
-
-.controls :global(.vds-time-slider .vds-slider-value) {
-  background-color: unset;
-}
-
-.controls :global(.vds-volume-slider) {
-  --media-slider-height: 40px;
-  --media-slider-preview-offset: 32px;
-  margin-left: 1.5px;
-  max-width: 80px;
-}
-
-.controls :global(.vds-time-group) {
-  margin-left: 8px;
-}
-
-.controlsGroup {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.controlsGroup {
-  padding-inline: 8px;
-}
-
-.controlsGroup:last-child {
-  margin-top: -4px;
-  padding-bottom: 8px;
-}
-
-/*************************************************************************************************
- * Gestures
- *************************************************************************************************/
-
-.gesture {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-}
-
-.gesture[action='seek:-10'],
-.gesture[action='seek:10'] {
-  width: 20%;
-  z-index: 1;
-}
-
-.gesture[action='seek:10'] {
-  left: unset;
-  right: 0;
-}
-
-/* Remove toggle to pause on touch. */
-@media (pointer: coarse) {
-  .gesture[action='toggle:paused'] {
-    display: none;
-  }
-}
-
-/* Remove toggle controls on mouse. */
-@media not (pointer: coarse) {
-  .gesture[action='toggle:controls'] {
-    display: none;
-  }
-}
-
-/*************************************************************************************************
- * Captions
- *************************************************************************************************/
-
-.captions {
-  z-index: 10;
-  bottom: 0;
-  transition: bottom 0.15s linear;
-}
-
-/* Pull captions up when controls are visible. */
-:global(.media-player[data-controls]) .captions {
-  bottom: 80px;
-}
-
-/* Hide captions when interacting with time slider. */
-:global(.media-player[data-preview]) .captions {
-  opacity: 0;
-}
diff --git a/packages/styleguide/.storybook/main.ts b/packages/styleguide/.storybook/main.ts
index 516ac08b95..74a118f38b 100644
--- a/packages/styleguide/.storybook/main.ts
+++ b/packages/styleguide/.storybook/main.ts
@@ -1,5 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
-import { dirname, join, resolve } from 'path';
+import { resolve, dirname, join } from 'path';
 
 const config: StorybookConfig = {
   stories: [

From b359bce261dbf181510dd297e67074d89362c816 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Tue, 7 Jan 2025 19:00:47 +0530
Subject: [PATCH 03/29] fix: src type

---
 packages/gamut/src/VideoPlayer/index.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/gamut/src/VideoPlayer/index.tsx b/packages/gamut/src/VideoPlayer/index.tsx
index ecf5fcd660..aca1314711 100644
--- a/packages/gamut/src/VideoPlayer/index.tsx
+++ b/packages/gamut/src/VideoPlayer/index.tsx
@@ -2,7 +2,7 @@
 import './styles/_vds-variables.scss';
 
 import { MediaPlayer, MediaPlayerInstance, MediaProvider, Poster, Track, TrackProps } from '@vidstack/react';
-import { ThumbnailSrc } from '@vidstack/react/types/vidstack';
+import { PlayerSrc, ThumbnailSrc } from '@vidstack/react/types/vidstack';
 import cx from 'classnames';
 import * as React from 'react';
 import { useState } from 'react';
@@ -22,9 +22,9 @@ export type VideoPlayerProps = {
   onReady?: (player: any) => void;
   placeholderImage?: string;
   videoTitle?: string;
-  videoUrl: string;
+  videoUrl: PlayerSrc;
   width?: number;
-  textTracks: TrackProps[];
+  textTracks?: TrackProps[];
   thumbnails?: ThumbnailSrc;
 };
 
@@ -66,10 +66,13 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
           onCanPlay={onReady}
         >
           <MediaProvider>
-            <Poster
-              className="vds-poster"
-              src={placeholderImage || null}
-            />
+            {placeholderImage && (
+              <Poster
+                className="vds-poster"
+                alt={videoTitle}
+                src={placeholderImage}
+              />
+            )}
             {textTracks?.map((track) => (
               <Track {...track} key={track.src} />
             ))}

From 7020badc7aaefcbaf1610ad710accaa4e5dfc520 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Tue, 7 Jan 2025 19:01:04 +0530
Subject: [PATCH 04/29] feat: theme based on colormodes

---
 packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx b/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
index eb6db77397..b008c1de9e 100644
--- a/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
+++ b/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
@@ -1,4 +1,5 @@
 import { ViewIcon, ViewOffIcon } from '@codecademy/gamut-icons';
+import { useColorModes } from '@codecademy/gamut-styles';
 import { useMediaRemote } from '@vidstack/react';
 import { DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
 import { ThumbnailSrc } from '@vidstack/react/types/vidstack';
@@ -21,9 +22,11 @@ export const VideoLayout: React.FC<VideoLayoutProps> = ({
     setAdActive,
 }) => {
     const playerRemote = useMediaRemote();
+    const [mode] = useColorModes();
 
     return (
         <DefaultVideoLayout
+            colorScheme={mode}
             hidden={controls}
             icons={customIcons}
             // smallLayoutWhen={false}

From 397050166131e2fbc6a4f3a1182b4ebbe8fe6ef0 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Tue, 7 Jan 2025 19:01:19 +0530
Subject: [PATCH 05/29] feat: custom caption toggle in settings

---
 packages/gamut/src/VideoPlayer/lib/slots.tsx | 67 +++++++++++++++-----
 1 file changed, 50 insertions(+), 17 deletions(-)

diff --git a/packages/gamut/src/VideoPlayer/lib/slots.tsx b/packages/gamut/src/VideoPlayer/lib/slots.tsx
index 7ed8904237..75e5b91c54 100644
--- a/packages/gamut/src/VideoPlayer/lib/slots.tsx
+++ b/packages/gamut/src/VideoPlayer/lib/slots.tsx
@@ -1,21 +1,54 @@
 import { ArrowLeftIcon } from '@codecademy/gamut-icons';
-import { SeekButton } from '@vidstack/react';
+import { theme } from '@codecademy/gamut-styles';
+import { isTrackCaptionKind, SeekButton, useMediaRemote, useMediaState } from '@vidstack/react';
+import { DefaultVideoLayoutProps, DefaultVideoLayoutSlots } from '@vidstack/react/types/vidstack-react';
 
+import { Toggle } from '../../Toggle';
 
-export const customLayoutSlots = {
-    smallLayout: {
-        beforeCaptionButton: (
-          <SeekButton className="vds-button" seconds={-10}>
-            <ArrowLeftIcon className="vds-icon" />
-          </SeekButton>
-        )
-      },
-      largeLayout: {
-        afterPlayButton: (
-          <SeekButton className="vds-button" seconds={-10}>
-            <ArrowLeftIcon className="vds-icon" />
-          </SeekButton>
-        ),
-      },
-      googleCastButton: null,
+const CaptionToggle = () => { 
+  const playerRemote = useMediaRemote()
+  const $track = useMediaState('textTrack');
+  const isOn = $track && isTrackCaptionKind($track);
+ 
+  return (
+    <Toggle
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 'var(--item-padding)',
+        color: theme.colors.text,
+      }}
+      label="Captions"
+      labelSide="left"
+      size='small'
+      checked={isOn || false}
+      onChange={() => {
+        playerRemote.toggleCaptions()
+      }} 
+    />
+  )
+}
+
+export const customLayoutSlots: DefaultVideoLayoutSlots | DefaultVideoLayoutProps = {
+  smallLayout: {
+    beforeCaptionButton: (
+      <SeekButton className="vds-button" seconds={-10}>
+      <ArrowLeftIcon className="vds-icon" />
+      </SeekButton>
+    )
+  },
+  largeLayout: {
+    afterPlayButton: (
+      <SeekButton className="vds-button" seconds={-10}>
+      <ArrowLeftIcon className="vds-icon" />
+      </SeekButton>
+    ),
+  },
+  googleCastButton: null,
+  beforeSettingsMenuStartItems: (
+    <CaptionToggle />
+  )
 }
\ No newline at end of file

From bce8bcea3ad47cf0c86fa0696f71abb9846d3d71 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Tue, 7 Jan 2025 19:30:47 +0530
Subject: [PATCH 06/29] deploy

---
 packages/gamut/src/VideoPlayer/lib/slots.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gamut/src/VideoPlayer/lib/slots.tsx b/packages/gamut/src/VideoPlayer/lib/slots.tsx
index 75e5b91c54..6ade1d007d 100644
--- a/packages/gamut/src/VideoPlayer/lib/slots.tsx
+++ b/packages/gamut/src/VideoPlayer/lib/slots.tsx
@@ -36,14 +36,14 @@ export const customLayoutSlots: DefaultVideoLayoutSlots | DefaultVideoLayoutProp
   smallLayout: {
     beforeCaptionButton: (
       <SeekButton className="vds-button" seconds={-10}>
-      <ArrowLeftIcon className="vds-icon" />
+        <ArrowLeftIcon className="vds-icon" />
       </SeekButton>
     )
   },
   largeLayout: {
     afterPlayButton: (
       <SeekButton className="vds-button" seconds={-10}>
-      <ArrowLeftIcon className="vds-icon" />
+        <ArrowLeftIcon className="vds-icon" />
       </SeekButton>
     ),
   },

From bfcc0564d40c52b97b1eac70c106abef2d0bd746 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Tue, 7 Jan 2025 21:28:14 +0530
Subject: [PATCH 07/29] chore: updates to styleguide

---
 packages/gamut/src/VideoPlayer/index.tsx                   | 4 ++--
 packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx         | 4 ++--
 .../src/lib/Molecules/VideoPlayer/VideoPlayer.mdx          | 7 +++----
 .../src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx  | 4 ----
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/gamut/src/VideoPlayer/index.tsx b/packages/gamut/src/VideoPlayer/index.tsx
index aca1314711..8d5497c37b 100644
--- a/packages/gamut/src/VideoPlayer/index.tsx
+++ b/packages/gamut/src/VideoPlayer/index.tsx
@@ -31,7 +31,7 @@ export type VideoPlayerProps = {
 export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   autoplay = false,
   className,
-  controls = false,
+  controls = true,
   loop = false,
   muted = false,
   onPlay,
@@ -40,7 +40,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   videoTitle,
   videoUrl,
   textTracks,
-  thumbnails
+  thumbnails,
 }) => {
   const [loading, setLoading] = useState(true);
   const [adActive, setAdActive] = useState(false);
diff --git a/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx b/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
index b008c1de9e..ea221d9e15 100644
--- a/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
+++ b/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
@@ -16,7 +16,7 @@ export type VideoLayoutProps = {
   };
   
 export const VideoLayout: React.FC<VideoLayoutProps> = ({
-    controls = false,
+    controls,
     thumbnails,
     adActive,
     setAdActive,
@@ -27,7 +27,7 @@ export const VideoLayout: React.FC<VideoLayoutProps> = ({
     return (
         <DefaultVideoLayout
             colorScheme={mode}
-            hidden={controls}
+            hidden={!controls}
             icons={customIcons}
             // smallLayoutWhen={false}
             playbackRates={[0.5, 1, 1.5, 2]}
diff --git a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
index 25b711ff13..3f007132ef 100644
--- a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
+++ b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
@@ -5,12 +5,11 @@ import { ComponentHeader } from '~styleguide/blocks';
 import * as VideoStories from './VideoPlayer.stories';
 
 export const parameters = {
-  subtitle: `A video player that can play both youtube and vimeo videos
+  subtitle: `A video player
 given a video URL.`,
   design: {
     type: 'figma',
-    url:
-      'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=31226-41393',
+    url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=31226-41393',
   },
   status: 'updating',
   source: {
@@ -26,7 +25,7 @@ given a video URL.`,
 
 ## Usage
 
-Use the Video component to embed a YouTube or Vimeo video using a URL.
+Use the Video Player that is accessible and has support for captions.
 
 ### Best practices:
 
diff --git a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx
index 4e3bdc6901..aaeb1c7fa8 100644
--- a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx
@@ -28,10 +28,6 @@ export const VideoWithPlaceholder: Story = {
     videoUrl: "https://files.vidstack.io/sprite-fight/720p.mp4",
     videoTitle: "Sprite Fight",
     placeholderImage: "https://files.vidstack.io/sprite-fight/poster.webp",
-    autoplay: false,
-    controls: false,
-    loop: false,
-    muted: false,
     textTracks: [{
       "src": "https://files.vidstack.io/sprite-fight/subs/english.vtt",
       "label": "English",

From f06510af1442b9fbd7d6011836bb143f040afede Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Fri, 24 Jan 2025 14:25:57 +0530
Subject: [PATCH 08/29] feat(Video): Vidstack Video Player integration

---
 package.json                                  |   1 -
 packages/gamut/package.json                   |   3 +-
 packages/gamut/src/Video/index.tsx            | 103 ++++++++++++++----
 packages/gamut/src/Video/lib/Player.tsx       |  81 ++++++++++++++
 packages/gamut/src/Video/lib/VideoLayout.tsx  |  36 ++++++
 .../Video/lib/slotOverrides/CaptionToggle.tsx |  37 +++++++
 .../src/Video/lib/slotOverrides/index.tsx     |  15 +++
 .../utils.tsx => Video/lib/utils/icons.tsx}   |   0
 .../src/Video/lib/utils/keyboardShortcuts.ts  |  15 +++
 .../gamut/src/Video/lib/utils/variables.ts    |  39 +++++++
 .../gamut/src/Video/styles/index.module.scss  |   5 +
 .../src/Video/styles/vds_base_theme.scss      |  11 ++
 packages/gamut/src/VideoPlayer/index.tsx      |  90 ---------------
 .../gamut/src/VideoPlayer/lib/VideoLayout.tsx |  55 ----------
 packages/gamut/src/VideoPlayer/lib/slots.tsx  |  54 ---------
 .../VideoPlayer/styles/_vds-variables.scss    |  58 ----------
 .../src/VideoPlayer/styles/index.module.scss  |   6 -
 packages/gamut/src/index.tsx                  |   3 +-
 .../src/lib/Molecules/Video/Video.stories.tsx |  29 ++++-
 .../lib/Molecules/VideoPlayer/VideoPlayer.mdx |  58 ----------
 .../VideoPlayer/VideoPlayer.stories.tsx       |  51 ---------
 yarn.lock                                     |  32 ------
 22 files changed, 346 insertions(+), 436 deletions(-)
 create mode 100644 packages/gamut/src/Video/lib/Player.tsx
 create mode 100644 packages/gamut/src/Video/lib/VideoLayout.tsx
 create mode 100644 packages/gamut/src/Video/lib/slotOverrides/CaptionToggle.tsx
 create mode 100644 packages/gamut/src/Video/lib/slotOverrides/index.tsx
 rename packages/gamut/src/{VideoPlayer/lib/utils.tsx => Video/lib/utils/icons.tsx} (100%)
 create mode 100644 packages/gamut/src/Video/lib/utils/keyboardShortcuts.ts
 create mode 100644 packages/gamut/src/Video/lib/utils/variables.ts
 create mode 100644 packages/gamut/src/Video/styles/vds_base_theme.scss
 delete mode 100644 packages/gamut/src/VideoPlayer/index.tsx
 delete mode 100644 packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
 delete mode 100644 packages/gamut/src/VideoPlayer/lib/slots.tsx
 delete mode 100644 packages/gamut/src/VideoPlayer/styles/_vds-variables.scss
 delete mode 100644 packages/gamut/src/VideoPlayer/styles/index.module.scss
 delete mode 100644 packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
 delete mode 100644 packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx

diff --git a/package.json b/package.json
index c2e39f3dff..c9c6c20f5b 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,6 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@vidstack/react": "^1.12.12",
     "core-js": "3.7.0",
     "lodash": "^4.17.5",
     "react": "18.3.1",
diff --git a/packages/gamut/package.json b/packages/gamut/package.json
index 3165513273..af086c5121 100644
--- a/packages/gamut/package.json
+++ b/packages/gamut/package.json
@@ -26,7 +26,8 @@
     "react-select": "^5.2.2",
     "react-truncate-markup": "^5.1.2",
     "react-use": "^15.3.8",
-    "sanitize-markdown": "^2.6.7"
+    "sanitize-markdown": "^2.6.7",
+    "@vidstack/react": "^1.12.12"
   },
   "files": [
     "dist"
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 519f06c361..ebd88c856f 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,10 +1,16 @@
 import { PlayIcon } from '@codecademy/gamut-icons';
+import { TrackProps } from '@vidstack/react';
+import {
+  DefaultLayoutTranslations,
+  ThumbnailSrc,
+} from '@vidstack/react/types/vidstack';
 import cx from 'classnames';
-import { useState } from 'react';
 import * as React from 'react';
+import { useState } from 'react';
 import ReactPlayer from 'react-player';
 
 import { useIsMounted } from '../utils';
+import { Player as MediaPlayer } from './lib/Player';
 // eslint-disable-next-line gamut/no-css-standalone
 import styles from './styles/index.module.scss';
 
@@ -34,26 +40,34 @@ export type VideoProps = {
   loop?: boolean;
   muted?: boolean;
   onPlay?: () => void;
-  onReady?: (player: ReactPlayerWithWrapper) => void;
+  onReady?: (player: any) => void;
   placeholderImage?: string | boolean;
   videoTitle?: string;
   videoUrl: string;
   width?: number;
+  textTracks?: TrackProps[];
+  thumbnails?: ThumbnailSrc;
+  translations?: Partial<DefaultLayoutTranslations>;
+  showPlayerEmbed?: boolean;
 };
 
 export const Video: React.FC<VideoProps> = ({
-  autoplay,
+  autoplay = false,
   className,
-  controls,
+  controls = true,
   height,
-  loop,
-  muted,
+  loop = false,
+  muted = false,
   onPlay,
   onReady,
   placeholderImage,
   videoTitle,
   videoUrl,
   width,
+  textTracks,
+  thumbnails,
+  translations,
+  showPlayerEmbed,
 }) => {
   const [loading, setLoading] = useState(true);
   const isMounted = useIsMounted();
@@ -67,31 +81,72 @@ export const Video: React.FC<VideoProps> = ({
     },
   };
 
+  const hasExternallyHostedVideoAndEmbedEnabled =
+    videoUrl &&
+    showPlayerEmbed &&
+    (videoUrl.match(/youtu(be\.com|\.be)/) || videoUrl.match(/vimeo.com/));
+
+  /**
+   * If the video is externally hosted and showPlayerEmbed is true, use ReactPlayer to render the video
+   * Otherwise, use the Vidstack MediaPlayer. This is because currently vidstack player has an issue with
+   * youtube iframe embeds where it keeps pausing (only in case if yt iframe is used i.e with native yt controls)
+   */
+  if (hasExternallyHostedVideoAndEmbedEnabled) {
+    return (
+      <div
+        className={cx(
+          styles.videoWrapper,
+          loading && styles.loading,
+          className
+        )}
+      >
+        {isMounted ? (
+          <ReactPlayer
+            className={styles.iframe}
+            config={config}
+            controls={controls === undefined ? true : controls}
+            height={height}
+            light={placeholderImage}
+            loop={loop}
+            muted={muted}
+            playIcon={<OverlayPlayButton videoTitle={videoTitle} />}
+            playing={autoplay}
+            title={videoTitle}
+            url={videoUrl}
+            width={width}
+            onReady={(player: ReactPlayerWithWrapper) => {
+              onReady?.(player);
+              setLoading(false);
+            }}
+            onPlay={onPlay}
+          />
+        ) : null}
+      </div>
+    );
+  }
+
   return (
     <div
-      className={cx(styles.videoWrapper, loading && styles.loading, className)}
+      className={cx(styles.vdsWrapper, loading && styles.loading, className)}
+      style={{ width, height }}
     >
-      {isMounted ? (
-        <ReactPlayer
-          className={styles.iframe}
-          config={config}
-          controls={controls === undefined ? true : controls}
-          height={height}
-          light={placeholderImage}
+      {isMounted && (
+        <MediaPlayer
+          autoplay={autoplay}
+          controls={controls}
           loop={loop}
           muted={muted}
-          playIcon={<OverlayPlayButton videoTitle={videoTitle} />}
-          playing={autoplay}
-          title={videoTitle}
-          url={videoUrl}
-          width={width}
-          onReady={(player: ReactPlayerWithWrapper) => {
-            onReady?.(player);
-            setLoading(false);
-          }}
           onPlay={onPlay}
+          onReady={onReady}
+          placeholderImage={placeholderImage}
+          videoTitle={videoTitle}
+          videoUrl={videoUrl}
+          textTracks={textTracks}
+          thumbnails={thumbnails}
+          translations={translations}
+          onLoad={() => setLoading(false)}
         />
-      ) : null}
+      )}
     </div>
   );
 };
diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
new file mode 100644
index 0000000000..0d1eb50712
--- /dev/null
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -0,0 +1,81 @@
+/* eslint-disable gamut/no-css-standalone */
+import '../styles/vds_base_theme.scss';
+
+import { styledOptions } from '@codecademy/gamut-styles';
+import styled, { CSSObject } from '@emotion/styled';
+import {
+  MediaPlayer,
+  MediaPlayerInstance,
+  MediaProvider,
+  Poster,
+  Track,
+} from '@vidstack/react';
+import React from 'react';
+
+import { VideoProps } from '..';
+import { keyboardShortcuts } from './utils/keyboardShortcuts';
+import { vdsVariables } from './utils/variables';
+import { VideoLayout } from './VideoLayout';
+
+const VariableProvider = styled(
+  'div',
+  styledOptions(['variables'])
+)<{ variables?: CSSObject }>(({ variables }) => variables);
+
+type PlayerProps = VideoProps & {
+  onLoad: () => void;
+};
+
+export const Player: React.FC<PlayerProps> = ({
+  autoplay,
+  controls,
+  loop,
+  muted,
+  onPlay,
+  onReady,
+  onLoad,
+  placeholderImage,
+  videoTitle,
+  videoUrl,
+  textTracks,
+  thumbnails,
+  translations,
+}) => {
+  const player = React.useRef<MediaPlayerInstance>(null);
+
+  return (
+    <VariableProvider variables={vdsVariables}>
+      <MediaPlayer
+        title={videoTitle}
+        src={videoUrl}
+        playsInline
+        ref={player}
+        autoPlay={autoplay}
+        loop={loop}
+        muted={muted}
+        onLoad={onLoad}
+        onPlay={onPlay}
+        onCanPlay={onReady}
+        keyShortcuts={keyboardShortcuts}
+      >
+        <MediaProvider>
+          {placeholderImage && (
+            <Poster
+              className="vds-poster"
+              alt={videoTitle}
+              src={placeholderImage as string}
+            />
+          )}
+          {textTracks?.map((track) => (
+            <Track {...track} key={track.src} />
+          ))}
+        </MediaProvider>
+        <VideoLayout
+          controls={controls}
+          thumbnails={thumbnails}
+          translations={translations}
+        />
+      </MediaPlayer>
+    </VariableProvider>
+  );
+};
diff --git a/packages/gamut/src/Video/lib/VideoLayout.tsx b/packages/gamut/src/Video/lib/VideoLayout.tsx
new file mode 100644
index 0000000000..d9dd352600
--- /dev/null
+++ b/packages/gamut/src/Video/lib/VideoLayout.tsx
@@ -0,0 +1,36 @@
+import { useCurrentMode } from '@codecademy/gamut-styles';
+import { DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
+import {
+  DefaultLayoutTranslations,
+  ThumbnailSrc,
+} from '@vidstack/react/types/vidstack';
+
+import { customLayoutSlots } from './slotOverrides';
+import { customIcons } from './utils/icons';
+
+export type VideoLayoutProps = {
+  controls?: boolean;
+  thumbnails?: ThumbnailSrc;
+  translations?: Partial<DefaultLayoutTranslations>;
+};
+
+export const VideoLayout: React.FC<VideoLayoutProps> = ({
+  controls,
+  thumbnails,
+  translations,
+}) => {
+  const mode = useCurrentMode();
+
+  return (
+    <DefaultVideoLayout
+      translations={translations}
+      colorScheme={mode}
+      hidden={!controls}
+      icons={customIcons}
+      smallLayoutWhen={false}
+      thumbnails={thumbnails}
+      slots={customLayoutSlots}
+      noAudioGain
+    />
+  );
+};
diff --git a/packages/gamut/src/Video/lib/slotOverrides/CaptionToggle.tsx b/packages/gamut/src/Video/lib/slotOverrides/CaptionToggle.tsx
new file mode 100644
index 0000000000..c6ace53b73
--- /dev/null
+++ b/packages/gamut/src/Video/lib/slotOverrides/CaptionToggle.tsx
@@ -0,0 +1,37 @@
+import { theme } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import { isTrackCaptionKind, useMediaRemote, useMediaState } from '@vidstack/react';
+import { useDefaultLayoutWord } from '@vidstack/react/player/layouts/default';
+
+import { Toggle } from '../../../Toggle';
+
+const StyledToggle = styled(Toggle)`
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    alignItems: center;
+    padding: var(--item-padding);
+    color: ${theme.colors.text};
+`;
+
+export const CaptionToggle = () => { 
+  const playerRemote = useMediaRemote();
+  const captionsText = useDefaultLayoutWord('Captions');
+  const $hasCaptions = useMediaState('hasCaptions');
+  const $track = useMediaState('textTrack');
+  const isOn = $track && isTrackCaptionKind($track);
+ 
+  if (!$hasCaptions) return null;
+  return (
+    <StyledToggle
+      label={captionsText}
+      labelSide="left"
+      size='small'
+      checked={isOn || false}
+      onChange={() => {
+        playerRemote.toggleCaptions()
+      }} 
+    />
+  )
+}
\ No newline at end of file
diff --git a/packages/gamut/src/Video/lib/slotOverrides/index.tsx b/packages/gamut/src/Video/lib/slotOverrides/index.tsx
new file mode 100644
index 0000000000..f42dfa7b5c
--- /dev/null
+++ b/packages/gamut/src/Video/lib/slotOverrides/index.tsx
@@ -0,0 +1,15 @@
+import {
+  DefaultVideoLayoutProps,
+  DefaultVideoLayoutSlots,
+} from '@vidstack/react/types/vidstack-react';
+
+import { CaptionToggle } from './CaptionToggle';
+
+export const customLayoutSlots:
+  | DefaultVideoLayoutSlots
+  | DefaultVideoLayoutProps = {
+  googleCastButton: null,
+  airPlayButton: null,
+  pipButton: null,
+  settingsMenuStartItems: <CaptionToggle />,
+};
diff --git a/packages/gamut/src/VideoPlayer/lib/utils.tsx b/packages/gamut/src/Video/lib/utils/icons.tsx
similarity index 100%
rename from packages/gamut/src/VideoPlayer/lib/utils.tsx
rename to packages/gamut/src/Video/lib/utils/icons.tsx
diff --git a/packages/gamut/src/Video/lib/utils/keyboardShortcuts.ts b/packages/gamut/src/Video/lib/utils/keyboardShortcuts.ts
new file mode 100644
index 0000000000..ba7bc2fbea
--- /dev/null
+++ b/packages/gamut/src/Video/lib/utils/keyboardShortcuts.ts
@@ -0,0 +1,15 @@
+import { MediaKeyShortcuts } from "@vidstack/react";
+
+export const keyboardShortcuts: MediaKeyShortcuts = {
+    togglePaused: 'k Space',
+    toggleMuted: 'm',
+    toggleFullscreen: 'f',
+    togglePictureInPicture: 'i',
+    toggleCaptions: 'c',
+    seekBackward: 'j J ArrowLeft',
+    seekForward: 'l L ArrowRight',
+    volumeUp: 'ArrowUp',
+    volumeDown: 'ArrowDown',
+    speedUp: '>',
+    slowDown: '<',
+}
\ No newline at end of file
diff --git a/packages/gamut/src/Video/lib/utils/variables.ts b/packages/gamut/src/Video/lib/utils/variables.ts
new file mode 100644
index 0000000000..549efec765
--- /dev/null
+++ b/packages/gamut/src/Video/lib/utils/variables.ts
@@ -0,0 +1,39 @@
+import { theme } from "@codecademy/gamut-styles";
+
+interface Variables {
+    [key: string]: string;
+}
+
+/**
+ * Variables for the Vidstack Player
+ * list of variables can be found here:
+ * https://vidstack.io/docs/player/components/layouts/default-layout/?styling=default-theme#css-variables
+ */
+export const vdsVariables: Variables = {
+    // Video Variables
+    '--video-font-family': theme.fontFamily.base,
+    '--video-brand': theme.colors["gray-100"],
+    '--video-controls-color': theme.colors["gray-100"],
+    '--video-focus-ring-color': theme.colors.primary,        
+    '--video-bg': theme.colors.black,
+    '--video-border-radius': theme.borderRadii.md,
+    // Media/Control Variables
+    '--media-button-border-radius': theme.borderRadii.md,
+    '--media-tooltip-bg-color': theme.colors['background-contrast'],
+    '--media-tooltip-border-radius': theme.borderRadii.sm,
+    '--media-tooltip-border': `1px solid ${theme.colors['border-primary']}`,
+    '--media-tooltip-color': theme.colors.text,
+    '--media-tooltip-font-size': theme.fontSize[14],
+    '--media-tooltip-padding': theme.spacing[4],
+    '--media-menu-checkbox-bg-active': theme.colors.primary,
+    '--media-menu-checkbox-bg': theme.colors["text-disabled"], 
+    '--media-menu-checkbox-width': '36px',
+    '--media-menu-checkbox-height': '18px',
+    '--media-menu-checkbox-handle-border': `1px solid ${theme.colors.background}`,
+    '--media-slider-preview-border-radius': theme.borderRadii.sm,
+    '--media-slider-value-bg': theme.colors['background-contrast'],
+    '--media-slider-value-border-radius': theme.borderRadii.sm,
+    '--media-slider-value-border': `1px solid ${theme.colors['border-primary']}`,
+    '--media-slider-value-color': theme.colors.text,
+    '--media-slider-value-padding': theme.spacing[4],
+}
\ No newline at end of file
diff --git a/packages/gamut/src/Video/styles/index.module.scss b/packages/gamut/src/Video/styles/index.module.scss
index 898fbb3936..bb3dbeeb0e 100644
--- a/packages/gamut/src/Video/styles/index.module.scss
+++ b/packages/gamut/src/Video/styles/index.module.scss
@@ -1,5 +1,10 @@
 @import "~@codecademy/gamut-styles/utils";
 
+.vdsWrapper {
+  position: relative;
+  width: 100%;
+}
+
 .videoWrapper {
   position: relative;
   width: 100%;
diff --git a/packages/gamut/src/Video/styles/vds_base_theme.scss b/packages/gamut/src/Video/styles/vds_base_theme.scss
new file mode 100644
index 0000000000..f85a4f576f
--- /dev/null
+++ b/packages/gamut/src/Video/styles/vds_base_theme.scss
@@ -0,0 +1,11 @@
+@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";
+
+.vds-controls button {
+    border-radius: 4px;
+}
+
+.vds-video-layout .vds-time-slider .vds-slider-value {
+    border: unset;
+}
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/index.tsx b/packages/gamut/src/VideoPlayer/index.tsx
deleted file mode 100644
index 8d5497c37b..0000000000
--- a/packages/gamut/src/VideoPlayer/index.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/* eslint-disable gamut/no-css-standalone */
-import './styles/_vds-variables.scss';
-
-import { MediaPlayer, MediaPlayerInstance, MediaProvider, Poster, Track, TrackProps } from '@vidstack/react';
-import { PlayerSrc, ThumbnailSrc } from '@vidstack/react/types/vidstack';
-import cx from 'classnames';
-import * as React from 'react';
-import { useState } from 'react';
-
-import { useIsMounted } from '../utils';
-import { VideoLayout } from './lib/VideoLayout';
-import styles from './styles/index.module.scss';
-
-export type VideoPlayerProps = {
-  autoplay?: boolean;
-  className?: string;
-  controls?: boolean;
-  height?: number;
-  loop?: boolean;
-  muted?: boolean;
-  onPlay?: () => void;
-  onReady?: (player: any) => void;
-  placeholderImage?: string;
-  videoTitle?: string;
-  videoUrl: PlayerSrc;
-  width?: number;
-  textTracks?: TrackProps[];
-  thumbnails?: ThumbnailSrc;
-};
-
-export const VideoPlayer: React.FC<VideoPlayerProps> = ({
-  autoplay = false,
-  className,
-  controls = true,
-  loop = false,
-  muted = false,
-  onPlay,
-  onReady,
-  placeholderImage,
-  videoTitle,
-  videoUrl,
-  textTracks,
-  thumbnails,
-}) => {
-  const [loading, setLoading] = useState(true);
-  const [adActive, setAdActive] = useState(false);
-  const player = React.useRef<MediaPlayerInstance>(null);
-  const isMounted = useIsMounted();
-
-  return (
-    <div
-      className={cx(styles.videoWrapper, loading && styles.loading, className)}
-    >
-      {isMounted && (
-        <MediaPlayer
-          title={videoTitle}
-          src={videoUrl} 
-          playsInline
-          ref={player}
-          aspectRatio='16:9'
-          autoPlay={autoplay}
-          loop={loop}
-          muted={muted}
-          onLoad={() => setLoading(false)}
-          onPlay={onPlay}
-          onCanPlay={onReady}
-        >
-          <MediaProvider>
-            {placeholderImage && (
-              <Poster
-                className="vds-poster"
-                alt={videoTitle}
-                src={placeholderImage}
-              />
-            )}
-            {textTracks?.map((track) => (
-              <Track {...track} key={track.src} />
-            ))}
-          </MediaProvider>
-          <VideoLayout
-            controls={controls}
-            thumbnails={thumbnails}
-            adActive={adActive}
-            setAdActive={setAdActive}
-          />
-        </MediaPlayer>
-      )}
-    </div>
-  );
-};
diff --git a/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx b/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
deleted file mode 100644
index ea221d9e15..0000000000
--- a/packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ViewIcon, ViewOffIcon } from '@codecademy/gamut-icons';
-import { useColorModes } from '@codecademy/gamut-styles';
-import { useMediaRemote } from '@vidstack/react';
-import { DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
-import { ThumbnailSrc } from '@vidstack/react/types/vidstack';
-
-import { IconButton } from '../../Button';
-import { customLayoutSlots } from './slots';
-import { customIcons } from './utils';
-
-export type VideoLayoutProps = {
-    controls?: boolean;
-    thumbnails?: ThumbnailSrc;
-    adActive: boolean;
-    setAdActive: (active: boolean) => void;
-  };
-  
-export const VideoLayout: React.FC<VideoLayoutProps> = ({
-    controls,
-    thumbnails,
-    adActive,
-    setAdActive,
-}) => {
-    const playerRemote = useMediaRemote();
-    const [mode] = useColorModes();
-
-    return (
-        <DefaultVideoLayout
-            colorScheme={mode}
-            hidden={!controls}
-            icons={customIcons}
-            // smallLayoutWhen={false}
-            playbackRates={[0.5, 1, 1.5, 2]}
-            thumbnails={thumbnails}
-            slots={{
-                ...customLayoutSlots,
-                beforeSettingsMenu: (
-                    <IconButton 
-                        mode='dark'
-                        icon={adActive ? ViewIcon : ViewOffIcon}
-                        tip='Audio Description'
-                        onClick={() => {
-                            if (adActive) {
-                                playerRemote.pause();
-                            } else {
-                                playerRemote.play();
-                            }
-                            setAdActive(!adActive)
-                        }}
-                    />
-                )
-            }}  
-        />
-    )
-}
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/lib/slots.tsx b/packages/gamut/src/VideoPlayer/lib/slots.tsx
deleted file mode 100644
index 6ade1d007d..0000000000
--- a/packages/gamut/src/VideoPlayer/lib/slots.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ArrowLeftIcon } from '@codecademy/gamut-icons';
-import { theme } from '@codecademy/gamut-styles';
-import { isTrackCaptionKind, SeekButton, useMediaRemote, useMediaState } from '@vidstack/react';
-import { DefaultVideoLayoutProps, DefaultVideoLayoutSlots } from '@vidstack/react/types/vidstack-react';
-
-import { Toggle } from '../../Toggle';
-
-const CaptionToggle = () => { 
-  const playerRemote = useMediaRemote()
-  const $track = useMediaState('textTrack');
-  const isOn = $track && isTrackCaptionKind($track);
- 
-  return (
-    <Toggle
-      style={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 'var(--item-padding)',
-        color: theme.colors.text,
-      }}
-      label="Captions"
-      labelSide="left"
-      size='small'
-      checked={isOn || false}
-      onChange={() => {
-        playerRemote.toggleCaptions()
-      }} 
-    />
-  )
-}
-
-export const customLayoutSlots: DefaultVideoLayoutSlots | DefaultVideoLayoutProps = {
-  smallLayout: {
-    beforeCaptionButton: (
-      <SeekButton className="vds-button" seconds={-10}>
-        <ArrowLeftIcon className="vds-icon" />
-      </SeekButton>
-    )
-  },
-  largeLayout: {
-    afterPlayButton: (
-      <SeekButton className="vds-button" seconds={-10}>
-        <ArrowLeftIcon className="vds-icon" />
-      </SeekButton>
-    ),
-  },
-  googleCastButton: null,
-  beforeSettingsMenuStartItems: (
-    <CaptionToggle />
-  )
-}
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/styles/_vds-variables.scss b/packages/gamut/src/VideoPlayer/styles/_vds-variables.scss
deleted file mode 100644
index 696c76c86d..0000000000
--- a/packages/gamut/src/VideoPlayer/styles/_vds-variables.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@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";
-
-.vds-video-layout {
-    --video-font-family: "Apercu",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-    --media-button-border-radius: 0;
-    --video-brand: #f5f5f5;
-    --video-controls-color: #f5f5f5;
-    --video-focus-ring-color: rgb(78 156 246);
-    --video-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
-    
-    --video-bg: black;
-    --video-border-radius: 6px;
-    --video-border: 1px solid rgb(255 255 255 / 0.1);
-    
-    --video-fullscreen-chapter-title-font-size: 16px;
-    --video-gesture-seek-width: 20%;
-    
-    /* Load. */
-    --video-load-button-size: 56px;
-    --video-load-button-border: var(--color);
-    --video-load-button-bg: var(--media-brand);
-    --video-load-button-border-radius: 100%;
-    
-    --video-sm-load-button-size: 48px;
-    
-    /* Buttons. */
-    --video-sm-button-size: 32px;
-    --video-sm-play-button-size: 40px;
-    --video-sm-play-button-transform: translateY(25%);
-    --video-sm-play-button-bg: rgba(0 0 0 / 0.6);
-    
-    /* Sliders. */
-    --video-slider-thumbnail-border: 1px solid #f5f5f5;
-    --video-slider-thumbnail-border-radius: 2px;
-    --video-volume-slider-max-width: 72px;
-    
-    --video-sm-slider-focus-track-height: 12px;
-    
-    /* Time. */
-    --video-time-bg: unset;
-    --video-fullscreen-time-font-size: 16px;
-    
-    --video-sm-time-font-size: 14px;
-    --video-sm-start-duration-bg: rgba(0 0 0 / 0.64);
-    --video-sm-start-duration-padding: 3px 6px;
-    --video-sm-start-duration-color: var(--video: controls-color);
-    
-    /* Captions. */
-    --video-captions-offset: 78px;
-    --video-captions-transition: bottom 0.15s linear;
-    
-    --video-sm-captions-offset: 48px;
-    --video-lg-fullscreen-captions-offset: 54px;
-    
-    --video-sm-captions-offset: 48px;
-  }
\ No newline at end of file
diff --git a/packages/gamut/src/VideoPlayer/styles/index.module.scss b/packages/gamut/src/VideoPlayer/styles/index.module.scss
deleted file mode 100644
index c0eb4f0446..0000000000
--- a/packages/gamut/src/VideoPlayer/styles/index.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "~@codecademy/gamut-styles/utils";
-
-.videoWrapper {
-  position: relative;
-  width: 100%;
-}
diff --git a/packages/gamut/src/index.tsx b/packages/gamut/src/index.tsx
index 9fb8f4b034..c6cbdedd4a 100644
--- a/packages/gamut/src/index.tsx
+++ b/packages/gamut/src/index.tsx
@@ -56,5 +56,4 @@ export * from './typings/responsive-properties';
 export * from './Typography/Text';
 export type { HeadingTags } from './Typography/types';
 export * from './utils';
-export * from './Video';
-export * from './VideoPlayer';
+export * from './Video';
\ No newline at end of file
diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx
index a4190901fa..8c7ec80b73 100644
--- a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx
@@ -25,9 +25,30 @@ export const Vimeo: Story = {
 
 export const VideoWithPlaceholder: Story = {
   args: {
-    videoUrl: "https://player.vimeo.com/video/188237476",
-    videoTitle: "A Dream Within a Dream",
-    placeholderImage: "https://placekitten.com/400/300",
-    autoplay: true
+    videoUrl: "https://files.vidstack.io/sprite-fight/hls/stream.m3u8",
+    videoTitle: "Sprite Fight",
+    placeholderImage: "https://files.vidstack.io/sprite-fight/poster.webp",
+    autoplay: false,
+
+    textTracks: [{
+      "src": "https://files.vidstack.io/sprite-fight/subs/english.vtt",
+      "label": "English",
+      "language": "en-US",
+      "kind": "subtitles"
+    }, {
+      "src": "https://files.vidstack.io/sprite-fight/subs/spanish.vtt",
+      "label": "Spanish",
+      "language": "es-ES",
+      "kind": "subtitles",
+      "default": true
+    }, {
+      "src": "https://files.vidstack.io/sprite-fight/chapters.vtt",
+      "language": "en-US",
+      "kind": "chapters",
+      "type": "vtt",
+      "default": true
+    }],
+
+    thumbnails: "https://files.vidstack.io/sprite-fight/thumbnails.vtt"
   },
 };
diff --git a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
deleted file mode 100644
index 3f007132ef..0000000000
--- a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-
-import { ComponentHeader } from '~styleguide/blocks';
-
-import * as VideoStories from './VideoPlayer.stories';
-
-export const parameters = {
-  subtitle: `A video player
-given a video URL.`,
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=31226-41393',
-  },
-  status: 'updating',
-  source: {
-    repo: 'gamut',
-    githubLink:
-      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Video/index.tsx',
-  },
-};
-
-<Meta of={VideoStories} />
-
-<ComponentHeader {...parameters} />
-
-## Usage
-
-Use the Video Player that is accessible and has support for captions.
-
-### Best practices:
-
-- Some videos might have settings where you cannot share/embed them, make sure to check the video URL before making the Video go live.
-
-## Variants
-
-### Custom Video Link
-
-Here is an example with a custom video and placeholder.
-
-<Canvas of={VideoStories.VideoWithPlaceholder} />
-
-### Youtube link
-
-The following video has a YouTube URL.
-
-<Canvas of={VideoStories.Default} />
-
-### Vimeo
-
-Here is an example with a Vimeo URL.
-
-<Canvas of={VideoStories.Vimeo} />
-
-## Playground
-
-<Canvas sourceState="shown" of={VideoStories.Default} />
-
-<Controls />
diff --git a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx b/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx
deleted file mode 100644
index aaeb1c7fa8..0000000000
--- a/packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.stories.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { VideoPlayer } from '@codecademy/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof VideoPlayer> = {
-  component: VideoPlayer,
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof VideoPlayer>;
-
-export const Default: Story = {
-  args: {
-    videoUrl: 'https://www.youtube.com/watch?v=wxds6MAtUQ0',
-    videoTitle: 'Intro to Programming: Loops',
-  },
-};
-
-export const Vimeo: Story = {
-  args: {
-    videoUrl:"https://vimeo.com/773539409",
-    videoTitle:"CODECADEMY | Develop Yourself",
-  },
-};
-
-export const VideoWithPlaceholder: Story = {
-  args: {
-    videoUrl: "https://files.vidstack.io/sprite-fight/720p.mp4",
-    videoTitle: "Sprite Fight",
-    placeholderImage: "https://files.vidstack.io/sprite-fight/poster.webp",
-    textTracks: [{
-      "src": "https://files.vidstack.io/sprite-fight/subs/english.vtt",
-      "label": "English",
-      "language": "en-US",
-      "kind": "subtitles"
-    }, {
-      "src": "https://files.vidstack.io/sprite-fight/subs/spanish.vtt",
-      "label": "Spanish",
-      "language": "es-ES",
-      "kind": "subtitles",
-      "default": true
-    }, {
-      "src": "https://files.vidstack.io/sprite-fight/chapters.vtt",
-      "language": "en-US",
-      "kind": "chapters",
-      "type": "vtt",
-      "default": true
-    }],
-    thumbnails: "https://files.vidstack.io/sprite-fight/thumbnails.vtt"
-  },
-};
diff --git a/yarn.lock b/yarn.lock
index 18eb45f8ec..140eeb07b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1965,11 +1965,6 @@
   dependencies:
     "@lit-labs/ssr-dom-shim" "^1.0.0"
 
-"@maverick-js/signals@^5.10.3":
-  version "5.11.5"
-  resolved "https://registry.npmjs.org/@maverick-js/signals/-/signals-5.11.5.tgz#747490ad174320236378d791600e6fadf2c3072b"
-  integrity sha512-/GO94awrwN9ROYZDMTeByordjvbhcm3CMvB/2aL/sEUy9Va8nM/2GmNgOOe+rrooTGnz8/DzO73xomuBRrnYWw==
-
 "@mdx-js/react@^3.0.0", "@mdx-js/react@^3.1.0":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz#c4522e335b3897b9a845db1dbdd2f966ae8fb0ed"
@@ -10359,14 +10354,6 @@ marked@^4.3.0:
   resolved "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
   integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
 
-maverick.js@0.37.0:
-  version "0.37.0"
-  resolved "https://registry.npmjs.org/maverick.js/-/maverick.js-0.37.0.tgz#3dc371786540ba5cc327179a268b60c165a317d8"
-  integrity sha512-1Dk/9rienLiihlktVvH04ADC2UJTMflC1fOMVQCCaQAaz7hgzDI5i0p/arFbDM52hFFiIcq4RdXtYz47SgsLgw==
-  dependencies:
-    "@maverick-js/signals" "^5.10.3"
-    type-fest "^3.8.0"
-
 mdast-util-compact@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz#cabc69a2f43103628326f35b1acf735d55c99490"
@@ -10394,11 +10381,6 @@ mdn-data@2.0.4:
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-media-captions@0.0.18:
-  version "0.0.18"
-  resolved "https://registry.npmjs.org/media-captions/-/media-captions-0.0.18.tgz#ad2de78b06d6d222407057279a1595f8b0408a7e"
-  integrity sha512-JW18P6FuHdyLSGwC4TQ0kF3WdNj/+wMw2cKOb8BnmY6vSJGtnwJ+vkYj+IjHOV34j3XMc70HDeB/QYKR7E7fuQ==
-
 media-captions@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/media-captions/-/media-captions-1.0.4.tgz#aaacb6a554f7549fc7308b6b7cf766686cf42fad"
@@ -14402,11 +14384,6 @@ type-fest@^2.19.0, type-fest@~2.19:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
 
-type-fest@^3.8.0:
-  version "3.13.1"
-  resolved "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
-  integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
-
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -14878,15 +14855,6 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vidstack@^0.6.15:
-  version "0.6.15"
-  resolved "https://registry.npmjs.org/vidstack/-/vidstack-0.6.15.tgz#478ce7f6f93615002e4ef10e70eec42078578437"
-  integrity sha512-pI2aixBuOpu/LSnRgNJ40tU/KFW+x1X+O2bW1hz946ZZShDM5oqRXF9pavDOuckHAHPgUN9HYUr9vUNTBUPF1Q==
-  dependencies:
-    maverick.js "0.37.0"
-    media-captions "0.0.18"
-    type-fest "^3.8.0"
-
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"

From cd2cd40a03795fbeefa8a2acce6bb78a34136dc4 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Fri, 24 Jan 2025 14:30:12 +0530
Subject: [PATCH 09/29] chore(GamutTests): remove previous snap

---
 packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
index 733311f713..21c0132482 100644
--- a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
+++ b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
@@ -123,6 +123,5 @@ exports[`Gamut Exported Keys 1`] = `
   "useLocalQuery",
   "useSubmitState",
   "Video",
-  "VideoPlayer",
 ]
 `;

From 7bc15a563f297becfc2f4d5f3ebfc38b9e529deb Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Fri, 24 Jan 2025 14:58:18 +0530
Subject: [PATCH 10/29] fix(Markdown): vidstack player test mocks

---
 packages/gamut/src/Markdown/__tests__/Markdown.test.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
index 3bc4705e62..dbf3219617 100644
--- a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
+++ b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
@@ -13,6 +13,13 @@ jest.mock('react-player', () => ({
   __esModule: true,
   default: () => <iframe title={mockTitle} />,
 }));
+jest.mock('@vidstack/react', () => ({
+  __esModule: true,
+  MediaPlayer: () => <iframe title={mockTitle} />,
+  MediaProvider: () => <div />,
+  Poster: jest.fn(),
+  Track: jest.fn(),
+}));
 
 const basicMarkdown = `
 # Heading 1

From 931242822ed3605d456730136cbe60c2aa1e84d3 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Fri, 24 Jan 2025 16:15:42 +0530
Subject: [PATCH 11/29] update(Video): types & props

---
 packages/gamut/src/Video/index.tsx            | 21 ++++++++-------
 packages/gamut/src/Video/lib/Player.tsx       | 26 +++++++++++++------
 packages/gamut/src/Video/lib/VideoLayout.tsx  |  8 ++++++
 .../src/Video/lib/slotOverrides/index.tsx     |  7 +++++
 4 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index ebd88c856f..c302aa6749 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,5 +1,5 @@
 import { PlayIcon } from '@codecademy/gamut-icons';
-import { TrackProps } from '@vidstack/react';
+import { MediaPlayerInstance, PlayerSrc, TrackProps } from '@vidstack/react';
 import {
   DefaultLayoutTranslations,
   ThumbnailSrc,
@@ -10,7 +10,7 @@ import { useState } from 'react';
 import ReactPlayer from 'react-player';
 
 import { useIsMounted } from '../utils';
-import { Player as MediaPlayer } from './lib/Player';
+import { VidstackPlayer } from './lib/Player';
 // eslint-disable-next-line gamut/no-css-standalone
 import styles from './styles/index.module.scss';
 
@@ -40,10 +40,10 @@ export type VideoProps = {
   loop?: boolean;
   muted?: boolean;
   onPlay?: () => void;
-  onReady?: (player: any) => void;
+  onReady?: (player: ReactPlayerWithWrapper | MediaPlayerInstance) => void;
   placeholderImage?: string | boolean;
   videoTitle?: string;
-  videoUrl: string;
+  videoUrl: PlayerSrc;
   width?: number;
   textTracks?: TrackProps[];
   thumbnails?: ThumbnailSrc;
@@ -83,6 +83,7 @@ export const Video: React.FC<VideoProps> = ({
 
   const hasExternallyHostedVideoAndEmbedEnabled =
     videoUrl &&
+    typeof videoUrl === 'string' &&
     showPlayerEmbed &&
     (videoUrl.match(/youtu(be\.com|\.be)/) || videoUrl.match(/vimeo.com/));
 
@@ -126,12 +127,9 @@ export const Video: React.FC<VideoProps> = ({
   }
 
   return (
-    <div
-      className={cx(styles.vdsWrapper, loading && styles.loading, className)}
-      style={{ width, height }}
-    >
+    <>
       {isMounted && (
-        <MediaPlayer
+        <VidstackPlayer
           autoplay={autoplay}
           controls={controls}
           loop={loop}
@@ -145,8 +143,11 @@ export const Video: React.FC<VideoProps> = ({
           thumbnails={thumbnails}
           translations={translations}
           onLoad={() => setLoading(false)}
+          width={width}
+          height={height}
+          className={className}
         />
       )}
-    </div>
+    </>
   );
 };
diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
index 0d1eb50712..cb27a7eac8 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -10,23 +10,24 @@ import {
   Poster,
   Track,
 } from '@vidstack/react';
+import cx from 'classnames';
 import React from 'react';
 
 import { VideoProps } from '..';
+import styles from '../styles/index.module.scss';
 import { keyboardShortcuts } from './utils/keyboardShortcuts';
 import { vdsVariables } from './utils/variables';
 import { VideoLayout } from './VideoLayout';
 
-const VariableProvider = styled(
-  'div',
-  styledOptions(['variables'])
-)<{ variables?: CSSObject }>(({ variables }) => variables);
+const VariableProvider = styled('div', styledOptions(['variables']))<{
+  variables?: CSSObject;
+}>(({ variables }) => variables, { width: '100%' });
 
-type PlayerProps = VideoProps & {
+type VidstackPlayerProps = VideoProps & {
   onLoad: () => void;
 };
 
-export const Player: React.FC<PlayerProps> = ({
+export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
   autoplay,
   controls,
   loop,
@@ -40,11 +41,18 @@ export const Player: React.FC<PlayerProps> = ({
   textTracks,
   thumbnails,
   translations,
+  width,
+  height,
+  className,
 }) => {
   const player = React.useRef<MediaPlayerInstance>(null);
 
   return (
-    <VariableProvider variables={vdsVariables}>
+    <VariableProvider
+      variables={vdsVariables}
+      className={cx(styles.vdsWrapper, className)}
+      style={{ width, height }}
+    >
       <MediaPlayer
         title={videoTitle}
         src={videoUrl}
@@ -55,7 +63,9 @@ export const Player: React.FC<PlayerProps> = ({
         muted={muted}
         onLoad={onLoad}
         onPlay={onPlay}
-        onCanPlay={onReady}
+        onCanPlay={() => {
+          if (player?.current) onReady?.(player.current);
+        }}
         keyShortcuts={keyboardShortcuts}
       >
         <MediaProvider>
diff --git a/packages/gamut/src/Video/lib/VideoLayout.tsx b/packages/gamut/src/Video/lib/VideoLayout.tsx
index d9dd352600..34743e3caa 100644
--- a/packages/gamut/src/Video/lib/VideoLayout.tsx
+++ b/packages/gamut/src/Video/lib/VideoLayout.tsx
@@ -14,6 +14,14 @@ export type VideoLayoutProps = {
   translations?: Partial<DefaultLayoutTranslations>;
 };
 
+/**
+ * VideoLayout component
+ *
+ * This component is responsible for rendering the layout of the video player.
+ * It uses the DefaultVideoLayout component from the vidstack library and applies
+ * custom icons, slots, and other configurations.
+ * For more info see: https://vidstack.io/docs/player/components/layouts/default-layout
+ */
 export const VideoLayout: React.FC<VideoLayoutProps> = ({
   controls,
   thumbnails,
diff --git a/packages/gamut/src/Video/lib/slotOverrides/index.tsx b/packages/gamut/src/Video/lib/slotOverrides/index.tsx
index f42dfa7b5c..659d7946c3 100644
--- a/packages/gamut/src/Video/lib/slotOverrides/index.tsx
+++ b/packages/gamut/src/Video/lib/slotOverrides/index.tsx
@@ -5,6 +5,13 @@ import {
 
 import { CaptionToggle } from './CaptionToggle';
 
+/**
+ * Custom layout slots for the video player
+ *
+ * This defines custom slots for the DefaultVideoLayout component and
+ * overrides certain default slots with custom components or null values.
+ * For more info see: https://vidstack.io/docs/player/components/layouts/default-layout/?styling=default-theme#slots
+ */
 export const customLayoutSlots:
   | DefaultVideoLayoutSlots
   | DefaultVideoLayoutProps = {

From 706a131ab848d8a94b4d76baca568a5957fc8c0c Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Fri, 24 Jan 2025 17:50:55 +0530
Subject: [PATCH 12/29] chore(Video): remove refs

---
 packages/gamut/src/Video/index.tsx      |  4 +-
 packages/gamut/src/Video/lib/Player.tsx | 91 +++++++++++--------------
 2 files changed, 42 insertions(+), 53 deletions(-)

diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index c302aa6749..39d1dc0d4f 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,5 +1,5 @@
 import { PlayIcon } from '@codecademy/gamut-icons';
-import { MediaPlayerInstance, PlayerSrc, TrackProps } from '@vidstack/react';
+import { PlayerSrc, TrackProps } from '@vidstack/react';
 import {
   DefaultLayoutTranslations,
   ThumbnailSrc,
@@ -40,7 +40,7 @@ export type VideoProps = {
   loop?: boolean;
   muted?: boolean;
   onPlay?: () => void;
-  onReady?: (player: ReactPlayerWithWrapper | MediaPlayerInstance) => void;
+  onReady?: (player?: ReactPlayerWithWrapper) => void;
   placeholderImage?: string | boolean;
   videoTitle?: string;
   videoUrl: PlayerSrc;
diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
index cb27a7eac8..7f66142b52 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -3,13 +3,7 @@ import '../styles/vds_base_theme.scss';
 
 import { styledOptions } from '@codecademy/gamut-styles';
 import styled, { CSSObject } from '@emotion/styled';
-import {
-  MediaPlayer,
-  MediaPlayerInstance,
-  MediaProvider,
-  Poster,
-  Track,
-} from '@vidstack/react';
+import { MediaPlayer, MediaProvider, Poster, Track } from '@vidstack/react';
 import cx from 'classnames';
 import React from 'react';
 
@@ -44,48 +38,43 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
   width,
   height,
   className,
-}) => {
-  const player = React.useRef<MediaPlayerInstance>(null);
-
-  return (
-    <VariableProvider
-      variables={vdsVariables}
-      className={cx(styles.vdsWrapper, className)}
-      style={{ width, height }}
+}) => (
+  <VariableProvider
+    variables={vdsVariables}
+    className={cx(styles.vdsWrapper, className)}
+    style={{ width, height }}
+  >
+    <MediaPlayer
+      title={videoTitle}
+      src={videoUrl}
+      playsInline
+      autoPlay={autoplay}
+      loop={loop}
+      muted={muted}
+      onLoad={onLoad}
+      onPlay={onPlay}
+      onCanPlay={() => {
+        onReady?.();
+      }}
+      keyShortcuts={keyboardShortcuts}
     >
-      <MediaPlayer
-        title={videoTitle}
-        src={videoUrl}
-        playsInline
-        ref={player}
-        autoPlay={autoplay}
-        loop={loop}
-        muted={muted}
-        onLoad={onLoad}
-        onPlay={onPlay}
-        onCanPlay={() => {
-          if (player?.current) onReady?.(player.current);
-        }}
-        keyShortcuts={keyboardShortcuts}
-      >
-        <MediaProvider>
-          {placeholderImage && (
-            <Poster
-              className="vds-poster"
-              alt={videoTitle}
-              src={placeholderImage as string}
-            />
-          )}
-          {textTracks?.map((track) => (
-            <Track {...track} key={track.src} />
-          ))}
-        </MediaProvider>
-        <VideoLayout
-          controls={controls}
-          thumbnails={thumbnails}
-          translations={translations}
-        />
-      </MediaPlayer>
-    </VariableProvider>
-  );
-};
+      <MediaProvider>
+        {placeholderImage && (
+          <Poster
+            className="vds-poster"
+            alt={videoTitle}
+            src={placeholderImage as string}
+          />
+        )}
+        {textTracks?.map((track) => (
+          <Track {...track} key={track.src} />
+        ))}
+      </MediaProvider>
+      <VideoLayout
+        controls={controls}
+        thumbnails={thumbnails}
+        translations={translations}
+      />
+    </MediaPlayer>
+  </VariableProvider>
+);

From e8ef9a9e2589ecfc0eda1163464439dba353e502 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Mon, 27 Jan 2025 14:47:11 +0530
Subject: [PATCH 13/29] chore(video): icons and tests update

---
 package.json                                  |  1 +
 .../regular/go-backward-10-control-icon.svg   | 10 +++++
 .../gamut/src/Video/__tests__/Video.test.tsx  | 10 ++++-
 .../Video/lib/slotOverrides/SeekBackwards.tsx | 19 +++++++++
 .../src/Video/lib/slotOverrides/index.tsx     |  4 +-
 packages/gamut/src/Video/lib/utils/icons.tsx  | 41 ++++++++++++++-----
 .../src/Video/styles/vds_base_theme.scss      | 21 ++++++++--
 7 files changed, 89 insertions(+), 17 deletions(-)
 create mode 100644 packages/gamut-icons/src/svg/regular/go-backward-10-control-icon.svg
 create mode 100644 packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx

diff --git a/package.json b/package.json
index c9c6c20f5b..c2e39f3dff 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@vidstack/react": "^1.12.12",
     "core-js": "3.7.0",
     "lodash": "^4.17.5",
     "react": "18.3.1",
diff --git a/packages/gamut-icons/src/svg/regular/go-backward-10-control-icon.svg b/packages/gamut-icons/src/svg/regular/go-backward-10-control-icon.svg
new file mode 100644
index 0000000000..47d11df5ad
--- /dev/null
+++ b/packages/gamut-icons/src/svg/regular/go-backward-10-control-icon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs>
+    <title>go-backward-10-control</title>
+    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.10998 4.68623C4.21585 6.37208 2.27065 9.50852 2.27065 13.0993c0 5.3734 4.35601 9.7294 9.72945 9.7294 5.3734 0 9.7294 -4.356 9.7294 -9.7294 0 -5.37342 -4.356 -9.72943 -9.7294 -9.72943h-1.9384" stroke-width="1.5"></path>
+    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M12 1.17139 9.80151 3.36987 12 5.56836" stroke-width="1.5"></path>
+    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m9.13184 9.59937 0 7.00003" stroke-width="1.5"></path>
+    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m7.38184 11.3494 0.59996 0c0.63515 0 1.15004 -0.5149 1.15004 -1.1501l0 -0.59993" stroke-width="1.5"></path>
+    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m10.8818 16.5994 -3.49996 0" stroke-width="1.5"></path>
+    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M13.1182 11.2765v3.6457c0 0.9263 0.7508 1.6772 1.6771 1.6772h0.1457c0.9263 0 1.6772 -0.7509 1.6772 -1.6772v-3.6457c0 -0.9263 -0.7509 -1.67713 -1.6772 -1.67713h-0.1457c-0.9263 0 -1.6771 0.75083 -1.6771 1.67713Z" stroke-width="1.5"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/gamut/src/Video/__tests__/Video.test.tsx b/packages/gamut/src/Video/__tests__/Video.test.tsx
index 8b7aaa15ed..f454712963 100644
--- a/packages/gamut/src/Video/__tests__/Video.test.tsx
+++ b/packages/gamut/src/Video/__tests__/Video.test.tsx
@@ -2,10 +2,16 @@ import { setupRtl } from '@codecademy/gamut-tests';
 
 import { Video } from '..';
 
+jest.mock('@vidstack/react', () => ({
+  MediaPlayer: jest.fn(({ src, title }) => <iframe src={src} title={title} />),
+  MediaProvider: jest.fn(),
+  Poster: jest.fn(),
+  Track: jest.fn(),
+}));
+
 const renderView = setupRtl(Video, {});
 
-// TODO: Fix long-running(?) Video tests. We probably need to mock React Player.
-describe.skip('Video', () => {
+describe('Video', () => {
   it('loads a video with a vimeo URL', async () => {
     const { view } = renderView({
       videoUrl: 'https://vimeo.com/145702525',
diff --git a/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx b/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx
new file mode 100644
index 0000000000..d28040cb75
--- /dev/null
+++ b/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx
@@ -0,0 +1,19 @@
+import { GoBackward10ControlIcon } from '@codecademy/gamut-icons';
+import { SeekButton, Tooltip } from '@vidstack/react';
+import { useDefaultLayoutWord } from '@vidstack/react/player/layouts/default';
+
+export const SeekBackwardsButton = () => {
+  const seekBackwardText = useDefaultLayoutWord('Seek Backward');
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <SeekButton className="vds-button" seconds={-10}>
+          <GoBackward10ControlIcon />
+        </SeekButton>
+      </Tooltip.Trigger>
+      <Tooltip.Content className="vds-tooltip-content" placement="top">
+        {seekBackwardText}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+};
diff --git a/packages/gamut/src/Video/lib/slotOverrides/index.tsx b/packages/gamut/src/Video/lib/slotOverrides/index.tsx
index 659d7946c3..023e08cd26 100644
--- a/packages/gamut/src/Video/lib/slotOverrides/index.tsx
+++ b/packages/gamut/src/Video/lib/slotOverrides/index.tsx
@@ -4,6 +4,7 @@ import {
 } from '@vidstack/react/types/vidstack-react';
 
 import { CaptionToggle } from './CaptionToggle';
+import { SeekBackwardsButton } from './SeekBackwards';
 
 /**
  * Custom layout slots for the video player
@@ -17,6 +18,7 @@ export const customLayoutSlots:
   | DefaultVideoLayoutProps = {
   googleCastButton: null,
   airPlayButton: null,
-  pipButton: null,
+  downloadButton: null,
   settingsMenuStartItems: <CaptionToggle />,
+  afterPlayButton: <SeekBackwardsButton />,
 };
diff --git a/packages/gamut/src/Video/lib/utils/icons.tsx b/packages/gamut/src/Video/lib/utils/icons.tsx
index 4dcdd402e8..efb799cf5a 100644
--- a/packages/gamut/src/Video/lib/utils/icons.tsx
+++ b/packages/gamut/src/Video/lib/utils/icons.tsx
@@ -1,11 +1,32 @@
-import { PauseIcon, PlayIcon, RefreshIcon } from '@codecademy/gamut-icons';
-import { defaultLayoutIcons, DefaultPlayButtonIcons } from '@vidstack/react/player/layouts/default';
+import {
+  FullscreenIcon,
+  GearIcon,
+  ListIcon,
+  MinimizeIcon,
+  PauseIcon,
+  PlayIcon,
+  RefreshIcon,
+} from '@codecademy/gamut-icons';
+import {
+  DefaultLayoutIcon,
+  DefaultLayoutIcons,
+  defaultLayoutIcons,
+} from '@vidstack/react/player/layouts/default';
 
-export const customIcons = {
-    ...defaultLayoutIcons,
-    PlayButton: { 
-        Play: PlayIcon as DefaultPlayButtonIcons['Play'],
-        Pause: PauseIcon as DefaultPlayButtonIcons['Pause'],
-        Replay: RefreshIcon as DefaultPlayButtonIcons['Replay']
-    }
-} 
\ No newline at end of file
+export const customIcons: DefaultLayoutIcons = {
+  ...defaultLayoutIcons,
+  PlayButton: {
+    Play: PlayIcon as DefaultLayoutIcon,
+    Pause: PauseIcon as DefaultLayoutIcon,
+    Replay: RefreshIcon as DefaultLayoutIcon,
+  },
+  Menu: {
+    ...defaultLayoutIcons.Menu,
+    Chapters: ListIcon as DefaultLayoutIcon,
+    Settings: GearIcon as DefaultLayoutIcon,
+  },
+  FullscreenButton: {
+    Enter: FullscreenIcon as DefaultLayoutIcon,
+    Exit: MinimizeIcon as DefaultLayoutIcon,
+  },
+};
diff --git a/packages/gamut/src/Video/styles/vds_base_theme.scss b/packages/gamut/src/Video/styles/vds_base_theme.scss
index f85a4f576f..f0d5ab3d55 100644
--- a/packages/gamut/src/Video/styles/vds_base_theme.scss
+++ b/packages/gamut/src/Video/styles/vds_base_theme.scss
@@ -1,11 +1,24 @@
-@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";
+@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";
 
 .vds-controls button {
-    border-radius: 4px;
+    border-radius: var(--media-button-border-radius);
 }
 
 .vds-video-layout .vds-time-slider .vds-slider-value {
     border: unset;
+    color: white;
+}
+
+iframe.vds-youtube[data-no-controls] {
+    height: 100%;
+}
+
+[data-started] iframe.vds-youtube[data-no-controls] {
+    height: 1000%;
+}
+
+:where(.vds-button .vds-icon) {
+    border-radius: unset;
 }
\ No newline at end of file

From e919c9a054f0c58dc5cea51cb98c85ef1006ebeb Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Mon, 27 Jan 2025 15:03:15 +0530
Subject: [PATCH 14/29] chore(video): icon wrapper

---
 .../Video/lib/slotOverrides/SeekBackwards.tsx   |  2 +-
 packages/gamut/src/Video/lib/utils/icons.tsx    | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx b/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx
index d28040cb75..c8d3be254d 100644
--- a/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx
+++ b/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx
@@ -8,7 +8,7 @@ export const SeekBackwardsButton = () => {
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
         <SeekButton className="vds-button" seconds={-10}>
-          <GoBackward10ControlIcon />
+          <GoBackward10ControlIcon width={20} height={20} />
         </SeekButton>
       </Tooltip.Trigger>
       <Tooltip.Content className="vds-tooltip-content" placement="top">
diff --git a/packages/gamut/src/Video/lib/utils/icons.tsx b/packages/gamut/src/Video/lib/utils/icons.tsx
index efb799cf5a..33c2d6e054 100644
--- a/packages/gamut/src/Video/lib/utils/icons.tsx
+++ b/packages/gamut/src/Video/lib/utils/icons.tsx
@@ -13,20 +13,23 @@ import {
   defaultLayoutIcons,
 } from '@vidstack/react/player/layouts/default';
 
+const IconWrapper = (Icon: DefaultLayoutIcon) => (props: any) =>
+  <Icon {...props} width={18} height={18} />;
+
 export const customIcons: DefaultLayoutIcons = {
   ...defaultLayoutIcons,
   PlayButton: {
-    Play: PlayIcon as DefaultLayoutIcon,
-    Pause: PauseIcon as DefaultLayoutIcon,
-    Replay: RefreshIcon as DefaultLayoutIcon,
+    Play: IconWrapper(PlayIcon as DefaultLayoutIcon),
+    Pause: IconWrapper(PauseIcon as DefaultLayoutIcon),
+    Replay: IconWrapper(RefreshIcon as DefaultLayoutIcon),
   },
   Menu: {
     ...defaultLayoutIcons.Menu,
-    Chapters: ListIcon as DefaultLayoutIcon,
-    Settings: GearIcon as DefaultLayoutIcon,
+    Chapters: IconWrapper(ListIcon as DefaultLayoutIcon),
+    Settings: IconWrapper(GearIcon as DefaultLayoutIcon),
   },
   FullscreenButton: {
-    Enter: FullscreenIcon as DefaultLayoutIcon,
-    Exit: MinimizeIcon as DefaultLayoutIcon,
+    Enter: IconWrapper(FullscreenIcon as DefaultLayoutIcon),
+    Exit: IconWrapper(MinimizeIcon as DefaultLayoutIcon),
   },
 };

From 237c56e981602fe80b6b1b3eb14758c86bc105ec Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Mon, 27 Jan 2025 16:15:50 +0530
Subject: [PATCH 15/29] chore(video): remove module resolution for scss

---
 packages/gamut/src/Video/styles/vds_base_theme.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/gamut/src/Video/styles/vds_base_theme.scss b/packages/gamut/src/Video/styles/vds_base_theme.scss
index f0d5ab3d55..0bad6f0a95 100644
--- a/packages/gamut/src/Video/styles/vds_base_theme.scss
+++ b/packages/gamut/src/Video/styles/vds_base_theme.scss
@@ -1,6 +1,6 @@
-@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";
+@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";
 
 .vds-controls button {
     border-radius: var(--media-button-border-radius);

From 88752d29c6a7c360deb8a0d1ef4934a662d2ca31 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Tue, 28 Jan 2025 19:20:33 +0530
Subject: [PATCH 16/29] chore: add ~ to vidstack styles for resolution

---
 packages/gamut/src/Video/styles/vds_base_theme.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/gamut/src/Video/styles/vds_base_theme.scss b/packages/gamut/src/Video/styles/vds_base_theme.scss
index 0bad6f0a95..f0d5ab3d55 100644
--- a/packages/gamut/src/Video/styles/vds_base_theme.scss
+++ b/packages/gamut/src/Video/styles/vds_base_theme.scss
@@ -1,6 +1,6 @@
-@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";
+@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";
 
 .vds-controls button {
     border-radius: var(--media-button-border-radius);

From 7dae328af6a584dcf4f3bf5c2e15159377528570 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Wed, 29 Jan 2025 10:50:37 +0530
Subject: [PATCH 17/29] chore: icon updates

---
 .../src/svg/mini/mini-accessibility-icon.svg  |  3 ++
 .../svg/mini/mini-audio-description-icon.svg  |  2 +
 .../svg/mini/mini-close-captioning-icon.svg   |  2 +
 .../src/svg/mini/mini-live-video-icon.svg     |  2 +
 .../regular/closed-caption-disabled-icon.svg  |  4 ++
 .../src/svg/regular/closed-caption-icon.svg   |  3 ++
 .../regular/go-backward-10-control-icon.svg   | 10 -----
 .../src/svg/regular/pip-exit-icon.svg         |  3 ++
 .../gamut-icons/src/svg/regular/pip-icon.svg  |  2 +
 .../src/svg/regular/timer-10-icon.svg         |  2 +
 .../svg/regular/volume-control-full-icon.svg  |  4 ++
 .../regular/volume-control-medium-icon.svg    |  2 +
 .../svg/regular/volume-control-mute-icon.svg  |  2 +
 .../Video/lib/slotOverrides/CaptionToggle.tsx | 37 ----------------
 .../Video/lib/slotOverrides/SeekBackwards.tsx |  4 +-
 .../src/Video/lib/slotOverrides/index.tsx     |  9 ++--
 packages/gamut/src/Video/lib/utils/icons.tsx  | 42 +++++++++++++++----
 .../gamut/src/Video/lib/utils/variables.ts    |  1 +
 .../src/Video/styles/vds_base_theme.scss      | 18 ++++++++
 19 files changed, 92 insertions(+), 60 deletions(-)
 create mode 100644 packages/gamut-icons/src/svg/mini/mini-accessibility-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/mini/mini-audio-description-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/mini/mini-close-captioning-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/mini/mini-live-video-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/regular/closed-caption-disabled-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/regular/closed-caption-icon.svg
 delete mode 100644 packages/gamut-icons/src/svg/regular/go-backward-10-control-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/regular/pip-exit-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/regular/pip-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/regular/timer-10-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/regular/volume-control-full-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/regular/volume-control-medium-icon.svg
 create mode 100644 packages/gamut-icons/src/svg/regular/volume-control-mute-icon.svg
 delete mode 100644 packages/gamut/src/Video/lib/slotOverrides/CaptionToggle.tsx

diff --git a/packages/gamut-icons/src/svg/mini/mini-accessibility-icon.svg b/packages/gamut-icons/src/svg/mini/mini-accessibility-icon.svg
new file mode 100644
index 0000000000..cc5612ef7d
--- /dev/null
+++ b/packages/gamut-icons/src/svg/mini/mini-accessibility-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<title>accessibility</title>
+<g id="accessibility--accessibility-assistive-technology-circle"><path id="Union" fill="#000000" fill-rule="evenodd" d="M0 8c0 -4.418274285714285 3.581725714285714 -8 8 -8 4.418285714285714 0 8 3.581725714285714 8 8 0 4.418285714285714 -3.5817142857142854 8 -8 8 -4.418274285714285 0 -8 -3.5817142857142854 -8 -8Zm8 -5.142857142857142c-0.9467771428571428 0 -1.7142857142857142 0.7675085714285714 -1.7142857142857142 1.7142857142857142S7.053222857142857 6.285714285714286 8 6.285714285714286 9.714285714285714 5.518205714285714 9.714285714285714 4.571428571428571 8.946777142857142 2.8571428571428568 8 2.8571428571428568ZM4.571428571428571 7.285714285714286c-0.39449142857142855 0 -0.7142857142857142 0.3197942857142857 -0.7142857142857142 0.7142857142857142s0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142h2.714285714285714v0.002937142857142857c0 0.8577371428571428 -0.28589714285714285 1.6909942857142854 -0.8125028571428571 2.368057142857143l-1.03704 1.3333485714285713c-0.24218285714285712 0.31142857142857144 -0.18609142857142857 0.7601142857142857 0.12530285714285713 1.0022857142857142 0.31138285714285713 0.24228571428571427 0.76016 0.18617142857142854 1.0023542857142855 -0.12525714285714284l1.0370285714285714 -1.3333714285714287c0.14689142857142856 -0.1888 0.2801142857142857 -0.3865142857142857 0.39914285714285713 -0.5916 0.11902857142857143 0.20508571428571426 0.25225142857142857 0.40279999999999994 0.39914285714285713 0.5916l1.0370285714285714 1.3333714285714287c0.2421942857142857 0.31142857142857144 0.6909714285714286 0.3675428571428571 1.0023542857142855 0.12525714285714284 0.3113942857142857 -0.24217142857142857 0.36748571428571425 -0.6908571428571428 0.12530285714285713 -1.0022857142857142l-1.03704 -1.3333485714285713C9.000182857142857 10.408217142857142 8.714285714285714 9.574959999999999 8.714285714285714 8.717222857142858V8.714285714285714H11.428571428571427c0.3945142857142857 0 0.7142857142857142 -0.3197942857142857 0.7142857142857142 -0.7142857142857142s-0.31977142857142854 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142H4.571428571428571Z" clip-rule="evenodd" stroke-width="1.1429"></path></g></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/mini/mini-audio-description-icon.svg b/packages/gamut-icons/src/svg/mini/mini-audio-description-icon.svg
new file mode 100644
index 0000000000..b136e6c222
--- /dev/null
+++ b/packages/gamut-icons/src/svg/mini/mini-audio-description-icon.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<title>audio-description</title><g id="audio-description--audio-description-close-caption-text"><path id="Union" fill="#000000" fill-rule="evenodd" d="M14.410057142857143 4.161497142857143C15.428114285714283 5.1795542857142856 16 6.560331428571428 16 8.00006857142857c0 1.4397485714285712 -0.5718857142857142 2.8205257142857145 -1.589942857142857 3.8385599999999998 -0.3347428571428571 0.3347428571428571 -0.8774857142857143 0.3347428571428571 -1.2122285714285714 0 -0.3347428571428571 -0.3347428571428571 -0.3347428571428571 -0.8774171428571428 0 -1.21216 0.6965714285714286 -0.69656 1.0878857142857141 -1.641302857142857 1.0878857142857141 -2.6264 0 -0.9850857142857142 -0.39131428571428567 -1.9298285714285714 -1.0878857142857141 -2.6263885714285715 -0.3347428571428571 -0.3347428571428571 -0.3347428571428571 -0.8774514285714284 0 -1.212182857142857 0.3347428571428571 -0.3347428571428571 0.8774857142857143 -0.3347428571428571 1.2122285714285714 0ZM2.4858285714285713 6.700765714285714l0.5140571428571428 1.9277257142857143 -1.0281142857142855 0 0.5140571428571428 -1.9277257142857143Zm1.0812342857142856 4.05464 -0.18622857142857144 -0.698342857142857 -1.7900114285714284 0 -0.18622857142857144 0.698342857142857c-0.10164571428571428 0.3811771428571428 -0.49304114285714284 0.6077714285714286 -0.8742102857142857 0.5061257142857142 -0.3811691428571429 -0.10164571428571428 -0.6077689142857142 -0.49304 -0.5061243428571428 -0.8742057142857143L1.2925942857142856 5.631028571428572c0.14415999999999998 -0.5405942857142857 0.6337485714285713 -0.9167314285714285 1.1932342857142855 -0.9167314285714285 0.5594857142857143 0 1.0490742857142856 0.37613714285714284 1.1932228571428571 0.9167314285714285l1.268342857142857 4.756297142857143c0.10164571428571428 0.3811657142857142 -0.12494857142857142 0.7725599999999999 -0.5061257142857142 0.8742057142857143 -0.3811657142857142 0.10164571428571428 -0.7725599999999999 -0.12494857142857142 -0.8742057142857143 -0.5061257142857142Zm2.890114285714285 -6.041108571428571c-0.39449142857142855 0 -0.7142857142857142 0.3197942857142857 -0.7142857142857142 0.7142857142857142l0 5.142788571428571c0 0.39447999999999994 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142l0.5999771428571429 0c1.5044457142857142 0 2.7714057142857143 -1.332137142857143 2.7714057142857143 -3.2856799999999997 0 -1.953542857142857 -1.2669599999999999 -3.2856799999999997 -2.7714057142857143 -3.2856799999999997l-0.5999771428571429 0Zm1.9428114285714284 3.2856799999999997c0 1.2479542857142858 -0.6875428571428571 1.7836342857142857 -1.2285257142857142 1.8499771428571428l0 -3.6999657142857143c0.5409828571428571 0.06634285714285713 1.2285257142857142 0.6020228571428571 1.2285257142857142 1.8499885714285713ZM13.142971428571428 8c0 -0.6819885714285715 -0.27085714285714285 -1.3360457142857143 -0.7531428571428571 -1.8182742857142855 -0.3347428571428571 -0.3347428571428571 -0.8774857142857143 -0.3347428571428571 -1.2121714285714287 0 -0.3347314285714285 0.3347314285714285 -0.3347314285714285 0.87744 0 1.212182857142857 0.1607542857142857 0.16074285714285713 0.25102857142857143 0.37876571428571426 0.25102857142857143 0.6060914285714285 0 0.22732571428571427 -0.09027428571428571 0.4453485714285714 -0.25102857142857143 0.6060914285714285 -0.3347314285714285 0.3347314285714285 -0.3347314285714285 0.87744 0 1.212182857142857 0.33468571428571425 0.3347314285714285 0.8774285714285714 0.3347314285714285 1.2121714285714287 0 0.48228571428571426 -0.48224 0.7531428571428571 -1.136297142857143 0.7531428571428571 -1.8182742857142855Z" clip-rule="evenodd" stroke-width="1.1429"></path></g></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/mini/mini-close-captioning-icon.svg b/packages/gamut-icons/src/svg/mini/mini-close-captioning-icon.svg
new file mode 100644
index 0000000000..cf90ca78e6
--- /dev/null
+++ b/packages/gamut-icons/src/svg/mini/mini-close-captioning-icon.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<title>close-captioning</title><g id="video-close-captioning"><path id="Subtract" fill="#000000" fill-rule="evenodd" d="M1.0735314285714284 1.0735314285714284C1.3950171428571427 0.75204 1.8310628571428569 0.5714285714285714 2.2857142857142856 0.5714285714285714h11.428571428571427c0.4546285714285714 0 0.8907428571428571 0.18061142857142856 1.2122285714285714 0.5021028571428571 0.32148571428571426 0.32148571428571426 0.5020571428571429 0.75752 0.5020571428571429 1.212182857142857v9.142857142857142c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S14.168914285714285 13.142857142857142 13.714285714285714 13.142857142857142H7.766411428571428l-3.4090971428571426 2.731657142857143c-0.17147428571428572 0.13737142857142856 -0.40656 0.16434285714285715 -0.6046514285714286 0.06914285714285713C3.5545714285714287 15.848571428571427 3.4285714285714284 15.648342857142856 3.4285714285714284 15.428571428571427v-2.2857142857142856H2.2857142857142856c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C0.75204 12.319314285714286 0.5714285714285714 11.883199999999999 0.5714285714285714 11.428571428571427V2.2857142857142856c0 -0.45465142857142854 0.18061142857142856 -0.8906971428571429 0.5021028571428571 -1.212182857142857ZM3.0055771428571427 5.434285714285714c0 -1.0256685714285714 0.8314742857142856 -1.857142857142857 1.857142857142857 -1.857142857142857h0.5714285714285714c1.02568 0 1.857142857142857 0.8314742857142856 1.857142857142857 1.857142857142857 0 0.39449142857142855 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142 -0.39447999999999994 0 -0.7142857142857142 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 0 -0.23668571428571428 -0.19187428571428572 -0.42857142857142855 -0.42857142857142855 -0.42857142857142855h-0.5714285714285714c-0.23668571428571428 0 -0.42857142857142855 0.19188571428571427 -0.42857142857142855 0.42857142857142855v2.8571428571428568c0 0.23669714285714283 0.19188571428571427 0.42857142857142855 0.42857142857142855 0.42857142857142855h0.5714285714285714c0.23669714285714283 0 0.42857142857142855 -0.19187428571428572 0.42857142857142855 -0.42857142857142855 0 -0.39447999999999994 0.3198057142857143 -0.7142857142857142 0.7142857142857142 -0.7142857142857142 0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142 0 1.02568 -0.8314628571428571 1.857142857142857 -1.857142857142857 1.857142857142857h-0.5714285714285714c-1.0256685714285714 0 -1.857142857142857 -0.8314628571428571 -1.857142857142857 -1.857142857142857v-2.8571428571428568Zm5.7142857142857135 0c0 -1.0256685714285714 0.8314742857142856 -1.857142857142857 1.857142857142857 -1.857142857142857h0.5714285714285714c1.0256228571428572 0 1.857165714285714 0.8314742857142856 1.857165714285714 1.857142857142857 0 0.39449142857142855 -0.31977142857142854 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142c0 -0.23668571428571428 -0.19189714285714285 -0.42857142857142855 -0.4285942857142857 -0.42857142857142855h-0.5714285714285714c-0.23668571428571428 0 -0.42857142857142855 0.19188571428571427 -0.42857142857142855 0.42857142857142855v2.8571428571428568c0 0.23669714285714283 0.19188571428571427 0.42857142857142855 0.42857142857142855 0.42857142857142855h0.5714285714285714c0.23669714285714283 0 0.4285942857142857 -0.19187428571428572 0.4285942857142857 -0.42857142857142855 0 -0.39447999999999994 0.31977142857142854 -0.7142857142857142 0.7142857142857142 -0.7142857142857142s0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142c0 1.02568 -0.8315428571428571 1.857142857142857 -1.857165714285714 1.857142857142857h-0.5714285714285714c-1.0256685714285714 0 -1.857142857142857 -0.8314628571428571 -1.857142857142857 -1.857142857142857v-2.8571428571428568Z" clip-rule="evenodd" stroke-width="1.1429"></path></g></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/mini/mini-live-video-icon.svg b/packages/gamut-icons/src/svg/mini/mini-live-video-icon.svg
new file mode 100644
index 0000000000..b6148c90bf
--- /dev/null
+++ b/packages/gamut-icons/src/svg/mini/mini-live-video-icon.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<title>live-video</title><g id="live-video"><path id="Union" fill="#000000" fill-rule="evenodd" d="M7.14302857142857 0.856864c0 -0.47338742857142857 0.38374857142857144 -0.8571430182857143 0.8571428571428571 -0.8571430182857143 4.418342857142857 0 8.000171428571427 3.581821875428571 8.000171428571427 8.000210446857142 0 4.418354285714286 -3.5818285714285714 8.000182857142857 -8.000171428571427 8.000182857142857 -2.833245714285714 0 -5.321782857142857 -1.4733714285714283 -6.742034285714285 -3.6917714285714287 -0.25524685714285716 -0.3986285714285714 -0.13897142857142855 -0.9287657142857142 0.2597028571428571 -1.1840114285714287 0.39868571428571425 -0.2552457142857143 0.9288 -0.13897142857142855 1.1840457142857144 0.25971428571428573 1.1184342857142857 1.7469257142857142 3.0737714285714284 2.901782857142857 5.298285714285714 2.901782857142857 3.4716 0 6.285885714285714 -2.814285714285714 6.285885714285714 -6.285897142857142 0 -3.4716228571428567 -2.814285714285714 -6.28592 -6.285885714285714 -6.28592 -0.47339428571428566 0 -0.8571428571428571 -0.38375999999999993 -0.8571428571428571 -0.8571474285714286Zm-1.10456 0.21894742857142857c0.18252571428571426 0.43678285714285714 -0.023588571428571424 0.9388285714285713 -0.46036571428571427 1.1213542857142855 -0.3472228571428571 0.14509714285714284 -0.6788114285714286 0.3205485714285714 -0.9914628571428571 0.5230971428571428 -0.3973028571428571 0.2573942857142857 -0.928022857142857 0.14397714285714286 -1.1854171428571427 -0.2533142857142857 -0.2573942857142857 -0.3972914285714285 -0.1439885714285714 -0.928022857142857 0.2533028571428571 -1.1854171428571427 0.39776 -0.2576948571428571 0.8200114285714285 -0.4811485714285714 1.262582857142857 -0.6660937142857143 0.43678857142857136 -0.18252571428571426 0.9388342857142856 0.023590857142857143 1.12136 0.4603737142857143ZM2.7373371428571427 4.560502857142857c0.2594285714285714 -0.39597714285714286 0.14873142857142857 -0.92728 -0.2472457142857143 -1.1866971428571427 -0.39597714285714286 -0.25941714285714285 -0.92728 -0.14872 -1.1866971428571427 0.24725714285714284 -0.24388914285714286 0.3722628571428571 -0.45767771428571424 0.7662285714285714 -0.6378331428571429 1.1784685714285714 -0.189568 0.43377142857142853 0.008398857142857142 0.9390857142857142 0.44217142857142855 1.1286628571428572 0.433776 0.18956571428571425 0.9390902857142857 -0.0084 1.1286559999999999 -0.44217142857142855 0.14135999999999999 -0.3234742857142857 0.3092457142857143 -0.6328914285714285 0.5009485714285714 -0.92552ZM0.8565851428571427 7.14302857142857c0.4733919999999999 0 0.8571405714285715 0.38374857142857144 0.8571405714285715 0.8571428571428571 0 0.42302857142857136 0.041645714285714286 0.8354742857142857 0.12079999999999999 1.233725714285714 0.09228571428571428 0.4643085714285714 -0.20930285714285712 0.9155085714285713 -0.6736 1.0077942857142856 -0.4643085714285714 0.09228571428571428 -0.9155108571428571 -0.20930285714285712 -1.0077931428571427 -0.6736114285714285 -0.10090925714285714 -0.5077028571428571 -0.15369060685714286 -1.0320685714285713 -0.15369060685714286 -1.5679085714285714 0 -0.47339428571428566 0.3837557497142857 -0.8571428571428571 0.8571431782857143 -0.8571428571428571ZM5.15848 5.9836342857142855c0 -0.96648 1.0614171428571428 -1.4292114285714284 1.8155542857142857 -1.0425371428571428l3.9324914285714283 2.016377142857143c0.8682171428571428 0.4451885714285714 0.8682171428571428 1.6398857142857142 0 2.085062857142857L6.974034285714286 11.058914285714286c-0.7541371428571427 0.38668571428571424 -1.8155542857142857 -0.07604571428571429 -1.8155542857142857 -1.0425371428571428V5.9836342857142855Z" clip-rule="evenodd" stroke-width="1.1429"></path></g></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/regular/closed-caption-disabled-icon.svg b/packages/gamut-icons/src/svg/regular/closed-caption-disabled-icon.svg
new file mode 100644
index 0000000000..fff3d47a7e
--- /dev/null
+++ b/packages/gamut-icons/src/svg/regular/closed-caption-disabled-icon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<title>closed-caption-disabled</title>
+<path fill="#000000" d="m9.0252 9.02505 1.25 1.25h-3.025v3.45h2.55c0 -0.16665 0.05475 -0.30415 0.16425 -0.4125 0.1095 -0.10835 0.2464 -0.1625 0.41075 -0.1625h0.1c0.16435 0 0.30125 0.05475 0.41075 0.16425 0.1095 0.1095 0.16425 0.2464 0.16425 0.41075v0.5c0 0.2125 -0.07185 0.3906 -0.2155 0.53425 -0.14385 0.14385 -0.322 0.21575 -0.5345 0.21575h-3.55c-0.2125 0 -0.3906 -0.0719 -0.53425 -0.21575 -0.14385 -0.14365 -0.21575 -0.32175 -0.21575 -0.53425v-4.45c0 -0.2125 0.0719 -0.39065 0.21575 -0.5345 0.14365 -0.14365 0.32175 -0.2155 0.53425 -0.2155h2.275Zm11.975 -3.525v11.85c0 0.24385 -0.07935 0.42985 -0.238 0.558 -0.15865 0.128 -0.3295 0.192 -0.5125 0.192 -0.183 0 -0.35365 -0.064 -0.512 -0.192 -0.15835 -0.12815 -0.2375 -0.31415 -0.2375 -0.558v-11.85h-11.85c-0.25 0 -0.4375 -0.07765 -0.5625 -0.233 -0.125 -0.15535 -0.1875 -0.32617 -0.1875 -0.5125 0 -0.186335 0.0625 -0.35867 0.1875 -0.517 0.125 -0.158335 0.3125 -0.2375 0.5625 -0.2375h11.85c0.38335 0 0.72915 0.154165 1.0375 0.4625 0.30835 0.30833 0.4625 0.65415 0.4625 1.0375Zm-2.975 8.65c0 0.21665 -0.07085 0.39585 -0.2125 0.5375s-0.32085 0.2125 -0.5375 0.2125h-0.225l-1.175 -1.175h0.9c0 -0.16665 0.05475 -0.30415 0.16425 -0.4125 0.1095 -0.10835 0.2464 -0.1625 0.41075 -0.1625h0.1c0.16435 0 0.30125 0.05475 0.41075 0.16425 0.1095 0.1095 0.16425 0.2464 0.16425 0.41075v0.425Zm-0.75 -5.125c0.2125 0 0.39065 0.07185 0.5345 0.2155 0.14365 0.14385 0.2155 0.322 0.2155 0.5345v0.5c0 0.16435 -0.05475 0.30125 -0.16425 0.41075 -0.1095 0.1095 -0.2464 0.16425 -0.41075 0.16425h-0.1c-0.16435 0 -0.30125 -0.05475 -0.41075 -0.16425 -0.1095 -0.1095 -0.16425 -0.2464 -0.16425 -0.41075h-2.55v1.8l-1.25 -1.25v-1.05c0 -0.2125 0.0719 -0.39065 0.21575 -0.5345 0.14365 -0.14365 0.32175 -0.2155 0.53425 -0.2155h3.55Zm-12.775005 10.975c-0.4 0 -0.75 -0.15 -1.05 -0.45 -0.3 -0.3 -0.45 -0.65 -0.45 -1.05v-13c0 -0.332 0.104165 -0.6275 0.3125 -0.8865s0.4625 -0.4385 0.7625 -0.5385l1.425005 1.425H4.500195v13H16.3502l-15.175005 -15.15c-0.15 -0.15117 -0.225 -0.330585 -0.225 -0.53825 0 -0.207835 0.075415 -0.38675 0.22625 -0.53675 0.151 -0.15 0.330165 -0.225 0.5375 -0.225 0.2075 0 0.38625 0.075 0.53625 0.225l19.100005 19.1c0.15 0.15115 0.225 0.3306 0.225 0.53825 0 0.20785 -0.0754 0.38675 -0.22625 0.53675 -0.151 0.15 -0.33015 0.225 -0.5375 0.225 -0.2075 0 -0.38625 -0.075 -0.53625 -0.225l-2.425 -2.45H4.500195Z" stroke-width="1.5"></path>
+</svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/regular/closed-caption-icon.svg b/packages/gamut-icons/src/svg/regular/closed-caption-icon.svg
new file mode 100644
index 0000000000..9897ea5cc8
--- /dev/null
+++ b/packages/gamut-icons/src/svg/regular/closed-caption-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<title>closed-caption</title>
+<path fill="#000000" d="M4.5 20c-0.4 0 -0.75 -0.15 -1.05 -0.45 -0.3 -0.3 -0.45 -0.65 -0.45 -1.05V5.5c0 -0.4 0.15 -0.75 0.45 -1.05C3.75 4.15 4.1 4 4.5 4h15c0.4 0 0.75 0.15 1.05 0.45 0.3 0.3 0.45 0.65 0.45 1.05v13c0 0.4 -0.15 0.75 -0.45 1.05 -0.3 0.3 -0.65 0.45 -1.05 0.45H4.5Zm0 -1.5h15V5.5H4.5v13Zm2.25 -3.525h3.55c0.2125 0 0.39065 -0.0719 0.5345 -0.21575 0.14365 -0.14365 0.2155 -0.32175 0.2155 -0.53425v-0.5c0 -0.16435 -0.05475 -0.30125 -0.16425 -0.41075 -0.1095 -0.1095 -0.2464 -0.16425 -0.41075 -0.16425h-0.1c-0.16435 0 -0.30125 0.05475 -0.41075 0.16425 -0.1095 0.1095 -0.16425 0.2464 -0.16425 0.41075h-2.55v-3.45h2.55c0 0.16665 0.05475 0.30415 0.16425 0.4125 0.1095 0.10835 0.2464 0.1625 0.41075 0.1625h0.1c0.16435 0 0.30125 -0.05475 0.41075 -0.16425 0.1095 -0.1095 0.16425 -0.2464 0.16425 -0.41075v-0.5c0 -0.2125 -0.07185 -0.39065 -0.2155 -0.5345 -0.14385 -0.14365 -0.322 -0.2155 -0.5345 -0.2155h-3.55c-0.2125 0 -0.3906 0.07185 -0.53425 0.2155 -0.14385 0.14385 -0.21575 0.322 -0.21575 0.5345v4.45c0 0.2125 0.0719 0.3906 0.21575 0.53425 0.14365 0.14385 0.32175 0.21575 0.53425 0.21575Zm10.525 -5.95h-3.55c-0.2125 0 -0.3906 0.07185 -0.53425 0.2155 -0.14385 0.14385 -0.21575 0.322 -0.21575 0.5345v4.45c0 0.2125 0.0719 0.3906 0.21575 0.53425 0.14365 0.14385 0.32175 0.21575 0.53425 0.21575h3.55c0.2125 0 0.39065 -0.0719 0.5345 -0.21575 0.14365 -0.14365 0.2155 -0.32175 0.2155 -0.53425v-0.5c0 -0.16435 -0.05475 -0.30125 -0.16425 -0.41075 -0.1095 -0.1095 -0.2464 -0.16425 -0.41075 -0.16425h-0.1c-0.16435 0 -0.30125 0.05475 -0.41075 0.16425 -0.1095 0.1095 -0.16425 0.2464 -0.16425 0.41075h-2.55v-3.45h2.55c0 0.16665 0.05475 0.30415 0.16425 0.4125 0.1095 0.10835 0.2464 0.1625 0.41075 0.1625h0.1c0.16435 0 0.30125 -0.05475 0.41075 -0.16425 0.1095 -0.1095 0.16425 -0.2464 0.16425 -0.41075v-0.5c0 -0.2125 -0.07185 -0.39065 -0.2155 -0.5345 -0.14385 -0.14365 -0.322 -0.2155 -0.5345 -0.2155Z" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/regular/go-backward-10-control-icon.svg b/packages/gamut-icons/src/svg/regular/go-backward-10-control-icon.svg
deleted file mode 100644
index 47d11df5ad..0000000000
--- a/packages/gamut-icons/src/svg/regular/go-backward-10-control-icon.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs>
-    <title>go-backward-10-control</title>
-    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.10998 4.68623C4.21585 6.37208 2.27065 9.50852 2.27065 13.0993c0 5.3734 4.35601 9.7294 9.72945 9.7294 5.3734 0 9.7294 -4.356 9.7294 -9.7294 0 -5.37342 -4.356 -9.72943 -9.7294 -9.72943h-1.9384" stroke-width="1.5"></path>
-    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M12 1.17139 9.80151 3.36987 12 5.56836" stroke-width="1.5"></path>
-    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m9.13184 9.59937 0 7.00003" stroke-width="1.5"></path>
-    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m7.38184 11.3494 0.59996 0c0.63515 0 1.15004 -0.5149 1.15004 -1.1501l0 -0.59993" stroke-width="1.5"></path>
-    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m10.8818 16.5994 -3.49996 0" stroke-width="1.5"></path>
-    <path class="a" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M13.1182 11.2765v3.6457c0 0.9263 0.7508 1.6772 1.6771 1.6772h0.1457c0.9263 0 1.6772 -0.7509 1.6772 -1.6772v-3.6457c0 -0.9263 -0.7509 -1.67713 -1.6772 -1.67713h-0.1457c-0.9263 0 -1.6771 0.75083 -1.6771 1.67713Z" stroke-width="1.5"></path>
-</svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/regular/pip-exit-icon.svg b/packages/gamut-icons/src/svg/regular/pip-exit-icon.svg
new file mode 100644
index 0000000000..80866dfbaa
--- /dev/null
+++ b/packages/gamut-icons/src/svg/regular/pip-exit-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<title>pip-exit</title>
+<path fill="#000000" d="M3.5 20c-0.4 0 -0.75 -0.15 -1.05 -0.45 -0.3 -0.3 -0.45 -0.65 -0.45 -1.05V11.75c0 -0.2125 0.072335 -0.39065 0.217 -0.5345 0.1445 -0.14365 0.323665 -0.2155 0.5375 -0.2155 0.213665 0 0.391335 0.07185 0.533 0.2155 0.141665 0.14385 0.2125 0.322 0.2125 0.5345V18.5h17V5.5H11.75c-0.2125 0 -0.3906 -0.07235 -0.53425 -0.217C11.0719 5.1385 11 4.959335 11 4.7455c0 -0.213665 0.0719 -0.391335 0.21575 -0.533C11.3594 4.070835 11.5375 4 11.75 4H20.5c0.4 0 0.75 0.15 1.05 0.45 0.3 0.3 0.45 0.65 0.45 1.05v13c0 0.4 -0.15 0.75 -0.45 1.05 -0.3 0.3 -0.65 0.45 -1.05 0.45H3.5Zm10.175 -7.25 3.225 3.225c0.15 0.15 0.325 0.225 0.525 0.225s0.375 -0.0754 0.525 -0.22625c0.15 -0.151 0.225 -0.33015 0.225 -0.5375 0 -0.2075 -0.075 -0.38625 -0.225 -0.53625l-3.225 -3.225h2.2c0.2125 0 0.39065 -0.07235 0.5345 -0.217 0.14365 -0.1445 0.2155 -0.32365 0.2155 -0.5375 0 -0.21365 -0.07185 -0.39135 -0.2155 -0.533 -0.14385 -0.14165 -0.322 -0.2125 -0.5345 -0.2125h-4c-0.2125 0 -0.3906 0.07185 -0.53425 0.2155 -0.14385 0.14385 -0.21575 0.322 -0.21575 0.5345v4c0 0.2125 0.07235 0.3906 0.217 0.53425 0.1445 0.14385 0.32365 0.21575 0.5375 0.21575 0.21365 0 0.39135 -0.0719 0.533 -0.21575 0.14165 -0.14365 0.2125 -0.32175 0.2125 -0.53425V12.75ZM2.75 9.5c-0.2125 0 -0.390585 -0.0719 -0.53425 -0.21575C2.071915 9.1406 2 8.9625 2 8.75v-4c0 -0.2125 0.071915 -0.390665 0.21575 -0.5345C2.359415 4.071835 2.5375 4 2.75 4h6c0.2125 0 0.39065 0.071835 0.5345 0.2155 0.14365 0.143835 0.2155 0.322 0.2155 0.5345v4c0 0.2125 -0.07185 0.3906 -0.2155 0.53425 -0.14385 0.14385 -0.322 0.21575 -0.5345 0.21575h-6Z" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/regular/pip-icon.svg b/packages/gamut-icons/src/svg/regular/pip-icon.svg
new file mode 100644
index 0000000000..6b78687b3b
--- /dev/null
+++ b/packages/gamut-icons/src/svg/regular/pip-icon.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<title>pip</title><path fill="#000000" d="M2.75 11c-0.2125 0 -0.390585 -0.07235 -0.53425 -0.217C2.071915 10.6385 2 10.4593 2 10.2455c0 -0.2137 0.071915 -0.39135 0.21575 -0.533C2.359415 9.5708 2.5375 9.5 2.75 9.5h3.7l-4.475 -4.475c-0.15 -0.15119 -0.225 -0.33061 -0.225 -0.538275 0 -0.207835 0.075415 -0.38675 0.22625 -0.53675 0.151 -0.15 0.330165 -0.225 0.5375 -0.225 0.2075 0 0.38625 0.075 0.53625 0.225L7.5 8.425V4.749975c0 -0.2125 0.07235 -0.390665 0.217 -0.5345 0.1445 -0.143665 0.32365 -0.2155 0.5375 -0.2155 0.21365 0 0.39135 0.071835 0.533 0.2155 0.14165 0.143835 0.2125 0.322 0.2125 0.5345V10.25c0 0.2125 -0.07185 0.39055 -0.2155 0.53425 -0.14385 0.1438 -0.322 0.21575 -0.5345 0.21575h-5.5ZM3.5 19.99995c-0.4 0 -0.75 -0.15 -1.05 -0.45 -0.3 -0.3 -0.45 -0.65 -0.45 -1.05V13.5c0 -0.2125 0.072335 -0.3907 0.217 -0.53455 0.1445 -0.14365 0.323665 -0.21545 0.5375 -0.21545 0.213665 0 0.391335 0.0718 0.533 0.21545C3.429165 13.1093 3.5 13.2875 3.5 13.5v4.99995h7.75c0.2125 0 0.39065 0.07235 0.5345 0.217 0.14365 0.1445 0.2155 0.3237 0.2155 0.5375 0 0.2137 -0.07185 0.39135 -0.2155 0.533 -0.14385 0.1417 -0.322 0.2125 -0.5345 0.2125H3.5ZM21.2455 13c-0.21365 0 -0.39135 -0.07195 -0.533 -0.2158C20.57085 12.64055 20.5 12.4625 20.5 12.25V5.5H11.5c-0.2125 0 -0.3906 -0.07235 -0.53425 -0.217 -0.14385 -0.1445 -0.21575 -0.32369 -0.21575 -0.537525 0 -0.213665 0.0719 -0.391335 0.21575 -0.533 0.14365 -0.141665 0.32175 -0.2125 0.53425 -0.2125h9c0.4 0 0.75 0.15 1.05 0.45 0.3 0.3 0.45 0.650025 0.45 1.050025v6.75c0 0.2125 -0.07235 0.39055 -0.217 0.5342 -0.1445 0.14385 -0.32365 0.2158 -0.5375 0.2158ZM14.25 19.99995c-0.2125 0 -0.3906 -0.0719 -0.53425 -0.21575 -0.14385 -0.14365 -0.21575 -0.32175 -0.21575 -0.53425v-4c0 -0.2125 0.0719 -0.39065 0.21575 -0.5345 0.14365 -0.14365 0.32175 -0.2155 0.53425 -0.2155h7c0.2125 0 0.39065 0.07185 0.5345 0.2155 0.14365 0.14385 0.2155 0.322 0.2155 0.5345v4c0 0.2125 -0.07185 0.3906 -0.2155 0.53425 -0.14385 0.14385 -0.322 0.21575 -0.5345 0.21575h-7Z" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/regular/timer-10-icon.svg b/packages/gamut-icons/src/svg/regular/timer-10-icon.svg
new file mode 100644
index 0000000000..acd57b24ff
--- /dev/null
+++ b/packages/gamut-icons/src/svg/regular/timer-10-icon.svg
@@ -0,0 +1,2 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<title>timer-10</title><path d="M13.5 21.75A9.75 9.75 0 1 0 3.75 12v1.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m0.75 10.5 3 3 3 -3" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M9 8.25h0.75a0.75 0.75 0 0 1 0.75 0.75v5.25" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m9 14.25 3 0" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M18 12.75a1.5 1.5 0 0 1 -3 0v-3a1.5 1.5 0 0 1 3 0Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/regular/volume-control-full-icon.svg b/packages/gamut-icons/src/svg/regular/volume-control-full-icon.svg
new file mode 100644
index 0000000000..83bb534d85
--- /dev/null
+++ b/packages/gamut-icons/src/svg/regular/volume-control-full-icon.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs>
+<title>volume-control-full</title>
+<path class="a" d="M14.171 4.658A1.5 1.5 0 0 0 12.6 4.8L6 9H3a1.5 1.5 0 0 0 -1.5 1.5v3A1.5 1.5 0 0 0 3 15h3l6.6 4.2A1.5 1.5 0 0 0 15 18V6a1.5 1.5 0 0 0 -0.829 -1.342Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path class="a" d="M21.463 15.75a6.6 6.6 0 0 0 0 -7.1" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path class="a" d="M18.562 14.441a3.493 3.493 0 0 0 0 -4.405" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path class="a" d="m6 9 0 6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/regular/volume-control-medium-icon.svg b/packages/gamut-icons/src/svg/regular/volume-control-medium-icon.svg
new file mode 100644
index 0000000000..c443e8d648
--- /dev/null
+++ b/packages/gamut-icons/src/svg/regular/volume-control-medium-icon.svg
@@ -0,0 +1,2 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<title>volume-control-medium</title><path d="M15 4.658a1.5 1.5 0 0 0 -1.571 0.142L6.828 9h-3a1.5 1.5 0 0 0 -1.5 1.5v3a1.5 1.5 0 0 0 1.5 1.5h3l6.6 4.2a1.5 1.5 0 0 0 2.4 -1.2V6A1.5 1.5 0 0 0 15 4.658Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M20.328 15a3.509 3.509 0 0 0 0 -5.523" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m6.828 9 0 6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/packages/gamut-icons/src/svg/regular/volume-control-mute-icon.svg b/packages/gamut-icons/src/svg/regular/volume-control-mute-icon.svg
new file mode 100644
index 0000000000..d63da4854d
--- /dev/null
+++ b/packages/gamut-icons/src/svg/regular/volume-control-mute-icon.svg
@@ -0,0 +1,2 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<title>volume-control-mute</title><path d="M13.422 4.658a1.5 1.5 0 0 0 -1.571 0.142L5.251 9h-3a1.5 1.5 0 0 0 -1.5 1.5v3a1.5 1.5 0 0 0 1.5 1.5h3l6.6 4.2a1.5 1.5 0 0 0 2.4 -1.2V6a1.5 1.5 0 0 0 -0.829 -1.342Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m5.251 9 0 6" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m23.249 9.375 -5.25 5.25" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m17.999 9.375 5.25 5.25" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/packages/gamut/src/Video/lib/slotOverrides/CaptionToggle.tsx b/packages/gamut/src/Video/lib/slotOverrides/CaptionToggle.tsx
deleted file mode 100644
index c6ace53b73..0000000000
--- a/packages/gamut/src/Video/lib/slotOverrides/CaptionToggle.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { theme } from '@codecademy/gamut-styles';
-import styled from '@emotion/styled';
-import { isTrackCaptionKind, useMediaRemote, useMediaState } from '@vidstack/react';
-import { useDefaultLayoutWord } from '@vidstack/react/player/layouts/default';
-
-import { Toggle } from '../../../Toggle';
-
-const StyledToggle = styled(Toggle)`
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    alignItems: center;
-    padding: var(--item-padding);
-    color: ${theme.colors.text};
-`;
-
-export const CaptionToggle = () => { 
-  const playerRemote = useMediaRemote();
-  const captionsText = useDefaultLayoutWord('Captions');
-  const $hasCaptions = useMediaState('hasCaptions');
-  const $track = useMediaState('textTrack');
-  const isOn = $track && isTrackCaptionKind($track);
- 
-  if (!$hasCaptions) return null;
-  return (
-    <StyledToggle
-      label={captionsText}
-      labelSide="left"
-      size='small'
-      checked={isOn || false}
-      onChange={() => {
-        playerRemote.toggleCaptions()
-      }} 
-    />
-  )
-}
\ No newline at end of file
diff --git a/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx b/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx
index c8d3be254d..0ba9b2c231 100644
--- a/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx
+++ b/packages/gamut/src/Video/lib/slotOverrides/SeekBackwards.tsx
@@ -1,4 +1,4 @@
-import { GoBackward10ControlIcon } from '@codecademy/gamut-icons';
+import { Timer10Icon } from '@codecademy/gamut-icons';
 import { SeekButton, Tooltip } from '@vidstack/react';
 import { useDefaultLayoutWord } from '@vidstack/react/player/layouts/default';
 
@@ -8,7 +8,7 @@ export const SeekBackwardsButton = () => {
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
         <SeekButton className="vds-button" seconds={-10}>
-          <GoBackward10ControlIcon width={20} height={20} />
+          <Timer10Icon width={20} height={20} />
         </SeekButton>
       </Tooltip.Trigger>
       <Tooltip.Content className="vds-tooltip-content" placement="top">
diff --git a/packages/gamut/src/Video/lib/slotOverrides/index.tsx b/packages/gamut/src/Video/lib/slotOverrides/index.tsx
index 023e08cd26..e4ed627435 100644
--- a/packages/gamut/src/Video/lib/slotOverrides/index.tsx
+++ b/packages/gamut/src/Video/lib/slotOverrides/index.tsx
@@ -3,7 +3,6 @@ import {
   DefaultVideoLayoutSlots,
 } from '@vidstack/react/types/vidstack-react';
 
-import { CaptionToggle } from './CaptionToggle';
 import { SeekBackwardsButton } from './SeekBackwards';
 
 /**
@@ -16,9 +15,13 @@ import { SeekBackwardsButton } from './SeekBackwards';
 export const customLayoutSlots:
   | DefaultVideoLayoutSlots
   | DefaultVideoLayoutProps = {
+  smallLayout: {
+    beforeCaptionButton: <SeekBackwardsButton />,
+  },
+  largeLayout: {
+    afterPlayButton: <SeekBackwardsButton />,
+  },
   googleCastButton: null,
   airPlayButton: null,
   downloadButton: null,
-  settingsMenuStartItems: <CaptionToggle />,
-  afterPlayButton: <SeekBackwardsButton />,
 };
diff --git a/packages/gamut/src/Video/lib/utils/icons.tsx b/packages/gamut/src/Video/lib/utils/icons.tsx
index 33c2d6e054..905f1d8778 100644
--- a/packages/gamut/src/Video/lib/utils/icons.tsx
+++ b/packages/gamut/src/Video/lib/utils/icons.tsx
@@ -1,11 +1,21 @@
 import {
+  ClosedCaptionDisabledIcon,
+  ClosedCaptionIcon,
   FullscreenIcon,
   GearIcon,
   ListIcon,
+  MiniAccessibilityIcon,
+  MiniCloseCaptioningIcon,
+  MiniLiveVideoIcon,
   MinimizeIcon,
   PauseIcon,
+  PipExitIcon,
+  PipIcon,
   PlayIcon,
   RefreshIcon,
+  VolumeControlFullIcon,
+  VolumeControlMediumIcon,
+  VolumeControlMuteIcon,
 } from '@codecademy/gamut-icons';
 import {
   DefaultLayoutIcon,
@@ -14,22 +24,38 @@ import {
 } from '@vidstack/react/player/layouts/default';
 
 const IconWrapper = (Icon: DefaultLayoutIcon) => (props: any) =>
-  <Icon {...props} width={18} height={18} />;
+  <Icon {...props} width={20} height={20} />;
 
 export const customIcons: DefaultLayoutIcons = {
   ...defaultLayoutIcons,
   PlayButton: {
-    Play: IconWrapper(PlayIcon as DefaultLayoutIcon),
-    Pause: IconWrapper(PauseIcon as DefaultLayoutIcon),
-    Replay: IconWrapper(RefreshIcon as DefaultLayoutIcon),
+    Play: PlayIcon as DefaultLayoutIcon,
+    Pause: PauseIcon as DefaultLayoutIcon,
+    Replay: RefreshIcon as DefaultLayoutIcon,
+  },
+  MuteButton: {
+    Mute: IconWrapper(VolumeControlMuteIcon as DefaultLayoutIcon),
+    VolumeHigh: IconWrapper(VolumeControlFullIcon as DefaultLayoutIcon),
+    VolumeLow: IconWrapper(VolumeControlMediumIcon as DefaultLayoutIcon),
+  },
+  CaptionButton: {
+    Off: IconWrapper(ClosedCaptionDisabledIcon as DefaultLayoutIcon),
+    On: IconWrapper(ClosedCaptionIcon as DefaultLayoutIcon),
+  },
+  PIPButton: {
+    Enter: IconWrapper(PipIcon as DefaultLayoutIcon),
+    Exit: IconWrapper(PipExitIcon as DefaultLayoutIcon),
   },
   Menu: {
     ...defaultLayoutIcons.Menu,
-    Chapters: IconWrapper(ListIcon as DefaultLayoutIcon),
-    Settings: IconWrapper(GearIcon as DefaultLayoutIcon),
+    Accessibility: MiniAccessibilityIcon as DefaultLayoutIcon,
+    Playback: MiniLiveVideoIcon as DefaultLayoutIcon,
+    Captions: MiniCloseCaptioningIcon as DefaultLayoutIcon,
+    Chapters: ListIcon as DefaultLayoutIcon,
+    Settings: GearIcon as DefaultLayoutIcon,
   },
   FullscreenButton: {
-    Enter: IconWrapper(FullscreenIcon as DefaultLayoutIcon),
-    Exit: IconWrapper(MinimizeIcon as DefaultLayoutIcon),
+    Enter: FullscreenIcon as DefaultLayoutIcon,
+    Exit: MinimizeIcon as DefaultLayoutIcon,
   },
 };
diff --git a/packages/gamut/src/Video/lib/utils/variables.ts b/packages/gamut/src/Video/lib/utils/variables.ts
index 549efec765..544c6c4e59 100644
--- a/packages/gamut/src/Video/lib/utils/variables.ts
+++ b/packages/gamut/src/Video/lib/utils/variables.ts
@@ -19,6 +19,7 @@ export const vdsVariables: Variables = {
     '--video-border-radius': theme.borderRadii.md,
     // Media/Control Variables
     '--media-button-border-radius': theme.borderRadii.md,
+    '--media-button-padding': `0px ${theme.spacing[8]}`,
     '--media-tooltip-bg-color': theme.colors['background-contrast'],
     '--media-tooltip-border-radius': theme.borderRadii.sm,
     '--media-tooltip-border': `1px solid ${theme.colors['border-primary']}`,
diff --git a/packages/gamut/src/Video/styles/vds_base_theme.scss b/packages/gamut/src/Video/styles/vds_base_theme.scss
index f0d5ab3d55..30e752f051 100644
--- a/packages/gamut/src/Video/styles/vds_base_theme.scss
+++ b/packages/gamut/src/Video/styles/vds_base_theme.scss
@@ -21,4 +21,22 @@ iframe.vds-youtube[data-no-controls] {
 
 :where(.vds-button .vds-icon) {
     border-radius: unset;
+}
+
+.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-width: 0 1px 1px 0;
+    border-color: currentColor;
+    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%);
 }
\ No newline at end of file

From b41e2a2410c7da66d58adb3a5f8e86304a9856d8 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Mon, 3 Feb 2025 01:00:16 +0530
Subject: [PATCH 18/29] chore(video): tooltip animations and small layout
 addition

---
 packages/gamut/src/Video/lib/Player.tsx       | 94 ++++++++++---------
 packages/gamut/src/Video/lib/VideoLayout.tsx  |  2 +-
 .../gamut/src/Video/lib/utils/variables.ts    |  3 +
 .../src/Video/styles/vds_base_theme.scss      | 45 ++++++++-
 4 files changed, 99 insertions(+), 45 deletions(-)

diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
index 7f66142b52..6268ecce22 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -3,9 +3,15 @@ import '../styles/vds_base_theme.scss';
 
 import { styledOptions } from '@codecademy/gamut-styles';
 import styled, { CSSObject } from '@emotion/styled';
-import { MediaPlayer, MediaProvider, Poster, Track } from '@vidstack/react';
+import {
+  MediaPlayer,
+  MediaPlayerInstance,
+  MediaProvider,
+  Poster,
+  Track,
+} from '@vidstack/react';
 import cx from 'classnames';
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { VideoProps } from '..';
 import styles from '../styles/index.module.scss';
@@ -20,7 +26,6 @@ const VariableProvider = styled('div', styledOptions(['variables']))<{
 type VidstackPlayerProps = VideoProps & {
   onLoad: () => void;
 };
-
 export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
   autoplay,
   controls,
@@ -38,43 +43,48 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
   width,
   height,
   className,
-}) => (
-  <VariableProvider
-    variables={vdsVariables}
-    className={cx(styles.vdsWrapper, className)}
-    style={{ width, height }}
-  >
-    <MediaPlayer
-      title={videoTitle}
-      src={videoUrl}
-      playsInline
-      autoPlay={autoplay}
-      loop={loop}
-      muted={muted}
-      onLoad={onLoad}
-      onPlay={onPlay}
-      onCanPlay={() => {
-        onReady?.();
-      }}
-      keyShortcuts={keyboardShortcuts}
+}) => {
+  const player = useRef<MediaPlayerInstance>(null);
+
+  return (
+    <VariableProvider
+      variables={vdsVariables}
+      className={cx(styles.vdsWrapper, className)}
+      style={{ width, height }}
     >
-      <MediaProvider>
-        {placeholderImage && (
-          <Poster
-            className="vds-poster"
-            alt={videoTitle}
-            src={placeholderImage as string}
-          />
-        )}
-        {textTracks?.map((track) => (
-          <Track {...track} key={track.src} />
-        ))}
-      </MediaProvider>
-      <VideoLayout
-        controls={controls}
-        thumbnails={thumbnails}
-        translations={translations}
-      />
-    </MediaPlayer>
-  </VariableProvider>
-);
+      <MediaPlayer
+        ref={player}
+        title={videoTitle}
+        src={videoUrl}
+        playsInline
+        autoPlay={autoplay}
+        loop={loop}
+        muted={muted}
+        onLoad={onLoad}
+        onPlay={onPlay}
+        onCanPlay={() => {
+          onReady?.();
+        }}
+        keyShortcuts={keyboardShortcuts}
+      >
+        <MediaProvider>
+          {placeholderImage && (
+            <Poster
+              className="vds-poster"
+              alt={videoTitle}
+              src={placeholderImage as string}
+            />
+          )}
+          {textTracks?.map((track) => (
+            <Track {...track} key={track.src} />
+          ))}
+        </MediaProvider>
+        <VideoLayout
+          controls={controls}
+          thumbnails={thumbnails}
+          translations={translations}
+        />
+      </MediaPlayer>
+    </VariableProvider>
+  );
+};
diff --git a/packages/gamut/src/Video/lib/VideoLayout.tsx b/packages/gamut/src/Video/lib/VideoLayout.tsx
index 34743e3caa..7d6bbdb33d 100644
--- a/packages/gamut/src/Video/lib/VideoLayout.tsx
+++ b/packages/gamut/src/Video/lib/VideoLayout.tsx
@@ -35,10 +35,10 @@ export const VideoLayout: React.FC<VideoLayoutProps> = ({
       colorScheme={mode}
       hidden={!controls}
       icons={customIcons}
-      smallLayoutWhen={false}
       thumbnails={thumbnails}
       slots={customLayoutSlots}
       noAudioGain
+      noModal
     />
   );
 };
diff --git a/packages/gamut/src/Video/lib/utils/variables.ts b/packages/gamut/src/Video/lib/utils/variables.ts
index 544c6c4e59..42b891c0ce 100644
--- a/packages/gamut/src/Video/lib/utils/variables.ts
+++ b/packages/gamut/src/Video/lib/utils/variables.ts
@@ -37,4 +37,7 @@ export const vdsVariables: Variables = {
     '--media-slider-value-border': `1px solid ${theme.colors['border-primary']}`,
     '--media-slider-value-color': theme.colors.text,
     '--media-slider-value-padding': theme.spacing[4],
+    '--media-tooltip-exit-animation': 'vds-tooltip-exit 0s',
+    '--media-tooltip-enter-animation': 'vds-tooltip-enter 0s',
+    // '--media-menu-bg': theme.colors['background-contrast'],
 }
\ No newline at end of file
diff --git a/packages/gamut/src/Video/styles/vds_base_theme.scss b/packages/gamut/src/Video/styles/vds_base_theme.scss
index 30e752f051..3be4de1cab 100644
--- a/packages/gamut/src/Video/styles/vds_base_theme.scss
+++ b/packages/gamut/src/Video/styles/vds_base_theme.scss
@@ -34,9 +34,50 @@ iframe.vds-youtube[data-no-controls] {
     width: 1rem;
     height: 1rem;
     position: absolute;
-    border-width: 0 1px 1px 0;
     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%);
-}
\ No newline at end of file
+}
+
+: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% + .5rem);
+}
+:where(.vds-tooltip-content[data-placement~='end'])::after {
+    left: unset;
+    right: calc(0% + .5rem);
+}
+
+: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);
+}
+
+@keyframes vds-tooltip-exit {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+@keyframes vds-tooltip-enter {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
\ No newline at end of file

From 0b4c1a0183bac74ed95caa8f96550a27ebcaaf96 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Mon, 3 Feb 2025 02:36:44 +0530
Subject: [PATCH 19/29] chore(Video): props with detailed documentation and
 improve layout styles

---
 packages/gamut/src/Video/index.tsx            | 36 +++++++++++--
 packages/gamut/src/Video/lib/Player.tsx       |  2 +-
 .../gamut/src/Video/lib/utils/variables.ts    |  6 ++-
 .../gamut/src/Video/styles/index.module.scss  |  1 -
 .../src/Video/styles/vds_base_theme.scss      | 54 +++++++++----------
 5 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 39d1dc0d4f..481c0f3a50 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -33,21 +33,49 @@ const OverlayPlayButton = ({ videoTitle }: { videoTitle?: string }) => {
 export type ReactPlayerWithWrapper = ReactPlayer & { wrapper: HTMLElement };
 
 export type VideoProps = {
-  autoplay?: boolean;
   className?: string;
+  autoplay?: boolean;
   controls?: boolean;
-  height?: number;
   loop?: boolean;
   muted?: boolean;
   onPlay?: () => void;
   onReady?: (player?: ReactPlayerWithWrapper) => void;
-  placeholderImage?: string | boolean;
+  width?: number;
+  height?: number;
   videoTitle?: string;
+  /**
+   * Placeholder image for a poster/thumbnail.
+   */
+  placeholderImage?: string | boolean;
+  /**
+   * The main source for the video file or streaming URL.
+   * @example
+   * <Video videoUrl='https://example.com/video.mp4' />
+   * Or with type
+   * <Video videoUrl={{ src: 'https://example.com/video.mp4', type: 'video/mp4' }} />
+   */
   videoUrl: PlayerSrc;
-  width?: number;
+  /**
+   * Optional text track data (subtitles, captions or chapters).
+   * @example
+   * <Video textTracks={[{ label: 'English', src: '/eng.vtt', kind: 'subtitles', language: 'en-US', }]} />
+   *
+   * @see https://vidstack.io/docs/player/api/text-tracks/?styling=default-theme#managing-tracks
+   */
   textTracks?: TrackProps[];
+  /**
+   * Preview images for different time segments.
+   */
   thumbnails?: ThumbnailSrc;
+  /**
+   * Translations for the player's default layout labels.
+   * @example
+   * <Video translations={{ Play: 'Play Video' }} />
+   */
   translations?: Partial<DefaultLayoutTranslations>;
+  /**
+   * Determines if an embedded player view is shown for youtube/vimeo.
+   */
   showPlayerEmbed?: boolean;
 };
 
diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
index 6268ecce22..1d9220c2e0 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -21,7 +21,7 @@ import { VideoLayout } from './VideoLayout';
 
 const VariableProvider = styled('div', styledOptions(['variables']))<{
   variables?: CSSObject;
-}>(({ variables }) => variables, { width: '100%' });
+}>(({ variables }) => variables, { width: '100%', height: '100%' });
 
 type VidstackPlayerProps = VideoProps & {
   onLoad: () => void;
diff --git a/packages/gamut/src/Video/lib/utils/variables.ts b/packages/gamut/src/Video/lib/utils/variables.ts
index 42b891c0ce..366b7daec7 100644
--- a/packages/gamut/src/Video/lib/utils/variables.ts
+++ b/packages/gamut/src/Video/lib/utils/variables.ts
@@ -39,5 +39,9 @@ export const vdsVariables: Variables = {
     '--media-slider-value-padding': theme.spacing[4],
     '--media-tooltip-exit-animation': 'vds-tooltip-exit 0s',
     '--media-tooltip-enter-animation': 'vds-tooltip-enter 0s',
-    // '--media-menu-bg': theme.colors['background-contrast'],
+    '--media-menu-bg': theme.colors.background,
+    '--media-menu-top-bar-bg': theme.colors.background,
+    '--media-menu-section-bg': theme.colors["background-selected"],
+    '--media-menu-border': `1px solid ${theme.colors['border-primary']}`,
+    '--media-menu-border-radius': theme.borderRadii.sm,
 }
\ No newline at end of file
diff --git a/packages/gamut/src/Video/styles/index.module.scss b/packages/gamut/src/Video/styles/index.module.scss
index bb3dbeeb0e..4f3f0d4038 100644
--- a/packages/gamut/src/Video/styles/index.module.scss
+++ b/packages/gamut/src/Video/styles/index.module.scss
@@ -2,7 +2,6 @@
 
 .vdsWrapper {
   position: relative;
-  width: 100%;
 }
 
 .videoWrapper {
diff --git a/packages/gamut/src/Video/styles/vds_base_theme.scss b/packages/gamut/src/Video/styles/vds_base_theme.scss
index 3be4de1cab..2269ad16fe 100644
--- a/packages/gamut/src/Video/styles/vds_base_theme.scss
+++ b/packages/gamut/src/Video/styles/vds_base_theme.scss
@@ -2,15 +2,8 @@
 @import "~@vidstack/react/player/styles/default/layouts/video.css";
 @import "~@vidstack/react/player/styles/default/layouts/audio.css";
 
-.vds-controls button {
-    border-radius: var(--media-button-border-radius);
-}
-
-.vds-video-layout .vds-time-slider .vds-slider-value {
-    border: unset;
-    color: white;
-}
 
+// Youtube overlay
 iframe.vds-youtube[data-no-controls] {
     height: 100%;
 }
@@ -19,10 +12,28 @@ 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);
+}
+
+// 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);
@@ -58,26 +69,11 @@ iframe.vds-youtube[data-no-controls] {
     right: calc(0% + .5rem);
 }
 
-:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track) {
-    background-color: var(--color-gray-600);
+@keyframes vds-tooltip-exit{
+    0% { opacity: 1; }
+    100% { opacity: 0; }
 }
-:where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill) {
-    background-color: var(--color-secondary);
-}
-
-@keyframes vds-tooltip-exit {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
 @keyframes vds-tooltip-enter {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
\ No newline at end of file
+    0% { opacity: 0; }
+    100% { opacity: 1;}
+}
\ No newline at end of file

From 52cb9edce7ce9aa79cd3593142deb1090ba1a4a4 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Mon, 3 Feb 2025 15:16:46 +0530
Subject: [PATCH 20/29] feat(Markdown): add support for showPlayerEmbed and
 textTracks in video and iframe overides of markdown

---
 .../src/Markdown/libs/overrides/Iframe/index.tsx     |  2 ++
 .../src/Markdown/libs/overrides/Video/index.tsx      |  8 +++++++-
 packages/gamut/src/Markdown/libs/overrides/index.tsx | 12 ++++++++++++
 .../gamut/src/Markdown/libs/sanitizationConfig.ts    |  4 ++++
 .../styleguide/src/lib/Organisms/Markdown/example.md | 12 ++++++++----
 5 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/gamut/src/Markdown/libs/overrides/Iframe/index.tsx b/packages/gamut/src/Markdown/libs/overrides/Iframe/index.tsx
index a1b8679108..650d932fc2 100644
--- a/packages/gamut/src/Markdown/libs/overrides/Iframe/index.tsx
+++ b/packages/gamut/src/Markdown/libs/overrides/Iframe/index.tsx
@@ -9,6 +9,7 @@ export interface IframeProps extends HTMLAttributes<HTMLIFrameElement> {
   title?: string;
   width?: number;
   height?: number;
+  showPlayerEmbed?: boolean;
 }
 
 const YOUTUBE_PATTERN = /youtu(be\.com|\.be)/;
@@ -25,6 +26,7 @@ export const Iframe: FunctionComponent<IframeProps> = (props) => {
         width={props?.width}
         videoUrl={props?.src}
         videoTitle={props?.title}
+        showPlayerEmbed={props?.showPlayerEmbed}
       />
     );
   }
diff --git a/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx b/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx
index 95ca49f80b..3403a0eba5 100644
--- a/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx
+++ b/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
+import { TrackProps } from '@vidstack/react';
 import { DetailedHTMLProps, VideoHTMLAttributes } from 'react';
 
 import { Video } from '../../../../Video';
@@ -7,7 +8,10 @@ import { Video } from '../../../../Video';
 export type MarkdownVideoProps = DetailedHTMLProps<
   VideoHTMLAttributes<HTMLVideoElement>,
   HTMLVideoElement
->;
+> & {
+  textTracks?: TrackProps[];
+  showPlayerEmbed?: boolean;
+};
 
 export const MarkdownVideo: React.FC<MarkdownVideoProps> = (props) => {
   if (props?.src) {
@@ -21,6 +25,8 @@ export const MarkdownVideo: React.FC<MarkdownVideoProps> = (props) => {
       videoTitle: props?.title,
       videoUrl: props?.src,
       width: Number(props?.width),
+      textTracks: props?.textTracks,
+      showPlayerEmbed: props?.showPlayerEmbed,
     };
 
     return <Video {...videoProps} />;
diff --git a/packages/gamut/src/Markdown/libs/overrides/index.tsx b/packages/gamut/src/Markdown/libs/overrides/index.tsx
index d1b639a49e..6d66145b8f 100644
--- a/packages/gamut/src/Markdown/libs/overrides/index.tsx
+++ b/packages/gamut/src/Markdown/libs/overrides/index.tsx
@@ -139,6 +139,7 @@ export const createVideoOverride = (
     ) as any;
 
     const altVideoSrc = [] as any;
+    const textTracks = [] as any;
 
     if (children) {
       children.forEach((element: any) => {
@@ -150,11 +151,22 @@ export const createVideoOverride = (
             });
           }
         } // Once we enable captions in the Video component, we can add an additional check here - GM-909
+        else if (element.type === 'track') {
+          textTracks.push({
+            src: element?.props.src,
+            language: element?.props.srcLang,
+            default: element?.props.default,
+            kind: element?.props.kind,
+            label: element?.props.label,
+            type: element?.props.type,
+          });
+        }
       });
     }
 
     const props = {
       src: altVideoSrc.length > 0 ? altVideoSrc : src,
+      textTracks,
       ...processedAttributes,
       children,
       key,
diff --git a/packages/gamut/src/Markdown/libs/sanitizationConfig.ts b/packages/gamut/src/Markdown/libs/sanitizationConfig.ts
index 9759db07ec..412a8892f6 100644
--- a/packages/gamut/src/Markdown/libs/sanitizationConfig.ts
+++ b/packages/gamut/src/Markdown/libs/sanitizationConfig.ts
@@ -13,6 +13,7 @@ export const defaultSanitizationConfig = {
     code: ['class'],
     pre: ['class'],
     source: ['src', 'type'],
+    track: ['src', 'label', 'kind', 'srclang', 'default', 'type'],
     img: ['src', 'alt', 'height', 'width', 'title', 'aria-label', 'style'],
     input: ['checked', 'type'],
     video: [
@@ -24,6 +25,7 @@ export const defaultSanitizationConfig = {
       'muted',
       'src',
       'width',
+      'showplayerembed'
     ],
     iframe: [
       'src',
@@ -33,6 +35,7 @@ export const defaultSanitizationConfig = {
       'gesture',
       'allow',
       'allowfullscreen',
+      'showplayerembed'
     ],
   },
   allowedClasses: {
@@ -41,6 +44,7 @@ export const defaultSanitizationConfig = {
   allowedTags: [
     ...sanitizeMarkdown.defaults.allowedTags,
     'video',
+    'track',
     'source',
     'font',
     'pre',
diff --git a/packages/styleguide/src/lib/Organisms/Markdown/example.md b/packages/styleguide/src/lib/Organisms/Markdown/example.md
index ee8578c45d..3b2edf22a0 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/example.md
+++ b/packages/styleguide/src/lib/Organisms/Markdown/example.md
@@ -347,17 +347,21 @@ Use the `printf()` function.
 
 ### Iframes
 
-Vimeo and Youtube video iframes will be rendered by our Video component, otherwise they'll render the original code.
+Vimeo and Youtube video iframes will be rendered by our Video component (if showPlayerEmbed is true it will be rendered in actual embed), otherwise they'll render the original code.
 
 <iframe src="https://player.vimeo.com/video/188237476?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Studio Ghibli in Real Life"></iframe>
 
 <br/>
 
-<iframe width="1094" height="842" src="https://www.youtube.com/embed/zhDwjnYZiCo" title="Ghibli Coffee Shop ☕️ Music to put you in a better mood 🌿 lofi hip hop - lofi songs | study / relax" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-
+<iframe width="1094" height="842" showPlayerEmbed src="https://www.youtube.com/embed/zhDwjnYZiCo" title="Ghibli Coffee Shop ☕️ Music to put you in a better mood 🌿 lofi hip hop - lofi songs | study / relax" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 ### Video
 
 `video`s with an `src` or a `source` video file will be rendered by our Video component, otherwise they'll render the original code. Videos with a `style` prop or another restricted prop will be stripped of that property.
+Insert `track` to add subtitles / captions to the video.
 
-<video width="100%" height="100%" align="middle" controls> <source src="https://content.codecademy.com/articles/db-browser/open-database.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
+<video width="100%" height="100%" align="middle" controls>
+  <source src="https://static-assets-staging.codecademy.com/test-locales/how-to-build-a-portfolio.mp4" type="video/mp4" />
+  <track src="https://static-assets-staging.codecademy.com/test-locales/how-to-build-a-portfolio.srt" type="srt" label="English" kind="subtitles" srclang="en-US" default="true" />
+  Your browser does not support the video tag. 
+</video>

From 6d46a3fe2fc22fd9df7466f2c9928ee4f4f65c8d Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Mon, 3 Feb 2025 15:17:05 +0530
Subject: [PATCH 21/29] refactor(Video): replace CSS styles

---
 packages/gamut/src/Video/index.tsx            | 74 ++++++++++++-------
 packages/gamut/src/Video/lib/Player.tsx       | 13 ++--
 .../gamut/src/Video/styles/index.module.scss  | 49 ------------
 3 files changed, 57 insertions(+), 79 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 481c0f3a50..14f822dc50 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,28 +1,57 @@
 import { PlayIcon } from '@codecademy/gamut-icons';
+import { theme } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import { PlayerSrc, TrackProps } from '@vidstack/react';
 import {
   DefaultLayoutTranslations,
   ThumbnailSrc,
 } from '@vidstack/react/types/vidstack';
-import cx from 'classnames';
 import * as React from 'react';
 import { useState } from 'react';
 import ReactPlayer from 'react-player';
+import { BaseReactPlayerProps } from 'react-player/base';
 
+import { Box, FlexBox } from '../Box';
 import { useIsMounted } from '../utils';
 import { VidstackPlayer } from './lib/Player';
 // eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles/index.module.scss';
+
+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;
+  }
+  video::-webkit-media-controls-panel {
+    background-image: linear-gradient(
+      transparent 15%,
+      ${theme.colors['navy-900']} 55%
+    );
+  }
+`;
 
 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"
+      bg="black"
     >
-      <PlayIcon className={styles.hoverButton} />
-    </div>
+      <PlayIcon minWidth="75px" minHeight="75px" color="white" />
+    </FlexBox>
   );
 };
 
@@ -35,7 +64,6 @@ export type ReactPlayerWithWrapper = ReactPlayer & { wrapper: HTMLElement };
 export type VideoProps = {
   className?: string;
   autoplay?: boolean;
-  controls?: boolean;
   loop?: boolean;
   muted?: boolean;
   onPlay?: () => void;
@@ -43,6 +71,7 @@ export type VideoProps = {
   width?: number;
   height?: number;
   videoTitle?: string;
+  controls?: boolean;
   /**
    * Placeholder image for a poster/thumbnail.
    */
@@ -109,29 +138,24 @@ export const Video: React.FC<VideoProps> = ({
     },
   };
 
-  const hasExternallyHostedVideoAndEmbedEnabled =
-    videoUrl &&
-    typeof videoUrl === 'string' &&
-    showPlayerEmbed &&
-    (videoUrl.match(/youtu(be\.com|\.be)/) || videoUrl.match(/vimeo.com/));
-
   /**
-   * If the video is externally hosted and showPlayerEmbed is true, use ReactPlayer to render the video
+   * If showPlayerEmbed is true and Video Url is a string, use ReactPlayer to render the video
    * Otherwise, use the Vidstack MediaPlayer. This is because currently vidstack player has an issue with
    * youtube iframe embeds where it keeps pausing (only in case if yt iframe is used i.e with native yt controls)
    */
-  if (hasExternallyHostedVideoAndEmbedEnabled) {
+  if (showPlayerEmbed) {
     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 ? 'black' : undefined}
+        className={className}
       >
         {isMounted ? (
-          <ReactPlayer
-            className={styles.iframe}
+          <ReactVideoPlayer
             config={config}
             controls={controls === undefined ? true : controls}
             height={height}
@@ -141,7 +165,7 @@ export const Video: React.FC<VideoProps> = ({
             playIcon={<OverlayPlayButton videoTitle={videoTitle} />}
             playing={autoplay}
             title={videoTitle}
-            url={videoUrl}
+            url={videoUrl as BaseReactPlayerProps['url']}
             width={width}
             onReady={(player: ReactPlayerWithWrapper) => {
               onReady?.(player);
@@ -150,7 +174,7 @@ export const Video: React.FC<VideoProps> = ({
             onPlay={onPlay}
           />
         ) : null}
-      </div>
+      </Box>
     );
   }
 
diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
index 1d9220c2e0..98c1027d4c 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -10,18 +10,21 @@ import {
   Poster,
   Track,
 } from '@vidstack/react';
-import cx from 'classnames';
 import React, { useRef } from 'react';
 
+import { Box } from '../../Box';
 import { VideoProps } from '..';
-import styles from '../styles/index.module.scss';
 import { keyboardShortcuts } from './utils/keyboardShortcuts';
 import { vdsVariables } from './utils/variables';
 import { VideoLayout } from './VideoLayout';
 
-const VariableProvider = styled('div', styledOptions(['variables']))<{
+const VariableProvider = styled(Box, styledOptions(['variables']))<{
   variables?: CSSObject;
-}>(({ variables }) => variables, { width: '100%', height: '100%' });
+}>(({ variables }) => variables, {
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+});
 
 type VidstackPlayerProps = VideoProps & {
   onLoad: () => void;
@@ -49,7 +52,7 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
   return (
     <VariableProvider
       variables={vdsVariables}
-      className={cx(styles.vdsWrapper, className)}
+      className={className}
       style={{ width, height }}
     >
       <MediaPlayer
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 4f3f0d4038..0000000000
--- a/packages/gamut/src/Video/styles/index.module.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import "~@codecademy/gamut-styles/utils";
-
-.vdsWrapper {
-  position: relative;
-}
-
-.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 d5baff37e0ef6b694dffff9f9562c142f66856e7 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Tue, 4 Feb 2025 11:58:06 +0530
Subject: [PATCH 22/29] feat(Video): youtube src workaround, refactor player
 controls & comment fixes

---
 packages/gamut/src/Video/index.tsx            | 89 ++++++-------------
 packages/gamut/src/Video/lib/Player.tsx       | 31 ++++++-
 packages/gamut/src/Video/lib/ReactPlayer.tsx  | 55 ++++++++++++
 packages/gamut/src/Video/lib/VideoLayout.tsx  |  8 +-
 .../gamut/src/Video/lib/utils/constants.ts    | 30 +++++++
 .../src/Video/lib/utils/keyboardShortcuts.ts  | 15 ----
 .../src/Video/styles/vds_base_theme.scss      |  6 ++
 7 files changed, 151 insertions(+), 83 deletions(-)
 create mode 100644 packages/gamut/src/Video/lib/ReactPlayer.tsx
 create mode 100644 packages/gamut/src/Video/lib/utils/constants.ts
 delete mode 100644 packages/gamut/src/Video/lib/utils/keyboardShortcuts.ts

diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 14f822dc50..4bd6d40dd7 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,6 +1,3 @@
-import { PlayIcon } from '@codecademy/gamut-icons';
-import { theme } from '@codecademy/gamut-styles';
-import styled from '@emotion/styled';
 import { PlayerSrc, TrackProps } from '@vidstack/react';
 import {
   DefaultLayoutTranslations,
@@ -8,58 +5,16 @@ import {
 } from '@vidstack/react/types/vidstack';
 import * as React from 'react';
 import { useState } from 'react';
-import ReactPlayer from 'react-player';
 import { BaseReactPlayerProps } from 'react-player/base';
 
-import { Box, FlexBox } from '../Box';
+import { Box } from '../Box';
 import { useIsMounted } from '../utils';
 import { VidstackPlayer } from './lib/Player';
-// eslint-disable-next-line gamut/no-css-standalone
-
-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;
-  }
-  video::-webkit-media-controls-panel {
-    background-image: linear-gradient(
-      transparent 15%,
-      ${theme.colors['navy-900']} 55%
-    );
-  }
-`;
-
-const OverlayPlayButton = ({ videoTitle }: { videoTitle?: string }) => {
-  return (
-    <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"
-      bg="black"
-    >
-      <PlayIcon minWidth="75px" minHeight="75px" color="white" />
-    </FlexBox>
-  );
-};
-
-/**
- * @remarks ReactPlayer has optional key 'wrapper' that we require for the onReady callback
- */
-
-export type ReactPlayerWithWrapper = ReactPlayer & { wrapper: HTMLElement };
+import {
+  OverlayPlayButton,
+  ReactPlayerWithWrapper,
+  ReactVideoPlayer,
+} from './lib/ReactPlayer';
 
 export type VideoProps = {
   className?: string;
@@ -103,9 +58,14 @@ export type VideoProps = {
    */
   translations?: Partial<DefaultLayoutTranslations>;
   /**
-   * Determines if an embedded player view is shown for youtube/vimeo.
+   * @TEMPORARY
+   * Determines if an embedded player view is shown.
    */
   showPlayerEmbed?: boolean;
+  /**
+   * Determines if the default provider/browser controls are shown.
+   */
+  showDefaultProviderControls?: boolean;
 };
 
 export const Video: React.FC<VideoProps> = ({
@@ -125,6 +85,7 @@ export const Video: React.FC<VideoProps> = ({
   thumbnails,
   translations,
   showPlayerEmbed,
+  showDefaultProviderControls,
 }) => {
   const [loading, setLoading] = useState(true);
   const isMounted = useIsMounted();
@@ -139,9 +100,8 @@ export const Video: React.FC<VideoProps> = ({
   };
 
   /**
-   * If showPlayerEmbed is true and Video Url is a string, use ReactPlayer to render the video
-   * Otherwise, use the Vidstack MediaPlayer. This is because currently vidstack player has an issue with
-   * youtube iframe embeds where it keeps pausing (only in case if yt iframe is used i.e with native yt controls)
+   * If showPlayerEmbed is true use ReactPlayer to render the video
+   * Otherwise, use the Vidstack MediaPlayer. This is because
    */
   if (showPlayerEmbed) {
     return (
@@ -158,7 +118,6 @@ export const Video: React.FC<VideoProps> = ({
           <ReactVideoPlayer
             config={config}
             controls={controls === undefined ? true : controls}
-            height={height}
             light={placeholderImage}
             loop={loop}
             muted={muted}
@@ -166,7 +125,8 @@ export const Video: React.FC<VideoProps> = ({
             playing={autoplay}
             title={videoTitle}
             url={videoUrl as BaseReactPlayerProps['url']}
-            width={width}
+            height="100%"
+            width="100%"
             onReady={(player: ReactPlayerWithWrapper) => {
               onReady?.(player);
               setLoading(false);
@@ -182,22 +142,23 @@ export const Video: React.FC<VideoProps> = ({
     <>
       {isMounted && (
         <VidstackPlayer
-          autoplay={autoplay}
-          controls={controls}
           loop={loop}
           muted={muted}
+          width={width}
+          height={height}
           onPlay={onPlay}
           onReady={onReady}
-          placeholderImage={placeholderImage}
-          videoTitle={videoTitle}
           videoUrl={videoUrl}
+          controls={controls}
+          autoplay={autoplay}
+          className={className}
+          videoTitle={videoTitle}
           textTracks={textTracks}
           thumbnails={thumbnails}
           translations={translations}
           onLoad={() => setLoading(false)}
-          width={width}
-          height={height}
-          className={className}
+          placeholderImage={placeholderImage}
+          showDefaultProviderControls={showDefaultProviderControls}
         />
       )}
     </>
diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
index 98c1027d4c..35b1b5058b 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -4,17 +4,21 @@ import '../styles/vds_base_theme.scss';
 import { styledOptions } from '@codecademy/gamut-styles';
 import styled, { CSSObject } from '@emotion/styled';
 import {
+  isYouTubeProvider,
   MediaPlayer,
   MediaPlayerInstance,
   MediaProvider,
+  MediaProviderAdapter,
   Poster,
   Track,
+  useMediaRemote,
+  useMediaState,
 } from '@vidstack/react';
 import React, { useRef } from 'react';
 
 import { Box } from '../../Box';
 import { VideoProps } from '..';
-import { keyboardShortcuts } from './utils/keyboardShortcuts';
+import { keyboardShortcuts } from './utils/constants';
 import { vdsVariables } from './utils/variables';
 import { VideoLayout } from './VideoLayout';
 
@@ -46,8 +50,28 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
   width,
   height,
   className,
+  showDefaultProviderControls = false,
 }) => {
   const player = useRef<MediaPlayerInstance>(null);
+  const paused = useMediaState('paused', player);
+  const mediaRemote = useMediaRemote(player);
+
+  /**
+   * !Workaround for Vidstack Youtube Provider issue with native controls!
+   * (Not needed with Custom Controls i.e when controls props is not set to true in <MediaPlayer>)
+   * When the provider changes or player is in waiting state, we need to force re-play the video.
+   * This is because of an issue in Vidstack where Youtube videos with native controls keeps pausing.
+   */
+  const onProviderChange = async (provider: MediaProviderAdapter | null) => {
+    if (isYouTubeProvider(provider)) {
+      await provider.play();
+    }
+  };
+  const onPlayerWaiting = () => {
+    if (isYouTubeProvider(player.current?.provider) && paused) {
+      mediaRemote?.togglePaused();
+    }
+  };
 
   return (
     <VariableProvider
@@ -56,6 +80,7 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
       style={{ width, height }}
     >
       <MediaPlayer
+        controls={showDefaultProviderControls}
         ref={player}
         title={videoTitle}
         src={videoUrl}
@@ -63,12 +88,14 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
         autoPlay={autoplay}
         loop={loop}
         muted={muted}
+        keyShortcuts={keyboardShortcuts}
         onLoad={onLoad}
         onPlay={onPlay}
         onCanPlay={() => {
           onReady?.();
         }}
-        keyShortcuts={keyboardShortcuts}
+        onProviderChange={onProviderChange}
+        onWaiting={onPlayerWaiting}
       >
         <MediaProvider>
           {placeholderImage && (
diff --git a/packages/gamut/src/Video/lib/ReactPlayer.tsx b/packages/gamut/src/Video/lib/ReactPlayer.tsx
new file mode 100644
index 0000000000..8684872b16
--- /dev/null
+++ b/packages/gamut/src/Video/lib/ReactPlayer.tsx
@@ -0,0 +1,55 @@
+import { PlayIcon } from '@codecademy/gamut-icons';
+import { css, theme } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import ReactPlayer from 'react-player';
+
+import { FlexBox } from '../../Box';
+
+export const ReactVideoPlayer = styled(ReactPlayer)(
+  css({
+    padding: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    '& :focus-visible': {
+      outlineOffset: '3px',
+    },
+    'video::-webkit-media-controls-panel': {
+      backgroundImage: `linear-gradient(
+          transparent 15%,
+          ${theme.colors['navy-900']} 55%
+        )`,
+    },
+  })
+);
+
+const StyledFlexBox = styled(FlexBox)(
+  css({
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    color: 'white',
+    width: '100%',
+    height: '100%',
+    opacity: '0.5',
+    bg: 'black',
+  })
+);
+
+export const OverlayPlayButton = ({ videoTitle }: { videoTitle?: string }) => {
+  return (
+    <StyledFlexBox
+      role="button"
+      aria-label={`play video${videoTitle ? `: ${videoTitle}` : ''}`}
+    >
+      <PlayIcon minWidth="75px" minHeight="75px" color="white" />
+    </StyledFlexBox>
+  );
+};
+
+/**
+ * @remarks ReactPlayer has optional key 'wrapper' that we require for the onReady callback
+ */
+
+export type ReactPlayerWithWrapper = ReactPlayer & { wrapper: HTMLElement };
diff --git a/packages/gamut/src/Video/lib/VideoLayout.tsx b/packages/gamut/src/Video/lib/VideoLayout.tsx
index 7d6bbdb33d..6607144b49 100644
--- a/packages/gamut/src/Video/lib/VideoLayout.tsx
+++ b/packages/gamut/src/Video/lib/VideoLayout.tsx
@@ -6,6 +6,7 @@ import {
 } from '@vidstack/react/types/vidstack';
 
 import { customLayoutSlots } from './slotOverrides';
+import { defaultTranslations } from './utils/constants';
 import { customIcons } from './utils/icons';
 
 export type VideoLayoutProps = {
@@ -25,13 +26,16 @@ export type VideoLayoutProps = {
 export const VideoLayout: React.FC<VideoLayoutProps> = ({
   controls,
   thumbnails,
-  translations,
+  translations = {},
 }) => {
   const mode = useCurrentMode();
 
   return (
     <DefaultVideoLayout
-      translations={translations}
+      translations={{
+        ...defaultTranslations,
+        ...translations,
+      }}
       colorScheme={mode}
       hidden={!controls}
       icons={customIcons}
diff --git a/packages/gamut/src/Video/lib/utils/constants.ts b/packages/gamut/src/Video/lib/utils/constants.ts
new file mode 100644
index 0000000000..a89df15c73
--- /dev/null
+++ b/packages/gamut/src/Video/lib/utils/constants.ts
@@ -0,0 +1,30 @@
+import { MediaKeyShortcuts } from "@vidstack/react";
+import { DefaultLayoutTranslations } from "@vidstack/react/types/vidstack";
+
+export const keyboardShortcuts: MediaKeyShortcuts = {
+    togglePaused: 'k Space',
+    toggleMuted: 'm',
+    toggleFullscreen: 'f',
+    togglePictureInPicture: 'i',
+    toggleCaptions: 'c',
+    seekBackward: 'j J ArrowLeft',
+    seekForward: 'l L ArrowRight',
+    volumeUp: 'ArrowUp',
+    volumeDown: 'ArrowDown',
+    speedUp: '>',
+    slowDown: '<',
+}
+
+export const defaultTranslations: Partial<DefaultLayoutTranslations> = {
+    'Seek Backward': 'Back 10 seconds',
+    'Enter PiP': 'Enter picture-in-picture',
+    'Exit PiP': 'Exit picture-in-picture',
+    'Enter Fullscreen': 'Enter fullscreen',
+    'Exit Fullscreen': 'Exit fullscreen',
+    'Caption Styles': 'Caption styles',
+    'Text Background': 'Text background',
+    'Closed-Captions On': 'Closed-Captions on',
+    'Closed-Captions Off': 'Closed-Captions off',
+    'Display Background': 'Display background',
+    'Keyboard Animations': 'Keyboard animations',
+}
\ No newline at end of file
diff --git a/packages/gamut/src/Video/lib/utils/keyboardShortcuts.ts b/packages/gamut/src/Video/lib/utils/keyboardShortcuts.ts
deleted file mode 100644
index ba7bc2fbea..0000000000
--- a/packages/gamut/src/Video/lib/utils/keyboardShortcuts.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { MediaKeyShortcuts } from "@vidstack/react";
-
-export const keyboardShortcuts: MediaKeyShortcuts = {
-    togglePaused: 'k Space',
-    toggleMuted: 'm',
-    toggleFullscreen: 'f',
-    togglePictureInPicture: 'i',
-    toggleCaptions: 'c',
-    seekBackward: 'j J ArrowLeft',
-    seekForward: 'l L ArrowRight',
-    volumeUp: 'ArrowUp',
-    volumeDown: 'ArrowDown',
-    speedUp: '>',
-    slowDown: '<',
-}
\ No newline at end of file
diff --git a/packages/gamut/src/Video/styles/vds_base_theme.scss b/packages/gamut/src/Video/styles/vds_base_theme.scss
index 2269ad16fe..14dec021cc 100644
--- a/packages/gamut/src/Video/styles/vds_base_theme.scss
+++ b/packages/gamut/src/Video/styles/vds_base_theme.scss
@@ -1,6 +1,7 @@
 @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";
+@import "~@codecademy/gamut-styles/utils";
 
 
 // Youtube overlay
@@ -21,6 +22,11 @@ iframe.vds-youtube[data-no-controls] {
     border-radius: var(--media-button-border-radius);
 }
 
+:where(.vds-video-layout[data-sm])
+    :where( .vds-button ) {
+        padding: 0px px-rem(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);

From bf8f5b712d1a5fd74386a5c16719f936d8defa8a Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Tue, 4 Feb 2025 12:10:28 +0530
Subject: [PATCH 23/29] chore(video): fix tests

---
 packages/gamut/src/Markdown/__tests__/Markdown.test.tsx | 2 ++
 packages/gamut/src/Video/__tests__/Video.test.tsx       | 2 ++
 packages/gamut/src/Video/index.tsx                      | 2 +-
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
index dbf3219617..1885d8ab62 100644
--- a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
+++ b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
@@ -19,6 +19,8 @@ jest.mock('@vidstack/react', () => ({
   MediaProvider: () => <div />,
   Poster: jest.fn(),
   Track: jest.fn(),
+  useMediaState: jest.fn(),
+  useMediaRemote: jest.fn(),
 }));
 
 const basicMarkdown = `
diff --git a/packages/gamut/src/Video/__tests__/Video.test.tsx b/packages/gamut/src/Video/__tests__/Video.test.tsx
index f454712963..97ad0c08ee 100644
--- a/packages/gamut/src/Video/__tests__/Video.test.tsx
+++ b/packages/gamut/src/Video/__tests__/Video.test.tsx
@@ -7,6 +7,8 @@ jest.mock('@vidstack/react', () => ({
   MediaProvider: jest.fn(),
   Poster: jest.fn(),
   Track: jest.fn(),
+  useMediaState: jest.fn(),
+  useMediaRemote: jest.fn(),
 }));
 
 const renderView = setupRtl(Video, {});
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 4bd6d40dd7..3d4b6f89c7 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -101,7 +101,7 @@ export const Video: React.FC<VideoProps> = ({
 
   /**
    * If showPlayerEmbed is true use ReactPlayer to render the video
-   * Otherwise, use the Vidstack MediaPlayer. This is because
+   * Otherwise, use the Vidstack MediaPlayer. @TEMPOARY_FALLBACK
    */
   if (showPlayerEmbed) {
     return (

From 8727e3c6adc161b86b18c33a2e70d977cc1cf305 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Wed, 5 Feb 2025 00:29:38 +0530
Subject: [PATCH 24/29] test: try fix for browser autoplay issues

---
 packages/gamut/src/Video/lib/Player.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
index 35b1b5058b..c152baa370 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -87,10 +87,15 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
         playsInline
         autoPlay={autoplay}
         loop={loop}
-        muted={muted}
+        muted={autoplay ? true : muted}
         keyShortcuts={keyboardShortcuts}
         onLoad={onLoad}
-        onPlay={onPlay}
+        onPlay={() => {
+          onPlay?.();
+          if (autoplay && player.current?.muted && !muted) {
+            mediaRemote?.unmute();
+          }
+        }}
         onCanPlay={() => {
           onReady?.();
         }}

From f0b7bcc13144c3bb8b9814cc21ca0956af6de3e0 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Wed, 5 Feb 2025 01:14:54 +0530
Subject: [PATCH 25/29] fix: mute when autoplay for youtube videos

---
 packages/gamut/src/Video/lib/Player.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
index c152baa370..0177d53dae 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -87,14 +87,15 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
         playsInline
         autoPlay={autoplay}
         loop={loop}
-        muted={autoplay ? true : muted}
+        muted={
+          autoplay && isYouTubeProvider(player?.current?.provider)
+            ? true
+            : muted
+        }
         keyShortcuts={keyboardShortcuts}
         onLoad={onLoad}
         onPlay={() => {
           onPlay?.();
-          if (autoplay && player.current?.muted && !muted) {
-            mediaRemote?.unmute();
-          }
         }}
         onCanPlay={() => {
           onReady?.();

From 2a2b99cefa15d994074f38e69f1e8884b34f3034 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Wed, 5 Feb 2025 01:38:05 +0530
Subject: [PATCH 26/29] chore: autoplay fallback

---
 packages/gamut/src/Video/lib/Player.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/Player.tsx
index 0177d53dae..1791ddffbb 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/Player.tsx
@@ -97,6 +97,11 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
         onPlay={() => {
           onPlay?.();
         }}
+        onPlaying={() => {
+          if (autoplay && player.current?.muted && !muted) {
+            mediaRemote?.unmute();
+          }
+        }}
         onCanPlay={() => {
           onReady?.();
         }}

From dd4cb6bce69429cab63d4777668bc993e8df406b Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Fri, 7 Feb 2025 11:25:13 +0530
Subject: [PATCH 27/29] format fixes

---
 packages/gamut/jest.config.ts                 |   2 +-
 .../src/Markdown/libs/sanitizationConfig.ts   |   4 +-
 .../gamut/src/Video/lib/utils/constants.ts    |  52 ++++-----
 .../gamut/src/Video/lib/utils/variables.ts    |  74 ++++++-------
 .../src/Video/styles/vds_base_theme.scss      | 104 ++++++++++--------
 packages/gamut/src/index.tsx                  |   2 +-
 6 files changed, 126 insertions(+), 112 deletions(-)

diff --git a/packages/gamut/jest.config.ts b/packages/gamut/jest.config.ts
index fcad1bb482..89cacf4d8c 100644
--- a/packages/gamut/jest.config.ts
+++ b/packages/gamut/jest.config.ts
@@ -8,5 +8,5 @@ export default base('gamut', {
   setupFiles: ['<rootDir>/../../script/jest/base-setup.js'],
   setupFilesAfterEnv: ['<rootDir>/../../script/jest/rtl-setup.js'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  transformIgnorePatterns: ["node_modules/(?!(@vidstack/react)/)"],
+  transformIgnorePatterns: ['node_modules/(?!(@vidstack/react)/)'],
 });
diff --git a/packages/gamut/src/Markdown/libs/sanitizationConfig.ts b/packages/gamut/src/Markdown/libs/sanitizationConfig.ts
index 412a8892f6..d247b6159c 100644
--- a/packages/gamut/src/Markdown/libs/sanitizationConfig.ts
+++ b/packages/gamut/src/Markdown/libs/sanitizationConfig.ts
@@ -25,7 +25,7 @@ export const defaultSanitizationConfig = {
       'muted',
       'src',
       'width',
-      'showplayerembed'
+      'showplayerembed',
     ],
     iframe: [
       'src',
@@ -35,7 +35,7 @@ export const defaultSanitizationConfig = {
       'gesture',
       'allow',
       'allowfullscreen',
-      'showplayerembed'
+      'showplayerembed',
     ],
   },
   allowedClasses: {
diff --git a/packages/gamut/src/Video/lib/utils/constants.ts b/packages/gamut/src/Video/lib/utils/constants.ts
index a89df15c73..8023f3cbee 100644
--- a/packages/gamut/src/Video/lib/utils/constants.ts
+++ b/packages/gamut/src/Video/lib/utils/constants.ts
@@ -1,30 +1,30 @@
-import { MediaKeyShortcuts } from "@vidstack/react";
-import { DefaultLayoutTranslations } from "@vidstack/react/types/vidstack";
+import { MediaKeyShortcuts } from '@vidstack/react';
+import { DefaultLayoutTranslations } from '@vidstack/react/types/vidstack';
 
 export const keyboardShortcuts: MediaKeyShortcuts = {
-    togglePaused: 'k Space',
-    toggleMuted: 'm',
-    toggleFullscreen: 'f',
-    togglePictureInPicture: 'i',
-    toggleCaptions: 'c',
-    seekBackward: 'j J ArrowLeft',
-    seekForward: 'l L ArrowRight',
-    volumeUp: 'ArrowUp',
-    volumeDown: 'ArrowDown',
-    speedUp: '>',
-    slowDown: '<',
-}
+  togglePaused: 'k Space',
+  toggleMuted: 'm',
+  toggleFullscreen: 'f',
+  togglePictureInPicture: 'i',
+  toggleCaptions: 'c',
+  seekBackward: 'j J ArrowLeft',
+  seekForward: 'l L ArrowRight',
+  volumeUp: 'ArrowUp',
+  volumeDown: 'ArrowDown',
+  speedUp: '>',
+  slowDown: '<',
+};
 
 export const defaultTranslations: Partial<DefaultLayoutTranslations> = {
-    'Seek Backward': 'Back 10 seconds',
-    'Enter PiP': 'Enter picture-in-picture',
-    'Exit PiP': 'Exit picture-in-picture',
-    'Enter Fullscreen': 'Enter fullscreen',
-    'Exit Fullscreen': 'Exit fullscreen',
-    'Caption Styles': 'Caption styles',
-    'Text Background': 'Text background',
-    'Closed-Captions On': 'Closed-Captions on',
-    'Closed-Captions Off': 'Closed-Captions off',
-    'Display Background': 'Display background',
-    'Keyboard Animations': 'Keyboard animations',
-}
\ No newline at end of file
+  'Seek Backward': 'Back 10 seconds',
+  'Enter PiP': 'Enter picture-in-picture',
+  'Exit PiP': 'Exit picture-in-picture',
+  'Enter Fullscreen': 'Enter fullscreen',
+  'Exit Fullscreen': 'Exit fullscreen',
+  'Caption Styles': 'Caption styles',
+  'Text Background': 'Text background',
+  'Closed-Captions On': 'Closed-Captions on',
+  'Closed-Captions Off': 'Closed-Captions off',
+  'Display Background': 'Display background',
+  'Keyboard Animations': 'Keyboard animations',
+};
diff --git a/packages/gamut/src/Video/lib/utils/variables.ts b/packages/gamut/src/Video/lib/utils/variables.ts
index 366b7daec7..fe8c01443d 100644
--- a/packages/gamut/src/Video/lib/utils/variables.ts
+++ b/packages/gamut/src/Video/lib/utils/variables.ts
@@ -1,7 +1,7 @@
-import { theme } from "@codecademy/gamut-styles";
+import { theme } from '@codecademy/gamut-styles';
 
 interface Variables {
-    [key: string]: string;
+  [key: string]: string;
 }
 
 /**
@@ -10,38 +10,38 @@ interface Variables {
  * https://vidstack.io/docs/player/components/layouts/default-layout/?styling=default-theme#css-variables
  */
 export const vdsVariables: Variables = {
-    // Video Variables
-    '--video-font-family': theme.fontFamily.base,
-    '--video-brand': theme.colors["gray-100"],
-    '--video-controls-color': theme.colors["gray-100"],
-    '--video-focus-ring-color': theme.colors.primary,        
-    '--video-bg': theme.colors.black,
-    '--video-border-radius': theme.borderRadii.md,
-    // Media/Control Variables
-    '--media-button-border-radius': theme.borderRadii.md,
-    '--media-button-padding': `0px ${theme.spacing[8]}`,
-    '--media-tooltip-bg-color': theme.colors['background-contrast'],
-    '--media-tooltip-border-radius': theme.borderRadii.sm,
-    '--media-tooltip-border': `1px solid ${theme.colors['border-primary']}`,
-    '--media-tooltip-color': theme.colors.text,
-    '--media-tooltip-font-size': theme.fontSize[14],
-    '--media-tooltip-padding': theme.spacing[4],
-    '--media-menu-checkbox-bg-active': theme.colors.primary,
-    '--media-menu-checkbox-bg': theme.colors["text-disabled"], 
-    '--media-menu-checkbox-width': '36px',
-    '--media-menu-checkbox-height': '18px',
-    '--media-menu-checkbox-handle-border': `1px solid ${theme.colors.background}`,
-    '--media-slider-preview-border-radius': theme.borderRadii.sm,
-    '--media-slider-value-bg': theme.colors['background-contrast'],
-    '--media-slider-value-border-radius': theme.borderRadii.sm,
-    '--media-slider-value-border': `1px solid ${theme.colors['border-primary']}`,
-    '--media-slider-value-color': theme.colors.text,
-    '--media-slider-value-padding': theme.spacing[4],
-    '--media-tooltip-exit-animation': 'vds-tooltip-exit 0s',
-    '--media-tooltip-enter-animation': 'vds-tooltip-enter 0s',
-    '--media-menu-bg': theme.colors.background,
-    '--media-menu-top-bar-bg': theme.colors.background,
-    '--media-menu-section-bg': theme.colors["background-selected"],
-    '--media-menu-border': `1px solid ${theme.colors['border-primary']}`,
-    '--media-menu-border-radius': theme.borderRadii.sm,
-}
\ No newline at end of file
+  // Video Variables
+  '--video-font-family': theme.fontFamily.base,
+  '--video-brand': theme.colors['gray-100'],
+  '--video-controls-color': theme.colors['gray-100'],
+  '--video-focus-ring-color': theme.colors.primary,
+  '--video-bg': theme.colors.black,
+  '--video-border-radius': theme.borderRadii.md,
+  // Media/Control Variables
+  '--media-button-border-radius': theme.borderRadii.md,
+  '--media-button-padding': `0px ${theme.spacing[8]}`,
+  '--media-tooltip-bg-color': theme.colors['background-contrast'],
+  '--media-tooltip-border-radius': theme.borderRadii.sm,
+  '--media-tooltip-border': `1px solid ${theme.colors['border-primary']}`,
+  '--media-tooltip-color': theme.colors.text,
+  '--media-tooltip-font-size': theme.fontSize[14],
+  '--media-tooltip-padding': theme.spacing[4],
+  '--media-menu-checkbox-bg-active': theme.colors.primary,
+  '--media-menu-checkbox-bg': theme.colors['text-disabled'],
+  '--media-menu-checkbox-width': '36px',
+  '--media-menu-checkbox-height': '18px',
+  '--media-menu-checkbox-handle-border': `1px solid ${theme.colors.background}`,
+  '--media-slider-preview-border-radius': theme.borderRadii.sm,
+  '--media-slider-value-bg': theme.colors['background-contrast'],
+  '--media-slider-value-border-radius': theme.borderRadii.sm,
+  '--media-slider-value-border': `1px solid ${theme.colors['border-primary']}`,
+  '--media-slider-value-color': theme.colors.text,
+  '--media-slider-value-padding': theme.spacing[4],
+  '--media-tooltip-exit-animation': 'vds-tooltip-exit 0s',
+  '--media-tooltip-enter-animation': 'vds-tooltip-enter 0s',
+  '--media-menu-bg': theme.colors.background,
+  '--media-menu-top-bar-bg': theme.colors.background,
+  '--media-menu-section-bg': theme.colors['background-selected'],
+  '--media-menu-border': `1px solid ${theme.colors['border-primary']}`,
+  '--media-menu-border-radius': theme.borderRadii.sm,
+};
diff --git a/packages/gamut/src/Video/styles/vds_base_theme.scss b/packages/gamut/src/Video/styles/vds_base_theme.scss
index 14dec021cc..7f57a55dee 100644
--- a/packages/gamut/src/Video/styles/vds_base_theme.scss
+++ b/packages/gamut/src/Video/styles/vds_base_theme.scss
@@ -3,83 +3,97 @@
 @import "~@vidstack/react/player/styles/default/layouts/audio.css";
 @import "~@codecademy/gamut-styles/utils";
 
-
 // Youtube overlay
 iframe.vds-youtube[data-no-controls] {
-    height: 100%;
+  height: 100%;
 }
 
 [data-started] iframe.vds-youtube[data-no-controls] {
-    height: 1000%;
+  height: 1000%;
 }
 
 // Control buttons
 :where(.vds-button .vds-icon) {
-    border-radius: unset;
+  border-radius: unset;
 }
 
 .vds-controls button {
-    border-radius: var(--media-button-border-radius);
+  border-radius: var(--media-button-border-radius);
 }
 
-:where(.vds-video-layout[data-sm])
-    :where( .vds-button ) {
-        padding: 0px px-rem(4px) !important;
-    }
+:where(.vds-video-layout[data-sm]) :where(.vds-button) {
+  padding: 0px px-rem(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);
+  background-color: var(--color-gray-600);
 }
 :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill) {
-    background-color: var(--color-secondary);
+  background-color: var(--color-secondary);
 }
 .vds-video-layout .vds-time-slider .vds-slider-value {
-    border: unset;
-    color: white;
+  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;
+  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~="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~="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% + .5rem);
+: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% + .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-exit {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 @keyframes vds-tooltip-enter {
-    0% { opacity: 0; }
-    100% { opacity: 1;}
-}
\ No newline at end of file
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/packages/gamut/src/index.tsx b/packages/gamut/src/index.tsx
index c6cbdedd4a..dd3b53107f 100644
--- a/packages/gamut/src/index.tsx
+++ b/packages/gamut/src/index.tsx
@@ -56,4 +56,4 @@ export * from './typings/responsive-properties';
 export * from './Typography/Text';
 export type { HeadingTags } from './Typography/types';
 export * from './utils';
-export * from './Video';
\ No newline at end of file
+export * from './Video';

From 4fa0301301e8129373ce6983e3296b99dbed3c41 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Wed, 12 Feb 2025 12:19:00 +0530
Subject: [PATCH 28/29] feat: merge main and fix typepo

---
 .vscode/stories.code-snippets                 |  31 +--
 packages/gamut-icons/CHANGELOG.md             |   8 +
 packages/gamut-icons/package.json             |   4 +-
 packages/gamut-icons/src/useIconId.tsx        |   3 +-
 packages/gamut-illustrations/CHANGELOG.md     |   4 +
 packages/gamut-illustrations/package.json     |   4 +-
 packages/gamut-kit/CHANGELOG.md               |  12 ++
 packages/gamut-kit/package.json               |  14 +-
 packages/gamut-patterns/CHANGELOG.md          |   8 +
 packages/gamut-patterns/package.json          |   4 +-
 packages/gamut-patterns/src/usePatternId.tsx  |   3 +-
 packages/gamut-styles/CHANGELOG.md            |   6 +
 packages/gamut-styles/package.json            |   2 +-
 .../__snapshots__/theme.test.ts.snap          |   9 +
 packages/gamut-styles/src/variables/colors.ts |   1 +
 packages/gamut-tests/CHANGELOG.md             |   4 +
 packages/gamut-tests/package.json             |   4 +-
 packages/gamut/CHANGELOG.md                   |  12 ++
 packages/gamut/package.json                   |  15 +-
 packages/gamut/src/Alert/Alert.tsx            |   6 +-
 packages/gamut/src/Button/IconButton.tsx      |   3 +-
 packages/gamut/src/Drawer/index.tsx           |   2 +-
 .../Form/SelectDropdown/SelectDropdown.tsx    |   3 +-
 packages/gamut/src/Motion/FadeInSlideOut.tsx  |   2 +-
 .../gamut/src/Pagination/PaginationButton.tsx |   1 +
 packages/gamut/src/Pagination/utils.tsx       |   2 +-
 packages/gamut/src/Tip/PreviewTip/index.tsx   |   2 +-
 packages/gamut/src/Video/index.tsx            |   2 +-
 packages/styleguide/CHANGELOG.md              |   4 +
 packages/styleguide/package.json              |   2 +-
 packages/styleguide/src/lib/Atoms/About.mdx   |   4 +-
 .../src/lib/Atoms/Animation/Animation.mdx     |  29 ---
 .../src/lib/Atoms/Animations/About.mdx        |  33 ++++
 .../ExpandInCollapseOut.mdx                   |  31 +++
 .../ExpandInCollapseOut.stories.tsx           |  47 +++++
 .../Atoms/Animations/Rotation/Rotation.mdx    |  31 +++
 .../Rotation/Rotation.stories.tsx}            |   0
 yarn.lock                                     | 186 +++++-------------
 38 files changed, 311 insertions(+), 227 deletions(-)
 delete mode 100644 packages/styleguide/src/lib/Atoms/Animation/Animation.mdx
 create mode 100644 packages/styleguide/src/lib/Atoms/Animations/About.mdx
 create mode 100644 packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.mdx
 create mode 100644 packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.stories.tsx
 create mode 100644 packages/styleguide/src/lib/Atoms/Animations/Rotation/Rotation.mdx
 rename packages/styleguide/src/lib/Atoms/{Animation/Animation.stories.tsx => Animations/Rotation/Rotation.stories.tsx} (100%)

diff --git a/.vscode/stories.code-snippets b/.vscode/stories.code-snippets
index da25ae07cd..e6513854d2 100644
--- a/.vscode/stories.code-snippets
+++ b/.vscode/stories.code-snippets
@@ -9,19 +9,20 @@
       "import * as $1Stories from './$1.stories';",
       "",
       "export const parameters = {",
-      "subtitle: `Template component`,",
-      "design: {",
-      "type: 'figma',",
-      "url: 'https: //www.figma.com/file/XXX',",
-      " },",
-      "status: 'current',",
-      "source: {",
-      "repo: '$2',",
-      "// this is easy to find by right clicking on the file in VSCode and clicking 'Copy Remote File Url From...' and the selecting 'main' or amending the url path below like so: https://github.com/Codecademy/gamut/blob/main/packages/${2}/src/file/location",
-      "githubLink:",
-      "'https: //github.com/Codecademy/gamut/blob/main/packages/gamut/src/Logo',",
-      " },",
+      "  subtitle: `Template component`,",
+      "  design: {",
+      "    type: 'figma',",
+      "    url: 'https: //www.figma.com/file/XXX',",
+      "  },",
+      "  status: 'current',",
+      "  source: {",
+      "    repo: '$2',",
+      "    // this is easy to find by right clicking on the file in VSCode and clicking 'Copy Remote File Url From...' and the selecting 'main' or amending the url path below like so: https://github.com/Codecademy/gamut/blob/main/packages/${2}/src/file/location",
+      "    githubLink:",
+      "      'https: //github.com/Codecademy/gamut/blob/main/packages/gamut/src/Logo',",
+      "  },",
       "};",
+      "",
       "<Meta of={$1Stories}/>",
       "",
       "<ComponentHeader {...parameters} />",
@@ -85,13 +86,14 @@
       "  id: '$1',",
       "  title: '$1/About',",
       "  subtitle: '$2',",
-      "  }",
+      "  status: 'current'",
+      "}",
       "",
       "<Meta title='$1/About' />",
       "",
       "<AboutHeader {...parameters} />",
       "",
-      "Foundations make up the smallest scale design values that comprise a design system. Sometimes referred to elsewhere as "tokens", they are the abstract units that comprise and stitch together our atoms, molecules, and organisms.",
+      "Provide a general overview of what this collection of components should do or be used for.",
       "",
       "<TableOfContents",
       " links={[",
@@ -99,6 +101,7 @@
       "     id: '$1/Category',",
       "     subtitle: 'Short description',",
       "     title: 'Category',",
+      "     status: 'current'",
       "   }",
       " ]}",
       "/>"
diff --git a/packages/gamut-icons/CHANGELOG.md b/packages/gamut-icons/CHANGELOG.md
index 27075bdcc7..d1cf18ff1e 100644
--- a/packages/gamut-icons/CHANGELOG.md
+++ b/packages/gamut-icons/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [9.38.2](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@9.38.1...@codecademy/gamut-icons@9.38.2) (2025-02-11)
+
+**Note:** Version bump only for package @codecademy/gamut-icons
+
+### [9.38.1](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@9.38.0...@codecademy/gamut-icons@9.38.1) (2025-02-10)
+
+**Note:** Version bump only for package @codecademy/gamut-icons
+
 ## [9.38.0](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@9.37.3...@codecademy/gamut-icons@9.38.0) (2025-02-05)
 
 ### Features
diff --git a/packages/gamut-icons/package.json b/packages/gamut-icons/package.json
index 35993da4c5..c898706354 100644
--- a/packages/gamut-icons/package.json
+++ b/packages/gamut-icons/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-icons",
   "description": "Icon library for codecademy.com",
-  "version": "9.38.0",
+  "version": "9.38.2",
   "author": "Codecademy <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut-styles": "17.4.1",
+    "@codecademy/gamut-styles": "17.5.0",
     "@codecademy/variance": "0.22.1"
   },
   "files": [
diff --git a/packages/gamut-icons/src/useIconId.tsx b/packages/gamut-icons/src/useIconId.tsx
index 04ac563845..36a3883566 100644
--- a/packages/gamut-icons/src/useIconId.tsx
+++ b/packages/gamut-icons/src/useIconId.tsx
@@ -1,5 +1,4 @@
-import { useId } from '@reach/auto-id';
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 
 export function useIconId(id: string) {
   const generatedId = useId();
diff --git a/packages/gamut-illustrations/CHANGELOG.md b/packages/gamut-illustrations/CHANGELOG.md
index 0e80180a4b..356ce51e3e 100644
--- a/packages/gamut-illustrations/CHANGELOG.md
+++ b/packages/gamut-illustrations/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.53.2](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-illustrations@0.53.1...@codecademy/gamut-illustrations@0.53.2) (2025-02-10)
+
+**Note:** Version bump only for package @codecademy/gamut-illustrations
+
 ### [0.53.1](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-illustrations@0.53.0...@codecademy/gamut-illustrations@0.53.1) (2025-02-05)
 
 **Note:** Version bump only for package @codecademy/gamut-illustrations
diff --git a/packages/gamut-illustrations/package.json b/packages/gamut-illustrations/package.json
index 8a26d46a38..1d69ea163d 100644
--- a/packages/gamut-illustrations/package.json
+++ b/packages/gamut-illustrations/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@codecademy/gamut-illustrations",
   "description": "Illustrations library for Codecademy",
-  "version": "0.53.1",
+  "version": "0.53.2",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "bugs": "https://github.com/Codecademy/gamut/issues",
   "dependencies": {
-    "@codecademy/gamut-styles": "17.4.1",
+    "@codecademy/gamut-styles": "17.5.0",
     "classnames": "^2.2.5"
   },
   "files": [
diff --git a/packages/gamut-kit/CHANGELOG.md b/packages/gamut-kit/CHANGELOG.md
index 5e12e7dfd5..2da4ae0591 100644
--- a/packages/gamut-kit/CHANGELOG.md
+++ b/packages/gamut-kit/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.475](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.474...@codecademy/gamut-kit@0.6.475) (2025-02-11)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.474](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.473...@codecademy/gamut-kit@0.6.474) (2025-02-11)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.473](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.472...@codecademy/gamut-kit@0.6.473) (2025-02-10)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.472](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.471...@codecademy/gamut-kit@0.6.472) (2025-02-05)
 
 **Note:** Version bump only for package @codecademy/gamut-kit
diff --git a/packages/gamut-kit/package.json b/packages/gamut-kit/package.json
index 658e7ea09d..510a8ae5c8 100644
--- a/packages/gamut-kit/package.json
+++ b/packages/gamut-kit/package.json
@@ -1,15 +1,15 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.472",
+  "version": "0.6.475",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut": "59.0.3",
-    "@codecademy/gamut-icons": "9.38.0",
-    "@codecademy/gamut-illustrations": "0.53.1",
-    "@codecademy/gamut-patterns": "0.10.3",
-    "@codecademy/gamut-styles": "17.4.1",
-    "@codecademy/gamut-tests": "5.2.3",
+    "@codecademy/gamut": "59.0.6",
+    "@codecademy/gamut-icons": "9.38.2",
+    "@codecademy/gamut-illustrations": "0.53.2",
+    "@codecademy/gamut-patterns": "0.10.5",
+    "@codecademy/gamut-styles": "17.5.0",
+    "@codecademy/gamut-tests": "5.2.4",
     "@codecademy/variance": "0.22.1",
     "component-test-setup": "^0.3.1"
   },
diff --git a/packages/gamut-patterns/CHANGELOG.md b/packages/gamut-patterns/CHANGELOG.md
index 93d772ef48..503578e5b4 100644
--- a/packages/gamut-patterns/CHANGELOG.md
+++ b/packages/gamut-patterns/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.10.5](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-patterns@0.10.4...@codecademy/gamut-patterns@0.10.5) (2025-02-11)
+
+**Note:** Version bump only for package @codecademy/gamut-patterns
+
+### [0.10.4](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-patterns@0.10.3...@codecademy/gamut-patterns@0.10.4) (2025-02-10)
+
+**Note:** Version bump only for package @codecademy/gamut-patterns
+
 ### [0.10.3](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-patterns@0.10.2...@codecademy/gamut-patterns@0.10.3) (2025-02-05)
 
 **Note:** Version bump only for package @codecademy/gamut-patterns
diff --git a/packages/gamut-patterns/package.json b/packages/gamut-patterns/package.json
index 57136c6951..36596c6ab6 100644
--- a/packages/gamut-patterns/package.json
+++ b/packages/gamut-patterns/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@codecademy/gamut-patterns",
   "description": "Pattern library for Codecademy",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "bugs": "https://github.com/Codecademy/gamut/issues",
   "dependencies": {
-    "@codecademy/gamut-styles": "17.4.1",
+    "@codecademy/gamut-styles": "17.5.0",
     "@codecademy/variance": "0.22.1",
     "classnames": "^2.2.5"
   },
diff --git a/packages/gamut-patterns/src/usePatternId.tsx b/packages/gamut-patterns/src/usePatternId.tsx
index 95b8b2c216..173b93c615 100644
--- a/packages/gamut-patterns/src/usePatternId.tsx
+++ b/packages/gamut-patterns/src/usePatternId.tsx
@@ -1,5 +1,4 @@
-import { useId } from '@reach/auto-id';
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 
 export function usePatternId(id: string) {
   const generatedId = useId();
diff --git a/packages/gamut-styles/CHANGELOG.md b/packages/gamut-styles/CHANGELOG.md
index d1b991b890..51db5b856a 100644
--- a/packages/gamut-styles/CHANGELOG.md
+++ b/packages/gamut-styles/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [17.5.0](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-styles@17.4.1...@codecademy/gamut-styles@17.5.0) (2025-02-10)
+
+### Features
+
+- **Colors:** Add new orange weight to colors ([c52cc0e](https://github.com/Codecademy/gamut/commit/c52cc0e774fc64e2b4cbf412e41ca5c4c36792b5))
+
 ### [17.4.1](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-styles@17.4.0...@codecademy/gamut-styles@17.4.1) (2025-02-05)
 
 **Note:** Version bump only for package @codecademy/gamut-styles
diff --git a/packages/gamut-styles/package.json b/packages/gamut-styles/package.json
index aee7c1bbdb..e684a466d4 100644
--- a/packages/gamut-styles/package.json
+++ b/packages/gamut-styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.4.1",
+  "version": "17.5.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
     "@codecademy/variance": "0.22.1",
diff --git a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
index 7f7e35e391..2f424aa6f3 100644
--- a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
+++ b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
@@ -42,6 +42,7 @@ exports[`themes admin - theme shape 1`] = `
       "navy-800": "#10162F",
       "navy-900": "#0A0D1C",
       "orange": "#FF8C00",
+      "orange-100": "#FFE8CC",
       "orange-500": "#FF8C00",
       "paleBlue": "#F5FCFF",
       "paleGreen": "#F5FFE3",
@@ -215,6 +216,7 @@ exports[`themes admin - theme shape 1`] = `
       "--color-navy-800": "#10162F",
       "--color-navy-900": "#0A0D1C",
       "--color-orange": "#FF8C00",
+      "--color-orange-100": "#FFE8CC",
       "--color-orange-500": "#FF8C00",
       "--color-paleBlue": "#F5FCFF",
       "--color-paleGreen": "#F5FFE3",
@@ -339,6 +341,7 @@ exports[`themes admin - theme shape 1`] = `
     "navy-800": "var(--color-navy-800)",
     "navy-900": "var(--color-navy-900)",
     "orange": "var(--color-orange)",
+    "orange-100": "var(--color-orange-100)",
     "orange-500": "var(--color-orange-500)",
     "paleBlue": "var(--color-paleBlue)",
     "paleGreen": "var(--color-paleGreen)",
@@ -542,6 +545,7 @@ exports[`themes core - theme shape 1`] = `
       "navy-800": "#10162F",
       "navy-900": "#0A0D1C",
       "orange": "#FF8C00",
+      "orange-100": "#FFE8CC",
       "orange-500": "#FF8C00",
       "paleBlue": "#F5FCFF",
       "paleGreen": "#F5FFE3",
@@ -715,6 +719,7 @@ exports[`themes core - theme shape 1`] = `
       "--color-navy-800": "#10162F",
       "--color-navy-900": "#0A0D1C",
       "--color-orange": "#FF8C00",
+      "--color-orange-100": "#FFE8CC",
       "--color-orange-500": "#FF8C00",
       "--color-paleBlue": "#F5FCFF",
       "--color-paleGreen": "#F5FFE3",
@@ -839,6 +844,7 @@ exports[`themes core - theme shape 1`] = `
     "navy-800": "var(--color-navy-800)",
     "navy-900": "var(--color-navy-900)",
     "orange": "var(--color-orange)",
+    "orange-100": "var(--color-orange-100)",
     "orange-500": "var(--color-orange-500)",
     "paleBlue": "var(--color-paleBlue)",
     "paleGreen": "var(--color-paleGreen)",
@@ -1046,6 +1052,7 @@ exports[`themes platform - theme shape 1`] = `
       "navy-800": "#10162F",
       "navy-900": "#0A0D1C",
       "orange": "#FF8C00",
+      "orange-100": "#FFE8CC",
       "orange-500": "#FF8C00",
       "orange-800": "#D14900",
       "paleBlue": "#F5FCFF",
@@ -1304,6 +1311,7 @@ exports[`themes platform - theme shape 1`] = `
       "--color-navy-800": "#10162F",
       "--color-navy-900": "#0A0D1C",
       "--color-orange": "#FF8C00",
+      "--color-orange-100": "#FFE8CC",
       "--color-orange-500": "#FF8C00",
       "--color-orange-800": "#D14900",
       "--color-paleBlue": "#F5FCFF",
@@ -1463,6 +1471,7 @@ exports[`themes platform - theme shape 1`] = `
     "navy-800": "var(--color-navy-800)",
     "navy-900": "var(--color-navy-900)",
     "orange": "var(--color-orange)",
+    "orange-100": "var(--color-orange-100)",
     "orange-500": "var(--color-orange-500)",
     "orange-800": "var(--color-orange-800)",
     "paleBlue": "var(--color-paleBlue)",
diff --git a/packages/gamut-styles/src/variables/colors.ts b/packages/gamut-styles/src/variables/colors.ts
index 15b4745986..83ba771e09 100644
--- a/packages/gamut-styles/src/variables/colors.ts
+++ b/packages/gamut-styles/src/variables/colors.ts
@@ -66,6 +66,7 @@ export const coreSwatches = {
     '600': '#BE1809',
   },
   orange: {
+    '100': '#FFE8CC',
     '500': '#FF8C00',
   },
   hyper: {
diff --git a/packages/gamut-tests/CHANGELOG.md b/packages/gamut-tests/CHANGELOG.md
index e37b3d8539..8105639fdf 100644
--- a/packages/gamut-tests/CHANGELOG.md
+++ b/packages/gamut-tests/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [5.2.4](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-tests@5.2.3...@codecademy/gamut-tests@5.2.4) (2025-02-10)
+
+**Note:** Version bump only for package @codecademy/gamut-tests
+
 ### [5.2.3](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-tests@5.2.2...@codecademy/gamut-tests@5.2.3) (2025-02-05)
 
 **Note:** Version bump only for package @codecademy/gamut-tests
diff --git a/packages/gamut-tests/package.json b/packages/gamut-tests/package.json
index 06cb96b399..0df1cf8874 100644
--- a/packages/gamut-tests/package.json
+++ b/packages/gamut-tests/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-tests",
   "description": "Shared component test setup for Gamut applications",
-  "version": "5.2.3",
+  "version": "5.2.4",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut-styles": "17.4.1",
+    "@codecademy/gamut-styles": "17.5.0",
     "component-test-setup": "*",
     "lodash": "^4.17.5"
   },
diff --git a/packages/gamut/CHANGELOG.md b/packages/gamut/CHANGELOG.md
index 9868f6f16f..31343288a3 100644
--- a/packages/gamut/CHANGELOG.md
+++ b/packages/gamut/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [59.0.6](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@59.0.5...@codecademy/gamut@59.0.6) (2025-02-11)
+
+**Note:** Version bump only for package @codecademy/gamut
+
+### [59.0.5](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@59.0.4...@codecademy/gamut@59.0.5) (2025-02-11)
+
+**Note:** Version bump only for package @codecademy/gamut
+
+### [59.0.4](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@59.0.3...@codecademy/gamut@59.0.4) (2025-02-10)
+
+**Note:** Version bump only for package @codecademy/gamut
+
 ### [59.0.3](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@59.0.2...@codecademy/gamut@59.0.3) (2025-02-05)
 
 **Note:** Version bump only for package @codecademy/gamut
diff --git a/packages/gamut/package.json b/packages/gamut/package.json
index 8abeb8e26c..e04898e003 100644
--- a/packages/gamut/package.json
+++ b/packages/gamut/package.json
@@ -1,19 +1,18 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "59.0.3",
+  "version": "59.0.6",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.38.0",
-    "@codecademy/gamut-illustrations": "0.53.1",
-    "@codecademy/gamut-patterns": "0.10.3",
-    "@codecademy/gamut-styles": "17.4.1",
+    "@codecademy/gamut-icons": "9.38.2",
+    "@codecademy/gamut-illustrations": "0.53.2",
+    "@codecademy/gamut-patterns": "0.10.5",
+    "@codecademy/gamut-styles": "17.5.0",
     "@codecademy/variance": "0.22.1",
-    "@reach/auto-id": "^0.16.0",
-    "@reach/tabs": "^0.16.4",
+    "@reach/tabs": "^0.18.0",
     "@types/marked": "^4.0.8",
     "classnames": "^2.2.5",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^11.18.0",
     "html-to-react": "^1.6.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.5",
diff --git a/packages/gamut/src/Alert/Alert.tsx b/packages/gamut/src/Alert/Alert.tsx
index e6993b6eba..fe51cc8ad2 100644
--- a/packages/gamut/src/Alert/Alert.tsx
+++ b/packages/gamut/src/Alert/Alert.tsx
@@ -1,8 +1,6 @@
 import { MiniChevronDownIcon, MiniDeleteIcon } from '@codecademy/gamut-icons';
 import { breakpoints, useCurrentMode } from '@codecademy/gamut-styles';
-import { useId } from '@reach/auto-id';
-import { isValidElement, useMemo, useState } from 'react';
-import * as React from 'react';
+import { Children, isValidElement, useId, useMemo, useState } from 'react';
 import TruncateMarkup from 'react-truncate-markup';
 import { useMeasure } from 'react-use';
 
@@ -121,7 +119,7 @@ export const Alert: React.FC<AlertProps> = ({
     >
       {/** Truncate markup expects a single child element */}
       <Box {...alertContentProps}>
-        {React.Children.map(children, (child) =>
+        {Children.map(children, (child) =>
           isValidElement(child) || typeof child === 'string' ? (
             child
           ) : (
diff --git a/packages/gamut/src/Button/IconButton.tsx b/packages/gamut/src/Button/IconButton.tsx
index 2b9401fa60..69fe5524a7 100644
--- a/packages/gamut/src/Button/IconButton.tsx
+++ b/packages/gamut/src/Button/IconButton.tsx
@@ -1,5 +1,4 @@
-import { useId } from '@reach/auto-id';
-import { ComponentProps, forwardRef } from 'react';
+import { ComponentProps, forwardRef, useId } from 'react';
 
 import { ButtonBaseElements } from '../ButtonBase/ButtonBase';
 import { ToolTip, ToolTipProps } from '../Tip/ToolTip';
diff --git a/packages/gamut/src/Drawer/index.tsx b/packages/gamut/src/Drawer/index.tsx
index 4485945db0..36796f6078 100644
--- a/packages/gamut/src/Drawer/index.tsx
+++ b/packages/gamut/src/Drawer/index.tsx
@@ -8,7 +8,7 @@ import { Box, BoxProps } from '../Box';
 import { focusVisibleStyle } from '../utils';
 
 const drawerVisibleStyle = focusVisibleStyle('-3px');
-const DrawerBase = styled(motion(Box))(css(drawerVisibleStyle));
+const DrawerBase = styled(motion.create(Box))(css(drawerVisibleStyle));
 
 export interface DrawerProps extends Omit<BoxProps, 'width'> {
   /**
diff --git a/packages/gamut/src/Form/SelectDropdown/SelectDropdown.tsx b/packages/gamut/src/Form/SelectDropdown/SelectDropdown.tsx
index 4dce75e84c..b42ddea225 100644
--- a/packages/gamut/src/Form/SelectDropdown/SelectDropdown.tsx
+++ b/packages/gamut/src/Form/SelectDropdown/SelectDropdown.tsx
@@ -1,9 +1,9 @@
 import { useTheme } from '@emotion/react';
-import { useId } from '@reach/auto-id';
 import {
   KeyboardEvent,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -47,7 +47,6 @@ const defaultProps = {
     Option: IconOption,
   },
 };
-
 const onChangeAction = 'select-option';
 
 export const SelectDropdown: React.FC<SelectDropdownProps> = ({
diff --git a/packages/gamut/src/Motion/FadeInSlideOut.tsx b/packages/gamut/src/Motion/FadeInSlideOut.tsx
index e55abfab91..87c1d98873 100644
--- a/packages/gamut/src/Motion/FadeInSlideOut.tsx
+++ b/packages/gamut/src/Motion/FadeInSlideOut.tsx
@@ -25,7 +25,7 @@ const motionVariants = {
   },
 };
 
-const BaseContainer = motion(Box);
+const BaseContainer = motion.create(Box);
 
 export const FadeInSlideOut: React.FC<WithChildrenProp> = ({ children }) => (
   <BaseContainer
diff --git a/packages/gamut/src/Pagination/PaginationButton.tsx b/packages/gamut/src/Pagination/PaginationButton.tsx
index 3edf5e7df1..f5763e315f 100644
--- a/packages/gamut/src/Pagination/PaginationButton.tsx
+++ b/packages/gamut/src/Pagination/PaginationButton.tsx
@@ -33,6 +33,7 @@ export type PaginationButtonProps = ComponentProps<
   StyleProps<typeof paginationStrokeButtonStates> & {
     icon?: ComponentType<GamutIconProps>;
     buttonType?: 'stroke' | 'text';
+    href?: string;
   };
 
 export const PaginationButton = forwardRef<
diff --git a/packages/gamut/src/Pagination/utils.tsx b/packages/gamut/src/Pagination/utils.tsx
index c1437643aa..0c77947065 100644
--- a/packages/gamut/src/Pagination/utils.tsx
+++ b/packages/gamut/src/Pagination/utils.tsx
@@ -101,7 +101,7 @@ const fadeAnimationVariants = {
 export const createAnimatedFadeButton = (
   WrappedComponent: typeof PaginationButton
 ) => {
-  const AnimatedButton = motion(WrappedComponent);
+  const AnimatedButton = motion.create(WrappedComponent);
   return (props: React.ComponentProps<typeof AnimatedButton>) => (
     <AnimatedButton
       aria-label={
diff --git a/packages/gamut/src/Tip/PreviewTip/index.tsx b/packages/gamut/src/Tip/PreviewTip/index.tsx
index 96f5e20768..2167a25d87 100644
--- a/packages/gamut/src/Tip/PreviewTip/index.tsx
+++ b/packages/gamut/src/Tip/PreviewTip/index.tsx
@@ -1,8 +1,8 @@
-import { useId } from '@reach/auto-id';
 import {
   ComponentProps,
   FocusEvent,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 3d4b6f89c7..218fedac0b 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -101,7 +101,7 @@ export const Video: React.FC<VideoProps> = ({
 
   /**
    * If showPlayerEmbed is true use ReactPlayer to render the video
-   * Otherwise, use the Vidstack MediaPlayer. @TEMPOARY_FALLBACK
+   * Otherwise, use the Vidstack MediaPlayer. @TEMPORARY_FALLBACK
    */
   if (showPlayerEmbed) {
     return (
diff --git a/packages/styleguide/CHANGELOG.md b/packages/styleguide/CHANGELOG.md
index f9a870fd59..dce14c1a4c 100644
--- a/packages/styleguide/CHANGELOG.md
+++ b/packages/styleguide/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [70.1.1](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@70.1.0...@codecademy/styleguide@70.1.1) (2025-02-10)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ## [70.1.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@70.0.1...@codecademy/styleguide@70.1.0) (2025-02-05)
 
 ### Features
diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
index 3e6ff2ea87..5a9252a54b 100644
--- a/packages/styleguide/package.json
+++ b/packages/styleguide/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "70.1.0",
+  "version": "70.1.1",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
diff --git a/packages/styleguide/src/lib/Atoms/About.mdx b/packages/styleguide/src/lib/Atoms/About.mdx
index d02f1c2ed0..b55c28cc8f 100644
--- a/packages/styleguide/src/lib/Atoms/About.mdx
+++ b/packages/styleguide/src/lib/Atoms/About.mdx
@@ -20,9 +20,9 @@ export const parameters = {
 <TableOfContents
   links={[
     {
-      id: 'Atoms/Animation',
+      id: 'Atoms/Animations',
       subtitle: `Controlled containers for predictable animations.`,
-      title: 'Animation',
+      title: 'Animations',
       status: 'current',
     },
     {
diff --git a/packages/styleguide/src/lib/Atoms/Animation/Animation.mdx b/packages/styleguide/src/lib/Atoms/Animation/Animation.mdx
deleted file mode 100644
index 89e878a218..0000000000
--- a/packages/styleguide/src/lib/Atoms/Animation/Animation.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-
-import { ComponentHeader } from '~styleguide/blocks';
-
-import * as AnimationStories from './Animation.stories';
-
-export const parameters = {
-  subtitle: 'Controlled containers for predictable animations.',
-  status: 'current',
-  source: {
-    repo: 'gamut',
-    githubLink:
-      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Animation',
-  },
-};
-
-<Meta of={AnimationStories} />
-
-<ComponentHeader {...parameters} />
-
-## Usage
-
-Animations should not be the click target of actions, but rather the container for the content you wish to animate.
-
-## Playground
-
-<Canvas sourceState="shown" of={AnimationStories.Default} />
-
-<Controls />
diff --git a/packages/styleguide/src/lib/Atoms/Animations/About.mdx b/packages/styleguide/src/lib/Atoms/Animations/About.mdx
new file mode 100644
index 0000000000..7f84fbd823
--- /dev/null
+++ b/packages/styleguide/src/lib/Atoms/Animations/About.mdx
@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, TableOfContents } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Atoms/Animations',
+  title: 'Animations',
+  subtitle: 'Controlled containers for predictable animations.',
+};
+
+<Meta title="Atoms/Animations/About" />
+
+<AboutHeader {...parameters} />
+
+Animations should not be the click target of actions, but rather the container for the content you wish to animate.
+
+<TableOfContents
+  links={[
+    {
+      id: '/Atoms/Animations/Rotation',
+      subtitle: 'A container that can rotate its children.',
+      title: 'Rotation',
+      status: 'current',
+    },
+    {
+      id: '/Atoms/Animations/ExpandInCollapseOut',
+      subtitle:
+        'A container that applies an expand and collapse animation to its children.',
+      title: 'ExpandInCollapseOut',
+      status: 'current',
+    },
+  ]}
+/>
diff --git a/packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.mdx b/packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.mdx
new file mode 100644
index 0000000000..dee8aedb6f
--- /dev/null
+++ b/packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.mdx
@@ -0,0 +1,31 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
+import { ComponentHeader } from '~styleguide/blocks';
+
+import * as ExpandInCollapseOut from './ExpandInCollapseOut.stories';
+
+export const parameters = {
+  subtitle: `A container that applies an expand and collapse animation to its children.`,
+  status: 'current',
+  source: {
+    repo: 'gamut',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Animation/ExpandInCollapseOut.tsx',
+  },
+};
+
+<Meta of={ExpandInCollapseOut} />
+
+<ComponentHeader {...parameters} />
+
+## Usage
+
+This animation uses [Framer Motion](https://motion.dev/) to animate the expansion and collapse of a component. The initial and exit state is `"collapsed"` and the animation is `"expanded"`.
+
+Wrap the `ExpandInCollapseOut` component with an `AnimatePresence` and use a state to control whether or not the children of the ExpandInCollapseOut component are rendered.
+
+## Playground
+
+<Canvas sourceState="shown" of={ExpandInCollapseOut.Default} />
+
+<Controls />
diff --git a/packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.stories.tsx
new file mode 100644
index 0000000000..9a24332eed
--- /dev/null
+++ b/packages/styleguide/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.stories.tsx
@@ -0,0 +1,47 @@
+import {
+  Box,
+  ExpandInCollapseOut,
+  FillButton,
+  FlexBox,
+  Text,
+} from '@codecademy/gamut';
+import type { Meta } from '@storybook/react';
+import { AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
+
+const meta: Meta<typeof ExpandInCollapseOut> = {
+  component: ExpandInCollapseOut,
+  args: {},
+};
+
+export default meta;
+
+export const Default: React.FC = () => {
+  const [isExpanded, setExpanded] = useState(false);
+
+  return (
+    <FlexBox column>
+      <Box>
+        <FillButton onClick={() => setExpanded(!isExpanded)}>
+          Look, the text expands in and collapses out!
+        </FillButton>
+      </Box>
+      <Box mt={8}>
+        <AnimatePresence>
+          {isExpanded && (
+            <ExpandInCollapseOut>
+              <Text>
+                I got bored one day - and I put everything on a bagel.
+                Everything. All my hopes and dreams, my old report cards, every
+                breed of dog, every last personal ad on craigslist. Sesame.
+                Poppy seed. Salt. And it collapsed in on itself. &apos;Cause,
+                you see, when you really put everything on a bagel, it becomes
+                this.
+              </Text>
+            </ExpandInCollapseOut>
+          )}
+        </AnimatePresence>
+      </Box>
+    </FlexBox>
+  );
+};
diff --git a/packages/styleguide/src/lib/Atoms/Animations/Rotation/Rotation.mdx b/packages/styleguide/src/lib/Atoms/Animations/Rotation/Rotation.mdx
new file mode 100644
index 0000000000..95d8fced51
--- /dev/null
+++ b/packages/styleguide/src/lib/Atoms/Animations/Rotation/Rotation.mdx
@@ -0,0 +1,31 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
+import { ComponentHeader } from '~styleguide/blocks';
+
+import * as RotationStories from './Rotation.stories';
+
+export const parameters = {
+  subtitle: 'A container that can rotate its children.',
+  status: 'current',
+  source: {
+    repo: 'gamut',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Animation/Rotation.tsx',
+  },
+};
+
+<Meta of={RotationStories} />
+
+<ComponentHeader {...parameters} />
+
+## Usage
+
+The Rotation component is a container that can rotate its children and specify the degree of the rotation.
+
+One common usage is to set the rotation of an arrow icon to indicate that a component can expand and then rotate back to collapse.
+
+## Playground
+
+<Canvas sourceState="shown" of={RotationStories.Default} />
+
+<Controls />
diff --git a/packages/styleguide/src/lib/Atoms/Animation/Animation.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/Rotation/Rotation.stories.tsx
similarity index 100%
rename from packages/styleguide/src/lib/Atoms/Animation/Animation.stories.tsx
rename to packages/styleguide/src/lib/Atoms/Animations/Rotation/Rotation.stories.tsx
diff --git a/yarn.lock b/yarn.lock
index 654e357992..f1036a8d80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1250,13 +1250,6 @@
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
   integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
 
-"@emotion/is-prop-valid@^0.8.2":
-  version "0.8.8"
-  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
-  dependencies:
-    "@emotion/memoize" "0.7.4"
-
 "@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.1":
   version "1.3.1"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
@@ -1275,11 +1268,6 @@
     specificity "^0.4.1"
     stylis "4.2.0"
 
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
-
 "@emotion/memoize@^0.8.1":
   version "0.8.1"
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
@@ -1977,59 +1965,6 @@
   resolved "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b"
   integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
 
-"@motionone/animation@^10.12.0":
-  version "10.18.0"
-  resolved "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz#868d00b447191816d5d5cf24b1cafa144017922b"
-  integrity sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==
-  dependencies:
-    "@motionone/easing" "^10.18.0"
-    "@motionone/types" "^10.17.1"
-    "@motionone/utils" "^10.18.0"
-    tslib "^2.3.1"
-
-"@motionone/dom@10.12.0":
-  version "10.12.0"
-  resolved "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz#ae30827fd53219efca4e1150a5ff2165c28351ed"
-  integrity sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==
-  dependencies:
-    "@motionone/animation" "^10.12.0"
-    "@motionone/generators" "^10.12.0"
-    "@motionone/types" "^10.12.0"
-    "@motionone/utils" "^10.12.0"
-    hey-listen "^1.0.8"
-    tslib "^2.3.1"
-
-"@motionone/easing@^10.18.0":
-  version "10.18.0"
-  resolved "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz#7b82f6010dfee3a1bb0ee83abfbaff6edae0c708"
-  integrity sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==
-  dependencies:
-    "@motionone/utils" "^10.18.0"
-    tslib "^2.3.1"
-
-"@motionone/generators@^10.12.0":
-  version "10.18.0"
-  resolved "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz#fe09ab5cfa0fb9a8884097feb7eb60abeb600762"
-  integrity sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==
-  dependencies:
-    "@motionone/types" "^10.17.1"
-    "@motionone/utils" "^10.18.0"
-    tslib "^2.3.1"
-
-"@motionone/types@^10.12.0", "@motionone/types@^10.17.1":
-  version "10.17.1"
-  resolved "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz#cf487badbbdc9da0c2cb86ffc1e5d11147c6e6fb"
-  integrity sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==
-
-"@motionone/utils@^10.12.0", "@motionone/utils@^10.18.0":
-  version "10.18.0"
-  resolved "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz#a59ff8932ed9009624bca07c56b28ef2bb2f885e"
-  integrity sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==
-  dependencies:
-    "@motionone/types" "^10.17.1"
-    hey-listen "^1.0.8"
-    tslib "^2.3.1"
-
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
@@ -2752,40 +2687,39 @@
   resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@reach/auto-id@0.16.0", "@reach/auto-id@^0.16.0":
-  version "0.16.0"
-  resolved "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed"
-  integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==
+"@reach/auto-id@0.18.0":
+  version "0.18.0"
+  resolved "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.18.0.tgz#4b97085cd1cf1360a9bedc6e9c78e97824014f0d"
+  integrity sha512-XwY1IwhM7mkHZFghhjiqjQ6dstbOdpbFLdggeke75u8/8icT8uEHLbovFUgzKjy9qPvYwZIB87rLiR8WdtOXCg==
   dependencies:
-    "@reach/utils" "0.16.0"
-    tslib "^2.3.0"
+    "@reach/utils" "0.18.0"
 
-"@reach/descendants@0.16.1":
-  version "0.16.1"
-  resolved "https://registry.npmjs.org/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f"
-  integrity sha512-3WZgRnD9O4EORKE31rrduJDiPFNMOjUkATx0zl192ZxMq3qITe4tUj70pS5IbJl/+v9zk78JwyQLvA1pL7XAPA==
+"@reach/descendants@0.18.0":
+  version "0.18.0"
+  resolved "https://registry.npmjs.org/@reach/descendants/-/descendants-0.18.0.tgz#16fe52a5154da262994b0b8768baff4f670922d1"
+  integrity sha512-GXUxnM6CfrX5URdnipPIl3Tlc6geuz4xb4n61y4tVWXQX1278Ra9Jz9DMRN8x4wheHAysvrYwnR/SzAlxQzwtA==
   dependencies:
-    "@reach/utils" "0.16.0"
-    tslib "^2.3.0"
+    "@reach/utils" "0.18.0"
 
-"@reach/tabs@^0.16.4":
-  version "0.16.4"
-  resolved "https://registry.npmjs.org/@reach/tabs/-/tabs-0.16.4.tgz#7da85e46f64052bdd1c0f9582f900e379b098ac5"
-  integrity sha512-4EK+1U0OoLfg2tJ1BSZf6/tx0hF5vlXKxY7qB//bPWtlIh9Xfp/aSDIdspFf3xS8MjtKeb6IVmo5UAxDMq85ZA==
-  dependencies:
-    "@reach/auto-id" "0.16.0"
-    "@reach/descendants" "0.16.1"
-    "@reach/utils" "0.16.0"
-    prop-types "^15.7.2"
-    tslib "^2.3.0"
+"@reach/polymorphic@0.18.0":
+  version "0.18.0"
+  resolved "https://registry.npmjs.org/@reach/polymorphic/-/polymorphic-0.18.0.tgz#2fe42007a774e06cdbc8e13e0d46f2dc30f2f1ed"
+  integrity sha512-N9iAjdMbE//6rryZZxAPLRorzDcGBnluf7YQij6XDLiMtfCj1noa7KyLpEc/5XCIB/EwhX3zCluFAwloBKdblA==
 
-"@reach/utils@0.16.0":
-  version "0.16.0"
-  resolved "https://registry.npmjs.org/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
-  integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
+"@reach/tabs@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.npmjs.org/@reach/tabs/-/tabs-0.18.0.tgz#f2e789d445d61a371eace9415841502729d099c9"
+  integrity sha512-gTRJzStWJJtgMhn9FDEmKogAJMcqNaGZx0i1SGoTdVM+D29DBhVeRdO8qEg+I2l2k32DkmuZxG/Mrh+GZTjczQ==
   dependencies:
-    tiny-warning "^1.0.3"
-    tslib "^2.3.0"
+    "@reach/auto-id" "0.18.0"
+    "@reach/descendants" "0.18.0"
+    "@reach/polymorphic" "0.18.0"
+    "@reach/utils" "0.18.0"
+
+"@reach/utils@0.18.0":
+  version "0.18.0"
+  resolved "https://registry.npmjs.org/@reach/utils/-/utils-0.18.0.tgz#4f3cebe093dd436eeaff633809bf0f68f4f9d2ee"
+  integrity sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A==
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
@@ -7755,26 +7689,14 @@ fraction.js@^4.3.7:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-framer-motion@^6.5.1:
-  version "6.5.1"
-  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz#802448a16a6eb764124bf36d8cbdfa6dd6b931a7"
-  integrity sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==
-  dependencies:
-    "@motionone/dom" "10.12.0"
-    framesync "6.0.1"
-    hey-listen "^1.0.8"
-    popmotion "11.0.3"
-    style-value-types "5.0.0"
-    tslib "^2.1.0"
-  optionalDependencies:
-    "@emotion/is-prop-valid" "^0.8.2"
-
-framesync@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
-  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+framer-motion@^11.18.0:
+  version "11.18.2"
+  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz#0c6bd05677f4cfd3b3bdead4eb5ecdd5ed245718"
+  integrity sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==
   dependencies:
-    tslib "^2.1.0"
+    motion-dom "^11.18.1"
+    motion-utils "^11.18.1"
+    tslib "^2.4.0"
 
 fresh@0.5.2:
   version "0.5.2"
@@ -8308,11 +8230,6 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hey-listen@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
-  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
-
 hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -10696,6 +10613,18 @@ modify-values@^1.0.0, modify-values@^1.0.1:
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
+motion-dom@^11.18.1:
+  version "11.18.1"
+  resolved "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz#e7fed7b7dc6ae1223ef1cce29ee54bec826dc3f2"
+  integrity sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==
+  dependencies:
+    motion-utils "^11.18.1"
+
+motion-utils@^11.18.1:
+  version "11.18.1"
+  resolved "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz#671227669833e991c55813cf337899f41327db5b"
+  integrity sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -11800,16 +11729,6 @@ polished@^4.1.2, polished@^4.2.2:
   dependencies:
     "@babel/runtime" "^7.17.8"
 
-popmotion@11.0.3:
-  version "11.0.3"
-  resolved "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
-  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
-  dependencies:
-    framesync "6.0.1"
-    hey-listen "^1.0.8"
-    style-value-types "5.0.0"
-    tslib "^2.1.0"
-
 portfinder@^1.0.28:
   version "1.0.32"
   resolved "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
@@ -13834,14 +13753,6 @@ style-loader@^4.0.0:
   resolved "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
   integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==
 
-style-value-types@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
-  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
-  dependencies:
-    hey-listen "^1.0.8"
-    tslib "^2.1.0"
-
 stylehacks@^6.1.1:
   version "6.1.1"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-6.1.1.tgz#543f91c10d17d00a440430362d419f79c25545a6"
@@ -14116,11 +14027,6 @@ tiny-invariant@^1.3.1, tiny-invariant@^1.3.3:
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
   integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
 
-tiny-warning@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"

From db1e34349ac2effbf44b1515962771a13e099028 Mon Sep 17 00:00:00 2001
From: Smith <smith.gajjar@skillsoft.com>
Date: Thu, 20 Feb 2025 23:28:28 +0530
Subject: [PATCH 29/29] chore: rename and fixes

---
 packages/gamut/src/Video/index.tsx            | 69 ++++++-------------
 .../lib/{Player.tsx => VidstackPlayer.tsx}    | 16 ++---
 2 files changed, 28 insertions(+), 57 deletions(-)
 rename packages/gamut/src/Video/lib/{Player.tsx => VidstackPlayer.tsx} (95%)

diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 218fedac0b..41bc01dbd6 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -9,12 +9,8 @@ import { BaseReactPlayerProps } from 'react-player/base';
 
 import { Box } from '../Box';
 import { useIsMounted } from '../utils';
-import { VidstackPlayer } from './lib/Player';
-import {
-  OverlayPlayButton,
-  ReactPlayerWithWrapper,
-  ReactVideoPlayer,
-} from './lib/ReactPlayer';
+import { OverlayPlayButton, ReactVideoPlayer } from './lib/ReactPlayer';
+import { VidstackPlayer } from './lib/VidstackPlayer';
 
 export type VideoProps = {
   className?: string;
@@ -22,7 +18,7 @@ export type VideoProps = {
   loop?: boolean;
   muted?: boolean;
   onPlay?: () => void;
-  onReady?: (player?: ReactPlayerWithWrapper) => void;
+  onReady?: () => void;
   width?: number;
   height?: number;
   videoTitle?: string;
@@ -68,25 +64,20 @@ export type VideoProps = {
   showDefaultProviderControls?: boolean;
 };
 
-export const Video: React.FC<VideoProps> = ({
-  autoplay = false,
-  className,
-  controls = true,
-  height,
-  loop = false,
-  muted = false,
-  onPlay,
-  onReady,
-  placeholderImage,
-  videoTitle,
-  videoUrl,
-  width,
-  textTracks,
-  thumbnails,
-  translations,
-  showPlayerEmbed,
-  showDefaultProviderControls,
-}) => {
+export const Video: React.FC<VideoProps> = (props) => {
+  const {
+    autoplay = false,
+    className,
+    controls = true,
+    loop = false,
+    muted = false,
+    onPlay,
+    onReady,
+    placeholderImage,
+    videoTitle,
+    videoUrl,
+    showPlayerEmbed,
+  } = props;
   const [loading, setLoading] = useState(true);
   const isMounted = useIsMounted();
 
@@ -102,6 +93,8 @@ export const Video: React.FC<VideoProps> = ({
   /**
    * If showPlayerEmbed is true use ReactPlayer to render the video
    * Otherwise, use the Vidstack MediaPlayer. @TEMPORARY_FALLBACK
+   * @TODO [https://skillsoftdev.atlassian.net/browse/GM-998]
+   * Remove ReactPlayer once Vidstack is validated.
    */
   if (showPlayerEmbed) {
     return (
@@ -127,8 +120,8 @@ export const Video: React.FC<VideoProps> = ({
             url={videoUrl as BaseReactPlayerProps['url']}
             height="100%"
             width="100%"
-            onReady={(player: ReactPlayerWithWrapper) => {
-              onReady?.(player);
+            onReady={() => {
+              onReady?.();
               setLoading(false);
             }}
             onPlay={onPlay}
@@ -141,25 +134,7 @@ export const Video: React.FC<VideoProps> = ({
   return (
     <>
       {isMounted && (
-        <VidstackPlayer
-          loop={loop}
-          muted={muted}
-          width={width}
-          height={height}
-          onPlay={onPlay}
-          onReady={onReady}
-          videoUrl={videoUrl}
-          controls={controls}
-          autoplay={autoplay}
-          className={className}
-          videoTitle={videoTitle}
-          textTracks={textTracks}
-          thumbnails={thumbnails}
-          translations={translations}
-          onLoad={() => setLoading(false)}
-          placeholderImage={placeholderImage}
-          showDefaultProviderControls={showDefaultProviderControls}
-        />
+        <VidstackPlayer {...props} onLoad={() => setLoading(false)} />
       )}
     </>
   );
diff --git a/packages/gamut/src/Video/lib/Player.tsx b/packages/gamut/src/Video/lib/VidstackPlayer.tsx
similarity index 95%
rename from packages/gamut/src/Video/lib/Player.tsx
rename to packages/gamut/src/Video/lib/VidstackPlayer.tsx
index 1791ddffbb..6aac83a589 100644
--- a/packages/gamut/src/Video/lib/Player.tsx
+++ b/packages/gamut/src/Video/lib/VidstackPlayer.tsx
@@ -34,10 +34,10 @@ type VidstackPlayerProps = VideoProps & {
   onLoad: () => void;
 };
 export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
-  autoplay,
-  controls,
-  loop,
-  muted,
+  autoplay = false,
+  controls = true,
+  loop = false,
+  muted = false,
   onPlay,
   onReady,
   onLoad,
@@ -94,17 +94,13 @@ export const VidstackPlayer: React.FC<VidstackPlayerProps> = ({
         }
         keyShortcuts={keyboardShortcuts}
         onLoad={onLoad}
-        onPlay={() => {
-          onPlay?.();
-        }}
+        onPlay={onPlay}
         onPlaying={() => {
           if (autoplay && player.current?.muted && !muted) {
             mediaRemote?.unmute();
           }
         }}
-        onCanPlay={() => {
-          onReady?.();
-        }}
+        onCanPlay={onReady}
         onProviderChange={onProviderChange}
         onWaiting={onPlayerWaiting}
       >