@micromag/core 0.4.60 → 0.4.64

package/es/components.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React, { CSSProperties, MouseEventHandler, ForwardedRef } from 'react';
 
+type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
 interface ButtonProps {
-    type?: string;
+    type?: 'button' | 'submit' | 'reset';
     theme?: ButtonTheme | null;
     size?: ButtonSize | null;
     href?: string | null;
@@ -26,13 +27,12 @@ interface ButtonProps {
     withoutTheme?: boolean;
     outline?: boolean;
     asLink?: boolean;
+    style?: CSSProperties;
     className?: string | null;
     iconClassName?: string | null;
     labelClassName?: string | null;
-    onClick?: ((...args: unknown[]) => void) | null;
-    refButton?: ((...args: unknown[]) => void | {
-        current?: unknown;
-    }) | null;
+    onClick?: MouseEventHandler<ButtonElement> | null;
+    refButton?: ForwardedRef<ButtonElement> | null;
 }
 declare function Button$2({ type, theme, size, href, external, direct, target, label, children, focusable, active, icon, iconPosition, disabled, loading, disableOnLoading, small, big, withShadow, withoutStyle, withoutBootstrapStyles, withoutTheme, asLink, outline, onClick, className, iconClassName, labelClassName, refButton, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 

package/es/components.js

@@ -158,12 +158,12 @@ function Button$1(_ref) {
       disabled: disabled
     }, styles$y.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/jsx("a", _objectSpread(_objectSpread({}, props), {}, {
-      href: disabled ? null : href,
+      href: !disabled ? href : undefined,
       className: linkClassNames,
       onClick: onClick,
-      target: external ? target : null,
+      target: external ? target : undefined,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1',
+      tabIndex: !focusable ? -1 : undefined,
       children: content
     })) : /*#__PURE__*/jsx(Link$1, {
       href: href,
@@ -180,7 +180,7 @@ function Button$1(_ref) {
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
     ref: refButton,
-    tabIndex: focusable ? '0' : '-1',
+    tabIndex: !focusable ? -1 : undefined,
     children: content
   }));
 }

package/es/contexts.d.ts

@@ -354,14 +354,42 @@ interface PanelsProviderProps {
 }
 declare function PanelsProvider({ children, container: initialContainer }: PanelsProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const PlaybackContext: any;
-declare const usePlaybackContext: () => unknown;
+interface PlaybackControlsTheme {
+    seekBarOnly?: boolean;
+    color?: unknown;
+    progressColor?: unknown;
+}
+type MediaElement = HTMLVideoElement | HTMLAudioElement | HTMLMediaElement;
+interface PlaybackContext {
+    playing: boolean;
+    completed: boolean;
+    muted: boolean;
+    controls: boolean;
+    controlsSuggestPlay: boolean;
+    controlsVisible: boolean;
+    media: MediaElement | null;
+    hasAudio: boolean | null;
+    controlsTheme: PlaybackControlsTheme | null;
+    currentQualityLevel: number | null;
+    setMuted: (muted: boolean) => void;
+    setPlaying: (playing: boolean) => void;
+    setControls: (hasControls: boolean) => void;
+    setControlsVisible: (visible: boolean) => void;
+    setControlsTheme: (theme: PlaybackControlsTheme | null) => void;
+    showControls: () => void;
+    hideControls: () => void;
+    setMedia: (media: MediaElement | null) => void;
+    setCurrentQualityLevel: (qualityLevel: number | null, fromRef?: MediaElement | null) => void;
+    setIsBackground: (isBackground: boolean) => void;
+}
+declare const PlaybackContext: React.Context<PlaybackContext>;
+declare const usePlaybackContext: () => PlaybackContext;
 declare const usePlaybackMediaRef: (active?: boolean, background?: boolean, updateKey?: any) => {
     ref: React.RefObject<HTMLMediaElement>;
     isCurrent: boolean;
 };
 interface PlaybackProviderProps {
-    children: React__default.ReactNode;
+    children: ReactNode;
     controls?: boolean;
     controlsSuggestPlay?: boolean;
     controlsVisible?: boolean;
@@ -373,7 +401,7 @@ interface PlaybackProviderProps {
     muted?: boolean;
     playing?: boolean;
     paused?: boolean;
-    currentQualityLevel?: number;
+    currentQualityLevel?: number | null;
 }
 declare function PlaybackProvider({ muted: initialMuted, playing: initialPlaying, paused, controls: initialControls, controlsSuggestPlay: initialControlsSuggestPlay, controlsVisible: initialControlsVisible, controlsTheme: initialControlsTheme, currentQualityLevel: initialCurrentQualityLevel, children, }: PlaybackProviderProps): react_jsx_runtime.JSX.Element;
 

package/es/contexts.js

@@ -1011,30 +1011,28 @@ var defaultControlsThemeValue = {
   color: null,
   progressColor: null
 };
-var defaultValue$1 = {
+var PlaybackContext = /*#__PURE__*/createContext({
   playing: false,
-  paused: false,
   completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
   controlsVisible: false,
+  hasAudio: false,
   media: null,
   controlsTheme: defaultControlsThemeValue,
-  currentQualityLevel: null
-};
-var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpread({}, defaultValue$1), {}, {
-  setMuted: function setMuted() {},
-  setPlaying: function setPlaying() {},
-  setControls: function setControls() {},
-  setControlsVisible: function setControlsVisible() {},
-  setControlsTheme: function setControlsTheme() {},
+  currentQualityLevel: null,
+  setMuted: function setMuted(muted) {},
+  setPlaying: function setPlaying(playing) {},
+  setControls: function setControls(hasControls) {},
+  setControlsVisible: function setControlsVisible(visible) {},
+  setControlsTheme: function setControlsTheme(theme) {},
   showControls: function showControls() {},
   hideControls: function hideControls() {},
-  setMedia: function setMedia() {},
-  setCurrentQualityLevel: function setCurrentQualityLevel() {},
-  setIsBackground: function setIsBackground() {}
-}));
+  setMedia: function setMedia(media) {},
+  setCurrentQualityLevel: function setCurrentQualityLevel(qualityLevel, fromRef) {},
+  setIsBackground: function setIsBackground(isBackground) {}
+});
 var usePlaybackContext = function usePlaybackContext() {
   return useContext(PlaybackContext);
 };
@@ -1045,29 +1043,35 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
   var _usePlaybackContext = usePlaybackContext(),
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
-    media = _usePlaybackContext.media;
+    media = _usePlaybackContext.media,
+    isBackground = _usePlaybackContext.isBackground;
   var mediaRef = useRef(null);
 
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
   useEffect(function () {
+    var currentMedia = mediaRef.current;
     return function () {
       if (active) {
+        var playing = currentMedia !== null && !!(currentMedia.currentTime > 0 && !currentMedia.paused && !currentMedia.ended && currentMedia.readyState > 2);
         setMedia(null);
         setIsBackground(false);
+        if (playing) {
+          currentMedia.pause();
+        }
       }
     };
   }, [active, setMedia, setIsBackground, updateKey]);
 
   // Register media with context when active and no media is registered
   useEffect(function () {
-    if (!active || mediaRef.current === null || media !== null) {
+    if (!active || mediaRef.current === null || mediaRef.current === media && background === isBackground) {
       return;
     }
     setIsBackground(background);
     setMedia(mediaRef.current);
-  }, [active, background, media, updateKey, setMedia, setIsBackground]);
+  }, [active, background, media, updateKey, setMedia, setIsBackground, isBackground]);
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media

package/es/hooks.d.ts

@@ -46,7 +46,25 @@ declare function useDragProgress({ progress: wantedProgress, onTap, disabled, dr
 declare const useForm: ({ fields: providedFields, injectInFields, ...opts }?: {
     fields?: any[];
     injectInFields?: boolean;
-}) => any;
+}) => {
+    fields: any[];
+    status: any;
+    response: unknown;
+    errors: Record<string, string | string[]>;
+    generalError: string;
+    success: boolean;
+    loading: boolean;
+    error: boolean;
+    value: Record<string, unknown>;
+    setValue: (value: Record<string, unknown>) => void;
+    setErrors: (errors: Record<string, string | string[]>) => void;
+    setGeneralError: (error: string | null) => void;
+    csrfToken: string;
+    submit: (submitValue?: Record<string, unknown>) => void;
+    onSubmit: (e: {
+        preventDefault: () => void;
+    }) => void;
+};
 
 declare const useFormTransition: (initialPaths?: any, initialStyles?: {}) => {
     direction: string;
@@ -135,12 +153,12 @@ declare const useMediaBuffering: (mediaElement?: any, interval?: number) => {
     buffering: boolean;
 };
 
-declare const useMediaState: (mediaElement?: any, { playing: wantedPlaying, muted: wantedMuted }?: {
+declare const useMediaState: (mediaElement?: HTMLMediaElement | null, { playing: wantedPlaying, muted: wantedMuted }?: {
     playing?: boolean;
     muted?: boolean;
 }) => {
     playing: boolean;
-    muted: any;
+    muted: boolean;
     buffering: boolean;
 };
 
@@ -162,8 +180,8 @@ declare function useMediaLoad(element: any, { preload, shouldLoad }?: {
 
 declare function useMediaProgress(media?: any, options?: any): number;
 
-declare function useMediaReady(element: any, { id }?: {
-    id?: any;
+declare function useMediaReady(element: HTMLMediaElement | null, { id }?: {
+    id?: string | null;
 }): boolean;
 
 declare function useMediaTimestampOffset(element: any, { attributeName }?: {

package/es/hooks.js

@@ -15,12 +15,12 @@ import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import raf from 'raf';
 import createDebug from 'debug';
-import isString from 'lodash/isString';
 import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@micromag/core/contexts';
 import isEmpty from 'lodash/isEmpty';
 import { useWindowSize } from '@folklore/hooks';
 import { match } from 'css-mediaquery';
 import dayjs from 'dayjs';
+import isString from 'lodash/isString';
 import { useIntl } from 'react-intl';
 import clamp from 'lodash/clamp';
 
@@ -1358,10 +1358,11 @@ var useMediaState = function useMediaState() {
     wantedPlaying = _ref$playing === void 0 ? false : _ref$playing,
     _ref$muted = _ref.muted,
     wantedMuted = _ref$muted === void 0 ? false : _ref$muted;
+  var src = mediaElement !== null ? mediaElement.currentSrc || mediaElement.src : null;
   var debug = useMemo(function () {
-    var mediaKey = mediaElement !== null && isString(mediaElement.src) ? mediaElement.src.split('/')[mediaElement.src.split('/').length - 1].split('#')[0] || null : null;
+    var mediaKey = src !== null ? src.split('/')[src.split('/').length - 1].split('#')[0] || null : null;
     return createDebug(mediaKey !== null ? "micromag:media:".concat(mediaKey) : 'micromag:media');
-  }, [mediaElement]);
+  }, [src]);
   var _useState = useState(wantedPlaying),
     _useState2 = _slicedToArray(_useState, 2),
     playing = _useState2[0],
@@ -1391,20 +1392,20 @@ var useMediaState = function useMediaState() {
         wantedMuted: wantedMuted
       });
     }
-  }, [mediaElement, debug, wantedPlaying, wantedMuted]);
+  }, [mediaElement, src, debug, wantedPlaying, wantedMuted]);
   useEffect(function () {
     if (mediaElement === null) {
       return function () {};
     }
     function onBufferingEvent(e) {
       // networkstate
-      if (mediaElement.networkState === mediaElement.NETWORK_LOADING) {
+      if (mediaElement !== null && mediaElement.networkState === mediaElement.NETWORK_LOADING) {
         debug('onBufferingEvent: NETWORK_LOADING');
         setBuffering(true);
       }
 
       // readystate
-      if (mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
+      if (mediaElement !== null && mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
         debug('onBufferingEvent: HAVE_FUTURE_DATA');
         setBuffering(true);
       }
@@ -1468,7 +1469,7 @@ var useMediaState = function useMediaState() {
       mediaElement.removeEventListener('ended', onEnded);
       mediaElement.removeEventListener('volumechange', onVolumeChange);
     };
-  }, [mediaElement, debug]);
+  }, [mediaElement, debug, src]);
   return {
     playing: playing,
     muted: muted,
@@ -1773,10 +1774,10 @@ function useMediaReady(element) {
     }
     function updateReady() {
       var currentReady = ready;
-      if (element.readyState > 0 && !ready) {
+      if (element !== null && element.readyState > 0 && !ready) {
         setReady(true);
         currentReady = true;
-      } else if (ready && element.readyState === 0) {
+      } else if (ready && element !== null && element.readyState === 0) {
         setReady(false);
         currentReady = false;
       }
@@ -1784,17 +1785,20 @@ function useMediaReady(element) {
       return currentReady;
     }
     var currentReady = updateReady();
-    if (!currentReady) {
-      element.addEventListener('loadedmetadata', updateReady);
-      element.addEventListener('canplay', updateReady);
-      element.addEventListener('canplaythrough', updateReady);
+    if (currentReady) {
+      return function () {};
     }
+    element.addEventListener('loadstart', updateReady);
+    element.addEventListener('loadeddata', updateReady);
+    element.addEventListener('loadedmetadata', updateReady);
+    element.addEventListener('canplay', updateReady);
+    element.addEventListener('canplaythrough', updateReady);
     return function () {
-      if (!currentReady) {
-        element.removeEventListener('loadedmetadata', updateReady);
-        element.removeEventListener('canplay', updateReady);
-        element.removeEventListener('canplaythrough', updateReady);
-      }
+      element.removeEventListener('loadstart', updateReady);
+      element.removeEventListener('loadeddata', updateReady);
+      element.removeEventListener('loadedmetadata', updateReady);
+      element.removeEventListener('canplay', updateReady);
+      element.removeEventListener('canplaythrough', updateReady);
     };
   }, [element, id]);
   return realReady.current;

package/lib/components.js

@@ -160,12 +160,12 @@ function Button$1(_ref) {
       disabled: disabled
     }, styles$y.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/jsxRuntime.jsx("a", _objectSpread(_objectSpread({}, props), {}, {
-      href: disabled ? null : href,
+      href: !disabled ? href : undefined,
       className: linkClassNames,
       onClick: onClick,
-      target: external ? target : null,
+      target: external ? target : undefined,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1',
+      tabIndex: !focusable ? -1 : undefined,
       children: content
     })) : /*#__PURE__*/jsxRuntime.jsx(wouter.Link, {
       href: href,
@@ -182,7 +182,7 @@ function Button$1(_ref) {
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
     ref: refButton,
-    tabIndex: focusable ? '0' : '-1',
+    tabIndex: !focusable ? -1 : undefined,
     children: content
   }));
 }

package/lib/contexts.js

@@ -1011,30 +1011,28 @@ var defaultControlsThemeValue = {
   color: null,
   progressColor: null
 };
-var defaultValue$1 = {
+var PlaybackContext = /*#__PURE__*/React.createContext({
   playing: false,
-  paused: false,
   completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
   controlsVisible: false,
+  hasAudio: false,
   media: null,
   controlsTheme: defaultControlsThemeValue,
-  currentQualityLevel: null
-};
-var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpread({}, defaultValue$1), {}, {
-  setMuted: function setMuted() {},
-  setPlaying: function setPlaying() {},
-  setControls: function setControls() {},
-  setControlsVisible: function setControlsVisible() {},
-  setControlsTheme: function setControlsTheme() {},
+  currentQualityLevel: null,
+  setMuted: function setMuted(muted) {},
+  setPlaying: function setPlaying(playing) {},
+  setControls: function setControls(hasControls) {},
+  setControlsVisible: function setControlsVisible(visible) {},
+  setControlsTheme: function setControlsTheme(theme) {},
   showControls: function showControls() {},
   hideControls: function hideControls() {},
-  setMedia: function setMedia() {},
-  setCurrentQualityLevel: function setCurrentQualityLevel() {},
-  setIsBackground: function setIsBackground() {}
-}));
+  setMedia: function setMedia(media) {},
+  setCurrentQualityLevel: function setCurrentQualityLevel(qualityLevel, fromRef) {},
+  setIsBackground: function setIsBackground(isBackground) {}
+});
 var usePlaybackContext = function usePlaybackContext() {
   return React.useContext(PlaybackContext);
 };
@@ -1045,29 +1043,35 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
   var _usePlaybackContext = usePlaybackContext(),
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
-    media = _usePlaybackContext.media;
+    media = _usePlaybackContext.media,
+    isBackground = _usePlaybackContext.isBackground;
   var mediaRef = React.useRef(null);
 
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
   React.useEffect(function () {
+    var currentMedia = mediaRef.current;
     return function () {
       if (active) {
+        var playing = currentMedia !== null && !!(currentMedia.currentTime > 0 && !currentMedia.paused && !currentMedia.ended && currentMedia.readyState > 2);
         setMedia(null);
         setIsBackground(false);
+        if (playing) {
+          currentMedia.pause();
+        }
       }
     };
   }, [active, setMedia, setIsBackground, updateKey]);
 
   // Register media with context when active and no media is registered
   React.useEffect(function () {
-    if (!active || mediaRef.current === null || media !== null) {
+    if (!active || mediaRef.current === null || mediaRef.current === media && background === isBackground) {
       return;
     }
     setIsBackground(background);
     setMedia(mediaRef.current);
-  }, [active, background, media, updateKey, setMedia, setIsBackground]);
+  }, [active, background, media, updateKey, setMedia, setIsBackground, isBackground]);
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media

package/lib/hooks.js

@@ -17,12 +17,12 @@ var isArray = require('lodash/isArray');
 var isObject = require('lodash/isObject');
 var raf = require('raf');
 var createDebug = require('debug');
-var isString = require('lodash/isString');
 var contexts = require('@micromag/core/contexts');
 var isEmpty = require('lodash/isEmpty');
 var hooks = require('@folklore/hooks');
 var cssMediaquery = require('css-mediaquery');
 var dayjs = require('dayjs');
+var isString = require('lodash/isString');
 var reactIntl = require('react-intl');
 var clamp = require('lodash/clamp');
 
@@ -1360,10 +1360,11 @@ var useMediaState = function useMediaState() {
     wantedPlaying = _ref$playing === void 0 ? false : _ref$playing,
     _ref$muted = _ref.muted,
     wantedMuted = _ref$muted === void 0 ? false : _ref$muted;
+  var src = mediaElement !== null ? mediaElement.currentSrc || mediaElement.src : null;
   var debug = react.useMemo(function () {
-    var mediaKey = mediaElement !== null && isString(mediaElement.src) ? mediaElement.src.split('/')[mediaElement.src.split('/').length - 1].split('#')[0] || null : null;
+    var mediaKey = src !== null ? src.split('/')[src.split('/').length - 1].split('#')[0] || null : null;
     return createDebug(mediaKey !== null ? "micromag:media:".concat(mediaKey) : 'micromag:media');
-  }, [mediaElement]);
+  }, [src]);
   var _useState = react.useState(wantedPlaying),
     _useState2 = _slicedToArray(_useState, 2),
     playing = _useState2[0],
@@ -1393,20 +1394,20 @@ var useMediaState = function useMediaState() {
         wantedMuted: wantedMuted
       });
     }
