@micromag/screen-timeline 0.4.28 → 0.4.29

package/es/index.js

@@ -4,7 +4,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
-import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useActivityDetector, useDebounce, useTrackScreenMedia, useDimensionObserver } from '@micromag/core/hooks';
@@ -265,22 +265,48 @@ function Timeline(_ref) {
       return count + 1;
     });
   }, [setImagesLoaded]);
-  var firstLineRef = useRef(null);
-  var firstContentRef = useRef(null);
-  var _useState1 = useState(0),
-    _useState10 = _slicedToArray(_useState1, 2),
-    imageWidth = _useState10[0],
-    setImageWidth = _useState10[1];
-  useEffect(function () {
-    if (firstContentRef.current === null) {
-      return;
-    }
-    if (firstLineRef.current !== null) {
-      setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
-    } else {
-      setImageWidth(firstContentRef.current.offsetWidth);
-    }
-  }, [width, height, finalItems]);
+
+  // const {
+  //     ref: firstLineRef,
+  //     entry: { contentRect: firstLineContentRect = null },
+  // } = useResizeObserver();
+  // const {
+  //     ref: firstContentRef,
+  //     entry: { contentRect: firstContentRect = null },
+  // } = useResizeObserver();
+  // const { width: firstLineWidth = null } = firstLineContentRect || {};
+  // const { width: firstContentWidth = null } = firstContentRect || {};
+
+  var _useDimensionObserver = useDimensionObserver(),
+    firstLineRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    firstLineWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2;
+  var _useDimensionObserver3 = useDimensionObserver(),
+    firstContentRef = _useDimensionObserver3.ref,
+    _useDimensionObserver4 = _useDimensionObserver3.width,
+    firstContentWidth = _useDimensionObserver4 === void 0 ? null : _useDimensionObserver4;
+  var imageWidth = (firstContentWidth !== null && firstContentWidth !== void 0 ? firstContentWidth : 0) - (firstLineWidth !== null && firstLineWidth !== void 0 ? firstLineWidth : 0);
+
+  // const firstLineRef = useRef(null);
+  // const firstContentRef = useRef(null);
+  // const [legacyImageWidth, setImageWidth] = useState(0);
+
+  // useEffect(() => {
+  //     if (firstContentRef.current === null) {
+  //         return;
+  //     }
+  //     if (firstLineRef.current !== null) {
+  //         setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
+  //     } else {
+  //         setImageWidth(firstContentRef.current.offsetWidth);
+  //     }
+  // }, [width, height, finalItems]);
+
+  // console.log('firstLineWidth', firstLineWidth);
+  // console.log('firstContentWidth', firstContentWidth);
+  // console.log('legacyImageWidth', legacyImageWidth);
+  // console.log('imageWidth', imageWidth);
+
   var timelineElements = (finalItems || []).map(function (item, itemI) {
     var _ref8 = item || {},
       _ref8$title = _ref8.title,
@@ -420,14 +446,14 @@ function Timeline(_ref) {
     openWebView: openWebView,
     isPreview: isPreview
   });
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    scrolledBottom = _useState12[0],
-    setScrolledBottom = _useState12[1];
-  var _useDimensionObserver = useDimensionObserver(),
-    footerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    scrolledBottom = _useState10[0],
+    setScrolledBottom = _useState10[1];
+  var _useDimensionObserver5 = useDimensionObserver(),
+    footerRef = _useDimensionObserver5.ref,
+    _useDimensionObserver6 = _useDimensionObserver5.height,
+    footerHeight = _useDimensionObserver6 === void 0 ? 0 : _useDimensionObserver6;
   var onScrolledBottom = useCallback(function (_ref12) {
     var initial = _ref12.initial;
     if (initial) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-timeline",
-    "version": "0.4.28",
+    "version": "0.4.29",
     "private": false,
     "description": "",
     "keywords": [
@@ -81,6 +81,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "1b14d4403eb5decff05346870eb849a96f636604",
+    "gitHead": "916ccd47c5782c43457310e7c72d0fa4f5ea6742",
     "types": "es/index.d.ts"
 }