@videojs/react 10.0.0-rc.2 → 10.0.0-rc.3

package/dist/dev/internal/skins/default-video/components/sliders/time-slider.js

@@ -11,45 +11,141 @@ import { TimeSliderChapters } from "../../../../../ui/time-slider/chapters.js";
 import { TimeSliderRoot } from "../../../../../ui/time-slider/root.js";
 import ForwardRef from "../../../../../icons/dist/react/default/spinner.js";
 import { SliderBuffer as SliderBuffer$1, SliderFill as SliderFill$1, SliderThumb as SliderThumb$1, SliderTrack as SliderTrack$1 } from "../../../shared/components/sliders/slider.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn, resolveClassName } from "@videojs/utils/style";
 //#region src/internal/skins/default-video/components/sliders/time-slider.tsx
-function TimeSlider({ className, previewOverflow = "visible", ...props } = {}) {
-	return /* @__PURE__ */ jsxs(TimeSliderRoot, {
-		className: (state) => cn("media-slider", "media-time-slider", resolveClassName(className, state)),
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(TimeSliderChapters, {
-				className: "media-time-slider-chapters",
-				renderChapter: (props) => /* @__PURE__ */ jsx("div", {
-					className: "media-time-slider-chapter",
-					...props,
-					children: /* @__PURE__ */ jsxs(SliderTrack, {
-						render: /* @__PURE__ */ jsx(SliderTrack$1, {}),
-						className: "media-time-slider-chapter-track",
-						children: [/* @__PURE__ */ jsx(SliderBuffer, { render: /* @__PURE__ */ jsx(SliderBuffer$1, {}) }), /* @__PURE__ */ jsx(SliderFill, { render: /* @__PURE__ */ jsx(SliderFill$1, {}) })]
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx(SliderThumb, {
-				render: /* @__PURE__ */ jsx(SliderThumb$1, {}),
-				className: "media-time-slider-thumb"
-			}),
-			/* @__PURE__ */ jsxs(SliderPreview, {
-				className: "media-slider-preview",
-				overflow: previewOverflow,
-				children: [/* @__PURE__ */ jsxs(SliderThumbnailRoot, {
-					className: cn("media-slider-preview-content", "media-popup-surface", "media-slider-thumbnail"),
-					children: [/* @__PURE__ */ jsx(ThumbnailImage, { className: "media-slider-thumbnail-image" }), /* @__PURE__ */ jsx(ForwardRef, { className: "media-slider-thumbnail-spinner-icon" })]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: cn("media-slider-preview-content", "media-time-slider-preview-content"),
-					children: [/* @__PURE__ */ jsx(TimeSliderChapterTitle, { className: "media-time-slider-chapter-title" }), /* @__PURE__ */ jsx(SliderValue, {
-						className: "media-time-slider-value",
-						type: "pointer"
-					})]
-				})]
-			})
-		]
+function TimeSlider(t0) {
+	const $ = c(25);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let className;
+	let props;
+	let renderThumbnail;
+	let t2;
+	if ($[2] !== t1) {
+		({className, previewOverflow: t2, renderThumbnail, ...props} = t1);
+		$[2] = t1;
+		$[3] = className;
+		$[4] = props;
+		$[5] = renderThumbnail;
+		$[6] = t2;
+	} else {
+		className = $[3];
+		props = $[4];
+		renderThumbnail = $[5];
+		t2 = $[6];
+	}
+	const previewOverflow = t2 === void 0 ? "visible" : t2;
+	let t3;
+	if ($[7] !== className) {
+		t3 = (state) => cn("media-slider", "media-time-slider", resolveClassName(className, state));
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(TimeSliderChapters, {
+			className: "media-time-slider-chapters",
+			renderChapter: _temp
+		});
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(SliderThumb, {
+			render: /* @__PURE__ */ jsx(SliderThumb$1, {}),
+			className: "media-time-slider-thumb"
+		});
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = cn("media-slider-preview-content", "media-popup-surface", "media-slider-thumbnail");
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== renderThumbnail) {
+		t7 = /* @__PURE__ */ jsx(ThumbnailImage, {
+			render: renderThumbnail,
+			className: "media-slider-thumbnail-image"
+		});
+		$[12] = renderThumbnail;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(ForwardRef, { className: "media-slider-thumbnail-spinner-icon" });
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(SliderThumbnailRoot, {
+			className: t6,
+			children: [t7, t8]
+		});
+		$[15] = t7;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: cn("media-slider-preview-content", "media-time-slider-preview-content"),
+			children: [/* @__PURE__ */ jsx(TimeSliderChapterTitle, { className: "media-time-slider-chapter-title" }), /* @__PURE__ */ jsx(SliderValue, {
+				className: "media-time-slider-value",
+				type: "pointer"
+			})]
+		});
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== previewOverflow || $[19] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(SliderPreview, {
+			className: "media-slider-preview",
+			overflow: previewOverflow,
+			children: [t9, t10]
+		});
+		$[18] = previewOverflow;
+		$[19] = t9;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== props || $[22] !== t11 || $[23] !== t3) {
+		t12 = /* @__PURE__ */ jsxs(TimeSliderRoot, {
+			className: t3,
+			...props,
+			children: [
+				t4,
+				t5,
+				t11
+			]
+		});
+		$[21] = props;
+		$[22] = t11;
+		$[23] = t3;
+		$[24] = t12;
+	} else t12 = $[24];
+	return t12;
+}
+function _temp(props_0) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "media-time-slider-chapter",
+		...props_0,
+		children: /* @__PURE__ */ jsxs(SliderTrack, {
+			render: /* @__PURE__ */ jsx(SliderTrack$1, {}),
+			className: "media-time-slider-chapter-track",
+			children: [/* @__PURE__ */ jsx(SliderBuffer, {
+				render: /* @__PURE__ */ jsx(SliderBuffer$1, {}),
+				className: "media-time-slider-chapter-layer"
+			}), /* @__PURE__ */ jsx(SliderFill, {
+				render: /* @__PURE__ */ jsx(SliderFill$1, {}),
+				className: "media-time-slider-chapter-layer"
+			})]
+		})
 	});
 }
 //#endregion

package/dist/dev/internal/skins/default-video/components/sliders/time-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slider.js","names":["TimeSliderPrimitive.Root","TimeSliderPrimitive.Chapters","TimeSliderPrimitive.Track","SliderTrack","TimeSliderPrimitive.Buffer","SliderBuffer","TimeSliderPrimitive.Fill","SliderFill","TimeSliderPrimitive.Thumb","SliderThumb","TimeSliderPrimitive.Preview","Slider.Thumbnail.Root","Slider.Thumbnail.Image","SpinnerIconPrimitive","TimeSliderPrimitive.ChapterTitle","TimeSliderPrimitive.Value"],"sources":["../../../../../../../src/internal/skins/default-video/components/sliders/time-slider.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport type { SliderPreviewOverflow } from '@videojs/core';\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport { SpinnerIcon as SpinnerIconPrimitive } from '../../../../../icons/index';\nimport { TimeSlider as TimeSliderPrimitive } from '../../../../skin-primitives';\nimport { Slider } from '../../../../skin-primitives';\nimport { SliderBuffer, SliderFill, SliderThumb, SliderTrack } from '../../../shared/components/sliders/slider';\n\nexport interface TimeSliderProps extends Omit<TimeSliderPrimitive.RootProps, 'children'> {\n  previewOverflow?: SliderPreviewOverflow | undefined;\n}\n\nexport function TimeSlider({ className, previewOverflow = 'visible', ...props }: TimeSliderProps = {}) {\n  return (\n    <TimeSliderPrimitive.Root\n      className={(state) => cn('media-slider', 'media-time-slider', resolveClassName(className, state))}\n      {...props}\n    >\n      <TimeSliderPrimitive.Chapters\n        className={'media-time-slider-chapters'}\n        renderChapter={(props) => (\n          <div className={'media-time-slider-chapter'} {...props}>\n            <TimeSliderPrimitive.Track render={<SliderTrack />} className={'media-time-slider-chapter-track'}>\n              <TimeSliderPrimitive.Buffer render={<SliderBuffer />} />\n              <TimeSliderPrimitive.Fill render={<SliderFill />} />\n            </TimeSliderPrimitive.Track>\n          </div>\n        )}\n      ></TimeSliderPrimitive.Chapters>\n      <TimeSliderPrimitive.Thumb render={<SliderThumb />} className={'media-time-slider-thumb'} />\n      <TimeSliderPrimitive.Preview className={'media-slider-preview'} overflow={previewOverflow}>\n        <Slider.Thumbnail.Root\n          className={cn('media-slider-preview-content', 'media-popup-surface', 'media-slider-thumbnail')}\n        >\n          <Slider.Thumbnail.Image className={'media-slider-thumbnail-image'} />\n          <SpinnerIconPrimitive className={'media-slider-thumbnail-spinner-icon'} />\n        </Slider.Thumbnail.Root>\n        <div className={cn('media-slider-preview-content', 'media-time-slider-preview-content')}>\n          <TimeSliderPrimitive.ChapterTitle className={'media-time-slider-chapter-title'} />\n          <TimeSliderPrimitive.Value className={'media-time-slider-value'} type=\"pointer\" />\n        </div>\n      </TimeSliderPrimitive.Preview>\n    </TimeSliderPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAaA,SAAgB,WAAW,EAAE,WAAW,kBAAkB,WAAW,GAAG,UAA2B,CAAC,GAAG;CACrG,OACE,qBAACA,gBAAD;EACE,YAAY,UAAU,GAAG,gBAAgB,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAChG,GAAI;EAFN,UAAA;GAIE,oBAACC,oBAAD;IACE,WAAW;IACX,gBAAgB,UACd,oBAAC,OAAD;KAAK,WAAW;KAA6B,GAAI;KAC/C,UAAA,qBAACC,aAAD;MAA2B,QAAQ,oBAACC,eAAD,CAAc,CAAA;MAAG,WAAW;MAA/D,UAAA,CACE,oBAACC,cAAD,EAA4B,QAAQ,oBAACC,gBAAD,CAAe,CAAA,EAAI,CAAA,GACvD,oBAACC,YAAD,EAA0B,QAAQ,oBAACC,cAAD,CAAa,CAAA,EAAI,CAAA,CAC1B;;IACxB,CAAA;GAEsB,CAAA;GAC/B,oBAACC,aAAD;IAA2B,QAAQ,oBAACC,eAAD,CAAc,CAAA;IAAG,WAAW;GAA4B,CAAA;GAC3F,qBAACC,eAAD;IAA6B,WAAW;IAAwB,UAAU;IAA1E,UAAA,CACE,qBAACC,qBAAD;KACE,WAAW,GAAG,gCAAgC,uBAAuB,wBAAwB;KAD/F,UAAA,CAGE,oBAACC,gBAAD,EAAwB,WAAW,+BAAiC,CAAA,GACpE,oBAACC,YAAD,EAAsB,WAAW,sCAAwC,CAAA,CACpD;IACvB,CAAA,GAAA,qBAAC,OAAD;KAAK,WAAW,GAAG,gCAAgC,mCAAmC;KAAtF,UAAA,CACE,oBAACC,wBAAD,EAAkC,WAAW,kCAAoC,CAAA,GACjF,oBAACC,aAAD;MAA2B,WAAW;MAA2B,MAAK;KAAW,CAAA,CAC9E;IACsB,CAAA,CAAA;;EACL;;AAE9B"}
+{"version":3,"file":"time-slider.js","names":["{\n  className,\n  previewOverflow = 'visible',\n  renderThumbnail,\n  ...props\n}: TimeSliderProps = {}","previewOverflow = 'visible'","(state) => cn('media-slider', 'media-time-slider', resolveClassName(className, state))","<TimeSliderPrimitive.Chapters\n        className={'media-time-slider-chapters'}\n        renderChapter={(props) => (\n          <div className={'media-time-slider-chapter'} {...props}>\n            <TimeSliderPrimitive.Track render={<SliderTrack />} className={'media-time-slider-chapter-track'}>\n              <TimeSliderPrimitive.Buffer render={<SliderBuffer />} className={'media-time-slider-chapter-layer'} />\n              <TimeSliderPrimitive.Fill render={<SliderFill />} className={'media-time-slider-chapter-layer'} />\n            </TimeSliderPrimitive.Track>\n          </div>\n        )}\n      ></TimeSliderPrimitive.Chapters>","TimeSliderPrimitive.Chapters","(props) => (\n          <div className={'media-time-slider-chapter'} {...props}>\n            <TimeSliderPrimitive.Track render={<SliderTrack />} className={'media-time-slider-chapter-track'}>\n              <TimeSliderPrimitive.Buffer render={<SliderBuffer />} className={'media-time-slider-chapter-layer'} />\n              <TimeSliderPrimitive.Fill render={<SliderFill />} className={'media-time-slider-chapter-layer'} />\n            </TimeSliderPrimitive.Track>\n          </div>\n        )","<TimeSliderPrimitive.Thumb render={<SliderThumb />} className={'media-time-slider-thumb'} />","TimeSliderPrimitive.Thumb","cn('media-slider-preview-content', 'media-popup-surface', 'media-slider-thumbnail')","<SliderPrimitive.Thumbnail.Image render={renderThumbnail} className={'media-slider-thumbnail-image'} />","SliderPrimitive.Thumbnail.Image","<SpinnerIconPrimitive className={'media-slider-thumbnail-spinner-icon'} />","<SliderPrimitive.Thumbnail.Root\n          className={cn('media-slider-preview-content', 'media-popup-surface', 'media-slider-thumbnail')}\n        >\n          <SliderPrimitive.Thumbnail.Image render={renderThumbnail} className={'media-slider-thumbnail-image'} />\n\n          <SpinnerIconPrimitive className={'media-slider-thumbnail-spinner-icon'} />\n        </SliderPrimitive.Thumbnail.Root>","SliderPrimitive.Thumbnail.Root","<div className={cn('media-slider-preview-content', 'media-time-slider-preview-content')}>\n          <TimeSliderPrimitive.ChapterTitle className={'media-time-slider-chapter-title'} />\n          <TimeSliderPrimitive.Value className={'media-time-slider-value'} type=\"pointer\" />\n        </div>","TimeSliderPrimitive.ChapterTitle","TimeSliderPrimitive.Value","<TimeSliderPrimitive.Preview className={'media-slider-preview'} overflow={previewOverflow}>\n        <SliderPrimitive.Thumbnail.Root\n          className={cn('media-slider-preview-content', 'media-popup-surface', 'media-slider-thumbnail')}\n        >\n          <SliderPrimitive.Thumbnail.Image render={renderThumbnail} className={'media-slider-thumbnail-image'} />\n\n          <SpinnerIconPrimitive className={'media-slider-thumbnail-spinner-icon'} />\n        </SliderPrimitive.Thumbnail.Root>\n        <div className={cn('media-slider-preview-content', 'media-time-slider-preview-content')}>\n          <TimeSliderPrimitive.ChapterTitle className={'media-time-slider-chapter-title'} />\n          <TimeSliderPrimitive.Value className={'media-time-slider-value'} type=\"pointer\" />\n        </div>\n      </TimeSliderPrimitive.Preview>","TimeSliderPrimitive.Preview","<TimeSliderPrimitive.Root\n      className={(state) => cn('media-slider', 'media-time-slider', resolveClassName(className, state))}\n      {...props}\n    >\n      <TimeSliderPrimitive.Chapters\n        className={'media-time-slider-chapters'}\n        renderChapter={(props) => (\n          <div className={'media-time-slider-chapter'} {...props}>\n            <TimeSliderPrimitive.Track render={<SliderTrack />} className={'media-time-slider-chapter-track'}>\n              <TimeSliderPrimitive.Buffer render={<SliderBuffer />} className={'media-time-slider-chapter-layer'} />\n              <TimeSliderPrimitive.Fill render={<SliderFill />} className={'media-time-slider-chapter-layer'} />\n            </TimeSliderPrimitive.Track>\n          </div>\n        )}\n      ></TimeSliderPrimitive.Chapters>\n      <TimeSliderPrimitive.Thumb render={<SliderThumb />} className={'media-time-slider-thumb'} />\n      <TimeSliderPrimitive.Preview className={'media-slider-preview'} overflow={previewOverflow}>\n        <SliderPrimitive.Thumbnail.Root\n          className={cn('media-slider-preview-content', 'media-popup-surface', 'media-slider-thumbnail')}\n        >\n          <SliderPrimitive.Thumbnail.Image render={renderThumbnail} className={'media-slider-thumbnail-image'} />\n\n          <SpinnerIconPrimitive className={'media-slider-thumbnail-spinner-icon'} />\n        </SliderPrimitive.Thumbnail.Root>\n        <div className={cn('media-slider-preview-content', 'media-time-slider-preview-content')}>\n          <TimeSliderPrimitive.ChapterTitle className={'media-time-slider-chapter-title'} />\n          <TimeSliderPrimitive.Value className={'media-time-slider-value'} type=\"pointer\" />\n        </div>\n      </TimeSliderPrimitive.Preview>\n    </TimeSliderPrimitive.Root>","TimeSliderPrimitive.Root","props","TimeSliderPrimitive.Track","TimeSliderPrimitive.Buffer","TimeSliderPrimitive.Fill"],"sources":["../../../../../../../src/internal/skins/default-video/components/sliders/time-slider.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport type { SliderPreviewOverflow } from '@videojs/core';\nimport { cn } from '@videojs/utils/style';\nimport { resolveClassName } from '@videojs/utils/style';\n\nimport { SpinnerIcon as SpinnerIconPrimitive } from '../../../../../icons/index';\nimport { Slider as SliderPrimitive, TimeSlider as TimeSliderPrimitive } from '../../../../skin-primitives';\nimport { SliderBuffer, SliderFill, SliderThumb, SliderTrack } from '../../../shared/components/sliders/slider';\n\nexport interface TimeSliderProps extends Omit<TimeSliderPrimitive.RootProps, 'children'> {\n  previewOverflow?: SliderPreviewOverflow | undefined;\n  /** Draws the thumbnail preview image in place of the one the skin renders. */\n  renderThumbnail?: SliderPrimitive.Thumbnail.ImageProps['render'];\n}\n\nexport function TimeSlider({\n  className,\n  previewOverflow = 'visible',\n  renderThumbnail,\n  ...props\n}: TimeSliderProps = {}) {\n  return (\n    <TimeSliderPrimitive.Root\n      className={(state) => cn('media-slider', 'media-time-slider', resolveClassName(className, state))}\n      {...props}\n    >\n      <TimeSliderPrimitive.Chapters\n        className={'media-time-slider-chapters'}\n        renderChapter={(props) => (\n          <div className={'media-time-slider-chapter'} {...props}>\n            <TimeSliderPrimitive.Track render={<SliderTrack />} className={'media-time-slider-chapter-track'}>\n              <TimeSliderPrimitive.Buffer render={<SliderBuffer />} className={'media-time-slider-chapter-layer'} />\n              <TimeSliderPrimitive.Fill render={<SliderFill />} className={'media-time-slider-chapter-layer'} />\n            </TimeSliderPrimitive.Track>\n          </div>\n        )}\n      ></TimeSliderPrimitive.Chapters>\n      <TimeSliderPrimitive.Thumb render={<SliderThumb />} className={'media-time-slider-thumb'} />\n      <TimeSliderPrimitive.Preview className={'media-slider-preview'} overflow={previewOverflow}>\n        <SliderPrimitive.Thumbnail.Root\n          className={cn('media-slider-preview-content', 'media-popup-surface', 'media-slider-thumbnail')}\n        >\n          <SliderPrimitive.Thumbnail.Image render={renderThumbnail} className={'media-slider-thumbnail-image'} />\n\n          <SpinnerIconPrimitive className={'media-slider-thumbnail-spinner-icon'} />\n        </SliderPrimitive.Thumbnail.Root>\n        <div className={cn('media-slider-preview-content', 'media-time-slider-preview-content')}>\n          <TimeSliderPrimitive.ChapterTitle className={'media-time-slider-chapter-title'} />\n          <TimeSliderPrimitive.Value className={'media-time-slider-value'} type=\"pointer\" />\n        </div>\n      </TimeSliderPrimitive.Preview>\n    </TimeSliderPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,SAAgB,WAAA,IAKS;;CALEA,IAAAA;;EAKN,KAAA,OAAA,KAAA,IAAA,CAAC,IALKA;;;;CACzB,IAAA;CAGG,IAAA;CADH,IAAA;CADAC,IAAAA;CAFyBD,IAAAA,EAAAA,OAAAA,IAAAA;EACzB,CAAA,CAAA,WACA,iBAAA,IACA,oBACA,SAJyBA;;;;;;;;;;;;CAEzB,MAAA,kBAAA,OAAA,KAAA,IAAkB,YAAlBC;CAMeC,IAAAA;CAAoE,IAAA,EAAA,OAAA,WAAA;EAApE,MAAC,UAAU,GAAG,gBAAgB,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAAjB,EAAA,KAAA;;;CAG/EC,IAAAA;;EAACC,KAAAA,oBAAAA,oBAAD;GACE,WAAW;GACX,eAAeC;EAQc,CAAA;;;CAC/BC,IAAAA;;EAACC,KAAAA,oBAAAA,aAAD;GAA2B,QAAQ,oBAAC,eAAD,CAAc,CAAA;GAAG,WAAW;EAA4B,CAAA;;;CAG5EC,IAAAA;;EAAG,KAAA,GAAA,gCAAgC,uBAAuB,wBAAwB;;;CAE7FC,IAAAA;CAAyC,IAAA,EAAA,QAAA,iBAAA;EAAzC,KAAA,oBAACC,gBAAD;GAAiC,QAAQ;GAAiB,WAAW;EAAiC,CAAA;EAA7D,EAAA,MAAA;;;CAEzCC,IAAAA;;EAAC,KAAA,oBAAA,YAAD,EAAsB,WAAW,sCAAwC,CAAA;;;CAL3EC,IAAAA;CAGEH,IAAAA,EAAAA,QAAAA,IAAAA;EAHF,KAAA,qBAACI,qBAAD;GACE,WAAWL;GADb,UAAA,CAGEC,IAEAE,EAC8B;;EAH9BF,EAAAA,MAAAA;;;CAIFK,IAAAA;;EAAC,MAAA,qBAAA,OAAD;GAAK,WAAW,GAAG,gCAAgC,mCAAmC;GAAtF,UAAA,CACE,oBAACC,wBAAD,EAAkC,WAAW,kCAAoC,CAAA,GACjF,oBAACC,aAAD;IAA2B,WAAW;IAA2B,MAAK;GAAW,CAAA,CAC9E;;;;CAXPC,IAAAA;CAA0E,IAAA,EAAA,QAAA,mBAAA,EAAA,QACxEL,IAAAA;EADF,MAAA,qBAACM,eAAD;GAA6B,WAAW;GAAwB,UAAU;GAA1E,UAAA,CACEN,IAOAE,GAI2B;;EAZ6C,EAAA,MAAA;EACxEF,EAAAA,MAAAA;;;CAjBJO,IAAAA;CAEM,IAAA,EAAA,QAAA,SAAA,EAAA,QAcJF,OAAAA,EAAAA,QAfWf,IAAAA;EADb,MAAA,qBAACkB,gBAAD;GACE,WAAWlB;GACX,GAAI;GAFN,UAAA;IAIEC;IAWAG;IACAW;GAawB;;EA3BpB,EAAA,MAAA;EAcJA,EAAAA,MAAAA;EAfWf,EAAAA,MAAAA;;;CAFf,OACEiB;AA+BJ;AAzBuB,SAAA,MAAC,SAAA;CACd,OAAA,oBAAC,OAAD;EAAK,WAAW;EAA6B,GAAIE;EAC/C,UAAA,qBAACC,aAAD;GAA2B,QAAQ,oBAAC,eAAD,CAAc,CAAA;GAAG,WAAW;GAA/D,UAAA,CACE,oBAACC,cAAD;IAA4B,QAAQ,oBAAC,gBAAD,CAAe,CAAA;IAAG,WAAW;GAAoC,CAAA,GACrG,oBAACC,YAAD;IAA0B,QAAQ,oBAAC,cAAD,CAAa,CAAA;IAAG,WAAW;GAAoC,CAAA,CACxE;;CACxB,CAAA"}

package/dist/dev/internal/skins/default-video/layout/controls.js

@@ -0,0 +1,174 @@
+import { ControlsBackdrop } from "../../../../ui/controls/backdrop.js";
+import { ControlsContent } from "../../../../ui/controls/content.js";
+import { ControlsGroup } from "../../../../ui/controls/group.js";
+import { ControlsRoot } from "../../../../ui/controls/root.js";
+import { Value } from "../../../../ui/time/value.js";
+import { TooltipProvider } from "../../../../ui/tooltip/provider.js";
+import { ButtonTooltip } from "../../shared/components/buttons/button-tooltip.js";
+import { AirPlayButton } from "../components/buttons/airplay-button.js";
+import { CaptionsButton } from "../components/buttons/captions-button.js";
+import { CastButton } from "../components/buttons/cast-button.js";
+import { FullscreenButton } from "../components/buttons/fullscreen-button.js";
+import { PiPButton } from "../components/buttons/pip-button.js";
+import { PlayButton } from "../components/buttons/play-button.js";
+import { VolumePopover } from "../components/menus/volume-popover.js";
+import { TimeSlider } from "../components/sliders/time-slider.js";
+import { VideoSettingsMenu } from "../skins/shared/video/menus/settings-menu.js";
+import { c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+//#region src/internal/skins/default-video/layout/controls.tsx
+/** @jsxImportSource react */
+function DefaultVideoControls(t0) {
+	const $ = c(22);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { renderThumbnail } = t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ControlsBackdrop, { className: "video-controls-backdrop" });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = cn("video-controls", "video-controls-content");
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(PlayButton, {})
+		});
+		t5 = /* @__PURE__ */ jsx(VolumePopover, { className: "video-controls-volume-button" });
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t4 = $[4];
+		t5 = $[5];
+	}
+	let t6;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Value, {
+			className: cn("media-time-value", "video-time-value"),
+			type: "current"
+		});
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== renderThumbnail) {
+		t7 = /* @__PURE__ */ jsx(TimeSlider, { renderThumbnail });
+		$[7] = renderThumbnail;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Value, {
+			className: cn("media-time-toggle", "video-time-value"),
+			type: "remaining",
+			toggle: true
+		});
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "video-time-slider-group",
+			children: [
+				t6,
+				t7,
+				t8
+			]
+		});
+		$[10] = t7;
+		$[11] = t9;
+	} else t9 = $[11];
+	let t10;
+	let t11;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(CaptionsButton, { className: "video-controls-captions-button" })
+		});
+		t11 = /* @__PURE__ */ jsx(VideoSettingsMenu, { className: "video-controls-settings-button" });
+		$[12] = t10;
+		$[13] = t11;
+	} else {
+		t10 = $[12];
+		t11 = $[13];
+	}
+	let t12;
+	if ($[14] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "video-controls-primary",
+			children: [
+				t4,
+				t5,
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[14] = t9;
+		$[15] = t12;
+	} else t12 = $[15];
+	let t13;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(CastButton, {})
+		});
+		$[16] = t13;
+	} else t13 = $[16];
+	let t14;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(AirPlayButton, {})
+		});
+		$[17] = t14;
+	} else t14 = $[17];
+	let t15;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(ButtonTooltip, {
+			side: "top",
+			children: /* @__PURE__ */ jsx(PiPButton, {})
+		});
+		$[18] = t15;
+	} else t15 = $[18];
+	let t16;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsxs(ControlsGroup, {
+			className: "video-controls-secondary",
+			children: [
+				t13,
+				t14,
+				t15,
+				/* @__PURE__ */ jsx(ButtonTooltip, {
+					side: "top",
+					children: /* @__PURE__ */ jsx(FullscreenButton, {})
+				})
+			]
+		});
+		$[19] = t16;
+	} else t16 = $[19];
+	let t17;
+	if ($[20] !== t12) {
+		t17 = /* @__PURE__ */ jsxs(ControlsRoot, { children: [t2, /* @__PURE__ */ jsx(ControlsContent, {
+			className: t3,
+			children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [t12, t16] })
+		})] });
+		$[20] = t12;
+		$[21] = t17;
+	} else t17 = $[21];
+	return t17;
+}
+//#endregion
+export { DefaultVideoControls };
+
+//# sourceMappingURL=controls.js.map

