@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.3

package/es/Video/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Video/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { videoMarker } from './marker.stylex';\n\nexport const maskHoverCls = 'lobe-video-mask';\n\nexport const styles = stylex.create({\n  filled: {\n    borderColor: cssVar.colorBorderSecondary,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorFillTertiary,\n  },\n  mask: {\n    inset: 0,\n    transition: 'opacity 0.2s ease',\n    backgroundColor: cssVar.colorBgMask,\n    opacity: { default: 0, [stylex.when.ancestor(':hover', videoMarker)]: 1 },\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 1,\n    height: '100%',\n    width: '100%',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    overflow: 'hidden',\n    backgroundColor: cssVar.colorFillTertiary,\n    marginBlockEnd: '1em',\n    marginBlockStart: 0,\n    position: 'relative',\n    height: 'auto',\n    maxHeight: 'var(--video-max-height, 100%)',\n    maxWidth: 'var(--video-max-width, 100%)',\n    minHeight: 'var(--video-min-height, unset)',\n    minWidth: 'var(--video-min-width, unset)',\n    width: '100%',\n  },\n  video: {\n    cursor: 'pointer',\n    width: '100%',\n  },\n});\n"],"mappings":";AAKA,MAAa,eAAe;AAC5B,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Video/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst chromeBar = '#151515';\n\nconst labelFromBelow = stylex.keyframes({\n  from: { opacity: 0, transform: 'translateY(70%)' },\n  to: { opacity: 1, transform: 'none' },\n});\nconst labelFromAbove = stylex.keyframes({\n  from: { opacity: 0, transform: 'translateY(-70%)' },\n  to: { opacity: 1, transform: 'none' },\n});\n\n// The chrome stays dark in both themes: it sits on the black letterbox and\n// must not flash white around a dark recording.\nexport const styles = stylex.create({\n  barButton: {\n    padding: 0,\n    borderRadius: 6,\n    borderStyle: 'none',\n    flex: 'none',\n    outline: { 'default': 'none', ':focus-visible': '2px solid rgb(255 255 255 / 60%)' },\n    alignItems: 'center',\n    backgroundColor: {\n      'default': 'transparent',\n      ':hover': 'rgb(255 255 255 / 12%)',\n    },\n    color: 'inherit',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    fontSize: 12,\n    justifyContent: 'center',\n    height: 28,\n    minWidth: 28,\n  },\n  barButtonActive: {\n    backgroundColor: 'rgb(255 255 255 / 18%)',\n  },\n  caption: {\n    borderRadius: 8,\n    paddingBlock: 8,\n    paddingInline: 12,\n    transition: { default: 'inset-block-end 200ms ease', [reducedMotion]: 'none' },\n    backgroundColor: 'rgb(0 0 0 / 78%)',\n    color: '#fff',\n    fontSize: 13,\n    insetBlockEnd: 16,\n    insetInlineStart: 16,\n    lineHeight: 1.5,\n    position: 'absolute',\n    zIndex: 2,\n    maxWidth: '70%',\n  },\n  captionItem: {\n    marginBlockStart: { 'default': 8, ':first-child': 0 },\n  },\n  captionRaised: {\n    insetBlockEnd: 76,\n  },\n  captionTitle: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    fontWeight: 600,\n  },\n  centerPlay: {\n    borderRadius: '50%',\n    borderStyle: 'none',\n    alignItems: 'center',\n    backgroundColor: 'rgb(0 0 0 / 55%)',\n    color: '#fff',\n    cursor: 'pointer',\n    display: 'flex',\n    insetBlockStart: '50%',\n    insetInlineStart: '50%',\n    justifyContent: 'center',\n    position: 'absolute',\n    transform: 'translate(-50%, -50%)',\n    zIndex: 2,\n    height: 56,\n    width: 56,\n  },\n  chip: {\n    borderRadius: 6,\n    borderStyle: 'none',\n    gap: 2,\n    overflow: 'hidden',\n    alignItems: 'center',\n    backgroundColor: { 'default': 'rgb(255 255 255 / 10%)', ':hover': 'rgb(255 255 255 / 16%)' },\n    color: 'inherit',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    fontSize: 12,\n    paddingInlineEnd: 4,\n    paddingInlineStart: 8,\n    height: 24,\n    maxWidth: '40%',\n    minWidth: 0,\n  },\n  chipLabelBackward: {\n    animationDuration: { default: '220ms', [reducedMotion]: '0s' },\n    animationName: labelFromAbove,\n    animationTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',\n  },\n  chipLabelForward: {\n    animationDuration: { default: '220ms', [reducedMotion]: '0s' },\n    animationName: labelFromBelow,\n    animationTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',\n  },\n  chipText: {\n    overflow: 'hidden',\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  controls: {\n    paddingInline: 12,\n    color: '#fff',\n    paddingBlockEnd: 6,\n  },\n  controlsBelow: {\n    backgroundColor: chromeBar,\n    paddingBlockStart: 6,\n  },\n  controlsHidden: {\n    opacity: 0,\n    pointerEvents: 'none',\n  },\n  controlsOverlay: {\n    insetInline: 0,\n    transition: { default: 'opacity 200ms ease', [reducedMotion]: 'none' },\n    backgroundImage: 'linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 72%))',\n    insetBlockEnd: 0,\n    paddingBlockStart: 40,\n    position: 'absolute',\n    zIndex: 3,\n  },\n  disabled: {\n    opacity: 0.4,\n    pointerEvents: 'none',\n  },\n  dot: {\n    borderRadius: '50%',\n    flex: 'none',\n    height: 6,\n    width: 6,\n  },\n  error: {\n    inset: 0,\n    gap: 10,\n    alignItems: 'center',\n    backgroundColor: '#000',\n    color: '#ccc',\n    display: 'flex',\n    flexDirection: 'column',\n    fontSize: 13,\n    justifyContent: 'center',\n    position: 'absolute',\n    zIndex: 4,\n  },\n  errorActions: {\n    gap: 8,\n    display: 'flex',\n  },\n  errorButton: {\n    borderColor: 'rgb(255 255 255 / 20%)',\n    borderRadius: 6,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 6,\n    paddingInline: 10,\n    textDecoration: 'none',\n    alignItems: 'center',\n    backgroundColor: { 'default': 'rgb(255 255 255 / 8%)', ':hover': 'rgb(255 255 255 / 14%)' },\n    color: '#fff',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    fontSize: 12,\n    height: 28,\n  },\n  frame: {\n    overflow: 'hidden',\n    backgroundColor: '#000',\n    position: 'relative',\n    width: '100%',\n  },\n  frameNo: {\n    color: '#8a8a8a',\n    fontFamily: cssVar.fontFamilyCode,\n    fontVariantNumeric: 'tabular-nums',\n    whiteSpace: 'nowrap',\n  },\n  hairline: {\n    backgroundColor: 'rgb(0 0 0 / 55%)',\n    insetBlockStart: 8,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: 4,\n    width: 1,\n  },\n  head: {\n    borderRadius: '50%',\n    backgroundColor: '#fff',\n    insetBlockStart: 4,\n    marginInlineStart: -6,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: 12,\n    width: 12,\n  },\n  marker: {\n    padding: 0,\n    borderColor: 'rgb(0 0 0 / 60%)',\n    borderRadius: '50%',\n    borderStyle: 'solid',\n    borderWidth: 1.5,\n    outline: { 'default': 'none', ':focus-visible': '2px solid #fff' },\n    transition: { default: 'transform 120ms ease', [reducedMotion]: 'none' },\n    cursor: 'pointer',\n    insetBlockStart: -2,\n    marginInlineStart: -5,\n    position: 'absolute',\n    transform: { 'default': null, ':hover': 'scale(1.3)' },\n    zIndex: 1,\n    height: 10,\n    width: 10,\n  },\n  preview: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    insetBlockEnd: 24,\n    marginInlineStart: -88,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 2,\n    width: 176,\n  },\n  previewCanvas: {\n    borderColor: '#333',\n    borderRadius: 8,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: '#000',\n    display: 'block',\n    height: 99,\n    width: 176,\n  },\n  previewLabel: {\n    borderRadius: 6,\n    overflow: 'hidden',\n    paddingBlock: 3,\n    paddingInline: 8,\n    backgroundColor: 'rgb(0 0 0 / 82%)',\n    fontSize: 12,\n    lineHeight: 1.4,\n    textAlign: 'center',\n    textOverflow: 'ellipsis',\n    maxWidth: 176,\n  },\n  previewTime: {\n    color: '#ddd',\n    fontFamily: cssVar.fontFamilyCode,\n    fontSize: 11,\n  },\n  previewTitle: {\n    fontWeight: 600,\n    whiteSpace: 'nowrap',\n  },\n  root: {\n    borderRadius: cssVar.borderRadiusLG,\n    outline: 'none',\n    overflow: 'hidden',\n    backgroundColor: '#000',\n    boxShadow: { 'default': null, ':focus-visible': `0 0 0 2px ${cssVar.colorPrimaryBorder}` },\n    color: '#fff',\n    lineHeight: 1,\n    position: 'relative',\n    maxWidth: '100%',\n  },\n  rateButton: {\n    paddingInline: 6,\n    fontFamily: cssVar.fontFamilyCode,\n  },\n  row: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    fontSize: 12,\n    height: 32,\n  },\n  sectionChip: {\n    borderColor: 'rgb(255 255 255 / 14%)',\n    borderRadius: 6,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 6,\n    outline: { 'default': 'none', ':focus-visible': '2px solid rgb(255 255 255 / 60%)' },\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: { 'default': 'transparent', ':hover': 'rgb(255 255 255 / 8%)' },\n    color: { 'default': '#bbb', ':hover': '#fff' },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    fontSize: 12,\n    height: 24,\n  },\n  sectionChipActive: {\n    backgroundColor: 'rgb(255 255 255 / 16%)',\n    color: '#fff',\n  },\n  sectionChipTime: {\n    fontFamily: cssVar.fontFamilyCode,\n    opacity: 0.7,\n  },\n  sectionList: {\n    gap: 6,\n    paddingBlock: 8,\n    paddingInline: 12,\n    backgroundColor: '#151515',\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  segment: {\n    borderRadius: 2,\n    overflow: 'hidden',\n    transition: {\n      default: 'height 120ms ease, inset-block-start 120ms ease',\n      [reducedMotion]: 'none',\n    },\n    backgroundColor: 'rgb(255 255 255 / 24%)',\n    insetBlockStart: 8,\n    position: 'absolute',\n    height: 4,\n  },\n  segmentFill: {\n    insetBlock: 0,\n    insetInlineStart: 0,\n    position: 'absolute',\n  },\n  segmentHovered: {\n    insetBlockStart: 6,\n    height: 8,\n  },\n  spacer: {\n    flex: '1',\n  },\n  surface: {\n    inset: 0,\n    cursor: 'pointer',\n    position: 'absolute',\n  },\n  time: {\n    color: '#ddd',\n    fontFamily: cssVar.fontFamilyCode,\n    fontVariantNumeric: 'tabular-nums',\n    whiteSpace: 'nowrap',\n  },\n  track: {\n    outline: 'none',\n    cursor: 'pointer',\n    position: 'relative',\n    touchAction: 'none',\n    height: 20,\n  },\n  video: {\n    display: 'block',\n    objectFit: 'contain',\n    height: '100%',\n    width: '100%',\n  },\n});\n\nexport const markerColor = (color?: string) => {\n  switch (color) {\n    case undefined:\n    case 'info': {\n      return cssVar.colorInfo;\n    }\n    case 'success': {\n      return cssVar.colorSuccess;\n    }\n    case 'warning': {\n      return cssVar.colorWarning;\n    }\n    case 'error': {\n      return cssVar.colorError;\n    }\n    default: {\n      return color;\n    }\n  }\n};\n"],"mappings":"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"}

