pageflow 17.1.0 → 17.2.0

data/entry_types/scrolled/package/frontend/{Viewer-0345ce57.js → Viewer-cc8d4072.js}

@@ -1,27 +1,25 @@
 import 'pageflow/frontend';
 import React, { useMemo, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { b as _defineProperty, T as ThemeIcon, e as _objectWithoutProperties, _ as _slicedToArray } from './ThemeIcon-81f2f066.js';
 import classNames from 'classnames';
-import 'use-context-selector';
-import 'reselect';
-import 'slugify';
+import 'pageflow-scrolled/entryState';
 import 'i18n-js';
-import { u as useBrowserFeature } from './PhonePlatformContext-9f76033e.js';
-import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-788e9cdb.js';
-import { u as usePhonePlatform } from './usePhonePlatform-c2ba875d.js';
+import './i18n-493cd2a6.js';
+import { u as useBrowserFeature } from './PhonePlatformContext-035a99fa.js';
+import { T as ThemeIcon } from './ThemeIcon-ab834849.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-30fd1124.js';
+import { u as usePhonePlatform } from './usePhonePlatform-ce9ff08d.js';
 import { PanoViewer } from '@egjs/view360';
 import screenfull from 'screenfull';
 
 var styles = {"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 () {
+function Fullscreen({
+  isFullscreen,
+  children
+}) {
+  const root = useMemo(() => document.getElementById('fullscreenRoot'), []);
+  useEffect(() => {
     if (isFullscreen) {
       document.body.style.overflow = 'hidden';
     } else {
@@ -39,10 +37,13 @@ function Fullscreen(_ref) {
 
 var styles$1 = {"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;
+function PanoramaIndicator({
+  visible
+}) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$1.indicator, _defineProperty({}, styles$1.visible, visible))
+    className: classNames(styles$1.indicator, {
+      [styles$1.visible]: visible
+    })
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$1.arrowLeft
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ThemeIcon, {
@@ -58,11 +59,14 @@ function PanoramaIndicator(_ref) {
 
 var styles$2 = {"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;
+function FullscreenIndicator({
+  visible,
+  onClick
+}) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$2.indicator, _defineProperty({}, styles$2.visible, visible))
+    className: classNames(styles$2.indicator, {
+      [styles$2.visible]: visible
+    })
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.icons
   }, /*#__PURE__*/React.createElement("div", {
@@ -88,7 +92,6 @@ function FullscreenIndicator(_ref) {
 
 var styles$3 = {"full":"Viewer-module_full__1q18y","container":"Viewer-module_container__3eJ34 Viewer-module_full__1q18y","spinner":"Viewer-module_spinner__2oRve","spin":"Viewer-module_spin__3jBR2","isLoading":"Viewer-module_isLoading__sQuGw"};
 
-var _excluded = ["styles"];
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -103,48 +106,42 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-var SpinnerIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24"
-  }, props), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10",
-    stroke: "currentColor",
-    strokeWidth: "4",
-    opacity: ".23"
-  }), /*#__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"
-  }));
-});
+var SpinnerIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "10",
+  stroke: "currentColor",
+  strokeWidth: "4",
+  opacity: ".23"
+}), /*#__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"
+})));
 
-function Viewer(_ref) {
-  var imageFile = _ref.imageFile,
-    viewerRef = _ref.viewerRef,
-    initialYaw = _ref.initialYaw,
-    initialPitch = _ref.initialPitch,
-    hidePanoramaIndicator = _ref.hidePanoramaIndicator,
-    onReady = _ref.onReady,
-    onFullscreen = _ref.onFullscreen;
-  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];
-  var isPhonePlatform = usePhonePlatform();
+function Viewer({
+  imageFile,
+  viewerRef,
+  initialYaw,
+  initialPitch,
+  hidePanoramaIndicator,
+  onReady,
+  onFullscreen
+}) {
+  const elRef = useRef();
+  const initialYawRef = useRef(initialYaw);
+  const initialPitchRef = useRef(initialPitch);
+  const touchSupport = useBrowserFeature('touch support');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const 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
@@ -167,7 +164,7 @@ function Viewer(_ref) {
         yaw: initialYawRef.current,
         pitch: initialPitchRef.current
       });
-      viewerRef.current.on(PanoViewer.EVENTS.READY, function () {
+      viewerRef.current.on(PanoViewer.EVENTS.READY, () => {
         viewerRef.current.updateViewportDimensions();
         setIsLoading(false);
         if (onReady) {
@@ -178,8 +175,8 @@ function Viewer(_ref) {
     parentNode.appendChild(elRef.current);
     viewerRef.current.updateViewportDimensions();
   }
-  useEffect(function () {
-    return function () {
+  useEffect(() => {
+    return () => {
       if (elRef.current) {
         viewerRef.current.destroy();
         viewerRef.current = null;
@@ -187,7 +184,7 @@ function Viewer(_ref) {
       }
     };
   }, [viewerRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (initialYawRef.current !== initialYaw) {
       initialYawRef.current = initialYaw;
       viewerRef.current.lookAt({
@@ -195,7 +192,7 @@ function Viewer(_ref) {
       }, 200);
     }
   }, [initialYaw, viewerRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (initialPitchRef.current !== initialPitch) {
       initialPitchRef.current = initialPitch;
       viewerRef.current.lookAt({
@@ -203,7 +200,7 @@ function Viewer(_ref) {
       }, 200);
     }
   }, [initialPitch, viewerRef]);
-  useEffect(function () {
+  useEffect(() => {
     function onChange() {
       if (!screenfull.isFullscreen) {
         setIsFullscreen(false);
@@ -211,21 +208,17 @@ function Viewer(_ref) {
     }
     if (screenfull.isEnabled) {
       screenfull.on('change', onChange);
-      return function () {
-        return screenfull.off('change', onChange);
-      };
+      return () => screenfull.off('change', onChange);
     }
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     function onChange() {
       viewerRef.current.updateViewportDimensions();
     }
     window.addEventListener('resize', onChange);
-    return function () {
-      return window.removeEventListener('resize', onChange);
-    };
+    return () => window.removeEventListener('resize', onChange);
   }, [viewerRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (isFullscreen) {
       viewerRef.current.setTouchDirection(PanoViewer.TOUCH_DIRECTION.ALL);
       viewerRef.current.setGyroMode(PanoViewer.GYRO_MODE.YAWPITCH);
@@ -272,16 +265,16 @@ function Viewer(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.container,
     onKeyDown: preventDefaultForArrowUpDown,
-    onClick: function onClick() {
+    onClick: () => {
       isPhonePlatform && enterFullscreen();
     }
   }, /*#__PURE__*/React.createElement(DOMNodeContainer, {
     className: styles$3.full,
-    onUpdate: function onUpdate(el) {
-      return appendViewerTo(el);
-    }
+    onUpdate: el => appendViewerTo(el)
   })), /*#__PURE__*/React.createElement(SpinnerIcon, {
-    className: classNames(styles$3.spinner, _defineProperty({}, styles$3.isLoading, isLoading))
+    className: classNames(styles$3.spinner, {
+      [styles$3.isLoading]: isLoading
+    })
   }), (!isPhonePlatform || isFullscreen) && /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
     isFullscreen: isFullscreen,
     onEnter: enterFullscreen,
@@ -292,14 +285,15 @@ function Viewer(_ref) {
     visible: !isLoading && isPhonePlatform && !isFullscreen
   }));
 }
-var DOMNodeContainer = React.memo(function (_ref2) {
-  var className = _ref2.className,
-    onUpdate = _ref2.onUpdate;
-  var ref = useRef();
-  useEffect(function () {
-    var current = ref.current;
+const DOMNodeContainer = React.memo(function ({
+  className,
+  onUpdate
+}) {
+  const ref = useRef();
+  useEffect(() => {
+    const current = ref.current;
     onUpdate(current);
-    return function () {
+    return () => {
       current.removeChild(current.firstChild);
     };
   });
@@ -307,8 +301,6 @@ var DOMNodeContainer = React.memo(function (_ref2) {
     ref: ref,
     className: className
   });
-}, function () {
-  return true;
-});
+}, () => true);
 
 export default Viewer;

data/entry_types/scrolled/package/frontend/Wavesurfer-656e3c36.js

@@ -0,0 +1,302 @@
+import React, { Component } from 'react';
+import Measure from 'react-measure';
+import assign from 'deep-assign';
+import WaveSurfer from 'wavesurfer.js';
+
+const EVENTS = ['audioprocess', 'error', 'finish', 'loading', 'mouseup', 'pause', 'play', 'ready', 'scroll', 'seek', 'zoom'];
+function capitaliseFirstLetter(string) {
+  return string.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
+}
+class Wavesurfer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isReady: false
+    };
+    if (typeof WaveSurfer === undefined) {
+      throw new Error('WaveSurfer is undefined!');
+    }
+    this._loadMediaElt = this._loadMediaElt.bind(this);
+    this._loadAudio = this._loadAudio.bind(this);
+    this._seekTo = this._seekTo.bind(this);
+    this._handleResize = () => {
+      if (this.state.isReady) {
+        // Force redraw
+        this._wavesurfer.zoom(false);
+      }
+    };
+  }
+  componentDidMount() {
+    const options = assign({}, this.props.options, {
+      container: this.wavesurferEl
+    });
+
+    // media element loading is only supported by MediaElement backend
+    if (this.props.mediaElt) {
+      options.backend = 'MediaElement';
+    }
+
+    // Do not draw waveform behind translucent progress waveform.
+
+    this._wavesurfer = WaveSurfer.create(options);
+    this._wavesurfer.drawer.updateProgress = function (position) {
+      this.style(this.progressWave, {
+        width: position + 'px'
+      });
+      this.style(this.wrapper.lastChild, {
+        clipPath: 'rect(auto auto auto ' + position + 'px)'
+      });
+    };
+
+    // Prevent Wavesurfer from calling load on media element when peak
+    // data is present. Otherwise play progress is reset lazy loading
+    // re-initializes the player after having moved off-screen.
+    // Wavesurfer already skips that if preload is"none". We can thus
+    // use this to suppress the unwanted load. If media is already
+    // playing, we need to fire play event to make Wavesurfer start
+    // the timer that updates waveform progress.
+
+    const origLoad = this._wavesurfer.backends.MediaElement.prototype._load;
+    this._wavesurfer.backends.MediaElement.prototype._load = function (media, peaks) {
+      origLoad.call(this, media, peaks, 'none');
+      if (!media.paused) {
+        this.fireEvent('play');
+      }
+    };
+
+    // file was loaded, wave was drawn
+    this._wavesurfer.on('ready', () => {
+      this.setState({
+        isReady: true,
+        pos: this.props.pos
+      });
+
+      // set initial position
+      if (this.props.pos) {
+        this._seekTo(this.props.pos);
+      }
+
+      // set initial volume
+      if (this.props.volume != null) {
+        this._wavesurfer.setVolume(this.props.volume);
+      }
+
+      // set initial playing state
+      if (this.props.playing) {
+        this._wavesurfer.play();
+      }
+
+      // set initial zoom
+      if (this.props.zoom) {
+        this._wavesurfer.zoom(this.props.zoom);
+      }
+    });
+    this._wavesurfer.on('audioprocess', pos => {
+      this.setState({
+        pos
+      });
+      this.props.onPosChange({
+        wavesurfer: this._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', pos => {
+      const formattedPos = this._posToSec(pos);
+      this.setState({
+        formattedPos
+      });
+      this.props.onPosChange({
+        wavesurfer: this._wavesurfer,
+        originalArgs: [formattedPos]
+      });
+    });
+
+    // hook up events to callback handlers passed in as props
+    EVENTS.forEach(e => {
+      const propCallback = this.props[`on${capitaliseFirstLetter(e)}`];
+      const wavesurfer = this._wavesurfer;
+      if (propCallback) {
+        this._wavesurfer.on(e, (...originalArgs) => {
+          propCallback({
+            wavesurfer,
+            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
+  componentDidUpdate(prevProps) {
+    // update audioFile
+    if (prevProps.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);
+    }
+  }
+  componentWillUnmount() {
+    // remove listeners
+    EVENTS.forEach(e => {
+      this._wavesurfer.un(e);
+    });
+
+    // destroy wavesurfer instance
+    this._wavesurfer.destroy();
+  }
+
+  // receives seconds and transforms this to the position as a float 0-1
+  _secToPos(sec) {
+    return 1 / this._wavesurfer.getDuration() * sec;
+  }
+
+  // receives position as a float 0-1 and transforms this to seconds
+  _posToSec(pos) {
+    return pos * this._wavesurfer.getDuration();
+  }
+
+  // pos is in seconds, the 0-1 proportional position we calculate here …
+  _seekTo(sec) {
+    const 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
+  _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
+  _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
+        to be either HTMLElement, string or file/blob`);
+    }
+  }
+  _measureIfResponsive(children) {
+    if (this.props.responsive) {
+      return /*#__PURE__*/React.createElement(Measure, {
+        client: true,
+        onResize: this._handleResize
+      }, ({
+        measureRef
+      }) => /*#__PURE__*/React.createElement("div", {
+        ref: measureRef
+      }, children));
+    }
+    return children;
+  }
+  render() {
+    const childrenWithProps = this.props.children ? React.Children.map(this.props.children, child => React.cloneElement(child, {
+      wavesurfer: this._wavesurfer,
+      isReady: this.state.isReady
+    })) : false;
+    return this._measureIfResponsive( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      ref: c => {
+        this.wavesurferEl = c;
+      }
+    }), childrenWithProps));
+  }
+}
+Wavesurfer.defaultProps = {
+  playing: false,
+  pos: 0,
+  options: WaveSurfer.defaultParams,
+  responsive: true,
+  onPosChange: () => {}
+};
+
+export default Wavesurfer;