@arcblock/terminal 3.0.9 → 3.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Player.js +44 -44
- package/lib/Terminal.js +33 -39
- package/lib/terminal.css +1 -1
- package/package.json +4 -4
package/lib/Player.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as f, jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
2
|
+
import { useRef as v, useState as O, useReducer as W, useEffect as x } from "react";
|
|
3
3
|
import l from "prop-types";
|
|
4
4
|
import H from "@arcblock/react-hooks/lib/useInterval";
|
|
5
5
|
import { useSize as I } from "ahooks";
|
|
@@ -7,11 +7,11 @@ import y from "lodash/isUndefined";
|
|
|
7
7
|
import h from "lodash/noop";
|
|
8
8
|
import A from "./Terminal.js";
|
|
9
9
|
/* empty css */
|
|
10
|
-
import { defaultOptions as U, formatFrames as L, defaultState as X, isFrameAt as
|
|
11
|
-
function K({ ...
|
|
12
|
-
const
|
|
13
|
-
y(
|
|
14
|
-
const t = Object.assign({}, U,
|
|
10
|
+
import { defaultOptions as U, formatFrames as L, defaultState as X, isFrameAt as b, findFrameAt as F, getPlayerClass as _, getFrameClass as $, formatTime as G } from "./util.js";
|
|
11
|
+
function K({ ...P }) {
|
|
12
|
+
const a = Object.assign({}, P);
|
|
13
|
+
y(a.onComplete) && (a.onComplete = h), y(a.onStart) && (a.onStart = h), y(a.onStop) && (a.onStop = h), y(a.onPause) && (a.onPause = h), y(a.onTick) && (a.onTick = h), y(a.onJump) && (a.onJump = h);
|
|
14
|
+
const t = Object.assign({}, U, a.options), { frames: u, totalDuration: m } = L(a.frames, t), C = {
|
|
15
15
|
cols: t.cols,
|
|
16
16
|
rows: t.rows,
|
|
17
17
|
cursorStyle: t.cursorStyle,
|
|
@@ -22,96 +22,96 @@ function K({ ...C }) {
|
|
|
22
22
|
allowTransparency: !0,
|
|
23
23
|
scrollback: 0
|
|
24
24
|
// theme: options.theme,
|
|
25
|
-
},
|
|
25
|
+
}, R = (i, e) => {
|
|
26
26
|
switch (e.type) {
|
|
27
27
|
case "jump":
|
|
28
|
-
return { ...
|
|
28
|
+
return { ...i, isPlaying: !1, ...e.payload };
|
|
29
29
|
case "start":
|
|
30
|
-
return { ...
|
|
30
|
+
return { ...i, isStarted: !0, lastTickTime: Date.now() };
|
|
31
31
|
case "play":
|
|
32
32
|
return {
|
|
33
|
-
...
|
|
33
|
+
...i,
|
|
34
34
|
isPlaying: !0,
|
|
35
35
|
lastTickTime: Date.now(),
|
|
36
36
|
...e.payload
|
|
37
37
|
};
|
|
38
38
|
case "pause":
|
|
39
|
-
return { ...
|
|
39
|
+
return { ...i, isPlaying: !1, ...e.payload };
|
|
40
40
|
case "tickStart":
|
|
41
41
|
return {
|
|
42
|
-
...
|
|
42
|
+
...i,
|
|
43
43
|
isRendering: !0,
|
|
44
44
|
lastTickTime: Date.now(),
|
|
45
45
|
...e.payload
|
|
46
46
|
};
|
|
47
47
|
case "tickEnd":
|
|
48
48
|
return {
|
|
49
|
-
...
|
|
49
|
+
...i,
|
|
50
50
|
isRendering: !1,
|
|
51
51
|
lastTickTime: Date.now(),
|
|
52
52
|
...e.payload
|
|
53
53
|
};
|
|
54
54
|
case "reset":
|
|
55
55
|
return {
|
|
56
|
-
...
|
|
56
|
+
...i,
|
|
57
57
|
currentFrame: 0,
|
|
58
58
|
currentTime: 0,
|
|
59
59
|
...e.payload
|
|
60
60
|
};
|
|
61
61
|
default:
|
|
62
|
-
return { ...
|
|
62
|
+
return { ...i, lastTickTime: Date.now(), ...e.payload };
|
|
63
63
|
}
|
|
64
|
-
}, o =
|
|
65
|
-
|
|
64
|
+
}, o = v(null), k = v(null), d = v(null), [B, D] = O(0), M = I(document.body), [r, c] = W(R, X), j = M?.width || 0;
|
|
65
|
+
x(() => {
|
|
66
66
|
if (o.current)
|
|
67
67
|
try {
|
|
68
|
-
const
|
|
68
|
+
const i = 8.03305785123967, e = d.current.getBoundingClientRect();
|
|
69
69
|
let s = e.x < 0 ? e.width + e.x : e.width;
|
|
70
70
|
if (d.current.parentNode) {
|
|
71
|
-
const
|
|
72
|
-
e.width >
|
|
71
|
+
const N = d.current.parentNode.getBoundingClientRect();
|
|
72
|
+
e.width > N.width && (s = N.width);
|
|
73
73
|
}
|
|
74
74
|
t.controls && (s -= 12);
|
|
75
|
-
const T = Math.ceil(s /
|
|
75
|
+
const T = Math.ceil(s / i), E = Math.min(Math.max(T, 40), t.cols);
|
|
76
76
|
o.current.resize(E, t.rows);
|
|
77
77
|
} catch {
|
|
78
78
|
}
|
|
79
|
-
}, [j,
|
|
80
|
-
const
|
|
81
|
-
const s = u[
|
|
79
|
+
}, [j, B]);
|
|
80
|
+
const S = (i, e) => {
|
|
81
|
+
const s = u[i];
|
|
82
82
|
s.content && (r.requireReset && o.current.reset(), o.current.write(s.content, () => {
|
|
83
83
|
typeof e == "function" && e();
|
|
84
84
|
}));
|
|
85
|
-
}, p = (
|
|
86
|
-
typeof i
|
|
87
|
-
},
|
|
85
|
+
}, p = (i) => {
|
|
86
|
+
typeof a[i] == "function" && a[i]({ state: r, frames: u, options: t });
|
|
87
|
+
}, w = (i) => {
|
|
88
88
|
o.current.reset();
|
|
89
|
-
const e =
|
|
89
|
+
const e = F(u, i);
|
|
90
90
|
for (let s = 0; s < e; s++)
|
|
91
|
-
|
|
92
|
-
},
|
|
91
|
+
S(s);
|
|
92
|
+
}, z = (i) => {
|
|
93
93
|
if (!k.current || !o.current || !r.isStarted)
|
|
94
94
|
return !1;
|
|
95
|
-
const e = k.current.getBoundingClientRect().width, s =
|
|
96
|
-
return c({ type: "jump", payload: { currentTime: T } }),
|
|
97
|
-
}, g = () => (r.isStarted === !1 && (c({ type: "start" }), o.current.reset()), c({ type: "play" }), p("onStart"), !1),
|
|
98
|
-
return
|
|
95
|
+
const e = k.current.getBoundingClientRect().width, s = i.nativeEvent.offsetX, T = Math.floor(m * s / e);
|
|
96
|
+
return c({ type: "jump", payload: { currentTime: T } }), w(T), p("onJump"), !1;
|
|
97
|
+
}, g = () => (r.isStarted === !1 && (c({ type: "start" }), o.current.reset()), c({ type: "play" }), p("onStart"), !1), q = () => (c({ type: "pause" }), p("onPause"), !1), J = () => (r.currentFrame === u.length - 1 && r.currentTime === m && (c({ type: "reset" }), o.current.reset()), p("onPlay"), g());
|
|
98
|
+
return x(() => {
|
|
99
99
|
if (o.current) {
|
|
100
100
|
if (d.current)
|
|
101
101
|
try {
|
|
102
|
-
|
|
102
|
+
D(d.current.getBoundingClientRect().width);
|
|
103
103
|
} catch {
|
|
104
104
|
}
|
|
105
|
-
t.autoplay ? g() :
|
|
105
|
+
t.autoplay ? g() : w(Math.min(Math.abs(t.thumbnailTime), m));
|
|
106
106
|
}
|
|
107
107
|
}, []), H(
|
|
108
108
|
() => {
|
|
109
109
|
if (r.isRendering)
|
|
110
110
|
return !1;
|
|
111
|
-
const
|
|
112
|
-
r.currentTime < m && (e.currentTime = r.currentTime +
|
|
113
|
-
const s =
|
|
114
|
-
return r.currentFrame !== -1 && s ? c({ type: "tick", payload: e }) : r.currentFrame === u.length - 1 ? (p("onComplete"), t.repeat ? c({ type: "reset", payload: e }) : (e.currentTime = 0, e.currentFrame = 0, e.requireReset = !0, e.isStarted = !1, c({ type: "pause", payload: e }))) : (
|
|
111
|
+
const i = Date.now() - r.lastTickTime, e = {};
|
|
112
|
+
r.currentTime < m && (e.currentTime = r.currentTime + i), r.currentTime > m && (e.currentTime = m);
|
|
113
|
+
const s = b(u, e.currentTime, r.currentFrame);
|
|
114
|
+
return r.currentFrame !== -1 && s ? c({ type: "tick", payload: e }) : r.currentFrame === u.length - 1 ? (p("onComplete"), t.repeat ? c({ type: "reset", payload: e }) : (e.currentTime = 0, e.currentFrame = 0, e.requireReset = !0, e.isStarted = !1, c({ type: "pause", payload: e }))) : (b(e.currentTime, r.currentFrame + 1) ? e.currentFrame = r.currentFrame + 1 : e.currentFrame = F(u, e.currentTime), c({ type: "tickStart", payload: e }), S(e.currentFrame, () => (r.requireReset && (e.requireReset = !1), c({ type: "tickEnd", payload: e }), p("onTick"))));
|
|
115
115
|
},
|
|
116
116
|
r.isPlaying ? 8 : null
|
|
117
117
|
), t.controls && (t.frameBox.title = null, t.frameBox.type = null, t.frameBox.style = {}, t.theme.background === "transparent" ? t.frameBox.style.background = "black" : t.frameBox.style.background = t.theme.background, t.frameBox.style.padding = "10px", t.frameBox.style.paddingBottom = "40px"), /* @__PURE__ */ f("div", { className: _(t, r), ref: d, children: [
|
|
@@ -132,14 +132,14 @@ function K({ ...C }) {
|
|
|
132
132
|
] }),
|
|
133
133
|
/* @__PURE__ */ n("div", { className: "title", children: t.frameBox.title || "" })
|
|
134
134
|
] }),
|
|
135
|
-
/* @__PURE__ */ n("div", { className: "terminal-body", children: /* @__PURE__ */ n(A, { ref: o, options:
|
|
135
|
+
/* @__PURE__ */ n("div", { className: "terminal-body", children: /* @__PURE__ */ n(A, { ref: o, options: C }) })
|
|
136
136
|
] }) }),
|
|
137
137
|
/* @__PURE__ */ f("div", { className: "controller", children: [
|
|
138
|
-
r.isPlaying && /* @__PURE__ */ n("div", { className: "pause", onClick:
|
|
139
|
-
!r.isPlaying && r.isStarted && /* @__PURE__ */ n("div", { className: "play", onClick:
|
|
138
|
+
r.isPlaying && /* @__PURE__ */ n("div", { className: "pause", onClick: q, title: "Pause", children: /* @__PURE__ */ n("span", { className: "icon" }) }),
|
|
139
|
+
!r.isPlaying && r.isStarted && /* @__PURE__ */ n("div", { className: "play", onClick: J, title: "Play", children: /* @__PURE__ */ n("span", { className: "icon" }) }),
|
|
140
140
|
!r.isPlaying && !r.isStarted && /* @__PURE__ */ n("div", { className: "play", onClick: g, title: "Start", children: /* @__PURE__ */ n("span", { className: "icon" }) }),
|
|
141
141
|
/* @__PURE__ */ n("div", { className: "timer", children: G(r.currentTime) }),
|
|
142
|
-
/* @__PURE__ */ n("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ n("div", { className: "progressbar", ref: k, onClick:
|
|
142
|
+
/* @__PURE__ */ n("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ n("div", { className: "progressbar", ref: k, onClick: z, children: /* @__PURE__ */ n("div", { className: "progress", style: { width: `${r.currentTime / m * 100}%` } }) }) })
|
|
143
143
|
] })
|
|
144
144
|
] });
|
|
145
145
|
}
|
package/lib/Terminal.js
CHANGED
|
@@ -1,34 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { FitAddon as c } from "xterm-addon-fit";
|
|
10
|
-
import u from "lodash/debounce";
|
|
11
|
-
import m from "lodash/noop";
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import m from "react";
|
|
3
|
+
import i from "prop-types";
|
|
4
|
+
import { Terminal as h } from "xterm";
|
|
5
|
+
import { WebLinksAddon as a } from "xterm-addon-web-links";
|
|
6
|
+
import { FitAddon as d } from "xterm-addon-fit";
|
|
7
|
+
import p from "lodash/debounce";
|
|
8
|
+
import s from "lodash/noop";
|
|
12
9
|
/* empty css */
|
|
13
|
-
class
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
o(this, "xterm", null);
|
|
17
|
-
o(this, "container", null);
|
|
18
|
-
o(this, "onData", (t) => {
|
|
19
|
-
const { onData: e = m } = this.props;
|
|
20
|
-
e(t);
|
|
21
|
-
});
|
|
22
|
-
o(this, "onRender", (t) => {
|
|
23
|
-
const { onRender: e = m } = this.props;
|
|
24
|
-
e(t);
|
|
25
|
-
});
|
|
26
|
-
}
|
|
10
|
+
class f extends m.Component {
|
|
11
|
+
xterm = null;
|
|
12
|
+
container = null;
|
|
27
13
|
componentDidMount() {
|
|
28
14
|
const { value: t = "", options: e = {} } = this.props;
|
|
29
|
-
this.fitAddon = new
|
|
15
|
+
this.fitAddon = new d(), this.xterm = new h(e), this.xterm.loadAddon(new a()), this.xterm.loadAddon(this.fitAddon), this.xterm.open(this.container), this.xterm.onData(this.onData.bind(this)), this.xterm.onRender(this.onRender.bind(this)), t && this.xterm.write(t), setTimeout(() => {
|
|
30
16
|
this.xterm && this.fitAddon.fit();
|
|
31
|
-
}, 0), this.debounceFit =
|
|
17
|
+
}, 0), this.debounceFit = p(() => {
|
|
32
18
|
this.fitAddon.fit();
|
|
33
19
|
}, 600), window.addEventListener("resize", this.debounceFit);
|
|
34
20
|
}
|
|
@@ -36,8 +22,8 @@ class w extends f.Component {
|
|
|
36
22
|
this.xterm && (this.xterm.dispose(), this.xterm = null), window.removeEventListener("resize", this.debounceFit);
|
|
37
23
|
}
|
|
38
24
|
shouldComponentUpdate(t) {
|
|
39
|
-
const { value: e = "" } = t, { value:
|
|
40
|
-
return t.hasOwnProperty("value") && e !==
|
|
25
|
+
const { value: e = "" } = t, { value: r = "" } = this.props;
|
|
26
|
+
return t.hasOwnProperty("value") && e !== r && this.xterm && (this.xterm.clear(), setTimeout(() => {
|
|
41
27
|
this.xterm.write(e);
|
|
42
28
|
}, 0)), !1;
|
|
43
29
|
}
|
|
@@ -53,6 +39,14 @@ class w extends f.Component {
|
|
|
53
39
|
reset() {
|
|
54
40
|
this.xterm && this.xterm.reset();
|
|
55
41
|
}
|
|
42
|
+
onData = (t) => {
|
|
43
|
+
const { onData: e = s } = this.props;
|
|
44
|
+
e(t);
|
|
45
|
+
};
|
|
46
|
+
onRender = (t) => {
|
|
47
|
+
const { onRender: e = s } = this.props;
|
|
48
|
+
e(t);
|
|
49
|
+
};
|
|
56
50
|
resize(t, e) {
|
|
57
51
|
this.xterm && this.xterm.resize(Math.round(t), Math.round(e));
|
|
58
52
|
}
|
|
@@ -66,21 +60,21 @@ class w extends f.Component {
|
|
|
66
60
|
this.xterm && this.xterm.refresh(0, this.xterm.rows - 1);
|
|
67
61
|
}
|
|
68
62
|
render() {
|
|
69
|
-
const { className: t = "", style: e = {} } = this.props,
|
|
63
|
+
const { className: t = "", style: e = {} } = this.props, r = ["react-xterm", t].filter(Boolean).join(" ");
|
|
70
64
|
return (
|
|
71
65
|
// eslint-disable-next-line no-return-assign
|
|
72
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ n("div", { ref: (o) => this.container = o, className: r, style: e })
|
|
73
67
|
);
|
|
74
68
|
}
|
|
75
69
|
}
|
|
76
|
-
|
|
77
|
-
onData:
|
|
78
|
-
onRender:
|
|
79
|
-
options:
|
|
80
|
-
value:
|
|
81
|
-
className:
|
|
82
|
-
style:
|
|
70
|
+
f.propTypes = {
|
|
71
|
+
onData: i.func,
|
|
72
|
+
onRender: i.func,
|
|
73
|
+
options: i.object,
|
|
74
|
+
value: i.string,
|
|
75
|
+
className: i.string,
|
|
76
|
+
style: i.object
|
|
83
77
|
};
|
|
84
78
|
export {
|
|
85
|
-
|
|
79
|
+
f as default
|
|
86
80
|
};
|
package/lib/terminal.css
CHANGED
|
@@ -29,4 +29,4 @@
|
|
|
29
29
|
* The original design remains. The terminal itself
|
|
30
30
|
* has been extended to include xterm CSI codes, among
|
|
31
31
|
* other features.
|
|
32
|
-
*/.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;z-index:5}.xterm .xterm-helper-textarea{position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;
|
|
32
|
+
*/.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;z-index:5}.xterm .xterm-helper-textarea{position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;inset: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{cursor:default}.xterm.xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility,.xterm .xterm-message{position:absolute;inset:0;z-index:10;color:transparent}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:.5}.xterm-underline{text-decoration:underline}.terminal-player,.terminal{display:inline-block}.terminal .xterm .xterm-viewport{overflow-y:hidden!important}.terminal-frame{position:relative}.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}.terminal-frame.terminal-window{-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #b3b3b3;box-shadow:0 0 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}.terminal-frame.terminal-floating{-moz-border-radius:6px;-webkit-border-radius:6px;background-color:#1d1d1d;border-radius:6px;box-shadow:0 0 18px #b3b3b3;margin:18px;overflow:hidden}.terminal-frame.terminal-floating .terminal-titlebar{color:#fff;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}.terminal-frame.terminal-solid{-moz-border-radius:6px;-webkit-border-radius:6px;background-color:#1d1d1d;border-radius:6px;box-shadow:0 0 18px #b3b3b3;margin:18px;overflow:hidden}.terminal-frame.terminal-solid .terminal-titlebar{color:#fff;font-family:Arial,sans-serif;font-size:14px;position:relative;text-align:center;width:100%}.terminal-frame.terminal-solid .terminal-titlebar .title{margin: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}.terminal-player{position:relative;font-size:0}.terminal-player .controller{background:#45484d;bottom:0;display:none;font-family:Helvetica,Arial,sans-serif;font-size:12px;height:40px;position:absolute;width:100%;z-index:20;background:#222;transition:height ease .2s;-webkit-transition:height ease .2s;-moz-transition:height ease .2s;-o-transition:height ease .2s}.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,.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,.4));-webkit-filter:drop-shadow(10px 10px 15px rgba(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:translateY(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:#fff}.terminal-player.started .cover,.terminal-player.started .start{display:none}.terminal-player .terminal-watermark{z-index:99999}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/terminal",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.11",
|
|
4
4
|
"description": "A react wrapper for xterm allowing you to easily render a terminal in the browser",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "^19.0.0"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "3619d5d23622fb8074ace5f6c685bcc25c14c056",
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@arcblock/react-hooks": "3.0.
|
|
46
|
-
"@arcblock/ux": "3.0.
|
|
45
|
+
"@arcblock/react-hooks": "3.0.11",
|
|
46
|
+
"@arcblock/ux": "3.0.11",
|
|
47
47
|
"@emotion/react": "^11.14.0",
|
|
48
48
|
"@emotion/styled": "^11.14.0",
|
|
49
49
|
"ahooks": "^3.8.5",
|