@micromag/element-video 0.4.71 → 0.4.76

package/es/index.d.ts

@@ -1,8 +1,36 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ForwardedRef } from 'react';
+import { VideoMedia, ImageMedia } from '@micromag/core';
 
-declare const _default: ({ ref, ...props }: {
-    [x: string]: any;
-    ref: any;
-}) => react_jsx_runtime.JSX.Element;
+interface VideoProps extends HTMLAttributes<HTMLVideoElement> {
+    media?: VideoMedia | null;
+    thumbnail?: ImageMedia | null;
+    width?: number | null;
+    height?: number | null;
+    ref?: ForwardedRef<HTMLVideoElement> | null;
+    mediaRef?: ForwardedRef<HTMLVideoElement> | null;
+    muted?: boolean;
+    autoPlay?: boolean;
+    paused?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    preload?: 'auto' | 'metadata' | 'none' | null;
+    disablePictureInPicture?: boolean;
+    shouldLoad?: boolean;
+    withoutCors?: boolean;
+    className?: string | null;
+    innerClassName?: string | null;
+    onReady?: ((...args: unknown[]) => void) | null;
+    onSeeked?: ((...args: unknown[]) => void) | null;
+    onProgressStep?: ((...args: unknown[]) => void) | null;
+    onDurationChange?: ((...args: unknown[]) => void) | null;
+    onVolumeChange?: ((...args: unknown[]) => void) | null;
+    onSuspended?: ((...args: unknown[]) => void) | null;
+    onPlayError?: ((...args: unknown[]) => void) | null;
+    focusable?: boolean;
+    withPoster?: boolean;
+    withLoading?: boolean;
+}
+declare function Video({ media, thumbnail, width, height, mediaRef, ref: externalRef, muted, autoPlay, paused, loop, playsInline, preload, shouldLoad, withoutCors, className, innerClassName, onReady, onPlay: customOnPlay, onPlaying: customOnPlaying, onPause, onEnded, onSeeked, onTimeUpdate, onProgressStep, onDurationChange: customOnDurationChange, onVolumeChange: customOnVolumeChange, onSuspend: customOnSuspend, onSuspended, onPlayError, focusable, withPoster, withLoading, disablePictureInPicture, }: VideoProps): react_jsx_runtime.JSX.Element;
 
-export { _default as default };
+export { Video as default };

package/es/index.js

@@ -1,70 +1,57 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { c } from 'react/compiler-runtime';
 import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
-import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { useMemo, useState, useEffect, useRef } from 'react';
 import { Spinner } from '@micromag/core/components';
