@wix/video 1.81.0 → 1.83.0

package/dist/cjs/Video.stories.js

@@ -49,17 +49,18 @@ const Default = args => {
   return /*#__PURE__*/_react.default.createElement(_Container.Container, {
     width: args.containerWidth,
     height: args.containerHeight,
+    fullscreen: args.fullscreen,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 63,
+      lineNumber: 64,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_index.Video, (0, _extends2.default)({}, videoProps, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 64,
+      lineNumber: 69,
       columnNumber: 7
     }
   })));

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

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

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

@@ -37,6 +37,13 @@ function getVideoDimension(videoScale, videoWidth, videoHeight) {
   };
 }
 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());

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

@@ -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","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":[]}
+{"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":[]}

package/dist/cjs/storybook/Container.js

@@ -9,25 +9,49 @@ const Container = ({
   id,
   width,
   height,
+  fullscreen,
   children
 }) => {
+  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.default.createElement("div", {
     id: id,
-    style: {
-      width,
-      height,
-      border: '1px solid red'
-    },
+    style: containerStyle,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 12,
+      lineNumber: 40,
       columnNumber: 5
     }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: videoContainerStyle,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 41,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/_react.default.cloneElement(children, {
-    containerWidth: width,
-    containerHeight: height
-  }));
+    containerWidth: fullscreen ? window.innerWidth : width,
+    containerHeight: fullscreen ? window.innerHeight : height
+  })));
 };
 exports.Container = Container;
 //# sourceMappingURL=Container.js.map

