@wix/video 1.81.0 → 1.83.0

package/dist/statics/janet/{main.f45a6aa8.iframe.bundle.js → main.3d3bf84f.iframe.bundle.js}

@@ -15698,7 +15698,7 @@ var update = injectStylesIntoStyleTag_default()(Video_module/* default */.A, opt
 
 /* harmony default export */ const src_Video_module = (Video_module/* default */.A.locals || {});
 ;// ./src/custom-element/utils.ts
-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:()=>{}};}
+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 computedStyle=getComputedStyle(videoNode);const videoFit=computedStyle.getPropertyValue('--video-fit');if(videoFit==='contain'){videoNode.style.setProperty('object-position','center');return;}videoNode.style.removeProperty('object-position');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:()=>{}};}
 // EXTERNAL MODULE: ../../node_modules/@babel/runtime/helpers/defineProperty.js
 var defineProperty = __webpack_require__(58212);
 var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty);
@@ -17629,7 +17629,7 @@ const autoEncodeTemplate = template `,enc_auto`;
 const AVIFEncodeTemplate = template `,enc_avif`;
 const pAVIFEncodeTemplate = template `,enc_pavif`;
 const animatedTransformTemplate = template `,pstr`;
-const animatedGIFTransformTemplate = template `,anm_-1`;
+const animatedGIFTransformTemplate = template `,anm_all`;
 /**
  * returns image transform uri
  * @param {object}  transformsObj
@@ -17725,7 +17725,7 @@ function getImageURI(transformsObj) {
             transformsStr += animatedTransformTemplate(transformsObj);
         }
         else if (isGif && allowFullGIFTransformation) {
-            // Non-placeholder flow + GIF + flag enabled: use anm_-1
+            // Non-placeholder flow + GIF + flag enabled: use anm_all
             transformsStr += animatedGIFTransformTemplate(transformsObj);
         }
     }
@@ -19089,11 +19089,12 @@ const Image = (props) => {
 ;// ./src/Video.tsx
 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);
 ;// ./src/storybook/Container.tsx
-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}));};
+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'};const videoContainerStyle=fullscreen?{width:'100%',height:'100%',// @ts-expect-error CSS variable
+'--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})));};
 ;// ./src/storybook/args.ts
-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={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'}}}};
+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'}}}};
 ;// ./src/Video.stories.tsx
-const openExperiments=[];const urlParams=new URLSearchParams(window.location.search);const experimentsParam=urlParams.get('experiments');((experimentsParam==null?void 0:experimentsParam.split(','))||[]).forEach(experiment=>{openExperiments.push(experiment);});/* harmony default export */ const Video_stories = ({title:'Video',component:src_Video,argTypes: argTypes});const Default=args=>{const id='comp_12345';const videoRef=react.useRef(null);react.useEffect(()=>{if(videoRef.current){videoRef.current.load();}},[args.autoplay,args.qualityPolicy]);const videoProps={loop:Boolean(args.loop),muted:Boolean(args.muted),playbackRate:args.playbackRate,posterEffect:args.posterEffect,autoplay:Boolean(args.autoplay),videoMedia:sampleVideo.videoMedia,id,videoRef,qualityPolicy:args.qualityPolicy,focalPoint:{x:args.focalPointX,y:args.focalPointY},onError:error=>{console.log('Video error:',error);}};return/*#__PURE__*/react.createElement(Container,{width:args.containerWidth,height:args.containerHeight},/*#__PURE__*/react.createElement(src_Video,videoProps));};
+const openExperiments=[];const urlParams=new URLSearchParams(window.location.search);const experimentsParam=urlParams.get('experiments');((experimentsParam==null?void 0:experimentsParam.split(','))||[]).forEach(experiment=>{openExperiments.push(experiment);});/* harmony default export */ const Video_stories = ({title:'Video',component:src_Video,argTypes: argTypes});const Default=args=>{const id='comp_12345';const videoRef=react.useRef(null);react.useEffect(()=>{if(videoRef.current){videoRef.current.load();}},[args.autoplay,args.qualityPolicy]);const videoProps={loop:Boolean(args.loop),muted:Boolean(args.muted),playbackRate:args.playbackRate,posterEffect:args.posterEffect,autoplay:Boolean(args.autoplay),videoMedia:sampleVideo.videoMedia,id,videoRef,qualityPolicy:args.qualityPolicy,focalPoint:{x:args.focalPointX,y:args.focalPointY},onError:error=>{console.log('Video error:',error);}};return/*#__PURE__*/react.createElement(Container,{width:args.containerWidth,height:args.containerHeight,fullscreen:args.fullscreen},/*#__PURE__*/react.createElement(src_Video,videoProps));};
 
 /***/ }),
 
@@ -73257,4 +73258,4 @@ module.exports = /*#__PURE__*/JSON.parse('["a","abbr","address","area","article"
 /******/ 	
 /******/ })()
 ;
-//# sourceMappingURL=main.f45a6aa8.iframe.bundle.js.map
+//# sourceMappingURL=main.3d3bf84f.iframe.bundle.js.map