package/es/Video/time.mjs

@@ -0,0 +1,60 @@
+const pad = (value) => String(value).padStart(2, "0");
+const formatTime = (seconds) => {
+	const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const rest = total % 60;
+	return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;
+};
+const frameOf = (seconds, fps) => Math.floor(seconds * fps + 1e-6);
+const steppedTime = (current, frames, duration, fps) => Math.min(Math.max((frameOf(current, fps) + frames + .5) / fps, 0), duration);
+const sortSections = (sections) => [...sections].sort((a, b) => a.start - b.start);
+const sectionAt = (sorted, time) => sorted.findLast((section) => section.start <= time + .01);
+const markersAt = (markers, time, fps) => {
+	let latest;
+	for (const marker of markers) {
+		if (marker.content === void 0 || marker.content === null) continue;
+		if (time >= marker.time - .5 / fps && time < marker.time + 2 && (latest === void 0 || marker.time > latest)) latest = marker.time;
+	}
+	if (latest === void 0) return [];
+	return markers.filter((marker) => marker.time === latest && marker.content !== void 0 && marker.content !== null);
+};
+const mergeSegments = (sorted, duration, trackPx, minPx = 12) => {
+	if (!(duration > 0)) return {
+		hairlines: [],
+		segments: []
+	};
+	const bounds = [
+		0,
+		...[...new Set(sorted.map((s) => s.start).filter((start) => start > 0 && start < duration))],
+		duration
+	];
+	const segments = [];
+	const hairlines = [];
+	const minSeconds = trackPx > 0 ? minPx / trackPx * duration : 0;
+	let carry = false;
+	for (let i = 0; i < bounds.length - 1; i++) {
+		const raw = {
+			end: bounds[i + 1],
+			start: bounds[i]
+		};
+		const narrow = raw.end - raw.start < minSeconds;
+		const last = segments.at(-1);
+		if (last && (narrow || carry)) {
+			last.end = raw.end;
+			hairlines.push(raw.start);
+			carry = false;
+			continue;
+		}
+		segments.push(raw);
+		carry = narrow;
+	}
+	return {
+		hairlines,
+		segments
+	};
+};
+//#endregion
+export { formatTime, frameOf, markersAt, mergeSegments, sectionAt, sortSections, steppedTime };
+
+//# sourceMappingURL=time.mjs.map

