@zyncat/ui 0.10.0 → 0.12.0

package/dist/youtube.js

@@ -0,0 +1,814 @@
+'use client';import { startDrag } from './chunk-IJS7TPGV.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import './chunk-7IZJERGA.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './youtube.css';
+import { useRef, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/expressive/youtube/format.ts
+var MILLION = 1e6;
+var TEN_THOUSAND = 1e4;
+var THOUSAND = 1e3;
+var ONE_DECIMAL = 1;
+var TRAILING_ZERO = /\.0$/;
+var THOUSANDS_BOUNDARY = /\B(?=(\d{3})+(?!\d))/g;
+function whole(value) {
+  return Math.max(0, Math.round(Number(value) || 0));
+}
+function compactCount(value) {
+  const n = whole(value);
+  if (n >= MILLION) return (n / MILLION).toFixed(ONE_DECIMAL).replace(TRAILING_ZERO, "") + "M";
+  if (n >= TEN_THOUSAND) return Math.round(n / THOUSAND) + "k";
+  if (n >= THOUSAND) return (n / THOUSAND).toFixed(ONE_DECIMAL).replace(TRAILING_ZERO, "") + "k";
+  return String(n);
+}
+function groupedCount(value) {
+  return String(whole(value)).replace(THOUSANDS_BOUNDARY, ",");
+}
+function KebabGlyph() {
+  return /* @__PURE__ */ jsxs("svg", { className: "youtube__glyph", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6", r: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "18", r: "2" })
+  ] });
+}
+function VerifiedGlyph() {
+  return /* @__PURE__ */ jsxs("svg", { className: "youtube__glyph", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { className: "youtube__glyph-knockout", d: "M10.3 16.7 5.9 12.3l1.6-1.6 2.8 2.8 6.2-6.2 1.6 1.6z" })
+  ] });
+}
+function PlayGlyph() {
+  return /* @__PURE__ */ jsx("svg", { className: "youtube__glyph", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M7.4 4.5 19.6 12 7.4 19.5z" }) });
+}
+function PauseGlyph() {
+  return /* @__PURE__ */ jsxs("svg", { className: "youtube__glyph", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx("rect", { x: "6.4", y: "4.4", width: "4", height: "15.2", rx: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "13.6", y: "4.4", width: "4", height: "15.2", rx: "0.5" })
+  ] });
+}
+function SpeakerGlyph() {
+  return /* @__PURE__ */ jsxs("svg", { className: "youtube__glyph", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3.4 9h3.4l4.8-4.2v14.4L6.8 15H3.4z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M14.6 9.3a3.6 3.6 0 0 1 0 5.4M17.2 6.9a7.1 7.1 0 0 1 0 10.2",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function ExpandGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.9",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M4.4 4.4 11 11M4.4 10.2V4.4h5.8" }),
+        /* @__PURE__ */ jsx("path", { d: "M19.6 19.6 13 13M19.6 13.8v5.8h-5.8" })
+      ]
+    }
+  );
+}
+function HeartGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 22 22",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.7",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M11 20.8 3 11.5a5 5 0 0 1 7-7l1 1 1-1a5 5 0 0 1 7 7z" })
+    }
+  );
+}
+function BubbleGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 22 21",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.7",
+      strokeLinejoin: "round",
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2.5 0.9h17c.9 0 1.6.7 1.6 1.6v9.9c0 .9-.7 1.6-1.6 1.6H8l-4.4 6.1V14H2.5c-.9 0-1.6-.7-1.6-1.6V2.5c0-.9.7-1.6 1.6-1.6z" }),
+        /* @__PURE__ */ jsx("path", { d: "M4.6 5h12.8M4.6 9.2h8.2" })
+      ]
+    }
+  );
+}
+function ShareGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 22 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.7",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M12.8 1.5 20.9 10l-8.1 8.5v-4.9c-5 .1-8.5 1.8-10.6 5 .5-7.4 4.1-11.3 10.6-11.6z" })
+    }
+  );
+}
+function RemixGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 22 22",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.7",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2.9 8.1A8.4 8.4 0 0 1 17.4 5.4" }),
+        /* @__PURE__ */ jsx("path", { d: "M19.1 13.9A8.4 8.4 0 0 1 4.6 16.6" }),
+        /* @__PURE__ */ jsx("path", { d: "M17.9 1.4v4.3h-4.3M4.1 20.6v-4.3h4.3" }),
+        /* @__PURE__ */ jsx("path", { d: "M11 7.8v6.4M7.8 11h6.4" })
+      ]
+    }
+  );
+}
+function ThumbUpGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 21 21",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M6 8.6 11.4 1c1.1 0 1.9 1 1.6 2.1L12 7.4h5.4c1.3 0 2.3 1.2 2 2.5l-1.4 6.6c-.2 1-1.1 1.7-2.1 1.7H6z" }),
+        /* @__PURE__ */ jsx("rect", { x: "1", y: "8.6", width: "4", height: "9.6", rx: "0.6" })
+      ]
+    }
+  );
+}
+function ThumbDownGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 21 21",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M6 12.4 11.4 20c1.1 0 1.9-1 1.6-2.1L12 13.6h5.4c1.3 0 2.3-1.2 2-2.5l-1.4-6.6c-.2-1-1.1-1.7-2.1-1.7H6z" }),
+        /* @__PURE__ */ jsx("rect", { x: "1", y: "2.8", width: "4", height: "9.6", rx: "0.6" })
+      ]
+    }
+  );
+}
+function ChevronLeftGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M14.6 5.4 8 12l6.6 6.6" })
+    }
+  );
+}
+function ChevronRightGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M9.4 5.4 16 12l-6.6 6.6" })
+    }
+  );
+}
+function StackGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "youtube__glyph",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.9",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M8.4 3.6h12v12" }),
+        /* @__PURE__ */ jsx("rect", { x: "3.6", y: "8.4", width: "12", height: "12", rx: "1.6" })
+      ]
+    }
+  );
+}
+function isEmpty(source) {
+  return source === void 0 || source === null || source === false || source === "";
+}
+function Media({ source, className }) {
+  if (typeof source === "string") return /* @__PURE__ */ jsx("img", { className: cx("youtube__media", className), src: source, alt: "" });
+  if (!isEmpty(source)) return /* @__PURE__ */ jsx("div", { className: cx("youtube__media", className), children: source });
+  return /* @__PURE__ */ jsx("div", { className: cx("youtube__media", "youtube__placeholder", className) });
+}
+var PAGE_PROPERTY = "--youtube-carousel-page";
+var DRAG_PROPERTY = "--youtube-carousel-drag";
+var DRAGGING_ATTRIBUTE = "data-dragging";
+var NO_DRAG = "0px";
+var RUBBER_BAND_DIVISOR = 6;
+var PAGE_COMMIT_RATIO = 0.25;
+var FLICK_DISTANCE_PX = 8;
+var FLICK_VELOCITY_PX_PER_S = 420;
+var FIRST_PAGE = 0;
+var ONE_PAGE = 1;
+var PRIMARY_BUTTON = 0;
+var CAROUSEL_LABEL = "Post images";
+var CAROUSEL_ROLE_DESCRIPTION = "carousel";
+var SLIDE_ROLE_DESCRIPTION = "slide";
+var PREVIOUS_LABEL = "Previous image";
+var NEXT_LABEL = "Next image";
+var LIKES_LABEL = "Likes";
+var COMMENTS_LABEL = "Comments";
+var LIKE_LABEL = "Like";
+var DISLIKE_LABEL = "Dislike";
+var COMMENT_LABEL = "Comment";
+var SHARE_LABEL = "Share";
+var MENU_LABEL = "More options";
+var PREVIOUS_KEY = "ArrowLeft";
+var NEXT_KEY = "ArrowRight";
+function slideLabel(index, total) {
+  return String(index + ONE_PAGE) + " of " + String(total);
+}
+function pageStyle(page) {
+  return { [PAGE_PROPERTY]: page };
+}
+function bandedTravel(travel, page, lastPage) {
+  const pullsBeforeStart = travel > 0 && page === FIRST_PAGE;
+  const pullsPastEnd = travel < 0 && page === lastPage;
+  return pullsBeforeStart || pullsPastEnd ? travel / RUBBER_BAND_DIVISOR : travel;
+}
+function settledPage(page, lastPage, travel, velocity, span) {
+  const distance = Math.abs(travel);
+  const flicked = distance >= FLICK_DISTANCE_PX && Math.abs(velocity) >= FLICK_VELOCITY_PX_PER_S;
+  if (!flicked && distance < span * PAGE_COMMIT_RATIO) return page;
+  const step = travel < 0 ? ONE_PAGE : -ONE_PAGE;
+  return Math.min(lastPage, Math.max(FIRST_PAGE, page + step));
+}
+function PostSurface({
+  channel,
+  age,
+  text,
+  likes,
+  comments,
+  slides,
+  avatar,
+  page,
+  onPage,
+  liked,
+  onLikedChange,
+  disliked,
+  onDislikedChange,
+  onAction
+}) {
+  const carouselRef = useRef(null);
+  const viewportRef = useRef(null);
+  const detach = useRef(null);
+  const lastPage = Math.max(FIRST_PAGE, slides.length - ONE_PAGE);
+  const paged = slides.length > ONE_PAGE;
+  useEffect(
+    () => () => {
+      detach.current?.();
+      detach.current = null;
+    },
+    []
+  );
+  const goTo = (next) => {
+    const clamped = Math.min(lastPage, Math.max(FIRST_PAGE, next));
+    if (clamped !== page) onPage(clamped);
+  };
+  const onGrab = (event) => {
+    const root = carouselRef.current;
+    const viewport = viewportRef.current;
+    if (!paged || !root || !viewport || event.button !== PRIMARY_BUTTON || !event.isPrimary) return;
+    const span = viewport.clientWidth;
+    detach.current?.();
+    root.setAttribute(DRAGGING_ATTRIBUTE, "");
+    detach.current = startDrag(event, {
+      onMove: (info) => root.style.setProperty(DRAG_PROPERTY, bandedTravel(info.offset.x, page, lastPage) + "px"),
+      onEnd: (info) => {
+        detach.current = null;
+        root.style.setProperty(DRAG_PROPERTY, NO_DRAG);
+        root.removeAttribute(DRAGGING_ATTRIBUTE);
+        goTo(settledPage(page, lastPage, info.offset.x, info.velocity.x, span));
+      }
+    });
+  };
+  const onKeyDown = (event) => {
+    if (!paged) return;
+    if (event.key === PREVIOUS_KEY) {
+      event.preventDefault();
+      goTo(page - ONE_PAGE);
+    } else if (event.key === NEXT_KEY) {
+      event.preventDefault();
+      goTo(page + ONE_PAGE);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "youtube-post__avatar", children: /* @__PURE__ */ jsx(Media, { source: avatar, className: "youtube__avatar-media" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "youtube-post__body", children: [
+      /* @__PURE__ */ jsxs("p", { className: "youtube-post__head", children: [
+        /* @__PURE__ */ jsx("span", { className: "youtube-post__name", children: channel }),
+        /* @__PURE__ */ jsx("span", { className: "youtube-post__time", children: age })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "youtube-post__text", children: text }),
+      /* @__PURE__ */ jsxs("div", { className: "youtube-post__carousel", ref: carouselRef, style: pageStyle(page), children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "youtube-post__viewport",
+            ref: viewportRef,
+            role: "group",
+            "aria-roledescription": paged ? CAROUSEL_ROLE_DESCRIPTION : void 0,
+            "aria-label": CAROUSEL_LABEL,
+            tabIndex: paged ? FIRST_PAGE : void 0,
+            onPointerDown: onGrab,
+            onKeyDown,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "youtube-post__strip", children: slides.map((slide, index) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "youtube-post__slide",
+                  role: paged ? "group" : void 0,
+                  "aria-roledescription": paged ? SLIDE_ROLE_DESCRIPTION : void 0,
+                  "aria-label": paged ? slideLabel(index, slides.length) : void 0,
+                  children: /* @__PURE__ */ jsx(Media, { source: slide })
+                },
+                index
+              )) }),
+              paged && /* @__PURE__ */ jsx("span", { className: "youtube-post__stack", "aria-hidden": "true", children: /* @__PURE__ */ jsx(StackGlyph, {}) })
+            ]
+          }
+        ),
+        paged && page > FIRST_PAGE && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "youtube-post__arrow youtube-post__arrow--prev",
+            "aria-label": PREVIOUS_LABEL,
+            onClick: () => goTo(page - ONE_PAGE),
+            children: /* @__PURE__ */ jsx(ChevronLeftGlyph, {})
+          }
+        ),
+        paged && page < lastPage && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "youtube-post__arrow youtube-post__arrow--next",
+            "aria-label": NEXT_LABEL,
+            onClick: () => goTo(page + ONE_PAGE),
+            children: /* @__PURE__ */ jsx(ChevronRightGlyph, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "youtube-post__actions", children: [
+        /* @__PURE__ */ jsxs("span", { className: "youtube-post__action", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "youtube-button youtube-post__action-glyph youtube-post__action-glyph--thumb",
+              "aria-label": LIKE_LABEL,
+              "aria-pressed": liked,
+              onClick: () => onLikedChange(!liked),
+              children: /* @__PURE__ */ jsx(ThumbUpGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "youtube-post__action-count", children: [
+            /* @__PURE__ */ jsxs("span", { className: "youtube__sr", children: [
+              LIKES_LABEL,
+              " "
+            ] }),
+            compactCount(likes + (liked ? 1 : 0))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "youtube-post__action youtube-post__action--dislike", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "youtube-button youtube-post__action-glyph youtube-post__action-glyph--thumb",
+            "aria-label": DISLIKE_LABEL,
+            "aria-pressed": disliked,
+            onClick: () => onDislikedChange(!disliked),
+            children: /* @__PURE__ */ jsx(ThumbDownGlyph, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "youtube-post__action youtube-post__action--share", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "youtube-button youtube-post__action-glyph youtube-post__action-glyph--share",
+            "aria-label": SHARE_LABEL,
+            onClick: () => onAction?.("share"),
+            children: /* @__PURE__ */ jsx(ShareGlyph, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("span", { className: "youtube-post__action youtube-post__action--comment", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "youtube-button youtube-post__action-glyph youtube-post__action-glyph--bubble",
+              "aria-label": COMMENT_LABEL,
+              onClick: () => onAction?.("comment"),
+              children: /* @__PURE__ */ jsx(BubbleGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "youtube-post__action-count", children: [
+            /* @__PURE__ */ jsxs("span", { className: "youtube__sr", children: [
+              COMMENTS_LABEL,
+              " "
+            ] }),
+            groupedCount(comments)
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "youtube-button youtube-post__more",
+        "aria-label": MENU_LABEL,
+        onClick: () => onAction?.("menu"),
+        children: /* @__PURE__ */ jsx(KebabGlyph, {})
+      }
+    )
+  ] });
+}
+var PROGRESS_PROPERTY = "--youtube-progress";
+var PROGRESS_MIN = 0;
+var PROGRESS_MAX = 100;
+var PLAY_LABEL = "Play";
+var PAUSE_LABEL = "Pause";
+var PROGRESS_LABEL = "Playback progress";
+var LIKES_LABEL2 = "Likes";
+var COMMENTS_LABEL2 = "Comments";
+var REMIXES_LABEL = "Remixes";
+var SHARE_LABEL2 = "Share";
+var LIKE_ACTION = "Like";
+var COMMENT_ACTION = "Comment";
+var REMIX_ACTION = "Remix";
+var CAPTIONS_LABEL = "cc";
+var MENU_LABEL2 = "More options";
+var EXPAND_LABEL = "Expand";
+function progressStyle(progress) {
+  const clamped = Math.min(PROGRESS_MAX, Math.max(PROGRESS_MIN, Number(progress) || PROGRESS_MIN));
+  return { [PROGRESS_PROPERTY]: clamped };
+}
+function progressValue(progress) {
+  return Math.min(PROGRESS_MAX, Math.max(PROGRESS_MIN, Number(progress) || PROGRESS_MIN));
+}
+function RailAction({
+  glyph,
+  action,
+  name,
+  count,
+  pressed,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs("li", { className: "youtube-short__action", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "youtube-button youtube-short__action-face",
+        "aria-label": action,
+        "aria-pressed": pressed,
+        onClick,
+        children: glyph
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "youtube-short__action-label", children: [
+      count !== void 0 && /* @__PURE__ */ jsxs("span", { className: "youtube__sr", children: [
+        name,
+        " "
+      ] }),
+      count ?? name
+    ] })
+  ] });
+}
+function ShortSurface({
+  title,
+  channel,
+  likes,
+  comments,
+  remixes,
+  paused,
+  progress,
+  media,
+  avatar,
+  onTogglePaused,
+  liked,
+  onLikedChange,
+  onAction
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "youtube-short__meta", children: [
+      /* @__PURE__ */ jsxs("div", { className: "youtube-short__account", children: [
+        /* @__PURE__ */ jsx("div", { className: "youtube-short__account-avatar", children: /* @__PURE__ */ jsx(Media, { source: avatar, className: "youtube__avatar-media" }) }),
+        /* @__PURE__ */ jsx("span", { className: "youtube-short__handle", children: channel })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "youtube-short__title", children: title })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "youtube-short__stage", children: [
+      /* @__PURE__ */ jsx("div", { className: "youtube-short__frame", children: /* @__PURE__ */ jsx(Media, { source: media }) }),
+      /* @__PURE__ */ jsxs("div", { className: "youtube-short__controls", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "youtube-short__control",
+            "aria-pressed": paused,
+            "aria-label": paused ? PLAY_LABEL : PAUSE_LABEL,
+            onClick: onTogglePaused,
+            children: paused ? /* @__PURE__ */ jsx(PlayGlyph, {}) : /* @__PURE__ */ jsx(PauseGlyph, {})
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "youtube-short__control youtube-short__control--static", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SpeakerGlyph, {}) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "youtube-short__pill", children: [
+        /* @__PURE__ */ jsx("span", { className: "youtube-short__pill-cell", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "youtube-short__captions", children: CAPTIONS_LABEL }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "youtube-button youtube-short__pill-cell",
+            "aria-label": MENU_LABEL2,
+            onClick: () => onAction?.("menu"),
+            children: /* @__PURE__ */ jsx(KebabGlyph, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "youtube-button youtube-short__pill-cell",
+            "aria-label": EXPAND_LABEL,
+            onClick: () => onAction?.("expand"),
+            children: /* @__PURE__ */ jsx(ExpandGlyph, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "youtube-short__progress",
+          role: "progressbar",
+          "aria-label": PROGRESS_LABEL,
+          "aria-valuemin": PROGRESS_MIN,
+          "aria-valuemax": PROGRESS_MAX,
+          "aria-valuenow": progressValue(progress),
+          children: /* @__PURE__ */ jsx("div", { className: "youtube-short__progress-fill", style: progressStyle(progress) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("ul", { className: "youtube-short__rail", children: [
+      /* @__PURE__ */ jsx(
+        RailAction,
+        {
+          glyph: /* @__PURE__ */ jsx(HeartGlyph, {}),
+          action: LIKE_ACTION,
+          name: LIKES_LABEL2,
+          count: compactCount(likes + (liked ? 1 : 0)),
+          pressed: liked,
+          onClick: () => onLikedChange(!liked)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RailAction,
+        {
+          glyph: /* @__PURE__ */ jsx(BubbleGlyph, {}),
+          action: COMMENT_ACTION,
+          name: COMMENTS_LABEL2,
+          count: groupedCount(comments),
+          onClick: () => onAction?.("comment")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RailAction,
+        {
+          glyph: /* @__PURE__ */ jsx(ShareGlyph, {}),
+          action: SHARE_LABEL2,
+          name: SHARE_LABEL2,
+          onClick: () => onAction?.("share")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RailAction,
+        {
+          glyph: /* @__PURE__ */ jsx(RemixGlyph, {}),
+          action: REMIX_ACTION,
+          name: REMIXES_LABEL,
+          count: groupedCount(remixes),
+          onClick: () => onAction?.("remix")
+        }
+      ),
+      /* @__PURE__ */ jsx("li", { className: "youtube-short__rail-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Media, { source: avatar, className: "youtube__avatar-media" }) })
+    ] })
+  ] });
+}
+var MENU_LABEL3 = "More options";
+function VideoSurface({
+  title,
+  channel,
+  views,
+  age,
+  duration,
+  verified,
+  media,
+  avatar,
+  onAction
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "youtube-video__frame", children: [
+      /* @__PURE__ */ jsx(Media, { source: media }),
+      duration && /* @__PURE__ */ jsx("span", { className: "youtube-video__duration", children: duration })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "youtube-video__meta", children: [
+      /* @__PURE__ */ jsx("div", { className: "youtube-video__avatar", children: /* @__PURE__ */ jsx(Media, { source: avatar, className: "youtube__avatar-media" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "youtube-video__text", children: [
+        /* @__PURE__ */ jsx("h3", { className: "youtube-video__title", children: title }),
+        /* @__PURE__ */ jsxs("p", { className: "youtube-video__byline", children: [
+          /* @__PURE__ */ jsx("span", { className: "youtube-video__channel", children: channel }),
+          verified && /* @__PURE__ */ jsx("span", { className: "youtube-video__verified", children: /* @__PURE__ */ jsx(VerifiedGlyph, {}) })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "youtube-video__stats", children: [
+          views,
+          /* @__PURE__ */ jsx("span", { className: "youtube-video__dot", "aria-hidden": "true", children: "\u2022" }),
+          age
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "youtube-button youtube-video__more",
+          "aria-label": MENU_LABEL3,
+          onClick: () => onAction?.("menu"),
+          children: /* @__PURE__ */ jsx(KebabGlyph, {})
+        }
+      )
+    ] })
+  ] });
+}
+var SURFACE_CLASS = {
+  video: "youtube--video",
+  short: "youtube--short",
+  post: "youtube--post"
+};
+var EMPTY_TEXT = "";
+var NO_COUNT = 0;
+var FIRST_PAGE2 = 0;
+var ONE_PAGE2 = 1;
+var NO_PROGRESS = 0;
+function YouTube({
+  surface = "video",
+  title = EMPTY_TEXT,
+  channel = EMPTY_TEXT,
+  views = EMPTY_TEXT,
+  age = EMPTY_TEXT,
+  duration = EMPTY_TEXT,
+  verified = false,
+  likes = NO_COUNT,
+  comments = NO_COUNT,
+  remixes = NO_COUNT,
+  paused: controlledPaused,
+  defaultPaused = true,
+  onPausedChange,
+  progress = NO_PROGRESS,
+  text = EMPTY_TEXT,
+  carousel,
+  page: controlledPage,
+  defaultPage = FIRST_PAGE2,
+  onPageChange,
+  media,
+  avatar,
+  liked: controlledLiked,
+  defaultLiked = false,
+  onLikedChange,
+  disliked: controlledDisliked,
+  defaultDisliked = false,
+  onDislikedChange,
+  onAction,
+  className = EMPTY_TEXT,
+  style,
+  htmlProps
+}) {
+  const [paused, setPaused] = useControllable(controlledPaused, defaultPaused, onPausedChange);
+  const [page, setPage] = useControllable(controlledPage, defaultPage, onPageChange);
+  const [liked, setLiked] = useControllable(controlledLiked, defaultLiked, onLikedChange);
+  const [disliked, setDisliked] = useControllable(controlledDisliked, defaultDisliked, onDislikedChange);
+  const slides = carousel && carousel.length ? carousel : [media];
+  return /* @__PURE__ */ jsxs("article", { className: cx("youtube", SURFACE_CLASS[surface], className), style, ...htmlProps, children: [
+    surface === "video" && /* @__PURE__ */ jsx(
+      VideoSurface,
+      {
+        title,
+        channel,
+        views,
+        age,
+        duration,
+        verified,
+        media,
+        avatar,
+        onAction
+      }
+    ),
+    surface === "short" && /* @__PURE__ */ jsx(
+      ShortSurface,
+      {
+        title,
+        channel,
+        likes,
+        comments,
+        remixes,
+        paused,
+        progress,
+        media,
+        avatar,
+        onTogglePaused: () => setPaused(!paused),
+        liked,
+        onLikedChange: setLiked,
+        onAction
+      }
+    ),
+    surface === "post" && /* @__PURE__ */ jsx(
+      PostSurface,
+      {
+        channel,
+        age,
+        text,
+        likes,
+        comments,
+        slides,
+        avatar,
+        page: Math.min(page, slides.length - ONE_PAGE2),
+        onPage: setPage,
+        liked,
+        onLikedChange: setLiked,
+        disliked,
+        onDislikedChange: setDisliked,
+        onAction
+      }
+    )
+  ] });
+}
+
+export { YouTube };
+//# sourceMappingURL=youtube.js.map
+//# sourceMappingURL=youtube.js.map