-  }, [mediaElement, debug, wantedPlaying, wantedMuted]);
+  }, [mediaElement, src, debug, wantedPlaying, wantedMuted]);
   react.useEffect(function () {
     if (mediaElement === null) {
       return function () {};
     }
     function onBufferingEvent(e) {
       // networkstate
-      if (mediaElement.networkState === mediaElement.NETWORK_LOADING) {
+      if (mediaElement !== null && mediaElement.networkState === mediaElement.NETWORK_LOADING) {
         debug('onBufferingEvent: NETWORK_LOADING');
         setBuffering(true);
       }
 
       // readystate
-      if (mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
+      if (mediaElement !== null && mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
         debug('onBufferingEvent: HAVE_FUTURE_DATA');
         setBuffering(true);
       }
@@ -1470,7 +1471,7 @@ var useMediaState = function useMediaState() {
       mediaElement.removeEventListener('ended', onEnded);
       mediaElement.removeEventListener('volumechange', onVolumeChange);
     };
-  }, [mediaElement, debug]);
+  }, [mediaElement, debug, src]);
   return {
     playing: playing,
     muted: muted,
@@ -1775,10 +1776,10 @@ function useMediaReady(element) {
     }
     function updateReady() {
       var currentReady = ready;
-      if (element.readyState > 0 && !ready) {
+      if (element !== null && element.readyState > 0 && !ready) {
         setReady(true);
         currentReady = true;
-      } else if (ready && element.readyState === 0) {
+      } else if (ready && element !== null && element.readyState === 0) {
         setReady(false);
         currentReady = false;
       }
@@ -1786,17 +1787,20 @@ function useMediaReady(element) {
       return currentReady;
     }
     var currentReady = updateReady();
-    if (!currentReady) {
-      element.addEventListener('loadedmetadata', updateReady);
-      element.addEventListener('canplay', updateReady);
-      element.addEventListener('canplaythrough', updateReady);
+    if (currentReady) {
+      return function () {};
     }
+    element.addEventListener('loadstart', updateReady);
+    element.addEventListener('loadeddata', updateReady);
+    element.addEventListener('loadedmetadata', updateReady);
+    element.addEventListener('canplay', updateReady);
+    element.addEventListener('canplaythrough', updateReady);
     return function () {
-      if (!currentReady) {
-        element.removeEventListener('loadedmetadata', updateReady);
-        element.removeEventListener('canplay', updateReady);
-        element.removeEventListener('canplaythrough', updateReady);
-      }
+      element.removeEventListener('loadstart', updateReady);
+      element.removeEventListener('loadeddata', updateReady);
+      element.removeEventListener('loadedmetadata', updateReady);
+      element.removeEventListener('canplay', updateReady);
+      element.removeEventListener('canplaythrough', updateReady);
     };
   }, [element, id]);
   return realReady.current;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.4.60",
+    "version": "0.4.64",
     "private": false,
     "description": "",
     "keywords": [
@@ -161,6 +161,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "515ac855ce6094c26f37b1dbf413ee80064713e6",
+    "gitHead": "f41397bcb95639b70b526b3cf246006c3fd207e5",
     "types": "es/index.d.ts"
 }