package/es/Video/time.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.mjs","names":[],"sources":["../../src/Video/time.ts"],"sourcesContent":["import type { VideoMarker, VideoSection } from './type';\n\nexport const CAPTION_SECONDS = 2;\nexport const MIN_SEGMENT_PX = 12;\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\nexport const formatTime = (seconds: number) => {\n  const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;\n  const hours = Math.floor(total / 3600);\n  const minutes = Math.floor((total % 3600) / 60);\n  const rest = total % 60;\n  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;\n};\n\n// The epsilon absorbs float error at exact frame boundaries.\nexport const frameOf = (seconds: number, fps: number) => Math.floor(seconds * fps + 1e-6);\n\n// Landing on frame centres means repeated steps never skip a frame or show one twice.\nexport const steppedTime = (current: number, frames: number, duration: number, fps: number) =>\n  Math.min(Math.max((frameOf(current, fps) + frames + 0.5) / fps, 0), duration);\n\nexport const sortSections = (sections: VideoSection[]) =>\n  [...sections].sort((a, b) => a.start - b.start);\n\nexport const sectionAt = (sorted: VideoSection[], time: number) =>\n  sorted.findLast((section) => section.start <= time + 0.01);\n\nexport const markersAt = (markers: VideoMarker[], time: number, fps: number): VideoMarker[] => {\n  let latest: number | undefined;\n  for (const marker of markers) {\n    if (marker.content === undefined || marker.content === null) continue;\n    const onScreen = time >= marker.time - 0.5 / fps && time < marker.time + CAPTION_SECONDS;\n    if (onScreen && (latest === undefined || marker.time > latest)) latest = marker.time;\n  }\n  if (latest === undefined) return [];\n  return markers.filter(\n    (marker) => marker.time === latest && marker.content !== undefined && marker.content !== null,\n  );\n};\n\nexport interface Segment {\n  end: number;\n  start: number;\n}\n\nexport const mergeSegments = (\n  sorted: VideoSection[],\n  duration: number,\n  trackPx: number,\n  minPx = MIN_SEGMENT_PX,\n): { hairlines: number[]; segments: Segment[] } => {\n  if (!(duration > 0)) return { hairlines: [], segments: [] };\n\n  const cuts = [\n    ...new Set(sorted.map((s) => s.start).filter((start) => start > 0 && start < duration)),\n  ];\n  const bounds = [0, ...cuts, duration];\n  const segments: Segment[] = [];\n  const hairlines: number[] = [];\n  const minSeconds = trackPx > 0 ? (minPx / trackPx) * duration : 0;\n  let carry = false;\n\n  for (let i = 0; i < bounds.length - 1; i++) {\n    const raw = { end: bounds[i + 1], start: bounds[i] };\n    const narrow = raw.end - raw.start < minSeconds;\n    const last = segments.at(-1);\n    if (last && (narrow || carry)) {\n      last.end = raw.end;\n      hairlines.push(raw.start);\n      carry = false;\n      continue;\n    }\n    segments.push(raw);\n    carry = narrow;\n  }\n\n  return { hairlines, segments };\n};\n"],"mappings":"AAKA,MAAM,OAAO,UAAkB,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;AAE5D,MAAa,cAAc,YAAoB;CAC7C,MAAM,QAAQ,OAAO,SAAS,OAAO,KAAK,UAAU,IAAI,KAAK,MAAM,OAAO,IAAI;CAC9E,MAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI;CACrC,MAAM,UAAU,KAAK,MAAO,QAAQ,OAAQ,EAAE;CAC9C,MAAM,OAAO,QAAQ;CACrB,OAAO,QAAQ,IAAI,GAAG,MAAM,GAAG,IAAI,OAAO,EAAE,GAAG,IAAI,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI,IAAI;AACrF;AAGA,MAAa,WAAW,SAAiB,QAAgB,KAAK,MAAM,UAAU,MAAM,IAAI;AAGxF,MAAa,eAAe,SAAiB,QAAgB,UAAkB,QAC7E,KAAK,IAAI,KAAK,KAAK,QAAQ,SAAS,GAAG,IAAI,SAAS,MAAO,KAAK,CAAC,GAAG,QAAQ;AAE9E,MAAa,gBAAgB,aAC3B,CAAC,GAAG,QAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AAEhD,MAAa,aAAa,QAAwB,SAChD,OAAO,UAAU,YAAY,QAAQ,SAAS,OAAO,GAAI;AAE3D,MAAa,aAAa,SAAwB,MAAc,QAA+B;CAC7F,IAAI;CACJ,KAAK,MAAM,UAAU,SAAS;EAC5B,IAAI,OAAO,YAAY,KAAA,KAAa,OAAO,YAAY,MAAM;EAE7D,IADiB,QAAQ,OAAO,OAAO,KAAM,OAAO,OAAO,OAAO,OAAA,MACjD,WAAW,KAAA,KAAa,OAAO,OAAO,SAAS,SAAS,OAAO;CAClF;CACA,IAAI,WAAW,KAAA,GAAW,OAAO,CAAC;CAClC,OAAO,QAAQ,QACZ,WAAW,OAAO,SAAS,UAAU,OAAO,YAAY,KAAA,KAAa,OAAO,YAAY,IAC3F;AACF;AAOA,MAAa,iBACX,QACA,UACA,SACA,QAAA,OACiD;CACjD,IAAI,EAAE,WAAW,IAAI,OAAO;EAAE,WAAW,CAAC;EAAG,UAAU,CAAC;CAAE;CAK1D,MAAM,SAAS;EAAC;EAAG,GAAG,CAFpB,GAAG,IAAI,IAAI,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,UAAU,QAAQ,KAAK,QAAQ,QAAQ,CAAC,CAE/D;EAAG;CAAQ;CACpC,MAAM,WAAsB,CAAC;CAC7B,MAAM,YAAsB,CAAC;CAC7B,MAAM,aAAa,UAAU,IAAK,QAAQ,UAAW,WAAW;CAChE,IAAI,QAAQ;CAEZ,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,SAAS,GAAG,KAAK;EAC1C,MAAM,MAAM;GAAE,KAAK,OAAO,IAAI;GAAI,OAAO,OAAO;EAAG;EACnD,MAAM,SAAS,IAAI,MAAM,IAAI,QAAQ;EACrC,MAAM,OAAO,SAAS,GAAG,EAAE;EAC3B,IAAI,SAAS,UAAU,QAAQ;GAC7B,KAAK,MAAM,IAAI;GACf,UAAU,KAAK,IAAI,KAAK;GACxB,QAAQ;GACR;EACF;EACA,SAAS,KAAK,GAAG;EACjB,QAAQ;CACV;CAEA,OAAO;EAAE;EAAW;CAAS;AAC/B"}

package/es/Video/type.d.mts

