@intellectif/lk-react 6.0.0 → 7.0.0

package/dist/chunk-2TW6WLBC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useXAPI.ts"],"names":[],"mappings":"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","file":"chunk-2TW6WLBC.js","sourcesContent":["'use client';\n\nimport type { XAPIConfig, XAPIStatement } from '@intellectif/lk-core';\nimport { useCallback, useRef } from 'react';\n\n/** Backoff before retry 1 / 2 / 3 (Req 10.4). */\nconst BACKOFF_MS = [1000, 2000, 4000] as const;\n\n/**\n * Applies the configured learner identity to a statement built by an activity\n * component. Components emit an anonymous placeholder actor and a\n * `urn:learning-kit:activity:*` object id (they cannot know identity — Req\n * 3.1); this hook is the documented place where `XAPIConfig.actor` and\n * `XAPIConfig.activityId` take over. Conservative on purpose: the actor is\n * replaced only when the statement still carries the SDK's anonymous\n * placeholder, and the object id only when it is still the SDK URN — a\n * consumer that already rewrote either keeps its own values.\n */\nfunction applyIdentity(statement: XAPIStatement, cfg: XAPIConfig): XAPIStatement {\n  const isAnonymous =\n    statement.actor?.account?.name === 'anonymous' &&\n    statement.actor.account.homePage === 'https://github.com/intellectif/learning-kit';\n  const isSdkObjectId =\n    statement.object?.objectType === 'Activity' &&\n    typeof statement.object.id === 'string' &&\n    statement.object.id.startsWith('urn:learning-kit:activity:');\n\n  if (!isAnonymous && !isSdkObjectId) {\n    return statement;\n  }\n  const mappedId =\n    isSdkObjectId && cfg.activityId\n      ? typeof cfg.activityId === 'function'\n        ? cfg.activityId(statement.object.id)\n        : cfg.activityId\n      : undefined;\n  return {\n    ...statement,\n    ...(isAnonymous && cfg.actor !== undefined ? { actor: cfg.actor } : {}),\n    ...(mappedId !== undefined ? { object: { ...statement.object, id: mappedId } } : {}),\n  };\n}\n\n/** UTF-8-safe base64 (`btoa` is Latin1-only and breaks on non-ASCII creds). */\nfunction toBase64Utf8(input: string): string {\n  const bytes = new TextEncoder().encode(input);\n  let binary = '';\n  for (const byte of bytes) {\n    binary += String.fromCharCode(byte);\n  }\n  return btoa(binary);\n}\n\nfunction authHeader(auth: XAPIConfig['auth']): string {\n  return auth.type === 'basic'\n    ? `Basic ${toBase64Utf8(`${auth.username}:${auth.password}`)}`\n    : `Bearer ${auth.token}`;\n}\n\nconst sleep = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));\n\nexport interface UseXAPIResult {\n  /**\n   * Sends a statement to the configured LRS. **Never rejects** — xAPI is\n   * fire-and-forget telemetry that must not break the learner's activity\n   * flow. Network errors and 5xx responses are retried (backoff 1s/2s/4s,\n   * up to 3 retries); a 4xx fails immediately. Any final failure is delivered\n   * to `config.onError`.\n   */\n  sendStatement: (statement: XAPIStatement) => Promise<void>;\n}\n\n/**\n * Delivers xAPI statements to a Learning Record Store, fire-and-forget.\n *\n * Telemetry must never break the learner's attempt, so\n * {@link UseXAPIResult.sendStatement} **never rejects**: network errors and 5xx\n * responses are retried (backoff 1s / 2s / 4s, up to 3 retries), a 4xx fails\n * immediately, and any final failure is reported to `config.onError` instead of\n * throwing. See `XAPIConfig` in `@intellectif/lk-core` for the options.\n *\n * The hook is also where learner identity is applied. Activity components\n * cannot know who the learner is, so they emit an anonymous placeholder actor\n * and a `urn:learning-kit:activity:*` object id; this hook substitutes\n * `config.actor` and `config.activityId` on the way out — and only while those\n * placeholders are still in place, so a statement you rewrote yourself is left\n * alone.\n *\n * `sendStatement` keeps a stable identity across renders even when `config` is\n * an inline object, so it is safe in a dependency array.\n *\n * ```tsx\n * const { sendStatement } = useXAPI({\n *   endpoint: 'https://your-lrs.example/xapi/statements',\n *   auth: { type: 'bearer', token: 'YOUR_TOKEN' },\n *   activityId: 'https://your-app.example/quiz/capital-jp',\n *   actor: { objectType: 'Agent', mbox: 'mailto:learner@example.com' },\n *   onError: (e) => console.error('xAPI send failed', e),\n * });\n *\n * <MultipleChoice data={quiz} onComplete={(r) => void sendStatement(r.xapiStatement)} />\n * ```\n */\nexport function useXAPI(config: XAPIConfig): UseXAPIResult {\n  // Keep the latest config without changing `sendStatement`'s identity when\n  // callers pass an inline config object.\n  const configRef = useRef(config);\n  configRef.current = config;\n\n  const sendStatement = useCallback(async (rawStatement: XAPIStatement): Promise<void> => {\n    const cfg = configRef.current;\n    const statement = applyIdentity(rawStatement, cfg);\n    const maxAttempts = 1 + BACKOFF_MS.length;\n\n    for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {\n      let statusCode: number | undefined;\n      let message = 'Request failed';\n\n      try {\n        const response = await fetch(cfg.endpoint, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n            'X-Experience-API-Version': '1.0.3',\n            Authorization: authHeader(cfg.auth),\n          },\n          body: JSON.stringify(statement),\n        });\n\n        if (response.ok) {\n          return;\n        }\n\n        statusCode = response.status;\n        message = `LRS responded with ${response.status}`;\n\n        // Only network errors and 5xx are retryable (Req 10.4). A 4xx is a\n        // client error — fail immediately rather than waste retries.\n        if (response.status < 500) {\n          cfg.onError?.({ statement, attempt, statusCode, message });\n          return;\n        }\n      } catch (error) {\n        message = error instanceof Error ? error.message : 'Network error';\n      }\n\n      if (attempt === maxAttempts) {\n        cfg.onError?.({\n          statement,\n          attempt,\n          ...(statusCode !== undefined ? { statusCode } : {}),\n          message,\n        });\n        return;\n      }\n\n      await sleep(BACKOFF_MS[attempt - 1]);\n    }\n  }, []);\n\n  return { sendStatement };\n}\n"]}

package/dist/chunk-6F4X2NKL.js

@@ -1,3 +1,4 @@
+'use client';
 import { Component } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-6N43WDVG.js

@@ -1,3 +1,4 @@
+'use client';
 import { useState, useRef, useCallback } from 'react';
 
 // src/hooks/useActivityState.ts

package/dist/chunk-6ZKVJAO6.js

@@ -0,0 +1,540 @@
+'use client';
+import { resolvePlaybackPolicy } from '@intellectif/lk-core';
+import { useRef, useId, useState, useCallback, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/shared/ActivityMedia.tsx
+var DEFAULT_STRINGS = {
+  play: "Play",
+  pause: "Pause",
+  preparing: "Preparing\u2026",
+  mute: "Mute",
+  unmute: "Unmute",
+  volume: "Volume",
+  speed: "Playback speed",
+  seek: "Seek",
+  playsRemaining: (remaining, max) => `${remaining} of ${max} play${max === 1 ? "" : "s"} remaining`,
+  noPlaysRemaining: "No plays remaining",
+  lastPlayConfirm: "This is your last play. Start it now?",
+  lastPlayStart: "Start last play",
+  lastPlayCancel: "Not yet",
+  seekBlocked: "Rewinding is not available for this recording.",
+  rateBlocked: "Playback speed is fixed for this recording.",
+  playFailed: "The recording could not be started. Try again."
+};
+var RESUME_EPSILON = 0.25;
+var SEEK_EPSILON = 0.35;
+var NO_PROGRESS = 0.25;
+var formatTime = (seconds) => {
+  if (!Number.isFinite(seconds) || seconds < 0) {
+    return "0:00";
+  }
+  const whole = Math.floor(seconds);
+  return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`;
+};
+function AudioTransport({
+  media,
+  policy,
+  renderMode = "practice",
+  disabled = false,
+  locale,
+  mediaBudget,
+  mediaStrings,
+  onInteraction
+}) {
+  const elementRef = useRef(null);
+  const statusId = useId();
+  const suppliedStrings = mediaBudget?.strings ?? mediaStrings;
+  const s = { ...DEFAULT_STRINGS, ...mediaStrings, ...mediaBudget?.strings };
+  const enforced = mediaBudget?.enforced ?? renderMode !== "review";
+  const budgeted = enforced && policy.maxPlays !== null && mediaBudget !== void 0;
+  const maxPlays = policy.maxPlays ?? 0;
+  const usedRef = useRef(mediaBudget?.entry?.plays ?? 0);
+  const pendingRef = useRef(false);
+  const resumeAtRef = useRef(null);
+  const highWaterRef = useRef(0);
+  const chargeRef = useRef(null);
+  const seededRef = useRef(false);
+  const lastPositionRef = useRef(-1);
+  const selfStartRef = useRef(false);
+  const [used, setUsed] = useState(usedRef.current);
+  const [playing, setPlaying] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [elapsed, setElapsed] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [muted, setMuted] = useState(false);
+  const [volume, setVolume] = useState(1);
+  const [confirming, setConfirming] = useState(false);
+  const [notice, setNotice] = useState("");
+  const [noticeNonce, setNoticeNonce] = useState(0);
+  const remaining = Math.max(0, maxPlays - used);
+  const announce = useCallback((message) => {
+    setNotice(message);
+    setNoticeNonce((n) => n + 1);
+  }, []);
+  const emit = useCallback(
+    (type, playsUsed) => {
+      if (!budgeted || mediaBudget === void 0 || onInteraction === void 0) {
+        return;
+      }
+      onInteraction({
+        type,
+        activityId: mediaBudget.activityId ?? mediaBudget.slotId,
+        timestamp: Date.now(),
+        payload: {
+          mediaKey: mediaBudget.key,
+          mediaType: "audio",
+          playsUsed,
+          maxPlays,
+          playsRemaining: Math.max(0, maxPlays - playsUsed)
+        }
+      });
+    },
+    [budgeted, mediaBudget, maxPlays, onInteraction]
+  );
+  const reportPosition = useCallback(
+    (seconds) => {
+      mediaBudget?.onPosition?.(mediaBudget.key, seconds);
+    },
+    [mediaBudget]
+  );
+  const isResume = useCallback((element) => {
+    const at = resumeAtRef.current;
+    return at !== null && Math.abs(element.currentTime - at) < RESUME_EPSILON;
+  }, []);
+  const buildClaim = useCallback(() => {
+    if (mediaBudget === void 0) {
+      return null;
+    }
+    return {
+      key: mediaBudget.key,
+      previousPlaysUsed: usedRef.current,
+      playsUsed: usedRef.current + 1,
+      maxPlays,
+      playsRemaining: Math.max(0, maxPlays - (usedRef.current + 1)),
+      slotId: mediaBudget.slotId,
+      index: mediaBudget.index,
+      ...mediaBudget.activityId !== void 0 ? { activityId: mediaBudget.activityId } : {}
+    };
+  }, [mediaBudget, maxPlays]);
+  const refuse = useCallback(() => {
+    announce(s.noPlaysRemaining);
+    emit("media-play-refused", usedRef.current);
+  }, [announce, emit, s.noPlaysRemaining]);
+  const startPlayback = useCallback(() => {
+    const element = elementRef.current;
+    if (element === null) {
+      return;
+    }
+    highWaterRef.current = element.currentTime;
+    selfStartRef.current = true;
+    void element.play().catch(() => {
+      selfStartRef.current = false;
+    });
+  }, []);
+  const commit = useCallback(
+    (claim) => {
+      const element = elementRef.current;
+      chargeRef.current = { claim, at: element?.currentTime ?? 0 };
+      usedRef.current = claim.playsUsed;
+      setUsed(claim.playsUsed);
+      emit("media-play-consumed", claim.playsUsed);
+    },
+    [emit]
+  );
+  const claimAndStart = useCallback(
+    (element, alreadyPlaying) => {
+      const claim = buildClaim();
+      if (claim === null) {
+        return;
+      }
+      const result = mediaBudget?.onPlayConsumed?.(claim);
+      if (result !== void 0 && typeof result.then === "function") {
+        if (alreadyPlaying) {
+          element.pause();
+        }
+        pendingRef.current = true;
+        setPending(true);
+        void result.then((grant) => {
+          const granted = grant !== void 0 && Number.isInteger(grant.playsUsed) ? grant.playsUsed : claim.playsUsed;
+          if (granted > maxPlays) {
+            usedRef.current = granted;
+            setUsed(granted);
+            refuse();
+            return;
+          }
+          commit({ ...claim, playsUsed: granted });
+          startPlayback();
+        }).catch(() => {
+          announce(s.playFailed);
+          emit("media-play-errored", usedRef.current);
+        }).finally(() => {
+          pendingRef.current = false;
+          setPending(false);
+        });
+        return;
+      }
+      commit(claim);
+      if (!alreadyPlaying) {
+        startPlayback();
+      }
+    },
+    [
+      buildClaim,
+      mediaBudget,
+      maxPlays,
+      commit,
+      startPlayback,
+      refuse,
+      announce,
+      emit,
+      s.playFailed
+    ]
+  );
+  const handleButton = useCallback(() => {
+    const element = elementRef.current;
+    if (element === null || pendingRef.current || disabled) {
+      return;
+    }
+    if (!element.paused) {
+      element.pause();
+      return;
+    }
+    if (!budgeted || isResume(element)) {
+      startPlayback();
+      return;
+    }
+    if (remaining === 0) {
+      refuse();
+      return;
+    }
+    if (remaining === 1 && !confirming) {
+      setConfirming(true);
+      return;
+    }
+    setConfirming(false);
+    claimAndStart(element, false);
+  }, [disabled, budgeted, isResume, startPlayback, remaining, refuse, confirming, claimAndStart]);
+  const handleLoadedMetadata = useCallback(() => {
+    const element = elementRef.current;
+    if (element === null) {
+      return;
+    }
+    setDuration(Number.isFinite(element.duration) ? element.duration : 0);
+    const at = mediaBudget?.entry?.at;
+    if (!seededRef.current && typeof at === "number" && Number.isFinite(at) && at > 0) {
+      seededRef.current = true;
+      highWaterRef.current = at;
+      resumeAtRef.current = at;
+      element.currentTime = at;
+      setElapsed(at);
+    }
+  }, [mediaBudget]);
+  const handlePlay = useCallback(() => {
+    const element = elementRef.current;
+    if (element === null) {
+      return;
+    }
+    if (disabled) {
+      element.pause();
+      return;
+    }
+    if (selfStartRef.current) {
+      selfStartRef.current = false;
+      setPlaying(true);
+      return;
+    }
+    if (pendingRef.current) {
+      setPlaying(true);
+      return;
+    }
+    if (isResume(element)) {
+      setPlaying(true);
+      resumeAtRef.current = null;
+      return;
+    }
+    if (!budgeted) {
+      setPlaying(true);
+      return;
+    }
+    if (remaining === 0) {
+      element.pause();
+      refuse();
+      return;
+    }
+    setPlaying(true);
+    claimAndStart(element, true);
+  }, [disabled, isResume, budgeted, remaining, refuse, claimAndStart]);
+  const handlePause = useCallback(() => {
+    const element = elementRef.current;
+    setPlaying(false);
+    if (element === null) {
+      return;
+    }
+    resumeAtRef.current = element.currentTime;
+    reportPosition(element.currentTime);
+  }, [reportPosition]);
+  const handleEnded = useCallback(() => {
+    setPlaying(false);
+    resumeAtRef.current = null;
+    highWaterRef.current = 0;
+    chargeRef.current = null;
+    setElapsed(0);
+    reportPosition(0);
+  }, [reportPosition]);
+  const handleTimeUpdate = useCallback(() => {
+    const element = elementRef.current;
+    if (element === null) {
+      return;
+    }
+    setElapsed(element.currentTime);
+    highWaterRef.current = Math.max(highWaterRef.current, element.currentTime);
+    const whole = Math.floor(element.currentTime);
+    if (whole !== lastPositionRef.current) {
+      lastPositionRef.current = whole;
+      reportPosition(element.currentTime);
+    }
+  }, [reportPosition]);
+  const handleSeeking = useCallback(() => {
+    const element = elementRef.current;
+    if (element === null || policy.seek !== "none") {
+      return;
+    }
+    if (Math.abs(element.currentTime - highWaterRef.current) > SEEK_EPSILON) {
+      element.currentTime = highWaterRef.current;
+      announce(s.seekBlocked);
+    }
+  }, [policy.seek, announce, s.seekBlocked]);
+  const handleRateChange = useCallback(() => {
+    const element = elementRef.current;
+    if (element === null || policy.rate !== "fixed" || element.playbackRate === 1) {
+      return;
+    }
+    element.playbackRate = 1;
+    announce(s.rateBlocked);
+  }, [policy.rate, announce, s.rateBlocked]);
+  const handleError = useCallback(() => {
+    const charge = chargeRef.current;
+    const element = elementRef.current;
+    const progressed = charge !== null && element !== null && element.currentTime - charge.at >= NO_PROGRESS;
+    if (charge !== null && !progressed) {
+      if (mediaBudget?.onPlayRefunded !== void 0) {
+        usedRef.current = charge.claim.previousPlaysUsed;
+        setUsed(charge.claim.previousPlaysUsed);
+        mediaBudget.onPlayRefunded(charge.claim);
+        emit("media-play-refunded", charge.claim.previousPlaysUsed);
+      } else {
+        emit("media-play-errored", usedRef.current);
+      }
+    }
+    chargeRef.current = null;
+    setPlaying(false);
+    announce(s.playFailed);
+  }, [mediaBudget, emit, announce, s.playFailed]);
+  useEffect(() => {
+    const element = elementRef.current;
+    if (element !== null) {
+      element.volume = volume;
+      element.muted = muted;
+    }
+  }, [volume, muted]);
+  const exhausted = budgeted && remaining === 0;
+  const buttonLabel = pending ? s.preparing : playing ? s.pause : s.play;
+  return /* @__PURE__ */ jsxs("figure", { className: "lk-media", "data-controls": "minimal", children: [
+    /* @__PURE__ */ jsxs(
+      "audio",
+      {
+        ref: elementRef,
+        className: "lk-media-el",
+        preload: "metadata",
+        "aria-label": media.alt || void 0,
+        onLoadedMetadata: handleLoadedMetadata,
+        onPlay: handlePlay,
+        onPause: handlePause,
+        onEnded: handleEnded,
+        onTimeUpdate: handleTimeUpdate,
+        onSeeking: handleSeeking,
+        onRateChange: handleRateChange,
+        onError: handleError,
+        children: [
+          /* @__PURE__ */ jsx("source", { src: media.url }),
+          media.captionsUrl ? /* @__PURE__ */ jsx("track", { kind: "captions", src: media.captionsUrl, default: true }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "lk-media-transport",
+        dir: "ltr",
+        ...suppliedStrings !== void 0 && locale !== void 0 ? { lang: locale } : {},
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "lk-media-play",
+              onClick: handleButton,
+              "aria-disabled": exhausted || disabled || void 0,
+              "aria-busy": pending || void 0,
+              "aria-label": exhausted ? `${s.play} \u2014 ${s.noPlaysRemaining}` : void 0,
+              "aria-describedby": budgeted ? statusId : void 0,
+              children: buttonLabel
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "lk-media-time", children: [
+            formatTime(elapsed),
+            " / ",
+            formatTime(duration)
+          ] }),
+          policy.seek === "allow" ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              className: "lk-media-scrub",
+              min: 0,
+              max: duration || 0,
+              step: 0.1,
+              value: Math.min(elapsed, duration || 0),
+              "aria-label": s.seek,
+              "aria-valuetext": `${formatTime(elapsed)} of ${formatTime(duration)}`,
+              onChange: (event) => {
+                const element = elementRef.current;
+                if (element !== null) {
+                  element.currentTime = Number(event.target.value);
+                }
+              }
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "lk-media-mute",
+              "aria-pressed": muted,
+              onClick: () => setMuted((m) => !m),
+              children: muted ? s.unmute : s.mute
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              className: "lk-media-volume",
+              min: 0,
+              max: 1,
+              step: 0.05,
+              value: volume,
+              "aria-label": s.volume,
+              onChange: (event) => setVolume(Number(event.target.value))
+            }
+          ),
+          policy.rate === "allow" ? /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: "lk-media-rate",
+              "aria-label": s.speed,
+              defaultValue: "1",
+              onChange: (event) => {
+                const element = elementRef.current;
+                if (element !== null) {
+                  element.playbackRate = Number(event.target.value);
+                }
+              },
+              children: ["0.75", "1", "1.25", "1.5"].map((rate) => /* @__PURE__ */ jsxs("option", { value: rate, children: [
+                rate,
+                "\xD7"
+              ] }, rate))
+            }
+          ) : null
+        ]
+      }
+    ),
+    budgeted ? /* @__PURE__ */ jsx("p", { className: "lk-media-plays", id: statusId, role: "status", children: remaining > 0 ? s.playsRemaining(remaining, maxPlays) : s.noPlaysRemaining }) : null,
+    /* @__PURE__ */ jsx("p", { className: "lk-media-notice", role: "alert", children: notice }, noticeNonce),
+    confirming ? /* @__PURE__ */ jsxs("fieldset", { className: "lk-media-confirm", children: [
+      /* @__PURE__ */ jsx("legend", { children: s.lastPlayConfirm }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-media-confirm-start",
+          autoFocus: true,
+          onClick: () => {
+            const element = elementRef.current;
+            setConfirming(false);
+            if (element !== null) {
+              claimAndStart(element, false);
+            }
+          },
+          children: s.lastPlayStart
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-media-confirm-cancel",
+          onClick: () => setConfirming(false),
+          children: s.lastPlayCancel
+        }
+      )
+    ] }) : null
+  ] });
+}
+function ActivityMedia(props) {
+  const { media, renderMode = "practice" } = props;
+  if (media.type === "image") {
+    return /* @__PURE__ */ jsx("figure", { className: "lk-media", children: /* @__PURE__ */ jsx("img", { className: "lk-media-el", src: media.url, alt: media.alt ?? "" }) });
+  }
+  if (media.type === "audio") {
+    const policy = resolvePlaybackPolicy(media);
+    if (policy.controls === "minimal" && renderMode !== "review") {
+      return /* @__PURE__ */ jsx(AudioTransport, { ...props, media, policy });
+    }
+    if (policy.maxPlays !== null && renderMode === "exam" && props.mediaBudget === void 0) {
+      throw new Error(
+        `ActivityMedia: audio ${JSON.stringify(media.url)} declares maxPlays and is rendered in renderMode "exam" without a \`mediaBudget\` binding. Nothing would persist the count, so a refresh restores the full budget while the page says plays remain. Render it through <ActivitySequence mediaBudget={\u2026}> or pass \`mediaBudget\` yourself.`
+      );
+    }
+    const hints = renderMode === "review" ? [] : policy.nativeControlHints;
+    return /* @__PURE__ */ jsx("figure", { className: "lk-media", children: /* @__PURE__ */ jsxs(
+      "audio",
+      {
+        className: "lk-media-el",
+        controls: true,
+        "aria-label": media.alt || void 0,
+        ...hints.length > 0 ? {
+          controlsList: hints.map((hint) => hint === "hide-download" ? "nodownload" : "noplaybackrate").join(" ")
+        } : {},
+        children: [
+          /* @__PURE__ */ jsx("source", { src: media.url }),
+          media.captionsUrl ? /* @__PURE__ */ jsx("track", { kind: "captions", src: media.captionsUrl, default: true }) : null
+        ]
+      }
+    ) });
+  }
+  if (media.type === "embed") {
+    return /* @__PURE__ */ jsx("figure", { className: "lk-media", children: /* @__PURE__ */ jsx("div", { className: "lk-media-embed", children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        className: "lk-media-el",
+        src: media.url,
+        title: media.alt ?? "Embedded media",
+        loading: "lazy",
+        referrerPolicy: "strict-origin-when-cross-origin",
+        sandbox: "allow-scripts allow-same-origin allow-presentation",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+        allowFullScreen: true
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx("figure", { className: "lk-media", children: /* @__PURE__ */ jsxs("video", { className: "lk-media-el", controls: true, "aria-label": media.alt || void 0, children: [
+    /* @__PURE__ */ jsx("source", { src: media.url }),
+    media.captionsUrl ? /* @__PURE__ */ jsx("track", { kind: "captions", src: media.captionsUrl, default: true }) : null
+  ] }) });
+}
+
+export { ActivityMedia };
+//# sourceMappingURL=chunk-6ZKVJAO6.js.map
+//# sourceMappingURL=chunk-6ZKVJAO6.js.map