pageflow 15.2.2 → 15.6.1

data/entry_types/scrolled/package/frontend/Viewer-e49e7807.js

@@ -0,0 +1,387 @@
+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 'use-context-selector';
+import 'reselect';
+import 'i18n-js';
+import 'slugify';
+import { u as useBrowserFeature } from './useBrowserFeature-91a4c29d.js';
+import { PanoViewer } from '@egjs/view360';
+import screenfull from 'screenfull';
+
+function _extends() {
+  _extends = 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.apply(this, arguments);
+}
+var EnterFullscreenIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return 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", {
+    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"
+  }));
+});
+
+function _extends$1() {
+  _extends$1 = 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$1.apply(this, arguments);
+}
+var ExitFullscreenIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return 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", {
+    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"
+  }));
+});
+
+var styles = {"button":"ToggleFullscreenButton-module_button__3iBr8 utils-module_unstyledButton__3rgne"};
+
+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))
+  );
+}
+
+function icon(props) {
+  if (props.isFullscreen) {
+    return (
+      /*#__PURE__*/
+      React.createElement(ExitFullscreenIcon, null)
+    );
+  } else {
+    return (
+      /*#__PURE__*/
+      React.createElement(EnterFullscreenIcon, null)
+    );
+  }
+}
+
+var styles$1 = {"wrapper":"Fullscreen-module_wrapper__300hJ"};
+
+function Fullscreen(_ref) {
+  var isFullscreen = _ref.isFullscreen,
+      children = _ref.children;
+  var root = useMemo(function () {
+    return document.getElementById('fullscreenRoot');
+  }, []);
+  useEffect(function () {
+    if (isFullscreen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'initial';
+    }
+  }, [isFullscreen]);
+
+  if (isFullscreen) {
+    return ReactDOM.createPortal(
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$1.wrapper
+    }, children), root);
+  } else {
+    return children;
+  }
+}
+
+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++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$2.apply(this, arguments);
+}
+var SpinnerIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, props), React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "4",
+    opacity: ".23"
+  }), 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"
+  }));
+});
+
+function Viewer(_ref) {
+  var imageFile = _ref.imageFile,
+      viewerRef = _ref.viewerRef,
+      initialYaw = _ref.initialYaw,
+      initialPitch = _ref.initialPitch;
+  var elRef = useRef();
+  var initialYawRef = useRef(initialYaw);
+  var initialPitchRef = useRef(initialPitch);
+  var touchSupport = useBrowserFeature('touch support');
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isFullscreen = _useState4[0],
+      setIsFullscreen = _useState4[1]; // 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
+  // and render a component called DOMNodeContainer which appends the
+  // element on each render. React.memo causes the DOMNodeContainer to
+  // render only when either
+  // - 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;
+      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,
+        touchDirection: touchSupport ? PanoViewer.TOUCH_DIRECTION.YAW : PanoViewer.TOUCH_DIRECTION.ALL,
+        useZoom: false,
+        yaw: initialYawRef.current,
+        pitch: initialPitchRef.current
+      });
+      viewerRef.current.on(PanoViewer.EVENTS.READY, function () {
+        viewerRef.current.updateViewportDimensions();
+        setIsLoading(false);
+      });
+    }
+
+    parentNode.appendChild(elRef.current);
+    viewerRef.current.updateViewportDimensions();
+  }
+
+  useEffect(function () {
+    return function () {
+      if (elRef.current) {
+        viewerRef.current.destroy();
+        viewerRef.current = null;
+        elRef.current = null;
+      }
+    };
+  }, [viewerRef]);
+  useEffect(function () {
+    if (initialYawRef.current !== initialYaw) {
+      initialYawRef.current = initialYaw;
+      viewerRef.current.lookAt({
+        yaw: initialYaw
+      }, 200);
+    }
+  }, [initialYaw, viewerRef]);
+  useEffect(function () {
+    if (initialPitchRef.current !== initialPitch) {
+      initialPitchRef.current = initialPitch;
+      viewerRef.current.lookAt({
+        pitch: initialPitch
+      }, 200);
+    }
+  }, [initialPitch, viewerRef]);
+  useEffect(function () {
+    function onChange() {
+      if (!screenfull.isFullscreen) {
+        setIsFullscreen(false);
+      }
+    }
+
+    if (screenfull.isEnabled) {
+      screenfull.on('change', onChange);
+      return function () {
+        return screenfull.off('change', onChange);
+      };
+    }
+  }, []);
+  useEffect(function () {
+    function onChange() {
+      viewerRef.current.updateViewportDimensions();
+    }
+
+    window.addEventListener('resize', onChange);
+    return function () {
+      return window.removeEventListener('resize', onChange);
+    };
+  }, [viewerRef]);
+  useEffect(function () {
+    if (isFullscreen) {
+      viewerRef.current.setTouchDirection(PanoViewer.TOUCH_DIRECTION.ALL);
+      viewerRef.current.setGyroMode(PanoViewer.GYRO_MODE.YAWPITCH);
+      viewerRef.current.setUseZoom(true);
+    } else {
+      if (touchSupport) {
+        viewerRef.current.setTouchDirection(PanoViewer.TOUCH_DIRECTION.YAW);
+        viewerRef.current.lookAt({
+          pitch: 0,
+          fov: 65
+        });
+      } else {
+        viewerRef.current.lookAt({
+          fov: 65
+        });
+      }
+
+      viewerRef.current.setGyroMode(PanoViewer.GYRO_MODE.NONE);
+      viewerRef.current.setUseZoom(false);
+    }
+  }, [isFullscreen, viewerRef, touchSupport]);
+
+  function preventDefaultForArrowUpDown(event) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault();
+    }
+  }
+
+  function enterFullscreen() {
+    if (screenfull.isEnabled) {
+      screenfull.request();
+    }
+
+    setIsFullscreen(true);
+    viewerRef.current.enableSensor();
+  }
+
+  function exitFullscreen() {
+    if (screenfull.isEnabled) {
+      screenfull.exit();
+    }
+
+    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
+    })))
+  );
+}
+var DOMNodeContainer = React.memo(function (_ref2) {
+  var className = _ref2.className,
+      onUpdate = _ref2.onUpdate;
+  var ref = useRef();
+  useEffect(function () {
+    var current = ref.current;
+    onUpdate(current);
+    return function () {
+      current.removeChild(current.firstChild);
+    };
+  });
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      ref: ref,
+      className: className
+    })
+  );
+}, function () {
+  return true;
+});
+
+export default Viewer;

