videomail-client 8.3.1 → 8.3.2

package/src/js/wrappers/visuals.js

@@ -1,410 +0,0 @@
-import hidden from "hidden";
-import h from "hyperscript";
-import inherits from "inherits";
-
-import Events from "../events";
-import EventEmitter from "../util/eventEmitter";
-import RecorderInsides from "./visuals/inside/recorderInsides";
-import Notifier from "./visuals/notifier";
-import Recorder from "./visuals/recorder";
-import Replay from "./visuals/replay";
-
-const Visuals = function (container, options) {
-  EventEmitter.call(this, options, "Visuals");
-
-  const self = this;
-
-  // can be overwritten with setter fn
-  const replay = new Replay(this, options);
-
-  const recorder = new Recorder(this, replay, options);
-  const recorderInsides = new RecorderInsides(this, options);
-
-  const notifier = new Notifier(this, options);
-
-  const { debug } = options;
-
-  let visualsElement;
-  let built;
-
-  function buildNoScriptTag() {
-    let noScriptElement = container.querySelector("noscript");
-
-    if (!noScriptElement) {
-      noScriptElement = h("noscript");
-      noScriptElement.innerHTML = "Please enable Javascript";
-
-      visualsElement.appendChild(noScriptElement);
-    }
-  }
-
-  function buildChildren() {
-    debug("Visuals: buildChildren()");
-
-    buildNoScriptTag();
-
-    if (!options.playerOnly) {
-      notifier.build();
-      recorderInsides.build();
-    }
-
-    replay.build();
-
-    debug("Visuals: built.");
-  }
-
-  function initEvents() {
-    if (!options.playerOnly) {
-      debug("Visuals: initEvents()");
-
-      self
-        .on(Events.USER_MEDIA_READY, function () {
-          built = true;
-          self.endWaiting();
-          container.enableForm(false);
-        })
-        .on(Events.PREVIEW, () => {
-          self.endWaiting();
-        })
-        .on(Events.BLOCKING, function (blockingOptions) {
-          if (!blockingOptions.hideForm && !options.adjustFormOnBrowserError) {
-            /*
-             * do nothing, user still can enter form inputs
-             * can be useful when you are on i.E. seeflow's contact page and
-             * still want to tick off the webcam option
-             */
-          } else {
-            container.disableForm(true);
-          }
-        })
-        .on(Events.PREVIEW_SHOWN, function () {
-          container.validate(true);
-        })
-        .on(Events.LOADED_META_DATA, function () {
-          correctDimensions();
-        })
-        .on(Events.ERROR, function (err) {
-          if (err.removeDimensions && err.removeDimensions()) {
-            removeDimensions();
-          }
-        });
-    }
-  }
-
-  function correctDimensions() {
-    if (options.video.stretch) {
-      removeDimensions();
-    } else {
-      visualsElement.style.width = `${self.getRecorderWidth(true)}px`;
-      visualsElement.style.height = `${self.getRecorderHeight(true)}px`;
-    }
-  }
-
-  function removeDimensions() {
-    visualsElement.style.width = "auto";
-    visualsElement.style.height = "auto";
-  }
-
-  this.getRatio = function () {
-    if (visualsElement.clientWidth) {
-      // special case for safari, see getRatio() in recorder
-      return visualsElement.clientHeight / visualsElement.clientWidth;
-    }
-
-    return 0;
-  };
-
-  function isRecordable() {
-    return !self.isNotifying() && !replay.isShown() && !self.isCountingDown();
-  }
-
-  this.isCountingDown = function () {
-    return recorderInsides.isCountingDown();
-  };
-
-  this.build = function () {
-    visualsElement = container.querySelector(`.${options.selectors.visualsClass}`);
-
-    if (!visualsElement) {
-      visualsElement = h(`div.${options.selectors.visualsClass}`);
-
-      const buttonsElement = container.querySelector(
-        `.${options.selectors.buttonsClass}`,
-      );
-
-      /*
-       * make sure it's placed before the buttons, but only if it's a child
-       * element of the container = inside the container
-       */
-      if (buttonsElement && !container.isOutsideElementOf(buttonsElement)) {
-        container.insertBefore(visualsElement, buttonsElement);
-      } else {
-        container.appendChild(visualsElement);
-      }
-    }
-
-    /*
-     * do not hide visuals element so that apps can give it a predefined
-     * width or height through css but hide all children
-     */
-
-    visualsElement.classList.add("visuals");
-
-    correctDimensions();
-
-    !built && initEvents();
-    buildChildren();
-
-    // needed for replay handling and container.isOutsideElementOf()
-    self.parentNode = visualsElement.parentNode;
-
-    built = true;
-  };
-
-  this.querySelector = function (selector) {
-    return visualsElement && visualsElement.querySelector(selector);
-  };
-
-  this.appendChild = function (child) {
-    visualsElement && visualsElement.appendChild(child);
-  };
-
-  this.removeChild = function (child) {
-    visualsElement.removeChild(child);
-  };
-
-  this.reset = function () {
-    this.endWaiting();
-    recorder.reset();
-  };
-
-  this.beginWaiting = function () {
-    container.beginWaiting();
-  };
-
-  this.endWaiting = function () {
-    container.endWaiting();
-  };
-
-  this.stop = function (params) {
-    recorder.stop(params);
-    recorderInsides.hidePause();
-  };
-
-  this.back = function (params, cb) {
-    if (!cb && params) {
-      cb = params;
-      params = {};
-    }
-
-    replay.hide();
-    notifier.hide();
-
-    if (params && params.keepHidden) {
-      recorder.hide();
-      cb && cb();
-    } else {
-      recorder.back(cb);
-    }
-  };
-
-  this.recordAgain = function () {
-    this.back(function () {
-      if (options.loadUserMediaOnRecord) {
-        self.once(Events.SERVER_READY, function () {
-          self.record();
-        });
-      } else {
-        self.once(Events.USER_MEDIA_READY, function () {
-          self.record();
-        });
-      }
-    });
-  };
-
-  this.unload = function (e) {
-    try {
-      recorder.unload(e);
-      recorderInsides.unload(e);
-      replay.unload(e);
-
-      built = false;
-    } catch (exc) {
-      this.emit(Events.ERROR, exc);
-    }
-  };
-
-  this.isNotifying = function () {
-    return notifier.isVisible();
-  };
-
-  this.isReplayShown = function () {
-    return replay.isShown();
-  };
-
-  this.pause = function (params) {
-    recorder.pause(params);
-    recorderInsides.showPause();
-  };
-
-  this.resume = function () {
-    if (recorderInsides.isCountingDown()) {
-      recorderInsides.resumeCountdown();
-    } else {
-      recorder.resume();
-    }
-
-    recorderInsides.hidePause();
-  };
-
-  this.pauseOrResume = function () {
-    if (isRecordable.call(this)) {
-      if (this.isRecording()) {
-        this.pause();
-      } else if (recorder.isPaused()) {
-        this.resume();
-      } else if (recorder.isReady()) {
-        this.record();
-      }
-    }
-  };
-
-  this.recordOrStop = function () {
-    if (isRecordable()) {
-      if (this.isRecording()) {
-        this.stop();
-      } else if (recorder.isReady()) {
-        this.record();
-      }
-    }
-  };
-
-  this.record = function () {
-    if (options.video.countdown) {
-      this.emit(Events.COUNTDOWN);
-      recorderInsides.startCountdown(recorder.record.bind(recorder));
-    } else {
-      recorder.record();
-    }
-  };
-
-  this.getRecorder = function () {
-    return recorder;
-  };
-
-  this.getReplay = function () {
-    return replay;
-  };
-
-  this.validate = function () {
-    return recorder.validate() && this.isReplayShown();
-  };
-
-  this.getRecordingStats = function () {
-    return recorder.getRecordingStats();
-  };
-
-  this.getAudioSampleRate = function () {
-    return recorder.getAudioSampleRate();
-  };
-
-  this.isPaused = function () {
-    return recorder.isPaused();
-  };
-
-  this.error = function (err) {
-    notifier.error(err);
-  };
-
-  this.hide = function () {
-    if (visualsElement) {
-      hidden(visualsElement, true);
-      this.emit(Events.HIDE);
-    }
-  };
-
-  this.isHidden = function () {
-    if (!built) {
-      return true;
-    } else if (visualsElement) {
-      return hidden(visualsElement);
-    }
-  };
-
-  this.showVisuals = function () {
-    visualsElement && hidden(visualsElement, false);
-  };
-
-  this.show = function () {
-    !this.isReplayShown() && visualsElement && recorder.build();
-    this.showVisuals();
-  };
-
-  this.showReplayOnly = function () {
-    !this.isReplayShown() && replay.show();
-
-    this.show();
-    recorder.hide();
-    notifier.hide();
-  };
-
-  this.isRecorderUnloaded = function () {
-    return recorder.isUnloaded();
-  };
-
-  this.isConnecting = function () {
-    return recorder.isConnecting();
-  };
-
-  this.getRecorderWidth = function (responsive) {
-    return recorder.getRecorderWidth(responsive);
-  };
-
-  this.getRecorderHeight = function (responsive, useBoundingClientRect) {
-    return recorder.getRecorderHeight(responsive, useBoundingClientRect);
-  };
-
-  this.limitWidth = function (width) {
-    return container.limitWidth(width, options);
-  };
-
-  this.limitHeight = function (height) {
-    return container.limitHeight(height);
-  };
-
-  this.calculateWidth = function (options) {
-    return container.calculateWidth(options);
-  };
-
-  this.calculateHeight = function (options) {
-    return container.calculateHeight(options);
-  };
-
-  this.getReplay = function () {
-    return replay;
-  };
-
-  this.getBoundingClientRect = function () {
-    // fixes https://github.com/binarykitchen/videomail-client/issues/126
-    return visualsElement && visualsElement.getBoundingClientRect();
-  };
-
-  this.checkTimer = function (intervalSum) {
-    recorderInsides.checkTimer(intervalSum);
-  };
-
-  this.isNotifierBuilt = function () {
-    return notifier && notifier.isBuilt();
-  };
-
-  this.isReplayShown = replay.isShown.bind(replay);
-  this.hideReplay = replay.hide.bind(replay);
-  this.hideRecorder = recorder.hide.bind(recorder);
-  this.isRecording = recorder.isRecording.bind(recorder);
-  this.isUserMediaLoaded = recorder.isUserMediaLoaded.bind(recorder);
-  this.isConnected = recorder.isConnected.bind(recorder);
-};
-
-inherits(Visuals, EventEmitter);
-
-export default Visuals;