@@ -0,0 +1,125 @@
+import { CSSProperties, Key, ReactEventHandler, ReactNode, Ref } from "react";
+//#region src/Video/type.d.ts
+export interface VideoSection {
+  start: number;
+  title: string;
+}
+export type VideoMarkerColor = 'success' | 'warning' | 'error' | 'info' | (string & {});
+export interface VideoMarker {
+  color?: VideoMarkerColor;
+  content?: ReactNode;
+  key?: Key;
+  label?: ReactNode;
+  time: number;
+}
+export type VideoStatus = 'loading' | 'ready' | 'error';
+export interface VideoState {
+  activeMarkers: VideoMarker[];
+  activeSection?: VideoSection;
+  captions: boolean;
+  duration: number;
+  muted: boolean;
+  paused: boolean;
+  rate: number;
+  size?: {
+    height: number;
+    width: number;
+  };
+  status: VideoStatus;
+  time: number;
+}
+export interface VideoPlayer {
+  getState: () => VideoState;
+  pause: () => void;
+  play: () => Promise<void>;
+  requestFullscreen: () => Promise<void>;
+  readonly root: HTMLDivElement | null;
+  seek: (seconds: number) => void;
+  setCaptions: (captions: boolean) => void;
+  setMuted: (muted: boolean) => void;
+  setRate: (rate: number) => void;
+  step: (frames: number) => void;
+  subscribe: (listener: (state: VideoState) => void) => () => void;
+  toggle: () => void;
+  toggleMute: () => void;
+  readonly video: HTMLVideoElement | null;
+}
+export interface VideoMediaProps {
+  autoPlay?: boolean;
+  loop?: boolean;
+  onEnded?: ReactEventHandler<HTMLVideoElement>;
+  onError?: ReactEventHandler<HTMLVideoElement>;
+  onPause?: ReactEventHandler<HTMLVideoElement>;
+  onPlay?: ReactEventHandler<HTMLVideoElement>;
+  onTimeUpdate?: ReactEventHandler<HTMLVideoElement>;
+  poster?: string;
+  preload?: HTMLVideoElement['preload'];
+  src: string;
+}
+export interface VideoRootProps extends VideoMediaProps {
+  captions?: boolean;
+  children?: ReactNode;
+  className?: string;
+  defaultPlaybackRate?: number;
+  fps?: number;
+  height?: number | string;
+  markers?: VideoMarker[];
+  maxHeight?: number;
+  muted?: boolean;
+  onMarkerClick?: (marker: VideoMarker) => void;
+  onMutedChange?: (muted: boolean) => void;
+  onRateChange?: (rate: number) => void;
+  onRetry?: () => Promise<unknown> | void;
+  playbackRates?: number[];
+  player?: VideoPlayer;
+  ref?: Ref<VideoPlayer>;
+  sections?: VideoSection[];
+  style?: CSSProperties;
+  width?: number | string;
+}
+export interface VideoTimelineProps {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  thumbnails?: boolean;
+}
+export interface VideoControlsProps {
+  children?: ReactNode;
+  className?: string;
+  extra?: ReactNode;
+  frameStep?: boolean;
+  style?: CSSProperties;
+}
+export interface VideoCaptionProps {
+  action?: (marker: VideoMarker) => ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export interface VideoFrameProps {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export interface VideoSectionListProps {
+  className?: string;
+  style?: CSSProperties;
+}
+export interface VideoProps extends Omit<VideoRootProps, 'children'> {
+  classNames?: {
+    controls?: string;
+    frame?: string;
+    root?: string;
+    timeline?: string;
+  };
+  frameStep?: boolean;
+  overlay?: (state: VideoState) => ReactNode;
+  styles?: {
+    controls?: CSSProperties;
+    frame?: CSSProperties;
+    root?: CSSProperties;
+    timeline?: CSSProperties;
+  };
+  thumbnails?: boolean;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/Video/useControlsIdle.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/Video/useControlsIdle.ts
+const IDLE_HIDE_MS = 2e3;
+const useControlsIdle = (forceVisible) => {
+	const [active, setActive] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [held, setHeld] = useState(false);
+	const timer = useRef(void 0);
+	const clear = useCallback(() => {
+		if (timer.current === void 0) return;
+		window.clearTimeout(timer.current);
+		timer.current = void 0;
+	}, []);
+	const wake = useCallback(() => {
+		setActive(true);
+		clear();
+		timer.current = window.setTimeout(() => {
+			timer.current = void 0;
+			setActive(false);
+		}, IDLE_HIDE_MS);
+	}, [clear]);
+	const sleep = useCallback(() => {
+		clear();
+		setActive(false);
+	}, [clear]);
+	useEffect(() => clear, [clear]);
+	return {
+		hold: setHeld,
+		setFocused,
+		sleep,
+		visible: forceVisible || active || focused || held,
+		wake
+	};
+};
+//#endregion
+export { useControlsIdle };
+
+//# sourceMappingURL=useControlsIdle.mjs.map

package/es/Video/useControlsIdle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlsIdle.mjs","names":[],"sources":["../../src/Video/useControlsIdle.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nconst IDLE_HIDE_MS = 2000;\n\nexport const useControlsIdle = (forceVisible: boolean) => {\n  const [active, setActive] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [held, setHeld] = useState(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  const clear = useCallback(() => {\n    if (timer.current === undefined) return;\n    window.clearTimeout(timer.current);\n    timer.current = undefined;\n  }, []);\n\n  const wake = useCallback(() => {\n    setActive(true);\n    clear();\n    timer.current = window.setTimeout(() => {\n      timer.current = undefined;\n      setActive(false);\n    }, IDLE_HIDE_MS);\n  }, [clear]);\n\n  const sleep = useCallback(() => {\n    clear();\n    setActive(false);\n  }, [clear]);\n\n  useEffect(() => clear, [clear]);\n\n  return {\n    hold: setHeld,\n    setFocused,\n    sleep,\n    visible: forceVisible || active || focused || held,\n    wake,\n  };\n};\n"],"mappings":";;;AAIA,MAAM,eAAe;AAErB,MAAa,mBAAmB,iBAA0B;CACxD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,QAAQ,OAA2B,KAAA,CAAS;CAElD,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,MAAM,YAAY,KAAA,GAAW;EACjC,OAAO,aAAa,MAAM,OAAO;EACjC,MAAM,UAAU,KAAA;CAClB,GAAG,CAAC,CAAC;CAEL,MAAM,OAAO,kBAAkB;EAC7B,UAAU,IAAI;EACd,MAAM;EACN,MAAM,UAAU,OAAO,iBAAiB;GACtC,MAAM,UAAU,KAAA;GAChB,UAAU,KAAK;EACjB,GAAG,YAAY;CACjB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,kBAAkB;EAC9B,MAAM;EACN,UAAU,KAAK;CACjB,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB,OAAO,CAAC,KAAK,CAAC;CAE9B,OAAO;EACL,MAAM;EACN;EACA;EACA,SAAS,gBAAgB,UAAU,WAAW;EAC9C;CACF;AACF"}

package/es/Video/useFullscreen.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect, useState } from "react";
+//#region src/Video/useFullscreen.ts
+const useFullscreen = (store) => {
+	const [fullscreen, setFullscreen] = useState(false);
+	useEffect(() => {
+		const sync = () => setFullscreen(Boolean(store.root) && document.fullscreenElement === store.root);
+		sync();
+		document.addEventListener("fullscreenchange", sync);
+		return () => document.removeEventListener("fullscreenchange", sync);
+	}, [store]);
+	return fullscreen;
+};
+//#endregion
+export { useFullscreen };
+
+//# sourceMappingURL=useFullscreen.mjs.map

package/es/Video/useFullscreen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreen.mjs","names":[],"sources":["../../src/Video/useFullscreen.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport type { VideoStore } from './store';\n\nexport const useFullscreen = (store: VideoStore) => {\n  const [fullscreen, setFullscreen] = useState(false);\n  useEffect(() => {\n    const sync = () =>\n      setFullscreen(Boolean(store.root) && document.fullscreenElement === store.root);\n    sync();\n    document.addEventListener('fullscreenchange', sync);\n    return () => document.removeEventListener('fullscreenchange', sync);\n  }, [store]);\n  return fullscreen;\n};\n"],"mappings":";;;AAMA,MAAa,iBAAiB,UAAsB;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,gBAAgB;EACd,MAAM,aACJ,cAAc,QAAQ,MAAM,IAAI,KAAK,SAAS,sBAAsB,MAAM,IAAI;EAChF,KAAK;EACL,SAAS,iBAAiB,oBAAoB,IAAI;EAClD,aAAa,SAAS,oBAAoB,oBAAoB,IAAI;CACpE,GAAG,CAAC,KAAK,CAAC;CACV,OAAO;AACT"}

package/es/Video/useKeyboard.mjs

@@ -0,0 +1,60 @@
+//#region src/Video/useKeyboard.ts
+const DEFAULT_PLAYBACK_RATES = [
+	.5,
+	1,
+	1.5,
+	2
+];
+const nextRate = (rates, current, direction) => {
+	const index = rates.indexOf(current);
+	const from = index === -1 ? rates.findIndex((rate) => rate >= current) : index;
+	return rates[Math.min(Math.max((from === -1 ? rates.length - 1 : from) + direction, 0), rates.length - 1)];
+};
+const handleVideoKey = (event, store, rates = DEFAULT_PLAYBACK_RATES) => {
+	if (event.altKey || event.ctrlKey || event.metaKey) return false;
+	const target = event.target;
+	const host = event.currentTarget;
+	if (host instanceof Node && target instanceof Node && host !== target && !host.contains(target)) return false;
+	if (target?.isContentEditable || target?.closest?.("input, textarea, select, [role=\"menuitem\"], [contenteditable]:not([contenteditable=\"false\"])")) return false;
+	if (target instanceof HTMLButtonElement && (event.key === " " || event.key === "Enter")) return false;
+	const state = store.getState();
+	if (state.status !== "ready") return false;
+	switch (event.key.toLowerCase()) {
+		case " ":
+		case "k":
+			store.toggle();
+			return true;
+		case ",":
+			store.step(-1);
+			return true;
+		case ".":
+			store.step(1);
+			return true;
+		case "arrowleft":
+			store.seek(state.time - (event.shiftKey ? 5 : 1));
+			return true;
+		case "arrowright":
+			store.seek(state.time + (event.shiftKey ? 5 : 1));
+			return true;
+		case "j":
+			store.setRate(nextRate(rates, state.rate, -1));
+			return true;
+		case "l":
+			store.setRate(nextRate(rates, state.rate, 1));
+			return true;
+		case "m":
+			store.toggleMute();
+			return true;
+		case "c":
+			store.setCaptions(!state.captions);
+			return true;
+		case "f":
+			store.toggleFullscreen();
+			return true;
+		default: return false;
+	}
+};
+//#endregion
+export { DEFAULT_PLAYBACK_RATES, handleVideoKey };
+
+//# sourceMappingURL=useKeyboard.mjs.map

package/es/Video/useKeyboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboard.mjs","names":[],"sources":["../../src/Video/useKeyboard.ts"],"sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent } from 'react';\n\nimport type { VideoStore } from './store';\n\nexport const DEFAULT_PLAYBACK_RATES = [0.5, 1, 1.5, 2];\n\nconst nextRate = (rates: number[], current: number, direction: 1 | -1) => {\n  const index = rates.indexOf(current);\n  const from = index === -1 ? rates.findIndex((rate) => rate >= current) : index;\n  const next = Math.min(\n    Math.max((from === -1 ? rates.length - 1 : from) + direction, 0),\n    rates.length - 1,\n  );\n  return rates[next];\n};\n\nexport const handleVideoKey = (\n  event: KeyboardEvent | ReactKeyboardEvent,\n  store: VideoStore,\n  rates: number[] = DEFAULT_PLAYBACK_RATES,\n) => {\n  if (event.altKey || event.ctrlKey || event.metaKey) return false;\n  const target = event.target as HTMLElement | null;\n  // Portalled content (menus) bubbles through React to Root without being inside it.\n  const host = event.currentTarget as Node | null;\n  if (host instanceof Node && target instanceof Node && host !== target && !host.contains(target))\n    return false;\n  if (\n    target?.isContentEditable ||\n    target?.closest?.(\n      'input, textarea, select, [role=\"menuitem\"], [contenteditable]:not([contenteditable=\"false\"])',\n    )\n  )\n    return false;\n  if (target instanceof HTMLButtonElement && (event.key === ' ' || event.key === 'Enter'))\n    return false;\n  const state = store.getState();\n  if (state.status !== 'ready') return false;\n\n  switch (event.key.toLowerCase()) {\n    case ' ':\n    case 'k': {\n      store.toggle();\n      return true;\n    }\n    case ',': {\n      store.step(-1);\n      return true;\n    }\n    case '.': {\n      store.step(1);\n      return true;\n    }\n    case 'arrowleft': {\n      store.seek(state.time - (event.shiftKey ? 5 : 1));\n      return true;\n    }\n    case 'arrowright': {\n      store.seek(state.time + (event.shiftKey ? 5 : 1));\n      return true;\n    }\n    case 'j': {\n      store.setRate(nextRate(rates, state.rate, -1));\n      return true;\n    }\n    case 'l': {\n      store.setRate(nextRate(rates, state.rate, 1));\n      return true;\n    }\n    case 'm': {\n      store.toggleMute();\n      return true;\n    }\n    case 'c': {\n      store.setCaptions(!state.captions);\n      return true;\n    }\n    case 'f': {\n      store.toggleFullscreen();\n      return true;\n    }\n    default: {\n      return false;\n    }\n  }\n};\n"],"mappings":";AAIA,MAAa,yBAAyB;CAAC;CAAK;CAAG;CAAK;AAAC;AAErD,MAAM,YAAY,OAAiB,SAAiB,cAAsB;CACxE,MAAM,QAAQ,MAAM,QAAQ,OAAO;CACnC,MAAM,OAAO,UAAU,KAAK,MAAM,WAAW,SAAS,QAAQ,OAAO,IAAI;CAKzE,OAAO,MAJM,KAAK,IAChB,KAAK,KAAK,SAAS,KAAK,MAAM,SAAS,IAAI,QAAQ,WAAW,CAAC,GAC/D,MAAM,SAAS,CAED;AAClB;AAEA,MAAa,kBACX,OACA,OACA,QAAkB,2BACf;CACH,IAAI,MAAM,UAAU,MAAM,WAAW,MAAM,SAAS,OAAO;CAC3D,MAAM,SAAS,MAAM;CAErB,MAAM,OAAO,MAAM;CACnB,IAAI,gBAAgB,QAAQ,kBAAkB,QAAQ,SAAS,UAAU,CAAC,KAAK,SAAS,MAAM,GAC5F,OAAO;CACT,IACE,QAAQ,qBACR,QAAQ,UACN,kGACF,GAEA,OAAO;CACT,IAAI,kBAAkB,sBAAsB,MAAM,QAAQ,OAAO,MAAM,QAAQ,UAC7E,OAAO;CACT,MAAM,QAAQ,MAAM,SAAS;CAC7B,IAAI,MAAM,WAAW,SAAS,OAAO;CAErC,QAAQ,MAAM,IAAI,YAAY,GAA9B;EACE,KAAK;EACL,KAAK;GACH,MAAM,OAAO;GACb,OAAO;EAET,KAAK;GACH,MAAM,KAAK,EAAE;GACb,OAAO;EAET,KAAK;GACH,MAAM,KAAK,CAAC;GACZ,OAAO;EAET,KAAK;GACH,MAAM,KAAK,MAAM,QAAQ,MAAM,WAAW,IAAI,EAAE;GAChD,OAAO;EAET,KAAK;GACH,MAAM,KAAK,MAAM,QAAQ,MAAM,WAAW,IAAI,EAAE;GAChD,OAAO;EAET,KAAK;GACH,MAAM,QAAQ,SAAS,OAAO,MAAM,MAAM,EAAE,CAAC;GAC7C,OAAO;EAET,KAAK;GACH,MAAM,QAAQ,SAAS,OAAO,MAAM,MAAM,CAAC,CAAC;GAC5C,OAAO;EAET,KAAK;GACH,MAAM,WAAW;GACjB,OAAO;EAET,KAAK;GACH,MAAM,YAAY,CAAC,MAAM,QAAQ;GACjC,OAAO;EAET,KAAK;GACH,MAAM,iBAAiB;GACvB,OAAO;EAET,SACE,OAAO;CAEX;AACF"}

package/es/Video/useVideo.d.mts

@@ -0,0 +1,9 @@
+import { VideoPlayer, VideoState } from "./type.mjs";
+//#region src/Video/useVideo.d.ts
+export declare function useVideoState(player: VideoPlayer): VideoState;
+export declare function useVideoState<T>(player: VideoPlayer, selector: (state: VideoState) => T): T;
+export declare function useVideo(): VideoState;
+export declare function useVideo<T>(selector: (state: VideoState) => T): T;
+export declare const useVideoPlayer: () => VideoPlayer;
+//#endregion
+//# sourceMappingURL=useVideo.d.mts.map

package/es/Video/useVideo.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useVideoContext } from "./context.mjs";
+import { createVideoStore } from "./store.mjs";
+import { useState, useSyncExternalStore } from "react";
+//#region src/Video/useVideo.ts
+const identity = (state) => state;
+function useVideoState(player, selector = identity) {
+	return useSyncExternalStore(player.subscribe, () => selector(player.getState()), () => selector(player.getState()));
+}
+function useVideo(selector = identity) {
+	return useVideoState(useVideoContext().store, selector);
+}
+const useVideoPlayer = () => useState(createVideoStore)[0];
+//#endregion
+export { useVideo, useVideoPlayer, useVideoState };
+
+//# sourceMappingURL=useVideo.mjs.map

package/es/Video/useVideo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideo.mjs","names":[],"sources":["../../src/Video/useVideo.ts"],"sourcesContent":["'use client';\n\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useVideoContext } from './context';\nimport { createVideoStore } from './store';\nimport type { VideoPlayer, VideoState } from './type';\n\nconst identity = (state: VideoState) => state as unknown;\n\nexport function useVideoState(player: VideoPlayer): VideoState;\nexport function useVideoState<T>(player: VideoPlayer, selector: (state: VideoState) => T): T;\nexport function useVideoState(\n  player: VideoPlayer,\n  selector: (state: VideoState) => unknown = identity,\n) {\n  return useSyncExternalStore(\n    player.subscribe,\n    () => selector(player.getState()),\n    () => selector(player.getState()),\n  );\n}\n\nexport function useVideo(): VideoState;\nexport function useVideo<T>(selector: (state: VideoState) => T): T;\nexport function useVideo(selector: (state: VideoState) => unknown = identity) {\n  return useVideoState(useVideoContext().store, selector);\n}\n\nexport const useVideoPlayer = (): VideoPlayer => useState(createVideoStore)[0];\n"],"mappings":";;;;;AAQA,MAAM,YAAY,UAAsB;AAIxC,SAAgB,cACd,QACA,WAA2C,UAC3C;CACA,OAAO,qBACL,OAAO,iBACD,SAAS,OAAO,SAAS,CAAC,SAC1B,SAAS,OAAO,SAAS,CAAC,CAClC;AACF;AAIA,SAAgB,SAAS,WAA2C,UAAU;CAC5E,OAAO,cAAc,gBAAgB,CAAC,CAAC,OAAO,QAAQ;AACxD;AAEA,MAAa,uBAAoC,SAAS,gBAAgB,CAAC,CAAC"}

package/es/color/types.d.mts

@@ -7,4 +7,5 @@ export interface ColorScaleItem {
   lightA: colorStep;
 }
 //#endregion
+export {};
 //# sourceMappingURL=types.d.mts.map

package/es/hooks/useMarkdown/utils.d.mts

@@ -9,4 +9,5 @@ interface PreprocessOptions {
 }
 export declare const preprocessMarkdownContent: (str: string, { enableCustomFootnotes, enableLatex, citationsLength }?: PreprocessOptions) => string;
 //#endregion
+export {};
 //# sourceMappingURL=utils.d.mts.map

package/es/i18n/resources/en/index.d.mts

@@ -11,9 +11,10 @@ import _default$9 from "./image.mjs";
 import _default$10 from "./messageModal.mjs";
 import _default$11 from "./qrCode.mjs";
 import _default$12 from "./sideNav.mjs";
+import _default$13 from "./video.mjs";
 declare namespace index_d_exports {
-  export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav };
+  export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav, _default$13 as video };
 }
 //#endregion
