From 56da2f21201aa9f2c4b4cc4ce9d681ec40c294e1 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Tue, 30 Jun 2026 11:17:30 -0400 Subject: [PATCH 1/5] remove scss --- packages/gamut/project.json | 2 +- .../gamut/src/Video/lib/VidstackPlayer.tsx | 9 +- packages/gamut/src/Video/styles.ts | 101 ++++++++++++++++++ .../src/Video/styles/vds_base_theme.scss | 101 ------------------ packages/gamut/src/Video/vidstack-vendor.css | 3 + 5 files changed, 112 insertions(+), 104 deletions(-) create mode 100644 packages/gamut/src/Video/styles.ts delete mode 100644 packages/gamut/src/Video/styles/vds_base_theme.scss create mode 100644 packages/gamut/src/Video/vidstack-vendor.css diff --git a/packages/gamut/project.json b/packages/gamut/project.json index f94a7846862..846189d3375 100644 --- a/packages/gamut/project.json +++ b/packages/gamut/project.json @@ -14,7 +14,7 @@ "rm -rf ./dist", "babel ./src --out-dir ./dist --extensions \".ts,.tsx\"", "tsc --emitDeclarationOnly --project ./tsconfig.lib.json", - "cpy './src/**/*.{d.ts,scss,svg,png}' ./dist" + "cpy './src/**/*.{d.ts,scss,css,svg,png}' ./dist" ], "parallel": false } diff --git a/packages/gamut/src/Video/lib/VidstackPlayer.tsx b/packages/gamut/src/Video/lib/VidstackPlayer.tsx index d118500220d..facd939ed26 100644 --- a/packages/gamut/src/Video/lib/VidstackPlayer.tsx +++ b/packages/gamut/src/Video/lib/VidstackPlayer.tsx @@ -1,7 +1,10 @@ +/* Third-party Vidstack default theme styles */ /* eslint-disable gamut/no-css-standalone */ -import '../styles/vds_base_theme.scss'; +import '../vidstack-vendor.css'; +/* eslint-enable gamut/no-css-standalone */ import { styledOptions } from '@codecademy/gamut-styles'; +import { Global } from '@emotion/react'; import styled, { CSSObject } from '@emotion/styled'; import { isYouTubeProvider, @@ -18,13 +21,14 @@ import React, { useRef } from 'react'; import { Box } from '../../Box'; import { VideoProps } from '..'; +import { vdsBaseThemeStyles } from '../styles'; import { keyboardShortcuts } from './utils/constants'; import { vdsVariables } from './utils/variables'; import { VideoLayout } from './VideoLayout'; const VariableProvider = styled(Box, styledOptions(['variables']))<{ variables?: CSSObject; -}>(({ variables }) => variables, { +}>(({ variables }) => variables, vdsBaseThemeStyles, { width: '100%', height: '100%', position: 'relative', @@ -80,6 +84,7 @@ export const VidstackPlayer: React.FC = ({ style={{ width, height }} variables={vdsVariables} > + Date: Tue, 30 Jun 2026 13:28:32 -0400 Subject: [PATCH 2/5] clean up --- packages/gamut/src/Video/lib/VidstackPlayer.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/gamut/src/Video/lib/VidstackPlayer.tsx b/packages/gamut/src/Video/lib/VidstackPlayer.tsx index facd939ed26..b229051469c 100644 --- a/packages/gamut/src/Video/lib/VidstackPlayer.tsx +++ b/packages/gamut/src/Video/lib/VidstackPlayer.tsx @@ -2,9 +2,7 @@ /* eslint-disable gamut/no-css-standalone */ import '../vidstack-vendor.css'; -/* eslint-enable gamut/no-css-standalone */ import { styledOptions } from '@codecademy/gamut-styles'; -import { Global } from '@emotion/react'; import styled, { CSSObject } from '@emotion/styled'; import { isYouTubeProvider, @@ -84,7 +82,6 @@ export const VidstackPlayer: React.FC = ({ style={{ width, height }} variables={vdsVariables} > - Date: Mon, 6 Jul 2026 14:00:52 -0400 Subject: [PATCH 3/5] release plan --- .nx/version-plans/version-plan-1783360840721.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .nx/version-plans/version-plan-1783360840721.md diff --git a/.nx/version-plans/version-plan-1783360840721.md b/.nx/version-plans/version-plan-1783360840721.md new file mode 100644 index 00000000000..a5d4f1ab73d --- /dev/null +++ b/.nx/version-plans/version-plan-1783360840721.md @@ -0,0 +1,5 @@ +--- +gamut: minor +--- + +remove scss from video From 85280a0c6720ba38b8be5aa905d6beff05382b91 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Tue, 7 Jul 2026 15:32:29 -0400 Subject: [PATCH 4/5] fix: use webpack ~ prefix for vidstack CSS imports Update vidstack-vendor.css to use the webpack ~ module resolution prefix, which tells webpack to resolve imports from node_modules. This ensures the CSS imports are correctly resolved in both Storybook and consumer builds like Codecademy. Fixes module resolution error: "Can't resolve './@vidstack/react/..." when Codecademy's webpack processes the CSS file from the gamut dist output. Co-Authored-By: Claude Haiku 4.5 --- packages/gamut/src/Video/vidstack-vendor.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut/src/Video/vidstack-vendor.css b/packages/gamut/src/Video/vidstack-vendor.css index 3941d8a8b46..dc304ca4e40 100644 --- a/packages/gamut/src/Video/vidstack-vendor.css +++ b/packages/gamut/src/Video/vidstack-vendor.css @@ -1,3 +1,3 @@ -@import "@vidstack/react/player/styles/default/theme.css"; -@import "@vidstack/react/player/styles/default/layouts/video.css"; -@import "@vidstack/react/player/styles/default/layouts/audio.css"; +@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"; From 573e7281a126e963a48243d2a5ffec2c30469387 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Thu, 9 Jul 2026 13:09:26 -0400 Subject: [PATCH 5/5] add new video stories --- .../src/lib/Molecules/Video/Video.mdx | 20 +++++++++- .../src/lib/Molecules/Video/Video.stories.tsx | 39 +++++++++++++++++++ 2 files changed, 57 insertions(+), 2 deletions(-) diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.mdx b/packages/styleguide/src/lib/Molecules/Video/Video.mdx index 0e9e2a76ad5..13b88c46463 100644 --- a/packages/styleguide/src/lib/Molecules/Video/Video.mdx +++ b/packages/styleguide/src/lib/Molecules/Video/Video.mdx @@ -46,18 +46,34 @@ The Video component is a feature-rich video player that supports multiple video ## Variants +### Default: Internal MP4 Video + + + ### HLS Stream With Captions, Chapters And Thumbnails -### YouTube Video +### YouTube Video (ReactVideoPlayer - No Captions) -### Vimeo Video +### YouTube Video With Captions (VidstackPlayer) + + + +### Vimeo Video (ReactVideoPlayer - No Captions) +### Multiple Video Sources + + + +### YouTube Without Embed (VidstackPlayer) + + + ## Playground diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx index 331d24d4422..e2083038636 100644 --- a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx @@ -65,3 +65,42 @@ export const VideoWithTracksAndThumbnails: Story = { thumbnails: 'https://files.vidstack.io/sprite-fight/thumbnails.vtt', }, }; + +export const YoutubeWithCaptions: Story = { + args: { + videoUrl: 'https://www.youtube.com/watch?v=wxds6MAtUQ0', + videoTitle: 'Intro to Programming: Loops', + textTracks: [ + { + src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', + label: 'English', + language: 'en-US', + kind: 'captions', + }, + ], + }, +}; + +export const MultipleVideoSources: Story = { + args: { + videoUrl: [ + { + src: 'https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.mp4', + type: 'video/mp4', + }, + { + src: 'https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.webm', + type: 'video/webm', + }, + ], + videoTitle: 'Multi-Format Video', + }, +}; + +export const YoutubeWithoutEmbed: Story = { + args: { + videoUrl: 'https://www.youtube.com/watch?v=wxds6MAtUQ0', + videoTitle: 'Intro to Programming: Loops (VidstackPlayer)', + showPlayerEmbed: false, + }, +};