-import { useMediaThumbnail, useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
+import { useMediaCurrentTime, useMediaDuration, useMediaReady, useProgressSteps } from '@micromag/core/hooks';
+import { getMediaFilesAsArray, getVideoSupportedMimes, getMediaThumbnail, mergeRefs, getMediaIsPlaying } from '@micromag/core/utils';
 import { useSetting } from '@micromag/core/contexts';
-import { getMediaFilesAsArray, getVideoSupportedMimes } from '@micromag/core/utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // Disabled webm for now
 // const defaultPossibleMimes = ['video/mp4', 'video/webm', 'video/ogg', 'application/vnd.apple.mpegurl'];
 
-function useSources() {
-  var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var _ref = options || {},
-    _ref$possibleMimes = _ref.possibleMimes,
-    possibleMimes = _ref$possibleMimes === void 0 ? null : _ref$possibleMimes;
-  var _ref2 = media || {},
-    _ref2$files = _ref2.files,
-    mediaFiles = _ref2$files === void 0 ? null : _ref2$files,
-    _ref2$metadata = _ref2.metadata,
-    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-  var _ref3 = metadata || {},
-    _ref3$mime = _ref3.mime,
-    mediaMime = _ref3$mime === void 0 ? null : _ref3$mime;
-  var settingsPossibleMimes = useSetting('supportedVideoMimes');
-  var finalPossibleMimes = useMemo(function () {
-    return possibleMimes || settingsPossibleMimes || ['video/mp4'];
-  }, [possibleMimes, settingsPossibleMimes]);
-  var files = useMemo(function () {
-    return getMediaFilesAsArray(mediaFiles);
-  }, [mediaFiles]);
-  var _useState = useState(finalPossibleMimes),
-    _useState2 = _slicedToArray(_useState, 2),
-    supportedMimes = _useState2[0],
-    setSupportedMimes = _useState2[1];
-  useEffect(function () {
-    var newMimes = getVideoSupportedMimes(finalPossibleMimes);
+function useSources(media = null, options = null) {
+  const {
+    possibleMimes = null
+  } = options || {};
+  const {
+    files: mediaFiles = null,
+    metadata = null
+  } = media || {};
+  const {
+    mime: mediaMime = null
+  } = metadata || {};
+  const settingsPossibleMimes = useSetting('supportedVideoMimes');
+  const finalPossibleMimes = useMemo(() => possibleMimes || settingsPossibleMimes || ['video/mp4'], [possibleMimes, settingsPossibleMimes]);
+  const files = useMemo(() => getMediaFilesAsArray(mediaFiles), [mediaFiles]);
+  const [supportedMimes, setSupportedMimes] = useState(finalPossibleMimes);
+  useEffect(() => {
+    let newMimes = getVideoSupportedMimes(finalPossibleMimes);
     if (newMimes.length === 0) {
       newMimes = ['video/mp4'];
     }
     setSupportedMimes(newMimes);
   }, [finalPossibleMimes]);
-  var sources = useMemo(function () {
+  const sources = useMemo(() => {
     if (files.length === 0) {
       return null;
     }
-    var supportedFiles = files.filter(function (file) {
-      var fileHandle = file.handle || file.id;
-      var _file$mime = file.mime,
-        mime = _file$mime === void 0 ? "video/".concat(fileHandle === 'h264' ? 'mp4' : fileHandle) : _file$mime;
+    const supportedFiles = files.filter(file => {
+      const fileHandle = file.handle || file.id;
+      const {
+        mime = `video/${fileHandle === 'h264' ? 'mp4' : fileHandle}`
+      } = file;
       return supportedMimes.indexOf(mime) !== -1;
     });
-    var supportedFilesWithoutOriginal = supportedFiles.filter(function (file) {
-      var fileHandle = file.handle || file.id;
-      return fileHandle !== 'original';
+    const supportedFilesWithoutOriginal = supportedFiles.filter(file_0 => {
+      const fileHandle_0 = file_0.handle || file_0.id;
+      return fileHandle_0 !== 'original';
     });
-    return (supportedFilesWithoutOriginal.length > 0 ? supportedFilesWithoutOriginal : supportedFiles).sort(function (_ref4, _ref5) {
-      var _ref4$size = _ref4.size,
-        a = _ref4$size === void 0 ? Infinity : _ref4$size;
-      var _ref5$size = _ref5.size,
-        b = _ref5$size === void 0 ? Infinity : _ref5$size;
+    return (supportedFilesWithoutOriginal.length > 0 ? supportedFilesWithoutOriginal : supportedFiles).sort(({
+      size: a = Infinity
+    }, {
+      size: b = Infinity
+    }) => {
       if (a === b) {
         return 0;
       }
@@ -73,252 +60,476 @@ function useSources() {
   }, [files, supportedMimes]);
 
   // @NOTE: Media is an animated image and doesn't have source files in video formats
-  var _ref6 = files.find(function (_ref7) {
-      var handle = _ref7.handle;
-      return handle === 'original';
-    }) || {},
-    _ref6$type = _ref6.type,
-    originalType = _ref6$type === void 0 ? null : _ref6$type,
-    _ref6$mime = _ref6.mime,
-    originalMime = _ref6$mime === void 0 ? mediaMime : _ref6$mime;
-  var originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
+  const {
+    type: originalType = null,
+    mime: originalMime = mediaMime
+  } = files.find(({
+    handle
+  }) => handle === 'original') || {};
+  const originalFileIsImage = originalType === 'image' || originalMime !== null && originalMime.indexOf('image/') === 0;
   return {
     sources: sources !== null && sources.length > 0 ? sources : null,
-    files: files,
+    files,
     isImage: originalFileIsImage
   };
 }
 
 var styles = {"container":"micromag-element-video-container","media":"micromag-element-video-media","spinner":"micromag-element-video-spinner","withSize":"micromag-element-video-withSize"};
 
-var _excluded = ["ref"];
-function Video(_ref) {
-  var _ref$media = _ref.media,
-    media = _ref$media === void 0 ? null : _ref$media,
-    _ref$thumbnail = _ref.thumbnail,
-    thumbnail = _ref$thumbnail === void 0 ? null : _ref$thumbnail,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? null : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? null : _ref$height,
-    _ref$mediaRef = _ref.mediaRef,
-    mediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$muted = _ref.muted,
-    muted = _ref$muted === void 0 ? false : _ref$muted,
-    _ref$autoPlay = _ref.autoPlay,
-    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
-    _ref$paused = _ref.paused,
-    paused = _ref$paused === void 0 ? false : _ref$paused,
-    _ref$loop = _ref.loop,
-    loop = _ref$loop === void 0 ? false : _ref$loop,
-    _ref$playsInline = _ref.playsInline,
-    playsInline = _ref$playsInline === void 0 ? true : _ref$playsInline,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? 'auto' : _ref$preload,
-    _ref$shouldLoad = _ref.shouldLoad,
-    shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
-    _ref$withoutCors = _ref.withoutCors,
-    withoutCors = _ref$withoutCors === void 0 ? false : _ref$withoutCors,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$innerClassName = _ref.innerClassName,
-    innerClassName = _ref$innerClassName === void 0 ? null : _ref$innerClassName,
-    _ref$onReady = _ref.onReady,
-    onReady = _ref$onReady === void 0 ? null : _ref$onReady,
-    _ref$onPlay = _ref.onPlay,
-    customOnPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
-    _ref$onPause = _ref.onPause,
-    onPause = _ref$onPause === void 0 ? null : _ref$onPause,
-    _ref$onEnded = _ref.onEnded,
-    onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
-    _ref$onSeeked = _ref.onSeeked,
-    onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
-    _ref$onTimeUpdate = _ref.onTimeUpdate,
-    onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
-    _ref$onProgressStep = _ref.onProgressStep,
-    onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
-    _ref$onDurationChange = _ref.onDurationChange,
-    customOnDurationChange = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
-    _ref$onVolumeChange = _ref.onVolumeChange,
-    customOnVolumeChange = _ref$onVolumeChange === void 0 ? null : _ref$onVolumeChange,
-    _ref$onSuspend = _ref.onSuspend,
-    customOnSuspend = _ref$onSuspend === void 0 ? null : _ref$onSuspend,
-    _ref$onSuspended = _ref.onSuspended,
-    onSuspended = _ref$onSuspended === void 0 ? null : _ref$onSuspended,
-    _ref$onPlayError = _ref.onPlayError,
-    onPlayError = _ref$onPlayError === void 0 ? null : _ref$onPlayError,
-    _ref$focusable = _ref.focusable,
-    focusable = _ref$focusable === void 0 ? true : _ref$focusable,
-    _ref$withPoster = _ref.withPoster,
-    withPoster = _ref$withPoster === void 0 ? false : _ref$withPoster,
-    _ref$withLoading = _ref.withLoading,
-    withLoading = _ref$withLoading === void 0 ? false : _ref$withLoading,
-    _ref$disablePictureIn = _ref.disablePictureInPicture,
-    disablePictureInPicture = _ref$disablePictureIn === void 0 ? true : _ref$disablePictureIn;
-  var _ref2 = media || {},
-    _ref2$url = _ref2.url,
-    mediaUrl = _ref2$url === void 0 ? null : _ref2$url,
-    _ref2$metadata = _ref2.metadata,
-    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-  var _ref3 = metadata || {},
-    _ref3$description = _ref3.description,
-    description = _ref3$description === void 0 ? null : _ref3$description,
-    _ref3$has_audio = _ref3.has_audio,
-    hasAudio = _ref3$has_audio === void 0 ? null : _ref3$has_audio;
-  var finalThumbnail = useMediaThumbnail(media, thumbnail);
-  var _useSources = useSources(media),
-    sources = _useSources.sources,
-    isImage = _useSources.isImage;
-  // console.log('media', media, sources, isImage);
-
-  var isImageWithoutSourceFile = isImage && (sources === null || sources.length === 0);
-  var _ref6 = useRef(null);
-  var currentTime = useMediaCurrentTime(_ref6.current, {
-    id: mediaUrl,
-    disabled: paused || onProgressStep === null
-  });
-  var duration = useMediaDuration(_ref6.current, {
-    id: mediaUrl
-  });
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showLoading = _useState2[0],
-    setShowLoading = _useState2[1];
-  var ready = useMediaReady(_ref6.current, {
-    id: mediaUrl
-  });
-  useEffect(function () {
-    var id = null;
-    setShowLoading(false);
-    if (mediaUrl && withLoading) {
-      id = setTimeout(function () {
+function resetForcePlaying(element) {
+  if (element.dataset.forcePlaying === 'true') {
+    element.dataset.forcePlaying = 'false';
+  }
+}
+function Video(t0) {
+  const $ = c(113);
+  const {
+    media: t1,
+    thumbnail: t2,
+    width: t3,
+    height: t4,
+    mediaRef: t5,
+    ref: t6,
+    muted: t7,
+    autoPlay: t8,
+    paused: t9,
+    loop: t10,
+    playsInline: t11,
+    preload: t12,
+    shouldLoad: t13,
+    withoutCors: t14,
+    className: t15,
+    innerClassName: t16,
+    onReady: t17,
+    onPlay: t18,
+    onPlaying: t19,
+    onPause: t20,
+    onEnded: t21,
+    onSeeked: t22,
+    onTimeUpdate: t23,
+    onProgressStep: t24,
+    onDurationChange: t25,
+    onVolumeChange: t26,
+    onSuspend: t27,
+    onSuspended: t28,
+    onPlayError: t29,
+    focusable: t30,
+    withPoster: t31,
+    withLoading: t32,
+    disablePictureInPicture: t33
+  } = t0;
+  const media = t1 === undefined ? null : t1;
+  const thumbnail = t2 === undefined ? null : t2;
+  const width = t3 === undefined ? null : t3;
+  const height = t4 === undefined ? null : t4;
+  const mediaRef = t5 === undefined ? null : t5;
+  const externalRef = t6 === undefined ? null : t6;
+  const muted = t7 === undefined ? false : t7;
+  const autoPlay = t8 === undefined ? false : t8;
+  const paused = t9 === undefined ? false : t9;
+  const loop = t10 === undefined ? false : t10;
+  const playsInline = t11 === undefined ? true : t11;
+  const preload = t12 === undefined ? "auto" : t12;
+  const shouldLoad = t13 === undefined ? true : t13;
+  const withoutCors = t14 === undefined ? false : t14;
+  const className = t15 === undefined ? null : t15;
+  const innerClassName = t16 === undefined ? null : t16;
+  const onReady = t17 === undefined ? null : t17;
+  const customOnPlay = t18 === undefined ? null : t18;
+  const customOnPlaying = t19 === undefined ? null : t19;
+  const onPause = t20 === undefined ? null : t20;
+  const onEnded = t21 === undefined ? null : t21;
+  const onSeeked = t22 === undefined ? null : t22;
+  const onTimeUpdate = t23 === undefined ? null : t23;
+  const onProgressStep = t24 === undefined ? null : t24;
+  const customOnDurationChange = t25 === undefined ? null : t25;
+  const customOnVolumeChange = t26 === undefined ? null : t26;
+  const customOnSuspend = t27 === undefined ? null : t27;
+  const onSuspended = t28 === undefined ? null : t28;
+  const onPlayError = t29 === undefined ? null : t29;
+  const focusable = t30 === undefined ? true : t30;
+  const withPoster = t31 === undefined ? false : t31;
+  const withLoading = t32 === undefined ? false : t32;
+  const disablePictureInPicture = t33 === undefined ? true : t33;
+  let t34;
+  if ($[0] !== media) {
+    t34 = media || {};
+    $[0] = media;
+    $[1] = t34;
+  } else {
+    t34 = $[1];
+  }
+  const {
+    url: t35,
+    metadata: t36
+  } = t34;
+  const mediaUrl = t35 === undefined ? null : t35;
+  const metadata = t36 === undefined ? null : t36;
+  let t37;
+  if ($[2] !== metadata) {
+    t37 = metadata || {};
+    $[2] = metadata;
+    $[3] = t37;
+  } else {
+    t37 = $[3];
+  }
+  const {
+    description: t38,
+    has_audio: t39
+  } = t37;
+  const description = t38 === undefined ? null : t38;
+  const hasAudio = t39 === undefined ? null : t39;
+  let t40;
+  if ($[4] !== media || $[5] !== thumbnail) {
+    t40 = getMediaThumbnail(media, thumbnail);
+    $[4] = media;
+    $[5] = thumbnail;
+    $[6] = t40;
+  } else {
+    t40 = $[6];
+  }
+  const finalThumbnail = t40;
+  const {
+    sources,
+    isImage
+  } = useSources(media);
+  const isImageWithoutSourceFile = isImage && (sources === null || sources.length === 0);
+  const ref = useRef(null);
+  const [mediaElement, setMediaElement] = useState(null);
+  const t41 = paused || onProgressStep === null;
+  let t42;
+  if ($[7] !== mediaUrl || $[8] !== t41) {
+    t42 = {
+      id: mediaUrl,
+      disabled: t41
+    };
+    $[7] = mediaUrl;
+    $[8] = t41;
+    $[9] = t42;
+  } else {
+    t42 = $[9];
+  }
+  const currentTime = useMediaCurrentTime(mediaElement, t42);
+  let t43;
+  if ($[10] !== mediaUrl) {
+    t43 = {
+      id: mediaUrl
+    };
+    $[10] = mediaUrl;
+    $[11] = t43;
+  } else {
+    t43 = $[11];
+  }
+  const duration = useMediaDuration(mediaElement, t43);
+  const [showLoading, setShowLoading] = useState(false);
+  let t44;
+  if ($[12] !== mediaUrl) {
+    t44 = {
+      id: mediaUrl
+    };
+    $[12] = mediaUrl;
+    $[13] = t44;
+  } else {
+    t44 = $[13];
+  }
+  const ready = useMediaReady(mediaElement, t44);
+  let t45;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t45 = () => {
+      const {
+        current: t46
+      } = ref;
+      const element = t46 === undefined ? null : t46;
+      setMediaElement(element);
+    };
+    $[14] = t45;
+  } else {
+    t45 = $[14];
+  }
+  let t46;
+  if ($[15] !== isImageWithoutSourceFile || $[16] !== mediaUrl) {
+    t46 = [isImageWithoutSourceFile, mediaUrl, ref];
+    $[15] = isImageWithoutSourceFile;
+    $[16] = mediaUrl;
+    $[17] = t46;
+  } else {
+    t46 = $[17];
+  }
+  useEffect(t45, t46);
+  let t47;
+  let t48;
+  if ($[18] !== mediaUrl || $[19] !== withLoading) {
+    t47 = () => {
+      if (mediaUrl === null || !withLoading) {
+        return _temp;
+      }
+      setShowLoading(false);
+      const id = setTimeout(() => {
         setShowLoading(true);
       }, 2000);
-    }
-    return function () {
-      clearTimeout(id);
+      return () => {
+        clearTimeout(id);
+      };
     };
-  }, [mediaUrl, withLoading]);
-  var withSize = width !== null && height !== null;
-  useEffect(function () {
-    if (duration > 0 && customOnDurationChange !== null) {
-      customOnDurationChange(duration);
-    }
-  }, [duration, customOnDurationChange]);
-  var onVolumeChange = useCallback(function () {
-    var _ref$current = _ref6.current,
-      element = _ref$current === void 0 ? null : _ref$current;
-    if (element === null) {
-      return;
-    }
-    if (customOnVolumeChange !== null) {
-      customOnVolumeChange(element.volume);
-    }
-  }, [customOnVolumeChange]);
-
-  // Manage suspend
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isSuspended = _useState4[0],
-    setIsSuspended = _useState4[1];
-  var onPlay = useCallback(function (e) {
-    if (isSuspended) {
-      setIsSuspended(false);
-    }
-    if (customOnPlay !== null) {
-      customOnPlay(e);
-    }
-  }, [isSuspended, setIsSuspended, customOnPlay]);
-  var onPlaying = useCallback(function () {
-    if (isSuspended) {
-      setIsSuspended(false);
-    }
-  }, [isSuspended, setIsSuspended]);
-  var onSuspend = useCallback(function (e) {
-    if (e.currentTarget.paused && !paused && !isSuspended) {
-      setIsSuspended(true);
-      if (onSuspended !== null) {
-        onSuspended();
+    t48 = [mediaUrl, withLoading];
+    $[18] = mediaUrl;
+    $[19] = withLoading;
+    $[20] = t47;
+    $[21] = t48;
+  } else {
+    t47 = $[20];
+    t48 = $[21];
+  }
+  useEffect(t47, t48);
+  const withSize = width !== null && height !== null;
+  let t49;
+  let t50;
+  if ($[22] !== customOnDurationChange || $[23] !== duration) {
+    t49 = () => {
+      if (duration > 0 && customOnDurationChange !== null) {
+        customOnDurationChange(duration);
       }
-    }
-    if (customOnSuspend !== null) {
-      customOnSuspend(e);
-    }
-  }, [isSuspended, paused, setIsSuspended, customOnSuspend, onSuspended]);
-  useEffect(function () {
-    if (ready && onReady !== null) {
-      onReady();
-    }
-  }, [ready, onReady]);
-  var finalPreload = shouldLoad ? preload : 'none';
-  var _useState5 = useState(finalPreload === 'auto' || finalPreload === 'metadata'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    wasPreloaded = _useState6[0],
-    setWasPreloaded = _useState6[1];
-  useEffect(function () {
-    var _ref$current2 = _ref6.current,
-      element = _ref$current2 === void 0 ? null : _ref$current2;
-    if (shouldLoad && !wasPreloaded && element !== null) {
-      try {
-        element.load();
-      } catch (_unused) {}
-      setWasPreloaded(true);
-    }
-  }, [shouldLoad, wasPreloaded]);
-  useEffect(function () {
-    var _ref$current3 = _ref6.current,
-      element = _ref$current3 === void 0 ? null : _ref$current3;
-    if (element === null || mediaUrl === null) {
-      return;
-    }
-    var isPaused = element.paused;
-    if (paused && !isPaused) {
-      element.pause();
-    } else if (!paused && isPaused && element.dataset.forcePlaying !== 'true') {
-      element.play()["catch"](function (e) {
-        if (onPlayError !== null) {
-          onPlayError(e);
+    };
+    t50 = [duration, customOnDurationChange];
+    $[22] = customOnDurationChange;
+    $[23] = duration;
+    $[24] = t49;
+    $[25] = t50;
+  } else {
+    t49 = $[24];
+    t50 = $[25];
+  }
+  useEffect(t49, t50);
+  let t51;
+  if ($[26] !== customOnVolumeChange) {
+    t51 = e => {
+      if (customOnVolumeChange !== null) {
+        customOnVolumeChange(e.currentTarget.volume);
+      }
+    };
+    $[26] = customOnVolumeChange;
+    $[27] = t51;
+  } else {
+    t51 = $[27];
+  }
+  const onVolumeChange = t51;
+  const [isSuspended, setIsSuspended] = useState(false);
+  let t52;
+  if ($[28] !== customOnPlay || $[29] !== isSuspended) {
+    t52 = e_0 => {
+      if (isSuspended) {
+        setIsSuspended(false);
+      }
+      if (customOnPlay !== null) {
+        customOnPlay(e_0);
+      }
+    };
+    $[28] = customOnPlay;
+    $[29] = isSuspended;
+    $[30] = t52;
+  } else {
+    t52 = $[30];
+  }
+  const onPlay = t52;
+  let t53;
+  if ($[31] !== customOnPlaying || $[32] !== isSuspended) {
+    t53 = e_1 => {
+      if (isSuspended) {
+        setIsSuspended(false);
+      }
+      if (customOnPlaying !== null) {
+        customOnPlaying(e_1);
+      }
+    };
+    $[31] = customOnPlaying;
+    $[32] = isSuspended;
+    $[33] = t53;
+  } else {
+    t53 = $[33];
+  }
+  const onPlaying = t53;
+  let t54;
+  if ($[34] !== customOnSuspend || $[35] !== isSuspended || $[36] !== onSuspended || $[37] !== paused) {
+    t54 = e_2 => {
+      if (e_2.currentTarget.paused && !paused && !isSuspended) {
+        setIsSuspended(true);
+        if (onSuspended !== null) {
+          onSuspended();
         }
-      });
-    }
-    element.dataset.forcePlaying = 'false';
-  }, [paused, media, mediaUrl, onPlayError]);
-  useProgressSteps({
-    currentTime: currentTime,
-    duration: duration,
-    disabled: paused,
-    onStep: onProgressStep
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, _defineProperty({}, styles.withSize, withSize), className]),
-    style: withSize ? {
-      width: width,
-      height: height
-    } : null,
-    children: [isImageWithoutSourceFile && shouldLoad ? /*#__PURE__*/jsx("img", {
+      }
+      if (customOnSuspend !== null) {
+        customOnSuspend(e_2);
+      }
+    };
+    $[34] = customOnSuspend;
+    $[35] = isSuspended;
+    $[36] = onSuspended;
+    $[37] = paused;
+    $[38] = t54;
+  } else {
+    t54 = $[38];
+  }
+  const onSuspend = t54;
+  let t55;
+  let t56;
+  if ($[39] !== onReady || $[40] !== ready) {
+    t55 = () => {
+      if (ready && onReady !== null) {
+        onReady();
+      }
+    };
+    t56 = [ready, onReady];
+    $[39] = onReady;
+    $[40] = ready;
+    $[41] = t55;
+    $[42] = t56;
+  } else {
+    t55 = $[41];
+    t56 = $[42];
+  }
+  useEffect(t55, t56);
+  const finalPreload = shouldLoad ? preload : "none";
+  const [wasPreloaded, setWasPreloaded] = useState(finalPreload === "auto" || finalPreload === "metadata");
+  let t57;
+  let t58;
+  if ($[43] !== shouldLoad || $[44] !== wasPreloaded) {
+    t57 = () => {
+      const {
+        current: t59
+      } = ref;
+      const element_0 = t59 === undefined ? null : t59;
+      if (shouldLoad && !wasPreloaded && element_0 !== null) {
+        try {
+          element_0.load();
+        } catch {}
+        setWasPreloaded(true);
+      }
+    };
+    t58 = [shouldLoad, wasPreloaded];
+    $[43] = shouldLoad;
+    $[44] = wasPreloaded;
+    $[45] = t57;
+    $[46] = t58;
+  } else {
+    t57 = $[45];
+    t58 = $[46];
+  }
+  useEffect(t57, t58);
+  let t59;
+  if ($[47] !== mediaUrl || $[48] !== onPlayError || $[49] !== paused) {
+    t59 = () => {
+      const {
+        current: t60
+      } = ref;
+      const element_1 = t60 === undefined ? null : t60;
+      if (element_1 === null || mediaUrl === null) {
+        return;
+      }
+      const isPlaying = getMediaIsPlaying(element_1);
+      if (paused && isPlaying) {
+        element_1.pause();
+      } else {
+        if (!paused && !isPlaying && element_1.dataset.forcePlaying !== "true") {
+          element_1.play().catch(e_3 => {
+            if (onPlayError !== null) {
+              onPlayError(e_3);
+            }
+          });
+        }
+      }
+      resetForcePlaying(element_1);
+    };
+    $[47] = mediaUrl;
+    $[48] = onPlayError;
+    $[49] = paused;
+    $[50] = t59;
+  } else {
+    t59 = $[50];
+  }
+  let t60;
+  if ($[51] !== media || $[52] !== mediaUrl || $[53] !== onPlayError || $[54] !== paused) {
+    t60 = [paused, media, mediaUrl, onPlayError];
+    $[51] = media;
+    $[52] = mediaUrl;
+    $[53] = onPlayError;
+    $[54] = paused;
+    $[55] = t60;
+  } else {
+    t60 = $[55];
+  }
+  useEffect(t59, t60);
+  let t61;
+  if ($[56] !== currentTime || $[57] !== duration || $[58] !== onProgressStep || $[59] !== paused) {
+    t61 = {
+      currentTime,
+      duration,
+      disabled: paused,
+      onStep: onProgressStep
+    };
+    $[56] = currentTime;
+    $[57] = duration;
+    $[58] = onProgressStep;
+    $[59] = paused;
+    $[60] = t61;
+  } else {
+    t61 = $[60];
+  }
+  useProgressSteps(t61);
+  let t62;
+  if ($[61] !== className || $[62] !== withSize) {
+    t62 = classNames([styles.container, {
+      [styles.withSize]: withSize
+    }, className]);
+    $[61] = className;
+    $[62] = withSize;
+    $[63] = t62;
+  } else {
+    t62 = $[63];
+  }
+  let t63;
+  if ($[64] !== height || $[65] !== width || $[66] !== withSize) {
+    t63 = withSize ? {
+      width,
+      height
+    } : null;
+    $[64] = height;
+    $[65] = width;
+    $[66] = withSize;
+    $[67] = t63;
+  } else {
+    t63 = $[67];
+  }
+  let t64;
+  if ($[68] !== description || $[69] !== innerClassName || $[70] !== isImageWithoutSourceFile || $[71] !== mediaUrl || $[72] !== shouldLoad) {
+    t64 = isImageWithoutSourceFile && shouldLoad ? /*#__PURE__*/jsx("img", {
       src: mediaUrl,
       alt: description,
-      tabIndex: "-1",
+      tabIndex: -1,
       className: classNames([styles.media, innerClassName])
-    }) : null, !isImageWithoutSourceFile ? /*#__PURE__*/jsx("video", {
-      ref: function ref(newRef) {
-        _ref6.current = newRef;
-        if (mediaRef !== null && isFunction(mediaRef)) {
-          mediaRef(newRef);
-        } else if (mediaRef !== null) {
-          mediaRef.current = newRef;
-        }
-      },
-      src: sources === null && shouldLoad ? "".concat(mediaUrl, "#t=0.001") : undefined,
+    }) : null;
+    $[68] = description;
+    $[69] = innerClassName;
+    $[70] = isImageWithoutSourceFile;
+    $[71] = mediaUrl;
+    $[72] = shouldLoad;
+    $[73] = t64;
+  } else {
+    t64 = $[73];
+  }
+  let t65;
+  if ($[74] !== autoPlay || $[75] !== disablePictureInPicture || $[76] !== externalRef || $[77] !== finalPreload || $[78] !== finalThumbnail || $[79] !== focusable || $[80] !== hasAudio || $[81] !== innerClassName || $[82] !== isImageWithoutSourceFile || $[83] !== isSuspended || $[84] !== loop || $[85] !== mediaRef || $[86] !== mediaUrl || $[87] !== muted || $[88] !== onEnded || $[89] !== onPause || $[90] !== onPlay || $[91] !== onPlaying || $[92] !== onSeeked || $[93] !== onSuspend || $[94] !== onTimeUpdate || $[95] !== onVolumeChange || $[96] !== paused || $[97] !== playsInline || $[98] !== shouldLoad || $[99] !== sources || $[100] !== withPoster || $[101] !== withoutCors) {
+    t65 = !isImageWithoutSourceFile ? /*#__PURE__*/jsx("video", {
+      ref: mergeRefs(ref, mediaRef, externalRef),
+      src: sources === null && shouldLoad ? `${mediaUrl}#t=0.001` : undefined,
       autoPlay: autoPlay && !paused,
       loop: loop,
       muted: muted,
       poster: shouldLoad && withPoster && finalThumbnail !== null ? finalThumbnail.url || null : null,
       preload: finalPreload,
       playsInline: playsInline,
-      crossOrigin: withoutCors ? 'anonymous' : null,
+      crossOrigin: withoutCors ? "anonymous" : null,
       disablePictureInPicture: disablePictureInPicture,
-      tabIndex: focusable ? '0' : '-1',
+      tabIndex: focusable ? 0 : -1,
       className: classNames([styles.media, innerClassName]),
       onPlay: onPlay,
       onPlaying: onPlaying,
@@ -331,25 +542,80 @@ function Video(_ref) {
       "data-has-audio": hasAudio,
       "data-is-suspended": isSuspended,
       "aria-hidden": true,
-      children: (shouldLoad && sources !== null ? sources : []).map(function (_ref5) {
-        var sourceUrl = _ref5.url,
-          sourceMime = _ref5.mime;
-        return /*#__PURE__*/jsx("source", {
-          src: sourceUrl !== null ? "".concat(sourceUrl, "#t=0.001") : null,
-          type: sourceMime
-        }, "source-".concat(sourceUrl, "-").concat(sourceMime));
-      })
-    }, mediaUrl) : null, !isImageWithoutSourceFile && !ready && showLoading ? /*#__PURE__*/jsx(Spinner, {
+      children: (shouldLoad && sources !== null ? sources : []).map(_temp2)
+    }, mediaUrl) : null;
+    $[74] = autoPlay;
+    $[75] = disablePictureInPicture;
+    $[76] = externalRef;
+    $[77] = finalPreload;
+    $[78] = finalThumbnail;
+    $[79] = focusable;
+    $[80] = hasAudio;
+    $[81] = innerClassName;
+    $[82] = isImageWithoutSourceFile;
+    $[83] = isSuspended;
+    $[84] = loop;
+    $[85] = mediaRef;
+    $[86] = mediaUrl;
+    $[87] = muted;
+    $[88] = onEnded;
+    $[89] = onPause;
+    $[90] = onPlay;
+    $[91] = onPlaying;
+    $[92] = onSeeked;
+    $[93] = onSuspend;
+    $[94] = onTimeUpdate;
+    $[95] = onVolumeChange;
+    $[96] = paused;
+    $[97] = playsInline;
+    $[98] = shouldLoad;
+    $[99] = sources;
+    $[100] = withPoster;
+    $[101] = withoutCors;
+    $[102] = t65;
+  } else {
+    t65 = $[102];
+  }
+  let t66;
+  if ($[103] !== isImageWithoutSourceFile || $[104] !== ready || $[105] !== showLoading) {
+    t66 = !isImageWithoutSourceFile && !ready && showLoading ? /*#__PURE__*/jsx(Spinner, {
       className: styles.spinner
-    }) : null]
-  });
+    }) : null;
+    $[103] = isImageWithoutSourceFile;
+    $[104] = ready;
+    $[105] = showLoading;
+    $[106] = t66;
+  } else {
+    t66 = $[106];
+  }
+  let t67;
+  if ($[107] !== t62 || $[108] !== t63 || $[109] !== t64 || $[110] !== t65 || $[111] !== t66) {
+    t67 = /*#__PURE__*/jsxs("div", {
+      className: t62,
+      style: t63,
+      children: [t64, t65, t66]
+    });
+    $[107] = t62;
+    $[108] = t63;
+    $[109] = t64;
+    $[110] = t65;
+    $[111] = t66;
+    $[112] = t67;
+  } else {
+    t67 = $[112];
+  }
+  return t67;
+}
+function _temp2(t0) {
+  const {
+    url: sourceUrl,
+    mime: sourceMime
+  } = t0;
+  return /*#__PURE__*/jsx("source", {
+    src: sourceUrl !== null ? `${sourceUrl}#t=0.001` : null,
+    type: sourceMime
+  }, `source-${sourceUrl}-${sourceMime}`);
 }
-var Video_default = (function (_ref7) {
-  var ref = _ref7.ref,
-    props = _objectWithoutProperties(_ref7, _excluded);
-  return /*#__PURE__*/jsx(Video, _objectSpread({
-    mediaRef: ref
-  }, props));
-});
+function _temp() {}
 
-export { Video_default as default };
+export { Video as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-video",
-    "version": "0.4.71",
+    "version": "0.4.76",
     "private": false,
     "description": "",
     "keywords": [
@@ -32,9 +32,11 @@
     "license": "ISC",
     "type": "module",
     "module": "es/index.js",
+    "style": "./assets/css/styles.css",
     "exports": {
         ".": {
             "types": "./es/index.d.ts",
+            "style": "./assets/css/styles.css",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -51,17 +53,17 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.71",
-        "@micromag/element-closed-captions": "^0.4.71",
+        "@micromag/core": "^0.4.74",
+        "@micromag/element-closed-captions": "^0.4.74",
         "classnames": "^2.2.6",
         "hls.js": "^1.5.15",
         "lodash": "^4.17.23",
@@ -72,6 +74,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "42a24f578994b23090271013f136b7f78956b632",
     "types": "es/index.d.ts"
 }