@wix/video 1.83.0 → 1.85.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.module.scss +1 -1
- package/dist/cjs/custom-element/utils.js +0 -7
- package/dist/cjs/custom-element/utils.js.map +1 -1
- package/dist/cjs/custom-element/videoLayout.js.map +1 -1
- package/dist/cjs/storybook/Container.js +5 -21
- package/dist/cjs/storybook/Container.js.map +1 -1
- package/dist/esm/Video.module.scss +1 -1
- package/dist/esm/custom-element/utils.js +0 -7
- package/dist/esm/custom-element/utils.js.map +1 -1
- package/dist/esm/custom-element/videoLayout.js.map +1 -1
- package/dist/esm/storybook/Container.js +4 -14
- package/dist/esm/storybook/Container.js.map +1 -1
- package/dist/statics/janet/iframe.html +1 -1
- package/dist/statics/janet/{main.3d3bf84f.iframe.bundle.js → main.c9474bbb.iframe.bundle.js} +13 -5
- package/dist/statics/janet/main.c9474bbb.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.css +1 -1
- package/dist/statics/video.css.map +1 -1
- package/dist/statics/video.min.css +1 -1
- package/dist/statics/video.rtl.css +1 -1
- package/dist/statics/video.rtl.min.css +1 -1
- package/dist/statics/video.umd.js +11 -2
- 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/utils.d.ts +1 -1
- package/dist/types/custom-element/utils.d.ts.map +1 -1
- package/dist/types/custom-element/videoLayout.d.ts +1 -1
- package/dist/types/custom-element/videoLayout.d.ts.map +1 -1
- package/dist/types/storybook/Container.d.ts +5 -1
- package/dist/types/storybook/Container.d.ts.map +1 -1
- package/package.json +3 -3
- package/dist/statics/janet/main.3d3bf84f.iframe.bundle.js.map +0 -1
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
opacity: 0;
|
|
24
24
|
--position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
|
|
25
25
|
--position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
|
|
26
|
-
object-position: clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%);
|
|
26
|
+
object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
|
|
27
27
|
}
|
|
@@ -37,13 +37,6 @@ function getVideoDimension(videoScale, videoWidth, videoHeight) {
|
|
|
37
37
|
};
|
|
38
38
|
}
|
|
39
39
|
function setVideoFocalPoint(videoNode, focalPoint) {
|
|
40
|
-
const computedStyle = getComputedStyle(videoNode);
|
|
41
|
-
const videoFit = computedStyle.getPropertyValue('--video-fit');
|
|
42
|
-
if (videoFit === 'contain') {
|
|
43
|
-
videoNode.style.setProperty('object-position', 'center');
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
videoNode.style.removeProperty('object-position');
|
|
47
40
|
const focalX = (focalPoint == null ? void 0 : focalPoint.x) ?? 50;
|
|
48
41
|
const focalY = (focalPoint == null ? void 0 : focalPoint.y) ?? 50;
|
|
49
42
|
videoNode.style.setProperty('--focal-x', focalX.toString());
|
|
@@ -1 +1 @@
|
|
|
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","targetQuality","find","value","length","getScaleFactor","containerWidth","containerHeight","videoWidth","videoHeight","wScale","hScale","getVideoDimension","videoScale","scale","Math","min","round","setVideoFocalPoint","videoNode","focalPoint","computedStyle","getComputedStyle","videoFit","getPropertyValue","style","setProperty","removeProperty","focalX","x","focalY","y","toString","getVideoSource","uri","qualityPolicy","adaptiveSources","duration","onError","hasProgressiveSources","hasAbsoluteUri","shouldSkipAdaptiveShortVideo","hlsSource","s","format","Hls","Promise","resolve","then","_interopRequireWildcard","require","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 computedStyle = getComputedStyle(videoNode);\n const videoFit = computedStyle.getPropertyValue('--video-fit');\n\n if (videoFit === 'contain') {\n videoNode.style.setProperty('object-position', 'center');\n return;\n }\n\n videoNode.style.removeProperty('object-position');\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":[]}
|
|
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","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","Promise","resolve","then","_interopRequireWildcard","require","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":[]}
|
|
@@ -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 focalPoint
|
|
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":";;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAA6D,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE9C;EACb;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE,MAAMC,OAAOA,CACXC,SAA2B,EAC3BC,SAAsB,EACtBC,OAAsB,EACtBC,GAAW,EACXC,OAAuB,EACvBC,eAAuC,EACvCC,QAAiB,EACjBC,OAAgC,EAChC;IACA,MAAM;MAAEC,cAAc;MAAEC;IAAiB,CAAC,GAAG,MAAM,IAAAC,qBAAc,EAC/DT,SAAS,CAACU,WAAW,EACrBV,SAAS,CAACW,YAAY,EACtBT,GAAG,EACHD,OAAO,EACPE,OAAO,EACPC,eAAe,EACfC,QAAQ,EACRC,OACF,CAAC;IACD,MAAMM,cAAc,GAAGC,eAAe,CAACd,SAAS,EAAEQ,cAAc,CAAC;IACjE,OAAO;MACLK,cAAc;MACdJ;IACF,CAAC;EACH,CAAC;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEM,MAAMA,CACJC,MAAsB,EACtBhB,SAA2B,EAC3BiB,QAAiB,EACjBJ,cAAuB,EACvBK,YAAoB,EACpBC,YAAoB,EACpBV,gBAAuD,EACvDW,UAAqC,EACrChB,OAAuB,EACjB;IACNJ,SAAS,CAACqB,eAAe,CAAC,UAAU,EAAEJ,QAAQ,CAAC;IAC/C,IAAIb,OAAO,YAAPA,OAAO,CAAG,CAAC,CAAC,EAAE;MAChB,MAAMkB,UAAU,GAAGlB,OAAO,CAAC,CAAC,CAAC,CAACmB,KAAK;MACnC,MAAMC,WAAW,GAAGpB,OAAO,CAAC,CAAC,CAAC,CAACqB,MAAM;MACrC,MAAMC,WAAW,GAAGJ,UAAU,GAAGE,WAAW;MAC5CxB,SAAS,CAAC2B,KAAK,CAACC,WAAW,CAAC,gBAAgB,EAAEF,WAAW,CAACG,QAAQ,CAAC,CAAC,CAAC;IACvE;IACA,IAAAC,yBAAkB,EAAC9B,SAAS,EAAEoB,UAAU,CAAC;IAEzCW,sBAAsB,CACpBlB,cAAc,EACdb,SAAS,EACTgB,MAAM,EACNE,YAAY,EACZD,QACF,CAAC;IAED,IAAIJ,cAAc,EAAE;MAClBJ,gBAAgB,CAACT,SAAS,CAAC;IAC7B;IACAA,SAAS,CAACmB,YAAY,GAAGA,YAAY;EACvC;AACF,CAAC;AAED;AACA;AACA;AACA;AACA;AACA;AACA,SAASL,eAAeA,CACtBd,SAA2B,EAC3BgC,SAAiB,EACR;EACT,MAAMC,QAAQ,GAAGjC,SAAS,CAACkC,YAAY,KAAKlC,SAAS,CAACmC,iBAAiB;EACvE,MAAMC,OAAO,GAAG,CAACpC,SAAS,CAACqC,UAAU,CAACC,QAAQ,CAACN,SAAS,CAAC;EACzD,OAAOO,OAAO,CAACP,SAAS,KAAKI,OAAO,IAAIH,QAAQ,CAAC,CAAC;AACpD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASF,sBAAsBA,CAC7BS,gBAAyB,EACzBxC,SAA2B,EAC3ByC,UAA0B,EAC1BvB,YAAoB,EACpBD,QAAiB,EACX;EACN,MAAMyB,eAAe,GAAG1C,SAAS,CAAC2C,MAAM,IAAI3C,SAAS,CAACqC,UAAU,KAAK,EAAE;EACvE,IAAIG,gBAAgB,IAAIE,eAAe,EAAE;IACvC1C,SAAS,CAAC4C,YAAY,GAAG,IAAI;IAC7B5C,SAAS,CAAC6C,QAAQ,GAAG,IAAI;IACzB7C,SAAS,CAAC8C,MAAM,GAAG,IAAI;IACvB,IAAI7B,QAAQ,EAAE;MACZ,MAAM8B,SAAS,GAAG/C,SAAS,CAACgD,KAAK;MACjChD,SAAS,CAAC4C,YAAY,GAAG,MAAM;QAC7B,IAAI5C,SAAS,CAACiD,WAAW,GAAG,CAAC,EAAE;UAC7BjD,SAAS,CAAC4C,YAAY,GAAG,IAAI;UAC7B5C,SAAS,CAAC6C,QAAQ,GAAG,MAAM;YACzB7C,SAAS,CAAC6C,QAAQ,GAAG,IAAI;YACzB7C,SAAS,CAACgD,KAAK,GAAGD,SAAS;YAC3BG,YAAY,CAAClD,SAAS,EAAEyC,UAAU,EAAEvB,YAAY,CAAC;UACnD,CAAC;UACDlB,SAAS,CAACiD,WAAW,GAAG,CAAC;QAC3B;MACF,CAAC;IACH,CAAC,MAAM;MACLjD,SAAS,CAAC8C,MAAM,GAAG,MAAM;QACvB9C,SAAS,CAAC8C,MAAM,GAAG,IAAI;QACvBI,YAAY,CAAClD,SAAS,EAAEyC,UAAU,EAAEvB,YAAY,CAAC;MACnD,CAAC;IACH;EACF;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASgC,YAAYA,CACnBlD,SAA2B,EAC3ByC,UAA0B,EAC1BvB,YAAoB,EACd;EACN,IAAIA,YAAY,KAAK,MAAM,EAAE;IAC3BuB,UAAU,CAACd,KAAK,CAACwB,UAAU,GAAG,uBAAuB;EACvD;EACAV,UAAU,CAACd,KAAK,CAACyB,OAAO,GAAG,GAAG;EAC9BpD,SAAS,CAAC2B,KAAK,CAACyB,OAAO,GAAG,GAAG;AAC/B","ignoreList":[]}
|
|
@@ -15,43 +15,27 @@ const Container = ({
|
|
|
15
15
|
const containerStyle = fullscreen ? {
|
|
16
16
|
position: 'fixed',
|
|
17
17
|
inset: 0,
|
|
18
|
-
backgroundColor: '#000'
|
|
18
|
+
backgroundColor: '#000',
|
|
19
|
+
'--video-fit': 'contain',
|
|
20
|
+
'--video-position': 'center'
|
|
19
21
|
} : {
|
|
20
22
|
width,
|
|
21
23
|
height,
|
|
22
24
|
border: '1px solid red'
|
|
23
25
|
};
|
|
24
|
-
const videoContainerStyle = fullscreen ? {
|
|
25
|
-
width: '100%',
|
|
26
|
-
height: '100%',
|
|
27
|
-
// @ts-expect-error CSS variable
|
|
28
|
-
'--video-fit': 'contain',
|
|
29
|
-
'--video-position': 'center'
|
|
30
|
-
} : {
|
|
31
|
-
width: '100%',
|
|
32
|
-
height: '100%'
|
|
33
|
-
};
|
|
34
26
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
35
27
|
id: id,
|
|
36
28
|
style: containerStyle,
|
|
37
29
|
__self: void 0,
|
|
38
30
|
__source: {
|
|
39
31
|
fileName: _jsxFileName,
|
|
40
|
-
lineNumber:
|
|
32
|
+
lineNumber: 33,
|
|
41
33
|
columnNumber: 5
|
|
42
34
|
}
|
|
43
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
44
|
-
style: videoContainerStyle,
|
|
45
|
-
__self: void 0,
|
|
46
|
-
__source: {
|
|
47
|
-
fileName: _jsxFileName,
|
|
48
|
-
lineNumber: 41,
|
|
49
|
-
columnNumber: 7
|
|
50
|
-
}
|
|
51
35
|
}, /*#__PURE__*/_react.default.cloneElement(children, {
|
|
52
36
|
containerWidth: fullscreen ? window.innerWidth : width,
|
|
53
37
|
containerHeight: fullscreen ? window.innerHeight : height
|
|
54
|
-
}))
|
|
38
|
+
}));
|
|
55
39
|
};
|
|
56
40
|
exports.Container = Container;
|
|
57
41
|
//# sourceMappingURL=Container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_jsxFileName","Container","id","width","height","fullscreen","children","containerStyle","position","inset","backgroundColor","border","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_jsxFileName","Container","id","width","height","fullscreen","children","containerStyle","position","inset","backgroundColor","border","default","createElement","style","__self","__source","fileName","lineNumber","columnNumber","React","cloneElement","containerWidth","window","innerWidth","containerHeight","innerHeight","exports"],"sources":["../../../src/storybook/Container.tsx"],"sourcesContent":["import React from 'react';\n\ntype ContainerProps = {\n id?: string;\n width?: number;\n height?: number;\n fullscreen?: boolean;\n children?: React.ReactNode;\n};\n\nexport const Container: React.VFC<ContainerProps> = ({\n id,\n width,\n height,\n fullscreen,\n children,\n}) => {\n const containerStyle: React.CSSProperties = fullscreen\n ? {\n position: 'fixed',\n inset: 0,\n backgroundColor: '#000',\n '--video-fit': 'contain',\n '--video-position': 'center',\n } as React.CSSProperties\n : {\n width,\n height,\n border: '1px solid red',\n };\n\n return (\n <div id={id} style={containerStyle}>\n {React.cloneElement(children as React.ReactElement<any>, {\n containerWidth: fullscreen ? window.innerWidth : width,\n containerHeight: fullscreen ? window.innerHeight : height,\n })}\n </div>\n );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,IAAAC,YAAA;AAUnB,MAAMC,SAAoC,GAAGA,CAAC;EACnDC,EAAE;EACFC,KAAK;EACLC,MAAM;EACNC,UAAU;EACVC;AACF,CAAC,KAAK;EACJ,MAAMC,cAAmC,GAAGF,UAAU,GAClD;IACEG,QAAQ,EAAE,OAAO;IACjBC,KAAK,EAAE,CAAC;IACRC,eAAe,EAAE,MAAM;IACzB,aAAa,EAAE,SAAS;IACxB,kBAAkB,EAAE;EACtB,CAAC,GACC;IACEP,KAAK;IACLC,MAAM;IACNO,MAAM,EAAE;EACV,CAAC;EAEL,oBACEd,MAAA,CAAAe,OAAA,CAAAC,aAAA;IAAKX,EAAE,EAAEA,EAAG;IAACY,KAAK,EAAEP,cAAe;IAAAQ,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC9BC,cAAK,CAACC,YAAY,CAACf,QAAQ,EAA6B;IACvDgB,cAAc,EAAEjB,UAAU,GAAGkB,MAAM,CAACC,UAAU,GAAGrB,KAAK;IACtDsB,eAAe,EAAEpB,UAAU,GAAGkB,MAAM,CAACG,WAAW,GAAGtB;EACrD,CAAC,CACA,CAAC;AAEV,CAAC;AAACuB,OAAA,CAAA1B,SAAA,GAAAA,SAAA","ignoreList":[]}
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
opacity: 0;
|
|
24
24
|
--position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
|
|
25
25
|
--position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
|
|
26
|
-
object-position: clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%);
|
|
26
|
+
object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
|
|
27
27
|
}
|
|
@@ -30,13 +30,6 @@ function getVideoDimension(videoScale, videoWidth, videoHeight) {
|
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
32
|
export function setVideoFocalPoint(videoNode, focalPoint) {
|
|
33
|
-
const computedStyle = getComputedStyle(videoNode);
|
|
34
|
-
const videoFit = computedStyle.getPropertyValue('--video-fit');
|
|
35
|
-
if (videoFit === 'contain') {
|
|
36
|
-
videoNode.style.setProperty('object-position', 'center');
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
videoNode.style.removeProperty('object-position');
|
|
40
33
|
const focalX = (focalPoint == null ? void 0 : focalPoint.x) ?? 50;
|
|
41
34
|
const focalY = (focalPoint == null ? void 0 : focalPoint.y) ?? 50;
|
|
42
35
|
videoNode.style.setProperty('--focal-x', focalX.toString());
|
|
@@ -1 +1 @@
|
|
|
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","computedStyle","getComputedStyle","videoFit","getPropertyValue","style","setProperty","removeProperty","focalX","x","focalY","y","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 computedStyle = getComputedStyle(videoNode);\n const videoFit = computedStyle.getPropertyValue('--video-fit');\n\n if (videoFit === 'contain') {\n videoNode.style.setProperty('object-position', 'center');\n return;\n }\n\n videoNode.style.removeProperty('object-position');\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":[]}
|
|
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":[]}
|
|
@@ -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 focalPoint
|
|
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":[]}
|
|
@@ -10,30 +10,20 @@ export const Container = _ref => {
|
|
|
10
10
|
const containerStyle = fullscreen ? {
|
|
11
11
|
position: 'fixed',
|
|
12
12
|
inset: 0,
|
|
13
|
-
backgroundColor: '#000'
|
|
13
|
+
backgroundColor: '#000',
|
|
14
|
+
'--video-fit': 'contain',
|
|
15
|
+
'--video-position': 'center'
|
|
14
16
|
} : {
|
|
15
17
|
width,
|
|
16
18
|
height,
|
|
17
19
|
border: '1px solid red'
|
|
18
20
|
};
|
|
19
|
-
const videoContainerStyle = fullscreen ? {
|
|
20
|
-
width: '100%',
|
|
21
|
-
height: '100%',
|
|
22
|
-
// @ts-expect-error CSS variable
|
|
23
|
-
'--video-fit': 'contain',
|
|
24
|
-
'--video-position': 'center'
|
|
25
|
-
} : {
|
|
26
|
-
width: '100%',
|
|
27
|
-
height: '100%'
|
|
28
|
-
};
|
|
29
21
|
return /*#__PURE__*/React.createElement("div", {
|
|
30
22
|
id: id,
|
|
31
23
|
style: containerStyle
|
|
32
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
33
|
-
style: videoContainerStyle
|
|
34
24
|
}, /*#__PURE__*/React.cloneElement(children, {
|
|
35
25
|
containerWidth: fullscreen ? window.innerWidth : width,
|
|
36
26
|
containerHeight: fullscreen ? window.innerHeight : height
|
|
37
|
-
}))
|
|
27
|
+
}));
|
|
38
28
|
};
|
|
39
29
|
//# sourceMappingURL=Container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Container","_ref","id","width","height","fullscreen","children","containerStyle","position","inset","backgroundColor","border","
|
|
1
|
+
{"version":3,"names":["React","Container","_ref","id","width","height","fullscreen","children","containerStyle","position","inset","backgroundColor","border","createElement","style","cloneElement","containerWidth","window","innerWidth","containerHeight","innerHeight"],"sources":["../../../src/storybook/Container.tsx"],"sourcesContent":["import React from 'react';\n\ntype ContainerProps = {\n id?: string;\n width?: number;\n height?: number;\n fullscreen?: boolean;\n children?: React.ReactNode;\n};\n\nexport const Container: React.VFC<ContainerProps> = ({\n id,\n width,\n height,\n fullscreen,\n children,\n}) => {\n const containerStyle: React.CSSProperties = fullscreen\n ? {\n position: 'fixed',\n inset: 0,\n backgroundColor: '#000',\n '--video-fit': 'contain',\n '--video-position': 'center',\n } as React.CSSProperties\n : {\n width,\n height,\n border: '1px solid red',\n };\n\n return (\n <div id={id} style={containerStyle}>\n {React.cloneElement(children as React.ReactElement<any>, {\n containerWidth: fullscreen ? window.innerWidth : width,\n containerHeight: fullscreen ? window.innerHeight : height,\n })}\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAUzB,OAAO,MAAMC,SAAoC,GAAGC,IAAA,IAM9C;EAAA,IAN+C;IACnDC,EAAE;IACFC,KAAK;IACLC,MAAM;IACNC,UAAU;IACVC;EACF,CAAC,GAAAL,IAAA;EACC,MAAMM,cAAmC,GAAGF,UAAU,GAClD;IACEG,QAAQ,EAAE,OAAO;IACjBC,KAAK,EAAE,CAAC;IACRC,eAAe,EAAE,MAAM;IACzB,aAAa,EAAE,SAAS;IACxB,kBAAkB,EAAE;EACtB,CAAC,GACC;IACEP,KAAK;IACLC,MAAM;IACNO,MAAM,EAAE;EACV,CAAC;EAEL,oBACEZ,KAAA,CAAAa,aAAA;IAAKV,EAAE,EAAEA,EAAG;IAACW,KAAK,EAAEN;EAAe,gBAC9BR,KAAK,CAACe,YAAY,CAACR,QAAQ,EAA6B;IACvDS,cAAc,EAAEV,UAAU,GAAGW,MAAM,CAACC,UAAU,GAAGd,KAAK;IACtDe,eAAe,EAAEb,UAAU,GAAGW,MAAM,CAACG,WAAW,GAAGf;EACrD,CAAC,CACA,CAAC;AAEV,CAAC","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.c9474bbb.iframe.bundle.js"></script></body></html>
|
package/dist/statics/janet/{main.3d3bf84f.iframe.bundle.js → main.c9474bbb.iframe.bundle.js}
RENAMED
|
@@ -13723,7 +13723,7 @@ ___CSS_LOADER_EXPORT___.locals = {
|
|
|
13723
13723
|
|
|
13724
13724
|
var ___CSS_LOADER_EXPORT___ = _node_modules_wix_yoshi_style_dependencies_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_wix_yoshi_style_dependencies_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
|
|
13725
13725
|
// Module
|
|
13726
|
-
___CSS_LOADER_EXPORT___.push([module.id, `.iK1tKq{width:100%;height:100%;display:block;position:relative;container-type:size}.BAeJbH{width:100%;height:100%;-o-object-fit:var(--poster-fit, cover);object-fit:var(--poster-fit, cover);-o-object-position:var(--poster-align, center);object-position:var(--poster-align, center)}.cmfWPB{height:100%;width:100%;top:0;left:0;position:absolute;-o-object-fit:var(--video-fit, cover);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));-o-object-position:clamp(100%,var(--position-left),0%) clamp(100%,var(--position-top),0%);object-position:clamp(100%,var(--position-left),0%) clamp(100%,var(--position-top),0%)}`, ""]);
|
|
13726
|
+
___CSS_LOADER_EXPORT___.push([module.id, `.iK1tKq{width:100%;height:100%;display:block;position:relative;container-type:size}.BAeJbH{width:100%;height:100%;-o-object-fit:var(--poster-fit, cover);object-fit:var(--poster-fit, cover);-o-object-position:var(--poster-align, center);object-position:var(--poster-align, center)}.cmfWPB{height:100%;width:100%;top:0;left:0;position:absolute;-o-object-fit:var(--video-fit, cover);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));-o-object-position:var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));object-position:var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%))}`, ""]);
|
|
13727
13727
|
// Exports
|
|
13728
13728
|
___CSS_LOADER_EXPORT___.locals = {
|
|
13729
13729
|
"video-container": `iK1tKq`,
|
|
@@ -15698,7 +15698,7 @@ var update = injectStylesIntoStyleTag_default()(Video_module/* default */.A, opt
|
|
|
15698
15698
|
|
|
15699
15699
|
/* harmony default export */ const src_Video_module = (Video_module/* default */.A.locals || {});
|
|
15700
15700
|
;// ./src/custom-element/utils.ts
|
|
15701
|
-
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://');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)};}function setVideoFocalPoint(videoNode,focalPoint){const
|
|
15701
|
+
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://');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)};}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());}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 __webpack_require__.e(/* import() */ 470).then(__webpack_require__.bind(__webpack_require__, 46089));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:()=>{}};}
|
|
15702
15702
|
// EXTERNAL MODULE: ../../node_modules/@babel/runtime/helpers/defineProperty.js
|
|
15703
15703
|
var defineProperty = __webpack_require__(58212);
|
|
15704
15704
|
var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty);
|
|
@@ -18894,6 +18894,14 @@ const customElementInit_getDevicePixelRatio = () => {
|
|
|
18894
18894
|
}
|
|
18895
18895
|
return window.devicePixelRatio;
|
|
18896
18896
|
};
|
|
18897
|
+
const getIsImagesLazyLoadingDisabled = () => {
|
|
18898
|
+
try {
|
|
18899
|
+
return new URL(window.location.href).searchParams.get('disableLazyLoading') === 'true';
|
|
18900
|
+
}
|
|
18901
|
+
catch {
|
|
18902
|
+
return false;
|
|
18903
|
+
}
|
|
18904
|
+
};
|
|
18897
18905
|
const customElementInit_STATIC_MEDIA_URL = 'https://static.wixstatic.com/media';
|
|
18898
18906
|
const MEDIA_ROOT_URL = 'https://static.wixstatic.com';
|
|
18899
18907
|
function customElementInit_initCustomElement(services = {}, contextWindow = null, envConsts = {}) {
|
|
@@ -18905,6 +18913,7 @@ function customElementInit_initCustomElement(services = {}, contextWindow = null
|
|
|
18905
18913
|
mediaRootUrl: MEDIA_ROOT_URL,
|
|
18906
18914
|
experiments: {},
|
|
18907
18915
|
devicePixelRatio: customElementInit_getDevicePixelRatio(),
|
|
18916
|
+
disableImagesLazyLoading: getIsImagesLazyLoadingDisabled(),
|
|
18908
18917
|
...envConsts,
|
|
18909
18918
|
};
|
|
18910
18919
|
const define = registry_init(contextWindow, services);
|
|
@@ -19089,8 +19098,7 @@ const Image = (props) => {
|
|
|
19089
19098
|
;// ./src/Video.tsx
|
|
19090
19099
|
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
19100
|
;// ./src/storybook/Container.tsx
|
|
19092
|
-
const Container=_ref=>{let{id,width,height,fullscreen,children}=_ref;const containerStyle=fullscreen?{position:'fixed',inset:0,backgroundColor:'#000'}:{width,height,border:'1px solid red'};
|
|
19093
|
-
'--video-fit':'contain','--video-position':'center'}:{width:'100%',height:'100%'};return/*#__PURE__*/react.createElement("div",{id:id,style:containerStyle},/*#__PURE__*/react.createElement("div",{style:videoContainerStyle},/*#__PURE__*/react.cloneElement(children,{containerWidth:fullscreen?window.innerWidth:width,containerHeight:fullscreen?window.innerHeight:height})));};
|
|
19101
|
+
const Container=_ref=>{let{id,width,height,fullscreen,children}=_ref;const containerStyle=fullscreen?{position:'fixed',inset:0,backgroundColor:'#000','--video-fit':'contain','--video-position':'center'}:{width,height,border:'1px solid red'};return/*#__PURE__*/react.createElement("div",{id:id,style:containerStyle},/*#__PURE__*/react.cloneElement(children,{containerWidth:fullscreen?window.innerWidth:width,containerHeight:fullscreen?window.innerHeight:height}));};
|
|
19094
19102
|
;// ./src/storybook/args.ts
|
|
19095
19103
|
const sampleVideo={videoMedia:{sources:[{quality:'1080p',width:1920,height:1080,types:[{format:'mp4',uri:'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4'}]},{quality:'720p',width:1280,height:720,types:[{format:'mp4',uri:'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4'}]},{quality:'480p',width:854,height:480,types:[{format:'mp4',uri:'video/11062b_c1797898279949878ff9bc792dc4a79c/480p/mp4/file.mp4'}]},{quality:'360p',width:640,height:360,types:[{format:'mp4',uri:'video/11062b_c1797898279949878ff9bc792dc4a79c/360p/mp4/file.mp4'}]}],adaptiveSources:[{format:'hls',uri:'site/media/video/11062b_c1797898279949878ff9bc792dc4a79c/da01a1fc-ad34-44bc-90e8-cc9413c466e6/repackage/hls'}],uri:'test-meta-id',hasAudio:true,fps:30,duration:40,poster:{id:'video-poster',uri:'11062b_c1797898279949878ff9bc792dc4a79cf000.jpg',width:1440,height:2560,name:'video-poster.jpg',alt:'alt text'}},loop:true,muted:true,autoplay:true,posterEffect:'none',playbackRate:1,qualityPolicy:'proportional'};const argTypes={fullscreen:{control:'boolean',defaultValue:false,description:'Toggle fullscreen mode. In fullscreen, the video is centered and contained.',table:{type:{summary:'boolean'}}},qualityPolicy:{control:'select',options:['proportional','adaptive','highest','none'],defaultValue:'proportional',description:'Quality policy for the video',table:{type:{summary:'enum'}}},containerWidth:{control:'number',defaultValue:500,description:'Width in pixels of the container element',table:{type:{summary:'number'}}},containerHeight:{control:'number',defaultValue:275,description:'Height in pixels of the container element',table:{type:{summary:'number'}}},muted:{control:'boolean',defaultValue:true,description:'Whether the video should be muted',table:{type:{summary:'boolean'}}},loop:{control:'boolean',defaultValue:true,description:'Whether the video should loop continuously',table:{type:{summary:'boolean'}}},posterEffect:{control:'select',options:[undefined,'fade'],defaultValue:undefined,description:'Effect to apply when transitioning from poster to video',table:{type:{summary:'string'}}},playbackRate:{control:'number',defaultValue:1,description:'The playback rate of the video',table:{type:{summary:'number'}}},autoplay:{control:'boolean',defaultValue:true,description:'Whether the video should autoplay',table:{type:{summary:'boolean'}}},focalPointX:{control:{type:'range',min:0,max:100,step:5},defaultValue:50,description:'Horizontal focal point for video positioning (0 = left, 100 = right)',table:{type:{summary:'number'}}},focalPointY:{control:{type:'range',min:0,max:100,step:5},defaultValue:50,description:'Vertical focal point for video positioning (0 = top, 100 = bottom)',table:{type:{summary:'number'}}}};
|
|
19096
19104
|
;// ./src/Video.stories.tsx
|
|
@@ -73258,4 +73266,4 @@ module.exports = /*#__PURE__*/JSON.parse('["a","abbr","address","area","article"
|
|
|
73258
73266
|
/******/
|
|
73259
73267
|
/******/ })()
|
|
73260
73268
|
;
|
|
73261
|
-
//# sourceMappingURL=main.
|
|
73269
|
+
//# sourceMappingURL=main.c9474bbb.iframe.bundle.js.map
|