@wix/video 1.72.0

package/dist/cjs/test-types.d.js

@@ -0,0 +1,2 @@
+/// <reference types="@wix/jest-yoshi-preset/types" />
+//# sourceMappingURL=test-types.d.js.map

package/dist/cjs/test-types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/test-types.d.ts"],"sourcesContent":["/// <reference types=\"@wix/jest-yoshi-preset/types\" />\n"],"mappings":"AAAA","ignoreList":[]}

package/dist/cjs/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=types.js.map

package/dist/cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["import { ImageMedia } from '@wix/image';\n\nexport type VideoSource = {\n  quality: '1080p' | '720p' | '480p' | '360p';\n  width: number;\n  height: number;\n  types: {\n    format: 'mp4' | 'mp4-luminance';\n    uri: string;\n  }[];\n};\n\nexport type AdaptiveVideoSource = {\n  format: 'hls' | 'dash';\n  uri: string;\n};\n\nexport type VideoMedia = {\n  uri: string;\n  poster?: ImageMedia;\n  name?: string;\n  sources?: VideoSource[];\n  adaptiveSources?: AdaptiveVideoSource[];\n  hasAudio?: boolean;\n  fps?: number;\n  duration?: number;\n};\n\nexport type QualityPolicy = 'adaptive' | 'highest' | 'proportional';\n\nexport type VideoProps = {\n  id: string;\n  videoMedia: VideoMedia;\n  qualityPolicy: QualityPolicy;\n  loop: boolean;\n  muted: boolean;\n  autoplay: boolean;\n  motionPart?: string;\n  playbackRate?: number;\n  posterEffect?: 'fade';\n  videoRef: React.RefObject<HTMLVideoElement>;\n  focalPoint?: { x: number; y: number };\n  onError?: (error: Error) => void;\n};\n\nexport type VideoData = Omit<VideoProps, 'videoRef' | 'id' | 'onError'>;\n\nexport type Timeout = ReturnType<typeof setTimeout>;\n\nexport type EnvConsts = {\n  experiments?: Record<string, string | boolean>;\n};\n\nexport type CustomElementServices = {\n  isExperimentOpen?: (experiment: string) => boolean;\n  mutationService?: any;\n};\n\nexport type WowVideoServices = CustomElementServices & {\n  resizeService?: ResizeObserver;\n  intersectionService?: IntersectionObserver;\n};\n\nexport type WowVideo = Element & {\n  reLayout: () => void;\n  observeResize: () => void;\n  unobserveIntersect: () => void;\n};\n"],"mappings":"","ignoreList":[]}

package/dist/esm/Video.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import styles from './Video.module.scss';
+import { sortQualities } from './custom-element/utils';
+import { initCustomElement } from './customElementInit';
+import { Image, initCustomElement as initImageCustomElement } from '@wix/image';
+if (typeof window !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      initCustomElement();
+      initImageCustomElement();
+    }, {
+      once: true
+    });
+  } else {
+    initCustomElement();
+    initImageCustomElement();
+  }
+}
+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 = 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, _extends({}, videoMedia.poster, {
+    focalPoint: focalPoint,
+    id: `videoPoster_${id}`,
+    displayMode: "fill",
+    alt: videoMedia.name || videoMedia.poster.alt || "",
+    quality: videoMedia.poster.quality ? {
+      quality: videoMedia.poster.quality
+    } : undefined
+  }));
+  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: styles.videoContainer
+  }, /*#__PURE__*/React.createElement("video", {
+    ref: videoRef,
+    className: styles.video,
+    crossOrigin: "anonymous",
+    playsInline: true,
+    muted: muted,
+    loop: loop,
+    preload: "none",
+    onError: handleVideoElementError
+  }), VideoPosterImage);
+};
+export default Video;
+//# sourceMappingURL=Video.js.map

