pageflow 15.6.1 → 15.7.1

data/entry_types/scrolled/package/frontend/{Viewer-e49e7807.js → Viewer-e2290ea0.js}

@@ -1,13 +1,13 @@
 import 'pageflow/frontend';
 import React, { useMemo, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { b as _objectWithoutProperties, u as useI18n, _ as _slicedToArray, a as _defineProperty } from './i18n-4dc6c377.js';
-import classNames from 'classnames';
+import { _ as _objectWithoutProperties, u as useI18n, b as _defineProperty, c as _slicedToArray } from './PhonePlatformContext-9fb97827.js';
+import 'i18n-js';
 import 'use-context-selector';
 import 'reselect';
-import 'i18n-js';
 import 'slugify';
-import { u as useBrowserFeature } from './useBrowserFeature-91a4c29d.js';
+import classNames from 'classnames';
+import { u as useBrowserFeature, a as usePhonePlatform } from './usePhonePlatform-2857c22b.js';
 import { PanoViewer } from '@egjs/view360';
 import screenfull from 'screenfull';
 
@@ -33,14 +33,14 @@ var EnterFullscreenIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "expand",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-expand"] || "fa-expand") + " " + (styles["fa-w-14"] || "fa-w-14"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 448 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
   }));
@@ -68,14 +68,14 @@ var ExitFullscreenIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "compress",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-compress"] || "fa-compress") + " " + (styles["fa-w-14"] || "fa-w-14"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 448 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"
   }));
@@ -87,31 +87,22 @@ function ToggleFullscreenButton(props) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
-  return (
-    /*#__PURE__*/
-    React.createElement("button", {
-      className: styles.button,
-      title: t(props.isFullscreen ? 'exit_fullscreen' : 'enter_fullscreen', {
-        scope: 'pageflow_scrolled.public'
-      }),
-      onClick: function onClick() {
-        return props.isFullscreen ? props.onExit() : props.onEnter();
-      }
-    }, icon(props))
-  );
+  return /*#__PURE__*/React.createElement("button", {
+    className: styles.button,
+    title: t(props.isFullscreen ? 'exit_fullscreen' : 'enter_fullscreen', {
+      scope: 'pageflow_scrolled.public'
+    }),
+    onClick: function onClick() {
+      return props.isFullscreen ? props.onExit() : props.onEnter();
+    }
+  }, icon(props));
 }
 
 function icon(props) {
   if (props.isFullscreen) {
-    return (
-      /*#__PURE__*/
-      React.createElement(ExitFullscreenIcon, null)
-    );
+    return /*#__PURE__*/React.createElement(ExitFullscreenIcon, null);
   } else {
-    return (
-      /*#__PURE__*/
-      React.createElement(EnterFullscreenIcon, null)
-    );
+    return /*#__PURE__*/React.createElement(EnterFullscreenIcon, null);
   }
 }
 
@@ -132,9 +123,7 @@ function Fullscreen(_ref) {
   }, [isFullscreen]);
 
   if (isFullscreen) {
-    return ReactDOM.createPortal(
-    /*#__PURE__*/
-    React.createElement("div", {
+    return ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
       className: styles$1.wrapper
     }, children), root);
   } else {
@@ -142,8 +131,6 @@ function Fullscreen(_ref) {
   }
 }
 
