@wix/video 1.72.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Wix.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# Video
+
+Infra Video component.
+
+## Example
+
+```js
+import { Video } from '@wix/video';
+
+function Example() {
+  const videoRef = React.useRef(null);
+  
+  return (
+    <Video 
+      id="my-video"
+      videoMedia={{
+        uri: "video-base-uri",
+        name: "My Video",
+        sources: [/* video sources */],
+        hasAudio: true
+      }}
+      poster={{
+        uri: "poster-image-uri",
+        width: 1920,
+        height: 1080
+      }}
+      muted={true}
+      loop={true}
+      autoplay={true}
+      videoRef={videoRef}
+      qualityPolicy="proportional"
+    />
+  );
+}
+```
+
+## Installation
+
+### Install package
+You can install the package via npm/yarn
+```
+> npm install -s @wix/video --registry http://npm.dev.wixpress.com/
+```
+or: 
+```
+> yarn add @wix/video --registry http://npm.dev.wixpress.com/
+```
+
+## Props
+
+| Prop name | Type | Default | Description |
+| --------- | ---- | ------- | ----------- |
+| id | string | - | Required unique identifier for the video element |
+| videoMedia | object | - | Video source information (see details below) |
+| poster | object | - | Poster image that displays before video plays (Image props) |
+| alt | string | '' | Alternate text for the video for accessibility |
+| muted | boolean | - | Whether the video's audio is muted |
+| loop | boolean | - | Whether the video should loop when it reaches the end |
+| autoplay | boolean | - | Whether the video should start playing automatically when loaded |
+| playbackRate | number | 1 | Playback speed of the video |
+| posterEffect | 'fade' | - | Effect to apply when transitioning from poster to video |
+| videoRef | React.RefObject<HTMLVideoElement> | - | React ref to access the underlying video element |
+| qualityPolicy | 'proportional' \| 'adaptive' \| 'highest' | Video quality selection strategy: `'proportional'` - dynamically selects quality based on container size, `'adaptive'` - uses adaptive sources (HLS/DASH), `'highest'` - always uses the highest resolution available |
+
+### videoMedia Object
+
+| Property | Type | Required | Description |
+| -------- | ---- | -------- | ----------- |
+| uri | string | Yes | Base URI for the video |
+| name | string | No | Name of the video |
+| sources | VideoSource[] | No | Array of video sources with different qualities (see below) |
+| adaptiveSources | AdaptiveVideoSource[] | No | Array of adaptive video sources (HLS/DASH) |
+| hasAudio | boolean | No | Whether the video has audio |
+| fps | number | No | Frames per second |
+
+### VideoSource Object
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| quality | '1080p' \| '720p' \| '480p' \| '360p' | Quality preset |
+| width | number | Width of the video in pixels |
+| height | number | Height of the video in pixels |
+| types | object[] | Array of formats available `{ format: 'mp4' \| 'mp4-luminance'; uri: string }[]` |
+
+### AdaptiveVideoSource Object
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| format | 'hls' \| 'dash' | Adaptive streaming format |
+| uri | string | URI for the adaptive source |
+
+## Features
+
+- Automatic quality selection based on container size
+- Supports poster images with transition effects
+- Custom playback rate
+- Accessibility support through alt text
+- Responsive scaling and positioning
+- Support for adaptive streaming (HLS/DASH)
+
+## Technical Details
+
+The Video component uses a custom element (`wow-video`) under the hood that handles:
+- Intersection observation for visibility-based optimizations
+- Automatic resizing and layout adjustments
+- Optimal video quality selection based on container dimensions
+- Poster image display and transition
+
+## Data Manifest
+
+This package exports a `videoDataManifest` object that can be used for component manifests that use the Video component.
+
+### Usage
+
+```js
+import { videoDataManifest } from '@wix/video';
+
+// Use in your component manifest
+const myComponentManifest = {
+  // ... other component properties
+  data: {
+    video: videoDataManifest,
+    // ... other properties
+  }
+};
+```