data/entry_types/scrolled/package/frontend/Wavesurfer-0adf5667.js

@@ -0,0 +1,375 @@
+import React, { Component } from 'react';
+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) {
+  return string.split('-').map(function (part) {
+    return part.charAt(0).toUpperCase() + part.slice(1);
+  }).join('');
+}
+
+var Wavesurfer =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(Wavesurfer, _Component);
+
+  var _super = _createSuper(Wavesurfer);
+
+  function Wavesurfer(props) {
+    var _this;
+
+    _classCallCheck(this, Wavesurfer);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      isReady: false
+    };
+
+    if (typeof WaveSurfer === undefined) {
+      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();
+      }
+    };
+
+    return _this;
+  }
+
+  _createClass(Wavesurfer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var options = assign({}, this.props.options, {
+        container: this.wavesurferEl
+      }); // media element loading is only supported by MediaElement backend
+
+      if (this.props.mediaElt) {
+        options.backend = 'MediaElement';
+      }
+
+      this._wavesurfer.init(options); // file was loaded, wave was drawn
+
+
+      this._wavesurfer.on('ready', function () {
+        _this2.setState({
+          isReady: true,
+          pos: _this2.props.pos
+        }); // set initial position
+
+
+        if (_this2.props.pos) {
+          _this2._seekTo(_this2.props.pos);
+        } // set initial volume
+
+
+        if (_this2.props.volume != null) {
+          _this2._wavesurfer.setVolume(_this2.props.volume);
+        } // set initial playing state
+
+
+        if (_this2.props.playing) {
+          _this2.wavesurfer.play();
+        } // set initial zoom
+
+
+        if (_this2.props.zoom) {
+          _this2._wavesurfer.zoom(_this2.props.zoom);
+        }
+      });
+
+      this._wavesurfer.on('audioprocess', function (pos) {
+        _this2.setState({
+          pos: pos
+        });
+
+        _this2.props.onPosChange({
+          wavesurfer: _this2._wavesurfer,
+          originalArgs: [pos]
+        });
+      }); // `audioprocess` is not fired when seeking, so we have to plug into the
+      // `seek` event and calculate the equivalent in seconds (seek event
+      // receives a position float 0-1) – See the README.md for explanation why we
+      // need this
+
+
+      this._wavesurfer.on('seek', function (pos) {
+        var formattedPos = _this2._posToSec(pos);
+
+        _this2.setState({
+          formattedPos: formattedPos
+        });
+
+        _this2.props.onPosChange({
+          wavesurfer: _this2._wavesurfer,
+          originalArgs: [formattedPos]
+        });
+      }); // hook up events to callback handlers passed in as props
+
+
+      EVENTS.forEach(function (e) {
+        var propCallback = _this2.props["on".concat(capitaliseFirstLetter(e))];
+
+        var wavesurfer = _this2._wavesurfer;
+
+        if (propCallback) {
+          _this2._wavesurfer.on(e, function () {
+            for (var _len = arguments.length, originalArgs = new Array(_len), _key = 0; _key < _len; _key++) {
+              originalArgs[_key] = arguments[_key];
+            }
+
+            propCallback({
+              wavesurfer: wavesurfer,
+              originalArgs: originalArgs
+            });
+          });
+        }
+      }); // if audioFile prop, load file
+
+      if (this.props.audioFile) {
+        this._loadAudio(this.props.audioFile, this.props.audioPeaks);
+      } // if mediaElt prop, load media Element
+
+
+      if (this.props.mediaElt) {
+        this._loadMediaElt(this.props.mediaElt, this.props.audioPeaks);
+      }
+    } // update wavesurfer rendering manually
+
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // update audioFile
+      if (this.props.audioFile !== this.props.audioFile) {
+        this._loadAudio(this.props.audioFile, this.props.audioPeaks);
+      } // update mediaElt
+
+
+      if (prevProps.mediaElt !== this.props.mediaElt) {
+        this._loadMediaElt(this.props.mediaElt, this.props.audioPeaks);
+      } // update peaks
+
+
+      if (prevProps.audioPeaks !== this.props.audioPeaks) {
+        if (this.props.mediaElt) {
+          this._loadMediaElt(prevProps.mediaElt, this.props.audioPeaks);
+        } else {
+          this._loadAudio(this.props.audioFile, this.props.audioPeaks);
+        }
+      } // update position
+
+
+      if (this.props.pos && this.state.isReady && prevProps.pos !== this.props.pos && this.props.pos !== this.state.pos) {
+        this._seekTo(this.props.pos);
+      } // update playing state
+
+
+      if (this.props.playing !== prevProps.playing) {
+        if (this.props.playing) {
+          this._wavesurfer.play();
+        } else {
+          this._wavesurfer.pause();
+        }
+      } // update volume
+
+
+      if (this.props.volume !== prevProps.volume) {
+        this._wavesurfer.setVolume(this.props.volume);
+      } // update volume
+
+
+      if (this.props.zoom !== prevProps.zoom) {
+        this._wavesurfer.zoom(this.props.zoom);
+      } // update audioRate
+
+
+      if (this.props.options.audioRate !== prevProps.options.audioRate) {
+        this._wavesurfer.setPlaybackRate(this.props.options.audioRate);
+      }
+
+      if (prevProps.options.waveColor !== this.props.options.waveColor) {
+        this._wavesurfer.setWaveColor(this.props.options.waveColor);
+      }
+
+      if (prevProps.options.progressColor !== this.props.options.progressColor) {
+        this._wavesurfer.setProgressColor(this.props.options.progressColor);
+      }
+
+      if (prevProps.options.cursorColor !== this.props.options.cursorColor) {
+        this._wavesurfer.setCursorColor(this.props.options.cursorColor);
+      }
+
+      if (prevProps.options.height !== this.props.options.height) {
+        this._wavesurfer.setHeight(this.props.options.height);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this3 = this;
+
+      // remove listeners
+      EVENTS.forEach(function (e) {
+        _this3._wavesurfer.un(e);
+      }); // destroy wavesurfer instance
+
+      this._wavesurfer.destroy();
+    } // receives seconds and transforms this to the position as a float 0-1
+
+  }, {
+    key: "_secToPos",
+    value: function _secToPos(sec) {
+      return 1 / this._wavesurfer.getDuration() * sec;
+    } // receives position as a float 0-1 and transforms this to seconds
+
+  }, {
+    key: "_posToSec",
+    value: function _posToSec(pos) {
+      return pos * this._wavesurfer.getDuration();
+    } // pos is in seconds, the 0-1 proportional position we calculate here …
+
+  }, {
+    key: "_seekTo",
+    value: function _seekTo(sec) {
+      var pos = this._secToPos(sec);
+
+      if (this.props.options.autoCenter) {
+        this._wavesurfer.seekAndCenter(pos);
+      } else {
+        this._wavesurfer.seekTo(pos);
+      }
+    } // load a media element selector or HTML element
+    // if selector, get the HTML element for it
+    // and pass to _loadAudio
+
+  }, {
+    key: "_loadMediaElt",
+    value: function _loadMediaElt(selectorOrElt, audioPeaks) {
+      if (selectorOrElt instanceof global.HTMLElement) {
+        this._loadAudio(selectorOrElt, audioPeaks);
+      } else {
+        // Ignore if media element cannot be found. There are edge cases
+        // where React already unmounted the corresponding media element,
+        // but the parent Waveform component still holds the old media
+        // element id.
+        if (global.document.querySelector(selectorOrElt)) {
+          this._loadAudio(global.document.querySelector(selectorOrElt), audioPeaks);
+        }
+      }
+    } // pass audio data to wavesurfer
+
+  }, {
+    key: "_loadAudio",
+    value: function _loadAudio(audioFileOrElt, audioPeaks) {
+      if (audioFileOrElt instanceof global.HTMLElement) {
+        // media element
+        this._wavesurfer.loadMediaElement(audioFileOrElt, audioPeaks);
+      } else if (typeof audioFileOrElt === 'string') {
+        // bog-standard string is handled by load method and ajax call
+        this._wavesurfer.load(audioFileOrElt, audioPeaks);
+      } else if (audioFileOrElt instanceof global.Blob || audioFileOrElt instanceof global.File) {
+        // blob or file is loaded with loadBlob method
+        this._wavesurfer.loadBlob(audioFileOrElt, audioPeaks);
+      } else {
+        throw new Error("Wavesurfer._loadAudio expects prop audioFile\n        to be either HTMLElement, string or file/blob");
+      }
+    }
+  }, {
+    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 children;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var childrenWithProps = this.props.children ? React.Children.map(this.props.children, function (child) {
+        return React.cloneElement(child, {
+          wavesurfer: _this4._wavesurfer,
+          isReady: _this4.state.isReady
+        });
+      }) : false;
+      return this._measureIfResponsive(
+      /*#__PURE__*/
+      React.createElement("div", null,
+      /*#__PURE__*/
+      React.createElement("div", {
+        ref: function ref(c) {
+          _this4.wavesurferEl = c;
+        }
+      }), childrenWithProps));
+    }
+  }]);
+
+  return Wavesurfer;
+}(Component);
+
+Wavesurfer.defaultProps = {
+  playing: false,
+  pos: 0,
+  options: WaveSurfer.defaultParams,
+  responsive: true,
+  onPosChange: function onPosChange() {}
+};
+
+export default Wavesurfer;