package/dist/esm/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","styles","sortQualities","initCustomElement","Image","initImageCustomElement","window","document","readyState","addEventListener","once","Video","props","motionPart","videoRef","videoMedia","muted","loop","autoplay","playbackRate","posterEffect","id","qualityPolicy","focalPoint","onError","wowVideoRef","useRef","videoInfoString","useMemo","sortedQualities","sources","JSON","stringify","VideoPosterImage","poster","createElement","_extends","displayMode","alt","name","quality","undefined","handleVideoElementError","useCallback","event","_videoElement$error","videoElement","currentTarget","error","Error","message","handleAdaptiveVideoError","_event$detail","detail","useEffect","element","current","removeEventListener","ref","class","videoContainer","className","video","crossOrigin","playsInline","preload"],"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/esm/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/esm/Video.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Video } from './index';
+import { Container } from './storybook/Container';
+import { argTypes, sampleVideo } from './storybook/args';
+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);
+});
+export default {
+  title: 'Video',
+  component: Video,
+  argTypes
+};
+export const Default = args => {
+  const id = 'comp_12345';
+  const videoRef = React.useRef(null);
+  React.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: sampleVideo.videoMedia,
+    id,
+    videoRef,
+    qualityPolicy: args.qualityPolicy,
+    focalPoint: {
+      x: args.focalPointX,
+      y: args.focalPointY
+    },
+    onError: error => {
+      console.log('Video error:', error);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Container, {
+    width: args.containerWidth,
+    height: args.containerHeight
+  }, /*#__PURE__*/React.createElement(Video, videoProps));
+};
+//# sourceMappingURL=Video.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Video","Container","argTypes","sampleVideo","openExperiments","urlParams","URLSearchParams","window","location","search","experimentsParam","get","split","forEach","experiment","push","title","component","Default","args","id","videoRef","useRef","useEffect","current","load","autoplay","qualityPolicy","videoProps","loop","Boolean","muted","playbackRate","posterEffect","videoMedia","focalPoint","x","focalPointX","y","focalPointY","onError","error","console","log","createElement","width","containerWidth","height","containerHeight"],"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,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,SAAS,QAAQ,uBAAuB;AACjD,SAASC,QAAQ,EAAEC,WAAW,QAAQ,kBAAkB;AAGxD,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;AAEF,eAAe;EACbE,KAAK,EAAE,OAAO;EACdC,SAAS,EAAEjB,KAAK;EAChBE;AACF,CAAC;AAgBD,OAAO,MAAMgB,OAA6B,GAAIC,IAAI,IAAK;EACrD,MAAMC,EAAE,GAAG,YAAY;EACvB,MAAMC,QAAQ,GAAGtB,KAAK,CAACuB,MAAM,CAAmB,IAAI,CAAC;EAErDvB,KAAK,CAACwB,SAAS,CAAC,MAAM;IACpB,IAAIF,QAAQ,CAACG,OAAO,EAAE;MACpBH,QAAQ,CAACG,OAAO,CAACC,IAAI,CAAC,CAAC;IACzB;EACF,CAAC,EAAE,CAACN,IAAI,CAACO,QAAQ,EAAEP,IAAI,CAACQ,aAAa,CAAC,CAAC;EAEvC,MAAMC,UAAsB,GAAG;IAC7BC,IAAI,EAAEC,OAAO,CAACX,IAAI,CAACU,IAAI,CAAC;IACxBE,KAAK,EAAED,OAAO,CAACX,IAAI,CAACY,KAAK,CAAC;IAC1BC,YAAY,EAAEb,IAAI,CAACa,YAAY;IAC/BC,YAAY,EAAEd,IAAI,CAACc,YAAY;IAC/BP,QAAQ,EAAEI,OAAO,CAACX,IAAI,CAACO,QAAQ,CAAC;IAChCQ,UAAU,EAAE/B,WAAW,CAAC+B,UAAU;IAClCd,EAAE;IACFC,QAAQ;IACRM,aAAa,EAAER,IAAI,CAACQ,aAAa;IACjCQ,UAAU,EAAE;MAAEC,CAAC,EAAEjB,IAAI,CAACkB,WAAW;MAAEC,CAAC,EAAEnB,IAAI,CAACoB;IAAY,CAAC;IACxDC,OAAO,EAAGC,KAAK,IAAK;MAClBC,OAAO,CAACC,GAAG,CAAC,cAAc,EAAEF,KAAK,CAAC;IACpC;EACF,CAAC;EAED,oBACE1C,KAAA,CAAA6C,aAAA,CAAC3C,SAAS;IAAC4C,KAAK,EAAE1B,IAAI,CAAC2B,cAAe;IAACC,MAAM,EAAE5B,IAAI,CAAC6B;EAAgB,gBAClEjD,KAAA,CAAA6C,aAAA,CAAC5C,KAAK,EAAK4B,UAAa,CACf,CAAC;AAEhB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,83 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import videoLayout from './videoLayout';
+function wowVideoFactory(services, contextWindow) {
+  return class WowVideo extends contextWindow.HTMLElement {
+    constructor() {
+      super();
+      _defineProperty(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.measure(videoNode, this, qualityPolicy, uri, sources, adaptiveSources, duration, error => this.dispatchVideoError(error));
+        const {
+          needsSrcUpdate,
+          patchVideoSource
+        } = measures;
+        services.mutationService.mutate(() => {
+          videoLayout.mutate(poster, videoNode, autoPlayAllowed, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource, sources, focalPoint);
+        });
+      });
+    }
+    static get observedAttributes() {
+      return ['data-video-info'];
+    }
+  };
+}
+export default wowVideoFactory;
+//# sourceMappingURL=WowVideo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["videoLayout","wowVideoFactory","services","contextWindow","WowVideo","HTMLElement","constructor","_defineProperty","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","needsSrcUpdate","patchVideoSource","mutate","observedAttributes"],"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":";AAAA,OAAOA,WAAW,MAAM,eAAe;AAGvC,SAASC,eAAeA,CACtBC,QAA0B,EAC1BC,aAAyC,EACpC;EACL,OAAO,MAAMC,QAAQ,SAASD,aAAa,CAACE,WAAW,CAAC;IAGtDC,WAAWA,CAAA,EAAG;MACZ,KAAK,CAAC,CAAC;MAACC,eAAA;MACR,IAAI,CAACC,SAAS,GAAG,IAAI;IACvB;;IAEA;AACJ;AACA;IACIC,kBAAkBA,CAACC,KAAY,EAAE;MAC/B,IAAI,CAACC,aAAa,CAChB,IAAIC,WAAW,CAAC,YAAY,EAAE;QAC5BC,MAAM,EAAE;UAAEH;QAAM,CAAC;QACjBI,OAAO,EAAE;MACX,CAAC,CACH,CAAC;IACH;IAEAC,wBAAwBA,CAACC,CAAS,EAAEC,QAAgB,EAAE;MACpD,IAAIA,QAAQ,EAAE;QACZ,IAAI,CAACC,QAAQ,CAAC,CAAC;MACjB;IACF;IAEAC,iBAAiBA,CAAA,EAAG;MAAA,IAAAC,qBAAA;MAClB,CAAAA,qBAAA,GAAAlB,QAAQ,CAACmB,mBAAmB,aAA5BD,qBAAA,CAA8BE,OAAO,CAAC,IAAI,CAAC;IAC7C;IAEAC,oBAAoBA,CAAA,EAAG;MACrB,IAAI,CAACC,kBAAkB,CAAC,CAAC;IAC3B;IAEAA,kBAAkBA,CAAA,EAAG;MAAA,IAAAC,sBAAA;MACnB,CAAAA,sBAAA,GAAAvB,QAAQ,CAACmB,mBAAmB,aAA5BI,sBAAA,CAA8BC,SAAS,CAAC,IAAI,CAAC;IAC/C;;IAEA;AACJ;AACA;AACA;AACA;IACIC,sBAAsBA,CAAA,EAAY;MAChC,OAAOxB,aAAa,CAACyB,UAAU,CAAC,kCAAkC,CAAC,CAChEC,OAAO;IACZ;IAEAX,QAAQA,CAAA,EAAG;MACT,IAAI,CAAC,IAAI,CAACY,OAAO,CAACC,SAAS,EAAE;QAC3B;MACF;MAEA,MAAM;QACJC,GAAG;QACHC,OAAO;QACPC,eAAe;QACfC,QAAQ;QACRC,YAAY;QACZC,YAAY;QACZC,aAAa;QACbC,UAAU;QACVC;MACF,CAAC,GAAGC,IAAI,CAACC,KAAK,CAAC,IAAI,CAACZ,OAAO,CAACC,SAAS,CAAC;MAEtC,MAAMY,oBAAoB,GAAG,IAAI,CAAChB,sBAAsB,CAAC,CAAC;MAC1D,MAAMiB,eAAe,GAAG,CAACD,oBAAoB,IAAIR,QAAQ;MAEzD,MAAMU,SAAS,GAAG,IAAI,CAACC,aAAa,CAAC,OAAO,CAAqB;MACjE,MAAMC,MAAM,GAAG,IAAI,CAACD,aAAa,CAAC,KAAK,CAAqB;MAE5D5C,QAAQ,CAAC8C,eAAe,CAACC,OAAO,CAAC,YAAY;QAC3C,MAAMC,QAAQ,GAAG,MAAMlD,WAAW,CAACiD,OAAO,CACxCJ,SAAS,EACT,IAAI,EACJP,aAAa,EACbN,GAAG,EACHC,OAAO,EACPC,eAAe,EACfM,QAAQ,EACP9B,KAAY,IAAK,IAAI,CAACD,kBAAkB,CAACC,KAAK,CACjD,CAAC;QAED,MAAM;UAAEyC,cAAc;UAAEC;QAAiB,CAAC,GAAGF,QAAQ;QACrDhD,QAAQ,CAAC8C,eAAe,CAACK,MAAM,CAAC,MAAM;UACpCrD,WAAW,CAACqD,MAAM,CAChBN,MAAM,EACNF,SAAS,EACTD,eAAe,EACfO,cAAc,EACdd,YAAY,EACZD,YAAY,EACZgB,gBAAgB,EAChBnB,OAAO,EACPM,UACF,CAAC;QACH,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ;IAEA,WAAWe,kBAAkBA,CAAA,EAAG;MAC9B,OAAO,CAAC,iBAAiB,CAAC;IAC5B;EACF,CAAC;AACH;AAEA,eAAerD,eAAe","ignoreList":[]}

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