package/dist/cjs/Video.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _VideoModule = _interopRequireDefault(require("./Video.module.scss"));
+var _utils = require("./custom-element/utils");
+var _customElementInit = require("./customElementInit");
+var _image = require("@wix/image");
+var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/video/dist/cjs/Video.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+if (typeof window !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      (0, _customElementInit.initCustomElement)();
+      (0, _image.initCustomElement)();
+    }, {
+      once: true
+    });
+  } else {
+    (0, _customElementInit.initCustomElement)();
+    (0, _image.initCustomElement)();
+  }
+}
+const Video = props => {
+  const {
+    motionPart,
+    videoRef,
+    videoMedia,
+    muted,
+    loop,
+    autoplay,
+    playbackRate = 1,
+    posterEffect,
+    id,
+    qualityPolicy = 'proportional',
+    focalPoint,
+    onError
+  } = props;
+  const wowVideoRef = React.useRef(null);
+  const videoInfoString = React.useMemo(() => {
+    const sortedQualities = (0, _utils.sortQualities)(videoMedia.sources || []);
+    return JSON.stringify({
+      ...videoMedia,
+      playbackRate,
+      posterEffect,
+      sources: sortedQualities,
+      autoplay,
+      qualityPolicy,
+      focalPoint
+    });
+  }, [videoMedia, playbackRate, posterEffect, autoplay, qualityPolicy, focalPoint]);
+  const VideoPosterImage = videoMedia.poster && /*#__PURE__*/React.createElement(_image.Image, (0, _extends2.default)({}, videoMedia.poster, {
+    focalPoint: focalPoint,
+    id: `videoPoster_${id}`,
+    displayMode: "fill",
+    alt: videoMedia.name || videoMedia.poster.alt || "",
+    quality: videoMedia.poster.quality ? {
+      quality: videoMedia.poster.quality
+    } : undefined,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 65,
+      columnNumber: 5
+    }
+  }));
+  const handleVideoElementError = React.useCallback(event => {
+    if (onError) {
+      var _videoElement$error;
+      const videoElement = event.currentTarget;
+      const error = new Error(`Video playback error: ${((_videoElement$error = videoElement.error) == null ? void 0 : _videoElement$error.message) || "Unknown error"}`);
+      onError(error);
+    }
+  }, [onError]);
+  const handleAdaptiveVideoError = React.useCallback(event => {
+    var _event$detail;
+    if (onError && (_event$detail = event.detail) != null && _event$detail.error) {
+      onError(event.detail.error);
+    }
+  }, [onError]);
+  React.useEffect(() => {
+    const element = wowVideoRef.current;
+    element == null || element.addEventListener("videoerror", handleAdaptiveVideoError);
+    return () => {
+      element == null || element.removeEventListener("videoerror", handleAdaptiveVideoError);
+    };
+  }, [onError, handleAdaptiveVideoError]);
+  return /*#__PURE__*/React.createElement("wow-video", {
+    ref: wowVideoRef,
+    "data-video-info": videoInfoString,
+    "data-motion-part": motionPart || '',
+    class: _VideoModule.default.videoContainer,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("video", {
+    ref: videoRef,
+    className: _VideoModule.default.video,
+    crossOrigin: "anonymous",
+    playsInline: true,
+    muted: muted,
+    loop: loop,
+    preload: "none",
+    onError: handleVideoElementError,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 118,
+      columnNumber: 7
+    }
+  }), VideoPosterImage);
+};
+var _default = exports.default = Video;
+//# sourceMappingURL=Video.js.map