package/dist/dev/internal/skins/default-video/layout/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","names":["{ renderThumbnail }: DefaultVideoControlsProps = {}","<Controls.Backdrop className={'video-controls-backdrop'} />","Controls.Backdrop","cn('video-controls', 'video-controls-content')","<ButtonTooltip side=\"top\">\n              <PlayButton />\n            </ButtonTooltip>","<VolumePopover className={'video-controls-volume-button'} />","<Time.Value className={cn('media-time-value', 'video-time-value')} type=\"current\" />","Time.Value","<TimeSlider renderThumbnail={renderThumbnail} />","<Time.Value className={cn('media-time-toggle', 'video-time-value')} type=\"remaining\" toggle />","<Controls.Group className={'video-time-slider-group'}>\n              <Time.Value className={cn('media-time-value', 'video-time-value')} type=\"current\" />\n              <TimeSlider renderThumbnail={renderThumbnail} />\n              <Time.Value className={cn('media-time-toggle', 'video-time-value')} type=\"remaining\" toggle />\n            </Controls.Group>","Controls.Group","<ButtonTooltip side=\"top\">\n              <CaptionsButton className={'video-controls-captions-button'} />\n            </ButtonTooltip>","<VideoSettingsMenu className={'video-controls-settings-button'} />","<Controls.Group className={'video-controls-primary'}>\n            <ButtonTooltip side=\"top\">\n              <PlayButton />\n            </ButtonTooltip>\n            <VolumePopover className={'video-controls-volume-button'} />\n\n            <Controls.Group className={'video-time-slider-group'}>\n              <Time.Value className={cn('media-time-value', 'video-time-value')} type=\"current\" />\n              <TimeSlider renderThumbnail={renderThumbnail} />\n              <Time.Value className={cn('media-time-toggle', 'video-time-value')} type=\"remaining\" toggle />\n            </Controls.Group>\n\n            <ButtonTooltip side=\"top\">\n              <CaptionsButton className={'video-controls-captions-button'} />\n            </ButtonTooltip>\n            <VideoSettingsMenu className={'video-controls-settings-button'} />\n          </Controls.Group>","<ButtonTooltip side=\"top\">\n              <CastButton />\n            </ButtonTooltip>","<ButtonTooltip side=\"top\">\n              <AirPlayButton />\n            </ButtonTooltip>","<ButtonTooltip side=\"top\">\n              <PiPButton />\n            </ButtonTooltip>","<Controls.Group className={'video-controls-secondary'}>\n            <ButtonTooltip side=\"top\">\n              <CastButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <AirPlayButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <PiPButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <FullscreenButton />\n            </ButtonTooltip>\n          </Controls.Group>","<Controls.Root>\n      <Controls.Backdrop className={'video-controls-backdrop'} />\n      <Controls.Content className={cn('video-controls', 'video-controls-content')}>\n        <Tooltip.Provider>\n          <Controls.Group className={'video-controls-primary'}>\n            <ButtonTooltip side=\"top\">\n              <PlayButton />\n            </ButtonTooltip>\n            <VolumePopover className={'video-controls-volume-button'} />\n\n            <Controls.Group className={'video-time-slider-group'}>\n              <Time.Value className={cn('media-time-value', 'video-time-value')} type=\"current\" />\n              <TimeSlider renderThumbnail={renderThumbnail} />\n              <Time.Value className={cn('media-time-toggle', 'video-time-value')} type=\"remaining\" toggle />\n            </Controls.Group>\n\n            <ButtonTooltip side=\"top\">\n              <CaptionsButton className={'video-controls-captions-button'} />\n            </ButtonTooltip>\n            <VideoSettingsMenu className={'video-controls-settings-button'} />\n          </Controls.Group>\n\n          <Controls.Group className={'video-controls-secondary'}>\n            <ButtonTooltip side=\"top\">\n              <CastButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <AirPlayButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <PiPButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <FullscreenButton />\n            </ButtonTooltip>\n          </Controls.Group>\n        </Tooltip.Provider>\n      </Controls.Content>\n    </Controls.Root>","Controls.Root","Controls.Content","Tooltip.Provider"],"sources":["../../../../../../src/internal/skins/default-video/layout/controls.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport type { ComponentProps } from 'react';\n\nimport { Controls, Time, Tooltip } from '../../../skin-primitives';\nimport { ButtonTooltip } from '../../shared/components/buttons/button-tooltip';\nimport { AirPlayButton } from '../components/buttons/airplay-button';\nimport { CaptionsButton } from '../components/buttons/captions-button';\nimport { CastButton } from '../components/buttons/cast-button';\nimport { FullscreenButton } from '../components/buttons/fullscreen-button';\nimport { PiPButton } from '../components/buttons/pip-button';\nimport { PlayButton } from '../components/buttons/play-button';\nimport { VolumePopover } from '../components/menus/volume-popover';\nimport { TimeSlider } from '../components/sliders/time-slider';\nimport { VideoSettingsMenu } from '../skins/shared/video/menus/settings-menu';\n\nexport interface DefaultVideoControlsProps {\n  renderThumbnail?: NonNullable<ComponentProps<typeof TimeSlider>>['renderThumbnail'];\n}\n\nexport function DefaultVideoControls({ renderThumbnail }: DefaultVideoControlsProps = {}) {\n  return (\n    <Controls.Root>\n      <Controls.Backdrop className={'video-controls-backdrop'} />\n      <Controls.Content className={cn('video-controls', 'video-controls-content')}>\n        <Tooltip.Provider>\n          <Controls.Group className={'video-controls-primary'}>\n            <ButtonTooltip side=\"top\">\n              <PlayButton />\n            </ButtonTooltip>\n            <VolumePopover className={'video-controls-volume-button'} />\n\n            <Controls.Group className={'video-time-slider-group'}>\n              <Time.Value className={cn('media-time-value', 'video-time-value')} type=\"current\" />\n              <TimeSlider renderThumbnail={renderThumbnail} />\n              <Time.Value className={cn('media-time-toggle', 'video-time-value')} type=\"remaining\" toggle />\n            </Controls.Group>\n\n            <ButtonTooltip side=\"top\">\n              <CaptionsButton className={'video-controls-captions-button'} />\n            </ButtonTooltip>\n            <VideoSettingsMenu className={'video-controls-settings-button'} />\n          </Controls.Group>\n\n          <Controls.Group className={'video-controls-secondary'}>\n            <ButtonTooltip side=\"top\">\n              <CastButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <AirPlayButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <PiPButton />\n            </ButtonTooltip>\n            <ButtonTooltip side=\"top\">\n              <FullscreenButton />\n            </ButtonTooltip>\n          </Controls.Group>\n        </Tooltip.Provider>\n      </Controls.Content>\n    </Controls.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,qBAAA,IAA0E;;CAArDA,IAAAA;;EAAiD,KAAA,OAAA,KAAA,IAAA,CAAC,IAAlDA;;;;CAAE,MAAA,EAAA,oBAAFA;CAG/BC,IAAAA;;EAACC,KAAAA,oBAAAA,kBAAD,EAAmB,WAAW,0BAA4B,CAAA;;;CAC7BC,IAAAA;;EAAG,KAAA,GAAA,kBAAkB,wBAAwB;;;CAGpEC,IAAAA;CAGAC,IAAAA;;EAHA,KAAA,oBAAC,eAAD;GAAe,MAAK;GAClB,UAAA,oBAAC,YAAD,CAAa,CAAA;EACA,CAAA;EACf,KAAA,oBAAC,eAAD,EAAe,WAAW,+BAAiC,CAAA;;;;;;;CAGzDC,IAAAA;;EAACC,KAAAA,oBAAAA,OAAD;GAAY,WAAW,GAAG,oBAAoB,kBAAkB;GAAG,MAAK;EAAW,CAAA;;;CACnFC,IAAAA;CAA6B,IAAA,EAAA,OAAA,iBAAA;EAA7B,KAAA,oBAAC,YAAD,EAA6B,gBAAkB,CAAA;EAAlB,EAAA,KAAA;;;CAC7BC,IAAAA;;EAACF,KAAAA,oBAAAA,OAAD;GAAY,WAAW,GAAG,qBAAqB,kBAAkB;GAAG,MAAK;GAAY,QAAA;EAAQ,CAAA;;;CAH/FG,IAAAA;CAEEF,IAAAA,EAAAA,QAAAA,IAAAA;EAFF,KAAA,qBAACG,eAAD;GAAgB,WAAW;GAA3B,UAAA;IACEL;IACAE;IACAC;GACc;;EAFdD,EAAAA,MAAAA;;;CAIFI,IAAAA;CAGAC,IAAAA;;EAHA,MAAA,oBAAC,eAAD;GAAe,MAAK;GAClB,UAAA,oBAAC,gBAAD,EAAgB,WAAW,iCAAmC,CAAA;EACjD,CAAA;EACf,MAAA,oBAAC,mBAAD,EAAmB,WAAW,iCAAmC,CAAA;;;;;;;CAfnEC,IAAAA;CAMEJ,IAAAA,EAAAA,QAAAA,IAAAA;EANF,MAAA,qBAACC,eAAD;GAAgB,WAAW;GAA3B,UAAA;IACEP;IAGAC;IAEAK;IAMAE;IAGAC;GACc;;EAVdH,EAAAA,MAAAA;;;CAaAK,IAAAA;;EAAC,MAAA,oBAAA,eAAD;GAAe,MAAK;GAClB,UAAA,oBAAC,YAAD,CAAa,CAAA;EACA,CAAA;;;CACfC,IAAAA;;EAAC,MAAA,oBAAA,eAAD;GAAe,MAAK;GAClB,UAAA,oBAAC,eAAD,CAAgB,CAAA;EACH,CAAA;;;CACfC,IAAAA;;EAAC,MAAA,oBAAA,eAAD;GAAe,MAAK;GAClB,UAAA,oBAAC,WAAD,CAAY,CAAA;EACC,CAAA;;;CATjBC,IAAAA;;EAACP,MAAAA,qBAAAA,eAAD;GAAgB,WAAW;GAA3B,UAAA;IACEI;IAGAC;IAGAC;IAGA,oBAAC,eAAD;KAAe,MAAK;KAClB,UAAA,oBAAC,kBAAD,CAAmB,CAAA;IACN,CAAA;GACD;;;;CAnCtBE,IAAAA;CAIML,IAAAA,EAAAA,QAAAA,KAAAA;EAJN,MAAA,qBAACM,cAAD,EAAA,UAAA,CACEnB,IACA,oBAACoB,iBAAD;GAAkB,WAAWlB;GAC3B,UAAA,qBAACmB,iBAAD,EAAA,UAAA,CACER,KAkBAI,GAcgB,EAAA,CAAA;EACF,CAAA,CACL,EAAA,CAAA;EAlCTJ,EAAAA,MAAAA;;;CALR,OACEK;AAwCJ"}

