feat(VideoPlayer): Vidstack POC

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",

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -123,5 +123,6 @@ exports[`Gamut Exported Keys 1`] = `
   "useLocalQuery",
   "useSubmitState",
   "Video",
+  "VideoPlayer",
 ]
 `;

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)/)"],
 });

packages/gamut/src/VideoPlayer/index.tsx

@@ -0,0 +1,90 @@
+/* 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>
+  );
+};

packages/gamut/src/VideoPlayer/lib/VideoLayout.tsx

@@ -0,0 +1,55 @@
+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)
+                        }}
+                    />
+                )
+            }}  
+        />
+    )
+}

packages/gamut/src/VideoPlayer/lib/slots.tsx

@@ -0,0 +1,54 @@
+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 />
+  )
+}

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']
+    }
+} 

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;
+  }

packages/gamut/src/VideoPlayer/styles/index.module.scss

@@ -0,0 +1,6 @@
+@import "~@codecademy/gamut-styles/utils";
+
+.videoWrapper {
+  position: relative;
+  width: 100%;
+}

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';

packages/styleguide/src/lib/Molecules/VideoPlayer/VideoPlayer.mdx

@@ -0,0 +1,58 @@
+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 />