@videojs/html 0.1.0-preview.10

package/dist/volume-slider-cwSYSsFC.js

@@ -0,0 +1,118 @@
+import { n as getPropsFromAttrs, r as toConnectedHTMLComponent, t as getCoreState } from "./component-factory-vR-5t251.js";
+import { volumeSliderStateDefinition } from "@videojs/core/store";
+import { memoize } from "@videojs/utils";
+import { VolumeSlider } from "@videojs/core";
+
+//#region src/elements/volume-slider.ts
+const volumeSliderCreateRequestMethods = memoize(volumeSliderStateDefinition.createRequestMethods);
+const getVolumeSliderRootState = (element, mediaStore) => {
+	const mediaState = volumeSliderStateDefinition.stateTransform(mediaStore.getState());
+	const mediaMethods = volumeSliderCreateRequestMethods(mediaStore.dispatch);
+	return { ...getCoreState(VolumeSlider, {
+		...getPropsFromAttrs(element),
+		...mediaState,
+		...mediaMethods
+	}) };
+};
+/**
+* VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps
+* Handles element attributes and properties based on state
+*/
+const getVolumeSliderRootProps = (element, state) => {
+	if (state._rootElement !== element) state._setRootElement(element);
+	const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;
+	return {
+		role: "slider",
+		tabindex: element.getAttribute("tabindex") ?? "0",
+		"data-muted": state.muted.toString(),
+		"data-volume-level": state.volumeLevel,
+		"data-orientation": element.orientation || "horizontal",
+		"aria-label": "Volume",
+		"aria-valuemin": "0",
+		"aria-valuemax": "100",
+		"aria-valuenow": Math.round(state.muted ? 0 : state.volume * 100).toString(),
+		"aria-valuetext": volumeText,
+		"aria-orientation": element.orientation || "horizontal",
+		style: {
+			...element.hasAttribute("commandfor") ? { anchorName: `--${element.getAttribute("commandfor")}` } : {},
+			"--slider-fill": `${state._fillWidth.toFixed(3)}%`
+		}
+	};
+};
+var VolumeSliderRoot = class extends HTMLElement {
+	static {
+		this.observedAttributes = ["commandfor", "orientation"];
+	}
+	get orientation() {
+		return this.getAttribute("orientation") || "horizontal";
+	}
+};
+const VolumeSliderRootElement = toConnectedHTMLComponent(VolumeSliderRoot, getVolumeSliderRootState, getVolumeSliderRootProps, "VolumeSliderRoot");
+const getVolumeSliderTrackProps = (element, _state) => {
+	const rootElement = element.closest("media-volume-slider");
+	if (rootElement._state?._trackElement !== element) rootElement._state?._setTrackElement?.(element);
+	const orientation = rootElement?.orientation || "horizontal";
+	return {
+		"data-orientation": orientation,
+		style: {
+			width: orientation === "horizontal" ? "100%" : void 0,
+			height: orientation !== "horizontal" ? "100%" : void 0
+		}
+	};
+};
+var VolumeSliderTrack = class extends HTMLElement {};
+const VolumeSliderTrackElement = toConnectedHTMLComponent(VolumeSliderTrack, void 0, getVolumeSliderTrackProps, "VolumeSliderTrack");
+const getVolumeSliderIndicatorProps = (element, _state) => {
+	const orientation = element.closest("media-volume-slider")?.orientation || "horizontal";
+	const style = orientation === "horizontal" ? {
+		position: "absolute",
+		width: "var(--slider-fill, 0%)",
+		height: "100%",
+		top: "0",
+		bottom: void 0
+	} : {
+		position: "absolute",
+		height: "var(--slider-fill, 0%)",
+		width: "100%",
+		bottom: "0",
+		top: void 0
+	};
+	return {
+		"data-orientation": orientation,
+		style
+	};
+};
+var VolumeSliderIndicator = class extends HTMLElement {};
+const VolumeSliderIndicatorElement = toConnectedHTMLComponent(VolumeSliderIndicator, void 0, getVolumeSliderIndicatorProps, "VolumeSliderIndicator");
+const getVolumeSliderThumbProps = (element, _state) => {
+	const orientation = element.closest("media-volume-slider")?.orientation || "horizontal";
+	const style = orientation === "horizontal" ? {
+		position: "absolute",
+		left: "var(--slider-fill, 0%)",
+		top: "50%",
+		bottom: void 0,
+		translate: "-50% -50%"
+	} : {
+		position: "absolute",
+		bottom: "var(--slider-fill, 0%)",
+		left: "50%",
+		top: void 0,
+		translate: "-50% 50%"
+	};
+	return {
+		"data-orientation": orientation,
+		style
+	};
+};
+var VolumeSliderThumb = class extends HTMLElement {};
+const VolumeSliderThumbElement = toConnectedHTMLComponent(VolumeSliderThumb, void 0, getVolumeSliderThumbProps, "VolumeSliderThumb");
+const VolumeSliderElement = Object.assign({}, {
+	Root: VolumeSliderRootElement,
+	Track: VolumeSliderTrackElement,
+	Indicator: VolumeSliderIndicatorElement,
+	Thumb: VolumeSliderThumbElement
+});
+
+//#endregion
+export { VolumeSliderTrackElement as a, VolumeSliderThumbElement as i, VolumeSliderIndicatorElement as n, VolumeSliderRootElement as r, VolumeSliderElement as t };
+//# sourceMappingURL=volume-slider-cwSYSsFC.js.map