package/dist/dev/internal/skins/default-video/skin.js

@@ -1,34 +1,122 @@
 import { Container } from "../shared/components/layout/container.js";
-import { ErrorDialog } from "../shared/components/feedback/error-dialog.js";
-import { Poster } from "../shared/components/layout/poster.js";
-import { VideoGestures } from "../shared/skins/shared/video/gestures.js";
-import { VideoHotkeys } from "../shared/skins/shared/video/hotkeys.js";
-import { BufferingIndicator } from "./components/feedback/buffering-indicator.js";
-import { DefaultVideoControls } from "./controls.js";
-import { VideoStatusIndicators } from "./skins/shared/video/status-indicators.js";
+import { ErrorDialog } from "../shared/components/dialogs/error-dialog.js";
+import { Poster } from "../shared/components/display/poster.js";
+import { Title } from "../shared/components/display/title.js";
+import { VideoGestures } from "../shared/skins/shared/video/behaviors/gestures.js";
+import { VideoHotkeys } from "../shared/skins/shared/video/behaviors/hotkeys.js";
+import { BufferingIndicator } from "./components/display/buffering-indicator.js";
+import { DefaultVideoControls } from "./layout/controls.js";
+import { VideoStatusIndicators } from "./skins/shared/video/display/status-indicators.js";
+import { c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 //#region src/internal/skins/default-video/skin.tsx
 /** @jsxImportSource react */
-function DefaultVideoSkin({ children, className, renderPoster, ...props } = {}) {
-	return /* @__PURE__ */ jsxs(Container, {
-		className: cn("video-skin", className),
-		"data-theme": "default",
-		"data-preset": "video",
-		...props,
-		children: [
-			children,
-			/* @__PURE__ */ jsx(Poster, { renderImage: renderPoster }),
-			/* @__PURE__ */ jsx(BufferingIndicator, {}),
-			/* @__PURE__ */ jsx(ErrorDialog, {}),
-			/* @__PURE__ */ jsx(DefaultVideoControls, {}),
-			/* @__PURE__ */ jsx(VideoHotkeys, {}),
-			/* @__PURE__ */ jsx(VideoGestures, {}),
-			/* @__PURE__ */ jsx(VideoStatusIndicators, {})
-		]
-	});
+function VideoSkin(t0) {
+	const $ = c(26);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let children;
+	let className;
+	let props;
+	let renderPoster;
+	let renderThumbnail;
+	if ($[2] !== t1) {
+		({children, className, renderPoster, renderThumbnail, ...props} = t1);
+		$[2] = t1;
+		$[3] = children;
+		$[4] = className;
+		$[5] = props;
+		$[6] = renderPoster;
+		$[7] = renderThumbnail;
+	} else {
+		children = $[3];
+		className = $[4];
+		props = $[5];
+		renderPoster = $[6];
+		renderThumbnail = $[7];
+	}
+	let t2;
+	if ($[8] !== className) {
+		t2 = cn("video-skin", className);
+		$[8] = className;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== renderPoster) {
+		t3 = /* @__PURE__ */ jsx(Poster, { renderImage: renderPoster });
+		$[10] = renderPoster;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	let t5;
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(BufferingIndicator, {});
+		t5 = /* @__PURE__ */ jsx(ErrorDialog, {});
+		t6 = /* @__PURE__ */ jsx(Title, {});
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else {
+		t4 = $[12];
+		t5 = $[13];
+		t6 = $[14];
+	}
+	let t7;
+	if ($[15] !== renderThumbnail) {
+		t7 = /* @__PURE__ */ jsx(DefaultVideoControls, { renderThumbnail });
+		$[15] = renderThumbnail;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t10;
+	let t8;
+	let t9;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(VideoHotkeys, {});
+		t9 = /* @__PURE__ */ jsx(VideoGestures, {});
+		t10 = /* @__PURE__ */ jsx(VideoStatusIndicators, {});
+		$[17] = t10;
+		$[18] = t8;
+		$[19] = t9;
+	} else {
+		t10 = $[17];
+		t8 = $[18];
+		t9 = $[19];
+	}
+	let t11;
+	if ($[20] !== children || $[21] !== props || $[22] !== t2 || $[23] !== t3 || $[24] !== t7) {
+		t11 = /* @__PURE__ */ jsxs(Container, {
+			className: t2,
+			"data-theme": "default",
+			"data-preset": "video",
+			...props,
+			children: [
+				children,
+				t3,
+				t4,
+				t5,
+				t6,
+				t7,
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[20] = children;
+		$[21] = props;
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t7;
+		$[25] = t11;
+	} else t11 = $[25];
+	return t11;
 }
 //#endregion
-export { DefaultVideoSkin };
+export { VideoSkin };
 
 //# sourceMappingURL=skin.js.map

package/dist/dev/internal/skins/default-video/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":[],"sources":["../../../../../src/internal/skins/default-video/skin.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { ErrorDialog } from '../shared/components/feedback/error-dialog';\nimport { Container } from '../shared/components/layout/container';\nimport { Poster } from '../shared/components/layout/poster';\nimport { VideoGestures } from '../shared/skins/shared/video/gestures';\nimport { VideoHotkeys } from '../shared/skins/shared/video/hotkeys';\nimport { BufferingIndicator } from './components/feedback/buffering-indicator';\nimport { DefaultVideoControls } from './controls';\nimport { VideoStatusIndicators } from './skins/shared/video/status-indicators';\n\nexport interface DefaultVideoSkinProps extends Omit<NonNullable<ComponentProps<typeof Container>>, 'children'> {\n  children?: ReactNode;\n  renderPoster?: NonNullable<ComponentProps<typeof Poster>>['renderImage'];\n}\n\nexport function DefaultVideoSkin({ children, className, renderPoster, ...props }: DefaultVideoSkinProps = {}) {\n  return (\n    <Container className={cn('video-skin', className)} data-theme=\"default\" data-preset=\"video\" {...props}>\n      {children}\n      <Poster renderImage={renderPoster} />\n      <BufferingIndicator />\n      <ErrorDialog />\n\n      <DefaultVideoControls />\n\n      <VideoHotkeys />\n      <VideoGestures />\n      <VideoStatusIndicators />\n    </Container>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,iBAAiB,EAAE,UAAU,WAAW,cAAc,GAAG,UAAiC,CAAC,GAAG;CAC5G,OACE,qBAAC,WAAD;EAAW,WAAW,GAAG,cAAc,SAAS;EAAG,cAAW;EAAU,eAAY;EAAQ,GAAI;EAAhG,UAAA;GACG;GACD,oBAAC,QAAD,EAAQ,aAAa,aAAe,CAAA;GACpC,oBAAC,oBAAD,CAAqB,CAAA;GACrB,oBAAC,aAAD,CAAc,CAAA;GAEd,oBAAC,sBAAD,CAAuB,CAAA;GAEvB,oBAAC,cAAD,CAAe,CAAA;GACf,oBAAC,eAAD,CAAgB,CAAA;GAChB,oBAAC,uBAAD,CAAwB,CAAA;EACf;;AAEf"}
+{"version":3,"file":"skin.js","names":["{ children, className, renderPoster, renderThumbnail, ...props }: VideoSkinProps = {}","cn('video-skin', className)","<Poster renderImage={renderPoster} />","<BufferingIndicator />","<ErrorDialog />","<Title />","<DefaultVideoControls renderThumbnail={renderThumbnail} />","<VideoStatusIndicators />","<VideoHotkeys />","<VideoGestures />","<Container className={cn('video-skin', className)} data-theme=\"default\" data-preset=\"video\" {...props}>\n      {children}\n      <Poster renderImage={renderPoster} />\n      <BufferingIndicator />\n      <ErrorDialog />\n      <Title />\n\n      <DefaultVideoControls renderThumbnail={renderThumbnail} />\n\n      <VideoHotkeys />\n      <VideoGestures />\n      <VideoStatusIndicators />\n    </Container>"],"sources":["../../../../../src/internal/skins/default-video/skin.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn } from '@videojs/utils/style';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { ErrorDialog } from '../shared/components/dialogs/error-dialog';\nimport { Poster } from '../shared/components/display/poster';\nimport { Title } from '../shared/components/display/title';\nimport { Container } from '../shared/components/layout/container';\nimport { VideoGestures } from '../shared/skins/shared/video/behaviors/gestures';\nimport { VideoHotkeys } from '../shared/skins/shared/video/behaviors/hotkeys';\nimport { BufferingIndicator } from './components/display/buffering-indicator';\nimport { DefaultVideoControls } from './layout/controls';\nimport { VideoStatusIndicators } from './skins/shared/video/display/status-indicators';\n\nexport interface VideoSkinProps extends Omit<NonNullable<ComponentProps<typeof Container>>, 'children'> {\n  children?: ReactNode;\n  renderPoster?: NonNullable<ComponentProps<typeof Poster>>['renderImage'];\n  renderThumbnail?: NonNullable<ComponentProps<typeof DefaultVideoControls>>['renderThumbnail'];\n}\n\nexport function VideoSkin({ children, className, renderPoster, renderThumbnail, ...props }: VideoSkinProps = {}) {\n  return (\n    <Container className={cn('video-skin', className)} data-theme=\"default\" data-preset=\"video\" {...props}>\n      {children}\n      <Poster renderImage={renderPoster} />\n      <BufferingIndicator />\n      <ErrorDialog />\n      <Title />\n\n      <DefaultVideoControls renderThumbnail={renderThumbnail} />\n\n      <VideoHotkeys />\n      <VideoGestures />\n      <VideoStatusIndicators />\n    </Container>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAqBA,SAAgB,UAAA,IAAiG;;CAAvFA,IAAAA;;EAAmF,KAAA,OAAA,KAAA,IAAA,CAAC,IAApFA;;;;CAAE,IAAA;CAAU,IAAA;CAA6C,IAAA;CAAlC,IAAA;CAAc,IAAA;CAArCA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,UAAU,WAAW,cAAc,oBAAiB,SAAtDA;;;;;;;;;;;;;;CAEAC,IAAAA;CAAiB,IAAA,EAAA,OAAA,WAAA;EAAjB,KAAA,GAAG,cAAc,SAAS;EAAT,EAAA,KAAA;;;CAErCC,IAAAA;CAAqB,IAAA,EAAA,QAAA,cAAA;EAArB,KAAA,oBAAC,QAAD,EAAQ,aAAa,aAAe,CAAA;EAAf,EAAA,MAAA;;;CACrBC,IAAAA;CACAC,IAAAA;CACAC,IAAAA;;EAFA,KAAA,oBAAC,oBAAD,CAAqB,CAAA;EACrB,KAAA,oBAAC,aAAD,CAAc,CAAA;EACd,KAAA,oBAAC,OAAD,CAAQ,CAAA;;;;;;;;;CAERC,IAAAA;CAAuC,IAAA,EAAA,QAAA,iBAAA;EAAvC,KAAA,oBAAC,sBAAD,EAAuC,gBAAkB,CAAA;EAAlB,EAAA,MAAA;;;CAIvCC,IAAAA;CAFAC,IAAAA;CACAC,IAAAA;;EADA,KAAA,oBAAC,cAAD,CAAe,CAAA;EACf,KAAA,oBAAC,eAAD,CAAgB,CAAA;EAChB,MAAA,oBAAC,uBAAD,CAAwB,CAAA;;;;;;;;;CAX1BC,IAAAA;CACG,IAAA,EAAA,QAAA,YAAA,EAAA,QAD6F,SAAA,EAAA,QAA1ET,MAAAA,EAAAA,QAEpBC,MAAAA,EAAAA,QAKAI,IAAAA;EAPF,MAAA,qBAAC,WAAD;GAAW,WAAWL;GAA6B,cAAW;GAAU,eAAY;GAAQ,GAAI;GAAhG,UAAA;IACG;IACDC;IACAC;IACAC;IACAC;IAEAC;IAEAE;IACAC;IACAF;GACS;;EAXR,EAAA,MAAA;EAD6F,EAAA,MAAA;EAA1EN,EAAAA,MAAAA;EAEpBC,EAAAA,MAAAA;EAKAI,EAAAA,MAAAA;;;CARJ,OACEI;AAcJ"}