package/dist/cjs/storybook/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_jsxFileName","Container","id","width","height","children","default","createElement","style","border","__self","__source","fileName","lineNumber","columnNumber","React","cloneElement","containerWidth","containerHeight","exports"],"sources":["../../../src/storybook/Container.tsx"],"sourcesContent":["import React from 'react';\n\ntype ContainerProps = React.HTMLProps<{}>;\n\nexport const Container: React.VFC<ContainerProps> = ({\n  id,\n  width,\n  height,\n  children,\n}) => {\n  return (\n    <div id={id} style={{ width, height, border: '1px solid red' }}>\n      {React.cloneElement(children as React.ReactElement<any>, {\n        containerWidth: width,\n        containerHeight: height,\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,IAAAC,YAAA;AAInB,MAAMC,SAAoC,GAAGA,CAAC;EACnDC,EAAE;EACFC,KAAK;EACLC,MAAM;EACNC;AACF,CAAC,KAAK;EACJ,oBACER,MAAA,CAAAS,OAAA,CAAAC,aAAA;IAAKL,EAAE,EAAEA,EAAG;IAACM,KAAK,EAAE;MAAEL,KAAK;MAAEC,MAAM;MAAEK,MAAM,EAAE;IAAgB,CAAE;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC5DC,cAAK,CAACC,YAAY,CAACX,QAAQ,EAA6B;IACvDY,cAAc,EAAEd,KAAK;IACrBe,eAAe,EAAEd;EACnB,CAAC,CACE,CAAC;AAEV,CAAC;AAACe,OAAA,CAAAlB,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_jsxFileName","Container","id","width","height","fullscreen","children","containerStyle","position","inset","backgroundColor","border","videoContainerStyle","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 = React.HTMLProps<HTMLDivElement> & {\n  fullscreen?: boolean;\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      }\n    : {\n        width,\n        height,\n        border: '1px solid red',\n      };\n\n  const videoContainerStyle: React.CSSProperties = fullscreen\n    ? {\n        width: '100%',\n        height: '100%',\n        // @ts-expect-error CSS variable\n        '--video-fit': 'contain',\n        '--video-position': 'center',\n      }\n    : {\n        width: '100%',\n        height: '100%',\n      };\n\n  return (\n    <div id={id} style={containerStyle}>\n      <div style={videoContainerStyle}>\n        {React.cloneElement(children as React.ReactElement<any>, {\n          containerWidth: fullscreen ? window.innerWidth : width,\n          containerHeight: fullscreen ? window.innerHeight : height,\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,IAAAC,YAAA;AAMnB,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;EACnB,CAAC,GACD;IACEP,KAAK;IACLC,MAAM;IACNO,MAAM,EAAE;EACV,CAAC;EAEL,MAAMC,mBAAwC,GAAGP,UAAU,GACvD;IACEF,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACd;IACA,aAAa,EAAE,SAAS;IACxB,kBAAkB,EAAE;EACtB,CAAC,GACD;IACED,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACV,CAAC;EAEL,oBACEP,MAAA,CAAAgB,OAAA,CAAAC,aAAA;IAAKZ,EAAE,EAAEA,EAAG;IAACa,KAAK,EAAER,cAAe;IAAAS,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACjCvB,MAAA,CAAAgB,OAAA,CAAAC,aAAA;IAAKC,KAAK,EAAEH,mBAAoB;IAAAI,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC7BC,cAAK,CAACC,YAAY,CAAChB,QAAQ,EAA6B;IACvDiB,cAAc,EAAElB,UAAU,GAAGmB,MAAM,CAACC,UAAU,GAAGtB,KAAK;IACtDuB,eAAe,EAAErB,UAAU,GAAGmB,MAAM,CAACG,WAAW,GAAGvB;EACrD,CAAC,CACE,CACF,CAAC;AAEV,CAAC;AAACwB,OAAA,CAAA3B,SAAA,GAAAA,SAAA","ignoreList":[]}

package/dist/cjs/storybook/args.js

@@ -62,6 +62,16 @@ const sampleVideo = exports.sampleVideo = {
   qualityPolicy: 'proportional'
 };
 const argTypes = exports.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'],

package/dist/cjs/storybook/args.js.map

@@ -1 +1 @@
-{"version":3,"names":["sampleVideo","exports","videoMedia","sources","quality","width","height","types","format","uri","adaptiveSources","hasAudio","fps","duration","poster","id","name","alt","loop","muted","autoplay","posterEffect","playbackRate","qualityPolicy","argTypes","control","options","defaultValue","description","table","type","summary","containerWidth","containerHeight","undefined","focalPointX","min","max","step","focalPointY"],"sources":["../../../src/storybook/args.ts"],"sourcesContent":["export const sampleVideo = {\n  videoMedia: {\n    sources: [\n      {\n        quality: '1080p' as const,\n        width: 1920,\n        height: 1080,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '720p' as const,\n        width: 1280,\n        height: 720,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '480p' as const,\n        width: 854,\n        height: 480,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/480p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '360p' as const,\n        width: 640,\n        height: 360,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/360p/mp4/file.mp4',\n          },\n        ],\n      },\n    ],\n    adaptiveSources: [\n      {\n        format: 'hls' as const,\n        uri: 'site/media/video/11062b_c1797898279949878ff9bc792dc4a79c/da01a1fc-ad34-44bc-90e8-cc9413c466e6/repackage/hls',\n      },\n    ],\n    uri: 'test-meta-id',\n    hasAudio: true,\n    fps: 30,\n    duration: 40,\n    poster: {\n      id: 'video-poster',\n      uri: '11062b_c1797898279949878ff9bc792dc4a79cf000.jpg',\n      width: 1440,\n      height: 2560,\n      name: 'video-poster.jpg',\n      alt: 'alt text',\n    },\n  },\n  loop: true,\n  muted: true,\n  autoplay: true,\n  posterEffect: 'none',\n  playbackRate: 1,\n  qualityPolicy: 'proportional',\n};\n\nexport const argTypes = {\n  qualityPolicy: {\n    control: 'select',\n    options: ['proportional', 'adaptive', 'highest', 'none'],\n    defaultValue: 'proportional',\n    description: 'Quality policy for the video',\n    table: {\n      type: {\n        summary: 'enum',\n      },\n    },\n  },\n  containerWidth: {\n    control: 'number',\n    defaultValue: 500,\n    description: 'Width in pixels of the container element',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  containerHeight: {\n    control: 'number',\n    defaultValue: 275,\n    description: 'Height in pixels of the container element',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  muted: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should be muted',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  loop: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should loop continuously',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  posterEffect: {\n    control: 'select',\n    options: [undefined, 'fade'],\n    defaultValue: undefined,\n    description: 'Effect to apply when transitioning from poster to video',\n    table: {\n      type: {\n        summary: 'string',\n      },\n    },\n  },\n  playbackRate: {\n    control: 'number',\n    defaultValue: 1,\n    description: 'The playback rate of the video',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  autoplay: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should autoplay',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  focalPointX: {\n    control: {\n      type: 'range',\n      min: 0,\n      max: 100,\n      step: 5,\n    },\n    defaultValue: 50,\n    description:\n      'Horizontal focal point for video positioning (0 = left, 100 = right)',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  focalPointY: {\n    control: {\n      type: 'range',\n      min: 0,\n      max: 100,\n      step: 5,\n    },\n    defaultValue: 50,\n    description:\n      'Vertical focal point for video positioning (0 = top, 100 = bottom)',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["sampleVideo","exports","videoMedia","sources","quality","width","height","types","format","uri","adaptiveSources","hasAudio","fps","duration","poster","id","name","alt","loop","muted","autoplay","posterEffect","playbackRate","qualityPolicy","argTypes","fullscreen","control","defaultValue","description","table","type","summary","options","containerWidth","containerHeight","undefined","focalPointX","min","max","step","focalPointY"],"sources":["../../../src/storybook/args.ts"],"sourcesContent":["export const sampleVideo = {\n  videoMedia: {\n    sources: [\n      {\n        quality: '1080p' as const,\n        width: 1920,\n        height: 1080,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '720p' as const,\n        width: 1280,\n        height: 720,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '480p' as const,\n        width: 854,\n        height: 480,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/480p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '360p' as const,\n        width: 640,\n        height: 360,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/360p/mp4/file.mp4',\n          },\n        ],\n      },\n    ],\n    adaptiveSources: [\n      {\n        format: 'hls' as const,\n        uri: 'site/media/video/11062b_c1797898279949878ff9bc792dc4a79c/da01a1fc-ad34-44bc-90e8-cc9413c466e6/repackage/hls',\n      },\n    ],\n    uri: 'test-meta-id',\n    hasAudio: true,\n    fps: 30,\n    duration: 40,\n    poster: {\n      id: 'video-poster',\n      uri: '11062b_c1797898279949878ff9bc792dc4a79cf000.jpg',\n      width: 1440,\n      height: 2560,\n      name: 'video-poster.jpg',\n      alt: 'alt text',\n    },\n  },\n  loop: true,\n  muted: true,\n  autoplay: true,\n  posterEffect: 'none',\n  playbackRate: 1,\n  qualityPolicy: 'proportional',\n};\n\nexport const argTypes = {\n  fullscreen: {\n    control: 'boolean',\n    defaultValue: false,\n    description:\n      'Toggle fullscreen mode. In fullscreen, the video is centered and contained.',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  qualityPolicy: {\n    control: 'select',\n    options: ['proportional', 'adaptive', 'highest', 'none'],\n    defaultValue: 'proportional',\n    description: 'Quality policy for the video',\n    table: {\n      type: {\n        summary: 'enum',\n      },\n    },\n  },\n  containerWidth: {\n    control: 'number',\n    defaultValue: 500,\n    description: 'Width in pixels of the container element',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  containerHeight: {\n    control: 'number',\n    defaultValue: 275,\n    description: 'Height in pixels of the container element',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  muted: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should be muted',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  loop: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should loop continuously',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  posterEffect: {\n    control: 'select',\n    options: [undefined, 'fade'],\n    defaultValue: undefined,\n    description: 'Effect to apply when transitioning from poster to video',\n    table: {\n      type: {\n        summary: 'string',\n      },\n    },\n  },\n  playbackRate: {\n    control: 'number',\n    defaultValue: 1,\n    description: 'The playback rate of the video',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  autoplay: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should autoplay',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  focalPointX: {\n    control: {\n      type: 'range',\n      min: 0,\n      max: 100,\n      step: 5,\n    },\n    defaultValue: 50,\n    description:\n      'Horizontal focal point for video positioning (0 = left, 100 = right)',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  focalPointY: {\n    control: {\n      type: 'range',\n      min: 0,\n      max: 100,\n      step: 5,\n    },\n    defaultValue: 50,\n    description:\n      'Vertical focal point for video positioning (0 = top, 100 = bottom)',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Video.stories.js

@@ -41,7 +41,8 @@ export const Default = args => {
   };
   return /*#__PURE__*/React.createElement(Container, {
     width: args.containerWidth,
-    height: args.containerHeight
+    height: args.containerHeight,
+    fullscreen: args.fullscreen
   }, /*#__PURE__*/React.createElement(Video, videoProps));
 };
 //# sourceMappingURL=Video.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Video","Container","argTypes","sampleVideo","openExperiments","urlParams","URLSearchParams","window","location","search","experimentsParam","get","split","forEach","experiment","push","title","component","Default","args","id","videoRef","useRef","useEffect","current","load","autoplay","qualityPolicy","videoProps","loop","Boolean","muted","playbackRate","posterEffect","videoMedia","focalPoint","x","focalPointX","y","focalPointY","onError","error","console","log","createElement","width","containerWidth","height","containerHeight"],"sources":["../../src/Video.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { Meta } from '@wix/yoshi-storybook-dependencies';\nimport { Video } from './index';\nimport { Container } from './storybook/Container';\nimport { argTypes, sampleVideo } from './storybook/args';\nimport type { QualityPolicy, VideoProps } from './types';\n\nconst openExperiments: string[] = [];\n\nconst urlParams = new URLSearchParams(window.location.search);\nconst experimentsParam = urlParams.get('experiments');\n(experimentsParam?.split(',') || []).forEach((experiment) => {\n  openExperiments.push(experiment);\n});\n\nexport default {\n  title: 'Video',\n  component: Video,\n  argTypes,\n} as Meta;\n\ntype StoryArgs = {\n  qualityPolicy: QualityPolicy;\n  uri: string;\n  containerHeight: number;\n  containerWidth: number;\n  loop: boolean;\n  muted: boolean;\n  autoplay: boolean;\n  playbackRate: number;\n  posterEffect: 'fade';\n  focalPointX: number;\n  focalPointY: number;\n};\n\nexport const Default: React.VFC<StoryArgs> = (args) => {\n  const id = 'comp_12345';\n  const videoRef = React.useRef<HTMLVideoElement>(null);\n\n  React.useEffect(() => {\n    if (videoRef.current) {\n      videoRef.current.load();\n    }\n  }, [args.autoplay, args.qualityPolicy]);\n\n  const videoProps: VideoProps = {\n    loop: Boolean(args.loop),\n    muted: Boolean(args.muted),\n    playbackRate: args.playbackRate,\n    posterEffect: args.posterEffect,\n    autoplay: Boolean(args.autoplay),\n    videoMedia: sampleVideo.videoMedia,\n    id,\n    videoRef,\n    qualityPolicy: args.qualityPolicy,\n    focalPoint: { x: args.focalPointX, y: args.focalPointY },\n    onError: (error) => {\n      console.log('Video error:', error);\n    },\n  };\n\n  return (\n    <Container width={args.containerWidth} height={args.containerHeight}>\n      <Video {...videoProps} />\n    </Container>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,SAAS,QAAQ,uBAAuB;AACjD,SAASC,QAAQ,EAAEC,WAAW,QAAQ,kBAAkB;AAGxD,MAAMC,eAAyB,GAAG,EAAE;AAEpC,MAAMC,SAAS,GAAG,IAAIC,eAAe,CAACC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;AAC7D,MAAMC,gBAAgB,GAAGL,SAAS,CAACM,GAAG,CAAC,aAAa,CAAC;AACrD,CAAC,CAAAD,gBAAgB,oBAAhBA,gBAAgB,CAAEE,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE,EAAEC,OAAO,CAAEC,UAAU,IAAK;EAC3DV,eAAe,CAACW,IAAI,CAACD,UAAU,CAAC;AAClC,CAAC,CAAC;AAEF,eAAe;EACbE,KAAK,EAAE,OAAO;EACdC,SAAS,EAAEjB,KAAK;EAChBE;AACF,CAAC;AAgBD,OAAO,MAAMgB,OAA6B,GAAIC,IAAI,IAAK;EACrD,MAAMC,EAAE,GAAG,YAAY;EACvB,MAAMC,QAAQ,GAAGtB,KAAK,CAACuB,MAAM,CAAmB,IAAI,CAAC;EAErDvB,KAAK,CAACwB,SAAS,CAAC,MAAM;IACpB,IAAIF,QAAQ,CAACG,OAAO,EAAE;MACpBH,QAAQ,CAACG,OAAO,CAACC,IAAI,CAAC,CAAC;IACzB;EACF,CAAC,EAAE,CAACN,IAAI,CAACO,QAAQ,EAAEP,IAAI,CAACQ,aAAa,CAAC,CAAC;EAEvC,MAAMC,UAAsB,GAAG;IAC7BC,IAAI,EAAEC,OAAO,CAACX,IAAI,CAACU,IAAI,CAAC;IACxBE,KAAK,EAAED,OAAO,CAACX,IAAI,CAACY,KAAK,CAAC;IAC1BC,YAAY,EAAEb,IAAI,CAACa,YAAY;IAC/BC,YAAY,EAAEd,IAAI,CAACc,YAAY;IAC/BP,QAAQ,EAAEI,OAAO,CAACX,IAAI,CAACO,QAAQ,CAAC;IAChCQ,UAAU,EAAE/B,WAAW,CAAC+B,UAAU;IAClCd,EAAE;IACFC,QAAQ;IACRM,aAAa,EAAER,IAAI,CAACQ,aAAa;IACjCQ,UAAU,EAAE;MAAEC,CAAC,EAAEjB,IAAI,CAACkB,WAAW;MAAEC,CAAC,EAAEnB,IAAI,CAACoB;IAAY,CAAC;IACxDC,OAAO,EAAGC,KAAK,IAAK;MAClBC,OAAO,CAACC,GAAG,CAAC,cAAc,EAAEF,KAAK,CAAC;IACpC;EACF,CAAC;EAED,oBACE1C,KAAA,CAAA6C,aAAA,CAAC3C,SAAS;IAAC4C,KAAK,EAAE1B,IAAI,CAAC2B,cAAe;IAACC,MAAM,EAAE5B,IAAI,CAAC6B;EAAgB,gBAClEjD,KAAA,CAAA6C,aAAA,CAAC5C,KAAK,EAAK4B,UAAa,CACf,CAAC;AAEhB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Video","Container","argTypes","sampleVideo","openExperiments","urlParams","URLSearchParams","window","location","search","experimentsParam","get","split","forEach","experiment","push","title","component","Default","args","id","videoRef","useRef","useEffect","current","load","autoplay","qualityPolicy","videoProps","loop","Boolean","muted","playbackRate","posterEffect","videoMedia","focalPoint","x","focalPointX","y","focalPointY","onError","error","console","log","createElement","width","containerWidth","height","containerHeight","fullscreen"],"sources":["../../src/Video.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { Meta } from '@wix/yoshi-storybook-dependencies';\nimport { Video } from './index';\nimport { Container } from './storybook/Container';\nimport { argTypes, sampleVideo } from './storybook/args';\nimport type { QualityPolicy, VideoProps } from './types';\n\nconst openExperiments: string[] = [];\n\nconst urlParams = new URLSearchParams(window.location.search);\nconst experimentsParam = urlParams.get('experiments');\n(experimentsParam?.split(',') || []).forEach((experiment) => {\n  openExperiments.push(experiment);\n});\n\nexport default {\n  title: 'Video',\n  component: Video,\n  argTypes,\n} as Meta;\n\ntype StoryArgs = {\n  fullscreen: boolean;\n  qualityPolicy: QualityPolicy;\n  uri: string;\n  containerHeight: number;\n  containerWidth: number;\n  loop: boolean;\n  muted: boolean;\n  autoplay: boolean;\n  playbackRate: number;\n  posterEffect: 'fade';\n  focalPointX: number;\n  focalPointY: number;\n};\n\nexport const Default: React.VFC<StoryArgs> = (args) => {\n  const id = 'comp_12345';\n  const videoRef = React.useRef<HTMLVideoElement>(null);\n\n  React.useEffect(() => {\n    if (videoRef.current) {\n      videoRef.current.load();\n    }\n  }, [args.autoplay, args.qualityPolicy]);\n\n  const videoProps: VideoProps = {\n    loop: Boolean(args.loop),\n    muted: Boolean(args.muted),\n    playbackRate: args.playbackRate,\n    posterEffect: args.posterEffect,\n    autoplay: Boolean(args.autoplay),\n    videoMedia: sampleVideo.videoMedia,\n    id,\n    videoRef,\n    qualityPolicy: args.qualityPolicy,\n    focalPoint: { x: args.focalPointX, y: args.focalPointY },\n    onError: (error) => {\n      console.log('Video error:', error);\n    },\n  };\n\n  return (\n    <Container\n      width={args.containerWidth}\n      height={args.containerHeight}\n      fullscreen={args.fullscreen}\n    >\n      <Video {...videoProps} />\n    </Container>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,SAAS,QAAQ,uBAAuB;AACjD,SAASC,QAAQ,EAAEC,WAAW,QAAQ,kBAAkB;AAGxD,MAAMC,eAAyB,GAAG,EAAE;AAEpC,MAAMC,SAAS,GAAG,IAAIC,eAAe,CAACC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;AAC7D,MAAMC,gBAAgB,GAAGL,SAAS,CAACM,GAAG,CAAC,aAAa,CAAC;AACrD,CAAC,CAAAD,gBAAgB,oBAAhBA,gBAAgB,CAAEE,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE,EAAEC,OAAO,CAAEC,UAAU,IAAK;EAC3DV,eAAe,CAACW,IAAI,CAACD,UAAU,CAAC;AAClC,CAAC,CAAC;AAEF,eAAe;EACbE,KAAK,EAAE,OAAO;EACdC,SAAS,EAAEjB,KAAK;EAChBE;AACF,CAAC;AAiBD,OAAO,MAAMgB,OAA6B,GAAIC,IAAI,IAAK;EACrD,MAAMC,EAAE,GAAG,YAAY;EACvB,MAAMC,QAAQ,GAAGtB,KAAK,CAACuB,MAAM,CAAmB,IAAI,CAAC;EAErDvB,KAAK,CAACwB,SAAS,CAAC,MAAM;IACpB,IAAIF,QAAQ,CAACG,OAAO,EAAE;MACpBH,QAAQ,CAACG,OAAO,CAACC,IAAI,CAAC,CAAC;IACzB;EACF,CAAC,EAAE,CAACN,IAAI,CAACO,QAAQ,EAAEP,IAAI,CAACQ,aAAa,CAAC,CAAC;EAEvC,MAAMC,UAAsB,GAAG;IAC7BC,IAAI,EAAEC,OAAO,CAACX,IAAI,CAACU,IAAI,CAAC;IACxBE,KAAK,EAAED,OAAO,CAACX,IAAI,CAACY,KAAK,CAAC;IAC1BC,YAAY,EAAEb,IAAI,CAACa,YAAY;IAC/BC,YAAY,EAAEd,IAAI,CAACc,YAAY;IAC/BP,QAAQ,EAAEI,OAAO,CAACX,IAAI,CAACO,QAAQ,CAAC;IAChCQ,UAAU,EAAE/B,WAAW,CAAC+B,UAAU;IAClCd,EAAE;IACFC,QAAQ;IACRM,aAAa,EAAER,IAAI,CAACQ,aAAa;IACjCQ,UAAU,EAAE;MAAEC,CAAC,EAAEjB,IAAI,CAACkB,WAAW;MAAEC,CAAC,EAAEnB,IAAI,CAACoB;IAAY,CAAC;IACxDC,OAAO,EAAGC,KAAK,IAAK;MAClBC,OAAO,CAACC,GAAG,CAAC,cAAc,EAAEF,KAAK,CAAC;IACpC;EACF,CAAC;EAED,oBACE1C,KAAA,CAAA6C,aAAA,CAAC3C,SAAS;IACR4C,KAAK,EAAE1B,IAAI,CAAC2B,cAAe;IAC3BC,MAAM,EAAE5B,IAAI,CAAC6B,eAAgB;IAC7BC,UAAU,EAAE9B,IAAI,CAAC8B;EAAW,gBAE5BlD,KAAA,CAAA6C,aAAA,CAAC5C,KAAK,EAAK4B,UAAa,CACf,CAAC;AAEhB,CAAC","ignoreList":[]}

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

@@ -30,6 +30,13 @@ function getVideoDimension(videoScale, videoWidth, videoHeight) {
   };
 }
 export 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());

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

@@ -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","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":[]}
+{"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":[]}

package/dist/esm/storybook/Container.js

@@ -4,18 +4,36 @@ export const Container = _ref => {
     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: {
-      width,
-      height,
-      border: '1px solid red'
-    }
+    style: containerStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    style: videoContainerStyle
   }, /*#__PURE__*/React.cloneElement(children, {
-    containerWidth: width,
-    containerHeight: height
-  }));
+    containerWidth: fullscreen ? window.innerWidth : width,
+    containerHeight: fullscreen ? window.innerHeight : height
+  })));
 };
 //# sourceMappingURL=Container.js.map

package/dist/esm/storybook/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Container","_ref","id","width","height","children","createElement","style","border","cloneElement","containerWidth","containerHeight"],"sources":["../../../src/storybook/Container.tsx"],"sourcesContent":["import React from 'react';\n\ntype ContainerProps = React.HTMLProps<{}>;\n\nexport const Container: React.VFC<ContainerProps> = ({\n  id,\n  width,\n  height,\n  children,\n}) => {\n  return (\n    <div id={id} style={{ width, height, border: '1px solid red' }}>\n      {React.cloneElement(children as React.ReactElement<any>, {\n        containerWidth: width,\n        containerHeight: height,\n      })}\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,OAAO,MAAMC,SAAoC,GAAGC,IAAA,IAK9C;EAAA,IAL+C;IACnDC,EAAE;IACFC,KAAK;IACLC,MAAM;IACNC;EACF,CAAC,GAAAJ,IAAA;EACC,oBACEF,KAAA,CAAAO,aAAA;IAAKJ,EAAE,EAAEA,EAAG;IAACK,KAAK,EAAE;MAAEJ,KAAK;MAAEC,MAAM;MAAEI,MAAM,EAAE;IAAgB;EAAE,gBAC5DT,KAAK,CAACU,YAAY,CAACJ,QAAQ,EAA6B;IACvDK,cAAc,EAAEP,KAAK;IACrBQ,eAAe,EAAEP;EACnB,CAAC,CACE,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Container","_ref","id","width","height","fullscreen","children","containerStyle","position","inset","backgroundColor","border","videoContainerStyle","createElement","style","cloneElement","containerWidth","window","innerWidth","containerHeight","innerHeight"],"sources":["../../../src/storybook/Container.tsx"],"sourcesContent":["import React from 'react';\n\ntype ContainerProps = React.HTMLProps<HTMLDivElement> & {\n  fullscreen?: boolean;\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      }\n    : {\n        width,\n        height,\n        border: '1px solid red',\n      };\n\n  const videoContainerStyle: React.CSSProperties = fullscreen\n    ? {\n        width: '100%',\n        height: '100%',\n        // @ts-expect-error CSS variable\n        '--video-fit': 'contain',\n        '--video-position': 'center',\n      }\n    : {\n        width: '100%',\n        height: '100%',\n      };\n\n  return (\n    <div id={id} style={containerStyle}>\n      <div style={videoContainerStyle}>\n        {React.cloneElement(children as React.ReactElement<any>, {\n          containerWidth: fullscreen ? window.innerWidth : width,\n          containerHeight: fullscreen ? window.innerHeight : height,\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAMzB,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;EACnB,CAAC,GACD;IACEP,KAAK;IACLC,MAAM;IACNO,MAAM,EAAE;EACV,CAAC;EAEL,MAAMC,mBAAwC,GAAGP,UAAU,GACvD;IACEF,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACd;IACA,aAAa,EAAE,SAAS;IACxB,kBAAkB,EAAE;EACtB,CAAC,GACD;IACED,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACV,CAAC;EAEL,oBACEL,KAAA,CAAAc,aAAA;IAAKX,EAAE,EAAEA,EAAG;IAACY,KAAK,EAAEP;EAAe,gBACjCR,KAAA,CAAAc,aAAA;IAAKC,KAAK,EAAEF;EAAoB,gBAC7Bb,KAAK,CAACgB,YAAY,CAACT,QAAQ,EAA6B;IACvDU,cAAc,EAAEX,UAAU,GAAGY,MAAM,CAACC,UAAU,GAAGf,KAAK;IACtDgB,eAAe,EAAEd,UAAU,GAAGY,MAAM,CAACG,WAAW,GAAGhB;EACrD,CAAC,CACE,CACF,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/storybook/args.js

@@ -58,6 +58,16 @@ export const sampleVideo = {
   qualityPolicy: 'proportional'
 };
 export 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'],

package/dist/esm/storybook/args.js.map

@@ -1 +1 @@
-{"version":3,"names":["sampleVideo","videoMedia","sources","quality","width","height","types","format","uri","adaptiveSources","hasAudio","fps","duration","poster","id","name","alt","loop","muted","autoplay","posterEffect","playbackRate","qualityPolicy","argTypes","control","options","defaultValue","description","table","type","summary","containerWidth","containerHeight","undefined","focalPointX","min","max","step","focalPointY"],"sources":["../../../src/storybook/args.ts"],"sourcesContent":["export const sampleVideo = {\n  videoMedia: {\n    sources: [\n      {\n        quality: '1080p' as const,\n        width: 1920,\n        height: 1080,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '720p' as const,\n        width: 1280,\n        height: 720,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '480p' as const,\n        width: 854,\n        height: 480,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/480p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '360p' as const,\n        width: 640,\n        height: 360,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/360p/mp4/file.mp4',\n          },\n        ],\n      },\n    ],\n    adaptiveSources: [\n      {\n        format: 'hls' as const,\n        uri: 'site/media/video/11062b_c1797898279949878ff9bc792dc4a79c/da01a1fc-ad34-44bc-90e8-cc9413c466e6/repackage/hls',\n      },\n    ],\n    uri: 'test-meta-id',\n    hasAudio: true,\n    fps: 30,\n    duration: 40,\n    poster: {\n      id: 'video-poster',\n      uri: '11062b_c1797898279949878ff9bc792dc4a79cf000.jpg',\n      width: 1440,\n      height: 2560,\n      name: 'video-poster.jpg',\n      alt: 'alt text',\n    },\n  },\n  loop: true,\n  muted: true,\n  autoplay: true,\n  posterEffect: 'none',\n  playbackRate: 1,\n  qualityPolicy: 'proportional',\n};\n\nexport const argTypes = {\n  qualityPolicy: {\n    control: 'select',\n    options: ['proportional', 'adaptive', 'highest', 'none'],\n    defaultValue: 'proportional',\n    description: 'Quality policy for the video',\n    table: {\n      type: {\n        summary: 'enum',\n      },\n    },\n  },\n  containerWidth: {\n    control: 'number',\n    defaultValue: 500,\n    description: 'Width in pixels of the container element',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  containerHeight: {\n    control: 'number',\n    defaultValue: 275,\n    description: 'Height in pixels of the container element',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  muted: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should be muted',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  loop: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should loop continuously',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  posterEffect: {\n    control: 'select',\n    options: [undefined, 'fade'],\n    defaultValue: undefined,\n    description: 'Effect to apply when transitioning from poster to video',\n    table: {\n      type: {\n        summary: 'string',\n      },\n    },\n  },\n  playbackRate: {\n    control: 'number',\n    defaultValue: 1,\n    description: 'The playback rate of the video',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  autoplay: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should autoplay',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  focalPointX: {\n    control: {\n      type: 'range',\n      min: 0,\n      max: 100,\n      step: 5,\n    },\n    defaultValue: 50,\n    description:\n      'Horizontal focal point for video positioning (0 = left, 100 = right)',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  focalPointY: {\n    control: {\n      type: 'range',\n      min: 0,\n      max: 100,\n      step: 5,\n    },\n    defaultValue: 50,\n    description:\n      'Vertical focal point for video positioning (0 = top, 100 = bottom)',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["sampleVideo","videoMedia","sources","quality","width","height","types","format","uri","adaptiveSources","hasAudio","fps","duration","poster","id","name","alt","loop","muted","autoplay","posterEffect","playbackRate","qualityPolicy","argTypes","fullscreen","control","defaultValue","description","table","type","summary","options","containerWidth","containerHeight","undefined","focalPointX","min","max","step","focalPointY"],"sources":["../../../src/storybook/args.ts"],"sourcesContent":["export const sampleVideo = {\n  videoMedia: {\n    sources: [\n      {\n        quality: '1080p' as const,\n        width: 1920,\n        height: 1080,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '720p' as const,\n        width: 1280,\n        height: 720,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/1080p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '480p' as const,\n        width: 854,\n        height: 480,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/480p/mp4/file.mp4',\n          },\n        ],\n      },\n      {\n        quality: '360p' as const,\n        width: 640,\n        height: 360,\n        types: [\n          {\n            format: 'mp4' as const,\n            uri: 'video/11062b_c1797898279949878ff9bc792dc4a79c/360p/mp4/file.mp4',\n          },\n        ],\n      },\n    ],\n    adaptiveSources: [\n      {\n        format: 'hls' as const,\n        uri: 'site/media/video/11062b_c1797898279949878ff9bc792dc4a79c/da01a1fc-ad34-44bc-90e8-cc9413c466e6/repackage/hls',\n      },\n    ],\n    uri: 'test-meta-id',\n    hasAudio: true,\n    fps: 30,\n    duration: 40,\n    poster: {\n      id: 'video-poster',\n      uri: '11062b_c1797898279949878ff9bc792dc4a79cf000.jpg',\n      width: 1440,\n      height: 2560,\n      name: 'video-poster.jpg',\n      alt: 'alt text',\n    },\n  },\n  loop: true,\n  muted: true,\n  autoplay: true,\n  posterEffect: 'none',\n  playbackRate: 1,\n  qualityPolicy: 'proportional',\n};\n\nexport const argTypes = {\n  fullscreen: {\n    control: 'boolean',\n    defaultValue: false,\n    description:\n      'Toggle fullscreen mode. In fullscreen, the video is centered and contained.',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  qualityPolicy: {\n    control: 'select',\n    options: ['proportional', 'adaptive', 'highest', 'none'],\n    defaultValue: 'proportional',\n    description: 'Quality policy for the video',\n    table: {\n      type: {\n        summary: 'enum',\n      },\n    },\n  },\n  containerWidth: {\n    control: 'number',\n    defaultValue: 500,\n    description: 'Width in pixels of the container element',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  containerHeight: {\n    control: 'number',\n    defaultValue: 275,\n    description: 'Height in pixels of the container element',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  muted: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should be muted',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  loop: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should loop continuously',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  posterEffect: {\n    control: 'select',\n    options: [undefined, 'fade'],\n    defaultValue: undefined,\n    description: 'Effect to apply when transitioning from poster to video',\n    table: {\n      type: {\n        summary: 'string',\n      },\n    },\n  },\n  playbackRate: {\n    control: 'number',\n    defaultValue: 1,\n    description: 'The playback rate of the video',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  autoplay: {\n    control: 'boolean',\n    defaultValue: true,\n    description: 'Whether the video should autoplay',\n    table: {\n      type: {\n        summary: 'boolean',\n      },\n    },\n  },\n  focalPointX: {\n    control: {\n      type: 'range',\n      min: 0,\n      max: 100,\n      step: 5,\n    },\n    defaultValue: 50,\n    description:\n      'Horizontal focal point for video positioning (0 = left, 100 = right)',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n  focalPointY: {\n    control: {\n      type: 'range',\n      min: 0,\n      max: 100,\n      step: 5,\n    },\n    defaultValue: 50,\n    description:\n      'Vertical focal point for video positioning (0 = top, 100 = bottom)',\n    table: {\n      type: {\n        summary: 'number',\n      },\n    },\n  },\n};\n"],"mappings":"AAAA,OAAO,MAAMA,WAAW,GAAG;EACzBC,UAAU,EAAE;IACVC,OAAO,EAAE,CACP;MACEC,OAAO,EAAE,OAAgB;MACzBC,KAAK,EAAE,IAAI;MACXC,MAAM,EAAE,IAAI;MACZC,KAAK,EAAE,CACL;QACEC,MAAM,EAAE,KAAc;QACtBC,GAAG,EAAE;MACP,CAAC;IAEL,CAAC,EACD;MACEL,OAAO,EAAE,MAAe;MACxBC,KAAK,EAAE,IAAI;MACXC,MAAM,EAAE,GAAG;MACXC,KAAK,EAAE,CACL;QACEC,MAAM,EAAE,KAAc;QACtBC,GAAG,EAAE;MACP,CAAC;IAEL,CAAC,EACD;MACEL,OAAO,EAAE,MAAe;MACxBC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,GAAG;MACXC,KAAK,EAAE,CACL;QACEC,MAAM,EAAE,KAAc;QACtBC,GAAG,EAAE;MACP,CAAC;IAEL,CAAC,EACD;MACEL,OAAO,EAAE,MAAe;MACxBC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,GAAG;MACXC,KAAK,EAAE,CACL;QACEC,MAAM,EAAE,KAAc;QACtBC,GAAG,EAAE;MACP,CAAC;IAEL,CAAC,CACF;IACDC,eAAe,EAAE,CACf;MACEF,MAAM,EAAE,KAAc;MACtBC,GAAG,EAAE;IACP,CAAC,CACF;IACDA,GAAG,EAAE,cAAc;IACnBE,QAAQ,EAAE,IAAI;IACdC,GAAG,EAAE,EAAE;IACPC,QAAQ,EAAE,EAAE;IACZC,MAAM,EAAE;MACNC,EAAE,EAAE,cAAc;MAClBN,GAAG,EAAE,iDAAiD;MACtDJ,KAAK,EAAE,IAAI;MACXC,MAAM,EAAE,IAAI;MACZU,IAAI,EAAE,kBAAkB;MACxBC,GAAG,EAAE;IACP;EACF,CAAC;EACDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE,IAAI;EACXC,QAAQ,EAAE,IAAI;EACdC,YAAY,EAAE,MAAM;EACpBC,YAAY,EAAE,CAAC;EACfC,aAAa,EAAE;AACjB,CAAC;AAED,OAAO,MAAMC,QAAQ,GAAG;EACtBC,UAAU,EAAE;IACVC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,KAAK;IACnBC,WAAW,EACT,6EAA6E;IAC/EC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDR,aAAa,EAAE;IACbG,OAAO,EAAE,QAAQ;IACjBM,OAAO,EAAE,CAAC,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC;IACxDL,YAAY,EAAE,cAAc;IAC5BC,WAAW,EAAE,8BAA8B;IAC3CC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDE,cAAc,EAAE;IACdP,OAAO,EAAE,QAAQ;IACjBC,YAAY,EAAE,GAAG;IACjBC,WAAW,EAAE,0CAA0C;IACvDC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDG,eAAe,EAAE;IACfR,OAAO,EAAE,QAAQ;IACjBC,YAAY,EAAE,GAAG;IACjBC,WAAW,EAAE,2CAA2C;IACxDC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDZ,KAAK,EAAE;IACLO,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,IAAI;IAClBC,WAAW,EAAE,mCAAmC;IAChDC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDb,IAAI,EAAE;IACJQ,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,IAAI;IAClBC,WAAW,EAAE,4CAA4C;IACzDC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDV,YAAY,EAAE;IACZK,OAAO,EAAE,QAAQ;IACjBM,OAAO,EAAE,CAACG,SAAS,EAAE,MAAM,CAAC;IAC5BR,YAAY,EAAEQ,SAAS;IACvBP,WAAW,EAAE,yDAAyD;IACtEC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDT,YAAY,EAAE;IACZI,OAAO,EAAE,QAAQ;IACjBC,YAAY,EAAE,CAAC;IACfC,WAAW,EAAE,gCAAgC;IAC7CC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDX,QAAQ,EAAE;IACRM,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,IAAI;IAClBC,WAAW,EAAE,mCAAmC;IAChDC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDK,WAAW,EAAE;IACXV,OAAO,EAAE;MACPI,IAAI,EAAE,OAAO;MACbO,GAAG,EAAE,CAAC;MACNC,GAAG,EAAE,GAAG;MACRC,IAAI,EAAE;IACR,CAAC;IACDZ,YAAY,EAAE,EAAE;IAChBC,WAAW,EACT,sEAAsE;IACxEC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF,CAAC;EACDS,WAAW,EAAE;IACXd,OAAO,EAAE;MACPI,IAAI,EAAE,OAAO;MACbO,GAAG,EAAE,CAAC;MACNC,GAAG,EAAE,GAAG;MACRC,IAAI,EAAE;IACR,CAAC;IACDZ,YAAY,EAAE,EAAE;IAChBC,WAAW,EACT,oEAAoE;IACtEC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,OAAO,EAAE;MACX;IACF;EACF;AACF,CAAC","ignoreList":[]}

package/dist/statics/janet/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="main.f45a6aa8.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="main.3d3bf84f.iframe.bundle.js"></script></body></html>