@codecademy/gamut

72.2.472.2.5-alpha.febfe0.0
dist/Video/lib/VidstackPlayer.js
dist/Video/lib/VidstackPlayer.jsDeleted
−103
Index: package/dist/Video/lib/VidstackPlayer.js
===================================================================
--- package/dist/Video/lib/VidstackPlayer.js
+++ package/dist/Video/lib/VidstackPlayer.js
@@ -1,103 +0,0 @@
-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); }
-/* eslint-disable gamut/no-css-standalone */
-import '../styles/vds_base_theme.scss';
-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 { vdsVariables } from './utils/variables';
-import { VideoLayout } from './VideoLayout';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const VariableProvider = /*#__PURE__*/_styled(Box, _extends({}, {
-  target: "e1dl7oy60",
-  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9WaWRlby9saWIvVmlkc3RhY2tQbGF5ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCeUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1ZpZGVvL2xpYi9WaWRzdGFja1BsYXllci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBnYW11dC9uby1jc3Mtc3RhbmRhbG9uZSAqL1xuaW1wb3J0ICcuLi9zdHlsZXMvdmRzX2Jhc2VfdGhlbWUuc2Nzcyc7XG5cbmltcG9ydCB7IHN0eWxlZE9wdGlvbnMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCwgeyBDU1NPYmplY3QgfSBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHtcbiAgaXNZb3VUdWJlUHJvdmlkZXIsXG4gIE1lZGlhUGxheWVyLFxuICBNZWRpYVBsYXllckluc3RhbmNlLFxuICBNZWRpYVByb3ZpZGVyLFxuICBNZWRpYVByb3ZpZGVyQWRhcHRlcixcbiAgUG9zdGVyLFxuICBUcmFjayxcbiAgdXNlTWVkaWFSZW1vdGUsXG4gIHVzZU1lZGlhU3RhdGUsXG59IGZyb20gJ0B2aWRzdGFjay9yZWFjdCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi8uLi9Cb3gnO1xuaW1wb3J0IHsgVmlkZW9Qcm9wcyB9IGZyb20gJy4uJztcbmltcG9ydCB7IGtleWJvYXJkU2hvcnRjdXRzIH0gZnJvbSAnLi91dGlscy9jb25zdGFudHMnO1xuaW1wb3J0IHsgdmRzVmFyaWFibGVzIH0gZnJvbSAnLi91dGlscy92YXJpYWJsZXMnO1xuaW1wb3J0IHsgVmlkZW9MYXlvdXQgfSBmcm9tICcuL1ZpZGVvTGF5b3V0JztcblxuY29uc3QgVmFyaWFibGVQcm92aWRlciA9IHN0eWxlZChCb3gsIHN0eWxlZE9wdGlvbnMoWyd2YXJpYWJsZXMnXSkpPHtcbiAgdmFyaWFibGVzPzogQ1NTT2JqZWN0O1xufT4oKHsgdmFyaWFibGVzIH0pID0+IHZhcmlhYmxlcywge1xuICB3aWR0aDogJzEwMCUnLFxuICBoZWlnaHQ6ICcxMDAlJyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG59KTtcblxudHlwZSBWaWRzdGFja1BsYXllclByb3BzID0gVmlkZW9Qcm9wcyAmIHtcbiAgb25Mb2FkOiAoKSA9PiB2b2lkO1xufTtcbmV4cG9ydCBjb25zdCBWaWRzdGFja1BsYXllcjogUmVhY3QuRkM8Vmlkc3RhY2tQbGF5ZXJQcm9wcz4gPSAoe1xuICBhdXRvcGxheSA9IGZhbHNlLFxuICBjb250cm9scyA9IHRydWUsXG4gIGxvb3AgPSBmYWxzZSxcbiAgbXV0ZWQgPSBmYWxzZSxcbiAgb25QbGF5LFxuICBvblJlYWR5LFxuICBvbkxvYWQsXG4gIHBsYWNlaG9sZGVySW1hZ2UsXG4gIHZpZGVvVGl0bGUsXG4gIHZpZGVvVXJsLFxuICB0ZXh0VHJhY2tzLFxuICB0aHVtYm5haWxzLFxuICB0cmFuc2xhdGlvbnMsXG4gIHdpZHRoLFxuICBoZWlnaHQsXG4gIGNsYXNzTmFtZSxcbiAgc2hvd0RlZmF1bHRQcm92aWRlckNvbnRyb2xzID0gZmFsc2UsXG59KSA9PiB7XG4gIGNvbnN0IHBsYXllciA9IHVzZVJlZjxNZWRpYVBsYXllckluc3RhbmNlPihudWxsKTtcbiAgY29uc3QgcGF1c2VkID0gdXNlTWVkaWFTdGF0ZSgncGF1c2VkJywgcGxheWVyKTtcbiAgY29uc3QgbWVkaWFSZW1vdGUgPSB1c2VNZWRpYVJlbW90ZShwbGF5ZXIpO1xuXG4gIC8qKlxuICAgKiAhV29ya2Fyb3VuZCBmb3IgVmlkc3RhY2sgWW91dHViZSBQcm92aWRlciBpc3N1ZSB3aXRoIG5hdGl2ZSBjb250cm9scyFcbiAgICogKE5vdCBuZWVkZWQgd2l0aCBDdXN0b20gQ29udHJvbHMgaS5lIHdoZW4gY29udHJvbHMgcHJvcHMgaXMgbm90IHNldCB0byB0cnVlIGluIDxNZWRpYVBsYXllcj4pXG4gICAqIFdoZW4gdGhlIHByb3ZpZGVyIGNoYW5nZXMgb3IgcGxheWVyIGlzIGluIHdhaXRpbmcgc3RhdGUsIHdlIG5lZWQgdG8gZm9yY2UgcmUtcGxheSB0aGUgdmlkZW8uXG4gICAqIFRoaXMgaXMgYmVjYXVzZSBvZiBhbiBpc3N1ZSBpbiBWaWRzdGFjayB3aGVyZSBZb3V0dWJlIHZpZGVvcyB3aXRoIG5hdGl2ZSBjb250cm9scyBrZWVwcyBwYXVzaW5nLlxuICAgKi9cbiAgY29uc3Qgb25Qcm92aWRlckNoYW5nZSA9IGFzeW5jIChwcm92aWRlcjogTWVkaWFQcm92aWRlckFkYXB0ZXIgfCBudWxsKSA9PiB7XG4gICAgaWYgKGlzWW91VHViZVByb3ZpZGVyKHByb3ZpZGVyKSkge1xuICAgICAgYXdhaXQgcHJvdmlkZXIucGxheSgpO1xuICAgIH1cbiAgfTtcbiAgY29uc3Qgb25QbGF5ZXJXYWl0aW5nID0gKCkgPT4ge1xuICAgIGlmIChpc1lvdVR1YmVQcm92aWRlcihwbGF5ZXIuY3VycmVudD8ucHJvdmlkZXIpICYmIHBhdXNlZCkge1xuICAgICAgbWVkaWFSZW1vdGU/LnRvZ2dsZVBhdXNlZCgpO1xuICAgIH1cbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxWYXJpYWJsZVByb3ZpZGVyXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgIHN0eWxlPXt7IHdpZHRoLCBoZWlnaHQgfX1cbiAgICAgIHZhcmlhYmxlcz17dmRzVmFyaWFibGVzfVxuICAgID5cbiAgICAgIDxNZWRpYVBsYXllclxuICAgICAgICBhdXRvUGxheT17YXV0b3BsYXl9XG4gICAgICAgIGNvbnRyb2xzPXtzaG93RGVmYXVsdFByb3ZpZGVyQ29udHJvbHN9XG4gICAgICAgIGtleVNob3J0Y3V0cz17a2V5Ym9hcmRTaG9ydGN1dHN9XG4gICAgICAgIGxvb3A9e2xvb3B9XG4gICAgICAgIG11dGVkPXtcbiAgICAgICAgICBhdXRvcGxheSAmJiBpc1lvdVR1YmVQcm92aWRlcihwbGF5ZXI/LmN1cnJlbnQ/LnByb3ZpZGVyKVxuICAgICAgICAgICAgPyB0cnVlXG4gICAgICAgICAgICA6IG11dGVkXG4gICAgICAgIH1cbiAgICAgICAgcGxheXNJbmxpbmVcbiAgICAgICAgcmVmPXtwbGF5ZXJ9XG4gICAgICAgIHNyYz17dmlkZW9Vcmx9XG4gICAgICAgIHRpdGxlPXt2aWRlb1RpdGxlfVxuICAgICAgICBvbkNhblBsYXk9e29uUmVhZHl9XG4gICAgICAgIG9uTG9hZD17b25Mb2FkfVxuICAgICAgICBvblBsYXk9e29uUGxheX1cbiAgICAgICAgb25QbGF5aW5nPXsoKSA9PiB7XG4gICAgICAgICAgaWYgKGF1dG9wbGF5ICYmIHBsYXllci5jdXJyZW50Py5tdXRlZCAmJiAhbXV0ZWQpIHtcbiAgICAgICAgICAgIG1lZGlhUmVtb3RlPy51bm11dGUoKTtcbiAgICAgICAgICB9XG4gICAgICAgIH19XG4gICAgICAgIG9uUHJvdmlkZXJDaGFuZ2U9e29uUHJvdmlkZXJDaGFuZ2V9XG4gICAgICAgIG9uV2FpdGluZz17b25QbGF5ZXJXYWl0aW5nfVxuICAgICAgPlxuICAgICAgICA8TWVkaWFQcm92aWRlcj5cbiAgICAgICAgICB7cGxhY2Vob2xkZXJJbWFnZSAmJiAoXG4gICAgICAgICAgICA8UG9zdGVyXG4gICAgICAgICAgICAgIGFsdD17dmlkZW9UaXRsZX1cbiAgICAgICAgICAgICAgY2xhc3NOYW1lPVwidmRzLXBvc3RlclwiXG4gICAgICAgICAgICAgIHNyYz17cGxhY2Vob2xkZXJJbWFnZSBhcyBzdHJpbmd9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICl9XG4gICAgICAgICAge3RleHRUcmFja3M/Lm1hcCgodHJhY2spID0+IChcbiAgICAgICAgICAgIDxUcmFjayB7Li4udHJhY2t9IGtleT17dHJhY2suc3JjfSAvPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L01lZGlhUHJvdmlkZXI+XG4gICAgICAgIDxWaWRlb0xheW91dFxuICAgICAgICAgIGNvbnRyb2xzPXtjb250cm9sc31cbiAgICAgICAgICB0aHVtYm5haWxzPXt0aHVtYm5haWxzfVxuICAgICAgICAgIHRyYW5zbGF0aW9ucz17dHJhbnNsYXRpb25zfVxuICAgICAgICAvPlxuICAgICAgPC9NZWRpYVBsYXllcj5cbiAgICA8L1ZhcmlhYmxlUHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */"));
-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