@@ -0,0 +1,29 @@
+import wowVideoFactory from './WowVideo';
+import fastdom from 'fastdom';
+export 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 = wowVideoFactory({
+      mutationService: fastdom,
+      intersectionService: intersectionObserver,
+      ...services
+    }, contextWindow);
+    contextWindow.customElements.define(elementName, WowVideo);
+  }
+  return;
+}
+//# sourceMappingURL=registry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["wowVideoFactory","fastdom","init","contextWindow","services","window","elementName","customElements","get","undefined","intersectionObserver","IntersectionObserver","entries","map","entry","isIntersecting","target","unobserveIntersect","reLayout","rootMargin","WowVideo","mutationService","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,OAAOA,eAAe,MAAM,YAAY;AACxC,OAAOC,OAAO,MAAM,SAAS;AAQ7B,OAAO,SAASC,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,GAAGpB,eAAe,CAC9B;MACEqB,eAAe,EAAEpB,OAAO;MACxBqB,mBAAmB,EAAEZ,oBAAoB;MACzC,GAAGN;IACL,CAAC,EACDD,aACF,CAAC;IACDA,aAAa,CAAEI,cAAc,CAACgB,MAAM,CAACjB,WAAW,EAAEc,QAAQ,CAAC;EAC7D;EAEA;AACF","ignoreList":[]}

