@linktr.ee/messaging-react 1.26.0 → 1.26.1-rc-1776055454

package/dist/react-dS1WBxxz.js

@@ -0,0 +1,238 @@
+var D = Object.defineProperty;
+var P = (t) => {
+  throw TypeError(t);
+};
+var F = (t, i, e) => i in t ? D(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e;
+var L = (t, i, e) => F(t, typeof i != "symbol" ? i + "" : i, e), N = (t, i, e) => i.has(t) || P("Cannot " + e);
+var $ = (t, i, e) => (N(t, i, "read from private field"), e ? e.call(t) : i.get(t)), A = (t, i, e) => i.has(t) ? P("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), C = (t, i, e, s) => (N(t, i, "write to private field"), s ? s.call(t, e) : i.set(t, e), e);
+import W from "react";
+import { M as U, C as I } from "./mixin-B6jYfIcp.js";
+var M;
+class k extends U(I) {
+  constructor() {
+    super(...arguments);
+    A(this, M);
+  }
+  attributeChangedCallback(e, s, n) {
+    e !== "src" && super.attributeChangedCallback(e, s, n), e === "src" && s != n && this.load();
+  }
+  async _initThumbnails(e) {
+    const s = async (d, v) => {
+      const g = [], h = e.timescale || 1, E = e.startNumber || 1, S = e.presentationTimeOffset ? e.presentationTimeOffset / h : 0, m = e.segmentDuration;
+      for (let b = 0; b < d; b++) {
+        const y = K({
+          thIndex: b,
+          thduration: v,
+          ttiles: d,
+          tduration: m,
+          startNumber: E,
+          pto: S
+        }), _ = y + v, f = new Promise((w, a) => {
+          this.api.provideThumbnail(y, ({ url: r, width: l, height: p, x: T, y: O }) => {
+            try {
+              const R = new VTTCue(
+                y,
+                _,
+                `${r}#xywh=${T},${O},${l},${p}`
+              );
+              w(R);
+            } catch (R) {
+              a(R);
+            }
+          });
+        });
+        g.push(f);
+      }
+      return await Promise.all(g).catch((b) => console.error("Error processing thumbnails", b));
+    }, { totalThumbnails: n, thumbnailDuration: o } = j(e), u = await s(n, o);
+    let c = this.nativeEl.querySelector('track[label="thumbnails"]');
+    if (!c) {
+      c = q(), this.nativeEl.appendChild(c);
+      const d = z(u);
+      c.src = d, c.dispatchEvent(new Event("change"));
+    }
+  }
+  async load() {
+    if ($(this, M)) {
+      this.api.attachSource(this.src);
+      return;
+    }
+    C(this, M, !0);
+    const e = await import("./dash.all.min-Duv4lvGS.js");
+    this.api = e.MediaPlayer().create(), this.api.initialize(this.nativeEl, this.src, this.autoplay), this.api.on(e.MediaPlayer.events.STREAM_INITIALIZED, () => {
+      const s = this.api.getRepresentationsByType("video");
+      let n = this.videoTracks.getTrackById("main");
+      n || (n = this.addVideoTrack("main"), n.id = "main", n.selected = !0), s.forEach((o) => {
+        const u = o.bandwidth ?? o.bitrate ?? (Number.isFinite(o.bitrateInKbit) ? o.bitrateInKbit * 1e3 : void 0), c = n.addRendition(o.id, o.width, o.height, o.mimeType ?? o.codec, u);
+        c.id = o.id;
+      }), this.videoRenditions.addEventListener("change", () => {
+        const o = this.videoRenditions[this.videoRenditions.selectedIndex];
+        o != null && o.id ? (this.api.updateSettings({ streaming: { abr: { autoSwitchBitrate: { video: !1 } } } }), this.api.setRepresentationForTypeById("video", o.id, !0)) : this.api.updateSettings({ streaming: { abr: { autoSwitchBitrate: { video: !0 } } } });
+      }), this.api.isDynamic() || this.api.getRepresentationsByType("image").forEach(async (u, c) => {
+        c > 0 || this._initThumbnails(u);
+      });
+    });
+  }
+}
+M = new WeakMap(), L(k, "shadowRootOptions", { ...I.shadowRootOptions }), L(k, "getTemplateHTML", (e) => {
+  const { src: s, ...n } = e;
+  return I.getTemplateHTML(n);
+});
+function j(t) {
+  var i, e;
+  const s = t.essentialProperties[0], [n, o] = s.value.split("x").map(Number), u = n * o, c = ((e = (i = t.adaptation) == null ? void 0 : i.period) == null ? void 0 : e.duration) || null, d = t.segmentDuration, v = t.timescale || 1, h = d / v / u;
+  return { totalThumbnails: c != null ? Math.ceil(c / h) : Math.ceil(d / h), thumbnailDuration: h };
+}
+function K({ thIndex: t, tduration: i, thduration: e, ttiles: s, startNumber: n, pto: o }) {
+  const u = Math.floor(t / s) + n, c = t % s + 1, d = (u - 1) * i - o, v = (c - 1) * e;
+  return d + v;
+}
+function q() {
+  const t = document.createElement("track");
+  return t.kind = "metadata", t.label = "thumbnails", t.srclang = "en", t.mode = "hidden", t.default = !0, t;
+}
+function z(t) {
+  let i = `WEBVTT
+
+`;
+  for (const n of t)
+    i += `${s(n.startTime)} --> ${s(n.endTime)}
+`, i += `${n.text}
+
+`;
+  const e = new Blob([i], { type: "text/vtt" });
+  return URL.createObjectURL(e);
+  function s(n) {
+    const o = String(Math.floor(n / 3600)).padStart(2, "0"), u = String(Math.floor(n % 3600 / 60)).padStart(2, "0"), c = (n % 60).toFixed(3).padStart(6, "0");
+    return `${o}:${u}:${c}`;
+  }
+}
+globalThis.customElements && !globalThis.customElements.get("dash-video") && globalThis.customElements.define("dash-video", k);
+var Z = k, G = /* @__PURE__ */ new Set([
+  "style",
+  "children",
+  "ref",
+  "key",
+  "suppressContentEditableWarning",
+  "suppressHydrationWarning",
+  "dangerouslySetInnerHTML"
+]), J = {
+  className: "class",
+  htmlFor: "for"
+};
+function H(t) {
+  return t.toLowerCase();
+}
+function x(t) {
+  if (typeof t == "boolean") return t ? "" : void 0;
+  if (typeof t != "function" && !(typeof t == "object" && t !== null))
+    return t;
+}
+function Q({
+  react: t,
+  tagName: i,
+  elementClass: e,
+  events: s,
+  displayName: n,
+  defaultProps: o,
+  toAttributeName: u = H,
+  toAttributeValue: c = x
+}) {
+  const d = Number.parseInt(t.version) >= 19, v = t.forwardRef((g, h) => {
+    var E, S;
+    const m = t.useRef(null), b = t.useRef(/* @__PURE__ */ new Map()), y = {}, _ = {}, f = {}, w = {};
+    for (const [a, r] of Object.entries(g)) {
+      if (G.has(a)) {
+        f[a] = r;
+        continue;
+      }
+      const l = u(J[a] ?? a);
+      if (e.prototype && a in e.prototype && !(a in (((E = globalThis.HTMLElement) == null ? void 0 : E.prototype) ?? {})) && !((S = e.observedAttributes) != null && S.some((T) => T === l))) {
+        w[a] = r;
+        continue;
+      }
+      if (a.startsWith("on")) {
+        y[a] = r;
+        continue;
+      }
+      const p = c(r);
+      if (l && p != null && (_[l] = String(p), d || (f[l] = p)), l && d) {
+        const T = x(r);
+        p !== T ? f[l] = p : f[l] = r;
+      }
+    }
+    if (typeof window < "u") {
+      for (const a in y) {
+        const r = y[a], l = a.endsWith("Capture"), p = ((s == null ? void 0 : s[a]) ?? a.slice(2).toLowerCase()).slice(
+          0,
+          l ? -7 : void 0
+        );
+        t.useLayoutEffect(() => {
+          const T = m == null ? void 0 : m.current;
+          if (!(!T || typeof r != "function"))
+            return T.addEventListener(p, r, l), () => {
+              T.removeEventListener(p, r, l);
+            };
+        }, [m == null ? void 0 : m.current, r]);
+      }
+      t.useLayoutEffect(() => {
+        if (m.current === null) return;
+        const a = /* @__PURE__ */ new Map();
+        for (const r in w)
+          B(m.current, r, w[r]), b.current.delete(r), a.set(r, w[r]);
+        for (const [r, l] of b.current)
+          B(m.current, r, void 0);
+        b.current = a;
+      });
+    }
+    if (typeof window > "u" && (e != null && e.getTemplateHTML) && (e != null && e.shadowRootOptions)) {
+      const { mode: a, delegatesFocus: r } = e.shadowRootOptions, l = t.createElement("template", {
+        shadowrootmode: a,
+        shadowrootdelegatesfocus: r,
+        dangerouslySetInnerHTML: {
+          __html: e.getTemplateHTML(_, g)
+        },
+        key: "ce-la-react-ssr-template-shadow-root"
+      });
+      f.children = [l, f.children];
+    }
+    return t.createElement(i, {
+      ...o,
+      ...f,
+      ref: t.useCallback(
+        (a) => {
+          m.current = a, typeof h == "function" ? h(a) : h !== null && (h.current = a);
+        },
+        [h]
+      )
+    }, f.children);
+  });
+  return v.displayName = n ?? e.name, v;
+}
+function B(t, i, e) {
+  var s;
+  t[i] = e, e == null && i in (((s = globalThis.HTMLElement) == null ? void 0 : s.prototype) ?? {}) && t.removeAttribute(i);
+}
+var tt = Q({
+  react: W,
+  tagName: "dash-video",
+  elementClass: Z,
+  toAttributeName(t) {
+    return t === "muted" ? "" : t === "defaultMuted" ? "muted" : H(t);
+  }
+});
+/*! Bundled license information:
+
+ce-la-react/dist/ce-la-react.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *
+   * Modified version of `@lit/react` for vanilla custom elements with support for SSR.
+   *)
+*/
+export {
+  tt as default
+};
+//# sourceMappingURL=react-dS1WBxxz.js.map

package/dist/react-dS1WBxxz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-dS1WBxxz.js","sources":["../../../node_modules/dash-video-element/dist/dash-video-element.js","../../../node_modules/dash-video-element/dist/react.js"],"sourcesContent":["import { CustomVideoElement } from \"custom-media-element\";\nimport { MediaTracksMixin } from \"media-tracks\";\nclass DashVideoElement extends MediaTracksMixin(CustomVideoElement) {\n  static shadowRootOptions = { ...CustomVideoElement.shadowRootOptions };\n  static getTemplateHTML = (attrs) => {\n    const { src, ...rest } = attrs;\n    return CustomVideoElement.getTemplateHTML(rest);\n  };\n  #apiInit;\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    if (attrName !== \"src\") {\n      super.attributeChangedCallback(attrName, oldValue, newValue);\n    }\n    if (attrName === \"src\" && oldValue != newValue) {\n      this.load();\n    }\n  }\n  async _initThumbnails(representation) {\n    const generateAllCues = async (totalThumbnails2, thumbnailDuration2) => {\n      const promises = [];\n      const timescale = representation.timescale || 1;\n      const startNumber = representation.startNumber || 1;\n      const pto = representation.presentationTimeOffset ? representation.presentationTimeOffset / timescale : 0;\n      const tduration = representation.segmentDuration;\n      for (let thIndex = 0; thIndex < totalThumbnails2; thIndex++) {\n        const startTime = calculateThumbnailStartTime({\n          thIndex,\n          thduration: thumbnailDuration2,\n          ttiles: totalThumbnails2,\n          tduration,\n          startNumber,\n          pto\n        });\n        const endTime = startTime + thumbnailDuration2;\n        const promise = new Promise((resolve, reject) => {\n          this.api.provideThumbnail(startTime, ({ url, width, height, x, y }) => {\n            try {\n              const cue = new VTTCue(\n                startTime,\n                endTime,\n                `${url}#xywh=${x},${y},${width},${height}`\n              );\n              resolve(cue);\n            } catch (err) {\n              reject(err);\n            }\n          });\n        });\n        promises.push(promise);\n      }\n      return await Promise.all(promises).catch((e) => console.error(\"Error processing thumbnails\", e));\n    };\n    const { totalThumbnails, thumbnailDuration } = calculateThumbnailTimes(representation);\n    const cues = await generateAllCues(totalThumbnails, thumbnailDuration);\n    let track = this.nativeEl.querySelector('track[label=\"thumbnails\"]');\n    if (!track) {\n      track = createThumbnailTrack();\n      this.nativeEl.appendChild(track);\n      const vttUrl = cuesToVttBlobUrl(cues);\n      track.src = vttUrl;\n      track.dispatchEvent(new Event(\"change\"));\n    }\n  }\n  async load() {\n    if (this.#apiInit) {\n      this.api.attachSource(this.src);\n      return;\n    }\n    this.#apiInit = true;\n    const Dash = await import(\"dashjs\");\n    this.api = Dash.MediaPlayer().create();\n    this.api.initialize(this.nativeEl, this.src, this.autoplay);\n    this.api.on(Dash.MediaPlayer.events.STREAM_INITIALIZED, () => {\n      const bitrateList = this.api.getRepresentationsByType(\"video\");\n      let videoTrack = this.videoTracks.getTrackById(\"main\");\n      if (!videoTrack) {\n        videoTrack = this.addVideoTrack(\"main\");\n        videoTrack.id = \"main\";\n        videoTrack.selected = true;\n      }\n      bitrateList.forEach((rep) => {\n        const bitrate = rep.bandwidth ?? rep.bitrate ?? (Number.isFinite(rep.bitrateInKbit) ? rep.bitrateInKbit * 1e3 : void 0);\n        const rendition = videoTrack.addRendition(rep.id, rep.width, rep.height, rep.mimeType ?? rep.codec, bitrate);\n        rendition.id = rep.id;\n      });\n      this.videoRenditions.addEventListener(\"change\", () => {\n        const selected = this.videoRenditions[this.videoRenditions.selectedIndex];\n        if (selected == null ? void 0 : selected.id) {\n          this.api.updateSettings({ streaming: { abr: { autoSwitchBitrate: { video: false } } } });\n          this.api.setRepresentationForTypeById(\"video\", selected.id, true);\n        } else {\n          this.api.updateSettings({ streaming: { abr: { autoSwitchBitrate: { video: true } } } });\n        }\n      });\n      if (!this.api.isDynamic()) {\n        const imageReps = this.api.getRepresentationsByType(\"image\");\n        imageReps.forEach(async (rep, idx) => {\n          if (idx > 0) return;\n          this._initThumbnails(rep);\n        });\n      }\n    });\n  }\n}\nfunction calculateThumbnailTimes(representation) {\n  var _a, _b;\n  const essentialProp = representation.essentialProperties[0];\n  const [htiles, vtiles] = essentialProp.value.split(\"x\").map(Number);\n  const ttiles = htiles * vtiles;\n  const periodDuration = ((_b = (_a = representation.adaptation) == null ? void 0 : _a.period) == null ? void 0 : _b.duration) || null;\n  const tileDuration = representation.segmentDuration;\n  const timescale = representation.timescale || 1;\n  const tduration = tileDuration / timescale;\n  const thduration = tduration / ttiles;\n  const totalThumbnails = periodDuration != null ? Math.ceil(periodDuration / thduration) : Math.ceil(tileDuration / thduration);\n  return { totalThumbnails, thumbnailDuration: thduration };\n}\nfunction calculateThumbnailStartTime({ thIndex, tduration, thduration, ttiles, startNumber, pto }) {\n  const tnumber = Math.floor(thIndex / ttiles) + startNumber;\n  const thnumber = thIndex % ttiles + 1;\n  const tileStartTime = (tnumber - 1) * tduration - pto;\n  const thumbnailStartTime = (thnumber - 1) * thduration;\n  return tileStartTime + thumbnailStartTime;\n}\nfunction createThumbnailTrack() {\n  const track = document.createElement(\"track\");\n  track.kind = \"metadata\";\n  track.label = \"thumbnails\";\n  track.srclang = \"en\";\n  track.mode = \"hidden\";\n  track.default = true;\n  return track;\n}\nfunction cuesToVttBlobUrl(cues) {\n  let vtt = \"WEBVTT\\n\\n\";\n  for (const cue of cues) {\n    vtt += `${formatTime(cue.startTime)} --> ${formatTime(cue.endTime)}\n`;\n    vtt += `${cue.text}\n\n`;\n  }\n  const blob = new Blob([vtt], { type: \"text/vtt\" });\n  return URL.createObjectURL(blob);\n  function formatTime(t) {\n    const h = String(Math.floor(t / 3600)).padStart(2, \"0\");\n    const m = String(Math.floor(t % 3600 / 60)).padStart(2, \"0\");\n    const s = (t % 60).toFixed(3).padStart(6, \"0\");\n    return `${h}:${m}:${s}`;\n  }\n}\nif (globalThis.customElements && !globalThis.customElements.get(\"dash-video\")) {\n  globalThis.customElements.define(\"dash-video\", DashVideoElement);\n}\nvar dash_video_element_default = DashVideoElement;\nexport {\n  dash_video_element_default as default\n};\n","\"use client\";\n\n// dist/react.ts\nimport React from \"react\";\nimport CustomMediaElement from \"./dash-video-element.js\";\n\n// ../../node_modules/ce-la-react/dist/ce-la-react.js\nvar reservedReactProps = /* @__PURE__ */ new Set([\n  \"style\",\n  \"children\",\n  \"ref\",\n  \"key\",\n  \"suppressContentEditableWarning\",\n  \"suppressHydrationWarning\",\n  \"dangerouslySetInnerHTML\"\n]);\nvar reactPropToAttrNameMap = {\n  className: \"class\",\n  htmlFor: \"for\"\n};\nfunction defaultToAttributeName(propName) {\n  return propName.toLowerCase();\n}\nfunction defaultToAttributeValue(propValue) {\n  if (typeof propValue === \"boolean\") return propValue ? \"\" : void 0;\n  if (typeof propValue === \"function\") return void 0;\n  if (typeof propValue === \"object\" && propValue !== null) return void 0;\n  return propValue;\n}\nfunction createComponent({\n  react: React2,\n  tagName,\n  elementClass,\n  events,\n  displayName,\n  defaultProps,\n  toAttributeName = defaultToAttributeName,\n  toAttributeValue = defaultToAttributeValue\n}) {\n  const IS_REACT_19_OR_NEWER = Number.parseInt(React2.version) >= 19;\n  const ReactComponent = React2.forwardRef((props, ref) => {\n    var _a, _b;\n    const elementRef = React2.useRef(null);\n    const prevElemPropsRef = React2.useRef(/* @__PURE__ */ new Map());\n    const eventProps = {};\n    const attrs = {};\n    const reactProps = {};\n    const elementProps = {};\n    for (const [k, v] of Object.entries(props)) {\n      if (reservedReactProps.has(k)) {\n        reactProps[k] = v;\n        continue;\n      }\n      const attrName = toAttributeName(reactPropToAttrNameMap[k] ?? k);\n      if (elementClass.prototype && k in elementClass.prototype && !(k in (((_a = globalThis.HTMLElement) == null ? void 0 : _a.prototype) ?? {})) && !((_b = elementClass.observedAttributes) == null ? void 0 : _b.some((attr) => attr === attrName))) {\n        elementProps[k] = v;\n        continue;\n      }\n      if (k.startsWith(\"on\")) {\n        eventProps[k] = v;\n        continue;\n      }\n      const attrValue = toAttributeValue(v);\n      if (attrName && attrValue != null) {\n        attrs[attrName] = String(attrValue);\n        if (!IS_REACT_19_OR_NEWER) {\n          reactProps[attrName] = attrValue;\n        }\n      }\n      if (attrName && IS_REACT_19_OR_NEWER) {\n        const attrValueFromDefault = defaultToAttributeValue(v);\n        if (attrValue !== attrValueFromDefault) {\n          reactProps[attrName] = attrValue;\n        } else {\n          reactProps[attrName] = v;\n        }\n      }\n    }\n    if (typeof window !== \"undefined\") {\n      for (const propName in eventProps) {\n        const callback = eventProps[propName];\n        const useCapture = propName.endsWith(\"Capture\");\n        const eventName = ((events == null ? void 0 : events[propName]) ?? propName.slice(2).toLowerCase()).slice(\n          0,\n          useCapture ? -7 : void 0\n        );\n        React2.useLayoutEffect(() => {\n          const eventTarget = elementRef == null ? void 0 : elementRef.current;\n          if (!eventTarget || typeof callback !== \"function\") return;\n          eventTarget.addEventListener(eventName, callback, useCapture);\n          return () => {\n            eventTarget.removeEventListener(eventName, callback, useCapture);\n          };\n        }, [elementRef == null ? void 0 : elementRef.current, callback]);\n      }\n      React2.useLayoutEffect(() => {\n        if (elementRef.current === null) return;\n        const newElemProps = /* @__PURE__ */ new Map();\n        for (const key in elementProps) {\n          setProperty(elementRef.current, key, elementProps[key]);\n          prevElemPropsRef.current.delete(key);\n          newElemProps.set(key, elementProps[key]);\n        }\n        for (const [key, _value] of prevElemPropsRef.current) {\n          setProperty(elementRef.current, key, void 0);\n        }\n        prevElemPropsRef.current = newElemProps;\n      });\n    }\n    if (typeof window === \"undefined\" && (elementClass == null ? void 0 : elementClass.getTemplateHTML) && (elementClass == null ? void 0 : elementClass.shadowRootOptions)) {\n      const { mode, delegatesFocus } = elementClass.shadowRootOptions;\n      const templateShadowRoot = React2.createElement(\"template\", {\n        shadowrootmode: mode,\n        shadowrootdelegatesfocus: delegatesFocus,\n        dangerouslySetInnerHTML: {\n          __html: elementClass.getTemplateHTML(attrs, props)\n        },\n        key: \"ce-la-react-ssr-template-shadow-root\"\n      });\n      reactProps.children = [templateShadowRoot, reactProps.children];\n    }\n    return React2.createElement(tagName, {\n      ...defaultProps,\n      ...reactProps,\n      ref: React2.useCallback(\n        (node) => {\n          elementRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref !== null) {\n            ref.current = node;\n          }\n        },\n        [ref]\n      )\n    }, reactProps.children);\n  });\n  ReactComponent.displayName = displayName ?? elementClass.name;\n  return ReactComponent;\n}\nfunction setProperty(node, name, value) {\n  var _a;\n  node[name] = value;\n  if (value == null && name in (((_a = globalThis.HTMLElement) == null ? void 0 : _a.prototype) ?? {})) {\n    node.removeAttribute(name);\n  }\n}\n\n// dist/react.ts\nvar react_default = createComponent({\n  react: React,\n  tagName: \"dash-video\",\n  elementClass: CustomMediaElement,\n  toAttributeName(propName) {\n    if (propName === \"muted\") return \"\";\n    if (propName === \"defaultMuted\") return \"muted\";\n    return defaultToAttributeName(propName);\n  }\n});\nexport {\n  react_default as default\n};\n/*! Bundled license information:\n\nce-la-react/dist/ce-la-react.js:\n  (**\n   * @license\n   * Copyright 2018 Google LLC\n   * SPDX-License-Identifier: BSD-3-Clause\n   *\n   * Modified version of `@lit/react` for vanilla custom elements with support for SSR.\n   *)\n*/\n"],"names":["DashVideoElement","MediaTracksMixin","CustomVideoElement","__privateAdd","_apiInit","attrName","oldValue","newValue","representation","generateAllCues","totalThumbnails2","thumbnailDuration2","promises","timescale","startNumber","pto","tduration","thIndex","startTime","calculateThumbnailStartTime","endTime","promise","resolve","reject","url","width","height","x","y","cue","err","e","totalThumbnails","thumbnailDuration","calculateThumbnailTimes","cues","track","createThumbnailTrack","vttUrl","cuesToVttBlobUrl","__privateGet","__privateSet","Dash","bitrateList","videoTrack","rep","bitrate","rendition","selected","idx","__publicField","attrs","src","rest","_a","_b","essentialProp","htiles","vtiles","ttiles","periodDuration","tileDuration","thduration","tnumber","thnumber","tileStartTime","thumbnailStartTime","vtt","formatTime","blob","t","h","m","s","dash_video_element_default","reservedReactProps","reactPropToAttrNameMap","defaultToAttributeName","propName","defaultToAttributeValue","propValue","createComponent","React2","tagName","elementClass","events","displayName","defaultProps","toAttributeName","toAttributeValue","IS_REACT_19_OR_NEWER","ReactComponent","props","ref","elementRef","prevElemPropsRef","eventProps","reactProps","elementProps","k","v","attr","attrValue","attrValueFromDefault","callback","useCapture","eventName","eventTarget","newElemProps","key","setProperty","_value","mode","delegatesFocus","templateShadowRoot","node","name","value","react_default","React","CustomMediaElement"],"mappings":"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","x_google_ignoreList":[0,1]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.26.0",
+  "version": "1.26.1-rc-1776055454",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",
@@ -36,6 +36,7 @@
     "@linktr.ee/component-library": "*",
     "@linktr.ee/messaging-core": "^1.5.0",
     "@phosphor-icons/react": "^2.1.9",
+    "react-player": "^3.4.0",
     "stream-chat-react": "^13.12.0"
   },
   "devDependencies": {

package/src/components/ChannelView.test.tsx

@@ -54,8 +54,21 @@ vi.mock('./CustomDateSeparator', () => ({
   CustomDateSeparator: () => <div data-testid="custom-date-separator" />,
 }))
 
+vi.mock('./ChannelInfoDialog', () => ({
+  ChannelInfoDialog: () => <div data-testid="channel-info-dialog" />,
+}))
+
+const avatarRenderCalls: Array<Record<string, unknown>> = []
 vi.mock('./Avatar', () => ({
-  Avatar: () => <div data-testid="avatar" />,
+  Avatar: (props: Record<string, unknown>) => {
+    avatarRenderCalls.push({ ...props })
+    return <div data-testid="avatar" />
+  },
+}))
+
+let mockIsStarred = false
+vi.mock('../hooks/useChannelStar', () => ({
+  useChannelStar: () => mockIsStarred,
 }))
 
 const createChannel = () =>
@@ -83,6 +96,8 @@ const createChannel = () =>
 describe('ChannelView', () => {
   beforeEach(() => {
     activeChannel = undefined
+    avatarRenderCalls.length = 0
+    mockIsStarred = false
   })
 
   it('renders conversation footer between message list and message input', () => {
@@ -122,6 +137,40 @@ describe('ChannelView', () => {
     expect(screen.queryByTestId('conversation-footer')).not.toBeInTheDocument()
   })
 
+  it('does not pass starred to avatar when showStarButton is false', () => {
+    mockIsStarred = true
+    const channel = createChannel()
+
+    renderWithProviders(
+      <ChannelView channel={channel} showStarButton={false} />
+    )
+
+    expect(avatarRenderCalls.length).toBeGreaterThan(0)
+    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+  })
+
+  it('passes starred to avatar when showStarButton is true and channel is starred', () => {
+    mockIsStarred = true
+    const channel = createChannel()
+
+    renderWithProviders(
+      <ChannelView channel={channel} showStarButton={true} />
+    )
+
+    expect(avatarRenderCalls.length).toBeGreaterThan(0)
+    expect(avatarRenderCalls.every((call) => call.starred === true)).toBe(true)
+  })
+
+  it('does not pass starred to avatar by default (showStarButton defaults to false)', () => {
+    mockIsStarred = true
+    const channel = createChannel()
+
+    renderWithProviders(<ChannelView channel={channel} />)
+
+    expect(avatarRenderCalls.length).toBeGreaterThan(0)
+    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+  })
+
   it('keeps channel banner and input action renderers working', () => {
     const channel = createChannel()
     const renderMessageInputActions = vi.fn((currentChannel: Channel) => (

package/src/components/ChannelView.tsx

@@ -5,7 +5,7 @@ import {
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useRef } from 'react'
-import { Channel as ChannelType } from 'stream-chat'
+import { Channel as ChannelType, LocalMessage } from 'stream-chat'
 import {
   Channel,
   Window,
@@ -97,7 +97,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
-            starred={isStarred}
+            starred={showStarButton && isStarred}
             size={40}
           />
           <h1 className="text-xs font-medium text-black/90">
@@ -150,7 +150,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
-            starred={isStarred}
+            starred={showStarButton && isStarred}
             size={40}
           />
           <div className="min-w-0">
@@ -211,6 +211,8 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick?: () => void
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
+  onAttachmentUnlock?: (message: LocalMessage, channel: ChannelType) => Promise<string>
+  onAttachmentDownload?: (message: LocalMessage, channel: ChannelType) => void
   renderChannelBanner?: () => React.ReactNode
   customProfileContent?: React.ReactNode
   customChannelActions?: React.ReactNode
@@ -231,6 +233,8 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick,
   showStarButton = false,
   chatbotVotingEnabled = false,
+  onAttachmentUnlock,
+  onAttachmentDownload,
   renderChannelBanner,
   customProfileContent,
   customChannelActions,
@@ -286,6 +290,8 @@ const ChannelViewInner: React.FC<{
               <CustomMessage
                 {...props}
                 chatbotVotingEnabled={chatbotVotingEnabled}
+                onAttachmentUnlock={onAttachmentUnlock}
+                onAttachmentDownload={onAttachmentDownload}
               />
             )
 
@@ -373,6 +379,8 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onMessageSent,
     showStarButton = false,
     chatbotVotingEnabled = false,
+    onAttachmentUnlock,
+    onAttachmentDownload,
     renderChannelBanner,
     customProfileContent,
     customChannelActions,
@@ -451,6 +459,8 @@ export const ChannelView = React.memo<ChannelViewProps>(
             onReportParticipantClick={onReportParticipantClick}
             showStarButton={showStarButton}
             chatbotVotingEnabled={chatbotVotingEnabled}
+            onAttachmentUnlock={onAttachmentUnlock}
+            onAttachmentDownload={onAttachmentDownload}
             renderChannelBanner={renderChannelBanner}
             customProfileContent={customProfileContent}
             customChannelActions={customChannelActions}

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -93,8 +93,13 @@ interface TemplateProps {
     type?: 'regular' | 'system'
     attachments?: Array<Record<string, unknown>>
     metadata?: {
-      custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+      custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | 'MESSAGE_ATTACHMENT'
       amount_text?: string
+      attachment_title?: string
+      attachment_mime_type?: string
+
+      attachment_thumbnail?: string
+      attachment_detail?: string
     }
   }>
 }
@@ -113,6 +118,17 @@ const Template: StoryFn<TemplateProps> = ({ messages }) => {
     createMockChannel(client, messages).then(setChannel)
   }, [client, messages])
 
+  const MessageComponent = React.useMemo(() => {
+    const AttachmentMessage = (props: React.ComponentProps<typeof CustomMessage>) => (
+      <CustomMessage
+        {...props}
+        onAttachmentUnlock={async (msg) => { await new Promise(resolve => setTimeout(resolve, 1500)); return `https://example.com/unlocked/${msg.metadata?.attachment_title}` }}
+        onAttachmentDownload={(msg) => alert(`Download: ${msg.metadata?.attachment_title}`)}
+      />
+    )
+    return AttachmentMessage
+  }, [])
+
   if (!channel) {
     return <div className="p-4">Loading...</div>
   }
@@ -120,7 +136,7 @@ const Template: StoryFn<TemplateProps> = ({ messages }) => {
   return (
     <Chat client={client}>
       <div className="h-screen w-full bg-white">
-        <Channel channel={channel} Message={CustomMessage}>
+        <Channel channel={channel} Message={MessageComponent}>
           <Window>
             <MessageList />
           </Window>
@@ -208,6 +224,49 @@ MixedTags.args = {
   ],
 }
 
+export const PaidAttachment: StoryFn<TemplateProps> = Template.bind({})
+PaidAttachment.args = {
+  messages: [
+    { id: 'msg-1', text: 'Can I have your workout plan?', user: mockUser },
+    { id: 'msg-2', text: 'Yes! I just uploaded it for you 🎉', user: participant },
+    {
+      id: 'msg-3',
+      text: '',
+      user: participant,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$9.99',
+        attachment_title: "Alicia's Workout Plan",
+        attachment_mime_type: 'video/mp4',
+        attachment_thumbnail: '/video-thumbnail-blurred.jpg',
+        attachment_detail: '1:20',
+      },
+    },
+    { id: 'msg-4', text: 'Looks amazing, unlocking now!', user: mockUser },
+  ],
+}
+
+export const PaidAttachmentWithText: StoryFn<TemplateProps> = Template.bind({})
+PaidAttachmentWithText.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Hey! I just uploaded something for you 🎉',
+      user: participant,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$9.99',
+        attachment_title: "Alicia's Workout Plan",
+        attachment_mime_type: 'video/mp4',
+        attachment_thumbnail: '/video-thumbnail-blurred.jpg',
+        attachment_detail: '1:20',
+      },
+    },
+    { id: 'msg-2', text: 'Unlock it to get access!', user: participant },
+    { id: 'msg-3', text: 'Looks amazing, unlocking now!', user: mockUser },
+  ],
+}
+
 export const ChatbotVariants: StoryFn<TemplateProps> = Template.bind({})
 ChatbotVariants.args = {
   messages: [

package/src/components/CustomMessage/MessageTag.tsx

@@ -42,6 +42,11 @@ export const isChatbotMessage = (message: LocalMessage): boolean => {
   return message.metadata?.custom_type === 'MESSAGE_CHATBOT'
 }
 
+/** Check if a message is a locked attachment */
+export const isAttachmentMessage = (message: LocalMessage): boolean => {
+  return message.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
+}
+
 /** Check if a message has a tip/paid tag (both render the same) */
 export const isTipOrPaidMessage = (message: LocalMessage): boolean => {
   return isTipMessage(message) || isPaidMessage(message)

package/src/components/CustomMessage/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import React, { useMemo, useState } from 'react'
+import { type Channel, type LocalMessage } from 'stream-chat'
 import {
   Attachment as DefaultAttachment,
   EditMessageModal as DefaultEditMessageModal,
@@ -20,6 +21,7 @@ import {
   isMessageBounced,
   messageHasAttachments,
   messageHasReactions,
+  useChannelStateContext,
   useComponentContext,
   useChatContext,
   useMessageContext,
@@ -30,18 +32,23 @@ import {
 
 import { useMessageVote } from '../../hooks/useMessageVote'
 import { Avatar } from '../Avatar'
+import LockedAttachmentCard from '../LockedAttachmentCard'
 
-import { MessageTag, isChatbotMessage, isTipOnlyMessage } from './MessageTag'
+import { MessageTag, isAttachmentMessage, isChatbotMessage, isTipOnlyMessage } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
 
 type CustomMessageWithContextProps = MessageContextValue & {
   chatbotVotingEnabled?: boolean
+  onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<string>
+  onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const {
     additionalMessageInputProps,
     chatbotVotingEnabled,
+    onAttachmentUnlock,
+    onAttachmentDownload,
     editing,
     endOfGroup,
     firstOfGroup,
@@ -58,7 +65,10 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   } = props
 
   const { client } = useChatContext('CustomMessage')
+  const { channel } = useChannelStateContext('CustomMessage')
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false)
+  const [unlocking, setUnlocking] = useState(false)
+  const [attachmentSource, setAttachmentSource] = useState<string | undefined>(undefined)
   const reminder = useMessageReminder(message.id)
   const { selected: voteState, voteUp, voteDown } = useMessageVote(message)
 
@@ -144,6 +154,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const poll = message.poll_id && client.polls.fromState(message.poll_id)
   const isTipOnly = isTipOnlyMessage(message)
   const isChatbot = isChatbotMessage(message)
+  const isAttachment = isAttachmentMessage(message)
   const hasRenderableAttachments = !!(
     finalAttachments?.length && !message.quoted_message
   )
@@ -192,7 +203,29 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isTipOnly ? (
+          {isAttachment ? (
+            <div className="flex flex-col gap-1">
+              <LockedAttachmentCard
+                title={message.metadata?.attachment_title ?? ''}
+                mimeType={message.metadata?.attachment_mime_type ?? 'application/octet-stream'}
+                thumbnail={message.metadata?.attachment_thumbnail}
+                amountText={message.metadata?.amount_text}
+                detail={message.metadata?.attachment_detail}
+                source={attachmentSource}
+                isPurchased={message.metadata?.payment_status === 'paid'}
+                loading={unlocking}
+                onUnlock={onAttachmentUnlock ? async () => { setUnlocking(true); try { setAttachmentSource(await onAttachmentUnlock(message, channel)) } catch { /* caller handles errors (e.g. payment cancellation) */ } finally { setUnlocking(false) } } : undefined}
+                onDownload={attachmentSource && onAttachmentDownload ? () => onAttachmentDownload(message, channel) : undefined}
+              />
+              {message.text && (
+                <div className="str-chat__message-bubble-wrapper">
+                  <div className="str-chat__message-bubble">
+                    <MessageText message={message} renderText={renderText} />
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : isTipOnly ? (
             /* Tip-only messages render as a standalone bubble */
             <MessageTag message={message} standalone />
           ) : (
@@ -256,11 +289,20 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
 
 const MemoizedCustomMessage = React.memo(
   CustomMessageWithContext,
-  areMessageUIPropsEqual
+  (prev, next) => {
+    if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
+    if (prev.onAttachmentUnlock !== next.onAttachmentUnlock) return false
+    if (prev.onAttachmentDownload !== next.onAttachmentDownload) return false
+    return areMessageUIPropsEqual(prev, next)
+  }
 ) as typeof CustomMessageWithContext
 
 export const CustomMessage = (
-  props: MessageUIComponentProps & { chatbotVotingEnabled?: boolean }
+  props: MessageUIComponentProps & {
+    chatbotVotingEnabled?: boolean
+    onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<string>
+    onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void
+  }
 ) => {
   const messageContext = useMessageContext('CustomMessage')
   return <MemoizedCustomMessage {...messageContext} {...props} />