@arcblock/terminal 3.1.25 → 3.1.27
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 +151 -141
- package/lib/styles.js +368 -118
- package/lib/util.js +27 -22
- package/package.json +4 -4
- package/src/Player.jsx +38 -10
- package/src/styles.js +366 -140
- package/src/util.js +3 -0
package/lib/styles.js
CHANGED
|
@@ -1,101 +1,365 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
1
|
+
import t from "@emotion/styled";
|
|
2
|
+
const e = {
|
|
3
|
+
BLACK_OVERLAY_LIGHT: "rgba(0, 0, 0, 0.3)",
|
|
4
|
+
// Light overlay for paused state
|
|
5
|
+
BLACK_OVERLAY_MEDIUM: "rgba(0, 0, 0, 0.7)",
|
|
6
|
+
// Button backgrounds
|
|
7
|
+
BLACK_OVERLAY_DARK: "rgba(0, 0, 0, 0.8)",
|
|
8
|
+
// Hover state for buttons
|
|
9
|
+
BLACK_DROP_SHADOW: "rgba(0, 0, 0, 0.4)",
|
|
10
|
+
// Drop shadow effect
|
|
11
|
+
BLACK_SOLID: "#000"
|
|
12
|
+
// Solid black for composition view
|
|
13
|
+
}, o = t.div`
|
|
14
|
+
/* Base styles */
|
|
15
|
+
display: block;
|
|
16
|
+
position: relative;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
|
|
19
|
+
/* Player controls */
|
|
20
|
+
.controller {
|
|
21
|
+
background: #45484d;
|
|
22
|
+
background-color: #222222;
|
|
23
|
+
bottom: 0px;
|
|
24
|
+
display: none;
|
|
25
|
+
font-size: 12px;
|
|
26
|
+
height: 40px;
|
|
27
|
+
position: absolute;
|
|
28
|
+
width: 100%;
|
|
29
|
+
z-index: 20;
|
|
30
|
+
transition: height ease 200ms;
|
|
31
|
+
-webkit-transition: height ease 200ms;
|
|
32
|
+
-moz-transition: height ease 200ms;
|
|
33
|
+
-o-transition: height ease 200ms;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.controls .controller {
|
|
37
|
+
display: block;
|
|
38
|
+
}
|
|
39
|
+
&.playing .controller {
|
|
40
|
+
height: 0;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
}
|
|
43
|
+
&.playing:hover .controller {
|
|
44
|
+
height: 40px;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Play/Pause buttons in controller */
|
|
49
|
+
.play,
|
|
50
|
+
.pause {
|
|
51
|
+
fill: #cacaca;
|
|
52
|
+
float: left;
|
|
53
|
+
height: 40px;
|
|
54
|
+
line-height: 40px;
|
|
55
|
+
text-align: center;
|
|
56
|
+
width: 40px;
|
|
57
|
+
|
|
58
|
+
.icon {
|
|
59
|
+
border-color: transparent transparent transparent #cacaca;
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
display: inline-block;
|
|
63
|
+
height: 15px;
|
|
42
64
|
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
// Timer
|
|
52
|
-
"& .timer": { color: "#cacaca", float: "right", lineHeight: "40px", padding: "0 10px" },
|
|
53
|
-
// Progress bar
|
|
54
|
-
"& .progressbar-wrapper": { height: 40, lineHeight: "38px", overflow: "hidden" },
|
|
55
|
-
"& .progressbar": {
|
|
56
|
-
backgroundColor: "#424242",
|
|
57
|
-
display: "inline-block",
|
|
58
|
-
height: 7,
|
|
59
|
-
overflow: "hidden",
|
|
60
|
-
width: "100%",
|
|
61
|
-
borderRadius: 10,
|
|
62
|
-
MozBorderRadius: 10,
|
|
63
|
-
WebkitBorderRadius: 10
|
|
64
|
-
},
|
|
65
|
-
"&.started .progressbar": { cursor: "pointer" },
|
|
66
|
-
"& .progress": { backgroundColor: "#cacaca", height: 7, position: "relative", width: "0%" },
|
|
67
|
-
// Cover and start button
|
|
68
|
-
"& .cover": { cursor: "pointer", height: "100%", position: "absolute", width: "100%", zIndex: 10 },
|
|
69
|
-
"& .start svg": {
|
|
70
|
-
cursor: "pointer",
|
|
71
|
-
fill: "#eaeaea",
|
|
72
|
-
width: 80,
|
|
73
|
-
height: 80,
|
|
74
|
-
left: "50%",
|
|
75
|
-
marginLeft: -65,
|
|
76
|
-
marginTop: -65,
|
|
77
|
-
position: "absolute",
|
|
78
|
-
top: "50%",
|
|
79
|
-
zIndex: 20,
|
|
80
|
-
filter: "drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))",
|
|
81
|
-
WebkitFilter: "drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))",
|
|
82
|
-
opacity: 0.7,
|
|
83
|
-
"&:hover": {
|
|
84
|
-
opacity: 0.9,
|
|
85
|
-
transition: "all 0.3s ease"
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.pause {
|
|
68
|
+
display: none;
|
|
69
|
+
.icon {
|
|
70
|
+
border-style: double;
|
|
71
|
+
border-width: 0px 0px 0px 12px;
|
|
72
|
+
margin-top: 11px;
|
|
86
73
|
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.play .icon {
|
|
77
|
+
border-style: solid;
|
|
78
|
+
border-width: 8px 0px 8px 13px;
|
|
79
|
+
margin-top: 10px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&.playing .play {
|
|
83
|
+
display: none;
|
|
84
|
+
}
|
|
85
|
+
&.playing .pause {
|
|
86
|
+
display: inline-block;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Timer */
|
|
90
|
+
.timer {
|
|
91
|
+
color: #cacaca;
|
|
92
|
+
float: right;
|
|
93
|
+
line-height: 40px;
|
|
94
|
+
padding: 0 10px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Progress bar */
|
|
98
|
+
.progressbar-wrapper {
|
|
99
|
+
height: 40px;
|
|
100
|
+
line-height: 38px;
|
|
101
|
+
overflow: hidden;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.progressbar {
|
|
105
|
+
background-color: #424242;
|
|
106
|
+
display: inline-block;
|
|
107
|
+
height: 7px;
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
width: 100%;
|
|
110
|
+
border-radius: 10px;
|
|
111
|
+
-moz-border-radius: 10px;
|
|
112
|
+
-webkit-border-radius: 10px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&.started .progressbar {
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.progress {
|
|
120
|
+
background-color: #cacaca;
|
|
121
|
+
height: 7px;
|
|
122
|
+
position: relative;
|
|
123
|
+
width: 0%;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Cover */
|
|
127
|
+
.cover {
|
|
128
|
+
cursor: pointer;
|
|
129
|
+
height: 100%;
|
|
130
|
+
position: absolute;
|
|
131
|
+
width: 100%;
|
|
132
|
+
z-index: 10;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Start button */
|
|
136
|
+
.start-button {
|
|
137
|
+
position: absolute;
|
|
138
|
+
top: 50%;
|
|
139
|
+
left: 50%;
|
|
140
|
+
transform: translate(-50%, -50%);
|
|
141
|
+
width: 80px;
|
|
142
|
+
height: 80px;
|
|
143
|
+
background-color: ${e.BLACK_OVERLAY_MEDIUM};
|
|
144
|
+
border-radius: 50%;
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
filter: drop-shadow(10px 10px 15px ${e.BLACK_DROP_SHADOW});
|
|
149
|
+
-webkit-filter: drop-shadow(10px 10px 15px ${e.BLACK_DROP_SHADOW});
|
|
150
|
+
transition: all 0.3s ease;
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
z-index: 20;
|
|
153
|
+
|
|
154
|
+
&:hover {
|
|
155
|
+
background-color: ${e.BLACK_OVERLAY_DARK};
|
|
156
|
+
transform: translate(-50%, -50%) scale(1.05);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
svg {
|
|
160
|
+
fill: #eaeaea;
|
|
161
|
+
width: 40px;
|
|
162
|
+
height: 40px;
|
|
163
|
+
pointer-events: none;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
&.small .start-button {
|
|
168
|
+
width: 60px;
|
|
169
|
+
height: 60px;
|
|
170
|
+
svg {
|
|
171
|
+
width: 30px;
|
|
172
|
+
height: 30px;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* Position adjustments for different layouts */
|
|
177
|
+
&.controls .start-button {
|
|
178
|
+
transform: translate(-50%, -50%) translate(0px, -20px);
|
|
179
|
+
&:hover {
|
|
180
|
+
transform: translate(-50%, -50%) translate(0px, -20px) scale(1.05);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&.framed .start-button {
|
|
185
|
+
transform: translate(-50%, -50%) translate(0px, 8px);
|
|
186
|
+
&:hover {
|
|
187
|
+
transform: translate(-50%, -50%) translate(0px, 8px) scale(1.05);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
&.framed.controls .start-button {
|
|
192
|
+
transform: translate(-50%, -50%) translate(0px, -12px);
|
|
193
|
+
&:hover {
|
|
194
|
+
transform: translate(-50%, -50%) translate(0px, -12px) scale(1.05);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&.started .cover,
|
|
199
|
+
&.started .start {
|
|
200
|
+
display: none;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* Hover overlay for playing state */
|
|
204
|
+
.hover-overlay {
|
|
205
|
+
position: absolute;
|
|
206
|
+
top: 0;
|
|
207
|
+
left: 0;
|
|
208
|
+
right: 0;
|
|
209
|
+
bottom: 0;
|
|
210
|
+
z-index: 15;
|
|
211
|
+
opacity: 0;
|
|
212
|
+
transition: opacity 0.3s ease;
|
|
213
|
+
cursor: pointer;
|
|
214
|
+
&:hover {
|
|
215
|
+
opacity: 1;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* Hover pause button */
|
|
220
|
+
.hover-pause-button {
|
|
221
|
+
position: absolute;
|
|
222
|
+
top: 50%;
|
|
223
|
+
left: 50%;
|
|
224
|
+
transform: translate(-50%, -50%);
|
|
225
|
+
width: 80px;
|
|
226
|
+
height: 80px;
|
|
227
|
+
background-color: ${e.BLACK_OVERLAY_MEDIUM};
|
|
228
|
+
border-radius: 50%;
|
|
229
|
+
display: flex;
|
|
230
|
+
align-items: center;
|
|
231
|
+
justify-content: center;
|
|
232
|
+
filter: drop-shadow(10px 10px 15px ${e.BLACK_DROP_SHADOW});
|
|
233
|
+
-webkit-filter: drop-shadow(10px 10px 15px ${e.BLACK_DROP_SHADOW});
|
|
234
|
+
transition: all 0.3s ease;
|
|
235
|
+
cursor: pointer;
|
|
236
|
+
|
|
237
|
+
&:hover {
|
|
238
|
+
background-color: ${e.BLACK_OVERLAY_MEDIUM};
|
|
239
|
+
transform: translate(-50%, -50%) scale(1.05);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
&.small .hover-pause-button {
|
|
244
|
+
width: 60px;
|
|
245
|
+
height: 60px;
|
|
246
|
+
&:hover {
|
|
247
|
+
background-color: ${e.BLACK_OVERLAY_MEDIUM};
|
|
248
|
+
transform: translate(-50%, -50%);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/* Position adjustments for hover pause button */
|
|
253
|
+
&.controls .hover-pause-button {
|
|
254
|
+
transform: translate(-50%, -50%) translate(0px, -20px);
|
|
255
|
+
&:hover {
|
|
256
|
+
transform: translate(-50%, -50%) translate(0px, -20px) scale(1.05);
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
&.framed .hover-pause-button {
|
|
261
|
+
transform: translate(-50%, -50%) translate(0px, 8px);
|
|
262
|
+
&:hover {
|
|
263
|
+
transform: translate(-50%, -50%) translate(0px, 8px) scale(1.05);
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
&.framed.controls .hover-pause-button {
|
|
268
|
+
transform: translate(-50%, -50%) translate(0px, -12px);
|
|
269
|
+
&:hover {
|
|
270
|
+
transform: translate(-50%, -50%) translate(0px, -12px) scale(1.05);
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.pause-icon {
|
|
275
|
+
display: inline-block;
|
|
276
|
+
border-style: double;
|
|
277
|
+
border-width: 0px 0px 0px 24px;
|
|
278
|
+
border-color: transparent transparent transparent #ffffff;
|
|
279
|
+
height: 32px;
|
|
280
|
+
box-sizing: border-box;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
&.small .pause-icon {
|
|
284
|
+
border-width: 0px 0px 0px 18px;
|
|
285
|
+
height: 24px;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* Pause overlay */
|
|
289
|
+
.pause-overlay {
|
|
290
|
+
position: absolute;
|
|
291
|
+
top: 0;
|
|
292
|
+
left: 0;
|
|
293
|
+
right: 0;
|
|
294
|
+
bottom: 0;
|
|
295
|
+
z-index: 15;
|
|
296
|
+
background-color: ${e.BLACK_OVERLAY_LIGHT};
|
|
297
|
+
cursor: pointer;
|
|
298
|
+
display: flex;
|
|
299
|
+
align-items: center;
|
|
300
|
+
justify-content: center;
|
|
301
|
+
outline: none;
|
|
302
|
+
border: none;
|
|
303
|
+
|
|
304
|
+
&:focus {
|
|
305
|
+
outline: none;
|
|
306
|
+
}
|
|
307
|
+
&:active {
|
|
308
|
+
background-color: ${e.BLACK_OVERLAY_LIGHT};
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* Position adjustments for pause overlay */
|
|
313
|
+
&.controls .pause-overlay {
|
|
314
|
+
transform: translateY(-20px);
|
|
315
|
+
}
|
|
316
|
+
&.framed.controls .pause-overlay {
|
|
317
|
+
transform: translateY(-12px);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* Overlay play button */
|
|
321
|
+
.overlay-play-button {
|
|
322
|
+
position: relative;
|
|
323
|
+
width: 80px;
|
|
324
|
+
height: 80px;
|
|
325
|
+
background-color: ${e.BLACK_OVERLAY_MEDIUM};
|
|
326
|
+
border-radius: 50%;
|
|
327
|
+
display: flex;
|
|
328
|
+
align-items: center;
|
|
329
|
+
justify-content: center;
|
|
330
|
+
filter: drop-shadow(10px 10px 15px ${e.BLACK_DROP_SHADOW});
|
|
331
|
+
-webkit-filter: drop-shadow(10px 10px 15px ${e.BLACK_DROP_SHADOW});
|
|
332
|
+
transition: all 0.3s ease;
|
|
333
|
+
cursor: pointer;
|
|
334
|
+
transform: none;
|
|
335
|
+
|
|
336
|
+
&:hover {
|
|
337
|
+
background-color: ${e.BLACK_OVERLAY_DARK};
|
|
338
|
+
transform: scale(1.05);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
svg {
|
|
342
|
+
fill: #eaeaea;
|
|
343
|
+
width: 40px;
|
|
344
|
+
height: 40px;
|
|
345
|
+
pointer-events: none;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
&.small .overlay-play-button {
|
|
350
|
+
width: 60px;
|
|
351
|
+
height: 60px;
|
|
352
|
+
svg {
|
|
353
|
+
width: 30px;
|
|
354
|
+
height: 30px;
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/* Terminal watermark */
|
|
359
|
+
.terminal-watermark {
|
|
360
|
+
z-index: 99999;
|
|
361
|
+
}
|
|
362
|
+
`, n = t.div({
|
|
99
363
|
// Base xterm styles
|
|
100
364
|
"& .xterm": {
|
|
101
365
|
cursor: "text",
|
|
@@ -110,14 +374,12 @@ const r = e.div({
|
|
|
110
374
|
"& .xterm .xterm-helpers": {
|
|
111
375
|
position: "absolute",
|
|
112
376
|
top: 0,
|
|
113
|
-
// The z-index of the helpers must be higher than the canvases in order for IMEs to appear on top
|
|
114
377
|
zIndex: 5
|
|
115
378
|
},
|
|
116
379
|
"& .xterm .xterm-helper-textarea": {
|
|
117
380
|
padding: 0,
|
|
118
381
|
border: 0,
|
|
119
382
|
margin: 0,
|
|
120
|
-
// Move textarea out of the screen to the far left, so that the cursor is not visible
|
|
121
383
|
position: "absolute",
|
|
122
384
|
opacity: 0,
|
|
123
385
|
left: "-9999em",
|
|
@@ -125,14 +387,12 @@ const r = e.div({
|
|
|
125
387
|
width: 0,
|
|
126
388
|
height: 0,
|
|
127
389
|
zIndex: -5,
|
|
128
|
-
// Prevent wrapping so the IME appears against the textarea at the correct position
|
|
129
390
|
whiteSpace: "nowrap",
|
|
130
391
|
overflow: "hidden",
|
|
131
392
|
resize: "none"
|
|
132
393
|
},
|
|
133
394
|
"& .xterm .composition-view": {
|
|
134
|
-
|
|
135
|
-
background: "#000",
|
|
395
|
+
background: e.BLACK_SOLID,
|
|
136
396
|
color: "#FFF",
|
|
137
397
|
display: "none",
|
|
138
398
|
position: "absolute",
|
|
@@ -143,7 +403,6 @@ const r = e.div({
|
|
|
143
403
|
display: "block"
|
|
144
404
|
},
|
|
145
405
|
"& .xterm .xterm-viewport": {
|
|
146
|
-
// On OS X this is required in order for the scroll bar to appear fully opaque
|
|
147
406
|
backgroundColor: "transparent !important",
|
|
148
407
|
overflowY: "scroll",
|
|
149
408
|
cursor: "default",
|
|
@@ -152,14 +411,13 @@ const r = e.div({
|
|
|
152
411
|
left: 0,
|
|
153
412
|
top: 0,
|
|
154
413
|
bottom: 0,
|
|
155
|
-
// scrollbarWidth: 'none',
|
|
156
414
|
"&::-webkit-scrollbar": {
|
|
157
|
-
width:
|
|
415
|
+
width: "8px",
|
|
158
416
|
backgroundColor: "transparent"
|
|
159
417
|
},
|
|
160
418
|
"&::-webkit-scrollbar-thumb": {
|
|
161
|
-
background: "#
|
|
162
|
-
borderRadius:
|
|
419
|
+
background: "#aaa",
|
|
420
|
+
borderRadius: "4px"
|
|
163
421
|
}
|
|
164
422
|
},
|
|
165
423
|
"& .xterm .xterm-screen": {
|
|
@@ -182,14 +440,12 @@ const r = e.div({
|
|
|
182
440
|
lineHeight: "normal"
|
|
183
441
|
},
|
|
184
442
|
"& .xterm.enable-mouse-events": {
|
|
185
|
-
// When mouse events are enabled (eg. tmux), revert to the standard pointer cursor
|
|
186
443
|
cursor: "default"
|
|
187
444
|
},
|
|
188
445
|
"& .xterm.xterm-cursor-pointer, & .xterm .xterm-cursor-pointer": {
|
|
189
446
|
cursor: "pointer"
|
|
190
447
|
},
|
|
191
448
|
"& .xterm.column-select.focus": {
|
|
192
|
-
// Column selection mode
|
|
193
449
|
cursor: "crosshair"
|
|
194
450
|
},
|
|
195
451
|
"& .xterm .xterm-accessibility:not(.debug), & .xterm .xterm-message": {
|
|
@@ -217,8 +473,6 @@ const r = e.div({
|
|
|
217
473
|
overflow: "hidden"
|
|
218
474
|
},
|
|
219
475
|
"& .xterm-dim": {
|
|
220
|
-
// Dim should not apply to background, so the opacity of the foreground color is applied
|
|
221
|
-
// explicitly in the generated class and reset to 1 here
|
|
222
476
|
opacity: "1 !important"
|
|
223
477
|
},
|
|
224
478
|
// Text decoration styles
|
|
@@ -227,17 +481,13 @@ const r = e.div({
|
|
|
227
481
|
"& .xterm-underline-3": { textDecoration: "wavy underline" },
|
|
228
482
|
"& .xterm-underline-4": { textDecoration: "dotted underline" },
|
|
229
483
|
"& .xterm-underline-5": { textDecoration: "dashed underline" },
|
|
230
|
-
"& .xterm-overline": {
|
|
231
|
-
textDecoration: "overline"
|
|
232
|
-
},
|
|
484
|
+
"& .xterm-overline": { textDecoration: "overline" },
|
|
233
485
|
"& .xterm-overline.xterm-underline-1": { textDecoration: "overline underline" },
|
|
234
486
|
"& .xterm-overline.xterm-underline-2": { textDecoration: "overline double underline" },
|
|
235
487
|
"& .xterm-overline.xterm-underline-3": { textDecoration: "overline wavy underline" },
|
|
236
488
|
"& .xterm-overline.xterm-underline-4": { textDecoration: "overline dotted underline" },
|
|
237
489
|
"& .xterm-overline.xterm-underline-5": { textDecoration: "overline dashed underline" },
|
|
238
|
-
"& .xterm-strikethrough": {
|
|
239
|
-
textDecoration: "line-through"
|
|
240
|
-
},
|
|
490
|
+
"& .xterm-strikethrough": { textDecoration: "line-through" },
|
|
241
491
|
// Decoration styles
|
|
242
492
|
"& .xterm-screen .xterm-decoration-container .xterm-decoration": {
|
|
243
493
|
zIndex: 6,
|
|
@@ -259,6 +509,6 @@ const r = e.div({
|
|
|
259
509
|
}
|
|
260
510
|
});
|
|
261
511
|
export {
|
|
262
|
-
|
|
263
|
-
|
|
512
|
+
o as PlayerRoot,
|
|
513
|
+
n as TerminalRoot
|
|
264
514
|
};
|
package/lib/util.js
CHANGED
|
@@ -3,31 +3,31 @@ const f = (t, e) => {
|
|
|
3
3
|
let { delay: l } = n;
|
|
4
4
|
e.frameDelay !== "auto" ? l = e.frameDelay : e.maxIdleTime !== "auto" && l > e.maxIdleTime && (l = e.maxIdleTime), l *= e.speedFactor, n.delay = l;
|
|
5
5
|
});
|
|
6
|
-
let
|
|
7
|
-
const
|
|
6
|
+
let a = 0;
|
|
7
|
+
const r = t.length;
|
|
8
8
|
t.forEach((n, l) => {
|
|
9
|
-
const i = t[(l + 1) %
|
|
10
|
-
n.duration = i, n.startTime =
|
|
9
|
+
const i = t[(l + 1) % r].delay;
|
|
10
|
+
n.duration = i, n.startTime = a, n.endTime = a + i, a += i;
|
|
11
11
|
});
|
|
12
12
|
const s = t.reduce((n, l) => n + l.delay, 0);
|
|
13
13
|
return { frames: t, totalDuration: s };
|
|
14
|
-
}, u = (t, e,
|
|
15
|
-
let
|
|
16
|
-
typeof
|
|
17
|
-
for (let s =
|
|
18
|
-
if (
|
|
14
|
+
}, u = (t, e, a) => {
|
|
15
|
+
let r = null;
|
|
16
|
+
typeof a > "u" && (a = 0);
|
|
17
|
+
for (let s = a; s < t.length; s++)
|
|
18
|
+
if (r = t[s], r.startTime <= e && e < r.endTime)
|
|
19
19
|
return s;
|
|
20
|
-
return
|
|
21
|
-
}, o = (t, e,
|
|
22
|
-
const
|
|
23
|
-
return typeof
|
|
20
|
+
return r.startTime <= e && e <= r.endTime ? t.length - 1 : -1;
|
|
21
|
+
}, o = (t, e, a) => {
|
|
22
|
+
const r = t[a];
|
|
23
|
+
return typeof r > "u" ? !1 : r.startTime <= e && e < r.endTime;
|
|
24
24
|
}, m = (t) => {
|
|
25
|
-
let e = Math.floor(t / 6e4),
|
|
26
|
-
return e < 10 && (e = `0${e}`),
|
|
27
|
-
},
|
|
28
|
-
const
|
|
29
|
-
return t.controls &&
|
|
30
|
-
},
|
|
25
|
+
let e = Math.floor(t / 6e4), a = parseInt((t - e * 6e4) / 1e3, 10);
|
|
26
|
+
return e < 10 && (e = `0${e}`), a < 10 && (a = `0${a}`), `${e}:${a}`;
|
|
27
|
+
}, d = (t, e) => {
|
|
28
|
+
const a = ["terminal-player"];
|
|
29
|
+
return t.controls && a.push("controls"), t.frameBox.type && a.push("framed"), t.rows < 10 && a.push("small"), e.isStarted && a.push("started"), e.isPlaying && a.push("playing"), a.filter(Boolean).join(" ");
|
|
30
|
+
}, c = (t) => {
|
|
31
31
|
const e = ["terminal-frame"];
|
|
32
32
|
return t.frameBox.type && e.push(`terminal-${t.frameBox.type}`), e.join(" ");
|
|
33
33
|
}, y = {
|
|
@@ -45,7 +45,12 @@ const f = (t, e) => {
|
|
|
45
45
|
repeat: !1,
|
|
46
46
|
autoplay: !1,
|
|
47
47
|
thumbnailTime: 999999,
|
|
48
|
-
frameBox: {}
|
|
48
|
+
frameBox: {},
|
|
49
|
+
// IntersectionObserver 配置
|
|
50
|
+
autoplayThreshold: 0.5,
|
|
51
|
+
// 元素50%可见时才自动播放
|
|
52
|
+
autoplayRootMargin: "-10% 0px -10% 0px"
|
|
53
|
+
// 上下留10%边距，确保元素充分进入视口
|
|
49
54
|
};
|
|
50
55
|
export {
|
|
51
56
|
T as defaultOptions,
|
|
@@ -53,7 +58,7 @@ export {
|
|
|
53
58
|
u as findFrameAt,
|
|
54
59
|
f as formatFrames,
|
|
55
60
|
m as formatTime,
|
|
56
|
-
|
|
57
|
-
|
|
61
|
+
c as getFrameClass,
|
|
62
|
+
d as getPlayerClass,
|
|
58
63
|
o as isFrameAt
|
|
59
64
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/terminal",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.27",
|
|
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": "9cbf9135aa96ce8d13481db7b21f755d009d2f9f",
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@arcblock/react-hooks": "3.1.
|
|
46
|
-
"@arcblock/ux": "3.1.
|
|
45
|
+
"@arcblock/react-hooks": "3.1.27",
|
|
46
|
+
"@arcblock/ux": "3.1.27",
|
|
47
47
|
"@emotion/react": "^11.14.0",
|
|
48
48
|
"@emotion/styled": "^11.14.0",
|
|
49
49
|
"@xterm/addon-fit": "^0.10.0",
|