package/dist/esm/custom-element/utils.js

@@ -0,0 +1,131 @@
+const STATIC_VIDEO_URL = 'https://video.wixstatic.com/';
+const STATIC_ADAPTIVE_VIDEO_URL = 'https://files.wix.com/';
+const isAbsoluteUrl = url => url.startsWith('http://') || url.startsWith('https://');
+export function sortQualities(sources) {
+  return sources.sort((a, b) => a.width * a.height - b.width * b.height);
+}
+function getCompleteUrl(url, staticVideoUrl) {
+  const completeUrl = isAbsoluteUrl(url) ? new URL(url) : new URL(url, staticVideoUrl);
+  return completeUrl.href;
+}
+function getVideoQualityBySize(sources, _ref) {
+  let {
+    width,
+    height
+  } = _ref;
+  const targetQuality = sources.find(value => value.width * value.height > width * height);
+  return targetQuality || sources[sources.length - 1];
+}
+function getScaleFactor(containerWidth, containerHeight, videoWidth, videoHeight) {
+  return {
+    wScale: containerWidth / videoWidth,
+    hScale: containerHeight / videoHeight
+  };
+}
+function getVideoDimension(videoScale, videoWidth, videoHeight) {
+  const scale = Math.min(videoScale.wScale, videoScale.hScale);
+  return {
+    width: Math.round(videoWidth * scale),
+    height: Math.round(videoHeight * scale)
+  };
+}
+export function setVideoFocalPoint(videoNode, focalPoint) {
+  const focalX = (focalPoint == null ? void 0 : focalPoint.x) ?? 50;
+  const focalY = (focalPoint == null ? void 0 : focalPoint.y) ?? 50;
+  videoNode.style.setProperty('--focal-x', focalX.toString());
+  videoNode.style.setProperty('--focal-y', focalY.toString());
+}
+export async function getVideoSource(width, height, uri, qualityPolicy, sources, adaptiveSources, duration, onError) {
+  const hasProgressiveSources = sources && sources.length > 0;
+  const hasAbsoluteUri = uri && isAbsoluteUrl(uri);
+  const shouldSkipAdaptiveShortVideo = duration && duration < 40;
+  if (qualityPolicy === 'adaptive' && adaptiveSources && adaptiveSources.length > 0 && !shouldSkipAdaptiveShortVideo) {
+    const hlsSource = adaptiveSources.find(s => s.format === 'hls');
+    const Hls = await import('hls.js');
+    if (hlsSource && Hls && Hls.default.isSupported()) {
+      const videoSourceUrl = getCompleteUrl(hlsSource.uri, STATIC_ADAPTIVE_VIDEO_URL);
+      const patchVideoSource = videoNode => {
+        const hls = new Hls.default();
+        hls.loadSource(videoSourceUrl);
+        hls.attachMedia(videoNode);
+        hls.on(Hls.default.Events.ERROR, (_, data) => {
+          if (data.fatal) {
+            switch (data.type) {
+              case Hls.default.ErrorTypes.NETWORK_ERROR:
+                hls.startLoad();
+                if (onError) {
+                  onError(new Error(`HLS Network Error: ${data.details}.\nAttempting to reconnect...`));
+                }
+                break;
+              case Hls.default.ErrorTypes.MEDIA_ERROR:
+                hls.recoverMediaError();
+                if (onError) {
+                  onError(new Error(`HLS Media Error: ${data.details}.\nAttempting to recover...`));
+                }
+                break;
+              default:
+                hls.destroy();
+                if (onError) {
+                  onError(new Error(`HLS Unknown Error: ${data.details}.\nUnrecoverable playback error`));
+                }
+                break;
+            }
+          }
+        });
+      };
+      return {
+        videoSourceUrl,
+        patchVideoSource
+      };
+    }
+  }
+  if (hasProgressiveSources) {
+    const highestQuality = sources[sources.length - 1];
+    if (qualityPolicy === 'highest') {
+      var _highestQuality$types;
+      const url = (_highestQuality$types = highestQuality.types.find(type => type.format === 'mp4')) == null ? void 0 : _highestQuality$types.uri;
+      if (url) {
+        const videoSourceUrl = getCompleteUrl(url, STATIC_VIDEO_URL);
+        return {
+          videoSourceUrl,
+          patchVideoSource: videoNode => {
+            videoNode.src = videoSourceUrl;
+            videoNode.load();
+          }
+        };
+      }
+    } else {
+      var _targetQuality$types$;
+      const videoWidth = parseInt(highestQuality.width.toString(), 10);
+      const videoHeight = parseInt(highestQuality.height.toString(), 10);
+      const scaleFactor = getScaleFactor(width, height, videoWidth, videoHeight);
+      const videoScaledDimensions = getVideoDimension(scaleFactor, videoWidth, videoHeight);
+      const targetQuality = getVideoQualityBySize(sources, videoScaledDimensions);
+      const url = (_targetQuality$types$ = targetQuality.types.find(type => type.format === 'mp4')) == null ? void 0 : _targetQuality$types$.uri;
+      if (url) {
+        const videoSourceUrl = getCompleteUrl(url, STATIC_VIDEO_URL);
+        return {
+          videoSourceUrl,
+          patchVideoSource: videoNode => {
+            videoNode.src = videoSourceUrl;
+            videoNode.load();
+          }
+        };
+      }
+    }
+  }
+  if (hasAbsoluteUri) {
+    return {
+      videoSourceUrl: uri,
+      patchVideoSource: videoNode => {
+        videoNode.src = uri;
+        videoNode.load();
+      }
+    };
+  }
+  return {
+    videoSourceUrl: '',
+    patchVideoSource: () => {}
+  };
+}
+//# sourceMappingURL=utils.js.map