-export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, index_d_exports, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav };
+export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, index_d_exports, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav, _default$13 as video };
 //# sourceMappingURL=index.d.mts.map

package/es/i18n/resources/en/index.mjs

@@ -7,6 +7,7 @@ import emojiPicker_default from "./emojiPicker.mjs";
 import form_default from "./form.mjs";
 import hotkey_default from "./hotkey.mjs";
 import image_default from "./image.mjs";
+import video_default from "./video.mjs";
 import qrCode_default from "./qrCode.mjs";
 import chat_default from "./chat.mjs";
 import messageModal_default from "./messageModal.mjs";
@@ -26,9 +27,10 @@ var en_exports = /* @__PURE__ */ __exportAll({
 	image: () => image_default,
 	messageModal: () => messageModal_default,
 	qrCode: () => qrCode_default,
-	sideNav: () => sideNav_default
+	sideNav: () => sideNav_default,
+	video: () => video_default
 });
 //#endregion
-export { burger_default as burger, chat_default as chat, colorPicker_default as colorPicker, common_default as common, datePicker_default as datePicker, editableMessage_default as editableMessage, emojiPicker_default as emojiPicker, en_exports, form_default as form, hotkey_default as hotkey, image_default as image, messageModal_default as messageModal, qrCode_default as qrCode, sideNav_default as sideNav };
+export { burger_default as burger, chat_default as chat, colorPicker_default as colorPicker, common_default as common, datePicker_default as datePicker, editableMessage_default as editableMessage, emojiPicker_default as emojiPicker, en_exports, form_default as form, hotkey_default as hotkey, image_default as image, messageModal_default as messageModal, qrCode_default as qrCode, sideNav_default as sideNav, video_default as video };
 
 //# sourceMappingURL=index.mjs.map

