pageflow 17.1.0 → 17.2.0

data/entry_types/scrolled/package/frontend/Wavesurfer-b753b838.js

@@ -0,0 +1,385 @@
+import React, { Component } from 'react';
+import Measure from 'react-measure';
+import PropTypes from 'prop-types';
+import assign from 'deep-assign';
+import WaveSurfer from 'wavesurfer.js';
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/PlayerControls/WaveformPlayerControls/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('');
+}
+function positiveIntegerProptype(props, propName, componentName) {
+  const n = props[propName];
+  if (n !== undefined && (typeof n !== 'number' || n !== parseInt(n, 10) || n < 0)) {
+    return new Error(`Invalid ${propName} supplied to ${componentName},
+      expected a positive integer`);
+  }
+  return null;
+}
+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,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 312,
+          columnNumber: 9
+        }
+      }, ({
+        measureRef
+      }) => /*#__PURE__*/React.createElement("div", {
+        ref: measureRef,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 314,
+          columnNumber: 13
+        }
+      }, 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", {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 338,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: c => {
+        this.wavesurferEl = c;
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 339,
+        columnNumber: 9
+      }
+    }), childrenWithProps));
+  }
+}
+Wavesurfer.propTypes = {
+  playing: PropTypes.bool,
+  pos: PropTypes.number,
+  audioFile: (props, propName, componentName) => {
+    const prop = props[propName];
+    if (prop && typeof prop !== 'string' && !(prop instanceof global.Blob) && !(prop instanceof global.File)) {
+      return new Error(`Invalid ${propName} supplied to ${componentName}
+        expected either string or file/blob`);
+    }
+    return null;
+  },
+  mediaElt: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(global.HTMLElement)]),
+  audioPeaks: PropTypes.array,
+  volume: PropTypes.number,
+  zoom: PropTypes.number,
+  responsive: PropTypes.bool,
+  onPosChange: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
+  options: PropTypes.shape({
+    audioRate: PropTypes.number,
+    backend: PropTypes.oneOf(['WebAudio', 'MediaElement']),
+    barWidth: (props, propName, componentName) => {
+      const prop = props[propName];
+      if (prop !== undefined && typeof prop !== 'number') {
+        return new Error(`Invalid ${propName} supplied to ${componentName}
+          expected either undefined or number`);
+      }
+      return null;
+    },
+    cursorColor: PropTypes.string,
+    cursorWidth: positiveIntegerProptype,
+    dragSelection: PropTypes.bool,
+    fillParent: PropTypes.bool,
+    height: positiveIntegerProptype,
+    hideScrollbar: PropTypes.bool,
+    interact: PropTypes.bool,
+    loopSelection: PropTypes.bool,
+    mediaControls: PropTypes.bool,
+    minPxPerSec: positiveIntegerProptype,
+    normalize: PropTypes.bool,
+    pixelRatio: PropTypes.number,
+    progressColor: PropTypes.string,
+    scrollParent: PropTypes.bool,
+    skipLength: PropTypes.number,
+    waveColor: PropTypes.string,
+    autoCenter: PropTypes.bool
+  })
+};
+Wavesurfer.defaultProps = {
+  playing: false,
+  pos: 0,
+  options: WaveSurfer.defaultParams,
+  responsive: true,
+  onPosChange: () => {}
+};
+
+export default Wavesurfer;

data/entry_types/scrolled/package/frontend/commenting.css