-var styles$2 = {"full":"Viewer-module_full__1q18y","container":"Viewer-module_container__3eJ34 Viewer-module_full__1q18y","controls":"Viewer-module_controls__3BTof","spinner":"Viewer-module_spinner__2oRve","spin":"Viewer-module_spin__3jBR2","isLoading":"Viewer-module_isLoading__sQuGw"};
-
 function _extends$2() {
   _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -161,22 +148,149 @@ function _extends$2() {
 
   return _extends$2.apply(this, arguments);
 }
+var ArrowLeftIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: (styles["h-5"] || "h-5") + " " + (styles["w-5"] || "w-5"),
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
+    clipRule: "evenodd"
+  }));
+});
+
+function _extends$3() {
+  _extends$3 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$3.apply(this, arguments);
+}
+var ArrowRightIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: (styles["h-5"] || "h-5") + " " + (styles["w-5"] || "w-5"),
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+    clipRule: "evenodd"
+  }));
+});
+
+var styles$2 = {"indicator":"PanoramaIndicator-module_indicator__3A90v","visible":"PanoramaIndicator-module_visible__3LOgm","arrow":"PanoramaIndicator-module_arrow__QV1Pd","arrowLeft":"PanoramaIndicator-module_arrowLeft__Jh7GC PanoramaIndicator-module_arrow__QV1Pd","arrowRight":"PanoramaIndicator-module_arrowRight__ZZBtO PanoramaIndicator-module_arrow__QV1Pd","nudgeLeft":"PanoramaIndicator-module_nudgeLeft__IU_Iy","nudgeRight":"PanoramaIndicator-module_nudgeRight__3XzNu","text":"PanoramaIndicator-module_text__2FzUy"};
+
+function PanoramaIndicator(_ref) {
+  var visible = _ref.visible;
+  var size = 40;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$2.indicator, _defineProperty({}, styles$2.visible, visible))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.arrowLeft
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
+    width: size,
+    height: size
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles$2.arrowRight
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowRightIcon, {
+    width: size,
+    height: size
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles$2.text
+  }, "360\xB0"));
+}
+
+var styles$3 = {"indicator":"FullscreenIndicator-module_indicator__2Jl_-","visible":"FullscreenIndicator-module_visible__2ywsZ","icon":"FullscreenIndicator-module_icon__2Ddof","icons":"FullscreenIndicator-module_icons__3-Xm6","text":"FullscreenIndicator-module_text__3wCW3","pulse":"FullscreenIndicator-module_pulse__1qujU","iconTopLeft":"FullscreenIndicator-module_iconTopLeft__2u7-j FullscreenIndicator-module_icon__2Ddof","iconTopRight":"FullscreenIndicator-module_iconTopRight__14nUk FullscreenIndicator-module_icon__2Ddof","iconBottomRight":"FullscreenIndicator-module_iconBottomRight__lEtN6 FullscreenIndicator-module_icon__2Ddof","iconBottomLeft":"FullscreenIndicator-module_iconBottomLeft__voLm_ FullscreenIndicator-module_icon__2Ddof"};
+
+function FullscreenIndicator(_ref) {
+  var visible = _ref.visible,
+      onClick = _ref.onClick;
+  var size = 50;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$3.indicator, _defineProperty({}, styles$3.visible, visible))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.icons
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.iconTopLeft
+  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
+    width: size,
+    height: size
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.iconTopRight
+  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
+    width: size,
+    height: size
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.iconBottomRight
+  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
+    width: size,
+    height: size
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.iconBottomLeft
+  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
+    width: size,
+    height: size
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.text
+  }, "360\xB0"));
+}
+
+var styles$4 = {"full":"Viewer-module_full__1q18y","container":"Viewer-module_container__3eJ34 Viewer-module_full__1q18y","controls":"Viewer-module_controls__3BTof","spinner":"Viewer-module_spinner__2oRve","spin":"Viewer-module_spin__3jBR2","isLoading":"Viewer-module_isLoading__sQuGw"};
+
+function _extends$4() {
+  _extends$4 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$4.apply(this, arguments);
+}
 var SpinnerIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24"
-  }, props), React.createElement("circle", {
+  }, props), /*#__PURE__*/React.createElement("circle", {
     cx: "12",
     cy: "12",
     r: "10",
     stroke: "currentColor",
     strokeWidth: "4",
     opacity: ".23"
-  }), React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
     opacity: ".75"