package/es/i18n/resources/en/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/i18n/resources/en/index.ts"],"sourcesContent":["export { default as burger } from './burger';\nexport { default as chat } from './chat';\nexport { default as colorPicker } from './colorPicker';\nexport { default as common } from './common';\nexport { default as datePicker } from './datePicker';\nexport { default as editableMessage } from './editableMessage';\nexport { default as emojiPicker } from './emojiPicker';\nexport { default as form } from './form';\nexport { default as hotkey } from './hotkey';\nexport { default as image } from './image';\nexport { default as messageModal } from './messageModal';\nexport { default as qrCode } from './qrCode';\nexport { default as sideNav } from './sideNav';\n"],"mappings":""}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/i18n/resources/en/index.ts"],"sourcesContent":["export { default as burger } from './burger';\nexport { default as chat } from './chat';\nexport { default as colorPicker } from './colorPicker';\nexport { default as common } from './common';\nexport { default as datePicker } from './datePicker';\nexport { default as editableMessage } from './editableMessage';\nexport { default as emojiPicker } from './emojiPicker';\nexport { default as form } from './form';\nexport { default as hotkey } from './hotkey';\nexport { default as image } from './image';\nexport { default as messageModal } from './messageModal';\nexport { default as qrCode } from './qrCode';\nexport { default as sideNav } from './sideNav';\nexport { default as video } from './video';\n"],"mappings":""}

