@micromag/core 0.3.769 → 0.3.779

package/es/components.js

@@ -3631,6 +3631,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
     className = _ref.className,
     children = _ref.children;
   var hasSize = width !== null || height !== null;
+  //
   var _useDimensionObserver = useDimensionObserver(),
     refContainer = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.width,
@@ -3742,7 +3743,7 @@ var defaultProps$9 = {
   className: null,
   mediaRef: null
 };
-var Screen = function Screen(_ref) {
+var Screen$1 = function Screen(_ref) {
   var screen = _ref.screen,
     renderContext = _ref.renderContext,
     screenState = _ref.screenState,
@@ -3776,9 +3777,9 @@ var Screen = function Screen(_ref) {
     className: className
   }, component));
 };
-Screen.propTypes = propTypes$9;
-Screen.defaultProps = defaultProps$9;
-var Screen$1 = /*#__PURE__*/React.memo(Screen);
+Screen$1.propTypes = propTypes$9;
+Screen$1.defaultProps = defaultProps$9;
+var Screen = /*#__PURE__*/React.memo(Screen$1);
 
 var styles$7 = {"screen":"micromag-core-screens-screen-placeholder-screen"};
 
@@ -3809,7 +3810,7 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
     withSize = _ref.withSize,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$1);
-  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
+  var screenElement = /*#__PURE__*/React.createElement(Screen, Object.assign({
     screen: screen,
     renderContext: "placeholder",
     screenState: screenState,
@@ -3862,7 +3863,7 @@ var ScreenPreview = function ScreenPreview(_ref) {
     fit = _ref.fit,
     hidden = _ref.hidden,
     props = _objectWithoutProperties(_ref, _excluded);
-  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
+  var screenElement = /*#__PURE__*/React.createElement(Screen, Object.assign({
     screen: screen,
     renderContext: "preview",
     screenState: screenState,
@@ -4093,7 +4094,7 @@ var Screens = function Screens(_ref) {
     className: classNames([styles$1.container, _defineProperty({}, className, className)])
   }, screens.map(function (screen) {
     var id = screen.id;
-    return /*#__PURE__*/React.createElement(Screen$1, {
+    return /*#__PURE__*/React.createElement(Screen, {
       key: "screen-".concat(id),
       screen: screen,
       className: classNames([styles$1.screen, _defineProperty({}, styles$1.visible, screenId === id)])
@@ -4427,4 +4428,4 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
-export { ArrowIcon, BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, ClearButton, Close, CloseIcon, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, FullscreenIcon, HighlightStyle, Label, Link, LinkIcon, LinkStyle, Media, _Menu as Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, MuteIcon, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, PauseIcon, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, PlayIcon, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UnmuteIcon };
+export { ArrowIcon, BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, ClearButton, Close, CloseIcon, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, FullscreenIcon, HighlightStyle, Label, Link, LinkIcon, LinkStyle, Media, _Menu as Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, MuteIcon, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, PauseIcon, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, PlayIcon, Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UnmuteIcon };

package/es/contexts.js

@@ -1078,6 +1078,7 @@ var defaultControlsThemeValue = {
 var defaultValue$1 = {
   playing: false,
   paused: false,
+  completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
@@ -1200,6 +1201,26 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
   useEffect(function () {
     setControlsSuggestPlay(false);
   }, [media, setControlsSuggestPlay]);
+
+  // Handle media ended
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    completed = _useState16[0],
+    setCompleted = _useState16[1];
+  var onMediaCompleted = useCallback(function () {
+    return setCompleted(true);
+  }, [setCompleted]);
+  useEffect(function () {
+    if (media !== null) {
+      media.addEventListener('ended', onMediaCompleted);
+    }
+    return function () {
+      if (media !== null) {
+        media.removeEventListener('ended', onMediaCompleted);
+      }
+      setCompleted(false);
+    };
+  }, [media, onMediaCompleted, setCompleted]);
   var showControls = useCallback(function () {
     return setControlsVisible(true);
   }, [setControlsVisible]);
@@ -1228,6 +1249,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     return {
       muted: muted,
       playing: playing && !paused,
+      completed: completed,
       controls: controls,
       controlsSuggestPlay: controlsSuggestPlay,
       controlsVisible: controlsVisible,
@@ -1246,7 +1268,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       setMedia: setMedia,
       setCurrentQualityLevel: finalSetCurrentQualityLevel
     };
-  }, [muted, playing, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia, setCurrentQualityLevel]);
+  }, [muted, playing, completed, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia, setCurrentQualityLevel]);
   return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
     value: value
   }, children);

package/es/hooks.js

@@ -272,7 +272,7 @@ function useDragProgress() {
   }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
   var bind = useGesture({
     onDrag: onDrag,
-    onPointerDown: onPointerDown
+    onPointerDown: onPointerDown !== null ? onPointerDown : function () {}
   }, {
     drag: dragOptions
   });

package/lib/components.js

@@ -3633,6 +3633,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
     className = _ref.className,
     children = _ref.children;
   var hasSize = width !== null || height !== null;
+  //
   var _useDimensionObserver = hooks.useDimensionObserver(),
     refContainer = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.width,

package/lib/contexts.js

@@ -1078,6 +1078,7 @@ var defaultControlsThemeValue = {
 var defaultValue$1 = {
   playing: false,
   paused: false,
+  completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
@@ -1200,6 +1201,26 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
   React.useEffect(function () {
     setControlsSuggestPlay(false);
   }, [media, setControlsSuggestPlay]);
+
+  // Handle media ended
+  var _useState15 = React.useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    completed = _useState16[0],
+    setCompleted = _useState16[1];
+  var onMediaCompleted = React.useCallback(function () {
+    return setCompleted(true);
+  }, [setCompleted]);
+  React.useEffect(function () {
+    if (media !== null) {
+      media.addEventListener('ended', onMediaCompleted);
+    }
+    return function () {
+      if (media !== null) {
+        media.removeEventListener('ended', onMediaCompleted);
+      }
+      setCompleted(false);
+    };
+  }, [media, onMediaCompleted, setCompleted]);
   var showControls = React.useCallback(function () {
     return setControlsVisible(true);
   }, [setControlsVisible]);
@@ -1228,6 +1249,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
     return {
       muted: muted,
       playing: playing && !paused,
+      completed: completed,
       controls: controls,
       controlsSuggestPlay: controlsSuggestPlay,
       controlsVisible: controlsVisible,
@@ -1246,7 +1268,7 @@ var PlaybackProvider = function PlaybackProvider(_ref) {
       setMedia: setMedia,
       setCurrentQualityLevel: finalSetCurrentQualityLevel
     };
-  }, [muted, playing, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia, setCurrentQualityLevel]);
+  }, [muted, playing, completed, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, setControlsTheme, showControls, hideControls, setMedia, setCurrentQualityLevel]);
   return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
     value: value
   }, children);

package/lib/hooks.js

@@ -274,7 +274,7 @@ function useDragProgress() {
   }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
   var bind = react$1.useGesture({
     onDrag: onDrag,
-    onPointerDown: onPointerDown
+    onPointerDown: onPointerDown !== null ? onPointerDown : function () {}
   }, {
     drag: dragOptions
   });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.769",
+    "version": "0.3.779",
     "private": false,
     "description": "",
     "keywords": [
@@ -164,5 +164,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "a009106ec28c6e34288f0b3292f1bc6826812dd0"
+    "gitHead": "5cc7b8fc6d58ba77100060a9d9a4a3f87f835559"
 }