package/src/styles/css/main.min.css.js

@@ -1 +0,0 @@
-module.exports='@-webkit-keyframes blink{0%{opacity:.9}35%{opacity:.9}50%{opacity:.1}85%{opacity:.1}to{opacity:.9}}@keyframes blink{0%{opacity:.9}35%{opacity:.9}50%{opacity:.1}85%{opacity:.1}to{opacity:.9}}.IIV::-webkit-media-controls-play-button,.IIV::-webkit-media-controls-start-playback-button{opacity:0;pointer-events:none;width:5px}.videomail .visuals{position:relative}.videomail .visuals video.replay{height:100%;width:100%}.videomail .countdown,.videomail .pausedHeader,.videomail .pausedHint,.videomail .recordNote,.videomail .recordTimer{height:auto;margin:0}.videomail .countdown,.videomail .facingMode,.videomail .paused,.videomail .recordNote,.videomail .recordTimer,.videomail noscript{position:absolute;z-index:100}.videomail .countdown,.videomail .pausedHeader,.videomail .pausedHint,.videomail .recordNote,.videomail .recordTimer,.videomail noscript{font-weight:700}.videomail .countdown,.videomail .paused,.videomail noscript{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:100%}.videomail .countdown,.videomail .pausedHeader,.videomail .pausedHint{letter-spacing:4px;text-align:center;text-shadow:-2px 0 #fff,0 2px #fff,2px 0 #fff,0 -2px #fff}.videomail .countdown,.videomail .pausedHeader{font-size:460%;opacity:.9}.videomail .pausedHint{font-size:150%}.videomail .facingMode{background:rgba(30,30,30,.5);border:none;bottom:.6em;color:hsla(0,0%,96%,.9);font-family:monospace;font-size:1.2em;outline:none;padding:.1em .3em;right:.7em;-webkit-transition:all .2s ease;transition:all .2s ease;z-index:10}.videomail .facingMode:hover{background:rgba(50,50,50,.7);cursor:pointer}.videomail .recordNote,.videomail .recordTimer{background:hsla(0,0%,4%,.8);color:#00d814;font-family:monospace;opacity:.9;padding:.3em .4em;right:.7em;-webkit-transition:all 1s ease;transition:all 1s ease}.videomail .recordNote.near,.videomail .recordTimer.near{color:#eb9369}.videomail .recordNote.nigh,.videomail .recordTimer.nigh{color:#ea4b2a}.videomail .recordTimer{top:.7em}.videomail .recordNote{top:3.6em}.videomail .recordNote:before{-webkit-animation:blink 1s infinite;animation:blink 1s infinite;content:"REC"}.videomail .notifier{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden}.videomail .radioGroup{display:block}.videomail video{margin-bottom:0}.videomail video.userMedia{background-color:rgba(50,50,50,.1)}'

