@arc-ui/community-components 3.3.0 → 3.5.0

package/lib/_shared/esm/VideoCardThumbnail-Tbh7Xi-X.mjs

@@ -0,0 +1,438 @@
+import { _ as __rest, a as __assign } from './tslib.es6-BVXMhEem.mjs';
+import React__default, { lazy, useRef, useEffect, useCallback, useState, Suspense } from 'react';
+import { c as classNames } from './index-BfTCfPZ1.mjs';
+import { f as filterAttrs } from './filter-attrs-DZ7RCEZm.mjs';
+import { Icon } from '@arc-ui/components/Icon';
+import { Visible } from '@arc-ui/components/Visible';
+
+/**
+ * Do not edit directly
+ * Generated file
+ */
+
+const ArcIconPlay =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 56 56'%3e%3cpath fill='currentColor' d='M36.468 26.32 23.907 19.07A1.938 1.938 0 0 0 21 20.745V35.25a1.935 1.935 0 0 0 2.907 1.68l12.561-7.254a1.938 1.938 0 0 0 0-3.354m-.875 1.84-12.561 7.254a.18.18 0 0 1-.187 0 .18.18 0 0 1-.095-.165V20.745a.18.18 0 0 1 .095-.16.18.18 0 0 1 .187 0l12.561 7.25a.18.18 0 0 1 .095.164.18.18 0 0 1-.095.16'/%3e%3c/svg%3e";
+
+const AUDIO_EXTENSIONS = /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i;
+const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i;
+const HLS_EXTENSIONS = /\.(m3u8)($|\?)/i;
+const DASH_EXTENSIONS = /\.(mpd)($|\?)/i;
+const MATCH_URL_MUX = /stream\.mux\.com\/(?!\w+\.m3u8)(\w+)/;
+const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie|education)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//;
+const MATCH_URL_VIMEO = /vimeo\.com\/(?!progressive_redirect).+/;
+const MATCH_URL_WISTIA = /(?:wistia\.(?:com|net)|wi\.st)\/(?:medias|embed)\/(?:iframe\/)?([^?]+)/;
+const MATCH_URL_SPOTIFY = /open\.spotify\.com\/(\w+)\/(\w+)/i;
+const MATCH_URL_TWITCH = /(?:www\.|go\.)?twitch\.tv\/([a-zA-Z0-9_]+|(videos?\/|\?video=)\d+)($|\?)/;
+const MATCH_URL_TIKTOK = /tiktok\.com\/(?:player\/v1\/|share\/video\/|@[^/]+\/video\/)([0-9]+)/;
+const canPlayFile = (url, test) => {
+  if (Array.isArray(url)) {
+    for (const item of url) {
+      if (typeof item === "string" && canPlayFile(item, test)) {
+        return true;
+      }
+      if (canPlayFile(item.src, test)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  return test(url);
+};
+const canPlay = {
+  html: (url) => canPlayFile(url, (u) => AUDIO_EXTENSIONS.test(u) || VIDEO_EXTENSIONS.test(u)),
+  hls: (url) => canPlayFile(url, (u) => HLS_EXTENSIONS.test(u)),
+  dash: (url) => canPlayFile(url, (u) => DASH_EXTENSIONS.test(u)),
+  mux: (url) => MATCH_URL_MUX.test(url),
+  youtube: (url) => MATCH_URL_YOUTUBE.test(url),
+  vimeo: (url) => MATCH_URL_VIMEO.test(url) && !VIDEO_EXTENSIONS.test(url) && !HLS_EXTENSIONS.test(url),
+  wistia: (url) => MATCH_URL_WISTIA.test(url),
+  spotify: (url) => MATCH_URL_SPOTIFY.test(url),
+  twitch: (url) => MATCH_URL_TWITCH.test(url),
+  tiktok: (url) => MATCH_URL_TIKTOK.test(url)
+};
+
+const HtmlPlayer = React__default.forwardRef((props, ref) => {
+  const Media = AUDIO_EXTENSIONS.test(`${props.src}`) ? "audio" : "video";
+  return /* @__PURE__ */ React__default.createElement(Media, { ...props, ref }, props.children);
+});
+var HtmlPlayer_default = HtmlPlayer;
+
+const Players = [
+  {
+    key: "hls",
+    name: "hls.js",
+    canPlay: canPlay.hls,
+    canEnablePIP: () => true,
+    player: lazy(
+      () => import(
+        /* webpackChunkName: 'reactPlayerHls' */
+        './react-Ca6E7Fr-.mjs'
+      )
+    )
+  },
+  {
+    key: "dash",
+    name: "dash.js",
+    canPlay: canPlay.dash,
+    canEnablePIP: () => true,
+    player: lazy(
+      () => import(
+        /* webpackChunkName: 'reactPlayerDash' */
+        './react-WW_9iHcl.mjs'
+      )
+    )
+  },
+  {
+    key: "mux",
+    name: "Mux",
+    canPlay: canPlay.mux,
+    canEnablePIP: () => true,
+    player: lazy(
+      () => import(
+        /* webpackChunkName: 'reactPlayerMux' */
+        './index-CrcIrdjn.mjs'
+      )
+    )
+  },
+  {
+    key: "youtube",
+    name: "YouTube",
+    canPlay: canPlay.youtube,
+    player: lazy(
+      () => import(
+        /* webpackChunkName: 'reactPlayerYouTube' */
+        './react-DZyqy7W7.mjs'
+      )
+    )
+  },
+  {
+    key: "vimeo",
+    name: "Vimeo",
+    canPlay: canPlay.vimeo,
+    player: lazy(
+      () => import(
+        /* webpackChunkName: 'reactPlayerVimeo' */
+        './react-BGimq-TB.mjs'
+      )
+    )
+  },
+  {
+    key: "wistia",
+    name: "Wistia",
+    canPlay: canPlay.wistia,
+    canEnablePIP: () => true,
+    player: lazy(
+      () => import(
+        /* webpackChunkName: 'reactPlayerWistia' */
+        './react-DG070IvZ.mjs'
+      )
+    )
+  },
+  {
+    key: "spotify",
+    name: "Spotify",
+    canPlay: canPlay.spotify,
+    canEnablePIP: () => false,
+    player: lazy(
+      () => import(
+        /* webpackChunkName: 'reactPlayerSpotify' */
+        './react-BHT4t_eQ.mjs'
+      )
+    )
+  },
+  {
+    key: "twitch",
+    name: "Twitch",
+    canPlay: canPlay.twitch,
+    canEnablePIP: () => false,
+    player: lazy(
+      () => import(
+        /* webpackChunkName: 'reactPlayerTwitch' */
+        './react-CSr43fZV.mjs'
+      )
+    )
+  },
+  {
+    key: "tiktok",
+    name: "TikTok",
+    canPlay: canPlay.tiktok,
+    canEnablePIP: () => false,
+    player: lazy(
+      () => import(
+        /* webpackChunkName: 'reactPlayerTiktok' */
+        './react-BSd0sGcO.mjs'
+      )
+    )
+  },
+  {
+    key: "html",
+    name: "html",
+    canPlay: canPlay.html,
+    canEnablePIP: () => true,
+    player: HtmlPlayer_default
+  }
+];
+var players_default = Players;
+
+const defaultProps = {
+  // Falsy values don't need to be defined
+  //
+  // native video attrs
+  // src: undefined,
+  // preload: undefined,
+  // crossOrigin: undefined,
+  // autoPlay: false,
+  // muted: false,
+  // loop: false,
+  // controls: false,
+  // playsInline: false,
+  // disableRemotePlayback: false,
+  width: "320px",
+  height: "180px",
+  // native video props
+  volume: 1,
+  playbackRate: 1,
+  // custom props
+  // playing: undefined,
+  // pip: false,
+  // light: false,
+  // fallback: null,
+  previewTabIndex: 0,
+  previewAriaLabel: "",
+  oEmbedUrl: "https://noembed.com/embed?url={url}"
+};
+
+const Player = React__default.forwardRef((props, ref) => {
+  const { playing, pip } = props;
+  const Player2 = props.activePlayer;
+  const playerRef = useRef(null);
+  const startOnPlayRef = useRef(true);
+  useEffect(() => {
+    var _a, _b;
+    if (!playerRef.current) return;
+    if (playerRef.current.paused && playing === true) {
+      playerRef.current.play();
+    }
+    if (!playerRef.current.paused && playing === false) {
+      playerRef.current.pause();
+    }
+    playerRef.current.playbackRate = (_a = props.playbackRate) != null ? _a : 1;
+    playerRef.current.volume = (_b = props.volume) != null ? _b : 1;
+  });
+  useEffect(() => {
+    var _a, _b, _c, _d, _e;
+    if (!playerRef.current || !globalThis.document) return;
+    if (pip && !document.pictureInPictureElement) {
+      try {
+        (_b = (_a = playerRef.current).requestPictureInPicture) == null ? void 0 : _b.call(_a);
+      } catch (err) {
+      }
+    }
+    if (!pip && document.pictureInPictureElement) {
+      try {
+        (_d = (_c = playerRef.current).exitPictureInPicture) == null ? void 0 : _d.call(_c);
+        (_e = document.exitPictureInPicture) == null ? void 0 : _e.call(document);
+      } catch (err) {
+      }
+    }
+  }, [pip]);
+  const handleLoadStart = (event) => {
+    var _a, _b;
+    startOnPlayRef.current = true;
+    (_a = props.onReady) == null ? void 0 : _a.call(props);
+    (_b = props.onLoadStart) == null ? void 0 : _b.call(props, event);
+  };
+  const handlePlay = (event) => {
+    var _a, _b;
+    if (startOnPlayRef.current) {
+      startOnPlayRef.current = false;
+      (_a = props.onStart) == null ? void 0 : _a.call(props, event);
+    }
+    (_b = props.onPlay) == null ? void 0 : _b.call(props, event);
+  };
+  if (!Player2) {
+    return null;
+  }
+  const eventProps = {};
+  const reactPlayerEventHandlers = ["onReady", "onStart"];
+  for (const key in props) {
+    if (key.startsWith("on") && !reactPlayerEventHandlers.includes(key)) {
+      eventProps[key] = props[key];
+    }
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    Player2,
+    {
+      ...eventProps,
+      style: props.style,
+      className: props.className,
+      slot: props.slot,
+      ref: useCallback(
+        (node) => {
+          playerRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref !== null) {
+            ref.current = node;
+          }
+        },
+        [ref]
+      ),
+      src: props.src,
+      crossOrigin: props.crossOrigin,
+      preload: props.preload,
+      controls: props.controls,
+      muted: props.muted,
+      autoPlay: props.autoPlay,
+      loop: props.loop,
+      playsInline: props.playsInline,
+      disableRemotePlayback: props.disableRemotePlayback,
+      config: props.config,
+      onLoadStart: handleLoadStart,
+      onPlay: handlePlay
+    },
+    props.children
+  );
+});
+Player.displayName = "Player";
+var Player_default = Player;
+
+const Preview = lazy(() => import(
+  /* webpackChunkName: 'reactPlayerPreview' */
+  './Preview-CmbKOgEO.mjs'
+));
+const customPlayers = [];
+const createReactPlayer = (players, playerFallback) => {
+  const getActivePlayer = (src) => {
+    for (const player of [...customPlayers, ...players]) {
+      if (src && player.canPlay(src)) {
+        return player;
+      }
+    }
+    if (playerFallback) {
+      return playerFallback;
+    }
+    return null;
+  };
+  const ReactPlayer = React__default.forwardRef((_props, ref) => {
+    const props = { ...defaultProps, ..._props };
+    const { src, slot, className, style, width, height, fallback, wrapper } = props;
+    const [showPreview, setShowPreview] = useState(!!props.light);
+    useEffect(() => {
+      if (props.light) {
+        setShowPreview(true);
+      } else {
+        setShowPreview(false);
+      }
+    }, [props.light]);
+    const handleClickPreview = (e) => {
+      var _a;
+      setShowPreview(false);
+      (_a = props.onClickPreview) == null ? void 0 : _a.call(props, e);
+    };
+    const renderPreview = (src2) => {
+      if (!src2) return null;
+      const { light, playIcon, previewTabIndex, oEmbedUrl, previewAriaLabel } = props;
+      return /* @__PURE__ */ React__default.createElement(
+        Preview,
+        {
+          src: src2,
+          light,
+          playIcon,
+          previewTabIndex,
+          previewAriaLabel,
+          oEmbedUrl,
+          onClickPreview: handleClickPreview
+        }
+      );
+    };
+    const renderActivePlayer = (src2) => {
+      var _a, _b;
+      const player = getActivePlayer(src2);
+      if (!player) return null;
+      const { style: style2, width: width2, height: height2, wrapper: wrapper2 } = props;
+      const config = (_a = props.config) == null ? void 0 : _a[player.key];
+      return /* @__PURE__ */ React__default.createElement(
+        Player_default,
+        {
+          ...props,
+          ref,
+          activePlayer: (_b = player.player) != null ? _b : player,
+          slot: wrapper2 ? void 0 : slot,
+          className: wrapper2 ? void 0 : className,
+          style: wrapper2 ? { display: "block", width: "100%", height: "100%" } : { display: "block", width: width2, height: height2, ...style2 },
+          config
+        }
+      );
+    };
+    const Wrapper = wrapper == null ? ForwardChildren : wrapper;
+    const UniversalSuspense = fallback === false ? ForwardChildren : Suspense;
+    return /* @__PURE__ */ React__default.createElement(Wrapper, { slot, className, style: { width, height, ...style } }, /* @__PURE__ */ React__default.createElement(UniversalSuspense, { fallback }, showPreview ? renderPreview(src) : renderActivePlayer(src)));
+  });
+  ReactPlayer.displayName = "ReactPlayer";
+  ReactPlayer.addCustomPlayer = (player) => {
+    customPlayers.push(player);
+  };
+  ReactPlayer.removeCustomPlayers = () => {
+    customPlayers.length = 0;
+  };
+  ReactPlayer.canPlay = (src) => {
+    if (src) {
+      for (const Player2 of [...customPlayers, ...players]) {
+        if (Player2.canPlay(src)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  ReactPlayer.canEnablePIP = (src) => {
+    var _a;
+    if (src) {
+      for (const Player2 of [...customPlayers, ...players]) {
+        if (Player2.canPlay(src) && ((_a = Player2.canEnablePIP) == null ? void 0 : _a.call(Player2))) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  return ReactPlayer;
+};
+const ForwardChildren = ({ children }) => children;
+
+const fallback = players_default[players_default.length - 1];
+var src_default = createReactPlayer(players_default, fallback);
+
+var styles$2 = {"playIconContainer":"VideoCardPlayIcon-module_playIconContainer__ZqZP3","playIconContainer--s":"VideoCardPlayIcon-module_playIconContainer--s__ETbOZ","playIconContainer--l":"VideoCardPlayIcon-module_playIconContainer--l__OGccg","playIcon":"VideoCardPlayIcon-module_playIcon__kzito"};
+
+var VideoCardPlayIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "l" : _b;
+    return (React__default.createElement("div", { className: classNames(styles$2.playIconContainer, styles$2["playIconContainer--".concat(size)]) },
+        React__default.createElement("div", { className: styles$2.playIcon },
+            React__default.createElement(Icon, { icon: ArcIconPlay }))));
+};
+
+var styles$1 = {"container":"VideoCardPlayer-module_container__G-Uta","player":"VideoCardPlayer-module_player__BgueT","playerWrapper":"VideoCardPlayer-module_playerWrapper__UcH1q","playerWrapper--landscape":"VideoCardPlayer-module_playerWrapper--landscape__shKv-","playerWrapper--portrait":"VideoCardPlayer-module_playerWrapper--portrait__7bKAr"};
+
+var VideoCardPlayer = function (_a) {
+    var thumbnail = _a.thumbnail, playIconSize = _a.playIconSize, orientation = _a.orientation, children = _a.children, player = _a.player, props = __rest(_a, ["thumbnail", "playIconSize", "orientation", "children", "player"]);
+    var _b = useState(false), isClient = _b[0], setIsClient = _b[1];
+    useEffect(function () {
+        setIsClient(true);
+    }, []);
+    var playerProps = __assign(__assign({}, player), { light: thumbnail, playIcon: React__default.createElement(VideoCardPlayIcon, { size: playIconSize }), muted: !thumbnail, playing: true, controls: true, className: styles$1.player, width: "100%", height: "100%" });
+    return (React__default.createElement("div", __assign({ className: styles$1.container }, filterAttrs(props)),
+        React__default.createElement("div", { "data-testid": "arc-video-card", className: classNames(styles$1.playerWrapper, styles$1["playerWrapper--".concat(orientation)]) }, isClient && React__default.createElement(src_default, __assign({}, playerProps))),
+        children));
+};
+
+var styles = {"thumbnail":"VideoCardThumbnail-module_thumbnail__Yamk0","thumbnail--landscape":"VideoCardThumbnail-module_thumbnail--landscape__FmnLk","thumbnail--portrait":"VideoCardThumbnail-module_thumbnail--portrait__FZS93","thumbnailContent":"VideoCardThumbnail-module_thumbnailContent__cHham"};
+
+var VideoCardThumbnail = function (_a) {
+    var orientation = _a.orientation, contentVisibility = _a.contentVisibility, src = _a.src, children = _a.children;
+    var content = React__default.createElement("div", { className: styles.thumbnailContent }, children);
+    return (React__default.createElement("div", { className: classNames(styles.thumbnail, styles["thumbnail--".concat(orientation)]), style: { backgroundImage: "url(".concat(src, ")") } }, contentVisibility ? (React__default.createElement(Visible, __assign({}, contentVisibility), content)) : (content)));
+};
+
+export { VideoCardPlayer as V, VideoCardThumbnail as a };