@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Video/parts/Timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/Timeline.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type PointerEvent as ReactPointerEvent,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useVideoContext } from '../context';\nimport { markerColor, styles } from '../style';\nimport { formatTime, mergeSegments, sectionAt } from '../time';\nimport type { VideoMarker, VideoState, VideoTimelineProps } from '../type';\nimport { useVideo } from '../useVideo';\nimport HoverPreview from './HoverPreview';\n\nconst SNAP_RATIO = 0.012;\nconst GAP_PX = 3;\nconst PREVIEW_HALF = 88;\n\ninterface Hover {\n  marker?: VideoMarker;\n  time: number;\n  x: number;\n}\n\nconst canHover = () =>\n  typeof window === 'undefined' || !window.matchMedia?.('(hover: none)').matches;\n\nconst markerName = (marker: VideoMarker) =>\n  [formatTime(marker.time), marker.label, marker.content]\n    .filter((part) => typeof part === 'string')\n    .join(' ');\n\nconst Timeline = ({ children, className, style, thumbnails = true }: VideoTimelineProps) => {\n  const { config, media, store } = useVideoContext();\n  const { t } = useTranslation(videoMessages);\n  const duration = useVideo((state) => (Number.isFinite(state.duration) ? state.duration : 0));\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  const [hover, setHover] = useState<Hover | null>(null);\n  const [hovering, setHovering] = useState(false);\n\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n    if (!track) return;\n    setWidth(track.getBoundingClientRect().width);\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));\n    observer.observe(track);\n    return () => observer.disconnect();\n  }, []);\n\n  // Playback must not re-render the timeline: the playhead and the played\n  // fills read --video-time, written straight to the track on every frame.\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n    if (!track) return;\n    const setOnChange = (name: string, value: string) => {\n      if (track.getAttribute(name) !== value) track.setAttribute(name, value);\n    };\n    const paint = (state: VideoState) => {\n      track.style.setProperty('--video-time', String(state.time));\n      setOnChange('aria-valuenow', String(Math.round(state.time)));\n      setOnChange(\n        'aria-valuetext',\n        [`${formatTime(state.time)} / ${formatTime(state.duration)}`, state.activeSection?.title]\n          .filter(Boolean)\n          .join(', '),\n      );\n    };\n    paint(store.getState());\n    return store.subscribe(paint);\n  }, [store]);\n\n  const { hairlines, segments } = useMemo(\n    () => mergeSegments(config.sections, duration, width),\n    [config.sections, duration, width],\n  );\n\n  const visibleMarkers = useMemo(\n    () => config.markers.filter((marker) => marker.time >= 0 && marker.time <= duration),\n    [config.markers, duration],\n  );\n\n  const pct = (seconds: number) => (duration > 0 ? (seconds / duration) * 100 : 0);\n  const timeAt = (element: HTMLElement, clientX: number) => {\n    const box = element.getBoundingClientRect();\n    if (!box.width) return 0;\n    return Math.min(Math.max((clientX - box.left) / box.width, 0), 1) * duration;\n  };\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0 || !duration) return;\n    const element = event.currentTarget;\n    store.seek(timeAt(element, event.clientX));\n    element.setPointerCapture?.(event.pointerId);\n    const move = (next: PointerEvent) => store.seek(timeAt(element, next.clientX));\n    const up = () => {\n      element.removeEventListener('pointermove', move);\n      element.removeEventListener('pointerup', up);\n      element.removeEventListener('pointercancel', up);\n    };\n    element.addEventListener('pointermove', move);\n    element.addEventListener('pointerup', up);\n    element.addEventListener('pointercancel', up);\n  };\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.pointerType === 'touch' || !duration || !canHover()) return;\n    const element = event.currentTarget;\n    const box = element.getBoundingClientRect();\n    const seconds = timeAt(element, event.clientX);\n    const snap = duration * SNAP_RATIO;\n    const marker = visibleMarkers.find((item) => Math.abs(item.time - seconds) < snap);\n    setHovering(true);\n    setHover({\n      marker,\n      time: marker?.time ?? seconds,\n      x: Math.min(\n        Math.max(event.clientX - box.left, PREVIEW_HALF),\n        Math.max(box.width - PREVIEW_HALF, PREVIEW_HALF),\n      ),\n    });\n  };\n\n  return (\n    <div {...styleProps(undefined, className, { position: 'relative', ...style })}>\n      {hover && (\n        <HoverPreview\n          marker={hover.marker}\n          section={sectionAt(config.sections, hover.time)}\n          src={media.src}\n          thumbnail={thumbnails}\n          time={hover.time}\n          visible={hovering}\n          x={hover.x}\n        />\n      )}\n      <div\n        aria-label={t('video.seek')}\n        aria-valuemax={Math.round(duration)}\n        aria-valuemin={0}\n        ref={trackRef}\n        role=\"slider\"\n        {...styleProps(styles.track)}\n        onPointerDown={onPointerDown}\n        onPointerLeave={() => setHovering(false)}\n        onPointerMove={onPointerMove}\n      >\n        {segments.map((segment, index) => {\n          const span = segment.end - segment.start;\n          const hovered =\n            hovering && hover !== null && hover.time >= segment.start && hover.time < segment.end;\n          const hoverFill =\n            hovering && hover ? Math.min(Math.max((hover.time - segment.start) / span, 0), 1) : 0;\n          const leftInset = index === 0 ? 0 : GAP_PX / 2;\n          const rightInset = index === segments.length - 1 ? 0 : GAP_PX / 2;\n          return (\n            <div\n              data-video-segment=\"\"\n              key={segment.start}\n              {...styleProps([styles.segment, hovered && styles.segmentHovered], undefined, {\n                left: `calc(${pct(segment.start)}% + ${leftInset}px)`,\n                width: `calc(${pct(span)}% - ${leftInset + rightInset}px)`,\n              })}\n            >\n              {hoverFill > 0 && (\n                <div\n                  {...styleProps(styles.segmentFill, undefined, {\n                    background: 'rgb(255 255 255 / 32%)',\n                    width: `${hoverFill * 100}%`,\n                  })}\n                />\n              )}\n              <div\n                {...styleProps(styles.segmentFill, undefined, {\n                  background: '#fff',\n                  width: `calc(clamp(0, (var(--video-time, 0) - ${segment.start}) / ${span}, 1) * 100%)`,\n                })}\n              />\n            </div>\n          );\n        })}\n        {hairlines.map((at) => (\n          <div key={at} {...styleProps(styles.hairline, undefined, { left: `${pct(at)}%` })} />\n        ))}\n        <div\n          {...styleProps(styles.head, undefined, {\n            left: duration > 0 ? `calc(var(--video-time, 0) / ${duration} * 100%)` : 0,\n          })}\n        />\n        {visibleMarkers.map((marker, index) => (\n          <button\n            aria-label={markerName(marker)}\n            key={marker.key ?? `${marker.time}-${index}`}\n            type=\"button\"\n            {...styleProps(styles.marker, undefined, {\n              background: markerColor(marker.color),\n              left: `${pct(marker.time)}%`,\n            })}\n            onPointerDown={(event) => event.stopPropagation()}\n            onClick={(event) => {\n              event.stopPropagation();\n              store.pause();\n              store.seek(marker.time);\n              store.setCaptions(true);\n              config.onMarkerClick?.(marker);\n            }}\n          />\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n};\n\nTimeline.displayName = 'VideoTimeline';\n\nexport default Timeline;\n"],"mappings":"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"}