package/dist/cjs/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_VideoModule","_interopRequireDefault","_utils","_customElementInit","_image","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","window","document","readyState","addEventListener","initCustomElement","initImageCustomElement","once","Video","props","motionPart","videoRef","videoMedia","muted","loop","autoplay","playbackRate","posterEffect","id","qualityPolicy","focalPoint","onError","wowVideoRef","useRef","videoInfoString","useMemo","sortedQualities","sortQualities","sources","JSON","stringify","VideoPosterImage","poster","createElement","Image","_extends2","displayMode","alt","name","quality","undefined","__self","__source","fileName","lineNumber","columnNumber","handleVideoElementError","useCallback","event","_videoElement$error","videoElement","currentTarget","error","Error","message","handleAdaptiveVideoError","_event$detail","detail","useEffect","element","current","removeEventListener","ref","class","styles","videoContainer","className","video","crossOrigin","playsInline","preload","_default","exports"],"sources":["../../src/Video.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { VideoProps } from './types';\nimport styles from './Video.module.scss';\nimport { sortQualities } from './custom-element/utils';\nimport { initCustomElement } from './customElementInit';\nimport { Image, initCustomElement as initImageCustomElement } from '@wix/image';\n\nif (typeof window !== 'undefined') {\n  if (document.readyState === 'loading') {\n    document.addEventListener(\n      'DOMContentLoaded',\n      () => {\n        initCustomElement();\n        initImageCustomElement();\n      },\n      {\n        once: true,\n      },\n    );\n  } else {\n    initCustomElement();\n    initImageCustomElement();\n  }\n}\n\nconst Video: React.FC<VideoProps> = (props) => {\n  const {\n    motionPart,\n    videoRef,\n    videoMedia,\n    muted,\n    loop,\n    autoplay,\n    playbackRate = 1,\n    posterEffect,\n    id,\n    qualityPolicy = 'proportional',\n    focalPoint,\n    onError,\n  } = props;\n\n  const wowVideoRef = React.useRef<HTMLElement>(null);\n\n  const videoInfoString = React.useMemo(() => {\n    const sortedQualities = sortQualities(videoMedia.sources || []);\n    return JSON.stringify({\n      ...videoMedia,\n      playbackRate,\n      posterEffect,\n      sources: sortedQualities,\n      autoplay,\n      qualityPolicy,\n      focalPoint,\n    });\n  }, [\n    videoMedia,\n    playbackRate,\n    posterEffect,\n    autoplay,\n    qualityPolicy,\n    focalPoint,\n  ]);\n\n  const VideoPosterImage = videoMedia.poster && (\n    <Image\n      {...videoMedia.poster}\n      focalPoint={focalPoint}\n      id={`videoPoster_${id}`}\n      displayMode=\"fill\"\n      alt={videoMedia.name || videoMedia.poster.alt || \"\"}\n      quality={\n        videoMedia.poster.quality\n          ? { quality: videoMedia.poster.quality }\n          : undefined\n      }\n    />\n  );\n\n  const handleVideoElementError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLVideoElement, Event>) => {\n      if (onError) {\n        const videoElement = event.currentTarget;\n        const error = new Error(\n          `Video playback error: ${\n            videoElement.error?.message || \"Unknown error\"\n          }`\n        );\n        onError(error);\n      }\n    },\n    [onError]\n  );\n\n  const handleAdaptiveVideoError = React.useCallback(\n    (event: any) => {\n      if (onError && event.detail?.error) {\n        onError(event.detail.error);\n      }\n    },\n    [onError]\n  );\n\n  React.useEffect(() => {\n    const element = wowVideoRef.current;\n    element?.addEventListener(\"videoerror\", handleAdaptiveVideoError);\n    return () => {\n      element?.removeEventListener(\"videoerror\", handleAdaptiveVideoError);\n    };\n  }, [onError, handleAdaptiveVideoError]);\n\n  return (\n    <wow-video\n      ref={wowVideoRef}\n      data-video-info={videoInfoString}\n      data-motion-part={motionPart || ''}\n      class={styles.videoContainer}\n    >\n      <video\n        ref={videoRef}\n        className={styles.video}\n        crossOrigin=\"anonymous\"\n        playsInline={true}\n        muted={muted}\n        loop={loop}\n        preload=\"none\"\n        onError={handleVideoElementError}\n      />\n      {VideoPosterImage}\n    </wow-video>\n  );\n};\n\nexport default Video;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/Video.module.scss

@@ -0,0 +1,27 @@
+.video-container {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+  container-type: size;
+}
+
+.video-poster-img {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--poster-fit, cover);
+  object-position: var(--poster-align, center);
+}
+
+.video {
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  object-fit: var(--video-fit, cover);
+  opacity: 0;
+  --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
+  --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
+  object-position: clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%);
+}