package/es/i18n/resources/en/video.d.mts

@@ -0,0 +1,23 @@
+//#region src/i18n/resources/en/video.d.ts
+declare const _default: {
+  readonly 'video.captionsHide': "Hide captions";
+  readonly 'video.captionsShow': "Show captions";
+  readonly 'video.download': "Download";
+  readonly 'video.exitFullscreen': "Exit fullscreen";
+  readonly 'video.frame': "Frame";
+  readonly 'video.fullscreen': "Fullscreen";
+  readonly 'video.loadFailed': "This video could not be loaded";
+  readonly 'video.mute': "Mute";
+  readonly 'video.nextFrame': "Next frame";
+  readonly 'video.pause': "Pause";
+  readonly 'video.play': "Play";
+  readonly 'video.previousFrame': "Previous frame";
+  readonly 'video.reload': "Reload";
+  readonly 'video.sections': "Sections";
+  readonly 'video.seek': "Seek";
+  readonly 'video.speed': "Playback speed";
+  readonly 'video.unmute': "Unmute";
+};
+//#endregion
+export { _default as default };
+//# sourceMappingURL=video.d.mts.map

package/es/i18n/resources/en/video.mjs

@@ -0,0 +1,24 @@
+//#region src/i18n/resources/en/video.ts
+var video_default = {
+	"video.captionsHide": "Hide captions",
+	"video.captionsShow": "Show captions",
+	"video.download": "Download",
+	"video.exitFullscreen": "Exit fullscreen",
+	"video.frame": "Frame",
+	"video.fullscreen": "Fullscreen",
+	"video.loadFailed": "This video could not be loaded",
+	"video.mute": "Mute",
+	"video.nextFrame": "Next frame",
+	"video.pause": "Pause",
+	"video.play": "Play",
+	"video.previousFrame": "Previous frame",
+	"video.reload": "Reload",
+	"video.sections": "Sections",
+	"video.seek": "Seek",
+	"video.speed": "Playback speed",
+	"video.unmute": "Unmute"
+};
+//#endregion
+export { video_default as default };
+
+//# sourceMappingURL=video.mjs.map

package/es/i18n/resources/en/video.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.mjs","names":[],"sources":["../../../../src/i18n/resources/en/video.ts"],"sourcesContent":["export default {\n  'video.captionsHide': 'Hide captions',\n  'video.captionsShow': 'Show captions',\n  'video.download': 'Download',\n  'video.exitFullscreen': 'Exit fullscreen',\n  'video.frame': 'Frame',\n  'video.fullscreen': 'Fullscreen',\n  'video.loadFailed': 'This video could not be loaded',\n  'video.mute': 'Mute',\n  'video.nextFrame': 'Next frame',\n  'video.pause': 'Pause',\n  'video.play': 'Play',\n  'video.previousFrame': 'Previous frame',\n  'video.reload': 'Reload',\n  'video.sections': 'Sections',\n  'video.seek': 'Seek',\n  'video.speed': 'Playback speed',\n  'video.unmute': 'Unmute',\n} as const;\n"],"mappings":";AAAA,IAAA,gBAAe;CACb,sBAAsB;CACtB,sBAAsB;CACtB,kBAAkB;CAClB,wBAAwB;CACxB,eAAe;CACf,oBAAoB;CACpB,oBAAoB;CACpB,cAAc;CACd,mBAAmB;CACnB,eAAe;CACf,cAAc;CACd,uBAAuB;CACvB,gBAAgB;CAChB,kBAAkB;CAClB,cAAc;CACd,eAAe;CACf,gBAAgB;AAClB"}

package/es/i18n/resources/zhCn/index.d.mts

@@ -11,9 +11,10 @@ import _default$9 from "./image.mjs";
 import _default$10 from "./messageModal.mjs";
 import _default$11 from "./qrCode.mjs";
 import _default$12 from "./sideNav.mjs";
+import _default$13 from "./video.mjs";
 declare namespace index_d_exports {
-  export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav };
+  export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav, _default$13 as video };
 }
 //#endregion
