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

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":"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"}

package/es/Video/style.mjs

@@ -1,47 +1,417 @@
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 //#region src/Video/style.ts
-const maskHoverCls = "lobe-video-mask";
 const styles = {
-	filled: {
-		kVAM5u: "lb10cypdb",
+	barButton: {
+		kmVPX3: "lb1717udv",
+		kaIpWk: "lb1kogg8i",
+		ksu8eU: "lbng3xce",
+		kUk6DE: "lb1okw0bk",
+		kI3sdo: "lb1a2a7pz lb1aklsn",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjbqb8w lb19ait8a",
+		kMwMTN: "lb1heor9g",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kMv6JI: "lbjb2p0i",
+		kGuDYH: "lbfifm61",
+		kjj79g: "lbl56j7k",
+		kZKoxP: "lb1fgtraw",
+		k7Eaqz: "lb1264ykn",
+		$$css: true
+	},
+	barButtonActive: {
+		kWkggS: "lb1cqq46t",
+		$$css: true
+	},
+	caption: {
+		kaIpWk: "lbur7f20",
+		k8WAf4: "lb1vvogim",
+		kg3NbH: "lbaope02",
+		kmkexE: "lbjltk9q lb9kvfbb",
+		kWkggS: "lb1a9z08n",
+		kMwMTN: "lbfungia",
+		kGuDYH: "lb4z9k3i",
+		krVfgx: "lb191j7n5",
+		kLqNvP: "lbzwoauc",
+		kLWn49: "lb1evy7pa",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lbhtitgo",
+		ks0D6T: "lb1cxeki3",
+		$$css: true
+	},
+	captionItem: {
+		keoZOQ: "lb1xmf6yo lb14l7nz5",
+		$$css: true
+	},
+	captionRaised: {
+		krVfgx: "lbhjxwu4",
+		$$css: true
+	},
+	captionTitle: {
+		kOIVth: "lb17d4w8g",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		k63SB2: "lb1s688f",
+		$$css: true
+	},
+	centerPlay: {
+		kaIpWk: "lb16rqkct",
+		ksu8eU: "lbng3xce",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lb12cimdh",
+		kMwMTN: "lbfungia",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb78zum5",
+		k87sOh: "lbwa60dl",
+		kLqNvP: "lbbudbmw",
+		kjj79g: "lbl56j7k",
+		kVAEAm: "lb10l6tqk",
+		k3aq6I: "lb11lhmoz",
+		kY2c9j: "lbhtitgo",
+		kZKoxP: "lbnnlda6",
+		kzqmXN: "lb15yg21f",
+		$$css: true
+	},
+	chip: {
+		kaIpWk: "lb1kogg8i",
+		ksu8eU: "lbng3xce",
+		kOIVth: "lb195vfkc",
+		kVQacm: "lbb3r6kr",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbhkldz1 lb117i599",
+		kMwMTN: "lb1heor9g",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kMv6JI: "lbjb2p0i",
+		kGuDYH: "lbfifm61",
+		kwRFfy: "lb11lfxj5",
+		kZCmMZ: "lbmzvs34",
+		kZKoxP: "lbxk0z11",
+		ks0D6T: "lb8jryan",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	chipLabelBackward: {
+		k44tkh: "lbw6taxk lb1u6grsq",
+		kKVMdj: "lb6ojt31",
+		kyAemX: "lbvjiv3b",
+		$$css: true
+	},
+	chipLabelForward: {
+		k44tkh: "lbw6taxk lb1u6grsq",
+		kKVMdj: "lbvvj72e",
+		kyAemX: "lbvjiv3b",
+		$$css: true
+	},
+	chipText: {
+		kVQacm: "lbb3r6kr",
+		k1xSpc: "lb1lliihq",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	controls: {
+		kg3NbH: "lbaope02",
+		kMwMTN: "lbfungia",
+		kGO01o: "lb10b6aqq",
+		$$css: true
+	},
+	controlsBelow: {
+		kWkggS: "lb1aje6hn",
+		kLKAdn: "lb1yrsyyn",
+		$$css: true
+	},
+	controlsHidden: {
+		kSiTet: "lbg01cxk",
+		kfzvcC: "lb47corl",
+		$$css: true
+	},
+	controlsOverlay: {
+		kkqhue: "lb17y0mx6",
+		kmkexE: "lbzdg38j lb9kvfbb",
+		kKwaWg: "lbl8g59w",
+		krVfgx: "lb1ey2m1c",
+		kLKAdn: "lb13zrc24",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lbzkaem6",
+		$$css: true
+	},
+	disabled: {
+		kSiTet: "lbti2d7y",
+		kfzvcC: "lb47corl",
+		$$css: true
+	},
+	dot: {
+		kaIpWk: "lb16rqkct",
+		kUk6DE: "lb1okw0bk",
+		kZKoxP: "lbols6we",
+		kzqmXN: "lb1v4s8kt",
+		$$css: true
+	},
+	error: {
+		kpwlN0: "lb10a8y8t",
+		kOIVth: "lb883omv",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lb1r1mewj",
+		kMwMTN: "lb1qk1tsj",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kGuDYH: "lb4z9k3i",
+		kjj79g: "lbl56j7k",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lboegz02",
+		$$css: true
+	},
+	errorActions: {
+		kOIVth: "lb167g77z",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	errorButton: {
+		kVAM5u: "lb1e75yku",
+		kaIpWk: "lb1kogg8i",
 		ksu8eU: "lb1y0btm7",
 		kMzoRj: "lbmkeg23",
-		kWkggS: "lbaljia1",
+		kOIVth: "lb17d4w8g",
+		kg3NbH: "lb1awh872",
+		kybGjl: "lb1hl2dhg",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lblw48vq lb16gz26q",
+		kMwMTN: "lbfungia",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kMv6JI: "lbjb2p0i",
+		kGuDYH: "lbfifm61",
+		kZKoxP: "lb1fgtraw",
 		$$css: true
 	},
-	mask: {
-		kpwlN0: "lb10a8y8t",
-		kmkexE: "lbzdg38j",
-		kWkggS: "lb1a3x57l",
-		kSiTet: "lbg01cxk lbk1as1i",
+	frame: {
+		kVQacm: "lbb3r6kr",
+		kWkggS: "lb1r1mewj",
+		kVAEAm: "lb1n2onr6",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	frameNo: {
+		kMwMTN: "lb1ko894a",
+		kMv6JI: "lb2xbw48",
+		kcqcaj: "lbss6m8b",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	hairline: {
+		kWkggS: "lb12cimdh",
+		k87sOh: "lbfr5jun",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kZKoxP: "lbqu0tyb",
+		kzqmXN: "lb1i1rx1s",
+		$$css: true
+	},
+	head: {
+		kaIpWk: "lb16rqkct",
+		kWkggS: "lb83z2og",
+		k87sOh: "lbndqk7f",
+		keTefX: "lbw01apr",
 		kfzvcC: "lb47corl",
 		kVAEAm: "lb10l6tqk",
+		kZKoxP: "lb1kpxq89",
+		kzqmXN: "lbsmyaan",
+		$$css: true
+	},
+	marker: {
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb1bmaitd",
+		kaIpWk: "lb16rqkct",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbvndefy",
+		kI3sdo: "lb1a2a7pz lbwv73w1",
+		kmkexE: "lb1ri61pi lb9kvfbb",
+		kkrTdU: "lb1ypdohk",
+		k87sOh: "lb1qiirwl",
+		keTefX: "lb137kccz",
+		kVAEAm: "lb10l6tqk",
+		k3aq6I: "lbqzx2ld",
 		kY2c9j: "lb1vjfegm",
-		kZKoxP: "lb5yr21d",
-		kzqmXN: "lbh8yej3",
+		kZKoxP: "lb170jfvy",
+		kzqmXN: "lb1fsd2vl",
+		$$css: true
+	},
+	preview: {
+		kOIVth: "lb1jnr06f",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		krVfgx: "lby58vm5",
+		keTefX: "lbyjvg7b",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kY2c9j: "lbhtitgo",
+		kzqmXN: "lb1f1nzxn",
+		$$css: true
+	},
+	previewCanvas: {
+		kVAM5u: "lb165c8v",
+		kaIpWk: "lbur7f20",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lb1r1mewj",
+		k1xSpc: "lb1lliihq",
+		kZKoxP: "lb1q7kiqf",
+		kzqmXN: "lb1f1nzxn",
+		$$css: true
+	},
+	previewLabel: {
+		kaIpWk: "lb1kogg8i",
+		kVQacm: "lbb3r6kr",
+		k8WAf4: "lbf4egzd",
+		kg3NbH: "lbdqyycr",
+		kWkggS: "lb1pl4qn3",
+		kGuDYH: "lbfifm61",
+		kLWn49: "lb37zpob",
+		k9WMMc: "lb2b8uid",
+		kg5iWk: "lblyipyv",
+		ks0D6T: "lb1gocmvm",
+		$$css: true
+	},
+	previewTime: {
+		kMwMTN: "lb1a853yn",
+		kMv6JI: "lb2xbw48",
+		kGuDYH: "lb1j6dyjg",
+		$$css: true
+	},
+	previewTitle: {
+		k63SB2: "lb1s688f",
+		khDVqt: "lbuxw1ft",
 		$$css: true
 	},
 	root: {
-		kaIpWk: "lb1sbi92r",
+		kaIpWk: "lb1ndkxwp",
+		kI3sdo: "lb1a2a7pz",
 		kVQacm: "lbb3r6kr",
-		kWkggS: "lbaljia1",
-		k1K539: "lb13xjzxd",
-		keoZOQ: "lbdj266r",
+		kWkggS: "lb1r1mewj",
+		kGVxlE: "lb2pgxse",
+		kMwMTN: "lbfungia",
+		kLWn49: "lbo5v014",
 		kVAEAm: "lb1n2onr6",
-		kZKoxP: "lbt7dq6l",
-		kskxy: "lbjyiegp",
-		ks0D6T: "lb1mm0wbm",
-		kAzted: "lb1p3ldy4",
-		k7Eaqz: "lbuxkfb3",
-		kzqmXN: "lbh8yej3",
+		ks0D6T: "lb193iq5w",
 		$$css: true
 	},
-	video: {
+	rateButton: {
+		kg3NbH: "lb1xijbu4",
+		kMv6JI: "lb2xbw48",
+		$$css: true
+	},
+	row: {
+		kOIVth: "lb1jnr06f",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kGuDYH: "lbfifm61",
+		kZKoxP: "lb10w6t97",
+		$$css: true
+	},
+	sectionChip: {
+		kVAM5u: "lb786t8j",
+		kaIpWk: "lb1kogg8i",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kOIVth: "lb17d4w8g",
+		kI3sdo: "lb1a2a7pz lb1aklsn",
+		kg3NbH: "lbdqyycr",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjbqb8w lb1cbgfi2",
+		kMwMTN: "lbjmch63 lb1iih0q2",
 		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kMv6JI: "lbjb2p0i",
+		kGuDYH: "lbfifm61",
+		kZKoxP: "lbxk0z11",
+		$$css: true
+	},
+	sectionChipActive: {
+		kWkggS: "lbxywgfh",
+		kMwMTN: "lbfungia",
+		$$css: true
+	},
+	sectionChipTime: {
+		kMv6JI: "lb2xbw48",
+		kSiTet: "lb1ks1olk",
+		$$css: true
+	},
+	sectionList: {
+		kOIVth: "lb17d4w8g",
+		k8WAf4: "lb1vvogim",
+		kg3NbH: "lbaope02",
+		kWkggS: "lb1aje6hn",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		$$css: true
+	},
+	segment: {
+		kaIpWk: "lb1cum3z5",
+		kVQacm: "lbb3r6kr",
+		kmkexE: "lbgy48lf lb9kvfbb",
+		kWkggS: "lbyuqjph",
+		k87sOh: "lbfr5jun",
+		kVAEAm: "lb10l6tqk",
+		kZKoxP: "lbqu0tyb",
+		$$css: true
+	},
+	segmentFill: {
+		kYYq5F: "lb10no89f",
+		kLqNvP: "lb1o0tod",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	segmentHovered: {
+		k87sOh: "lb1atx4j1",
+		kZKoxP: "lbdk7pt",
+		$$css: true
+	},
+	spacer: {
+		kUk6DE: "lb98rzlu",
+		$$css: true
+	},
+	surface: {
+		kpwlN0: "lb10a8y8t",
+		kkrTdU: "lb1ypdohk",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	time: {
+		kMwMTN: "lb1a853yn",
+		kMv6JI: "lb2xbw48",
+		kcqcaj: "lbss6m8b",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	track: {
+		kI3sdo: "lb1a2a7pz",
+		kkrTdU: "lb1ypdohk",
+		kVAEAm: "lb1n2onr6",
+		kFalU9: "lb5ve5x3",
+		kZKoxP: "lb1qx5ct2",
+		$$css: true
+	},
+	video: {
+		k1xSpc: "lb1lliihq",
+		kVIFPx: "lb19kjcj4",
+		kZKoxP: "lb5yr21d",
 		kzqmXN: "lbh8yej3",
 		$$css: true
 	}
 };
+const markerColor = (color) => {
+	switch (color) {
+		case void 0:
+		case "info": return cssVar.colorInfo;
+		case "success": return cssVar.colorSuccess;
+		case "warning": return cssVar.colorWarning;
+		case "error": return cssVar.colorError;
+		default: return color;
+	}
+};
 //#endregion
-export { maskHoverCls, styles };
+export { markerColor, styles };
 
 //# sourceMappingURL=style.mjs.map