package/dist/cjs/Video.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index");
+var _Container = require("./storybook/Container");
+var _args = require("./storybook/args");
+var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/video/dist/cjs/Video.stories.tsx";
+const openExperiments = [];
+const urlParams = new URLSearchParams(window.location.search);
+const experimentsParam = urlParams.get('experiments');
+((experimentsParam == null ? void 0 : experimentsParam.split(',')) || []).forEach(experiment => {
+  openExperiments.push(experiment);
+});
+var _default = exports.default = {
+  title: 'Video',
+  component: _index.Video,
+  argTypes: _args.argTypes
+};
+const Default = args => {
+  const id = 'comp_12345';
+  const videoRef = _react.default.useRef(null);
+  _react.default.useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.load();
+    }
+  }, [args.autoplay, args.qualityPolicy]);
+  const videoProps = {
+    loop: Boolean(args.loop),
+    muted: Boolean(args.muted),
+    playbackRate: args.playbackRate,
+    posterEffect: args.posterEffect,
+    autoplay: Boolean(args.autoplay),
+    videoMedia: _args.sampleVideo.videoMedia,
+    id,
+    videoRef,
+    qualityPolicy: args.qualityPolicy,
+    focalPoint: {
+      x: args.focalPointX,
+      y: args.focalPointY
+    },
+    onError: error => {
+      console.log('Video error:', error);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Container.Container, {
+    width: args.containerWidth,
+    height: args.containerHeight,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 63,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.Video, (0, _extends2.default)({}, videoProps, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 64,
+      columnNumber: 7
+    }
+  })));
+};
+exports.Default = Default;
+//# sourceMappingURL=Video.stories.js.map