@@ -187,7 +301,10 @@ function Viewer(_ref) {
   var imageFile = _ref.imageFile,
       viewerRef = _ref.viewerRef,
       initialYaw = _ref.initialYaw,
-      initialPitch = _ref.initialPitch;
+      initialPitch = _ref.initialPitch,
+      hidePanoramaIndicator = _ref.hidePanoramaIndicator,
+      onReady = _ref.onReady,
+      onFullscreen = _ref.onFullscreen;
   var elRef = useRef();
   var initialYawRef = useRef(initialYaw);
   var initialPitchRef = useRef(initialPitch);
@@ -201,7 +318,9 @@ function Viewer(_ref) {
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       isFullscreen = _useState4[0],
-      setIsFullscreen = _useState4[1]; // When toggling to fullscreen mode, this component renders to a
+      setIsFullscreen = _useState4[1];
+
+  var isPhonePlatform = usePhonePlatform(); // When toggling to fullscreen mode, this component renders to a
   // portal div in the body of the document. We do not want to recreate
   // the PanoViewer instead to keep its current state (pitch, yaw etc.).
   // We therefore initialize the PanoViewer on a detached DOM element
@@ -211,11 +330,10 @@ function Viewer(_ref) {
   // - the parent Viewer component is mounted
   // - Fullscreen component switches between using the portal or not
 
-
   function appendViewerTo(parentNode) {
     if (!elRef.current) {
       elRef.current = document.createElement('div');
-      elRef.current.className = styles$2.full;
+      elRef.current.className = styles$4.full;
       viewerRef.current = new PanoViewer(elRef.current, {
         image: imageFile.urls.ultra,
         projectionType: imageFile.configuration.projection === 'equirectangular_stereo' ? PanoViewer.PROJECTION_TYPE.STEREOSCOPIC_EQUI : PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR,
@@ -227,6 +345,10 @@ function Viewer(_ref) {
       viewerRef.current.on(PanoViewer.EVENTS.READY, function () {
         viewerRef.current.updateViewportDimensions();
         setIsLoading(false);
+
+        if (onReady) {
+          onReady();
+        }
       });
     }
 
@@ -313,6 +435,10 @@ function Viewer(_ref) {
   }
 
   function enterFullscreen() {
+    if (onFullscreen) {
+      onFullscreen();
+    }
+
     if (screenfull.isEnabled) {
       screenfull.request();
     }
@@ -329,38 +455,32 @@ function Viewer(_ref) {
     setIsFullscreen(false);
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement(Fullscreen, {
-      isFullscreen: isFullscreen
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$2.container,
-      onKeyDown: preventDefaultForArrowUpDown
-    },
-    /*#__PURE__*/
-    React.createElement(DOMNodeContainer, {
-      className: styles$2.full,
-      onUpdate: function onUpdate(el) {
-        return appendViewerTo(el);
-      }
-    })),
-    /*#__PURE__*/
-    React.createElement(SpinnerIcon, {
-      className: classNames(styles$2.spinner, _defineProperty({}, styles$2.isLoading, isLoading))
-    }),
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$2.controls
-    },
-    /*#__PURE__*/
-    React.createElement(ToggleFullscreenButton, {
-      isFullscreen: isFullscreen,
-      onEnter: enterFullscreen,
-      onExit: exitFullscreen
-    })))
-  );
+  return /*#__PURE__*/React.createElement(Fullscreen, {
+    isFullscreen: isFullscreen
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$4.container,
+    onKeyDown: preventDefaultForArrowUpDown,
+    onClick: function onClick() {
+      isPhonePlatform && enterFullscreen();
+    }
+  }, /*#__PURE__*/React.createElement(DOMNodeContainer, {
+    className: styles$4.full,
+    onUpdate: function onUpdate(el) {
+      return appendViewerTo(el);
+    }
+  })), /*#__PURE__*/React.createElement(SpinnerIcon, {
+    className: classNames(styles$4.spinner, _defineProperty({}, styles$4.isLoading, isLoading))
+  }), (!isPhonePlatform || isFullscreen) && /*#__PURE__*/React.createElement("div", {
+    className: styles$4.controls
+  }, /*#__PURE__*/React.createElement(ToggleFullscreenButton, {
+    isFullscreen: isFullscreen,
+    onEnter: enterFullscreen,
+    onExit: exitFullscreen
+  })), /*#__PURE__*/React.createElement(PanoramaIndicator, {
+    visible: !isLoading && !isPhonePlatform && !isFullscreen && !hidePanoramaIndicator
+  }), /*#__PURE__*/React.createElement(FullscreenIndicator, {
+    visible: !isLoading && isPhonePlatform && !isFullscreen
+  }));
 }
 var DOMNodeContainer = React.memo(function (_ref2) {
   var className = _ref2.className,
@@ -373,13 +493,10 @@ var DOMNodeContainer = React.memo(function (_ref2) {
       current.removeChild(current.firstChild);
     };
   });
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      ref: ref,
-      className: className
-    })
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className
+  });
 }, function () {
   return true;
 });