-export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, index_d_exports, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav };
+export { _default as burger, _default$1 as chat, _default$2 as colorPicker, _default$3 as common, _default$4 as datePicker, _default$5 as editableMessage, _default$6 as emojiPicker, _default$7 as form, _default$8 as hotkey, _default$9 as image, index_d_exports, _default$10 as messageModal, _default$11 as qrCode, _default$12 as sideNav, _default$13 as video };
 //# sourceMappingURL=index.d.mts.map

package/es/i18n/resources/zhCn/index.mjs

@@ -12,6 +12,7 @@ import image_default from "./image.mjs";
 import messageModal_default from "./messageModal.mjs";
 import qrCode_default from "./qrCode.mjs";
 import sideNav_default from "./sideNav.mjs";
+import video_default from "./video.mjs";
 //#region src/i18n/resources/zhCn/index.ts
 var zhCn_exports = /* @__PURE__ */ __exportAll({
 	burger: () => burger_default,
@@ -26,9 +27,10 @@ var zhCn_exports = /* @__PURE__ */ __exportAll({
 	image: () => image_default,
 	messageModal: () => messageModal_default,
 	qrCode: () => qrCode_default,
-	sideNav: () => sideNav_default
+	sideNav: () => sideNav_default,
+	video: () => video_default
 });
 //#endregion
-export { burger_default as burger, chat_default as chat, colorPicker_default as colorPicker, common_default as common, datePicker_default as datePicker, editableMessage_default as editableMessage, emojiPicker_default as emojiPicker, form_default as form, hotkey_default as hotkey, image_default as image, messageModal_default as messageModal, qrCode_default as qrCode, sideNav_default as sideNav, zhCn_exports };
+export { burger_default as burger, chat_default as chat, colorPicker_default as colorPicker, common_default as common, datePicker_default as datePicker, editableMessage_default as editableMessage, emojiPicker_default as emojiPicker, form_default as form, hotkey_default as hotkey, image_default as image, messageModal_default as messageModal, qrCode_default as qrCode, sideNav_default as sideNav, video_default as video, zhCn_exports };
 
 //# sourceMappingURL=index.mjs.map

package/es/i18n/resources/zhCn/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/i18n/resources/zhCn/index.ts"],"sourcesContent":["export { default as burger } from './burger';\nexport { default as chat } from './chat';\nexport { default as colorPicker } from './colorPicker';\nexport { default as common } from './common';\nexport { default as datePicker } from './datePicker';\nexport { default as editableMessage } from './editableMessage';\nexport { default as emojiPicker } from './emojiPicker';\nexport { default as form } from './form';\nexport { default as hotkey } from './hotkey';\nexport { default as image } from './image';\nexport { default as messageModal } from './messageModal';\nexport { default as qrCode } from './qrCode';\nexport { default as sideNav } from './sideNav';\n"],"mappings":""}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/i18n/resources/zhCn/index.ts"],"sourcesContent":["export { default as burger } from './burger';\nexport { default as chat } from './chat';\nexport { default as colorPicker } from './colorPicker';\nexport { default as common } from './common';\nexport { default as datePicker } from './datePicker';\nexport { default as editableMessage } from './editableMessage';\nexport { default as emojiPicker } from './emojiPicker';\nexport { default as form } from './form';\nexport { default as hotkey } from './hotkey';\nexport { default as image } from './image';\nexport { default as messageModal } from './messageModal';\nexport { default as qrCode } from './qrCode';\nexport { default as sideNav } from './sideNav';\nexport { default as video } from './video';\n"],"mappings":""}

package/es/i18n/resources/zhCn/video.d.mts

@@ -0,0 +1,23 @@
+//#region src/i18n/resources/zhCn/video.d.ts
+declare const _default: {
+  readonly 'video.captionsHide': "隐藏字幕";
+  readonly 'video.captionsShow': "显示字幕";
+  readonly 'video.download': "下载";
+  readonly 'video.exitFullscreen': "退出全屏";
+  readonly 'video.frame': "帧";
+  readonly 'video.fullscreen': "全屏";
+  readonly 'video.loadFailed': "视频加载失败";
+  readonly 'video.mute': "静音";
+  readonly 'video.nextFrame': "下一帧";
+  readonly 'video.pause': "暂停";
+  readonly 'video.play': "播放";
+  readonly 'video.previousFrame': "上一帧";
+  readonly 'video.reload': "重新加载";
+  readonly 'video.sections': "章节";
+  readonly 'video.seek': "进度";
+  readonly 'video.speed': "播放速度";
+  readonly 'video.unmute': "取消静音";
+};
+//#endregion
+export { _default as default };
+//# sourceMappingURL=video.d.mts.map

package/es/i18n/resources/zhCn/video.mjs

@@ -0,0 +1,24 @@
+//#region src/i18n/resources/zhCn/video.ts
+var video_default = {
+	"video.captionsHide": "隐藏字幕",
+	"video.captionsShow": "显示字幕",
+	"video.download": "下载",
+	"video.exitFullscreen": "退出全屏",
+	"video.frame": "帧",
+	"video.fullscreen": "全屏",
+	"video.loadFailed": "视频加载失败",
+	"video.mute": "静音",
+	"video.nextFrame": "下一帧",
+	"video.pause": "暂停",
+	"video.play": "播放",
+	"video.previousFrame": "上一帧",
+	"video.reload": "重新加载",
+	"video.sections": "章节",
+	"video.seek": "进度",
+	"video.speed": "播放速度",
+	"video.unmute": "取消静音"
+};
+//#endregion
+export { video_default as default };
+
+//# sourceMappingURL=video.mjs.map

package/es/i18n/resources/zhCn/video.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.mjs","names":[],"sources":["../../../../src/i18n/resources/zhCn/video.ts"],"sourcesContent":["export default {\n  'video.captionsHide': '隐藏字幕',\n  'video.captionsShow': '显示字幕',\n  'video.download': '下载',\n  'video.exitFullscreen': '退出全屏',\n  'video.frame': '帧',\n  'video.fullscreen': '全屏',\n  'video.loadFailed': '视频加载失败',\n  'video.mute': '静音',\n  'video.nextFrame': '下一帧',\n  'video.pause': '暂停',\n  'video.play': '播放',\n  'video.previousFrame': '上一帧',\n  'video.reload': '重新加载',\n  'video.sections': '章节',\n  'video.seek': '进度',\n  'video.speed': '播放速度',\n  'video.unmute': '取消静音',\n} as const;\n"],"mappings":";AAAA,IAAA,gBAAe;CACb,sBAAsB;CACtB,sBAAsB;CACtB,kBAAkB;CAClB,wBAAwB;CACxB,eAAe;CACf,oBAAoB;CACpB,oBAAoB;CACpB,cAAc;CACd,mBAAmB;CACnB,eAAe;CACf,cAAc;CACd,uBAAuB;CACvB,gBAAgB;CAChB,kBAAkB;CAClB,cAAc;CACd,eAAe;CACf,gBAAgB;AAClB"}