package/dist/cjs/Video.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_index","_Container","_args","_jsxFileName","openExperiments","urlParams","URLSearchParams","window","location","search","experimentsParam","get","split","forEach","experiment","push","_default","exports","default","title","component","Video","argTypes","Default","args","id","videoRef","React","useRef","useEffect","current","load","autoplay","qualityPolicy","videoProps","loop","Boolean","muted","playbackRate","posterEffect","videoMedia","sampleVideo","focalPoint","x","focalPointX","y","focalPointY","onError","error","console","log","createElement","Container","width","containerWidth","height","containerHeight","__self","__source","fileName","lineNumber","columnNumber","_extends2"],"sources":["../../src/Video.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { Meta } from '@wix/yoshi-storybook-dependencies';\nimport { Video } from './index';\nimport { Container } from './storybook/Container';\nimport { argTypes, sampleVideo } from './storybook/args';\nimport type { QualityPolicy, VideoProps } from './types';\n\nconst openExperiments: string[] = [];\n\nconst urlParams = new URLSearchParams(window.location.search);\nconst experimentsParam = urlParams.get('experiments');\n(experimentsParam?.split(',') || []).forEach((experiment) => {\n  openExperiments.push(experiment);\n});\n\nexport default {\n  title: 'Video',\n  component: Video,\n  argTypes,\n} as Meta;\n\ntype StoryArgs = {\n  qualityPolicy: QualityPolicy;\n  uri: string;\n  containerHeight: number;\n  containerWidth: number;\n  loop: boolean;\n  muted: boolean;\n  autoplay: boolean;\n  playbackRate: number;\n  posterEffect: 'fade';\n  focalPointX: number;\n  focalPointY: number;\n};\n\nexport const Default: React.VFC<StoryArgs> = (args) => {\n  const id = 'comp_12345';\n  const videoRef = React.useRef<HTMLVideoElement>(null);\n\n  React.useEffect(() => {\n    if (videoRef.current) {\n      videoRef.current.load();\n    }\n  }, [args.autoplay, args.qualityPolicy]);\n\n  const videoProps: VideoProps = {\n    loop: Boolean(args.loop),\n    muted: Boolean(args.muted),\n    playbackRate: args.playbackRate,\n    posterEffect: args.posterEffect,\n    autoplay: Boolean(args.autoplay),\n    videoMedia: sampleVideo.videoMedia,\n    id,\n    videoRef,\n    qualityPolicy: args.qualityPolicy,\n    focalPoint: { x: args.focalPointX, y: args.focalPointY },\n    onError: (error) => {\n      console.log('Video error:', error);\n    },\n  };\n\n  return (\n    <Container width={args.containerWidth} height={args.containerHeight}>\n      <Video {...videoProps} />\n    </Container>\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAyD,IAAAI,YAAA;AAGzD,MAAMC,eAAyB,GAAG,EAAE;AAEpC,MAAMC,SAAS,GAAG,IAAIC,eAAe,CAACC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;AAC7D,MAAMC,gBAAgB,GAAGL,SAAS,CAACM,GAAG,CAAC,aAAa,CAAC;AACrD,CAAC,CAAAD,gBAAgB,oBAAhBA,gBAAgB,CAAEE,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE,EAAEC,OAAO,CAAEC,UAAU,IAAK;EAC3DV,eAAe,CAACW,IAAI,CAACD,UAAU,CAAC;AAClC,CAAC,CAAC;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEY;EACbC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAEC,YAAK;EAChBC,QAAQ,EAARA;AACF,CAAC;AAgBM,MAAMC,OAA6B,GAAIC,IAAI,IAAK;EACrD,MAAMC,EAAE,GAAG,YAAY;EACvB,MAAMC,QAAQ,GAAGC,cAAK,CAACC,MAAM,CAAmB,IAAI,CAAC;EAErDD,cAAK,CAACE,SAAS,CAAC,MAAM;IACpB,IAAIH,QAAQ,CAACI,OAAO,EAAE;MACpBJ,QAAQ,CAACI,OAAO,CAACC,IAAI,CAAC,CAAC;IACzB;EACF,CAAC,EAAE,CAACP,IAAI,CAACQ,QAAQ,EAAER,IAAI,CAACS,aAAa,CAAC,CAAC;EAEvC,MAAMC,UAAsB,GAAG;IAC7BC,IAAI,EAAEC,OAAO,CAACZ,IAAI,CAACW,IAAI,CAAC;IACxBE,KAAK,EAAED,OAAO,CAACZ,IAAI,CAACa,KAAK,CAAC;IAC1BC,YAAY,EAAEd,IAAI,CAACc,YAAY;IAC/BC,YAAY,EAAEf,IAAI,CAACe,YAAY;IAC/BP,QAAQ,EAAEI,OAAO,CAACZ,IAAI,CAACQ,QAAQ,CAAC;IAChCQ,UAAU,EAAEC,iBAAW,CAACD,UAAU;IAClCf,EAAE;IACFC,QAAQ;IACRO,aAAa,EAAET,IAAI,CAACS,aAAa;IACjCS,UAAU,EAAE;MAAEC,CAAC,EAAEnB,IAAI,CAACoB,WAAW;MAAEC,CAAC,EAAErB,IAAI,CAACsB;IAAY,CAAC;IACxDC,OAAO,EAAGC,KAAK,IAAK;MAClBC,OAAO,CAACC,GAAG,CAAC,cAAc,EAAEF,KAAK,CAAC;IACpC;EACF,CAAC;EAED,oBACEnD,MAAA,CAAAqB,OAAA,CAAAiC,aAAA,CAAClD,UAAA,CAAAmD,SAAS;IAACC,KAAK,EAAE7B,IAAI,CAAC8B,cAAe;IAACC,MAAM,EAAE/B,IAAI,CAACgC,eAAgB;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxD,YAAA;MAAAyD,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClEhE,MAAA,CAAAqB,OAAA,CAAAiC,aAAA,CAACnD,MAAA,CAAAqB,KAAK,MAAAyC,SAAA,CAAA5C,OAAA,MAAKgB,UAAU;IAAAuB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxD,YAAA;MAAAyD,UAAA;MAAAC,YAAA;IAAA;EAAA,EAAG,CACf,CAAC;AAEhB,CAAC;AAAC5C,OAAA,CAAAM,OAAA,GAAAA,OAAA","ignoreList":[]}

package/dist/cjs/custom-element/WowVideo.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _videoLayout = _interopRequireDefault(require("./videoLayout"));
+function wowVideoFactory(services, contextWindow) {
+  return class WowVideo extends contextWindow.HTMLElement {
+    constructor() {
+      super();
+      (0, _defineProperty2.default)(this, "timeoutId", void 0);
+      this.timeoutId = null;
+    }
+
+    /**
+     * Dispatch a custom error event that bubbles up
+     */
+    dispatchVideoError(error) {
+      this.dispatchEvent(new CustomEvent('videoerror', {
+        detail: {
+          error
+        },
+        bubbles: true
+      }));
+    }
+    attributeChangedCallback(_, oldValue) {
+      if (oldValue) {
+        this.reLayout();
+      }
+    }
+    connectedCallback() {
+      var _services$intersectio;
+      (_services$intersectio = services.intersectionService) == null || _services$intersectio.observe(this);
+    }
+    disconnectedCallback() {
+      this.unobserveIntersect();
+    }
+    unobserveIntersect() {
+      var _services$intersectio2;
+      (_services$intersectio2 = services.intersectionService) == null || _services$intersectio2.unobserve(this);
+    }
+
+    /**
+     * Check if the user prefers reduced motion
+     *
+     * @returns {boolean} True if reduced motion is preferred
+     */
+    isPrefersReducedMotion() {
+      return contextWindow.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+    reLayout() {
+      if (!this.dataset.videoInfo) {
+        return;
+      }
+      const {
+        uri,
+        sources,
+        adaptiveSources,
+        autoplay,
+        playbackRate,
+        posterEffect,
+        qualityPolicy,
+        focalPoint,
+        duration
+      } = JSON.parse(this.dataset.videoInfo);
+      const prefersReducedMotion = this.isPrefersReducedMotion();
+      const autoPlayAllowed = !prefersReducedMotion && autoplay;
+      const videoNode = this.querySelector('video');
+      const poster = this.querySelector('img');
+      services.mutationService.measure(async () => {
+        const measures = await _videoLayout.default.measure(videoNode, this, qualityPolicy, uri, sources, adaptiveSources, duration, error => this.dispatchVideoError(error));
+        const {
+          needsSrcUpdate,
+          patchVideoSource
+        } = measures;
+        services.mutationService.mutate(() => {
+          _videoLayout.default.mutate(poster, videoNode, autoPlayAllowed, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource, sources, focalPoint);
+        });
+      });
+    }
+    static get observedAttributes() {
+      return ['data-video-info'];
+    }
+  };
+}
+var _default = exports.default = wowVideoFactory;
+//# sourceMappingURL=WowVideo.js.map

package/dist/cjs/custom-element/WowVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_videoLayout","_interopRequireDefault","require","wowVideoFactory","services","contextWindow","WowVideo","HTMLElement","constructor","_defineProperty2","default","timeoutId","dispatchVideoError","error","dispatchEvent","CustomEvent","detail","bubbles","attributeChangedCallback","_","oldValue","reLayout","connectedCallback","_services$intersectio","intersectionService","observe","disconnectedCallback","unobserveIntersect","_services$intersectio2","unobserve","isPrefersReducedMotion","matchMedia","matches","dataset","videoInfo","uri","sources","adaptiveSources","autoplay","playbackRate","posterEffect","qualityPolicy","focalPoint","duration","JSON","parse","prefersReducedMotion","autoPlayAllowed","videoNode","querySelector","poster","mutationService","measure","measures","videoLayout","needsSrcUpdate","patchVideoSource","mutate","observedAttributes","_default","exports"],"sources":["../../../src/custom-element/WowVideo.ts"],"sourcesContent":["import videoLayout from './videoLayout';\nimport type { WowVideoServices, Timeout } from '../types';\n\nfunction wowVideoFactory(\n  services: WowVideoServices,\n  contextWindow: Window & typeof globalThis,\n): any {\n  return class WowVideo extends contextWindow.HTMLElement {\n    timeoutId: Timeout | null;\n\n    constructor() {\n      super();\n      this.timeoutId = null;\n    }\n\n    /**\n     * Dispatch a custom error event that bubbles up\n     */\n    dispatchVideoError(error: Error) {\n      this.dispatchEvent(\n        new CustomEvent('videoerror', {\n          detail: { error },\n          bubbles: true,\n        }),\n      );\n    }\n\n    attributeChangedCallback(_: string, oldValue: string) {\n      if (oldValue) {\n        this.reLayout();\n      }\n    }\n\n    connectedCallback() {\n      services.intersectionService?.observe(this);\n    }\n\n    disconnectedCallback() {\n      this.unobserveIntersect();\n    }\n\n    unobserveIntersect() {\n      services.intersectionService?.unobserve(this);\n    }\n\n    /**\n     * Check if the user prefers reduced motion\n     *\n     * @returns {boolean} True if reduced motion is preferred\n     */\n    isPrefersReducedMotion(): boolean {\n      return contextWindow.matchMedia('(prefers-reduced-motion: reduce)')\n        .matches;\n    }\n\n    reLayout() {\n      if (!this.dataset.videoInfo) {\n        return;\n      }\n\n      const {\n        uri,\n        sources,\n        adaptiveSources,\n        autoplay,\n        playbackRate,\n        posterEffect,\n        qualityPolicy,\n        focalPoint,\n        duration,\n      } = JSON.parse(this.dataset.videoInfo);\n\n      const prefersReducedMotion = this.isPrefersReducedMotion();\n      const autoPlayAllowed = !prefersReducedMotion && autoplay;\n\n      const videoNode = this.querySelector('video') as HTMLVideoElement;\n      const poster = this.querySelector('img') as HTMLImageElement;\n\n      services.mutationService.measure(async () => {\n        const measures = await videoLayout.measure(\n          videoNode,\n          this,\n          qualityPolicy,\n          uri,\n          sources,\n          adaptiveSources,\n          duration,\n          (error: Error) => this.dispatchVideoError(error),\n        );\n\n        const { needsSrcUpdate, patchVideoSource } = measures;\n        services.mutationService.mutate(() => {\n          videoLayout.mutate(\n            poster,\n            videoNode,\n            autoPlayAllowed,\n            needsSrcUpdate,\n            posterEffect,\n            playbackRate,\n            patchVideoSource,\n            sources,\n            focalPoint,\n          );\n        });\n      });\n    }\n\n    static get observedAttributes() {\n      return ['data-video-info'];\n    }\n  };\n}\n\nexport default wowVideoFactory;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/custom-element/registry.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.init = init;
+var _WowVideo = _interopRequireDefault(require("./WowVideo"));
+var _fastdom = _interopRequireDefault(require("fastdom"));
+function init(contextWindow, services) {
+  contextWindow = contextWindow || window;
+  const elementName = 'wow-video';
+  if (contextWindow.customElements.get(elementName) === undefined) {
+    let intersectionObserver;
+    if (contextWindow.IntersectionObserver) {
+      intersectionObserver = new IntersectionObserver(entries => entries.map(entry => {
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          target.unobserveIntersect();
+          target.reLayout();
+        }
+        return entry;
+      }), {
+        rootMargin: '50% 100%'
+      });
+    }
+    const WowVideo = (0, _WowVideo.default)({
+      mutationService: _fastdom.default,
+      intersectionService: intersectionObserver,
+      ...services
+    }, contextWindow);
+    contextWindow.customElements.define(elementName, WowVideo);
+  }
+  return;
+}
+//# sourceMappingURL=registry.js.map

package/dist/cjs/custom-element/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_WowVideo","_interopRequireDefault","require","_fastdom","init","contextWindow","services","window","elementName","customElements","get","undefined","intersectionObserver","IntersectionObserver","entries","map","entry","isIntersecting","target","unobserveIntersect","reLayout","rootMargin","WowVideo","wowVideoFactory","mutationService","fastdom","intersectionService","define"],"sources":["../../../src/custom-element/registry.ts"],"sourcesContent":["import wowVideoFactory from './WowVideo';\nimport fastdom from 'fastdom';\n\nimport type {\n  CustomElementServices,\n  WowVideo,\n  WowVideoServices,\n} from '../types';\n\nexport function init(\n  contextWindow: Window & typeof globalThis,\n  services: CustomElementServices,\n) {\n  contextWindow = contextWindow || window;\n  const elementName = 'wow-video';\n\n  if (contextWindow.customElements.get(elementName) === undefined) {\n    let intersectionObserver: IntersectionObserver | undefined;\n\n    if (contextWindow.IntersectionObserver) {\n      intersectionObserver = new IntersectionObserver(\n        (entries: IntersectionObserverEntry[]) =>\n          entries.map((entry) => {\n            if (entry.isIntersecting) {\n              const target = entry.target as WowVideo;\n              target.unobserveIntersect();\n              target.reLayout();\n            }\n            return entry;\n          }),\n        {\n          rootMargin: '50% 100%',\n        },\n      );\n    }\n\n    const WowVideo = wowVideoFactory(\n      {\n        mutationService: fastdom,\n        intersectionService: intersectionObserver,\n        ...services,\n      } as WowVideoServices,\n      contextWindow!,\n    );\n    contextWindow!.customElements.define(elementName, WowVideo);\n  }\n\n  return;\n}\n"],"mappings":";;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AAQO,SAASE,IAAIA,CAClBC,aAAyC,EACzCC,QAA+B,EAC/B;EACAD,aAAa,GAAGA,aAAa,IAAIE,MAAM;EACvC,MAAMC,WAAW,GAAG,WAAW;EAE/B,IAAIH,aAAa,CAACI,cAAc,CAACC,GAAG,CAACF,WAAW,CAAC,KAAKG,SAAS,EAAE;IAC/D,IAAIC,oBAAsD;IAE1D,IAAIP,aAAa,CAACQ,oBAAoB,EAAE;MACtCD,oBAAoB,GAAG,IAAIC,oBAAoB,CAC5CC,OAAoC,IACnCA,OAAO,CAACC,GAAG,CAAEC,KAAK,IAAK;QACrB,IAAIA,KAAK,CAACC,cAAc,EAAE;UACxB,MAAMC,MAAM,GAAGF,KAAK,CAACE,MAAkB;UACvCA,MAAM,CAACC,kBAAkB,CAAC,CAAC;UAC3BD,MAAM,CAACE,QAAQ,CAAC,CAAC;QACnB;QACA,OAAOJ,KAAK;MACd,CAAC,CAAC,EACJ;QACEK,UAAU,EAAE;MACd,CACF,CAAC;IACH;IAEA,MAAMC,QAAQ,GAAG,IAAAC,iBAAe,EAC9B;MACEC,eAAe,EAAEC,gBAAO;MACxBC,mBAAmB,EAAEd,oBAAoB;MACzC,GAAGN;IACL,CAAC,EACDD,aACF,CAAC;IACDA,aAAa,CAAEI,cAAc,CAACkB,MAAM,CAACnB,WAAW,EAAEc,QAAQ,CAAC;EAC7D;EAEA;AACF","ignoreList":[]}