data/entry_types/scrolled/package/frontend/{Wavesurfer-0adf5667.js → Wavesurfer-7d9cf1b7.js}

@@ -1,38 +1,9 @@
 import React, { Component } from 'react';
+import { b as _inherits, a as _classCallCheck, d as _assertThisInitialized, _ as _createClass, c as _createSuper } from './createSuper-d0f30da3.js';
 import Measure from 'react-measure';
-import { b as _inherits, a as _classCallCheck, e as _assertThisInitialized, _ as _createClass, c as _getPrototypeOf, d as _possibleConstructorReturn } from './getPrototypeOf-63c7c8e8.js';
 import assign from 'deep-assign';
 import WaveSurfer from 'wavesurfer.js';
 
-function _createSuper(Derived) {
-  function isNativeReflectConstruct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
-
-    try {
-      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-
-  return function () {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (isNativeReflectConstruct()) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
-}
 var EVENTS = ['audioprocess', 'error', 'finish', 'loading', 'mouseup', 'pause', 'play', 'ready', 'scroll', 'seek', 'zoom'];
 
 function capitaliseFirstLetter(string) {
@@ -41,9 +12,7 @@ function capitaliseFirstLetter(string) {
   }).join('');
 }
 
-var Wavesurfer =
-/*#__PURE__*/
-function (_Component) {
+var Wavesurfer = /*#__PURE__*/function (_Component) {
   _inherits(Wavesurfer, _Component);
 
   var _super = _createSuper(Wavesurfer);
@@ -62,14 +31,14 @@ function (_Component) {
       throw new Error('WaveSurfer is undefined!');
     }
 
-    _this._wavesurfer = Object.create(WaveSurfer);
     _this._loadMediaElt = _this._loadMediaElt.bind(_assertThisInitialized(_this));
     _this._loadAudio = _this._loadAudio.bind(_assertThisInitialized(_this));
     _this._seekTo = _this._seekTo.bind(_assertThisInitialized(_this));
 
     _this._handleResize = function () {
       if (_this.state.isReady) {
-        _this._wavesurfer.refresh();
+        // Force redraw
+        _this._wavesurfer.zoom(false);
       }
     };
 
@@ -89,8 +58,7 @@ function (_Component) {
         options.backend = 'MediaElement';
       }
 
-      this._wavesurfer.init(options); // file was loaded, wave was drawn
-
+      this._wavesurfer = WaveSurfer.create(options); // file was loaded, wave was drawn
 
       this._wavesurfer.on('ready', function () {
         _this2.setState({
@@ -110,7 +78,7 @@ function (_Component) {
 
 
         if (_this2.props.playing) {
-          _this2.wavesurfer.play();
+          _this2._wavesurfer.play();
         } // set initial zoom
 
 
@@ -319,21 +287,15 @@ function (_Component) {
     key: "_measureIfResponsive",
     value: function _measureIfResponsive(children) {
       if (this.props.responsive) {
-        return (
-          /*#__PURE__*/
-          React.createElement(Measure, {
-            client: true,
-            onResize: this._handleResize
-          }, function (_ref) {
-            var measureRef = _ref.measureRef;
-            return (
-              /*#__PURE__*/
-              React.createElement("div", {
-                ref: measureRef
-              }, children)
-            );
-          })
-        );
+        return /*#__PURE__*/React.createElement(Measure, {
+          client: true,
+          onResize: this._handleResize
+        }, function (_ref) {
+          var measureRef = _ref.measureRef;
+          return /*#__PURE__*/React.createElement("div", {
+            ref: measureRef
+          }, children);
+        });
       }
 
       return children;
@@ -349,11 +311,7 @@ function (_Component) {
           isReady: _this4.state.isReady
         });
       }) : false;
-      return this._measureIfResponsive(
-      /*#__PURE__*/
-      React.createElement("div", null,
-      /*#__PURE__*/
-      React.createElement("div", {
+      return this._measureIfResponsive( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         ref: function ref(c) {
           _this4.wavesurferEl = c;
         }