@wix/video 1.79.0 → 1.81.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Video.js +4 -1
- package/dist/cjs/Video.js.map +1 -1
- package/dist/cjs/custom-element/WowVideo.js +1 -1
- package/dist/cjs/custom-element/WowVideo.js.map +1 -1
- package/dist/cjs/custom-element/videoLayout.js +2 -4
- package/dist/cjs/custom-element/videoLayout.js.map +1 -1
- package/dist/esm/Video.js +4 -1
- package/dist/esm/Video.js.map +1 -1
- package/dist/esm/custom-element/WowVideo.js +1 -1
- package/dist/esm/custom-element/WowVideo.js.map +1 -1
- package/dist/esm/custom-element/videoLayout.js +2 -4
- package/dist/esm/custom-element/videoLayout.js.map +1 -1
- package/dist/statics/janet/iframe.html +1 -1
- package/dist/statics/janet/{main.87c66cdb.iframe.bundle.js → main.f45a6aa8.iframe.bundle.js} +4 -4
- package/dist/statics/janet/main.f45a6aa8.iframe.bundle.js.map +1 -0
- package/dist/statics/janet/project.json +1 -1
- package/dist/statics/manifest.json +2 -2
- package/dist/statics/manifest.min.json +2 -2
- package/dist/statics/video.umd.js +4 -4
- package/dist/statics/video.umd.js.map +1 -1
- package/dist/statics/video.umd.min.js +1 -1
- package/dist/statics/video.umd.min.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/custom-element/videoLayout.d.ts +2 -2
- package/dist/types/custom-element/videoLayout.d.ts.map +1 -1
- package/package.json +4 -4
- package/dist/statics/janet/main.87c66cdb.iframe.bundle.js.map +0 -1
package/dist/cjs/Video.js
CHANGED
package/dist/cjs/Video.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAAgF,IAAAM,YAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEhF,IAAI,OAAOW,MAAM,KAAK,WAAW,EAAE;EACjC,IAAIC,QAAQ,CAACC,UAAU,KAAK,SAAS,EAAE;IACrCD,QAAQ,CAACE,gBAAgB,CACvB,kBAAkB,EAClB,MAAM;MACJ,IAAAC,oCAAiB,EAAC,CAAC;MACnB,IAAAC,wBAAsB,EAAC,CAAC;IAC1B,CAAC,EACD;MACEC,IAAI,EAAE;IACR,CACF,CAAC;EACH,CAAC,MAAM;IACL,IAAAF,oCAAiB,EAAC,CAAC;IACnB,IAAAC,wBAAsB,EAAC,CAAC;EAC1B;AACF;AAEA,MAAME,KAA2B,GAAIC,KAAK,IAAK;EAC7C,MAAM;IACJC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,YAAY,GAAG,CAAC;IAChBC,YAAY;IACZC,EAAE;IACFC,aAAa,GAAG,cAAc;IAC9BC,UAAU;
|
|
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","x","y","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 = { x: 50, y: 50 },\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":[]}
|
|
@@ -75,7 +75,7 @@ function wowVideoFactory(services, contextWindow) {
|
|
|
75
75
|
patchVideoSource
|
|
76
76
|
} = measures;
|
|
77
77
|
services.mutationService.mutate(() => {
|
|
78
|
-
_videoLayout.default.mutate(poster, videoNode, autoPlayAllowed, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource,
|
|
78
|
+
_videoLayout.default.mutate(poster, videoNode, autoPlayAllowed, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource, focalPoint, sources);
|
|
79
79
|
});
|
|
80
80
|
});
|
|
81
81
|
}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 focalPoint,\n sources,\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":[]}
|
|
@@ -37,7 +37,7 @@ var _default = exports.default = {
|
|
|
37
37
|
* @param {Object[]} sources
|
|
38
38
|
* @param {Object} focalPoint
|
|
39
39
|
*/
|
|
40
|
-
mutate(poster, videoNode, autoplay, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource,
|
|
40
|
+
mutate(poster, videoNode, autoplay, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource, focalPoint, sources) {
|
|
41
41
|
videoNode.toggleAttribute('autoplay', autoplay);
|
|
42
42
|
if (sources != null && sources[0]) {
|
|
43
43
|
const videoWidth = sources[0].width;
|
|
@@ -45,9 +45,7 @@ var _default = exports.default = {
|
|
|
45
45
|
const aspectRatio = videoWidth / videoHeight;
|
|
46
46
|
videoNode.style.setProperty('--aspect-ratio', aspectRatio.toString());
|
|
47
47
|
}
|
|
48
|
-
|
|
49
|
-
(0, _utils.setVideoFocalPoint)(videoNode, focalPoint);
|
|
50
|
-
}
|
|
48
|
+
(0, _utils.setVideoFocalPoint)(videoNode, focalPoint);
|
|
51
49
|
handlePosterVisibility(needsSrcUpdate, videoNode, poster, posterEffect, autoplay);
|
|
52
50
|
if (needsSrcUpdate) {
|
|
53
51
|
patchVideoSource(videoNode);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_utils","require","_default","exports","default","measure","videoNode","container","quality","uri","sources","adaptiveSources","duration","onError","videoSourceUrl","patchVideoSource","getVideoSource","offsetWidth","offsetHeight","needsSrcUpdate","shouldUpdateSrc","mutate","poster","autoplay","posterEffect","playbackRate","focalPoint","toggleAttribute","videoWidth","width","videoHeight","height","aspectRatio","style","setProperty","toString","setVideoFocalPoint","handlePosterVisibility","newSrcUrl","hasError","networkState","NETWORK_NO_SOURCE","hasDiff","currentSrc","endsWith","Boolean","needsEventUpdate","posterNode","isPausedOrEmpty","paused","ontimeupdate","onseeked","onplay","muteState","muted","currentTime","removePoster","transition","opacity"],"sources":["../../../src/custom-element/videoLayout.ts"],"sourcesContent":["import type { AdaptiveVideoSource, QualityPolicy, VideoSource } from '../types';\nimport { getVideoSource, setVideoFocalPoint } from './utils';\n\nexport default {\n /**\n * @param {HTMLVideoElement} videoNode\n * @param {HTMLElement} container\n * @param {QualityPolicy} quality\n * @param {string} uri\n * @param {Object[]} sources\n * @param {Object[]} adaptiveSources\n * @param {number} duration\n * @param {(error: Error) => void} onError\n * @return {{currentSrc: string, videoSourceUrl: string}}\n */\n async measure(\n videoNode: HTMLVideoElement,\n container: HTMLElement,\n quality: QualityPolicy,\n uri: string,\n sources?: VideoSource[],\n adaptiveSources?: AdaptiveVideoSource[],\n duration?: number,\n onError?: (error: Error) => void,\n ) {\n const { videoSourceUrl, patchVideoSource } = await getVideoSource(\n container.offsetWidth,\n container.offsetHeight,\n uri,\n quality,\n sources,\n adaptiveSources,\n duration,\n onError,\n );\n const needsSrcUpdate = shouldUpdateSrc(videoNode, videoSourceUrl);\n return {\n needsSrcUpdate,\n patchVideoSource,\n };\n },\n /**\n * @param {HTMLDivElement} poster\n * @param {HTMLVideoElement} videoNode\n * @param {boolean} autoplay\n * @param {boolean} needsSrcUpdate\n * @param {string} posterEffect\n * @param {number} playbackRate\n * @param {(videoNode: HTMLVideoElement) => void} patchVideoSource\n * @param {Object[]} sources\n * @param {Object} focalPoint\n */\n mutate(\n poster: HTMLDivElement,\n videoNode: HTMLVideoElement,\n autoplay: boolean,\n needsSrcUpdate: boolean,\n posterEffect: string,\n playbackRate: number,\n patchVideoSource: (videoNode: HTMLVideoElement) => void,\n
|
|
1
|
+
{"version":3,"names":["_utils","require","_default","exports","default","measure","videoNode","container","quality","uri","sources","adaptiveSources","duration","onError","videoSourceUrl","patchVideoSource","getVideoSource","offsetWidth","offsetHeight","needsSrcUpdate","shouldUpdateSrc","mutate","poster","autoplay","posterEffect","playbackRate","focalPoint","toggleAttribute","videoWidth","width","videoHeight","height","aspectRatio","style","setProperty","toString","setVideoFocalPoint","handlePosterVisibility","newSrcUrl","hasError","networkState","NETWORK_NO_SOURCE","hasDiff","currentSrc","endsWith","Boolean","needsEventUpdate","posterNode","isPausedOrEmpty","paused","ontimeupdate","onseeked","onplay","muteState","muted","currentTime","removePoster","transition","opacity"],"sources":["../../../src/custom-element/videoLayout.ts"],"sourcesContent":["import type { AdaptiveVideoSource, QualityPolicy, VideoSource } from '../types';\nimport { getVideoSource, setVideoFocalPoint } from './utils';\n\nexport default {\n /**\n * @param {HTMLVideoElement} videoNode\n * @param {HTMLElement} container\n * @param {QualityPolicy} quality\n * @param {string} uri\n * @param {Object[]} sources\n * @param {Object[]} adaptiveSources\n * @param {number} duration\n * @param {(error: Error) => void} onError\n * @return {{currentSrc: string, videoSourceUrl: string}}\n */\n async measure(\n videoNode: HTMLVideoElement,\n container: HTMLElement,\n quality: QualityPolicy,\n uri: string,\n sources?: VideoSource[],\n adaptiveSources?: AdaptiveVideoSource[],\n duration?: number,\n onError?: (error: Error) => void,\n ) {\n const { videoSourceUrl, patchVideoSource } = await getVideoSource(\n container.offsetWidth,\n container.offsetHeight,\n uri,\n quality,\n sources,\n adaptiveSources,\n duration,\n onError,\n );\n const needsSrcUpdate = shouldUpdateSrc(videoNode, videoSourceUrl);\n return {\n needsSrcUpdate,\n patchVideoSource,\n };\n },\n /**\n * @param {HTMLDivElement} poster\n * @param {HTMLVideoElement} videoNode\n * @param {boolean} autoplay\n * @param {boolean} needsSrcUpdate\n * @param {string} posterEffect\n * @param {number} playbackRate\n * @param {(videoNode: HTMLVideoElement) => void} patchVideoSource\n * @param {Object[]} sources\n * @param {Object} focalPoint\n */\n mutate(\n poster: HTMLDivElement,\n videoNode: HTMLVideoElement,\n autoplay: boolean,\n needsSrcUpdate: boolean,\n posterEffect: string,\n playbackRate: number,\n patchVideoSource: (videoNode: HTMLVideoElement) => void,\n focalPoint: { x: number; y: number },\n sources?: VideoSource[],\n ): void {\n videoNode.toggleAttribute('autoplay', autoplay);\n if (sources?.[0]) {\n const videoWidth = sources[0].width;\n const videoHeight = sources[0].height;\n const aspectRatio = videoWidth / videoHeight;\n videoNode.style.setProperty('--aspect-ratio', aspectRatio.toString());\n }\n setVideoFocalPoint(videoNode, focalPoint!);\n\n handlePosterVisibility(\n needsSrcUpdate,\n videoNode,\n poster,\n posterEffect,\n autoplay,\n );\n\n if (needsSrcUpdate) {\n patchVideoSource(videoNode);\n }\n videoNode.playbackRate = playbackRate;\n },\n};\n\n/**\n *\n * @param videoNode\n * @param newSrcUrl\n * @returns {*|boolean}\n */\nfunction shouldUpdateSrc(\n videoNode: HTMLVideoElement,\n newSrcUrl: string,\n): boolean {\n const hasError = videoNode.networkState === videoNode.NETWORK_NO_SOURCE;\n const hasDiff = !videoNode.currentSrc.endsWith(newSrcUrl);\n return Boolean(newSrcUrl && (hasDiff || hasError));\n}\n\n/**\n *\n * @param {boolean} needsEventUpdate\n * @param {HTMLVideoElement} videoNode\n * @param {HTMLDivElement} posterNode\n * @param {string} posterEffect\n * @param {boolean} autoplay\n */\nfunction handlePosterVisibility(\n needsEventUpdate: boolean,\n videoNode: HTMLVideoElement,\n posterNode: HTMLDivElement,\n posterEffect: string,\n autoplay: boolean,\n): void {\n const isPausedOrEmpty = videoNode.paused || videoNode.currentSrc === '';\n if (needsEventUpdate && isPausedOrEmpty) {\n videoNode.ontimeupdate = null;\n videoNode.onseeked = null;\n videoNode.onplay = null;\n if (autoplay) {\n const muteState = videoNode.muted;\n videoNode.ontimeupdate = () => {\n if (videoNode.currentTime > 0) {\n videoNode.ontimeupdate = null;\n videoNode.onseeked = () => {\n videoNode.onseeked = null;\n videoNode.muted = muteState;\n removePoster(videoNode, posterNode, posterEffect);\n };\n videoNode.currentTime = 0;\n }\n };\n } else {\n videoNode.onplay = () => {\n videoNode.onplay = null;\n removePoster(videoNode, posterNode, posterEffect);\n };\n }\n }\n}\n\n/**\n * Show video , hide poster\n *\n * @param videoNode\n * @param posterNode\n * @param posterEffect\n */\nfunction removePoster(\n videoNode: HTMLVideoElement,\n posterNode: HTMLDivElement,\n posterEffect: string,\n): void {\n if (posterEffect === 'fade') {\n posterNode.style.transition = 'opacity 1.6s ease-out';\n }\n posterNode.style.opacity = '0';\n videoNode.style.opacity = '1';\n}\n"],"mappings":"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","ignoreList":[]}
|
package/dist/esm/Video.js
CHANGED
package/dist/esm/Video.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAOC,MAAM,MAAM,qBAAqB;AACxC,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,KAAK,EAAED,iBAAiB,IAAIE,sBAAsB,QAAQ,YAAY;AAE/E,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;EACjC,IAAIC,QAAQ,CAACC,UAAU,KAAK,SAAS,EAAE;IACrCD,QAAQ,CAACE,gBAAgB,CACvB,kBAAkB,EAClB,MAAM;MACJN,iBAAiB,CAAC,CAAC;MACnBE,sBAAsB,CAAC,CAAC;IAC1B,CAAC,EACD;MACEK,IAAI,EAAE;IACR,CACF,CAAC;EACH,CAAC,MAAM;IACLP,iBAAiB,CAAC,CAAC;IACnBE,sBAAsB,CAAC,CAAC;EAC1B;AACF;AAEA,MAAMM,KAA2B,GAAIC,KAAK,IAAK;EAC7C,MAAM;IACJC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,KAAK;IACLC,IAAI;IACJC,QAAQ;IACRC,YAAY,GAAG,CAAC;IAChBC,YAAY;IACZC,EAAE;IACFC,aAAa,GAAG,cAAc;IAC9BC,UAAU;
|
|
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","x","y","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 = { x: 50, y: 50 },\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":[]}
|
|
@@ -70,7 +70,7 @@ function wowVideoFactory(services, contextWindow) {
|
|
|
70
70
|
patchVideoSource
|
|
71
71
|
} = measures;
|
|
72
72
|
services.mutationService.mutate(() => {
|
|
73
|
-
videoLayout.mutate(poster, videoNode, autoPlayAllowed, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource,
|
|
73
|
+
videoLayout.mutate(poster, videoNode, autoPlayAllowed, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource, focalPoint, sources);
|
|
74
74
|
});
|
|
75
75
|
});
|
|
76
76
|
}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 focalPoint,\n sources,\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,EAChBb,UAAU,EACVN,OACF,CAAC;QACH,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ;IAEA,WAAWqB,kBAAkBA,CAAA,EAAG;MAC9B,OAAO,CAAC,iBAAiB,CAAC;IAC5B;EACF,CAAC;AACH;AAEA,eAAerD,eAAe","ignoreList":[]}
|
|
@@ -33,7 +33,7 @@ export default {
|
|
|
33
33
|
* @param {Object[]} sources
|
|
34
34
|
* @param {Object} focalPoint
|
|
35
35
|
*/
|
|
36
|
-
mutate(poster, videoNode, autoplay, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource,
|
|
36
|
+
mutate(poster, videoNode, autoplay, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource, focalPoint, sources) {
|
|
37
37
|
videoNode.toggleAttribute('autoplay', autoplay);
|
|
38
38
|
if (sources != null && sources[0]) {
|
|
39
39
|
const videoWidth = sources[0].width;
|
|
@@ -41,9 +41,7 @@ export default {
|
|
|
41
41
|
const aspectRatio = videoWidth / videoHeight;
|
|
42
42
|
videoNode.style.setProperty('--aspect-ratio', aspectRatio.toString());
|
|
43
43
|
}
|
|
44
|
-
|
|
45
|
-
setVideoFocalPoint(videoNode, focalPoint);
|
|
46
|
-
}
|
|
44
|
+
setVideoFocalPoint(videoNode, focalPoint);
|
|
47
45
|
handlePosterVisibility(needsSrcUpdate, videoNode, poster, posterEffect, autoplay);
|
|
48
46
|
if (needsSrcUpdate) {
|
|
49
47
|
patchVideoSource(videoNode);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getVideoSource","setVideoFocalPoint","measure","videoNode","container","quality","uri","sources","adaptiveSources","duration","onError","videoSourceUrl","patchVideoSource","offsetWidth","offsetHeight","needsSrcUpdate","shouldUpdateSrc","mutate","poster","autoplay","posterEffect","playbackRate","focalPoint","toggleAttribute","videoWidth","width","videoHeight","height","aspectRatio","style","setProperty","toString","handlePosterVisibility","newSrcUrl","hasError","networkState","NETWORK_NO_SOURCE","hasDiff","currentSrc","endsWith","Boolean","needsEventUpdate","posterNode","isPausedOrEmpty","paused","ontimeupdate","onseeked","onplay","muteState","muted","currentTime","removePoster","transition","opacity"],"sources":["../../../src/custom-element/videoLayout.ts"],"sourcesContent":["import type { AdaptiveVideoSource, QualityPolicy, VideoSource } from '../types';\nimport { getVideoSource, setVideoFocalPoint } from './utils';\n\nexport default {\n /**\n * @param {HTMLVideoElement} videoNode\n * @param {HTMLElement} container\n * @param {QualityPolicy} quality\n * @param {string} uri\n * @param {Object[]} sources\n * @param {Object[]} adaptiveSources\n * @param {number} duration\n * @param {(error: Error) => void} onError\n * @return {{currentSrc: string, videoSourceUrl: string}}\n */\n async measure(\n videoNode: HTMLVideoElement,\n container: HTMLElement,\n quality: QualityPolicy,\n uri: string,\n sources?: VideoSource[],\n adaptiveSources?: AdaptiveVideoSource[],\n duration?: number,\n onError?: (error: Error) => void,\n ) {\n const { videoSourceUrl, patchVideoSource } = await getVideoSource(\n container.offsetWidth,\n container.offsetHeight,\n uri,\n quality,\n sources,\n adaptiveSources,\n duration,\n onError,\n );\n const needsSrcUpdate = shouldUpdateSrc(videoNode, videoSourceUrl);\n return {\n needsSrcUpdate,\n patchVideoSource,\n };\n },\n /**\n * @param {HTMLDivElement} poster\n * @param {HTMLVideoElement} videoNode\n * @param {boolean} autoplay\n * @param {boolean} needsSrcUpdate\n * @param {string} posterEffect\n * @param {number} playbackRate\n * @param {(videoNode: HTMLVideoElement) => void} patchVideoSource\n * @param {Object[]} sources\n * @param {Object} focalPoint\n */\n mutate(\n poster: HTMLDivElement,\n videoNode: HTMLVideoElement,\n autoplay: boolean,\n needsSrcUpdate: boolean,\n posterEffect: string,\n playbackRate: number,\n patchVideoSource: (videoNode: HTMLVideoElement) => void,\n
|
|
1
|
+
{"version":3,"names":["getVideoSource","setVideoFocalPoint","measure","videoNode","container","quality","uri","sources","adaptiveSources","duration","onError","videoSourceUrl","patchVideoSource","offsetWidth","offsetHeight","needsSrcUpdate","shouldUpdateSrc","mutate","poster","autoplay","posterEffect","playbackRate","focalPoint","toggleAttribute","videoWidth","width","videoHeight","height","aspectRatio","style","setProperty","toString","handlePosterVisibility","newSrcUrl","hasError","networkState","NETWORK_NO_SOURCE","hasDiff","currentSrc","endsWith","Boolean","needsEventUpdate","posterNode","isPausedOrEmpty","paused","ontimeupdate","onseeked","onplay","muteState","muted","currentTime","removePoster","transition","opacity"],"sources":["../../../src/custom-element/videoLayout.ts"],"sourcesContent":["import type { AdaptiveVideoSource, QualityPolicy, VideoSource } from '../types';\nimport { getVideoSource, setVideoFocalPoint } from './utils';\n\nexport default {\n /**\n * @param {HTMLVideoElement} videoNode\n * @param {HTMLElement} container\n * @param {QualityPolicy} quality\n * @param {string} uri\n * @param {Object[]} sources\n * @param {Object[]} adaptiveSources\n * @param {number} duration\n * @param {(error: Error) => void} onError\n * @return {{currentSrc: string, videoSourceUrl: string}}\n */\n async measure(\n videoNode: HTMLVideoElement,\n container: HTMLElement,\n quality: QualityPolicy,\n uri: string,\n sources?: VideoSource[],\n adaptiveSources?: AdaptiveVideoSource[],\n duration?: number,\n onError?: (error: Error) => void,\n ) {\n const { videoSourceUrl, patchVideoSource } = await getVideoSource(\n container.offsetWidth,\n container.offsetHeight,\n uri,\n quality,\n sources,\n adaptiveSources,\n duration,\n onError,\n );\n const needsSrcUpdate = shouldUpdateSrc(videoNode, videoSourceUrl);\n return {\n needsSrcUpdate,\n patchVideoSource,\n };\n },\n /**\n * @param {HTMLDivElement} poster\n * @param {HTMLVideoElement} videoNode\n * @param {boolean} autoplay\n * @param {boolean} needsSrcUpdate\n * @param {string} posterEffect\n * @param {number} playbackRate\n * @param {(videoNode: HTMLVideoElement) => void} patchVideoSource\n * @param {Object[]} sources\n * @param {Object} focalPoint\n */\n mutate(\n poster: HTMLDivElement,\n videoNode: HTMLVideoElement,\n autoplay: boolean,\n needsSrcUpdate: boolean,\n posterEffect: string,\n playbackRate: number,\n patchVideoSource: (videoNode: HTMLVideoElement) => void,\n focalPoint: { x: number; y: number },\n sources?: VideoSource[],\n ): void {\n videoNode.toggleAttribute('autoplay', autoplay);\n if (sources?.[0]) {\n const videoWidth = sources[0].width;\n const videoHeight = sources[0].height;\n const aspectRatio = videoWidth / videoHeight;\n videoNode.style.setProperty('--aspect-ratio', aspectRatio.toString());\n }\n setVideoFocalPoint(videoNode, focalPoint!);\n\n handlePosterVisibility(\n needsSrcUpdate,\n videoNode,\n poster,\n posterEffect,\n autoplay,\n );\n\n if (needsSrcUpdate) {\n patchVideoSource(videoNode);\n }\n videoNode.playbackRate = playbackRate;\n },\n};\n\n/**\n *\n * @param videoNode\n * @param newSrcUrl\n * @returns {*|boolean}\n */\nfunction shouldUpdateSrc(\n videoNode: HTMLVideoElement,\n newSrcUrl: string,\n): boolean {\n const hasError = videoNode.networkState === videoNode.NETWORK_NO_SOURCE;\n const hasDiff = !videoNode.currentSrc.endsWith(newSrcUrl);\n return Boolean(newSrcUrl && (hasDiff || hasError));\n}\n\n/**\n *\n * @param {boolean} needsEventUpdate\n * @param {HTMLVideoElement} videoNode\n * @param {HTMLDivElement} posterNode\n * @param {string} posterEffect\n * @param {boolean} autoplay\n */\nfunction handlePosterVisibility(\n needsEventUpdate: boolean,\n videoNode: HTMLVideoElement,\n posterNode: HTMLDivElement,\n posterEffect: string,\n autoplay: boolean,\n): void {\n const isPausedOrEmpty = videoNode.paused || videoNode.currentSrc === '';\n if (needsEventUpdate && isPausedOrEmpty) {\n videoNode.ontimeupdate = null;\n videoNode.onseeked = null;\n videoNode.onplay = null;\n if (autoplay) {\n const muteState = videoNode.muted;\n videoNode.ontimeupdate = () => {\n if (videoNode.currentTime > 0) {\n videoNode.ontimeupdate = null;\n videoNode.onseeked = () => {\n videoNode.onseeked = null;\n videoNode.muted = muteState;\n removePoster(videoNode, posterNode, posterEffect);\n };\n videoNode.currentTime = 0;\n }\n };\n } else {\n videoNode.onplay = () => {\n videoNode.onplay = null;\n removePoster(videoNode, posterNode, posterEffect);\n };\n }\n }\n}\n\n/**\n * Show video , hide poster\n *\n * @param videoNode\n * @param posterNode\n * @param posterEffect\n */\nfunction removePoster(\n videoNode: HTMLVideoElement,\n posterNode: HTMLDivElement,\n posterEffect: string,\n): void {\n if (posterEffect === 'fade') {\n posterNode.style.transition = 'opacity 1.6s ease-out';\n }\n posterNode.style.opacity = '0';\n videoNode.style.opacity = '1';\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -361,4 +361,4 @@
|
|
|
361
361
|
|
|
362
362
|
|
|
363
363
|
|
|
364
|
-
window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="main.
|
|
364
|
+
window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="main.f45a6aa8.iframe.bundle.js"></script></body></html>
|
package/dist/statics/janet/{main.87c66cdb.iframe.bundle.js → main.f45a6aa8.iframe.bundle.js}
RENAMED
|
@@ -15723,7 +15723,7 @@ var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty);
|
|
|
15723
15723
|
* @param {(videoNode: HTMLVideoElement) => void} patchVideoSource
|
|
15724
15724
|
* @param {Object[]} sources
|
|
15725
15725
|
* @param {Object} focalPoint
|
|
15726
|
-
*/mutate(poster,videoNode,autoplay,needsSrcUpdate,posterEffect,playbackRate,patchVideoSource,sources
|
|
15726
|
+
*/mutate(poster,videoNode,autoplay,needsSrcUpdate,posterEffect,playbackRate,patchVideoSource,focalPoint,sources){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());}setVideoFocalPoint(videoNode,focalPoint);handlePosterVisibility(needsSrcUpdate,videoNode,poster,posterEffect,autoplay);if(needsSrcUpdate){patchVideoSource(videoNode);}videoNode.playbackRate=playbackRate;}});/**
|
|
15727
15727
|
*
|
|
15728
15728
|
* @param videoNode
|
|
15729
15729
|
* @param newSrcUrl
|
|
@@ -15749,7 +15749,7 @@ function wowVideoFactory(services,contextWindow){return class WowVideo extends c
|
|
|
15749
15749
|
* Check if the user prefers reduced motion
|
|
15750
15750
|
*
|
|
15751
15751
|
* @returns {boolean} True if reduced motion is preferred
|
|
15752
|
-
*/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
|
|
15752
|
+
*/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,focalPoint,sources);});});}static get observedAttributes(){return['data-video-info'];}};}/* harmony default export */ const custom_element_WowVideo = (wowVideoFactory);
|
|
15753
15753
|
// EXTERNAL MODULE: ../../node_modules/fastdom/fastdom.js
|
|
15754
15754
|
var fastdom = __webpack_require__(47510);
|
|
15755
15755
|
var fastdom_default = /*#__PURE__*/__webpack_require__.n(fastdom);
|
|
@@ -19087,7 +19087,7 @@ const Image = (props) => {
|
|
|
19087
19087
|
|
|
19088
19088
|
//# sourceMappingURL=Image.js.map
|
|
19089
19089
|
;// ./src/Video.tsx
|
|
19090
|
-
if(typeof window!=='undefined'){if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',()=>{initCustomElement();customElementInit_initCustomElement();},{once:true});}else{initCustomElement();customElementInit_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=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_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}));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:src_Video_module.videoContainer},/*#__PURE__*/react.createElement("video",{ref:videoRef,className:src_Video_module.video,crossOrigin:"anonymous",playsInline:true,muted:muted,loop:loop,preload:"none",onError:handleVideoElementError}),VideoPosterImage);};/* harmony default export */ const src_Video = (Video);
|
|
19090
|
+
if(typeof window!=='undefined'){if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',()=>{initCustomElement();customElementInit_initCustomElement();},{once:true});}else{initCustomElement();customElementInit_initCustomElement();}}const Video=props=>{const{motionPart,videoRef,videoMedia,muted,loop,autoplay,playbackRate=1,posterEffect,id,qualityPolicy='proportional',focalPoint={x:50,y:50},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_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}));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:src_Video_module.videoContainer},/*#__PURE__*/react.createElement("video",{ref:videoRef,className:src_Video_module.video,crossOrigin:"anonymous",playsInline:true,muted:muted,loop:loop,preload:"none",onError:handleVideoElementError}),VideoPosterImage);};/* harmony default export */ const src_Video = (Video);
|
|
19091
19091
|
;// ./src/storybook/Container.tsx
|
|
19092
19092
|
const Container=_ref=>{let{id,width,height,children}=_ref;return/*#__PURE__*/react.createElement("div",{id:id,style:{width,height,border:'1px solid red'}},/*#__PURE__*/react.cloneElement(children,{containerWidth:width,containerHeight:height}));};
|
|
19093
19093
|
;// ./src/storybook/args.ts
|
|
@@ -73257,4 +73257,4 @@ module.exports = /*#__PURE__*/JSON.parse('["a","abbr","address","area","article"
|
|
|
73257
73257
|
/******/
|
|
73258
73258
|
/******/ })()
|
|
73259
73259
|
;
|
|
73260
|
-
//# sourceMappingURL=main.
|
|
73260
|
+
//# sourceMappingURL=main.f45a6aa8.iframe.bundle.js.map
|