@wix/legends-platform-sdk 1.28.0 → 1.29.0

package/dist/cjs/components/ChromaKey/ChromaKey.js

@@ -25,19 +25,23 @@ function ChromaKey(props) {
     width,
     height,
     pip,
+    pipFallback,
     onPiPEnter,
     onPiPExit,
     onPiPError,
     ...restVideoProps
   } = children.props;
   const [isPlayable, setIsPlayable] = (0, _react.useState)(false);
+  const [isWebGLAvailable, setIsWebGLAvailable] = (0, _react.useState)(null);
   const $video = (0, _react.useRef)(null);
   const $canvas = (0, _react.useRef)(null);
   const isPiPActive = (0, _jotai.useAtomValue)(_usePictureInPicture.pipActiveAtom);
+  const useVideoFallback = isWebGLAvailable === false;
+  const pipElement = isWebGLAvailable === null ? null : useVideoFallback ? $video.current : $canvas.current;
 
   // Setup PiP - hook handles canvas → video conversion internally
   (0, _usePictureInPicture.usePictureInPictureAuto)({
-    element: pip && isPlayable ? $canvas.current : null,
+    element: pip && isPlayable ? pipElement : null,
     onEnter: onPiPEnter,
     onExit: onPiPExit,
     onError: onPiPError
@@ -55,6 +59,10 @@ function ChromaKey(props) {
       smoothness,
       background
     });
+    setIsWebGLAvailable(process !== null);
+    if (!process) {
+      return;
+    }
     debug && console.log('Chroma key initialized', $video.current, $canvas.current, {
       color,
       spill,
@@ -87,7 +95,7 @@ function ChromaKey(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 112,
+      lineNumber: 128,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("canvas", {
@@ -95,7 +103,7 @@ function ChromaKey(props) {
     style: {
       width: '100%',
       height: '100%',
-      display: showPipFallback ? 'none' : 'block',
+      display: useVideoFallback || showPipFallback ? 'none' : 'block',
       ...(isPlayable ? {} : {
         position: 'absolute',
         opacity: 0,
@@ -107,13 +115,24 @@ function ChromaKey(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 120,
+      lineNumber: 136,
       columnNumber: 7
     }
-  }), !isPlayable && fallback, /*#__PURE__*/_react.default.cloneElement(children, {
+  }), !isPlayable && fallback, showPipFallback && pipFallback, /*#__PURE__*/_react.default.cloneElement(children, {
     ...restVideoProps,
+    // cloneElement retains original props; only ChromaKey should own PiP.
+    pip: false,
+    pipFallback: undefined,
+    onPiPEnter: undefined,
+    onPiPExit: undefined,
+    onPiPError: undefined,
     ref: $video,
-    style: {
+    style: useVideoFallback ? {
+      width: '100%',
+      height: '100%',
+      ...style,
+      display: isPlayable && !showPipFallback ? style == null ? void 0 : style.display : 'none'
+    } : {
       display: 'none'
     },
     onCanPlay: checkPlayable,

package/dist/cjs/components/ChromaKey/ChromaKey.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_chromaKey","_usePictureInPicture","_jotai","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChromaKey","props","debug","children","color","spill","smoothness","similarity","fallback","background","className","style","width","height","pip","onPiPEnter","onPiPExit","onPiPError","restVideoProps","isPlayable","setIsPlayable","useState","$video","useRef","$canvas","isPiPActive","useAtomValue","pipActiveAtom","usePictureInPictureAuto","element","current","onEnter","onExit","onError","showPipFallback","useEffect","console","warn","process","chromaKey","log","rafId","isActive","loop","requestAnimationFrame","cancelAnimationFrame","createElement","__self","__source","fileName","lineNumber","columnNumber","ref","display","position","opacity","pointerEvents","visibility","zIndex","React","cloneElement","onCanPlay","checkPlayable","onLoadedMetadata","event","readyState","currentTarget","HTMLMediaElement","HAVE_FUTURE_DATA"],"sources":["../../../../src/components/ChromaKey/ChromaKey.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { chromaKey } from './chroma-key';\nimport {\n  pipActiveAtom,\n  usePictureInPictureAuto,\n} from '../../hooks/usePictureInPicture';\nimport { useAtomValue } from 'jotai';\n\ninterface ChromaKeyProps extends React.HTMLAttributes<HTMLCanvasElement> {\n  debug?: boolean;\n  color?: string;\n  spill?: number;\n  similarity?: number;\n  smoothness?: number;\n  fallback?: React.ReactNode;\n  background?: string | null;\n  children: React.ReactElement<\n    React.VideoHTMLAttributes<HTMLVideoElement> & {\n      ref?: React.Ref<HTMLVideoElement>;\n      pip?: boolean;\n      onPiPEnter?: () => void;\n      onPiPExit?: () => void;\n      onPiPError?: (error: Error) => void;\n    }\n  >;\n}\n\nexport function ChromaKey(props: ChromaKeyProps) {\n  const {\n    debug = false,\n    children,\n    color = '#03ff9c',\n    spill = 0.1,\n    smoothness = 0.15,\n    similarity = 0.3,\n    fallback,\n    background,\n  } = props;\n\n  const {\n    className,\n    style,\n    width,\n    height,\n    pip,\n    onPiPEnter,\n    onPiPExit,\n    onPiPError,\n    ...restVideoProps\n  } = children.props;\n  const [isPlayable, setIsPlayable] = useState(false);\n\n  const $video = useRef<HTMLVideoElement>(null);\n  const $canvas = useRef<HTMLCanvasElement>(null);\n  const isPiPActive = useAtomValue(pipActiveAtom);\n\n  // Setup PiP - hook handles canvas → video conversion internally\n  usePictureInPictureAuto({\n    element: pip && isPlayable ? $canvas.current : null,\n    onEnter: onPiPEnter,\n    onExit: onPiPExit,\n    onError: onPiPError,\n  });\n\n  const showPipFallback = pip && isPiPActive;\n\n  useEffect(() => {\n    if (!$video.current || !$canvas.current || !isPlayable) {\n      debug && console.warn('Video or canvas is not initialized');\n\n      return;\n    }\n\n    const process = chromaKey($video.current, $canvas.current, {\n      color,\n      spill,\n      similarity,\n      smoothness,\n      background,\n    });\n\n    debug &&\n      console.log('Chroma key initialized', $video.current, $canvas.current, {\n        color,\n        spill,\n        similarity,\n        smoothness,\n      });\n\n    let rafId: number;\n    let isActive = true;\n\n    function loop() {\n      if (!isActive) {\n        return;\n      }\n      process?.();\n      rafId = requestAnimationFrame(loop);\n    }\n\n    rafId = requestAnimationFrame(loop);\n\n    return () => {\n      debug && console.log('Chroma key process cleanup');\n      isActive = false;\n      cancelAnimationFrame(rafId);\n    };\n  }, [color, spill, similarity, smoothness, isPlayable, debug, background]);\n\n  return (\n    <div\n      className={className}\n      style={{\n        ...style,\n        width,\n        height,\n      }}\n    >\n      <canvas\n        ref={$canvas}\n        style={{\n          width: '100%',\n          height: '100%',\n          display: showPipFallback ? 'none' : 'block',\n          ...(isPlayable\n            ? {}\n            : {\n                position: 'absolute',\n                opacity: 0,\n                pointerEvents: 'none',\n                visibility: 'hidden',\n                zIndex: -1,\n              }),\n        }}\n      />\n      {!isPlayable && fallback}\n\n      {React.cloneElement(children, {\n        ...restVideoProps,\n        ref: $video,\n        style: { display: 'none' },\n        onCanPlay: checkPlayable,\n        onLoadedMetadata: checkPlayable,\n      })}\n    </div>\n  );\n\n  function checkPlayable(event: React.SyntheticEvent<HTMLVideoElement>) {\n    const readyState = event.currentTarget.readyState;\n\n    setIsPlayable(readyState >= HTMLMediaElement.HAVE_FUTURE_DATA);\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_chromaKey","_usePictureInPicture","_jotai","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChromaKey","props","debug","children","color","spill","smoothness","similarity","fallback","background","className","style","width","height","pip","pipFallback","onPiPEnter","onPiPExit","onPiPError","restVideoProps","isPlayable","setIsPlayable","useState","isWebGLAvailable","setIsWebGLAvailable","$video","useRef","$canvas","isPiPActive","useAtomValue","pipActiveAtom","useVideoFallback","pipElement","current","usePictureInPictureAuto","element","onEnter","onExit","onError","showPipFallback","useEffect","console","warn","process","chromaKey","log","rafId","isActive","loop","requestAnimationFrame","cancelAnimationFrame","createElement","__self","__source","fileName","lineNumber","columnNumber","ref","display","position","opacity","pointerEvents","visibility","zIndex","React","cloneElement","undefined","onCanPlay","checkPlayable","onLoadedMetadata","event","readyState","currentTarget","HTMLMediaElement","HAVE_FUTURE_DATA"],"sources":["../../../../src/components/ChromaKey/ChromaKey.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { chromaKey } from './chroma-key';\nimport {\n  pipActiveAtom,\n  usePictureInPictureAuto,\n} from '../../hooks/usePictureInPicture';\nimport { useAtomValue } from 'jotai';\n\ninterface ChromaKeyProps extends React.HTMLAttributes<HTMLCanvasElement> {\n  debug?: boolean;\n  color?: string;\n  spill?: number;\n  similarity?: number;\n  smoothness?: number;\n  fallback?: React.ReactNode;\n  background?: string | null;\n  children: React.ReactElement<\n    React.VideoHTMLAttributes<HTMLVideoElement> & {\n      ref?: React.Ref<HTMLVideoElement>;\n      pip?: boolean;\n      pipFallback?: React.ReactNode;\n      onPiPEnter?: () => void;\n      onPiPExit?: () => void;\n      onPiPError?: (error: Error) => void;\n    }\n  >;\n}\n\nexport function ChromaKey(props: ChromaKeyProps) {\n  const {\n    debug = false,\n    children,\n    color = '#03ff9c',\n    spill = 0.1,\n    smoothness = 0.15,\n    similarity = 0.3,\n    fallback,\n    background,\n  } = props;\n\n  const {\n    className,\n    style,\n    width,\n    height,\n    pip,\n    pipFallback,\n    onPiPEnter,\n    onPiPExit,\n    onPiPError,\n    ...restVideoProps\n  } = children.props;\n  const [isPlayable, setIsPlayable] = useState(false);\n  const [isWebGLAvailable, setIsWebGLAvailable] = useState<boolean | null>(\n    null,\n  );\n\n  const $video = useRef<HTMLVideoElement>(null);\n  const $canvas = useRef<HTMLCanvasElement>(null);\n  const isPiPActive = useAtomValue(pipActiveAtom);\n  const useVideoFallback = isWebGLAvailable === false;\n  const pipElement =\n    isWebGLAvailable === null\n      ? null\n      : useVideoFallback\n      ? $video.current\n      : $canvas.current;\n\n  // Setup PiP - hook handles canvas → video conversion internally\n  usePictureInPictureAuto({\n    element: pip && isPlayable ? pipElement : null,\n    onEnter: onPiPEnter,\n    onExit: onPiPExit,\n    onError: onPiPError,\n  });\n\n  const showPipFallback = pip && isPiPActive;\n\n  useEffect(() => {\n    if (!$video.current || !$canvas.current || !isPlayable) {\n      debug && console.warn('Video or canvas is not initialized');\n\n      return;\n    }\n\n    const process = chromaKey($video.current, $canvas.current, {\n      color,\n      spill,\n      similarity,\n      smoothness,\n      background,\n    });\n    setIsWebGLAvailable(process !== null);\n    if (!process) {\n      return;\n    }\n\n    debug &&\n      console.log('Chroma key initialized', $video.current, $canvas.current, {\n        color,\n        spill,\n        similarity,\n        smoothness,\n      });\n\n    let rafId: number;\n    let isActive = true;\n\n    function loop() {\n      if (!isActive) {\n        return;\n      }\n      process?.();\n      rafId = requestAnimationFrame(loop);\n    }\n\n    rafId = requestAnimationFrame(loop);\n\n    return () => {\n      debug && console.log('Chroma key process cleanup');\n      isActive = false;\n      cancelAnimationFrame(rafId);\n    };\n  }, [color, spill, similarity, smoothness, isPlayable, debug, background]);\n\n  return (\n    <div\n      className={className}\n      style={{\n        ...style,\n        width,\n        height,\n      }}\n    >\n      <canvas\n        ref={$canvas}\n        style={{\n          width: '100%',\n          height: '100%',\n          display: useVideoFallback || showPipFallback ? 'none' : 'block',\n          ...(isPlayable\n            ? {}\n            : {\n                position: 'absolute',\n                opacity: 0,\n                pointerEvents: 'none',\n                visibility: 'hidden',\n                zIndex: -1,\n              }),\n        }}\n      />\n      {!isPlayable && fallback}\n      {showPipFallback && pipFallback}\n\n      {React.cloneElement(children, {\n        ...restVideoProps,\n        // cloneElement retains original props; only ChromaKey should own PiP.\n        pip: false,\n        pipFallback: undefined,\n        onPiPEnter: undefined,\n        onPiPExit: undefined,\n        onPiPError: undefined,\n        ref: $video,\n        style: useVideoFallback\n          ? {\n              width: '100%',\n              height: '100%',\n              ...style,\n              display: isPlayable && !showPipFallback ? style?.display : 'none',\n            }\n          : { display: 'none' },\n        onCanPlay: checkPlayable,\n        onLoadedMetadata: checkPlayable,\n      })}\n    </div>\n  );\n\n  function checkPlayable(event: React.SyntheticEvent<HTMLVideoElement>) {\n    const readyState = event.currentTarget.readyState;\n\n    setIsPlayable(readyState >= HTMLMediaElement.HAVE_FUTURE_DATA);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/ChromaKey/chroma-key.js

@@ -12,7 +12,9 @@ function chromaKey($video, $canvas, options) {
     premultipliedAlpha: false,
     preserveDrawingBuffer: true
   });
-  (0, _invariant.default)(gl, 'WebGL context is not initialized');
+  if (!gl) {
+    return null;
+  }
   const BUFFER = gl.createBuffer();
   const TEXTURE = gl.createTexture();
   const program = gl.createProgram();

package/dist/cjs/components/ChromaKey/chroma-key.js.map

@@ -1 +1 @@
-{"version":3,"names":["_invariant","_interopRequireDefault","require","shaders","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","chromaKey","$video","$canvas","options","gl","getContext","alpha","premultipliedAlpha","preserveDrawingBuffer","invariant","BUFFER","createBuffer","TEXTURE","createTexture","program","createProgram","_VS_","createShader","VERTEX_SHADER","_FS_","FRAGMENT_SHADER","shaderSource","VertexAlign","ChromaKey","compileShader","getShaderParameter","COMPILE_STATUS","console","error","getShaderInfoLog","attachShader","linkProgram","useProgram","bindTexture","TEXTURE_2D","bindBuffer","ARRAY_BUFFER","bufferData","Float32Array","STATIC_DRAW","texParameteri","TEXTURE_MIN_FILTER","LINEAR","TEXTURE_WRAP_S","CLAMP_TO_EDGE","TEXTURE_WRAP_T","$coords$","getAttribLocation","$texture$","getUniformLocation","$width$","$height$","$color$","$similarity$","$smoothness$","$spill$","vertexAttribPointer","FLOAT","enableVertexAttribArray","activeTexture","TEXTURE0","enable","BLEND","blendFunc","SRC_ALPHA","ONE_MINUS_SRC_ALPHA","process","color","spill","similarity","smoothness","background","videoWidth","videoHeight","width","window","devicePixelRatio","height","viewport","parseInt","substring","g","b","clearColor","clear","COLOR_BUFFER_BIT","uniform1i","uniform1f","uniform3f","substr","texImage2D","RGB","UNSIGNED_BYTE","drawArrays","TRIANGLE_FAN"],"sources":["../../../../src/components/ChromaKey/chroma-key.ts"],"sourcesContent":["import invariant from 'invariant';\n\nimport * as shaders from './shaders';\n\nexport type ProcessCallback = () => void;\n\nexport function chromaKey(\n  $video: HTMLVideoElement,\n  $canvas: HTMLCanvasElement,\n  options: {\n    color: string;\n    spill: number;\n    similarity: number;\n    smoothness: number;\n    background?: string | null;\n  },\n): ProcessCallback {\n  const gl = $canvas.getContext('webgl', {\n    alpha: true,\n    premultipliedAlpha: false,\n    preserveDrawingBuffer: true,\n  });\n\n  invariant(gl, 'WebGL context is not initialized');\n\n  const BUFFER = gl.createBuffer();\n  const TEXTURE = gl.createTexture();\n  const program = gl.createProgram();\n  const _VS_ = gl.createShader(gl.VERTEX_SHADER);\n  const _FS_ = gl.createShader(gl.FRAGMENT_SHADER);\n\n  invariant(program, 'Program is not initialized');\n  invariant(_VS_, 'Vertex shader is not initialized');\n  invariant(_FS_, 'Fragment shader is not initialized');\n\n  gl.shaderSource(_VS_, shaders.VertexAlign);\n  gl.shaderSource(_FS_, shaders.ChromaKey);\n\n  gl.compileShader(_VS_);\n  gl.compileShader(_FS_);\n\n  if (!gl.getShaderParameter(_FS_, gl.COMPILE_STATUS)) {\n    console.error(\n      'Fragment shader compilation failed',\n      gl.getShaderInfoLog(_FS_),\n    );\n  }\n\n  gl.attachShader(program, _VS_);\n  gl.attachShader(program, _FS_);\n\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  gl.bindTexture(gl.TEXTURE_2D, TEXTURE);\n  gl.bindBuffer(gl.ARRAY_BUFFER, BUFFER);\n\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW,\n  );\n\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n\n  const $coords$ = gl.getAttribLocation(program, 'coords');\n  const $texture$ = gl.getUniformLocation(program, 'tex');\n  const $width$ = gl.getUniformLocation(program, 'texWidth');\n  const $height$ = gl.getUniformLocation(program, 'texHeight');\n  const $color$ = gl.getUniformLocation(program, 'keyColor');\n  const $similarity$ = gl.getUniformLocation(program, 'similarity');\n  const $smoothness$ = gl.getUniformLocation(program, 'smoothness');\n  const $spill$ = gl.getUniformLocation(program, 'spill');\n\n  gl.vertexAttribPointer($coords$, 2, gl.FLOAT, false, 0, 0);\n  gl.enableVertexAttribArray($coords$);\n\n  gl.activeTexture(gl.TEXTURE0);\n\n  // Enable blending for transparency (critical for Safari)\n  gl.enable(gl.BLEND);\n  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\n\n  return function process() {\n    const { color, spill, similarity, smoothness, background } = options;\n\n    // Use video dimensions directly instead of metadata (for Safari compatibility)\n    const videoWidth = $video.videoWidth;\n    const videoHeight = $video.videoHeight;\n\n    if (!videoWidth || !videoHeight) {\n      return; // Video not ready yet\n    }\n\n    const width = videoWidth * window.devicePixelRatio;\n    const height = videoHeight * window.devicePixelRatio;\n\n    $canvas.width = width;\n    $canvas.height = height;\n\n    gl.viewport(0, 0, width, height);\n\n    // Clear with background color or transparent\n    if (background) {\n      const r = parseInt(background.substring(1, 3), 16) / 255;\n      const g = parseInt(background.substring(3, 5), 16) / 255;\n      const b = parseInt(background.substring(5, 7), 16) / 255;\n      gl.clearColor(r, g, b, 1);\n    } else {\n      gl.clearColor(0, 0, 0, 0);\n    }\n    gl.clear(gl.COLOR_BUFFER_BIT);\n\n    gl.useProgram(program);\n\n    gl.uniform1i($texture$, 0);\n    gl.uniform1f($width$, width);\n    gl.uniform1f($height$, height);\n    gl.uniform1f($spill$, spill);\n    gl.uniform1f($similarity$, similarity);\n    gl.uniform1f($smoothness$, smoothness);\n    gl.uniform3f(\n      $color$,\n      parseInt(color.substr(1, 2), 16) / 255,\n      parseInt(color.substr(3, 2), 16) / 255,\n      parseInt(color.substr(5, 2), 16) / 255,\n    );\n\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);\n    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_invariant","_interopRequireDefault","require","shaders","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","chromaKey","$video","$canvas","options","gl","getContext","alpha","premultipliedAlpha","preserveDrawingBuffer","BUFFER","createBuffer","TEXTURE","createTexture","program","createProgram","_VS_","createShader","VERTEX_SHADER","_FS_","FRAGMENT_SHADER","invariant","shaderSource","VertexAlign","ChromaKey","compileShader","getShaderParameter","COMPILE_STATUS","console","error","getShaderInfoLog","attachShader","linkProgram","useProgram","bindTexture","TEXTURE_2D","bindBuffer","ARRAY_BUFFER","bufferData","Float32Array","STATIC_DRAW","texParameteri","TEXTURE_MIN_FILTER","LINEAR","TEXTURE_WRAP_S","CLAMP_TO_EDGE","TEXTURE_WRAP_T","$coords$","getAttribLocation","$texture$","getUniformLocation","$width$","$height$","$color$","$similarity$","$smoothness$","$spill$","vertexAttribPointer","FLOAT","enableVertexAttribArray","activeTexture","TEXTURE0","enable","BLEND","blendFunc","SRC_ALPHA","ONE_MINUS_SRC_ALPHA","process","color","spill","similarity","smoothness","background","videoWidth","videoHeight","width","window","devicePixelRatio","height","viewport","parseInt","substring","g","b","clearColor","clear","COLOR_BUFFER_BIT","uniform1i","uniform1f","uniform3f","substr","texImage2D","RGB","UNSIGNED_BYTE","drawArrays","TRIANGLE_FAN"],"sources":["../../../../src/components/ChromaKey/chroma-key.ts"],"sourcesContent":["import invariant from 'invariant';\n\nimport * as shaders from './shaders';\n\nexport type ProcessCallback = () => void;\n\nexport function chromaKey(\n  $video: HTMLVideoElement,\n  $canvas: HTMLCanvasElement,\n  options: {\n    color: string;\n    spill: number;\n    similarity: number;\n    smoothness: number;\n    background?: string | null;\n  },\n): ProcessCallback | null {\n  const gl = $canvas.getContext('webgl', {\n    alpha: true,\n    premultipliedAlpha: false,\n    preserveDrawingBuffer: true,\n  });\n\n  if (!gl) {\n    return null;\n  }\n\n  const BUFFER = gl.createBuffer();\n  const TEXTURE = gl.createTexture();\n  const program = gl.createProgram();\n  const _VS_ = gl.createShader(gl.VERTEX_SHADER);\n  const _FS_ = gl.createShader(gl.FRAGMENT_SHADER);\n\n  invariant(program, 'Program is not initialized');\n  invariant(_VS_, 'Vertex shader is not initialized');\n  invariant(_FS_, 'Fragment shader is not initialized');\n\n  gl.shaderSource(_VS_, shaders.VertexAlign);\n  gl.shaderSource(_FS_, shaders.ChromaKey);\n\n  gl.compileShader(_VS_);\n  gl.compileShader(_FS_);\n\n  if (!gl.getShaderParameter(_FS_, gl.COMPILE_STATUS)) {\n    console.error(\n      'Fragment shader compilation failed',\n      gl.getShaderInfoLog(_FS_),\n    );\n  }\n\n  gl.attachShader(program, _VS_);\n  gl.attachShader(program, _FS_);\n\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  gl.bindTexture(gl.TEXTURE_2D, TEXTURE);\n  gl.bindBuffer(gl.ARRAY_BUFFER, BUFFER);\n\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW,\n  );\n\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n\n  const $coords$ = gl.getAttribLocation(program, 'coords');\n  const $texture$ = gl.getUniformLocation(program, 'tex');\n  const $width$ = gl.getUniformLocation(program, 'texWidth');\n  const $height$ = gl.getUniformLocation(program, 'texHeight');\n  const $color$ = gl.getUniformLocation(program, 'keyColor');\n  const $similarity$ = gl.getUniformLocation(program, 'similarity');\n  const $smoothness$ = gl.getUniformLocation(program, 'smoothness');\n  const $spill$ = gl.getUniformLocation(program, 'spill');\n\n  gl.vertexAttribPointer($coords$, 2, gl.FLOAT, false, 0, 0);\n  gl.enableVertexAttribArray($coords$);\n\n  gl.activeTexture(gl.TEXTURE0);\n\n  // Enable blending for transparency (critical for Safari)\n  gl.enable(gl.BLEND);\n  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\n\n  return function process() {\n    const { color, spill, similarity, smoothness, background } = options;\n\n    // Use video dimensions directly instead of metadata (for Safari compatibility)\n    const videoWidth = $video.videoWidth;\n    const videoHeight = $video.videoHeight;\n\n    if (!videoWidth || !videoHeight) {\n      return; // Video not ready yet\n    }\n\n    const width = videoWidth * window.devicePixelRatio;\n    const height = videoHeight * window.devicePixelRatio;\n\n    $canvas.width = width;\n    $canvas.height = height;\n\n    gl.viewport(0, 0, width, height);\n\n    // Clear with background color or transparent\n    if (background) {\n      const r = parseInt(background.substring(1, 3), 16) / 255;\n      const g = parseInt(background.substring(3, 5), 16) / 255;\n      const b = parseInt(background.substring(5, 7), 16) / 255;\n      gl.clearColor(r, g, b, 1);\n    } else {\n      gl.clearColor(0, 0, 0, 0);\n    }\n    gl.clear(gl.COLOR_BUFFER_BIT);\n\n    gl.useProgram(program);\n\n    gl.uniform1i($texture$, 0);\n    gl.uniform1f($width$, width);\n    gl.uniform1f($height$, height);\n    gl.uniform1f($spill$, spill);\n    gl.uniform1f($similarity$, similarity);\n    gl.uniform1f($smoothness$, smoothness);\n    gl.uniform3f(\n      $color$,\n      parseInt(color.substr(1, 2), 16) / 255,\n      parseInt(color.substr(3, 2), 16) / 255,\n      parseInt(color.substr(5, 2), 16) / 255,\n    );\n\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);\n    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/hooks/usePictureInPicture/usePictureInPictureAuto.js

@@ -19,6 +19,7 @@ function usePictureInPictureAuto(options) {
   const setIsActive = (0, _jotai.useSetAtom)(_state.pipActiveAtom);
   const isSupported = (0, _jotai.useAtomValue)(_state.pipSupportedAtom);
   const canvasVideoRef = (0, _react.useRef)(null);
+  const ownsPiPVideo = !!element && isSupported && pipVideo === (canvasVideoRef.current ?? element);
   const callbacksRef = (0, _reactUse.useLatest)({
     onEnter,
     onExit,
@@ -26,7 +27,6 @@ function usePictureInPictureAuto(options) {
   });
   (0, _react.useEffect)(() => {
     if (!element || !isSupported) {
-      setPipVideo(null);
       return;
     }
     let video;
@@ -43,11 +43,11 @@ function usePictureInPictureAuto(options) {
         destroyCanvasVideo(canvasVideoRef.current);
         canvasVideoRef.current = null;
       }
-      setPipVideo(null);
+      setPipVideo(current => current === video ? null : current);
     };
   }, [element, isSupported, setPipVideo]);
   (0, _react.useEffect)(() => {
-    if (!pipVideo) {
+    if (!pipVideo || !ownsPiPVideo) {
       return;
     }
     const handleEnter = () => {
@@ -64,9 +64,9 @@ function usePictureInPictureAuto(options) {
       pipVideo.removeEventListener('enterpictureinpicture', handleEnter);
       pipVideo.removeEventListener('leavepictureinpicture', handleLeave);
     };
-  }, [pipVideo, setIsActive]);
+  }, [pipVideo, ownsPiPVideo, setIsActive]);
   (0, _react.useEffect)(() => {
-    if (!pipVideo || !isSupported) {
+    if (!pipVideo || !ownsPiPVideo) {
       return;
     }
     try {
@@ -86,17 +86,18 @@ function usePictureInPictureAuto(options) {
         navigator.mediaSession.setActionHandler('enterpictureinpicture', null);
       } catch {}
     };
-  }, [pipVideo, isSupported]);
+  }, [pipVideo, ownsPiPVideo]);
   (0, _react.useEffect)(() => {
-    if (!element) {
+    if (!element || !isSupported) {
       return;
     }
+    const ownedVideo = canvasVideoRef.current ?? element;
     return () => {
-      if (document.pictureInPictureElement) {
+      if (document.pictureInPictureElement === ownedVideo) {
         document.exitPictureInPicture().catch(() => {});
       }
     };
-  }, [element]);
+  }, [element, isSupported]);
 }
 function createVideoFromCanvas(canvas) {
   const video = document.createElement('video');

package/dist/cjs/hooks/usePictureInPicture/usePictureInPictureAuto.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactUse","_jotai","_state","usePictureInPictureAuto","options","element","onEnter","onExit","onError","pipVideo","setPipVideo","useAtom","pipVideoAtom","setIsActive","useSetAtom","pipActiveAtom","isSupported","useAtomValue","pipSupportedAtom","canvasVideoRef","useRef","callbacksRef","useLatest","useEffect","video","HTMLCanvasElement","createVideoFromCanvas","current","setAttribute","destroyCanvasVideo","handleEnter","handleLeave","addEventListener","removeEventListener","navigator","mediaSession","setActionHandler","paused","srcObject","play","requestPictureInPicture","error","document","pictureInPictureElement","exitPictureInPicture","catch","canvas","createElement","muted","playsInline","autoplay","captureStream","stream","getTracks","forEach","track","stop"],"sources":["../../../../src/hooks/usePictureInPicture/usePictureInPictureAuto.ts"],"sourcesContent":["/* eslint-disable no-undef */\nimport { useEffect, useRef } from 'react';\nimport { useLatest } from 'react-use';\nimport { useAtom, useAtomValue, useSetAtom } from 'jotai';\n\nimport { pipVideoAtom, pipActiveAtom, pipSupportedAtom } from './state';\nimport type { UsePictureInPictureAutoOptions } from './types';\n\nexport function usePictureInPictureAuto(\n  options: UsePictureInPictureAutoOptions,\n) {\n  const { element, onEnter, onExit, onError } = options;\n\n  const [pipVideo, setPipVideo] = useAtom(pipVideoAtom);\n  const setIsActive = useSetAtom(pipActiveAtom);\n  const isSupported = useAtomValue(pipSupportedAtom);\n\n  const canvasVideoRef = useRef<HTMLVideoElement | null>(null);\n\n  const callbacksRef = useLatest({ onEnter, onExit, onError });\n\n  useEffect(() => {\n    if (!element || !isSupported) {\n      setPipVideo(null);\n      return;\n    }\n\n    let video: HTMLVideoElement;\n\n    if (element instanceof HTMLCanvasElement) {\n      video = createVideoFromCanvas(element);\n      canvasVideoRef.current = video;\n    } else {\n      video = element;\n    }\n\n    video.setAttribute('autopictureinpicture', 'true');\n    setPipVideo(video);\n\n    return () => {\n      if (canvasVideoRef.current) {\n        destroyCanvasVideo(canvasVideoRef.current);\n        canvasVideoRef.current = null;\n      }\n      setPipVideo(null);\n    };\n  }, [element, isSupported, setPipVideo]);\n\n  useEffect(() => {\n    if (!pipVideo) {\n      return;\n    }\n\n    const handleEnter = () => {\n      setIsActive(true);\n      callbacksRef.current.onEnter?.();\n    };\n\n    const handleLeave = () => {\n      setIsActive(false);\n      callbacksRef.current.onExit?.();\n    };\n\n    pipVideo.addEventListener('enterpictureinpicture', handleEnter);\n    pipVideo.addEventListener('leavepictureinpicture', handleLeave);\n\n    return () => {\n      pipVideo.removeEventListener('enterpictureinpicture', handleEnter);\n      pipVideo.removeEventListener('leavepictureinpicture', handleLeave);\n    };\n  }, [pipVideo, setIsActive]);\n\n  useEffect(() => {\n    if (!pipVideo || !isSupported) {\n      return;\n    }\n\n    try {\n      navigator.mediaSession.setActionHandler(\n        'enterpictureinpicture' as MediaSessionAction,\n        async () => {\n          try {\n            if (pipVideo.paused && pipVideo.srcObject) {\n              await pipVideo.play();\n            }\n            await pipVideo.requestPictureInPicture();\n          } catch (error) {\n            callbacksRef.current.onError?.(error as Error);\n          }\n        },\n      );\n    } catch {}\n\n    return () => {\n      try {\n        navigator.mediaSession.setActionHandler(\n          'enterpictureinpicture' as MediaSessionAction,\n          null,\n        );\n      } catch {}\n    };\n  }, [pipVideo, isSupported]);\n\n  useEffect(() => {\n    if (!element) {\n      return;\n    }\n\n    return () => {\n      if (document.pictureInPictureElement) {\n        document.exitPictureInPicture().catch(() => {});\n      }\n    };\n  }, [element]);\n}\n\nfunction createVideoFromCanvas(canvas: HTMLCanvasElement): HTMLVideoElement {\n  const video = document.createElement('video');\n  video.muted = true;\n  video.playsInline = true;\n  video.autoplay = true;\n  video.srcObject = canvas.captureStream(30);\n  return video;\n}\n\nfunction destroyCanvasVideo(video: HTMLVideoElement) {\n  if (video.srcObject) {\n    const stream = video.srcObject as MediaStream;\n    stream.getTracks().forEach((track) => track.stop());\n    video.srcObject = null;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactUse","_jotai","_state","usePictureInPictureAuto","options","element","onEnter","onExit","onError","pipVideo","setPipVideo","useAtom","pipVideoAtom","setIsActive","useSetAtom","pipActiveAtom","isSupported","useAtomValue","pipSupportedAtom","canvasVideoRef","useRef","ownsPiPVideo","current","callbacksRef","useLatest","useEffect","video","HTMLCanvasElement","createVideoFromCanvas","setAttribute","destroyCanvasVideo","handleEnter","handleLeave","addEventListener","removeEventListener","navigator","mediaSession","setActionHandler","paused","srcObject","play","requestPictureInPicture","error","ownedVideo","document","pictureInPictureElement","exitPictureInPicture","catch","canvas","createElement","muted","playsInline","autoplay","captureStream","stream","getTracks","forEach","track","stop"],"sources":["../../../../src/hooks/usePictureInPicture/usePictureInPictureAuto.ts"],"sourcesContent":["/* eslint-disable no-undef */\nimport { useEffect, useRef } from 'react';\nimport { useLatest } from 'react-use';\nimport { useAtom, useAtomValue, useSetAtom } from 'jotai';\n\nimport { pipVideoAtom, pipActiveAtom, pipSupportedAtom } from './state';\nimport type { UsePictureInPictureAutoOptions } from './types';\n\nexport function usePictureInPictureAuto(\n  options: UsePictureInPictureAutoOptions,\n) {\n  const { element, onEnter, onExit, onError } = options;\n\n  const [pipVideo, setPipVideo] = useAtom(pipVideoAtom);\n  const setIsActive = useSetAtom(pipActiveAtom);\n  const isSupported = useAtomValue(pipSupportedAtom);\n\n  const canvasVideoRef = useRef<HTMLVideoElement | null>(null);\n  const ownsPiPVideo =\n    !!element &&\n    isSupported &&\n    pipVideo === (canvasVideoRef.current ?? element);\n\n  const callbacksRef = useLatest({ onEnter, onExit, onError });\n\n  useEffect(() => {\n    if (!element || !isSupported) {\n      return;\n    }\n\n    let video: HTMLVideoElement;\n\n    if (element instanceof HTMLCanvasElement) {\n      video = createVideoFromCanvas(element);\n      canvasVideoRef.current = video;\n    } else {\n      video = element;\n    }\n\n    video.setAttribute('autopictureinpicture', 'true');\n    setPipVideo(video);\n\n    return () => {\n      if (canvasVideoRef.current) {\n        destroyCanvasVideo(canvasVideoRef.current);\n        canvasVideoRef.current = null;\n      }\n      setPipVideo((current) => (current === video ? null : current));\n    };\n  }, [element, isSupported, setPipVideo]);\n\n  useEffect(() => {\n    if (!pipVideo || !ownsPiPVideo) {\n      return;\n    }\n\n    const handleEnter = () => {\n      setIsActive(true);\n      callbacksRef.current.onEnter?.();\n    };\n\n    const handleLeave = () => {\n      setIsActive(false);\n      callbacksRef.current.onExit?.();\n    };\n\n    pipVideo.addEventListener('enterpictureinpicture', handleEnter);\n    pipVideo.addEventListener('leavepictureinpicture', handleLeave);\n\n    return () => {\n      pipVideo.removeEventListener('enterpictureinpicture', handleEnter);\n      pipVideo.removeEventListener('leavepictureinpicture', handleLeave);\n    };\n  }, [pipVideo, ownsPiPVideo, setIsActive]);\n\n  useEffect(() => {\n    if (!pipVideo || !ownsPiPVideo) {\n      return;\n    }\n\n    try {\n      navigator.mediaSession.setActionHandler(\n        'enterpictureinpicture' as MediaSessionAction,\n        async () => {\n          try {\n            if (pipVideo.paused && pipVideo.srcObject) {\n              await pipVideo.play();\n            }\n            await pipVideo.requestPictureInPicture();\n          } catch (error) {\n            callbacksRef.current.onError?.(error as Error);\n          }\n        },\n      );\n    } catch {}\n\n    return () => {\n      try {\n        navigator.mediaSession.setActionHandler(\n          'enterpictureinpicture' as MediaSessionAction,\n          null,\n        );\n      } catch {}\n    };\n  }, [pipVideo, ownsPiPVideo]);\n\n  useEffect(() => {\n    if (!element || !isSupported) {\n      return;\n    }\n    const ownedVideo = canvasVideoRef.current ?? element;\n\n    return () => {\n      if (document.pictureInPictureElement === ownedVideo) {\n        document.exitPictureInPicture().catch(() => {});\n      }\n    };\n  }, [element, isSupported]);\n}\n\nfunction createVideoFromCanvas(canvas: HTMLCanvasElement): HTMLVideoElement {\n  const video = document.createElement('video');\n  video.muted = true;\n  video.playsInline = true;\n  video.autoplay = true;\n  video.srcObject = canvas.captureStream(30);\n  return video;\n}\n\nfunction destroyCanvasVideo(video: HTMLVideoElement) {\n  if (video.srcObject) {\n    const stream = video.srcObject as MediaStream;\n    stream.getTracks().forEach((track) => track.stop());\n    video.srcObject = null;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/ChromaKey/ChromaKey.js

@@ -1,5 +1,5 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-const _excluded = ["className", "style", "width", "height", "pip", "onPiPEnter", "onPiPExit", "onPiPError"];
+const _excluded = ["className", "style", "width", "height", "pip", "pipFallback", "onPiPEnter", "onPiPExit", "onPiPError"];
 import React, { useEffect, useRef, useState } from 'react';
 import { chromaKey } from './chroma-key';
 import { pipActiveAtom, usePictureInPictureAuto } from '../../hooks/usePictureInPicture';
@@ -24,6 +24,7 @@ export function ChromaKey(props) {
     width = _children$props.width,
     height = _children$props.height,
     pip = _children$props.pip,
+    pipFallback = _children$props.pipFallback,
     onPiPEnter = _children$props.onPiPEnter,
     onPiPExit = _children$props.onPiPExit,
     onPiPError = _children$props.onPiPError,
@@ -31,13 +32,18 @@ export function ChromaKey(props) {
   const _useState = useState(false),
     isPlayable = _useState[0],
     setIsPlayable = _useState[1];
+  const _useState2 = useState(null),
+    isWebGLAvailable = _useState2[0],
+    setIsWebGLAvailable = _useState2[1];
   const $video = useRef(null);
   const $canvas = useRef(null);
   const isPiPActive = useAtomValue(pipActiveAtom);
+  const useVideoFallback = isWebGLAvailable === false;
+  const pipElement = isWebGLAvailable === null ? null : useVideoFallback ? $video.current : $canvas.current;
 
   // Setup PiP - hook handles canvas → video conversion internally
   usePictureInPictureAuto({
-    element: pip && isPlayable ? $canvas.current : null,
+    element: pip && isPlayable ? pipElement : null,
     onEnter: onPiPEnter,
     onExit: onPiPExit,
     onError: onPiPError
@@ -55,6 +61,10 @@ export function ChromaKey(props) {
       smoothness,
       background
     });
+    setIsWebGLAvailable(process !== null);
+    if (!process) {
+      return;
+    }
     debug && console.log('Chroma key initialized', $video.current, $canvas.current, {
       color,
       spill,
@@ -89,7 +99,7 @@ export function ChromaKey(props) {
     style: {
       width: '100%',
       height: '100%',
-      display: showPipFallback ? 'none' : 'block',
+      display: useVideoFallback || showPipFallback ? 'none' : 'block',
       ...(isPlayable ? {} : {
         position: 'absolute',
         opacity: 0,
@@ -98,10 +108,21 @@ export function ChromaKey(props) {
         zIndex: -1
       })
     }
-  }), !isPlayable && fallback, /*#__PURE__*/React.cloneElement(children, {
+  }), !isPlayable && fallback, showPipFallback && pipFallback, /*#__PURE__*/React.cloneElement(children, {
     ...restVideoProps,
+    // cloneElement retains original props; only ChromaKey should own PiP.
+    pip: false,
+    pipFallback: undefined,
+    onPiPEnter: undefined,
+    onPiPExit: undefined,
+    onPiPError: undefined,
     ref: $video,
-    style: {
+    style: useVideoFallback ? {
+      width: '100%',
+      height: '100%',
+      ...style,
+      display: isPlayable && !showPipFallback ? style == null ? void 0 : style.display : 'none'
+    } : {
       display: 'none'
     },
     onCanPlay: checkPlayable,

package/dist/esm/components/ChromaKey/ChromaKey.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","chromaKey","pipActiveAtom","usePictureInPictureAuto","useAtomValue","ChromaKey","props","_props$debug","debug","children","_props$color","color","_props$spill","spill","_props$smoothness","smoothness","_props$similarity","similarity","fallback","background","_children$props","className","style","width","height","pip","onPiPEnter","onPiPExit","onPiPError","restVideoProps","_objectWithoutPropertiesLoose","_excluded","_useState","isPlayable","setIsPlayable","$video","$canvas","isPiPActive","element","current","onEnter","onExit","onError","showPipFallback","console","warn","process","log","rafId","isActive","loop","requestAnimationFrame","cancelAnimationFrame","createElement","ref","display","position","opacity","pointerEvents","visibility","zIndex","cloneElement","onCanPlay","checkPlayable","onLoadedMetadata","event","readyState","currentTarget","HTMLMediaElement","HAVE_FUTURE_DATA"],"sources":["../../../../src/components/ChromaKey/ChromaKey.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { chromaKey } from './chroma-key';\nimport {\n  pipActiveAtom,\n  usePictureInPictureAuto,\n} from '../../hooks/usePictureInPicture';\nimport { useAtomValue } from 'jotai';\n\ninterface ChromaKeyProps extends React.HTMLAttributes<HTMLCanvasElement> {\n  debug?: boolean;\n  color?: string;\n  spill?: number;\n  similarity?: number;\n  smoothness?: number;\n  fallback?: React.ReactNode;\n  background?: string | null;\n  children: React.ReactElement<\n    React.VideoHTMLAttributes<HTMLVideoElement> & {\n      ref?: React.Ref<HTMLVideoElement>;\n      pip?: boolean;\n      onPiPEnter?: () => void;\n      onPiPExit?: () => void;\n      onPiPError?: (error: Error) => void;\n    }\n  >;\n}\n\nexport function ChromaKey(props: ChromaKeyProps) {\n  const {\n    debug = false,\n    children,\n    color = '#03ff9c',\n    spill = 0.1,\n    smoothness = 0.15,\n    similarity = 0.3,\n    fallback,\n    background,\n  } = props;\n\n  const {\n    className,\n    style,\n    width,\n    height,\n    pip,\n    onPiPEnter,\n    onPiPExit,\n    onPiPError,\n    ...restVideoProps\n  } = children.props;\n  const [isPlayable, setIsPlayable] = useState(false);\n\n  const $video = useRef<HTMLVideoElement>(null);\n  const $canvas = useRef<HTMLCanvasElement>(null);\n  const isPiPActive = useAtomValue(pipActiveAtom);\n\n  // Setup PiP - hook handles canvas → video conversion internally\n  usePictureInPictureAuto({\n    element: pip && isPlayable ? $canvas.current : null,\n    onEnter: onPiPEnter,\n    onExit: onPiPExit,\n    onError: onPiPError,\n  });\n\n  const showPipFallback = pip && isPiPActive;\n\n  useEffect(() => {\n    if (!$video.current || !$canvas.current || !isPlayable) {\n      debug && console.warn('Video or canvas is not initialized');\n\n      return;\n    }\n\n    const process = chromaKey($video.current, $canvas.current, {\n      color,\n      spill,\n      similarity,\n      smoothness,\n      background,\n    });\n\n    debug &&\n      console.log('Chroma key initialized', $video.current, $canvas.current, {\n        color,\n        spill,\n        similarity,\n        smoothness,\n      });\n\n    let rafId: number;\n    let isActive = true;\n\n    function loop() {\n      if (!isActive) {\n        return;\n      }\n      process?.();\n      rafId = requestAnimationFrame(loop);\n    }\n\n    rafId = requestAnimationFrame(loop);\n\n    return () => {\n      debug && console.log('Chroma key process cleanup');\n      isActive = false;\n      cancelAnimationFrame(rafId);\n    };\n  }, [color, spill, similarity, smoothness, isPlayable, debug, background]);\n\n  return (\n    <div\n      className={className}\n      style={{\n        ...style,\n        width,\n        height,\n      }}\n    >\n      <canvas\n        ref={$canvas}\n        style={{\n          width: '100%',\n          height: '100%',\n          display: showPipFallback ? 'none' : 'block',\n          ...(isPlayable\n            ? {}\n            : {\n                position: 'absolute',\n                opacity: 0,\n                pointerEvents: 'none',\n                visibility: 'hidden',\n                zIndex: -1,\n              }),\n        }}\n      />\n      {!isPlayable && fallback}\n\n      {React.cloneElement(children, {\n        ...restVideoProps,\n        ref: $video,\n        style: { display: 'none' },\n        onCanPlay: checkPlayable,\n        onLoadedMetadata: checkPlayable,\n      })}\n    </div>\n  );\n\n  function checkPlayable(event: React.SyntheticEvent<HTMLVideoElement>) {\n    const readyState = event.currentTarget.readyState;\n\n    setIsPlayable(readyState >= HTMLMediaElement.HAVE_FUTURE_DATA);\n  }\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAE1D,SAASC,SAAS,QAAQ,cAAc;AACxC,SACEC,aAAa,EACbC,uBAAuB,QAClB,iCAAiC;AACxC,SAASC,YAAY,QAAQ,OAAO;AAqBpC,OAAO,SAASC,SAASA,CAACC,KAAqB,EAAE;EAC/C,MAAAC,YAAA,GASID,KAAK,CARPE,KAAK;IAALA,KAAK,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACbE,QAAQ,GAONH,KAAK,CAPPG,QAAQ;IAAAC,YAAA,GAONJ,KAAK,CANPK,KAAK;IAALA,KAAK,GAAAD,YAAA,cAAG,SAAS,GAAAA,YAAA;IAAAE,YAAA,GAMfN,KAAK,CALPO,KAAK;IAALA,KAAK,GAAAD,YAAA,cAAG,GAAG,GAAAA,YAAA;IAAAE,iBAAA,GAKTR,KAAK,CAJPS,UAAU;IAAVA,UAAU,GAAAD,iBAAA,cAAG,IAAI,GAAAA,iBAAA;IAAAE,iBAAA,GAIfV,KAAK,CAHPW,UAAU;IAAVA,UAAU,GAAAD,iBAAA,cAAG,GAAG,GAAAA,iBAAA;IAChBE,QAAQ,GAENZ,KAAK,CAFPY,QAAQ;IACRC,UAAU,GACRb,KAAK,CADPa,UAAU;EAGZ,MAAAC,eAAA,GAUIX,QAAQ,CAACH,KAAK;IAThBe,SAAS,GAAAD,eAAA,CAATC,SAAS;IACTC,KAAK,GAAAF,eAAA,CAALE,KAAK;IACLC,KAAK,GAAAH,eAAA,CAALG,KAAK;IACLC,MAAM,GAAAJ,eAAA,CAANI,MAAM;IACNC,GAAG,GAAAL,eAAA,CAAHK,GAAG;IACHC,UAAU,GAAAN,eAAA,CAAVM,UAAU;IACVC,SAAS,GAAAP,eAAA,CAATO,SAAS;IACTC,UAAU,GAAAR,eAAA,CAAVQ,UAAU;IACPC,cAAc,GAAAC,6BAAA,CAAAV,eAAA,EAAAW,SAAA;EAEnB,MAAAC,SAAA,GAAoChC,QAAQ,CAAC,KAAK,CAAC;IAA5CiC,UAAU,GAAAD,SAAA;IAAEE,aAAa,GAAAF,SAAA;EAEhC,MAAMG,MAAM,GAAGpC,MAAM,CAAmB,IAAI,CAAC;EAC7C,MAAMqC,OAAO,GAAGrC,MAAM,CAAoB,IAAI,CAAC;EAC/C,MAAMsC,WAAW,GAAGjC,YAAY,CAACF,aAAa,CAAC;;EAE/C;EACAC,uBAAuB,CAAC;IACtBmC,OAAO,EAAEb,GAAG,IAAIQ,UAAU,GAAGG,OAAO,CAACG,OAAO,GAAG,IAAI;IACnDC,OAAO,EAAEd,UAAU;IACnBe,MAAM,EAAEd,SAAS;IACjBe,OAAO,EAAEd;EACX,CAAC,CAAC;EAEF,MAAMe,eAAe,GAAGlB,GAAG,IAAIY,WAAW;EAE1CvC,SAAS,CAAC,MAAM;IACd,IAAI,CAACqC,MAAM,CAACI,OAAO,IAAI,CAACH,OAAO,CAACG,OAAO,IAAI,CAACN,UAAU,EAAE;MACtDzB,KAAK,IAAIoC,OAAO,CAACC,IAAI,CAAC,oCAAoC,CAAC;MAE3D;IACF;IAEA,MAAMC,OAAO,GAAG7C,SAAS,CAACkC,MAAM,CAACI,OAAO,EAAEH,OAAO,CAACG,OAAO,EAAE;MACzD5B,KAAK;MACLE,KAAK;MACLI,UAAU;MACVF,UAAU;MACVI;IACF,CAAC,CAAC;IAEFX,KAAK,IACHoC,OAAO,CAACG,GAAG,CAAC,wBAAwB,EAAEZ,MAAM,CAACI,OAAO,EAAEH,OAAO,CAACG,OAAO,EAAE;MACrE5B,KAAK;MACLE,KAAK;MACLI,UAAU;MACVF;IACF,CAAC,CAAC;IAEJ,IAAIiC,KAAa;IACjB,IAAIC,QAAQ,GAAG,IAAI;IAEnB,SAASC,IAAIA,CAAA,EAAG;MACd,IAAI,CAACD,QAAQ,EAAE;QACb;MACF;MACAH,OAAO,YAAPA,OAAO,CAAG,CAAC;MACXE,KAAK,GAAGG,qBAAqB,CAACD,IAAI,CAAC;IACrC;IAEAF,KAAK,GAAGG,qBAAqB,CAACD,IAAI,CAAC;IAEnC,OAAO,MAAM;MACX1C,KAAK,IAAIoC,OAAO,CAACG,GAAG,CAAC,4BAA4B,CAAC;MAClDE,QAAQ,GAAG,KAAK;MAChBG,oBAAoB,CAACJ,KAAK,CAAC;IAC7B,CAAC;EACH,CAAC,EAAE,CAACrC,KAAK,EAAEE,KAAK,EAAEI,UAAU,EAAEF,UAAU,EAAEkB,UAAU,EAAEzB,KAAK,EAAEW,UAAU,CAAC,CAAC;EAEzE,oBACEtB,KAAA,CAAAwD,aAAA;IACEhC,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAE;MACL,GAAGA,KAAK;MACRC,KAAK;MACLC;IACF;EAAE,gBAEF3B,KAAA,CAAAwD,aAAA;IACEC,GAAG,EAAElB,OAAQ;IACbd,KAAK,EAAE;MACLC,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE,MAAM;MACd+B,OAAO,EAAEZ,eAAe,GAAG,MAAM,GAAG,OAAO;MAC3C,IAAIV,UAAU,GACV,CAAC,CAAC,GACF;QACEuB,QAAQ,EAAE,UAAU;QACpBC,OAAO,EAAE,CAAC;QACVC,aAAa,EAAE,MAAM;QACrBC,UAAU,EAAE,QAAQ;QACpBC,MAAM,EAAE,CAAC;MACX,CAAC;IACP;EAAE,CACH,CAAC,EACD,CAAC3B,UAAU,IAAIf,QAAQ,eAEvBrB,KAAK,CAACgE,YAAY,CAACpD,QAAQ,EAAE;IAC5B,GAAGoB,cAAc;IACjByB,GAAG,EAAEnB,MAAM;IACXb,KAAK,EAAE;MAAEiC,OAAO,EAAE;IAAO,CAAC;IAC1BO,SAAS,EAAEC,aAAa;IACxBC,gBAAgB,EAAED;EACpB,CAAC,CACE,CAAC;EAGR,SAASA,aAAaA,CAACE,KAA6C,EAAE;IACpE,MAAMC,UAAU,GAAGD,KAAK,CAACE,aAAa,CAACD,UAAU;IAEjDhC,aAAa,CAACgC,UAAU,IAAIE,gBAAgB,CAACC,gBAAgB,CAAC;EAChE;AACF","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useRef","useState","chromaKey","pipActiveAtom","usePictureInPictureAuto","useAtomValue","ChromaKey","props","_props$debug","debug","children","_props$color","color","_props$spill","spill","_props$smoothness","smoothness","_props$similarity","similarity","fallback","background","_children$props","className","style","width","height","pip","pipFallback","onPiPEnter","onPiPExit","onPiPError","restVideoProps","_objectWithoutPropertiesLoose","_excluded","_useState","isPlayable","setIsPlayable","_useState2","isWebGLAvailable","setIsWebGLAvailable","$video","$canvas","isPiPActive","useVideoFallback","pipElement","current","element","onEnter","onExit","onError","showPipFallback","console","warn","process","log","rafId","isActive","loop","requestAnimationFrame","cancelAnimationFrame","createElement","ref","display","position","opacity","pointerEvents","visibility","zIndex","cloneElement","undefined","onCanPlay","checkPlayable","onLoadedMetadata","event","readyState","currentTarget","HTMLMediaElement","HAVE_FUTURE_DATA"],"sources":["../../../../src/components/ChromaKey/ChromaKey.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { chromaKey } from './chroma-key';\nimport {\n  pipActiveAtom,\n  usePictureInPictureAuto,\n} from '../../hooks/usePictureInPicture';\nimport { useAtomValue } from 'jotai';\n\ninterface ChromaKeyProps extends React.HTMLAttributes<HTMLCanvasElement> {\n  debug?: boolean;\n  color?: string;\n  spill?: number;\n  similarity?: number;\n  smoothness?: number;\n  fallback?: React.ReactNode;\n  background?: string | null;\n  children: React.ReactElement<\n    React.VideoHTMLAttributes<HTMLVideoElement> & {\n      ref?: React.Ref<HTMLVideoElement>;\n      pip?: boolean;\n      pipFallback?: React.ReactNode;\n      onPiPEnter?: () => void;\n      onPiPExit?: () => void;\n      onPiPError?: (error: Error) => void;\n    }\n  >;\n}\n\nexport function ChromaKey(props: ChromaKeyProps) {\n  const {\n    debug = false,\n    children,\n    color = '#03ff9c',\n    spill = 0.1,\n    smoothness = 0.15,\n    similarity = 0.3,\n    fallback,\n    background,\n  } = props;\n\n  const {\n    className,\n    style,\n    width,\n    height,\n    pip,\n    pipFallback,\n    onPiPEnter,\n    onPiPExit,\n    onPiPError,\n    ...restVideoProps\n  } = children.props;\n  const [isPlayable, setIsPlayable] = useState(false);\n  const [isWebGLAvailable, setIsWebGLAvailable] = useState<boolean | null>(\n    null,\n  );\n\n  const $video = useRef<HTMLVideoElement>(null);\n  const $canvas = useRef<HTMLCanvasElement>(null);\n  const isPiPActive = useAtomValue(pipActiveAtom);\n  const useVideoFallback = isWebGLAvailable === false;\n  const pipElement =\n    isWebGLAvailable === null\n      ? null\n      : useVideoFallback\n      ? $video.current\n      : $canvas.current;\n\n  // Setup PiP - hook handles canvas → video conversion internally\n  usePictureInPictureAuto({\n    element: pip && isPlayable ? pipElement : null,\n    onEnter: onPiPEnter,\n    onExit: onPiPExit,\n    onError: onPiPError,\n  });\n\n  const showPipFallback = pip && isPiPActive;\n\n  useEffect(() => {\n    if (!$video.current || !$canvas.current || !isPlayable) {\n      debug && console.warn('Video or canvas is not initialized');\n\n      return;\n    }\n\n    const process = chromaKey($video.current, $canvas.current, {\n      color,\n      spill,\n      similarity,\n      smoothness,\n      background,\n    });\n    setIsWebGLAvailable(process !== null);\n    if (!process) {\n      return;\n    }\n\n    debug &&\n      console.log('Chroma key initialized', $video.current, $canvas.current, {\n        color,\n        spill,\n        similarity,\n        smoothness,\n      });\n\n    let rafId: number;\n    let isActive = true;\n\n    function loop() {\n      if (!isActive) {\n        return;\n      }\n      process?.();\n      rafId = requestAnimationFrame(loop);\n    }\n\n    rafId = requestAnimationFrame(loop);\n\n    return () => {\n      debug && console.log('Chroma key process cleanup');\n      isActive = false;\n      cancelAnimationFrame(rafId);\n    };\n  }, [color, spill, similarity, smoothness, isPlayable, debug, background]);\n\n  return (\n    <div\n      className={className}\n      style={{\n        ...style,\n        width,\n        height,\n      }}\n    >\n      <canvas\n        ref={$canvas}\n        style={{\n          width: '100%',\n          height: '100%',\n          display: useVideoFallback || showPipFallback ? 'none' : 'block',\n          ...(isPlayable\n            ? {}\n            : {\n                position: 'absolute',\n                opacity: 0,\n                pointerEvents: 'none',\n                visibility: 'hidden',\n                zIndex: -1,\n              }),\n        }}\n      />\n      {!isPlayable && fallback}\n      {showPipFallback && pipFallback}\n\n      {React.cloneElement(children, {\n        ...restVideoProps,\n        // cloneElement retains original props; only ChromaKey should own PiP.\n        pip: false,\n        pipFallback: undefined,\n        onPiPEnter: undefined,\n        onPiPExit: undefined,\n        onPiPError: undefined,\n        ref: $video,\n        style: useVideoFallback\n          ? {\n              width: '100%',\n              height: '100%',\n              ...style,\n              display: isPlayable && !showPipFallback ? style?.display : 'none',\n            }\n          : { display: 'none' },\n        onCanPlay: checkPlayable,\n        onLoadedMetadata: checkPlayable,\n      })}\n    </div>\n  );\n\n  function checkPlayable(event: React.SyntheticEvent<HTMLVideoElement>) {\n    const readyState = event.currentTarget.readyState;\n\n    setIsPlayable(readyState >= HTMLMediaElement.HAVE_FUTURE_DATA);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/ChromaKey/chroma-key.js

@@ -6,7 +6,9 @@ export function chromaKey($video, $canvas, options) {
     premultipliedAlpha: false,
     preserveDrawingBuffer: true
   });
-  invariant(gl, 'WebGL context is not initialized');
+  if (!gl) {
+    return null;
+  }
   const BUFFER = gl.createBuffer();
   const TEXTURE = gl.createTexture();
   const program = gl.createProgram();

package/dist/esm/components/ChromaKey/chroma-key.js.map

@@ -1 +1 @@
-{"version":3,"names":["invariant","shaders","chromaKey","$video","$canvas","options","gl","getContext","alpha","premultipliedAlpha","preserveDrawingBuffer","BUFFER","createBuffer","TEXTURE","createTexture","program","createProgram","_VS_","createShader","VERTEX_SHADER","_FS_","FRAGMENT_SHADER","shaderSource","VertexAlign","ChromaKey","compileShader","getShaderParameter","COMPILE_STATUS","console","error","getShaderInfoLog","attachShader","linkProgram","useProgram","bindTexture","TEXTURE_2D","bindBuffer","ARRAY_BUFFER","bufferData","Float32Array","STATIC_DRAW","texParameteri","TEXTURE_MIN_FILTER","LINEAR","TEXTURE_WRAP_S","CLAMP_TO_EDGE","TEXTURE_WRAP_T","$coords$","getAttribLocation","$texture$","getUniformLocation","$width$","$height$","$color$","$similarity$","$smoothness$","$spill$","vertexAttribPointer","FLOAT","enableVertexAttribArray","activeTexture","TEXTURE0","enable","BLEND","blendFunc","SRC_ALPHA","ONE_MINUS_SRC_ALPHA","process","color","spill","similarity","smoothness","background","videoWidth","videoHeight","width","window","devicePixelRatio","height","viewport","r","parseInt","substring","g","b","clearColor","clear","COLOR_BUFFER_BIT","uniform1i","uniform1f","uniform3f","substr","texImage2D","RGB","UNSIGNED_BYTE","drawArrays","TRIANGLE_FAN"],"sources":["../../../../src/components/ChromaKey/chroma-key.ts"],"sourcesContent":["import invariant from 'invariant';\n\nimport * as shaders from './shaders';\n\nexport type ProcessCallback = () => void;\n\nexport function chromaKey(\n  $video: HTMLVideoElement,\n  $canvas: HTMLCanvasElement,\n  options: {\n    color: string;\n    spill: number;\n    similarity: number;\n    smoothness: number;\n    background?: string | null;\n  },\n): ProcessCallback {\n  const gl = $canvas.getContext('webgl', {\n    alpha: true,\n    premultipliedAlpha: false,\n    preserveDrawingBuffer: true,\n  });\n\n  invariant(gl, 'WebGL context is not initialized');\n\n  const BUFFER = gl.createBuffer();\n  const TEXTURE = gl.createTexture();\n  const program = gl.createProgram();\n  const _VS_ = gl.createShader(gl.VERTEX_SHADER);\n  const _FS_ = gl.createShader(gl.FRAGMENT_SHADER);\n\n  invariant(program, 'Program is not initialized');\n  invariant(_VS_, 'Vertex shader is not initialized');\n  invariant(_FS_, 'Fragment shader is not initialized');\n\n  gl.shaderSource(_VS_, shaders.VertexAlign);\n  gl.shaderSource(_FS_, shaders.ChromaKey);\n\n  gl.compileShader(_VS_);\n  gl.compileShader(_FS_);\n\n  if (!gl.getShaderParameter(_FS_, gl.COMPILE_STATUS)) {\n    console.error(\n      'Fragment shader compilation failed',\n      gl.getShaderInfoLog(_FS_),\n    );\n  }\n\n  gl.attachShader(program, _VS_);\n  gl.attachShader(program, _FS_);\n\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  gl.bindTexture(gl.TEXTURE_2D, TEXTURE);\n  gl.bindBuffer(gl.ARRAY_BUFFER, BUFFER);\n\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW,\n  );\n\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n\n  const $coords$ = gl.getAttribLocation(program, 'coords');\n  const $texture$ = gl.getUniformLocation(program, 'tex');\n  const $width$ = gl.getUniformLocation(program, 'texWidth');\n  const $height$ = gl.getUniformLocation(program, 'texHeight');\n  const $color$ = gl.getUniformLocation(program, 'keyColor');\n  const $similarity$ = gl.getUniformLocation(program, 'similarity');\n  const $smoothness$ = gl.getUniformLocation(program, 'smoothness');\n  const $spill$ = gl.getUniformLocation(program, 'spill');\n\n  gl.vertexAttribPointer($coords$, 2, gl.FLOAT, false, 0, 0);\n  gl.enableVertexAttribArray($coords$);\n\n  gl.activeTexture(gl.TEXTURE0);\n\n  // Enable blending for transparency (critical for Safari)\n  gl.enable(gl.BLEND);\n  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\n\n  return function process() {\n    const { color, spill, similarity, smoothness, background } = options;\n\n    // Use video dimensions directly instead of metadata (for Safari compatibility)\n    const videoWidth = $video.videoWidth;\n    const videoHeight = $video.videoHeight;\n\n    if (!videoWidth || !videoHeight) {\n      return; // Video not ready yet\n    }\n\n    const width = videoWidth * window.devicePixelRatio;\n    const height = videoHeight * window.devicePixelRatio;\n\n    $canvas.width = width;\n    $canvas.height = height;\n\n    gl.viewport(0, 0, width, height);\n\n    // Clear with background color or transparent\n    if (background) {\n      const r = parseInt(background.substring(1, 3), 16) / 255;\n      const g = parseInt(background.substring(3, 5), 16) / 255;\n      const b = parseInt(background.substring(5, 7), 16) / 255;\n      gl.clearColor(r, g, b, 1);\n    } else {\n      gl.clearColor(0, 0, 0, 0);\n    }\n    gl.clear(gl.COLOR_BUFFER_BIT);\n\n    gl.useProgram(program);\n\n    gl.uniform1i($texture$, 0);\n    gl.uniform1f($width$, width);\n    gl.uniform1f($height$, height);\n    gl.uniform1f($spill$, spill);\n    gl.uniform1f($similarity$, similarity);\n    gl.uniform1f($smoothness$, smoothness);\n    gl.uniform3f(\n      $color$,\n      parseInt(color.substr(1, 2), 16) / 255,\n      parseInt(color.substr(3, 2), 16) / 255,\n      parseInt(color.substr(5, 2), 16) / 255,\n    );\n\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);\n    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["invariant","shaders","chromaKey","$video","$canvas","options","gl","getContext","alpha","premultipliedAlpha","preserveDrawingBuffer","BUFFER","createBuffer","TEXTURE","createTexture","program","createProgram","_VS_","createShader","VERTEX_SHADER","_FS_","FRAGMENT_SHADER","shaderSource","VertexAlign","ChromaKey","compileShader","getShaderParameter","COMPILE_STATUS","console","error","getShaderInfoLog","attachShader","linkProgram","useProgram","bindTexture","TEXTURE_2D","bindBuffer","ARRAY_BUFFER","bufferData","Float32Array","STATIC_DRAW","texParameteri","TEXTURE_MIN_FILTER","LINEAR","TEXTURE_WRAP_S","CLAMP_TO_EDGE","TEXTURE_WRAP_T","$coords$","getAttribLocation","$texture$","getUniformLocation","$width$","$height$","$color$","$similarity$","$smoothness$","$spill$","vertexAttribPointer","FLOAT","enableVertexAttribArray","activeTexture","TEXTURE0","enable","BLEND","blendFunc","SRC_ALPHA","ONE_MINUS_SRC_ALPHA","process","color","spill","similarity","smoothness","background","videoWidth","videoHeight","width","window","devicePixelRatio","height","viewport","r","parseInt","substring","g","b","clearColor","clear","COLOR_BUFFER_BIT","uniform1i","uniform1f","uniform3f","substr","texImage2D","RGB","UNSIGNED_BYTE","drawArrays","TRIANGLE_FAN"],"sources":["../../../../src/components/ChromaKey/chroma-key.ts"],"sourcesContent":["import invariant from 'invariant';\n\nimport * as shaders from './shaders';\n\nexport type ProcessCallback = () => void;\n\nexport function chromaKey(\n  $video: HTMLVideoElement,\n  $canvas: HTMLCanvasElement,\n  options: {\n    color: string;\n    spill: number;\n    similarity: number;\n    smoothness: number;\n    background?: string | null;\n  },\n): ProcessCallback | null {\n  const gl = $canvas.getContext('webgl', {\n    alpha: true,\n    premultipliedAlpha: false,\n    preserveDrawingBuffer: true,\n  });\n\n  if (!gl) {\n    return null;\n  }\n\n  const BUFFER = gl.createBuffer();\n  const TEXTURE = gl.createTexture();\n  const program = gl.createProgram();\n  const _VS_ = gl.createShader(gl.VERTEX_SHADER);\n  const _FS_ = gl.createShader(gl.FRAGMENT_SHADER);\n\n  invariant(program, 'Program is not initialized');\n  invariant(_VS_, 'Vertex shader is not initialized');\n  invariant(_FS_, 'Fragment shader is not initialized');\n\n  gl.shaderSource(_VS_, shaders.VertexAlign);\n  gl.shaderSource(_FS_, shaders.ChromaKey);\n\n  gl.compileShader(_VS_);\n  gl.compileShader(_FS_);\n\n  if (!gl.getShaderParameter(_FS_, gl.COMPILE_STATUS)) {\n    console.error(\n      'Fragment shader compilation failed',\n      gl.getShaderInfoLog(_FS_),\n    );\n  }\n\n  gl.attachShader(program, _VS_);\n  gl.attachShader(program, _FS_);\n\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  gl.bindTexture(gl.TEXTURE_2D, TEXTURE);\n  gl.bindBuffer(gl.ARRAY_BUFFER, BUFFER);\n\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW,\n  );\n\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n\n  const $coords$ = gl.getAttribLocation(program, 'coords');\n  const $texture$ = gl.getUniformLocation(program, 'tex');\n  const $width$ = gl.getUniformLocation(program, 'texWidth');\n  const $height$ = gl.getUniformLocation(program, 'texHeight');\n  const $color$ = gl.getUniformLocation(program, 'keyColor');\n  const $similarity$ = gl.getUniformLocation(program, 'similarity');\n  const $smoothness$ = gl.getUniformLocation(program, 'smoothness');\n  const $spill$ = gl.getUniformLocation(program, 'spill');\n\n  gl.vertexAttribPointer($coords$, 2, gl.FLOAT, false, 0, 0);\n  gl.enableVertexAttribArray($coords$);\n\n  gl.activeTexture(gl.TEXTURE0);\n\n  // Enable blending for transparency (critical for Safari)\n  gl.enable(gl.BLEND);\n  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\n\n  return function process() {\n    const { color, spill, similarity, smoothness, background } = options;\n\n    // Use video dimensions directly instead of metadata (for Safari compatibility)\n    const videoWidth = $video.videoWidth;\n    const videoHeight = $video.videoHeight;\n\n    if (!videoWidth || !videoHeight) {\n      return; // Video not ready yet\n    }\n\n    const width = videoWidth * window.devicePixelRatio;\n    const height = videoHeight * window.devicePixelRatio;\n\n    $canvas.width = width;\n    $canvas.height = height;\n\n    gl.viewport(0, 0, width, height);\n\n    // Clear with background color or transparent\n    if (background) {\n      const r = parseInt(background.substring(1, 3), 16) / 255;\n      const g = parseInt(background.substring(3, 5), 16) / 255;\n      const b = parseInt(background.substring(5, 7), 16) / 255;\n      gl.clearColor(r, g, b, 1);\n    } else {\n      gl.clearColor(0, 0, 0, 0);\n    }\n    gl.clear(gl.COLOR_BUFFER_BIT);\n\n    gl.useProgram(program);\n\n    gl.uniform1i($texture$, 0);\n    gl.uniform1f($width$, width);\n    gl.uniform1f($height$, height);\n    gl.uniform1f($spill$, spill);\n    gl.uniform1f($similarity$, similarity);\n    gl.uniform1f($smoothness$, smoothness);\n    gl.uniform3f(\n      $color$,\n      parseInt(color.substr(1, 2), 16) / 255,\n      parseInt(color.substr(3, 2), 16) / 255,\n      parseInt(color.substr(5, 2), 16) / 255,\n    );\n\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);\n    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/hooks/usePictureInPicture/usePictureInPictureAuto.js

@@ -14,6 +14,7 @@ export function usePictureInPictureAuto(options) {
   const setIsActive = useSetAtom(pipActiveAtom);
   const isSupported = useAtomValue(pipSupportedAtom);
   const canvasVideoRef = useRef(null);
+  const ownsPiPVideo = !!element && isSupported && pipVideo === (canvasVideoRef.current ?? element);
   const callbacksRef = useLatest({
     onEnter,
     onExit,
@@ -21,7 +22,6 @@ export function usePictureInPictureAuto(options) {
   });
   useEffect(() => {
     if (!element || !isSupported) {
-      setPipVideo(null);
       return;
     }
     let video;
@@ -38,11 +38,11 @@ export function usePictureInPictureAuto(options) {
         destroyCanvasVideo(canvasVideoRef.current);
         canvasVideoRef.current = null;
       }
-      setPipVideo(null);
+      setPipVideo(current => current === video ? null : current);
     };
   }, [element, isSupported, setPipVideo]);
   useEffect(() => {
-    if (!pipVideo) {
+    if (!pipVideo || !ownsPiPVideo) {
       return;
     }
     const handleEnter = () => {
@@ -59,9 +59,9 @@ export function usePictureInPictureAuto(options) {
       pipVideo.removeEventListener('enterpictureinpicture', handleEnter);
       pipVideo.removeEventListener('leavepictureinpicture', handleLeave);
     };
-  }, [pipVideo, setIsActive]);
+  }, [pipVideo, ownsPiPVideo, setIsActive]);
   useEffect(() => {
-    if (!pipVideo || !isSupported) {
+    if (!pipVideo || !ownsPiPVideo) {
       return;
     }
     try {
@@ -81,17 +81,18 @@ export function usePictureInPictureAuto(options) {
         navigator.mediaSession.setActionHandler('enterpictureinpicture', null);
       } catch {}
     };
-  }, [pipVideo, isSupported]);
+  }, [pipVideo, ownsPiPVideo]);
   useEffect(() => {
-    if (!element) {
+    if (!element || !isSupported) {
       return;
     }
+    const ownedVideo = canvasVideoRef.current ?? element;
     return () => {
-      if (document.pictureInPictureElement) {
+      if (document.pictureInPictureElement === ownedVideo) {
         document.exitPictureInPicture().catch(() => {});
       }
     };
-  }, [element]);
+  }, [element, isSupported]);
 }
 function createVideoFromCanvas(canvas) {
   const video = document.createElement('video');

package/dist/esm/hooks/usePictureInPicture/usePictureInPictureAuto.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","useLatest","useAtom","useAtomValue","useSetAtom","pipVideoAtom","pipActiveAtom","pipSupportedAtom","usePictureInPictureAuto","options","element","onEnter","onExit","onError","_useAtom","pipVideo","setPipVideo","setIsActive","isSupported","canvasVideoRef","callbacksRef","video","HTMLCanvasElement","createVideoFromCanvas","current","setAttribute","destroyCanvasVideo","handleEnter","handleLeave","addEventListener","removeEventListener","navigator","mediaSession","setActionHandler","paused","srcObject","play","requestPictureInPicture","error","document","pictureInPictureElement","exitPictureInPicture","catch","canvas","createElement","muted","playsInline","autoplay","captureStream","stream","getTracks","forEach","track","stop"],"sources":["../../../../src/hooks/usePictureInPicture/usePictureInPictureAuto.ts"],"sourcesContent":["/* eslint-disable no-undef */\nimport { useEffect, useRef } from 'react';\nimport { useLatest } from 'react-use';\nimport { useAtom, useAtomValue, useSetAtom } from 'jotai';\n\nimport { pipVideoAtom, pipActiveAtom, pipSupportedAtom } from './state';\nimport type { UsePictureInPictureAutoOptions } from './types';\n\nexport function usePictureInPictureAuto(\n  options: UsePictureInPictureAutoOptions,\n) {\n  const { element, onEnter, onExit, onError } = options;\n\n  const [pipVideo, setPipVideo] = useAtom(pipVideoAtom);\n  const setIsActive = useSetAtom(pipActiveAtom);\n  const isSupported = useAtomValue(pipSupportedAtom);\n\n  const canvasVideoRef = useRef<HTMLVideoElement | null>(null);\n\n  const callbacksRef = useLatest({ onEnter, onExit, onError });\n\n  useEffect(() => {\n    if (!element || !isSupported) {\n      setPipVideo(null);\n      return;\n    }\n\n    let video: HTMLVideoElement;\n\n    if (element instanceof HTMLCanvasElement) {\n      video = createVideoFromCanvas(element);\n      canvasVideoRef.current = video;\n    } else {\n      video = element;\n    }\n\n    video.setAttribute('autopictureinpicture', 'true');\n    setPipVideo(video);\n\n    return () => {\n      if (canvasVideoRef.current) {\n        destroyCanvasVideo(canvasVideoRef.current);\n        canvasVideoRef.current = null;\n      }\n      setPipVideo(null);\n    };\n  }, [element, isSupported, setPipVideo]);\n\n  useEffect(() => {\n    if (!pipVideo) {\n      return;\n    }\n\n    const handleEnter = () => {\n      setIsActive(true);\n      callbacksRef.current.onEnter?.();\n    };\n\n    const handleLeave = () => {\n      setIsActive(false);\n      callbacksRef.current.onExit?.();\n    };\n\n    pipVideo.addEventListener('enterpictureinpicture', handleEnter);\n    pipVideo.addEventListener('leavepictureinpicture', handleLeave);\n\n    return () => {\n      pipVideo.removeEventListener('enterpictureinpicture', handleEnter);\n      pipVideo.removeEventListener('leavepictureinpicture', handleLeave);\n    };\n  }, [pipVideo, setIsActive]);\n\n  useEffect(() => {\n    if (!pipVideo || !isSupported) {\n      return;\n    }\n\n    try {\n      navigator.mediaSession.setActionHandler(\n        'enterpictureinpicture' as MediaSessionAction,\n        async () => {\n          try {\n            if (pipVideo.paused && pipVideo.srcObject) {\n              await pipVideo.play();\n            }\n            await pipVideo.requestPictureInPicture();\n          } catch (error) {\n            callbacksRef.current.onError?.(error as Error);\n          }\n        },\n      );\n    } catch {}\n\n    return () => {\n      try {\n        navigator.mediaSession.setActionHandler(\n          'enterpictureinpicture' as MediaSessionAction,\n          null,\n        );\n      } catch {}\n    };\n  }, [pipVideo, isSupported]);\n\n  useEffect(() => {\n    if (!element) {\n      return;\n    }\n\n    return () => {\n      if (document.pictureInPictureElement) {\n        document.exitPictureInPicture().catch(() => {});\n      }\n    };\n  }, [element]);\n}\n\nfunction createVideoFromCanvas(canvas: HTMLCanvasElement): HTMLVideoElement {\n  const video = document.createElement('video');\n  video.muted = true;\n  video.playsInline = true;\n  video.autoplay = true;\n  video.srcObject = canvas.captureStream(30);\n  return video;\n}\n\nfunction destroyCanvasVideo(video: HTMLVideoElement) {\n  if (video.srcObject) {\n    const stream = video.srcObject as MediaStream;\n    stream.getTracks().forEach((track) => track.stop());\n    video.srcObject = null;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useEffect","useRef","useLatest","useAtom","useAtomValue","useSetAtom","pipVideoAtom","pipActiveAtom","pipSupportedAtom","usePictureInPictureAuto","options","element","onEnter","onExit","onError","_useAtom","pipVideo","setPipVideo","setIsActive","isSupported","canvasVideoRef","ownsPiPVideo","current","callbacksRef","video","HTMLCanvasElement","createVideoFromCanvas","setAttribute","destroyCanvasVideo","handleEnter","handleLeave","addEventListener","removeEventListener","navigator","mediaSession","setActionHandler","paused","srcObject","play","requestPictureInPicture","error","ownedVideo","document","pictureInPictureElement","exitPictureInPicture","catch","canvas","createElement","muted","playsInline","autoplay","captureStream","stream","getTracks","forEach","track","stop"],"sources":["../../../../src/hooks/usePictureInPicture/usePictureInPictureAuto.ts"],"sourcesContent":["/* eslint-disable no-undef */\nimport { useEffect, useRef } from 'react';\nimport { useLatest } from 'react-use';\nimport { useAtom, useAtomValue, useSetAtom } from 'jotai';\n\nimport { pipVideoAtom, pipActiveAtom, pipSupportedAtom } from './state';\nimport type { UsePictureInPictureAutoOptions } from './types';\n\nexport function usePictureInPictureAuto(\n  options: UsePictureInPictureAutoOptions,\n) {\n  const { element, onEnter, onExit, onError } = options;\n\n  const [pipVideo, setPipVideo] = useAtom(pipVideoAtom);\n  const setIsActive = useSetAtom(pipActiveAtom);\n  const isSupported = useAtomValue(pipSupportedAtom);\n\n  const canvasVideoRef = useRef<HTMLVideoElement | null>(null);\n  const ownsPiPVideo =\n    !!element &&\n    isSupported &&\n    pipVideo === (canvasVideoRef.current ?? element);\n\n  const callbacksRef = useLatest({ onEnter, onExit, onError });\n\n  useEffect(() => {\n    if (!element || !isSupported) {\n      return;\n    }\n\n    let video: HTMLVideoElement;\n\n    if (element instanceof HTMLCanvasElement) {\n      video = createVideoFromCanvas(element);\n      canvasVideoRef.current = video;\n    } else {\n      video = element;\n    }\n\n    video.setAttribute('autopictureinpicture', 'true');\n    setPipVideo(video);\n\n    return () => {\n      if (canvasVideoRef.current) {\n        destroyCanvasVideo(canvasVideoRef.current);\n        canvasVideoRef.current = null;\n      }\n      setPipVideo((current) => (current === video ? null : current));\n    };\n  }, [element, isSupported, setPipVideo]);\n\n  useEffect(() => {\n    if (!pipVideo || !ownsPiPVideo) {\n      return;\n    }\n\n    const handleEnter = () => {\n      setIsActive(true);\n      callbacksRef.current.onEnter?.();\n    };\n\n    const handleLeave = () => {\n      setIsActive(false);\n      callbacksRef.current.onExit?.();\n    };\n\n    pipVideo.addEventListener('enterpictureinpicture', handleEnter);\n    pipVideo.addEventListener('leavepictureinpicture', handleLeave);\n\n    return () => {\n      pipVideo.removeEventListener('enterpictureinpicture', handleEnter);\n      pipVideo.removeEventListener('leavepictureinpicture', handleLeave);\n    };\n  }, [pipVideo, ownsPiPVideo, setIsActive]);\n\n  useEffect(() => {\n    if (!pipVideo || !ownsPiPVideo) {\n      return;\n    }\n\n    try {\n      navigator.mediaSession.setActionHandler(\n        'enterpictureinpicture' as MediaSessionAction,\n        async () => {\n          try {\n            if (pipVideo.paused && pipVideo.srcObject) {\n              await pipVideo.play();\n            }\n            await pipVideo.requestPictureInPicture();\n          } catch (error) {\n            callbacksRef.current.onError?.(error as Error);\n          }\n        },\n      );\n    } catch {}\n\n    return () => {\n      try {\n        navigator.mediaSession.setActionHandler(\n          'enterpictureinpicture' as MediaSessionAction,\n          null,\n        );\n      } catch {}\n    };\n  }, [pipVideo, ownsPiPVideo]);\n\n  useEffect(() => {\n    if (!element || !isSupported) {\n      return;\n    }\n    const ownedVideo = canvasVideoRef.current ?? element;\n\n    return () => {\n      if (document.pictureInPictureElement === ownedVideo) {\n        document.exitPictureInPicture().catch(() => {});\n      }\n    };\n  }, [element, isSupported]);\n}\n\nfunction createVideoFromCanvas(canvas: HTMLCanvasElement): HTMLVideoElement {\n  const video = document.createElement('video');\n  video.muted = true;\n  video.playsInline = true;\n  video.autoplay = true;\n  video.srcObject = canvas.captureStream(30);\n  return video;\n}\n\nfunction destroyCanvasVideo(video: HTMLVideoElement) {\n  if (video.srcObject) {\n    const stream = video.srcObject as MediaStream;\n    stream.getTracks().forEach((track) => track.stop());\n    video.srcObject = null;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/components/ChromaKey/ChromaKey.d.ts

@@ -10,6 +10,7 @@ interface ChromaKeyProps extends React.HTMLAttributes<HTMLCanvasElement> {
     children: React.ReactElement<React.VideoHTMLAttributes<HTMLVideoElement> & {
         ref?: React.Ref<HTMLVideoElement>;
         pip?: boolean;
+        pipFallback?: React.ReactNode;
         onPiPEnter?: () => void;
         onPiPExit?: () => void;
         onPiPError?: (error: Error) => void;

package/dist/types/components/ChromaKey/ChromaKey.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChromaKey.d.ts","sourceRoot":"","sources":["../../../../src/components/ChromaKey/ChromaKey.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAS3D,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACtE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAC1B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC5C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAClC,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;QACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;KACrC,CACF,CAAC;CACH;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA6H9C"}
+{"version":3,"file":"ChromaKey.d.ts","sourceRoot":"","sources":["../../../../src/components/ChromaKey/ChromaKey.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAS3D,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACtE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAC1B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC5C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAClC,GAAG,CAAC,EAAE,OAAO,CAAC;QACd,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;QACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;KACrC,CACF,CAAC;CACH;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA0J9C"}

package/dist/types/components/ChromaKey/chroma-key.d.ts

@@ -5,5 +5,5 @@ export declare function chromaKey($video: HTMLVideoElement, $canvas: HTMLCanvasE
     similarity: number;
     smoothness: number;
     background?: string | null;
-}): ProcessCallback;
+}): ProcessCallback | null;
 //# sourceMappingURL=chroma-key.d.ts.map

package/dist/types/components/ChromaKey/chroma-key.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chroma-key.d.ts","sourceRoot":"","sources":["../../../../src/components/ChromaKey/chroma-key.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC;AAEzC,wBAAgB,SAAS,CACvB,MAAM,EAAE,gBAAgB,EACxB,OAAO,EAAE,iBAAiB,EAC1B,OAAO,EAAE;IACP,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,GACA,eAAe,CAqHjB"}
+{"version":3,"file":"chroma-key.d.ts","sourceRoot":"","sources":["../../../../src/components/ChromaKey/chroma-key.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC;AAEzC,wBAAgB,SAAS,CACvB,MAAM,EAAE,gBAAgB,EACxB,OAAO,EAAE,iBAAiB,EAC1B,OAAO,EAAE;IACP,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,GACA,eAAe,GAAG,IAAI,CAuHxB"}

package/dist/types/hooks/usePictureInPicture/usePictureInPictureAuto.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePictureInPictureAuto.d.ts","sourceRoot":"","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPictureAuto.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAE9D,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,8BAA8B,QAyGxC"}
+{"version":3,"file":"usePictureInPictureAuto.d.ts","sourceRoot":"","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPictureAuto.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAE9D,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,8BAA8B,QA6GxC"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.28.0",
+  "version": "1.29.0",
   "name": "@wix/legends-platform-sdk",
   "license": "MIT",
   "author": {
@@ -103,5 +103,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "cd4e2ed8b483ab881fd7e37c70b3c2e37eafb383adf2e66a8b41145e"
+  "falconPackageHash": "2cd16955f949afb08609856afca8b0d91b998055144d7ab721c4cff5"
 }