package/dist/esm/custom-element/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["STATIC_VIDEO_URL","STATIC_ADAPTIVE_VIDEO_URL","isAbsoluteUrl","url","startsWith","sortQualities","sources","sort","a","b","width","height","getCompleteUrl","staticVideoUrl","completeUrl","URL","href","getVideoQualityBySize","_ref","targetQuality","find","value","length","getScaleFactor","containerWidth","containerHeight","videoWidth","videoHeight","wScale","hScale","getVideoDimension","videoScale","scale","Math","min","round","setVideoFocalPoint","videoNode","focalPoint","focalX","x","focalY","y","style","setProperty","toString","getVideoSource","uri","qualityPolicy","adaptiveSources","duration","onError","hasProgressiveSources","hasAbsoluteUri","shouldSkipAdaptiveShortVideo","hlsSource","s","format","Hls","default","isSupported","videoSourceUrl","patchVideoSource","hls","loadSource","attachMedia","on","Events","ERROR","_","data","fatal","type","ErrorTypes","NETWORK_ERROR","startLoad","Error","details","MEDIA_ERROR","recoverMediaError","destroy","highestQuality","_highestQuality$types","types","src","load","_targetQuality$types$","parseInt","scaleFactor","videoScaledDimensions"],"sources":["../../../src/custom-element/utils.ts"],"sourcesContent":["import { AdaptiveVideoSource, QualityPolicy, VideoSource } from '../types';\n\nconst STATIC_VIDEO_URL = 'https://video.wixstatic.com/';\nconst STATIC_ADAPTIVE_VIDEO_URL = 'https://files.wix.com/';\n\nconst isAbsoluteUrl = (url: string) =>\n  url.startsWith('http://') || url.startsWith('https://');\n\nexport function sortQualities(sources: VideoSource[]) {\n  return sources.sort((a, b) => a.width * a.height - b.width * b.height);\n}\n\nfunction getCompleteUrl(url: string, staticVideoUrl?: string): string {\n  const completeUrl = isAbsoluteUrl(url)\n    ? new URL(url)\n    : new URL(url, staticVideoUrl);\n  return completeUrl.href;\n}\n\nfunction getVideoQualityBySize(\n  sources: VideoSource[],\n  { width, height }: { width: number; height: number },\n): VideoSource {\n  const targetQuality = sources.find(\n    (value) => value.width * value.height > width * height,\n  );\n\n  return targetQuality || sources[sources.length - 1];\n}\n\nfunction getScaleFactor(\n  containerWidth: number,\n  containerHeight: number,\n  videoWidth: number,\n  videoHeight: number,\n): { wScale: number; hScale: number } {\n  return {\n    wScale: containerWidth / videoWidth,\n    hScale: containerHeight / videoHeight,\n  };\n}\n\nfunction getVideoDimension(\n  videoScale: { wScale: number; hScale: number },\n  videoWidth: number,\n  videoHeight: number,\n): { width: number; height: number } {\n  const scale: number = Math.min(videoScale.wScale, videoScale.hScale);\n\n  return {\n    width: Math.round(videoWidth * scale),\n    height: Math.round(videoHeight * scale),\n  };\n}\n\nexport function setVideoFocalPoint(\n  videoNode: HTMLVideoElement,\n  focalPoint: { x: number; y: number },\n) {\n  const focalX = focalPoint?.x ?? 50;\n  const focalY = focalPoint?.y ?? 50;\n  videoNode.style.setProperty('--focal-x', focalX.toString());\n  videoNode.style.setProperty('--focal-y', focalY.toString());\n}\n\nexport async function getVideoSource(\n  width: number,\n  height: number,\n  uri: string,\n  qualityPolicy: QualityPolicy,\n  sources?: VideoSource[],\n  adaptiveSources?: AdaptiveVideoSource[],\n  duration?: number,\n  onError?: (error: Error) => void,\n): Promise<{\n  videoSourceUrl: string;\n  patchVideoSource: (videoNode: HTMLVideoElement) => void;\n}> {\n  const hasProgressiveSources = sources && sources.length > 0;\n  const hasAbsoluteUri = uri && isAbsoluteUrl(uri);\n  const shouldSkipAdaptiveShortVideo = duration && duration < 40;\n\n  if (\n    qualityPolicy === 'adaptive' &&\n    adaptiveSources &&\n    adaptiveSources.length > 0 &&\n    !shouldSkipAdaptiveShortVideo\n  ) {\n    const hlsSource = adaptiveSources.find((s) => s.format === 'hls');\n    const Hls = await import('hls.js');\n    if (hlsSource && Hls && Hls.default.isSupported()) {\n      const videoSourceUrl = getCompleteUrl(\n        hlsSource.uri,\n        STATIC_ADAPTIVE_VIDEO_URL,\n      );\n      const patchVideoSource = (videoNode: HTMLVideoElement) => {\n        const hls = new Hls.default();\n        hls.loadSource(videoSourceUrl);\n        hls.attachMedia(videoNode);\n\n        hls.on(Hls.default.Events.ERROR, (_, data) => {\n          if (data.fatal) {\n            switch (data.type) {\n              case Hls.default.ErrorTypes.NETWORK_ERROR:\n                hls.startLoad();\n                if (onError) {\n                  onError(\n                    new Error(\n                      `HLS Network Error: ${data.details}.\\nAttempting to reconnect...`,\n                    ),\n                  );\n                }\n                break;\n              case Hls.default.ErrorTypes.MEDIA_ERROR:\n                hls.recoverMediaError();\n                if (onError) {\n                  onError(\n                    new Error(\n                      `HLS Media Error: ${data.details}.\\nAttempting to recover...`,\n                    ),\n                  );\n                }\n                break;\n              default:\n                hls.destroy();\n                if (onError) {\n                  onError(\n                    new Error(\n                      `HLS Unknown Error: ${data.details}.\\nUnrecoverable playback error`,\n                    ),\n                  );\n                }\n                break;\n            }\n          }\n        });\n      };\n      return { videoSourceUrl, patchVideoSource };\n    }\n  }\n  if (hasProgressiveSources) {\n    const highestQuality = sources[sources.length - 1];\n    if (qualityPolicy === 'highest') {\n      const url = highestQuality.types.find(\n        (type) => type.format === 'mp4',\n      )?.uri;\n      if (url) {\n        const videoSourceUrl = getCompleteUrl(url, STATIC_VIDEO_URL);\n        return {\n          videoSourceUrl,\n          patchVideoSource: (videoNode: HTMLVideoElement) => {\n            videoNode.src = videoSourceUrl;\n            videoNode.load();\n          },\n        };\n      }\n    } else {\n      const videoWidth = parseInt(highestQuality.width.toString(), 10);\n      const videoHeight = parseInt(highestQuality.height.toString(), 10);\n      const scaleFactor = getScaleFactor(\n        width,\n        height,\n        videoWidth,\n        videoHeight,\n      );\n      const videoScaledDimensions = getVideoDimension(\n        scaleFactor,\n        videoWidth,\n        videoHeight,\n      );\n      const targetQuality = getVideoQualityBySize(\n        sources,\n        videoScaledDimensions,\n      );\n      const url = targetQuality.types.find(\n        (type) => type.format === 'mp4',\n      )?.uri;\n      if (url) {\n        const videoSourceUrl = getCompleteUrl(url, STATIC_VIDEO_URL);\n        return {\n          videoSourceUrl,\n          patchVideoSource: (videoNode: HTMLVideoElement) => {\n            videoNode.src = videoSourceUrl;\n            videoNode.load();\n          },\n        };\n      }\n    }\n  }\n  if (hasAbsoluteUri) {\n    return {\n      videoSourceUrl: uri,\n      patchVideoSource: (videoNode: HTMLVideoElement) => {\n        videoNode.src = uri;\n        videoNode.load();\n      },\n    };\n  }\n  return {\n    videoSourceUrl: '',\n    patchVideoSource: () => {},\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/custom-element/videoLayout.js

@@ -0,0 +1,117 @@
+import { getVideoSource, setVideoFocalPoint } from './utils';
+export default {
+  /**
+   * @param {HTMLVideoElement} videoNode
+   * @param {HTMLElement} container
+   * @param {QualityPolicy} quality
+   * @param {string} uri
+   * @param {Object[]} sources
+   * @param {Object[]} adaptiveSources
+   * @param {number} duration
+   * @param {(error: Error) => void} onError
+   * @return {{currentSrc: string, videoSourceUrl: string}}
+   */
+  async measure(videoNode, container, quality, uri, sources, adaptiveSources, duration, onError) {
+    const {
+      videoSourceUrl,
+      patchVideoSource
+    } = await getVideoSource(container.offsetWidth, container.offsetHeight, uri, quality, sources, adaptiveSources, duration, onError);
+    const needsSrcUpdate = shouldUpdateSrc(videoNode, videoSourceUrl);
+    return {
+      needsSrcUpdate,
+      patchVideoSource
+    };
+  },
+  /**
+   * @param {HTMLDivElement} poster
+   * @param {HTMLVideoElement} videoNode
+   * @param {boolean} autoplay
+   * @param {boolean} needsSrcUpdate
+   * @param {string} posterEffect
+   * @param {number} playbackRate
+   * @param {(videoNode: HTMLVideoElement) => void} patchVideoSource
+   * @param {Object[]} sources
+   * @param {Object} focalPoint
+   */
+  mutate(poster, videoNode, autoplay, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource, sources, focalPoint) {
+    videoNode.toggleAttribute('autoplay', autoplay);
+    if (sources != null && sources[0]) {
+      const videoWidth = sources[0].width;
+      const videoHeight = sources[0].height;
+      const aspectRatio = videoWidth / videoHeight;
+      videoNode.style.setProperty('--aspect-ratio', aspectRatio.toString());
+    }
+    if (focalPoint) {
+      setVideoFocalPoint(videoNode, focalPoint);
+    }
+    handlePosterVisibility(needsSrcUpdate, videoNode, poster, posterEffect, autoplay);
+    if (needsSrcUpdate) {
+      patchVideoSource(videoNode);
+    }
+    videoNode.playbackRate = playbackRate;
+  }
+};
+
+/**
+ *
+ * @param videoNode
+ * @param newSrcUrl
+ * @returns {*|boolean}
+ */
+function shouldUpdateSrc(videoNode, newSrcUrl) {
+  const hasError = videoNode.networkState === videoNode.NETWORK_NO_SOURCE;
+  const hasDiff = !videoNode.currentSrc.endsWith(newSrcUrl);
+  return Boolean(newSrcUrl && (hasDiff || hasError));
+}
+
+/**
+ *
+ * @param {boolean} needsEventUpdate
+ * @param {HTMLVideoElement} videoNode
+ * @param {HTMLDivElement} posterNode
+ * @param {string} posterEffect
+ * @param {boolean} autoplay
+ */
+function handlePosterVisibility(needsEventUpdate, videoNode, posterNode, posterEffect, autoplay) {
+  const isPausedOrEmpty = videoNode.paused || videoNode.currentSrc === '';
+  if (needsEventUpdate && isPausedOrEmpty) {
+    videoNode.ontimeupdate = null;
+    videoNode.onseeked = null;
+    videoNode.onplay = null;
+    if (autoplay) {
+      const muteState = videoNode.muted;
+      videoNode.ontimeupdate = () => {
+        if (videoNode.currentTime > 0) {
+          videoNode.ontimeupdate = null;
+          videoNode.onseeked = () => {
+            videoNode.onseeked = null;
+            videoNode.muted = muteState;
+            removePoster(videoNode, posterNode, posterEffect);
+          };
+          videoNode.currentTime = 0;
+        }
+      };
+    } else {
+      videoNode.onplay = () => {
+        videoNode.onplay = null;
+        removePoster(videoNode, posterNode, posterEffect);
+      };
+    }
+  }
+}
+
+/**
+ * Show video , hide poster
+ *
+ * @param videoNode
+ * @param posterNode
+ * @param posterEffect
+ */
+function removePoster(videoNode, posterNode, posterEffect) {
+  if (posterEffect === 'fade') {
+    posterNode.style.transition = 'opacity 1.6s ease-out';
+  }
+  posterNode.style.opacity = '0';
+  videoNode.style.opacity = '1';
+}
+//# sourceMappingURL=videoLayout.js.map