package/es/Video/store.mjs

@@ -0,0 +1,241 @@
+import { markersAt, sectionAt, sortSections, steppedTime } from "./time.mjs";
+//#region src/Video/store.ts
+const EMPTY_MARKERS = [];
+const sameMarkers = (a, b) => a.length === b.length && a.every((marker, index) => marker === b[index]);
+const createVideoStore = () => {
+	let data = {
+		fps: 30,
+		markers: [],
+		sections: []
+	};
+	let options = {};
+	let video = null;
+	let root = null;
+	let painted;
+	let state = {
+		activeMarkers: EMPTY_MARKERS,
+		activeSection: void 0,
+		captions: true,
+		duration: 0,
+		muted: false,
+		paused: true,
+		rate: 1,
+		size: void 0,
+		status: "loading",
+		time: 0
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	const derive = (next) => {
+		const activeSection = sectionAt(data.sections, next.time);
+		const found = markersAt(data.markers, next.time, data.fps);
+		const activeMarkers = found.length === 0 ? EMPTY_MARKERS : sameMarkers(found, state.activeMarkers) ? state.activeMarkers : found;
+		return {
+			...next,
+			activeMarkers,
+			activeSection
+		};
+	};
+	const commit = (patch) => {
+		const next = derive({
+			...state,
+			...patch
+		});
+		if (!Object.keys(next).some((key) => next[key] !== state[key])) return;
+		state = next;
+		for (const listener of listeners) listener(state);
+	};
+	const frameTime = () => {
+		if (!video) return 0;
+		return video.paused ? video.currentTime : painted ?? video.currentTime;
+	};
+	const clampToMedia = (seconds) => {
+		const lower = Math.max(seconds, 0);
+		return video && Number.isFinite(video.duration) ? Math.min(lower, video.duration) : lower;
+	};
+	const atEnd = () => Boolean(video) && (video.ended || Number.isFinite(video.duration) && video.currentTime >= video.duration - .5 / data.fps);
+	const seek = (seconds) => {
+		if (!video || !Number.isFinite(seconds)) return;
+		painted = void 0;
+		video.currentTime = clampToMedia(seconds);
+		commit({ time: video.currentTime });
+	};
+	let attachedOnce = false;
+	return {
+		attach: (element) => {
+			const target = element;
+			video = target;
+			let handle = 0;
+			let running = false;
+			const cancel = () => {
+				if (!running) return;
+				running = false;
+				if (target.cancelVideoFrameCallback) target.cancelVideoFrameCallback(handle);
+				else cancelAnimationFrame(handle);
+			};
+			const schedule = () => {
+				handle = target.requestVideoFrameCallback ? target.requestVideoFrameCallback(tick) : requestAnimationFrame(() => tick());
+			};
+			function tick(_now, frame) {
+				if (!running) return;
+				if (!target.paused) painted = frame?.mediaTime;
+				commit({ time: target.paused ? target.currentTime : painted ?? target.currentTime });
+				schedule();
+			}
+			const start = () => {
+				if (running) return;
+				running = true;
+				schedule();
+			};
+			const onMeta = () => commit({
+				duration: target.duration,
+				time: target.currentTime,
+				size: {
+					height: target.videoHeight,
+					width: target.videoWidth
+				},
+				status: "ready"
+			});
+			const onPlay = () => {
+				commit({ paused: false });
+				start();
+			};
+			const onPause = () => {
+				cancel();
+				const held = painted;
+				painted = void 0;
+				if (!atEnd() && held !== void 0 && Math.abs(target.currentTime - held) > .001) target.currentTime = held;
+				commit({
+					paused: true,
+					time: target.currentTime
+				});
+			};
+			const onSeeked = () => {
+				painted = void 0;
+				commit({ time: target.currentTime });
+			};
+			const onRate = () => {
+				if (target.playbackRate === state.rate) return;
+				commit({ rate: target.playbackRate });
+				options.onRateChange?.(target.playbackRate);
+			};
+			const onVolume = () => {
+				if (target.muted === state.muted) return;
+				commit({ muted: target.muted });
+				options.onMutedChange?.(target.muted);
+			};
+			const onError = () => commit({ status: "error" });
+			const muted = attachedOnce ? state.muted : options.muted ?? false;
+			const rate = attachedOnce ? state.rate : options.defaultPlaybackRate ?? 1;
+			attachedOnce = true;
+			commit({
+				duration: Number.isFinite(target.duration) ? target.duration : 0,
+				muted,
+				paused: target.paused,
+				rate,
+				size: void 0,
+				status: "loading",
+				time: target.currentTime
+			});
+			if (target.muted !== muted) target.muted = muted;
+			if (target.playbackRate !== rate) target.playbackRate = rate;
+			const events = [
+				["loadedmetadata", onMeta],
+				["play", onPlay],
+				["pause", onPause],
+				["ended", onPause],
+				["seeked", onSeeked],
+				["ratechange", onRate],
+				["volumechange", onVolume],
+				["error", onError]
+			];
+			for (const [type, handler] of events) target.addEventListener(type, handler);
+			if (target.readyState >= 1) onMeta();
+			if (!target.paused) start();
+			return () => {
+				cancel();
+				for (const [type, handler] of events) target.removeEventListener(type, handler);
+				if (video === target) video = null;
+			};
+		},
+		attachRoot: (element) => {
+			root = element;
+		},
+		getData: () => data,
+		getState: () => state,
+		pause: () => video?.pause(),
+		play: async () => {
+			await video?.play();
+		},
+		reload: () => {
+			if (!video) return;
+			commit({ status: "loading" });
+			video.load();
+		},
+		requestFullscreen: async () => {
+			await root?.requestFullscreen?.();
+		},
+		get root() {
+			return root;
+		},
+		seek,
+		setCaptions: (captions) => commit({ captions }),
+		setData: (next) => {
+			data = {
+				...data,
+				...next,
+				sections: next.sections ? sortSections(next.sections) : data.sections
+			};
+			commit({});
+		},
+		setMuted: (muted) => {
+			if (video) video.muted = muted;
+		},
+		setOptions: (next) => {
+			options = {
+				...options,
+				...next
+			};
+		},
+		setRate: (rate) => {
+			if (video) video.playbackRate = rate;
+		},
+		step: (frames) => {
+			if (!video) return;
+			const from = frameTime();
+			painted = void 0;
+			video.pause();
+			const limit = Number.isFinite(video.duration) ? video.duration : Number.POSITIVE_INFINITY;
+			video.currentTime = steppedTime(from, frames, limit, data.fps);
+			commit({ time: video.currentTime });
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		toggle: () => {
+			if (!video) return;
+			if (!video.paused) return video.pause();
+			if (atEnd()) video.currentTime = 0;
+			video.play();
+		},
+		toggleFullscreen: () => {
+			if (typeof document !== "undefined" && document.fullscreenElement) {
+				document.exitFullscreen?.();
+				return;
+			}
+			root?.requestFullscreen?.();
+		},
+		toggleMute: () => {
+			if (video) video.muted = !video.muted;
+		},
+		get video() {
+			return video;
+		}
+	};
+};
+//#endregion
+export { createVideoStore };
+
+//# sourceMappingURL=store.mjs.map

package/es/Video/store.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.mjs","names":[],"sources":["../../src/Video/store.ts"],"sourcesContent":["import { markersAt, sectionAt, sortSections, steppedTime } from './time';\nimport type { VideoMarker, VideoPlayer, VideoSection, VideoState } from './type';\n\nexport interface VideoStoreOptions {\n  defaultPlaybackRate?: number;\n  muted?: boolean;\n  onMutedChange?: (muted: boolean) => void;\n  onRateChange?: (rate: number) => void;\n}\n\nexport interface VideoStoreData {\n  fps: number;\n  markers: VideoMarker[];\n  sections: VideoSection[];\n}\n\nexport interface VideoStore extends VideoPlayer {\n  attach: (video: HTMLVideoElement) => () => void;\n  attachRoot: (root: HTMLDivElement | null) => void;\n  getData: () => VideoStoreData;\n  reload: () => void;\n  setData: (data: Partial<VideoStoreData>) => void;\n  setOptions: (options: VideoStoreOptions) => void;\n  toggleFullscreen: () => void;\n}\n\nconst EMPTY_MARKERS: VideoMarker[] = [];\n\nconst sameMarkers = (a: VideoMarker[], b: VideoMarker[]) =>\n  a.length === b.length && a.every((marker, index) => marker === b[index]);\n\ntype FrameVideo = HTMLVideoElement & {\n  cancelVideoFrameCallback?: (handle: number) => void;\n  requestVideoFrameCallback?: (\n    callback: (now: number, frame: { mediaTime: number }) => void,\n  ) => number;\n};\n\nexport const createVideoStore = (): VideoStore => {\n  let data: VideoStoreData = { fps: 30, markers: [], sections: [] };\n  let options: VideoStoreOptions = {};\n  let video: FrameVideo | null = null;\n  let root: HTMLDivElement | null = null;\n  // The frame actually on screen while playing. `currentTime` runs ahead of\n  // the painted frame, and pausing would otherwise land a frame past it.\n  let painted: number | undefined;\n  let state: VideoState = {\n    activeMarkers: EMPTY_MARKERS,\n    activeSection: undefined,\n    captions: true,\n    duration: 0,\n    muted: false,\n    paused: true,\n    rate: 1,\n    size: undefined,\n    status: 'loading',\n    time: 0,\n  };\n  const listeners = new Set<(state: VideoState) => void>();\n\n  const derive = (next: VideoState): VideoState => {\n    const activeSection = sectionAt(data.sections, next.time);\n    const found = markersAt(data.markers, next.time, data.fps);\n    const activeMarkers =\n      found.length === 0\n        ? EMPTY_MARKERS\n        : sameMarkers(found, state.activeMarkers)\n          ? state.activeMarkers\n          : found;\n    return { ...next, activeMarkers, activeSection };\n  };\n\n  const commit = (patch: Partial<VideoState>) => {\n    const next = derive({ ...state, ...patch });\n    const changed = (Object.keys(next) as (keyof VideoState)[]).some(\n      (key) => next[key] !== state[key],\n    );\n    if (!changed) return;\n    state = next;\n    for (const listener of listeners) listener(state);\n  };\n\n  const frameTime = () => {\n    if (!video) return 0;\n    return video.paused ? video.currentTime : (painted ?? video.currentTime);\n  };\n\n  // Before metadata the duration is NaN: only the lower bound applies, and the\n  // element keeps the value as its start position.\n  const clampToMedia = (seconds: number) => {\n    const lower = Math.max(seconds, 0);\n    return video && Number.isFinite(video.duration) ? Math.min(lower, video.duration) : lower;\n  };\n\n  const atEnd = () =>\n    Boolean(video) &&\n    (video!.ended ||\n      (Number.isFinite(video!.duration) && video!.currentTime >= video!.duration - 0.5 / data.fps));\n\n  const seek = (seconds: number) => {\n    if (!video || !Number.isFinite(seconds)) return;\n    painted = undefined;\n    video.currentTime = clampToMedia(seconds);\n    commit({ time: video.currentTime });\n  };\n\n  let attachedOnce = false;\n\n  const store: VideoStore = {\n    attach: (element) => {\n      const target = element as FrameVideo;\n      video = target;\n      let handle = 0;\n      let running = false;\n\n      const cancel = () => {\n        if (!running) return;\n        running = false;\n        if (target.cancelVideoFrameCallback) target.cancelVideoFrameCallback(handle);\n        else cancelAnimationFrame(handle);\n      };\n      const schedule = () => {\n        handle = target.requestVideoFrameCallback\n          ? target.requestVideoFrameCallback(tick)\n          : requestAnimationFrame(() => tick());\n      };\n      function tick(_now?: number, frame?: { mediaTime: number }) {\n        if (!running) return;\n        if (!target.paused) painted = frame?.mediaTime;\n        commit({ time: target.paused ? target.currentTime : (painted ?? target.currentTime) });\n        schedule();\n      }\n      const start = () => {\n        if (running) return;\n        running = true;\n        schedule();\n      };\n\n      const onMeta = () =>\n        commit({\n          duration: target.duration,\n          time: target.currentTime,\n          size: { height: target.videoHeight, width: target.videoWidth },\n          status: 'ready',\n        });\n      const onPlay = () => {\n        commit({ paused: false });\n        start();\n      };\n      const onPause = () => {\n        cancel();\n        const held = painted;\n        painted = undefined;\n        // At the end the element must stay ended, or play() would resume on\n        // the last frame instead of restarting.\n        if (!atEnd() && held !== undefined && Math.abs(target.currentTime - held) > 1e-3)\n          target.currentTime = held;\n        commit({ paused: true, time: target.currentTime });\n      };\n      const onSeeked = () => {\n        painted = undefined;\n        commit({ time: target.currentTime });\n      };\n      const onRate = () => {\n        if (target.playbackRate === state.rate) return;\n        commit({ rate: target.playbackRate });\n        options.onRateChange?.(target.playbackRate);\n      };\n      const onVolume = () => {\n        if (target.muted === state.muted) return;\n        commit({ muted: target.muted });\n        options.onMutedChange?.(target.muted);\n      };\n      const onError = () => commit({ status: 'error' });\n\n      // Initial props apply once; a later video (a new src) keeps the viewer's choices.\n      const muted = attachedOnce ? state.muted : (options.muted ?? false);\n      const rate = attachedOnce ? state.rate : (options.defaultPlaybackRate ?? 1);\n      attachedOnce = true;\n      commit({\n        duration: Number.isFinite(target.duration) ? target.duration : 0,\n        muted,\n        paused: target.paused,\n        rate,\n        size: undefined,\n        status: 'loading',\n        time: target.currentTime,\n      });\n      if (target.muted !== muted) target.muted = muted;\n      if (target.playbackRate !== rate) target.playbackRate = rate;\n\n      const events: [string, () => void][] = [\n        ['loadedmetadata', onMeta],\n        ['play', onPlay],\n        ['pause', onPause],\n        ['ended', onPause],\n        ['seeked', onSeeked],\n        ['ratechange', onRate],\n        ['volumechange', onVolume],\n        ['error', onError],\n      ];\n      for (const [type, handler] of events) target.addEventListener(type, handler);\n      if (target.readyState >= 1) onMeta();\n      if (!target.paused) start();\n\n      return () => {\n        cancel();\n        for (const [type, handler] of events) target.removeEventListener(type, handler);\n        if (video === target) video = null;\n      };\n    },\n    attachRoot: (element) => {\n      root = element;\n    },\n    getData: () => data,\n    getState: () => state,\n    pause: () => video?.pause(),\n    play: async () => {\n      await video?.play();\n    },\n    reload: () => {\n      if (!video) return;\n      commit({ status: 'loading' });\n      video.load();\n    },\n    requestFullscreen: async () => {\n      await root?.requestFullscreen?.();\n    },\n    get root() {\n      return root;\n    },\n    seek,\n    setCaptions: (captions) => commit({ captions }),\n    setData: (next) => {\n      data = {\n        ...data,\n        ...next,\n        sections: next.sections ? sortSections(next.sections) : data.sections,\n      };\n      commit({});\n    },\n    setMuted: (muted) => {\n      if (video) video.muted = muted;\n    },\n    setOptions: (next) => {\n      options = { ...options, ...next };\n    },\n    setRate: (rate) => {\n      if (video) video.playbackRate = rate;\n    },\n    step: (frames) => {\n      if (!video) return;\n      const from = frameTime();\n      painted = undefined;\n      video.pause();\n      const limit = Number.isFinite(video.duration) ? video.duration : Number.POSITIVE_INFINITY;\n      video.currentTime = steppedTime(from, frames, limit, data.fps);\n      commit({ time: video.currentTime });\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n    toggle: () => {\n      if (!video) return;\n      if (!video.paused) return video.pause();\n      if (atEnd()) video.currentTime = 0;\n      void video.play();\n    },\n    toggleFullscreen: () => {\n      if (typeof document !== 'undefined' && document.fullscreenElement) {\n        void document.exitFullscreen?.();\n        return;\n      }\n      void root?.requestFullscreen?.();\n    },\n    toggleMute: () => {\n      if (video) video.muted = !video.muted;\n    },\n    get video() {\n      return video;\n    },\n  };\n\n  return store;\n};\n"],"mappings":";;AA0BA,MAAM,gBAA+B,CAAC;AAEtC,MAAM,eAAe,GAAkB,MACrC,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,QAAQ,UAAU,WAAW,EAAE,MAAM;AASzE,MAAa,yBAAqC;CAChD,IAAI,OAAuB;EAAE,KAAK;EAAI,SAAS,CAAC;EAAG,UAAU,CAAC;CAAE;CAChE,IAAI,UAA6B,CAAC;CAClC,IAAI,QAA2B;CAC/B,IAAI,OAA8B;CAGlC,IAAI;CACJ,IAAI,QAAoB;EACtB,eAAe;EACf,eAAe,KAAA;EACf,UAAU;EACV,UAAU;EACV,OAAO;EACP,QAAQ;EACR,MAAM;EACN,MAAM,KAAA;EACN,QAAQ;EACR,MAAM;CACR;CACA,MAAM,4BAAY,IAAI,IAAiC;CAEvD,MAAM,UAAU,SAAiC;EAC/C,MAAM,gBAAgB,UAAU,KAAK,UAAU,KAAK,IAAI;EACxD,MAAM,QAAQ,UAAU,KAAK,SAAS,KAAK,MAAM,KAAK,GAAG;EACzD,MAAM,gBACJ,MAAM,WAAW,IACb,gBACA,YAAY,OAAO,MAAM,aAAa,IACpC,MAAM,gBACN;EACR,OAAO;GAAE,GAAG;GAAM;GAAe;EAAc;CACjD;CAEA,MAAM,UAAU,UAA+B;EAC7C,MAAM,OAAO,OAAO;GAAE,GAAG;GAAO,GAAG;EAAM,CAAC;EAI1C,IAAI,CAHa,OAAO,KAAK,IAAI,CAAC,CAA0B,MACzD,QAAQ,KAAK,SAAS,MAAM,IAEpB,GAAG;EACd,QAAQ;EACR,KAAK,MAAM,YAAY,WAAW,SAAS,KAAK;CAClD;CAEA,MAAM,kBAAkB;EACtB,IAAI,CAAC,OAAO,OAAO;EACnB,OAAO,MAAM,SAAS,MAAM,cAAe,WAAW,MAAM;CAC9D;CAIA,MAAM,gBAAgB,YAAoB;EACxC,MAAM,QAAQ,KAAK,IAAI,SAAS,CAAC;EACjC,OAAO,SAAS,OAAO,SAAS,MAAM,QAAQ,IAAI,KAAK,IAAI,OAAO,MAAM,QAAQ,IAAI;CACtF;CAEA,MAAM,cACJ,QAAQ,KAAK,MACZ,MAAO,SACL,OAAO,SAAS,MAAO,QAAQ,KAAK,MAAO,eAAe,MAAO,WAAW,KAAM,KAAK;CAE5F,MAAM,QAAQ,YAAoB;EAChC,IAAI,CAAC,SAAS,CAAC,OAAO,SAAS,OAAO,GAAG;EACzC,UAAU,KAAA;EACV,MAAM,cAAc,aAAa,OAAO;EACxC,OAAO,EAAE,MAAM,MAAM,YAAY,CAAC;CACpC;CAEA,IAAI,eAAe;CAoLnB,OAAO;EAjLL,SAAS,YAAY;GACnB,MAAM,SAAS;GACf,QAAQ;GACR,IAAI,SAAS;GACb,IAAI,UAAU;GAEd,MAAM,eAAe;IACnB,IAAI,CAAC,SAAS;IACd,UAAU;IACV,IAAI,OAAO,0BAA0B,OAAO,yBAAyB,MAAM;SACtE,qBAAqB,MAAM;GAClC;GACA,MAAM,iBAAiB;IACrB,SAAS,OAAO,4BACZ,OAAO,0BAA0B,IAAI,IACrC,4BAA4B,KAAK,CAAC;GACxC;GACA,SAAS,KAAK,MAAe,OAA+B;IAC1D,IAAI,CAAC,SAAS;IACd,IAAI,CAAC,OAAO,QAAQ,UAAU,OAAO;IACrC,OAAO,EAAE,MAAM,OAAO,SAAS,OAAO,cAAe,WAAW,OAAO,YAAa,CAAC;IACrF,SAAS;GACX;GACA,MAAM,cAAc;IAClB,IAAI,SAAS;IACb,UAAU;IACV,SAAS;GACX;GAEA,MAAM,eACJ,OAAO;IACL,UAAU,OAAO;IACjB,MAAM,OAAO;IACb,MAAM;KAAE,QAAQ,OAAO;KAAa,OAAO,OAAO;IAAW;IAC7D,QAAQ;GACV,CAAC;GACH,MAAM,eAAe;IACnB,OAAO,EAAE,QAAQ,MAAM,CAAC;IACxB,MAAM;GACR;GACA,MAAM,gBAAgB;IACpB,OAAO;IACP,MAAM,OAAO;IACb,UAAU,KAAA;IAGV,IAAI,CAAC,MAAM,KAAK,SAAS,KAAA,KAAa,KAAK,IAAI,OAAO,cAAc,IAAI,IAAI,MAC1E,OAAO,cAAc;IACvB,OAAO;KAAE,QAAQ;KAAM,MAAM,OAAO;IAAY,CAAC;GACnD;GACA,MAAM,iBAAiB;IACrB,UAAU,KAAA;IACV,OAAO,EAAE,MAAM,OAAO,YAAY,CAAC;GACrC;GACA,MAAM,eAAe;IACnB,IAAI,OAAO,iBAAiB,MAAM,MAAM;IACxC,OAAO,EAAE,MAAM,OAAO,aAAa,CAAC;IACpC,QAAQ,eAAe,OAAO,YAAY;GAC5C;GACA,MAAM,iBAAiB;IACrB,IAAI,OAAO,UAAU,MAAM,OAAO;IAClC,OAAO,EAAE,OAAO,OAAO,MAAM,CAAC;IAC9B,QAAQ,gBAAgB,OAAO,KAAK;GACtC;GACA,MAAM,gBAAgB,OAAO,EAAE,QAAQ,QAAQ,CAAC;GAGhD,MAAM,QAAQ,eAAe,MAAM,QAAS,QAAQ,SAAS;GAC7D,MAAM,OAAO,eAAe,MAAM,OAAQ,QAAQ,uBAAuB;GACzE,eAAe;GACf,OAAO;IACL,UAAU,OAAO,SAAS,OAAO,QAAQ,IAAI,OAAO,WAAW;IAC/D;IACA,QAAQ,OAAO;IACf;IACA,MAAM,KAAA;IACN,QAAQ;IACR,MAAM,OAAO;GACf,CAAC;GACD,IAAI,OAAO,UAAU,OAAO,OAAO,QAAQ;GAC3C,IAAI,OAAO,iBAAiB,MAAM,OAAO,eAAe;GAExD,MAAM,SAAiC;IACrC,CAAC,kBAAkB,MAAM;IACzB,CAAC,QAAQ,MAAM;IACf,CAAC,SAAS,OAAO;IACjB,CAAC,SAAS,OAAO;IACjB,CAAC,UAAU,QAAQ;IACnB,CAAC,cAAc,MAAM;IACrB,CAAC,gBAAgB,QAAQ;IACzB,CAAC,SAAS,OAAO;GACnB;GACA,KAAK,MAAM,CAAC,MAAM,YAAY,QAAQ,OAAO,iBAAiB,MAAM,OAAO;GAC3E,IAAI,OAAO,cAAc,GAAG,OAAO;GACnC,IAAI,CAAC,OAAO,QAAQ,MAAM;GAE1B,aAAa;IACX,OAAO;IACP,KAAK,MAAM,CAAC,MAAM,YAAY,QAAQ,OAAO,oBAAoB,MAAM,OAAO;IAC9E,IAAI,UAAU,QAAQ,QAAQ;GAChC;EACF;EACA,aAAa,YAAY;GACvB,OAAO;EACT;EACA,eAAe;EACf,gBAAgB;EAChB,aAAa,OAAO,MAAM;EAC1B,MAAM,YAAY;GAChB,MAAM,OAAO,KAAK;EACpB;EACA,cAAc;GACZ,IAAI,CAAC,OAAO;GACZ,OAAO,EAAE,QAAQ,UAAU,CAAC;GAC5B,MAAM,KAAK;EACb;EACA,mBAAmB,YAAY;GAC7B,MAAM,MAAM,oBAAoB;EAClC;EACA,IAAI,OAAO;GACT,OAAO;EACT;EACA;EACA,cAAc,aAAa,OAAO,EAAE,SAAS,CAAC;EAC9C,UAAU,SAAS;GACjB,OAAO;IACL,GAAG;IACH,GAAG;IACH,UAAU,KAAK,WAAW,aAAa,KAAK,QAAQ,IAAI,KAAK;GAC/D;GACA,OAAO,CAAC,CAAC;EACX;EACA,WAAW,UAAU;GACnB,IAAI,OAAO,MAAM,QAAQ;EAC3B;EACA,aAAa,SAAS;GACpB,UAAU;IAAE,GAAG;IAAS,GAAG;GAAK;EAClC;EACA,UAAU,SAAS;GACjB,IAAI,OAAO,MAAM,eAAe;EAClC;EACA,OAAO,WAAW;GAChB,IAAI,CAAC,OAAO;GACZ,MAAM,OAAO,UAAU;GACvB,UAAU,KAAA;GACV,MAAM,MAAM;GACZ,MAAM,QAAQ,OAAO,SAAS,MAAM,QAAQ,IAAI,MAAM,WAAW,OAAO;GACxE,MAAM,cAAc,YAAY,MAAM,QAAQ,OAAO,KAAK,GAAG;GAC7D,OAAO,EAAE,MAAM,MAAM,YAAY,CAAC;EACpC;EACA,YAAY,aAAa;GACvB,UAAU,IAAI,QAAQ;GACtB,aAAa;IACX,UAAU,OAAO,QAAQ;GAC3B;EACF;EACA,cAAc;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,MAAM,QAAQ,OAAO,MAAM,MAAM;GACtC,IAAI,MAAM,GAAG,MAAM,cAAc;GACjC,MAAW,KAAK;EAClB;EACA,wBAAwB;GACtB,IAAI,OAAO,aAAa,eAAe,SAAS,mBAAmB;IACjE,SAAc,iBAAiB;IAC/B;GACF;GACA,MAAW,oBAAoB;EACjC;EACA,kBAAkB;GAChB,IAAI,OAAO,MAAM,QAAQ,CAAC,MAAM;EAClC;EACA,IAAI,QAAQ;GACV,OAAO;EACT;CAGS;AACb"}