package/src/styles/styl/keyframes/blink.styl

@@ -1,16 +0,0 @@
-@keyframes blink
-    0%
-        opacity .9
-
-    35%
-        opacity .9
-
-    50%
-        opacity .1
-
-    85%
-        opacity .1
-
-    100%
-        opacity .9
-

package/src/styles/styl/main.styl

@@ -1,126 +0,0 @@
-bright-orange-color = #eb9369
-orange-color        = #ea4b2a
-green-color         = #00d814
-
-@import 'keyframes/*'
-
-// https://github.com/bfred-it/iphone-inline-video#usage
-.IIV::-webkit-media-controls-play-button
-.IIV::-webkit-media-controls-start-playback-button
-    opacity 0
-    pointer-events none
-    width 5px
-
-.videomail
-
-    .visuals
-        position relative
-
-        video.replay
-            width 100%
-            height 100%
-
-    .countdown
-    .recordTimer
-    .recordNote
-    .pausedHeader
-    .pausedHint
-        margin 0
-        height auto
-
-    .countdown
-    .recordTimer
-    .recordNote
-    .paused
-    .facingMode
-    noscript
-        position absolute
-        z-index 100
-
-    .countdown
-    .recordTimer
-    .recordNote
-    .pausedHeader
-    .pausedHint
-    noscript
-        font-weight bold
-
-    .countdown
-    .paused
-    noscript
-        width       100%
-        top         50%
-        transform   translateY(-50%)
-
-    .pausedHeader
-    .pausedHint
-    .countdown
-        text-align  center
-        letter-spacing 4px
-        text-shadow -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white
-
-    .pausedHeader
-    .countdown
-        opacity   .9
-        font-size 460%
-
-    .pausedHint
-        font-size 150%
-
-    .facingMode
-        right .7em
-        bottom .6em
-        background rgba(30, 30, 30, .5)
-        color rgba(245, 245, 245, .9)
-        font-family monospace
-        border none
-        padding .1em .3em
-        font-size 1.2em
-        z-index 10
-        outline none
-        transition all .2s ease
-
-        &:hover
-          background rgba(50, 50, 50, .7)
-          cursor pointer
-
-
-    .recordTimer
-    .recordNote
-        right           .7em
-        background      rgba(10, 10, 10, .8)
-        padding         .3em .4em
-        transition      all 1s ease
-        color           green-color
-        font-family     monospace
-        opacity         .9
-
-        &.near
-            color bright-orange-color
-
-        &.nigh
-            color orange-color
-
-    .recordTimer
-        top .7em
-
-    .recordNote
-        top 3.6em
-
-        &:before
-            content   "REC"
-            animation blink 1s infinite
-
-    .notifier
-        overflow   hidden
-        box-sizing border-box
-        height     100%
-
-    .radioGroup
-        display block
-
-    video
-        margin-bottom 0
-
-        &.userMedia
-            background-color rgba(50, 50, 50, .1)