@arc-ui/community-components 3.3.0 → 3.4.0

package/src/internal/VideoCardPlayer/VideoCardPlayer.module.css

@@ -0,0 +1,54 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
+.container {
+  border-radius: var(--sem-border-radius-s);
+  border: var(--sem-border-width-xs) solid
+    var(--sem-color-border-secondary-light-subtle);
+  outline: var(--sem-border-width-l) solid transparent;
+  transition:
+    0.4s ease outline-color,
+    0.4s ease box-shadow;
+  overflow: hidden;
+}
+
+.container iframe {
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+
+.container :global(.react-player__preview) {
+  position: relative;
+}
+
+.player {
+  height: 100%;
+  width: 100%;
+}
+
+.playerWrapper {
+  width: 100%;
+  position: relative;
+}
+
+.playerWrapper--landscape {
+  aspect-ratio: 16 / 9;
+}
+
+.playerWrapper--portrait {
+  aspect-ratio: 9 / 16;
+}
+
+.container:has(:global(.react-player__preview):focus) {
+  outline-color: var(--sem-color-border-primary-light-default);
+}
+
+.container:has(:global(.react-player__preview):hover),
+.container:has(:global(.react-player__preview):focus) {
+  box-shadow: var(--elevation-05);
+}
+
+@media (--arc-custom-media-min-width-l-px) {
+  .container {
+    border: none;
+  }
+}

package/src/internal/VideoCardPlayer/VideoCardPlayer.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+
+import ReactPlayer from "react-player";
+import { ReactPlayerProps } from "react-player/types";
+
+import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
+
+import { VideoCardPlayIcon } from "./components/VideoCardPlayIcon";
+import { PlayerProps } from "./types/player-props";
+
+import styles from "./VideoCardPlayer.module.css";
+
+export const VideoCardPlayer = ({
+  thumbnail,
+  playIconSize,
+  orientation,
+  children,
+  player,
+  ...props
+}: VideoCardPlayerProps) => {
+  const [isClient, setIsClient] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const playerProps = {
+    ...player,
+    light: thumbnail,
+    playIcon: <VideoCardPlayIcon size={playIconSize} />,
+    muted: !thumbnail,
+    playing: true,
+    controls: true,
+    className: styles.player,
+    width: "100%",
+    height: "100%",
+  };
+
+  return (
+    <div className={styles.container} {...filterAttrs(props)}>
+      <div
+        data-testid="arc-video-card"
+        className={classNames(
+          styles.playerWrapper,
+          styles[`playerWrapper--${orientation}`],
+        )}
+      >
+        {isClient && <ReactPlayer {...playerProps} />}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export interface VideoCardPlayerProps {
+  player: PlayerProps;
+  orientation: "portrait" | "landscape";
+  playIconSize: "s" | "l";
+  thumbnail?: ReactPlayerProps["light"];
+  children?: React.ReactNode;
+}

package/src/internal/VideoCardPlayer/components/VideoCardPlayIcon/VideoCardPlayIcon.module.css

@@ -0,0 +1,41 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
+.playIconContainer {
+  background: var(--sem-color-bg-primary-dark-default);
+  position: relative;
+  z-index: 1;
+  transition: 0.4s ease background-color;
+  border-radius: var(--sem-border-radius-s);
+}
+
+.playIconContainer--s {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  right: var(--sem-space-gap-110);
+  top: var(--sem-space-gap-110);
+}
+
+.playIconContainer--l {
+  height: 64px;
+  width: 64px;
+}
+
+.playIcon {
+  color: var(--sem-color-fg-secondary-light-default);
+  height: 100%;
+  width: 100%;
+  transition: 0.4s ease color;
+}
+
+:global(.react-player__preview):hover .playIconContainer {
+  background: var(--sem-color-bg-primary-light-subtle);
+}
+
+:global(.react-player__preview):focus .playIconContainer {
+  background: var(--sem-color-bg-primary-light-default);
+}
+
+:global(.react-player__preview):focus .playIcon,
+:global(.react-player__preview):hover .playIcon {
+  color: var(--sem-color-fg-primary-dark-default);
+}

package/src/internal/VideoCardPlayer/components/VideoCardPlayIcon/VideoCardPlayIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import classNames from "classnames";
+
+import { Icon } from "@arc-ui/components/Icon";
+
+import { ArcIconPlay } from "@arc-ui/icons/ArcIconPlay";
+
+import styles from "./VideoCardPlayIcon.module.css";
+
+export const VideoCardPlayIcon = ({ size = "l" }: VideoCardPlayIconProps) => {
+  return (
+    <div
+      className={classNames(
+        styles.playIconContainer,
+        styles[`playIconContainer--${size}`],
+      )}
+    >
+      <div className={styles.playIcon}>
+        <Icon icon={ArcIconPlay} />
+      </div>
+    </div>
+  );
+};
+
+interface VideoCardPlayIconProps {
+  size?: "s" | "l";
+}

package/src/internal/VideoCardPlayer/components/VideoCardPlayIcon/index.ts

@@ -0,0 +1 @@
+export { VideoCardPlayIcon } from "./VideoCardPlayIcon";

package/src/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.module.css

@@ -0,0 +1,58 @@
+@import url("@arc-ui/tokens-arc/dist/custom-media.css");
+
+.thumbnail {
+  align-items: flex-end;
+  background-size: cover;
+  bottom: 0;
+  display: flex;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: pointer;
+}
+
+.thumbnail::before {
+  bottom: 0;
+  content: "";
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.thumbnail--landscape::before {
+  background: linear-gradient(
+    180deg,
+    rgba(42, 42, 42, 0%) 0%,
+    rgba(42, 42, 42, 62%) 51.92%,
+    var(--sem-color-bg-secondary-light-alt) 100%
+  );
+}
+
+.thumbnail--portrait::before {
+  background: linear-gradient(
+    0deg,
+    var(--sem-color-bg-secondary-light-alt) 0.01%,
+    rgba(42, 42, 42, 90%) 16.31%,
+    rgba(42, 42, 42, 81%) 26.66%,
+    rgba(42, 42, 42, 0%) 100%
+  );
+}
+
+.thumbnailContent {
+  position: relative;
+  padding: var(--sem-space-padding-130);
+}
+
+.thumbnail--portrait .thumbnailContent {
+  padding: var(--sem-space-padding-110);
+}
+
+@media (--arc-custom-media-min-width-xl-px) {
+  .thumbnailContent {
+    padding: var(--sem-space-padding-160);
+  }
+}

package/src/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.tsx

@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import React from "react";
+
+import { Visible, VisibleProps } from "@arc-ui/components/Visible";
+
+import styles from "./VideoCardThumbnail.module.css";
+
+export const VideoCardThumbnail = ({
+  orientation,
+  contentVisibility,
+  src,
+  children,
+}: VideoCardThumbnailProps) => {
+  const content = <div className={styles.thumbnailContent}>{children}</div>;
+
+  return (
+    <div
+      className={classNames(
+        styles.thumbnail,
+        styles[`thumbnail--${orientation}`],
+      )}
+      style={{ backgroundImage: `url(${src})` }}
+    >
+      {contentVisibility ? (
+        <Visible {...contentVisibility}>{content}</Visible>
+      ) : (
+        content
+      )}
+    </div>
+  );
+};
+
+interface VideoCardThumbnailProps {
+  src: string;
+  children: React.ReactNode;
+  orientation: "portrait" | "landscape";
+  contentVisibility?: Omit<VisibleProps, "children">;
+}

package/src/internal/VideoCardPlayer/components/VideoCardThumbnail/index.ts

@@ -0,0 +1 @@
+export { VideoCardThumbnail } from "./VideoCardThumbnail";

package/src/internal/VideoCardPlayer/index.ts

@@ -0,0 +1,2 @@
+export { VideoCardPlayer, type VideoCardPlayerProps } from "./VideoCardPlayer";
+export { VideoCardThumbnail } from "./components/VideoCardThumbnail";

package/src/internal/VideoCardPlayer/types/player-props.ts

@@ -0,0 +1,6 @@
+import { ReactPlayerProps } from "react-player/types";
+
+export type PlayerProps = Pick<
+  ReactPlayerProps,
+  "onReady" | "onPlay" | "onStart" | "onPause" | "onEnded" | "onError" | "src"
+>;

package/versions.json

@@ -1 +1 @@
-["v3.3.0","v3.2.0","v3.1.0","v3.0.1","v3.0.0","v2.0.0","v1.1.0","v1.0.2","v1.0.1","v1.0.0","v0.1.0"]
+["v3.4.0","v3.3.0","v3.2.0","v3.1.0","v3.0.1","v3.0.0","v2.0.0","v1.1.0","v1.0.2","v1.0.1","v1.0.0","v0.1.0"]

package/lib/_shared/esm/Author-BVCRPgkl.mjs

@@ -1,27 +0,0 @@
-import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-D-1kWaCP.mjs';
-import React from 'react';
-import { Grid, GridRow, GridCol } from '@arc-ui/components/Grid';
-import { Avatar } from '@arc-ui/components/Avatar';
-import { Heading } from '@arc-ui/components/Heading';
-import { Text } from '@arc-ui/components/Text';
-
-var styles = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
-
-var Author = function (_a) {
-    var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
-    var avatarSizes = ["s", "m", "l", "xl"];
-    avatar.size = avatarSizes.includes(avatar.size || "") ? avatar.size : "m";
-    var isLargeAvatar = avatar.size === "l" || avatar.size === "xl";
-    return (React.createElement("div", __assign({}, filterAttrs(props)),
-        React.createElement(Grid, { isFluid: true, isGutterless: true },
-            React.createElement(GridRow, { align: "center" },
-                React.createElement(GridCol, { xs: isLargeAvatar ? 12 : "auto" },
-                    React.createElement("div", { className: isLargeAvatar ? styles.largeAvatar : undefined },
-                        React.createElement(Avatar, __assign({}, avatar)))),
-                React.createElement(GridCol, null,
-                    React.createElement("div", { className: "".concat(!isLargeAvatar && styles.authorContent), "data-testid": "authorContent" },
-                        React.createElement(Heading, { size: "xs" }, name),
-                        React.createElement(Text, { size: "s" }, title)))))));
-};
-
-export { Author as A };