@codecademy/gamut

Index: package/dist/Video/lib/VidstackPlayer/index.js
===================================================================
--- package/dist/Video/lib/VidstackPlayer/index.js
+++ package/dist/Video/lib/VidstackPlayer/index.js
@@ -0,0 +1,104 @@
+import _styled from "@emotion/styled/base";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* Vidstack default theme (vendored via @import) + gamut overrides */
+/* eslint-disable gamut/no-css-standalone */
+import './vidstack-styles.css';
+import { styledOptions } from '@codecademy/gamut-styles';
+import { isYouTubeProvider, MediaPlayer, MediaProvider, Poster, Track, useMediaRemote, useMediaState } from '@vidstack/react';
+import React, { useRef, createElement as _createElement } from 'react';
+import { Box } from '../../../Box';
+import { keyboardShortcuts } from '../utils/constants';
+import { VideoLayout } from '../VideoLayout';
+import { vdsVariables } from './variables';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VariableProvider = /*#__PURE__*/_styled(Box, _extends({}, {
+  target: "eeu39hy0",
+  label: "VariableProvider"
+}, styledOptions(['variables'])))(({
+  variables
+}) => variables, "width:100%;height:100%;position:relative;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9WaWRlby9saWIvVmlkc3RhY2tQbGF5ZXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCeUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL1ZpZGVvL2xpYi9WaWRzdGFja1BsYXllci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBWaWRzdGFjayBkZWZhdWx0IHRoZW1lICh2ZW5kb3JlZCB2aWEgQGltcG9ydCkgKyBnYW11dCBvdmVycmlkZXMgKi9cbi8qIGVzbGludC1kaXNhYmxlIGdhbXV0L25vLWNzcy1zdGFuZGFsb25lICovXG5pbXBvcnQgJy4vdmlkc3RhY2stc3R5bGVzLmNzcyc7XG5cbmltcG9ydCB7IHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCwgeyBDU1NPYmplY3QgfSBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgaXNZb3VUdWJlUHJvdmlkZXIsXG4gIE1lZGlhUGxheWVyLFxuICBNZWRpYVBsYXllckluc3RhbmNlLFxuICBNZWRpYVByb3ZpZGVyLFxuICBNZWRpYVByb3ZpZGVyQWRhcHRlcixcbiAgUG9zdGVyLFxuICBUcmFjayxcbiAgdXNlTWVkaWFSZW1vdGUsXG4gIHVzZU1lZGlhU3RhdGUsXG59IGZyb20gJ0B2aWRzdGFjay9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVmlkZW9Qcm9wcyB9IGZyb20gJy4uLy4uJztcbmltcG9ydCB7IGtleWJvYXJkU2hvcnRjdXRzIH0gZnJvbSAnLi4vdXRpbHMvY29uc3RhbnRzJztcbmltcG9ydCB7IFZpZGVvTGF5b3V0IH0gZnJvbSAnLi4vVmlkZW9MYXlvdXQnO1xuaW1wb3J0IHsgdmRzVmFyaWFibGVzIH0gZnJvbSAnLi92YXJpYWJsZXMnO1xuXG5jb25zdCBWYXJpYWJsZVByb3ZpZGVyID0gc3R5bGVkKEJveCwgc3R5bGVkT3B0aW9ucyhbJ3ZhcmlhYmxlcyddKSk8e1xuICB2YXJpYWJsZXM/OiBDU1NPYmplY3Q7XG59PigoeyB2YXJpYWJsZXMgfSkgPT4gdmFyaWFibGVzLCB7XG4gIHdpZHRoOiAnMTAwJScsXG4gIGhlaWdodDogJzEwMCUnLFxuICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbn0pO1xuXG50eXBlIFZpZHN0YWNrUGxheWVyUHJvcHMgPSBWaWRlb1Byb3BzICYge1xuICBvbkxvYWQ6ICgpID0+IHZvaWQ7XG59O1xuZXhwb3J0IGNvbnN0IFZpZHN0YWNrUGxheWVyOiBSZWFjdC5GQzxWaWRzdGFja1BsYXllclByb3BzPiA9ICh7XG4gIGF1dG9wbGF5ID0gZmFsc2UsXG4gIGNvbnRyb2xzID0gdHJ1ZSxcbiAgbG9vcCA9IGZhbHNlLFxuICBtdXRlZCA9IGZhbHNlLFxuICBvblBsYXksXG4gIG9uUmVhZHksXG4gIG9uTG9hZCxcbiAgcGxhY2Vob2xkZXJJbWFnZSxcbiAgdmlkZW9UaXRsZSxcbiAgdmlkZW9VcmwsXG4gIHRleHRUcmFja3MsXG4gIHRodW1ibmFpbHMsXG4gIHRyYW5zbGF0aW9ucyxcbiAgd2lkdGgsXG4gIGhlaWdodCxcbiAgY2xhc3NOYW1lLFxuICBzaG93RGVmYXVsdFByb3ZpZGVyQ29udHJvbHMgPSBmYWxzZSxcbn0pID0+IHtcbiAgY29uc3QgcGxheWVyID0gdXNlUmVmPE1lZGlhUGxheWVySW5zdGFuY2U+KG51bGwpO1xuICBjb25zdCBwYXVzZWQgPSB1c2VNZWRpYVN0YXRlKCdwYXVzZWQnLCBwbGF5ZXIpO1xuICBjb25zdCBtZWRpYVJlbW90ZSA9IHVzZU1lZGlhUmVtb3RlKHBsYXllcik7XG5cbiAgLyoqXG4gICAqICFXb3JrYXJvdW5kIGZvciBWaWRzdGFjayBZb3V0dWJlIFByb3ZpZGVyIGlzc3VlIHdpdGggbmF0aXZlIGNvbnRyb2xzIVxuICAgKiAoTm90IG5lZWRlZCB3aXRoIEN1c3RvbSBDb250cm9scyBpLmUgd2hlbiBjb250cm9scyBwcm9wcyBpcyBub3Qgc2V0IHRvIHRydWUgaW4gPE1lZGlhUGxheWVyPilcbiAgICogV2hlbiB0aGUgcHJvdmlkZXIgY2hhbmdlcyBvciBwbGF5ZXIgaXMgaW4gd2FpdGluZyBzdGF0ZSwgd2UgbmVlZCB0byBmb3JjZSByZS1wbGF5IHRoZSB2aWRlby5cbiAgICogVGhpcyBpcyBiZWNhdXNlIG9mIGFuIGlzc3VlIGluIFZpZHN0YWNrIHdoZXJlIFlvdXR1YmUgdmlkZW9zIHdpdGggbmF0aXZlIGNvbnRyb2xzIGtlZXBzIHBhdXNpbmcuXG4gICAqL1xuICBjb25zdCBvblByb3ZpZGVyQ2hhbmdlID0gYXN5bmMgKHByb3ZpZGVyOiBNZWRpYVByb3ZpZGVyQWRhcHRlciB8IG51bGwpID0+IHtcbiAgICBpZiAoaXNZb3VUdWJlUHJvdmlkZXIocHJvdmlkZXIpKSB7XG4gICAgICBhd2FpdCBwcm92aWRlci5wbGF5KCk7XG4gICAgfVxuICB9O1xuICBjb25zdCBvblBsYXllcldhaXRpbmcgPSAoKSA9PiB7XG4gICAgaWYgKGlzWW91VHViZVByb3ZpZGVyKHBsYXllci5jdXJyZW50Py5wcm92aWRlcikgJiYgcGF1c2VkKSB7XG4gICAgICBtZWRpYVJlbW90ZT8udG9nZ2xlUGF1c2VkKCk7XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFZhcmlhYmxlUHJvdmlkZXJcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGdhbXV0L25vLWlubGluZS1zdHlsZVxuICAgICAgc3R5bGU9e3sgd2lkdGgsIGhlaWdodCB9fVxuICAgICAgdmFyaWFibGVzPXt2ZHNWYXJpYWJsZXN9XG4gICAgPlxuICAgICAgPE1lZGlhUGxheWVyXG4gICAgICAgIGF1dG9QbGF5PXthdXRvcGxheX1cbiAgICAgICAgY29udHJvbHM9e3Nob3dEZWZhdWx0UHJvdmlkZXJDb250cm9sc31cbiAgICAgICAga2V5U2hvcnRjdXRzPXtrZXlib2FyZFNob3J0Y3V0c31cbiAgICAgICAgbG9vcD17bG9vcH1cbiAgICAgICAgbXV0ZWQ9e1xuICAgICAgICAgIGF1dG9wbGF5ICYmIGlzWW91VHViZVByb3ZpZGVyKHBsYXllcj8uY3VycmVudD8ucHJvdmlkZXIpXG4gICAgICAgICAgICA/IHRydWVcbiAgICAgICAgICAgIDogbXV0ZWRcbiAgICAgICAgfVxuICAgICAgICBwbGF5c0lubGluZVxuICAgICAgICByZWY9e3BsYXllcn1cbiAgICAgICAgc3JjPXt2aWRlb1VybH1cbiAgICAgICAgdGl0bGU9e3ZpZGVvVGl0bGV9XG4gICAgICAgIG9uQ2FuUGxheT17b25SZWFkeX1cbiAgICAgICAgb25Mb2FkPXtvbkxvYWR9XG4gICAgICAgIG9uUGxheT17b25QbGF5fVxuICAgICAgICBvblBsYXlpbmc9eygpID0+IHtcbiAgICAgICAgICBpZiAoYXV0b3BsYXkgJiYgcGxheWVyLmN1cnJlbnQ/Lm11dGVkICYmICFtdXRlZCkge1xuICAgICAgICAgICAgbWVkaWFSZW1vdGU/LnVubXV0ZSgpO1xuICAgICAgICAgIH1cbiAgICAgICAgfX1cbiAgICAgICAgb25Qcm92aWRlckNoYW5nZT17b25Qcm92aWRlckNoYW5nZX1cbiAgICAgICAgb25XYWl0aW5nPXtvblBsYXllcldhaXRpbmd9XG4gICAgICA+XG4gICAgICAgIDxNZWRpYVByb3ZpZGVyPlxuICAgICAgICAgIHtwbGFjZWhvbGRlckltYWdlICYmIChcbiAgICAgICAgICAgIDxQb3N0ZXJcbiAgICAgICAgICAgICAgYWx0PXt2aWRlb1RpdGxlfVxuICAgICAgICAgICAgICBjbGFzc05hbWU9XCJ2ZHMtcG9zdGVyXCJcbiAgICAgICAgICAgICAgc3JjPXtwbGFjZWhvbGRlckltYWdlIGFzIHN0cmluZ31cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgKX1cbiAgICAgICAgICB7dGV4dFRyYWNrcz8ubWFwKCh0cmFjaykgPT4gKFxuICAgICAgICAgICAgPFRyYWNrIHsuLi50cmFja30ga2V5PXt0cmFjay5zcmN9IC8+XG4gICAgICAgICAgKSl9XG4gICAgICAgIDwvTWVkaWFQcm92aWRlcj5cbiAgICAgICAgPFZpZGVvTGF5b3V0XG4gICAgICAgICAgY29udHJvbHM9e2NvbnRyb2xzfVxuICAgICAgICAgIHRodW1ibmFpbHM9e3RodW1ibmFpbHN9XG4gICAgICAgICAgdHJhbnNsYXRpb25zPXt0cmFuc2xhdGlvbnN9XG4gICAgICAgIC8+XG4gICAgICA8L01lZGlhUGxheWVyPlxuICAgIDwvVmFyaWFibGVQcm92aWRlcj5cbiAgKTtcbn07XG4iXX0= */"));
+export const VidstackPlayer = ({
+  autoplay = false,
+  controls = true,
+  loop = false,
+  muted = false,
+  onPlay,
+  onReady,
+  onLoad,
+  placeholderImage,
+  videoTitle,
+  videoUrl,
+  textTracks,
+  thumbnails,
+  translations,
+  width,
+  height,
+  className,
+  showDefaultProviderControls = false
+}) => {
+  const player = useRef(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 => {
+    if (isYouTubeProvider(provider)) {
+      await provider.play();
+    }
+  };
+  const onPlayerWaiting = () => {
+    if (isYouTubeProvider(player.current?.provider) && paused) {
+      mediaRemote?.togglePaused();
+    }
+  };
+  return /*#__PURE__*/_jsx(VariableProvider, {
+    className: className
+    // eslint-disable-next-line gamut/no-inline-style
+    ,
+    style: {
+      width,
+      height
+    },
+    variables: vdsVariables,
+    children: /*#__PURE__*/_jsxs(MediaPlayer, {
+      autoPlay: autoplay,
+      controls: showDefaultProviderControls,
+      keyShortcuts: keyboardShortcuts,
+      loop: loop,
+      muted: autoplay && isYouTubeProvider(player?.current?.provider) ? true : muted,
+      playsInline: true,
+      ref: player,
+      src: videoUrl,
+      title: videoTitle,
+      onCanPlay: onReady,
+      onLoad: onLoad,
+      onPlay: onPlay,
+      onPlaying: () => {
+        if (autoplay && player.current?.muted && !muted) {
+          mediaRemote?.unmute();
+        }
+      },
+      onProviderChange: onProviderChange,
+      onWaiting: onPlayerWaiting,
+      children: [/*#__PURE__*/_jsxs(MediaProvider, {
+        children: [placeholderImage && /*#__PURE__*/_jsx(Poster, {
+          alt: videoTitle,
+          className: "vds-poster",
+          src: placeholderImage
+        }), textTracks?.map(track => /*#__PURE__*/_createElement(Track, {
+          ...track,
+          key: track.src
+        }))]
+      }), /*#__PURE__*/_jsx(VideoLayout, {
+        controls: controls,
+        thumbnails: thumbnails,
+        translations: translations
+      })]
+    })
+  });
+};
\ No newline at end of file