@arcblock/ux 0.78.25 → 1.6.59

package/src/Terminal/player.css

@@ -0,0 +1,378 @@
+.terminal-player,
+.terminal {
+  display: inline-block;
+}
+
+.terminal .xterm .xterm-viewport {
+  overflow-y: hidden !important;
+}
+
+.terminal-frame {
+  position: relative;
+}
+
+/*//// [ Reset ] ////*/
+
+.terminal div {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+/*//// [ Window ] ////*/
+
+.terminal-frame.terminal-window {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  border: 1px solid #b3b3b3;
+  box-shadow: 0px 0px 18px #b3b3b3;
+  margin: 18px;
+  overflow: hidden;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar {
+  -moz-border-top-left-radius: 6px;
+  -moz-border-top-right-radius: 6px;
+  -webkit-border-top-left-radius: 6px;
+  -webkit-border-top-right-radius: 6px;
+  background: #e8e8e8;
+  border-bottom: 1px solid #b1aeb1;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border-top: 1px solid #f3f1f3;
+  color: #3b4247;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  height: 22px;
+  line-height: 22px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .buttons {
+  left: 8px;
+  line-height: 0px;
+  position: absolute;
+  top: 3.5px;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .close-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ff5c5c;
+  border-radius: 50%;
+  border: 1px solid #e33e41;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .minimize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ffbd4c;
+  border-radius: 50%;
+  border: 1px solid #e09e3e;
+  display: inline-block;
+  height: 12px;
+  margin-left: 4px;
+  width: 12px;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .maximize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #00ca56;
+  border-radius: 50%;
+  border: 1px solid #14ae46;
+  display: inline-block;
+  height: 12px;
+  margin-left: 4px;
+  width: 12px;
+}
+
+.terminal-frame.terminal-window .terminal-body {
+  background-color: #1d1d1d;
+  padding: 10px;
+}
+
+/*//// [ Floating ] ////*/
+
+.terminal-frame.terminal-floating {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  background-color: #1d1d1d;
+  border-radius: 6px;
+  box-shadow: 0px 0px 18px #b3b3b3;
+  margin: 18px;
+  overflow: hidden;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar {
+  color: white;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  height: 34px;
+  line-height: 34px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .buttons {
+  left: 13px;
+  line-height: 0px;
+  position: absolute;
+  top: 9px;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .close-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ff5c5c;
+  border-radius: 50%;
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .minimize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ffbd4c;
+  border-radius: 50%;
+  display: inline-block;
+  height: 15px;
+  line-height: 10px;
+  margin-left: 4px;
+  width: 15px;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .maximize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #00ca56;
+  border-radius: 50%;
+  display: inline-block;
+  height: 15px;
+  line-height: 10px;
+  margin-left: 4px;
+  width: 15px;
+}
+
+.terminal-frame.terminal-floating .terminal-body {
+  padding: 20px;
+}
+
+/*//// [ Solid ] ////*/
+
+.terminal-frame.terminal-solid {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  background-color: #1d1d1d;
+  border-radius: 6px;
+  box-shadow: 0px 0px 18px #b3b3b3;
+  margin: 18px;
+  overflow: hidden;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar {
+  color: white;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar .title {
+  margin: 15px 15px 15px;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar .title:empty {
+  display: none;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar .buttons {
+  display: none;
+}
+
+.terminal-frame.terminal-solid .terminal-body {
+  padding: 20px;
+}
+
+/*//// [ Player ] ////*/
+
+.terminal-player {
+  position: relative;
+  font-size: 0;
+}
+
+.terminal-player .controller {
+  background: #45484d;
+  bottom: 0px;
+  display: none;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  height: 40px;
+  position: absolute;
+  width: 100%;
+  z-index: 20;
+  background: #222222;
+  transition: height ease 200ms;
+  -webkit-transition: height ease 200ms;
+  -moz-transition: height ease 200ms;
+  -o-transition: height ease 200ms;
+}
+
+.terminal-player.controls .controller {
+  display: block;
+}
+
+.terminal-player.playing .controller {
+  height: 0px;
+  overflow: hidden;
+}
+
+.terminal-player.playing:hover .controller {
+  height: 40px;
+  overflow: hidden;
+}
+
+.terminal-player .play,
+.terminal-player .pause {
+  fill: #cacaca;
+  float: left;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  width: 40px;
+}
+
+.terminal-player .play .icon,
+.terminal-player .pause .icon {
+  border-color: transparent transparent transparent #cacaca;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  height: 15px;
+}
+
+.terminal-player .pause .icon {
+  border-style: double;
+  border-width: 0px 0px 0px 12px;
+  margin-top: 11px;
+}
+
+.terminal-player .play .icon {
+  border-style: solid;
+  border-width: 8px 0px 8px 13px;
+  margin-top: 10px;
+}
+
+.terminal-player .pause {
+  display: none;
+}
+
+.terminal-player.playing .play {
+  display: none;
+}
+
+.terminal-player.playing .pause {
+  display: inline-block;
+}
+
+.terminal-player .timer {
+  color: #cacaca;
+  float: right;
+  line-height: 40px;
+  padding: 0 10px;
+}
+
+.terminal-player .progressbar-wrapper {
+  height: 40px;
+  line-height: 38px;
+  overflow: hidden;
+}
+
+.terminal-player .progressbar {
+  background-color: #424242;
+  display: inline-block;
+  height: 7px;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+}
+
+.terminal-player.started .progressbar {
+  cursor: pointer;
+}
+
+.terminal-player .progress {
+  background-color: #cacaca;
+  height: 7px;
+  position: relative;
+  width: 0%;
+}
+
+.terminal-player .cover {
+  cursor: pointer;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 10;
+}
+
+.terminal-player .start svg {
+  cursor: pointer;
+  fill: #eaeaea;
+  height: 130px;
+  left: 50%;
+  margin-left: -65px;
+  margin-top: -65px;
+  position: absolute;
+  top: 50%;
+  width: 130px;
+  z-index: 20;
+  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4));
+  -webkit-filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4));
+}
+
+.terminal-player.small .start svg {
+  height: 60px;
+  margin-left: -30px;
+  margin-top: -30px;
+  width: 60px;
+}
+
+.terminal-player.framed .start svg {
+  transform: translate(0px, 8px);
+  -webkit-transform: translate(0px, 8px);
+  -moz-transform: translate(0px, 8px);
+  -o-transform: translate(0px, 8px);
+  -ms-transform: translate(0px, 8px);
+}
+
+.terminal-player .cover:hover + .start svg,
+.terminal-player .start:hover svg {
+  fill: white;
+}
+
+.terminal-player.started .cover,
+.terminal-player.started .start {
+  display: none;
+}
+
+.terminal-player .terminal-watermark {
+  z-index: 99999;
+}

package/src/Terminal/util.js

@@ -0,0 +1,167 @@
+/**
+ * Adjust the delays of the frames, considering to the options
+ *
+ * - frameDelay
+ *   - Delay between frames in ms
+ *   - If the value is `auto` use the actual recording delays
+ *
+ * - maxIdleTime
+ *   - Maximum delay between frames in ms
+ *   - Ignored if the `frameDelay` isn't set to `auto`
+ *   - Set to `auto` to prevnt limiting the max idle time
+ *
+ * - speedFactor
+ *   - Multiply the frames delays by this factor
+ */
+export const formatFrames = (frames, options) => {
+  frames.forEach(x => {
+    let { delay } = x;
+
+    // Adjust the delay according to the options
+    if (options.frameDelay !== 'auto') {
+      delay = options.frameDelay;
+    } else if (options.maxIdleTime !== 'auto' && delay > options.maxIdleTime) {
+      delay = options.maxIdleTime;
+    }
+
+    // Apply speedFactor
+    delay *= options.speedFactor;
+
+    // Set the adjusted delay
+    x.delay = delay;
+  });
+
+  // Calculate and set the duration, startTime, and endTime for each frame
+  let currentTime = 0;
+  const framesCount = frames.length;
+  frames.forEach((x, index) => {
+    // Set the duration (the delay of the next frame)
+    // The % is used to take the delay of the first frame
+    // as the duration of the last frame
+    const duration = frames[(index + 1) % framesCount].delay;
+
+    // Set timing values for the current frame
+    x.duration = duration;
+    x.startTime = currentTime;
+    x.endTime = currentTime + duration;
+
+    currentTime += duration;
+  });
+
+  // Total duration
+  const totalDuration = frames.reduce((sum, x) => sum + x.delay, 0);
+
+  return { frames, totalDuration };
+};
+
+/**
+ * Get the frame's index at a specific time
+ */
+export const findFrameAt = (frames, time, fromIndex) => {
+  let frame = null;
+
+  if (typeof fromIndex === 'undefined') {
+    // eslint-disable-next-line no-param-reassign
+    fromIndex = 0;
+  }
+
+  for (let i = fromIndex; i < frames.length; i++) {
+    frame = frames[i];
+
+    if (frame.startTime <= time && time < frame.endTime) {
+      return i;
+    }
+  }
+
+  // The endTime of the final frame belongs to it
+  if (frame.startTime <= time && time <= frame.endTime) {
+    return frames.length - 1;
+  }
+
+  return -1;
+};
+
+/**
+ * Check if the time belongs to the frame's duration
+ *
+ * @param  {Number} time
+ * @param  {Number} frameIndex
+ * @return {Number}
+ */
+export const isFrameAt = (frames, time, frameIndex) => {
+  const frame = frames[frameIndex];
+
+  if (typeof frame === 'undefined') {
+    return false;
+  }
+
+  if (frame.startTime <= time && time < frame.endTime) {
+    return true;
+  }
+
+  return false;
+};
+
+export const formatTime = time => {
+  let minutes = Math.floor(time / 60000);
+  let seconds = parseInt((time - minutes * 60000) / 1000, 10);
+
+  if (minutes < 10) {
+    minutes = `0${minutes}`;
+  }
+  if (seconds < 10) {
+    seconds = `0${seconds}`;
+  }
+
+  return `${minutes}:${seconds}`;
+};
+
+export const getPlayerClass = (options, state) => {
+  const playerClass = ['terminal-player'];
+  if (options.controls) {
+    playerClass.push('controls');
+  }
+  if (options.frameBox.type) {
+    playerClass.push('framed');
+  }
+  if (options.rows < 10) {
+    playerClass.push('small');
+  }
+  if (state.isStarted) {
+    playerClass.push('started');
+  }
+  if (state.isPlaying) {
+    playerClass.push('playing');
+  }
+
+  return playerClass.filter(Boolean).join(' ');
+};
+
+export const getFrameClass = options => {
+  const frameClass = ['terminal-frame'];
+  if (options.frameBox.type) {
+    frameClass.push(`terminal-${options.frameBox.type}`);
+  }
+
+  return frameClass.join(' ');
+};
+
+export const defaultState = {
+  isPlaying: false,
+  isStarted: false,
+  isRendering: false,
+  requireReset: false,
+  currentFrame: -1,
+  currentTime: 0,
+  lastTickTime: null,
+};
+
+export const defaultOptions = {
+  realTiming: false,
+  speedFactor: 1.0,
+  controls: true,
+  repeat: false,
+  autoplay: false,
+  thumbnailTime: 999999,
+  frameBox: {},
+};

package/src/Terminal/xterm.css

@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */
+
+/**
+ *  Default styles for xterm.js
+ */
+
+.xterm {
+  font-feature-settings: 'liga' 0;
+  position: relative;
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+  outline: none;
+}
+
+.xterm .xterm-helpers {
+  position: absolute;
+  top: 0;
+  /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+  z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+  /*
+     * HACK: to fix IE's blinking cursor
+     * Move textarea out of the screen to the far left, so that the cursor is not visible.
+     */
+  position: absolute;
+  opacity: 0;
+  left: -9999em;
+  top: 0;
+  width: 0;
+  height: 0;
+  z-index: -5;
+  /** Prevent wrapping so the IME appears against the textarea at the correct position */
+  white-space: nowrap;
+  overflow: hidden;
+  resize: none;
+}
+
+.xterm .composition-view {
+  /* TODO: Composition position got messed up somewhere */
+  background: #000;
+  color: #fff;
+  display: none;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.xterm .composition-view.active {
+  display: block;
+}
+
+.xterm .xterm-viewport {
+  /* On OS X this is required in order for the scroll bar to appear fully opaque */
+  background-color: #000;
+  overflow-y: scroll;
+  cursor: default;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.xterm .xterm-screen {
+  position: relative;
+}
+
+.xterm .xterm-screen canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.xterm .xterm-scroll-area {
+  visibility: hidden;
+}
+
+.xterm-char-measure-element {
+  display: inline-block;
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: -9999em;
+  line-height: normal;
+}
+
+.xterm {
+  cursor: text;
+}
+
+.xterm.enable-mouse-events {
+  /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+  cursor: default;
+}
+
+.xterm.xterm-cursor-pointer {
+  cursor: pointer;
+}
+
+.xterm.column-select.focus {
+  /* Column selection mode */
+  cursor: crosshair;
+}
+
+.xterm .xterm-accessibility,
+.xterm .xterm-message {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  color: transparent;
+}
+
+.xterm .live-region {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.xterm-dim {
+  opacity: 0.5;
+}
+
+.xterm-underline {
+  text-decoration: underline;
+}