@@ -0,0 +1 @@
+.ContentElementDecorator-module_wrapper__omtl-{position:relative}.ContentElementDecorator-module_selected__1xIK9{box-shadow:0 0 0 2px var(--ui-accent-color),0 0 0 calc(2px + .25rem) var(--ui-accent-color-lighter)}.ContentElementDecorator-module_badge__3RBr6{position:absolute;bottom:-.5em;left:-.5em;transform:translate(-50%,50%);z-index:5}.ContentElementDecorator-module_badgeFlush__1lR32{left:0;transform:translateY(50%)}.EditableTextHighlight-module_activeOverlay__6krun{box-shadow:0 0 0 2px var(--ui-selection-color),0 0 0 calc(2px + .25rem) var(--ui-selection-color-light)}.EditableTextHighlight-module_clickable__1nF8U{cursor:pointer}.SectionDecorator-module_wrapper__3oQuz{position:relative}.SectionDecorator-module_commentBadge__2MYch{box-sizing:border-box;position:relative;z-index:4;display:flex;align-items:flex-end;height:44px;padding:0 0 10px 10px;pointer-events:none}.SectionDecorator-module_commentBadge__2MYch>*{pointer-events:auto}.SectionDecorator-module_commentBadge__2MYch.SectionDecorator-module_sticky__M1Elo{position:sticky;bottom:0}.SectionDecorator-module_wrapper__3oQuz>section{margin-bottom:-44px}.SectionDecorator-module_addButton__3-FuB{border:none;background:none;padding:0;cursor:pointer}.SectionDecorator-module_addButton__3-FuB:focus .SectionDecorator-module_pill__1wMMW,.SectionDecorator-module_addButton__3-FuB:hover .SectionDecorator-module_pill__1wMMW{opacity:1}.AddCommentOverlay-module_highlight__1VAyf{position:absolute;inset:0;cursor:pointer;background-color:var(--ui-selection-color-lightest);border:none;outline:none;box-shadow:0 0 0 2px var(--ui-selection-color),0 0 0 calc(2px + .25rem) var(--ui-selection-color-light);display:flex;align-items:center;justify-content:center}.AddCommentOverlay-module_pill__K6tzV{display:flex;align-items:center;justify-content:center;gap:.25rem;width:2.25rem;border-radius:9999px;background:var(--ui-accent-color);color:var(--ui-on-accent-color);font-family:var(--ui-font-family);font-size:.875rem;font-weight:600;padding:.375rem .75rem;box-shadow:0 0 0 .25rem var(--ui-accent-color-lighter);opacity:.9}.AddCommentOverlay-module_highlight__1VAyf:focus .AddCommentOverlay-module_pill__K6tzV,.AddCommentOverlay-module_highlight__1VAyf:hover .AddCommentOverlay-module_pill__K6tzV{opacity:1}.Popover-module_badge__16NvD{display:inline-flex;pointer-events:auto}.Popover-module_threadList__2nA5p{min-width:18rem;max-width:24rem;font-family:var(--ui-font-family);font-size:var(--ui-font-size);color:var(--ui-on-surface-color)}.AddCommentHint-module_hint__1tsMa{position:absolute;bottom:100%;left:0;right:0;pointer-events:none;display:flex;justify-content:center;padding-bottom:.5rem}.AddCommentHint-module_tooltip__28laa{background-color:#222;color:#fff;border-radius:4px;font-family:var(--ui-font-family);font-size:var(--ui-font-size);line-height:1;padding:10px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);position:relative}.AddCommentHint-module_tooltip__28laa:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#222}.FloatingToolbar-module_toolbar__3iLrb{position:fixed;bottom:.75rem;right:.75rem;z-index:1100;display:flex;align-items:center;gap:.5rem;padding:.25rem;background:var(--ui-primary-color);border:1px solid var(--ui-on-primary-color-lightest);border-radius:.5rem;box-shadow:var(--ui-box-shadow-md);view-transition-name:comment-toolbar}.FloatingToolbar-module_toggleIcon__tzwy_{view-transition-name:comment-toolbar-icon}::view-transition-new(comment-toolbar),::view-transition-old(comment-toolbar){width:100%;height:100%;object-fit:fill}.FloatingToolbar-module_puck__1N8t9{position:fixed;bottom:0;right:4rem;z-index:1100;display:flex;align-items:center;justify-content:center;color:var(--ui-on-primary-color);background:var(--ui-primary-color);border:1px solid var(--ui-on-primary-color-lightest);border-bottom:none;border-top-left-radius:.375rem;border-top-right-radius:.375rem;box-shadow:var(--ui-box-shadow-md);padding:.5rem;cursor:pointer;opacity:.6;animation:FloatingToolbar-module_puckIdle__25dov .5s ease .5s backwards;view-transition-name:comment-toolbar}.FloatingToolbar-module_puck__1N8t9:focus-visible,.FloatingToolbar-module_puck__1N8t9:hover{opacity:1;animation:none}.FloatingToolbar-module_unreadDot__3Ykgi{position:absolute;top:-.25rem;right:-.25rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--ui-warning-color);box-shadow:0 0 0 1px var(--ui-on-surface-color-lighter);view-transition-name:comment-toolbar-unread-dot}@keyframes FloatingToolbar-module_puckIdle__25dov{0%{opacity:1}to{opacity:.6}}.FloatingToolbar-module_navigation__2oEYm{display:flex;align-items:center;gap:.25rem}.FloatingToolbar-module_button__2_Q49{font-family:var(--ui-font-family);color:var(--ui-on-primary-color);background:transparent;border:none;border-radius:.125rem;padding:.25rem;cursor:pointer;display:flex;align-items:center}.FloatingToolbar-module_button__2_Q49:disabled{opacity:.3;cursor:default}.FloatingToolbar-module_count__37jUH,.FloatingToolbar-module_segmented__34nUI{font-size:.875rem}.FloatingToolbar-module_count__37jUH{font-family:var(--ui-font-family);font-variant-numeric:tabular-nums;color:var(--ui-on-primary-color-light);padding:0 .25rem;margin:0 -.25rem 0 .5rem;white-space:nowrap}.FloatingToolbar-module_chevronUp__tCL4E{transform:rotate(180deg)}.FloatingToolbar-module_chevronDown__2NELa{transform:rotate(0deg)}.FloatingToolbar-module_segmented__34nUI{display:flex;align-items:center;gap:.25rem;border:1px solid var(--ui-on-primary-color-lightest);border-radius:.375rem}.FloatingToolbar-module_segment__q3hcg{font-family:var(--ui-font-family);display:flex;align-items:center;gap:.25rem;color:var(--ui-on-primary-color-light);background:transparent;border:none;padding:.5rem;cursor:pointer;white-space:nowrap}.FloatingToolbar-module_segment__q3hcg:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.FloatingToolbar-module_segment__q3hcg:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.FloatingToolbar-module_segment__q3hcg[aria-pressed=true]{color:var(--ui-on-primary-color);background:var(--ui-on-primary-color-lightest)}.FloatingToolbar-module_segmentCount__2Nsqk{font-variant-numeric:tabular-nums;border-radius:.125rem;padding:0 .25rem;background:var(--ui-on-primary-color-lightest)}.FloatingToolbar-module_segment__q3hcg[aria-pressed=true] .FloatingToolbar-module_segmentCount__2Nsqk{background:var(--ui-on-primary-color-lighter)}.FloatingToolbar-module_addButton__2tgNA{color:var(--ui-on-accent-color);background:var(--ui-accent-color);border-radius:.375rem;padding:.5rem;margin-left:.5rem}.PopoversColumn-module_floating__2fpOt{pointer-events:none}.ActivityButton-module_button__3BNt8{position:relative}.ActivityButton-module_unseenDot__1w8QA{position:absolute;top:.125rem;right:.125rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--ui-warning-color);box-shadow:0 0 0 1px var(--ui-primary-color)}.ActivityButton-module_panel__1tcQU{display:flex;flex-direction:column;width:24rem;overflow:hidden;font-family:var(--ui-font-family);font-size:var(--ui-font-size);line-height:normal;text-align:left;color:var(--ui-on-surface-color);background:var(--ui-surface-color);border-radius:.5rem;box-shadow:var(--ui-box-shadow-md);--review-first-day-heading-margin-top:0;--review-thread-box-shadow:none;--review-thread-border-color:var(--ui-on-surface-color-lightest);--review-thread-border:1px solid var(--review-thread-border-color);--review-resolved-threads-pill-align:flex-end;--review-resolved-threads-pill-color:var(--ui-on-surface-color);--review-resolved-threads-pill-background-color:transparent}.ActivityButton-module_scroller__2RTTE{min-height:0;overflow-y:auto;padding:.75rem}