package/dist/volume-slider-cwSYSsFC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider-cwSYSsFC.js","names":["getVolumeSliderRootState: StateHook<VolumeSliderRoot, VolumeSliderStateWithMethods>","CoreVolumeSlider","getVolumeSliderRootProps: PropsHook<VolumeSliderRoot, VolumeSliderStateWithMethods>","VolumeSliderRootElement: ConnectedComponentConstructor<VolumeSliderRoot, VolumeSliderStateWithMethods>","getVolumeSliderTrackProps: PropsHook<VolumeSliderTrack, undefined>","VolumeSliderTrackElement: ConnectedComponentConstructor<VolumeSliderTrack, undefined>","getVolumeSliderIndicatorProps: PropsHook<VolumeSliderIndicator, undefined>","VolumeSliderIndicatorElement: ConnectedComponentConstructor<VolumeSliderIndicator, undefined>","getVolumeSliderThumbProps: PropsHook<VolumeSliderThumb, undefined>","VolumeSliderThumbElement: ConnectedComponentConstructor<VolumeSliderThumb, undefined>"],"sources":["../src/elements/volume-slider.ts"],"sourcesContent":["import type { Prettify } from '../types';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { VolumeSlider as CoreVolumeSlider } from '@videojs/core';\nimport { volumeSliderStateDefinition } from '@videojs/core/store';\nimport { memoize } from '@videojs/utils';\n\nimport { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory';\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\ntype VolumeSliderState = Prettify<ReturnType<CoreVolumeSlider['getState']>>;\ntype VolumeSliderStateWithMethods = Prettify<VolumeSliderState & ReturnType<typeof volumeSliderStateDefinition.createRequestMethods>>;\n\nconst volumeSliderCreateRequestMethods = memoize(volumeSliderStateDefinition.createRequestMethods);\n\nexport const getVolumeSliderRootState: StateHook<VolumeSliderRoot, VolumeSliderStateWithMethods> = (element, mediaStore) => {\n  const mediaState = volumeSliderStateDefinition.stateTransform(mediaStore.getState());\n  const mediaMethods = volumeSliderCreateRequestMethods(mediaStore.dispatch);\n  const coreState = getCoreState(CoreVolumeSlider, {\n    ...getPropsFromAttrs(element),\n    ...mediaState,\n    ...mediaMethods,\n  });\n  return {\n    ...coreState,\n  };\n};\n\n/**\n * VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps\n * Handles element attributes and properties based on state\n */\nexport const getVolumeSliderRootProps: PropsHook<VolumeSliderRoot, VolumeSliderStateWithMethods> = (element, state) => {\n  if (state._rootElement !== element) {\n    state._setRootElement(element);\n  }\n\n  const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;\n\n  return {\n    role: 'slider',\n    tabindex: element.getAttribute('tabindex') ?? '0',\n    'data-muted': state.muted.toString(),\n    'data-volume-level': state.volumeLevel,\n    'data-orientation': element.orientation || 'horizontal',\n    'aria-label': 'Volume',\n    'aria-valuemin': '0',\n    'aria-valuemax': '100',\n    'aria-valuenow': Math.round(state.muted ? 0 : state.volume * 100).toString(),\n    'aria-valuetext': volumeText,\n    'aria-orientation': element.orientation || 'horizontal',\n    style: {\n      ...(element.hasAttribute('commandfor') ? { anchorName: `--${element.getAttribute('commandfor')}` } : {}),\n      '--slider-fill': `${state._fillWidth.toFixed(3)}%`,\n    },\n  };\n};\n\nexport class VolumeSliderRoot extends HTMLElement {\n  static readonly observedAttributes: readonly string[] = ['commandfor', 'orientation'];\n\n  _state: VolumeSliderState | undefined;\n\n  get orientation(): 'horizontal' | 'vertical' {\n    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';\n  }\n}\n\nexport const VolumeSliderRootElement: ConnectedComponentConstructor<VolumeSliderRoot, VolumeSliderStateWithMethods> = toConnectedHTMLComponent(\n  VolumeSliderRoot,\n  getVolumeSliderRootState,\n  getVolumeSliderRootProps,\n  'VolumeSliderRoot',\n);\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport const getVolumeSliderTrackProps: PropsHook<VolumeSliderTrack, undefined> = (element, _state) => {\n  const rootElement = element.closest('media-volume-slider') as VolumeSliderRoot;\n\n  if (rootElement._state?._trackElement !== element) {\n    rootElement._state?._setTrackElement?.(element);\n  }\n\n  const orientation = rootElement?.orientation || 'horizontal';\n\n  return {\n    'data-orientation': orientation,\n    style: {\n      width: orientation === 'horizontal' ? '100%' : undefined,\n      height: orientation !== 'horizontal' ? '100%' : undefined,\n    },\n  };\n};\n\nexport class VolumeSliderTrack extends HTMLElement {}\n\nexport const VolumeSliderTrackElement: ConnectedComponentConstructor<VolumeSliderTrack, undefined> = toConnectedHTMLComponent(\n  VolumeSliderTrack,\n  undefined,\n  getVolumeSliderTrackProps,\n  'VolumeSliderTrack',\n);\n\n// ============================================================================\n// INDICATOR COMPONENT\n// ============================================================================\n\nexport const getVolumeSliderIndicatorProps: PropsHook<VolumeSliderIndicator, undefined> = (element, _state) => {\n  const rootElement = element.closest('media-volume-slider') as VolumeSliderRoot;\n  const orientation = rootElement?.orientation || 'horizontal';\n  const style = orientation === 'horizontal'\n    ? {\n        position: 'absolute',\n        width: 'var(--slider-fill, 0%)',\n        height: '100%',\n        top: '0',\n        bottom: undefined,\n      }\n    : {\n        position: 'absolute',\n        height: 'var(--slider-fill, 0%)',\n        width: '100%',\n        bottom: '0',\n        top: undefined,\n      };\n\n  return {\n    'data-orientation': orientation,\n    style,\n  };\n};\n\nexport class VolumeSliderIndicator extends HTMLElement {}\n\nexport const VolumeSliderIndicatorElement: ConnectedComponentConstructor<VolumeSliderIndicator, undefined> = toConnectedHTMLComponent(\n  VolumeSliderIndicator,\n  undefined,\n  getVolumeSliderIndicatorProps,\n  'VolumeSliderIndicator',\n);\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport const getVolumeSliderThumbProps: PropsHook<VolumeSliderThumb, undefined> = (element, _state) => {\n  const rootElement = element.closest('media-volume-slider') as VolumeSliderRoot;\n  const orientation = rootElement?.orientation || 'horizontal';\n  const style = orientation === 'horizontal'\n    ? {\n        position: 'absolute',\n        left: 'var(--slider-fill, 0%)',\n        top: '50%',\n        bottom: undefined,\n        translate: '-50% -50%',\n      }\n    : {\n        position: 'absolute',\n        bottom: 'var(--slider-fill, 0%)',\n        left: '50%',\n        top: undefined,\n        translate: '-50% 50%',\n      };\n\n  return {\n    'data-orientation': orientation,\n    style,\n  };\n};\n\nexport class VolumeSliderThumb extends HTMLElement {}\n\nexport const VolumeSliderThumbElement: ConnectedComponentConstructor<VolumeSliderThumb, undefined> = toConnectedHTMLComponent(\n  VolumeSliderThumb,\n  undefined,\n  getVolumeSliderThumbProps,\n  'VolumeSliderThumb',\n);\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const VolumeSliderElement = Object.assign(\n  {},\n  {\n    Root: VolumeSliderRootElement,\n    Track: VolumeSliderTrackElement,\n    Indicator: VolumeSliderIndicatorElement,\n    Thumb: VolumeSliderThumbElement,\n  },\n) as {\n  Root: typeof VolumeSliderRootElement;\n  Track: typeof VolumeSliderTrackElement;\n  Indicator: typeof VolumeSliderIndicatorElement;\n  Thumb: typeof VolumeSliderThumbElement;\n};\n"],"mappings":";;;;;;AAgBA,MAAM,mCAAmC,QAAQ,4BAA4B,qBAAqB;AAElG,MAAaA,4BAAuF,SAAS,eAAe;CAC1H,MAAM,aAAa,4BAA4B,eAAe,WAAW,UAAU,CAAC;CACpF,MAAM,eAAe,iCAAiC,WAAW,SAAS;AAM1E,QAAO,EACL,GANgB,aAAaC,cAAkB;EAC/C,GAAG,kBAAkB,QAAQ;EAC7B,GAAG;EACH,GAAG;EACJ,CAAC,EAGD;;;;;;AAOH,MAAaC,4BAAuF,SAAS,UAAU;AACrH,KAAI,MAAM,iBAAiB,QACzB,OAAM,gBAAgB,QAAQ;CAGhC,MAAM,aAAa,GAAG,KAAK,MAAM,MAAM,QAAQ,IAAI,MAAM,SAAS,IAAI,CAAC;AAEvE,QAAO;EACL,MAAM;EACN,UAAU,QAAQ,aAAa,WAAW,IAAI;EAC9C,cAAc,MAAM,MAAM,UAAU;EACpC,qBAAqB,MAAM;EAC3B,oBAAoB,QAAQ,eAAe;EAC3C,cAAc;EACd,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB,KAAK,MAAM,MAAM,QAAQ,IAAI,MAAM,SAAS,IAAI,CAAC,UAAU;EAC5E,kBAAkB;EAClB,oBAAoB,QAAQ,eAAe;EAC3C,OAAO;GACL,GAAI,QAAQ,aAAa,aAAa,GAAG,EAAE,YAAY,KAAK,QAAQ,aAAa,aAAa,IAAI,GAAG,EAAE;GACvG,iBAAiB,GAAG,MAAM,WAAW,QAAQ,EAAE,CAAC;GACjD;EACF;;AAGH,IAAa,mBAAb,cAAsC,YAAY;;4BACQ,CAAC,cAAc,cAAc;;CAIrF,IAAI,cAAyC;AAC3C,SAAQ,KAAK,aAAa,cAAc,IAAkC;;;AAI9E,MAAaC,0BAAyG,yBACpH,kBACA,0BACA,0BACA,mBACD;AAMD,MAAaC,6BAAsE,SAAS,WAAW;CACrG,MAAM,cAAc,QAAQ,QAAQ,sBAAsB;AAE1D,KAAI,YAAY,QAAQ,kBAAkB,QACxC,aAAY,QAAQ,mBAAmB,QAAQ;CAGjD,MAAM,cAAc,aAAa,eAAe;AAEhD,QAAO;EACL,oBAAoB;EACpB,OAAO;GACL,OAAO,gBAAgB,eAAe,SAAS;GAC/C,QAAQ,gBAAgB,eAAe,SAAS;GACjD;EACF;;AAGH,IAAa,oBAAb,cAAuC,YAAY;AAEnD,MAAaC,2BAAwF,yBACnG,mBACA,QACA,2BACA,oBACD;AAMD,MAAaC,iCAA8E,SAAS,WAAW;CAE7G,MAAM,cADc,QAAQ,QAAQ,sBAAsB,EACzB,eAAe;CAChD,MAAM,QAAQ,gBAAgB,eAC1B;EACE,UAAU;EACV,OAAO;EACP,QAAQ;EACR,KAAK;EACL,QAAQ;EACT,GACD;EACE,UAAU;EACV,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,KAAK;EACN;AAEL,QAAO;EACL,oBAAoB;EACpB;EACD;;AAGH,IAAa,wBAAb,cAA2C,YAAY;AAEvD,MAAaC,+BAAgG,yBAC3G,uBACA,QACA,+BACA,wBACD;AAMD,MAAaC,6BAAsE,SAAS,WAAW;CAErG,MAAM,cADc,QAAQ,QAAQ,sBAAsB,EACzB,eAAe;CAChD,MAAM,QAAQ,gBAAgB,eAC1B;EACE,UAAU;EACV,MAAM;EACN,KAAK;EACL,QAAQ;EACR,WAAW;EACZ,GACD;EACE,UAAU;EACV,QAAQ;EACR,MAAM;EACN,KAAK;EACL,WAAW;EACZ;AAEL,QAAO;EACL,oBAAoB;EACpB;EACD;;AAGH,IAAa,oBAAb,cAAuC,YAAY;AAEnD,MAAaC,2BAAwF,yBACnG,mBACA,QACA,2BACA,oBACD;AAMD,MAAa,sBAAsB,OAAO,OACxC,EAAE,EACF;CACE,MAAM;CACN,OAAO;CACP,WAAW;CACX,OAAO;CACR,CACF"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@videojs/html",
+  "type": "module",
+  "version": "0.1.0-preview.10",
+  "description": "HTML library for building media players",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "player",
+    "html",
+    "ui",
+    "components",
+    "videojs"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./store": {
+      "types": "./dist/store.d.ts",
+      "default": "./dist/store.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
+    },
+    "./skins/frosted": {
+      "types": "./dist/skins/frosted.d.ts",
+      "default": "./dist/skins/frosted.js"
+    },
+    "./skins/minimal": {
+      "types": "./dist/skins/minimal.d.ts",
+      "default": "./dist/skins/minimal.js"
+    },
+    "./define/*": {
+      "types": "./dist/define/*.d.ts",
+      "default": "./dist/define/*.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@open-wc/context-protocol": "^0.0.9",
+    "@videojs/core": "0.1.0-preview.10",
+    "@videojs/icons": "0.1.0-preview.10",
+    "@videojs/utils": "0.1.0-preview.10"
+  },
+  "devDependencies": {
+    "tsdown": "^0.15.9",
+    "typescript": "^5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "build:watch": "tsdown --watch --silent",
+    "dev": "pnpm run build:watch",
+    "test": "echo \"No tests yet\"",
+    "clean": "rm -rf dist"
+  }
+}