@micromag/element-closed-captions 0.4.71 → 0.4.77
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/es/index.js +166 -66
- package/package.json +10 -8
package/es/index.js
CHANGED
|
@@ -1,83 +1,183 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { c } from 'react/compiler-runtime';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import parseSRT from 'parse-srt';
|
|
4
|
-
import { useState, useEffect
|
|
4
|
+
import { useState, useEffect } from 'react';
|
|
5
5
|
import { getSecondsFromTime, getStyleFromBox } from '@micromag/core/utils';
|
|
6
6
|
import TextElement from '@micromag/element-text';
|
|
7
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
var styles = {"container":"micromag-element-closed-captions-container","captions":"micromag-element-closed-captions-captions"};
|
|
10
10
|
|
|
11
|
-
function ClosedCaptions(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
timeOffset
|
|
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
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
if (
|
|
63
|
-
|
|
11
|
+
function ClosedCaptions(t0) {
|
|
12
|
+
const $ = c(32);
|
|
13
|
+
const {
|
|
14
|
+
currentTime: t1,
|
|
15
|
+
timeOffset: t2,
|
|
16
|
+
media: t3,
|
|
17
|
+
textStyle: t4,
|
|
18
|
+
boxStyle: t5,
|
|
19
|
+
className: t6
|
|
20
|
+
} = t0;
|
|
21
|
+
const currentTime = t1 === undefined ? 0 : t1;
|
|
22
|
+
const timeOffset = t2 === undefined ? null : t2;
|
|
23
|
+
const media = t3 === undefined ? null : t3;
|
|
24
|
+
const textStyle = t4 === undefined ? null : t4;
|
|
25
|
+
const boxStyle = t5 === undefined ? null : t5;
|
|
26
|
+
const className = t6 === undefined ? null : t6;
|
|
27
|
+
let t7;
|
|
28
|
+
if ($[0] !== media) {
|
|
29
|
+
t7 = media || {};
|
|
30
|
+
$[0] = media;
|
|
31
|
+
$[1] = t7;
|
|
32
|
+
} else {
|
|
33
|
+
t7 = $[1];
|
|
34
|
+
}
|
|
35
|
+
const {
|
|
36
|
+
url: t8
|
|
37
|
+
} = t7;
|
|
38
|
+
const url = t8 === undefined ? null : t8;
|
|
39
|
+
let t9;
|
|
40
|
+
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
|
|
41
|
+
t9 = [];
|
|
42
|
+
$[2] = t9;
|
|
43
|
+
} else {
|
|
44
|
+
t9 = $[2];
|
|
45
|
+
}
|
|
46
|
+
const [lines, setLines] = useState(t9);
|
|
47
|
+
const [lineIndex, setLineIndex] = useState(-1);
|
|
48
|
+
let t10;
|
|
49
|
+
if ($[3] !== timeOffset) {
|
|
50
|
+
const startOffset = timeOffset !== null ? timeOffset.split(/[\t ]*-->[\t ]*/) : null;
|
|
51
|
+
t10 = startOffset !== null && startOffset.length ? getSecondsFromTime(startOffset[0]) : 0;
|
|
52
|
+
$[3] = timeOffset;
|
|
53
|
+
$[4] = t10;
|
|
54
|
+
} else {
|
|
55
|
+
t10 = $[4];
|
|
56
|
+
}
|
|
57
|
+
const startSeconds = t10;
|
|
58
|
+
let t11;
|
|
59
|
+
let t12;
|
|
60
|
+
if ($[5] !== url) {
|
|
61
|
+
t11 = () => {
|
|
62
|
+
if (url === null) {
|
|
63
|
+
return;
|
|
64
64
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
65
|
+
fetch(url, {
|
|
66
|
+
mode: "cors"
|
|
67
|
+
}).then(_temp).then(_temp2).then(parsed => {
|
|
68
|
+
setLines(parsed);
|
|
69
|
+
}).catch(_temp3);
|
|
70
|
+
};
|
|
71
|
+
t12 = [url, fetch, setLines];
|
|
72
|
+
$[5] = url;
|
|
73
|
+
$[6] = t11;
|
|
74
|
+
$[7] = t12;
|
|
75
|
+
} else {
|
|
76
|
+
t11 = $[6];
|
|
77
|
+
t12 = $[7];
|
|
78
|
+
}
|
|
79
|
+
useEffect(t11, t12);
|
|
80
|
+
let t13;
|
|
81
|
+
if ($[8] !== lines || $[9] !== startSeconds) {
|
|
82
|
+
t13 = t => {
|
|
83
|
+
const currentLineIndex = lines.findIndex(line => t >= line.start - startSeconds && t <= line.end - startSeconds);
|
|
84
|
+
return currentLineIndex;
|
|
85
|
+
};
|
|
86
|
+
$[8] = lines;
|
|
87
|
+
$[9] = startSeconds;
|
|
88
|
+
$[10] = t13;
|
|
89
|
+
} else {
|
|
90
|
+
t13 = $[10];
|
|
91
|
+
}
|
|
92
|
+
const getLineIndexFromTime = t13;
|
|
93
|
+
let t14;
|
|
94
|
+
if ($[11] !== currentTime || $[12] !== getLineIndexFromTime || $[13] !== lineIndex || $[14] !== lines.length) {
|
|
95
|
+
t14 = () => {
|
|
96
|
+
if (lines.length > 0) {
|
|
97
|
+
const nextLineIndex = getLineIndexFromTime(currentTime);
|
|
98
|
+
if (nextLineIndex !== lineIndex) {
|
|
99
|
+
setLineIndex(nextLineIndex);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
$[11] = currentTime;
|
|
104
|
+
$[12] = getLineIndexFromTime;
|
|
105
|
+
$[13] = lineIndex;
|
|
106
|
+
$[14] = lines.length;
|
|
107
|
+
$[15] = t14;
|
|
108
|
+
} else {
|
|
109
|
+
t14 = $[15];
|
|
110
|
+
}
|
|
111
|
+
let t15;
|
|
112
|
+
if ($[16] !== currentTime || $[17] !== getLineIndexFromTime || $[18] !== lines) {
|
|
113
|
+
t15 = [currentTime, lines, getLineIndexFromTime, setLineIndex];
|
|
114
|
+
$[16] = currentTime;
|
|
115
|
+
$[17] = getLineIndexFromTime;
|
|
116
|
+
$[18] = lines;
|
|
117
|
+
$[19] = t15;
|
|
118
|
+
} else {
|
|
119
|
+
t15 = $[19];
|
|
120
|
+
}
|
|
121
|
+
useEffect(t14, t15);
|
|
122
|
+
const line_0 = lineIndex !== -1 ? lines[lineIndex] : null;
|
|
123
|
+
const active = line_0 !== null;
|
|
124
|
+
let t16;
|
|
125
|
+
if ($[20] !== boxStyle) {
|
|
126
|
+
t16 = boxStyle !== null ? getStyleFromBox(boxStyle) : null;
|
|
127
|
+
$[20] = boxStyle;
|
|
128
|
+
$[21] = t16;
|
|
129
|
+
} else {
|
|
130
|
+
t16 = $[21];
|
|
131
|
+
}
|
|
132
|
+
const finalBoxStyles = t16;
|
|
133
|
+
let t17;
|
|
134
|
+
if ($[22] !== className) {
|
|
135
|
+
t17 = classNames([styles.container, className]);
|
|
136
|
+
$[22] = className;
|
|
137
|
+
$[23] = t17;
|
|
138
|
+
} else {
|
|
139
|
+
t17 = $[23];
|
|
140
|
+
}
|
|
141
|
+
let t18;
|
|
142
|
+
if ($[24] !== active || $[25] !== finalBoxStyles || $[26] !== line_0 || $[27] !== textStyle) {
|
|
143
|
+
t18 = active ? /*#__PURE__*/jsx("div", {
|
|
73
144
|
className: styles.captions,
|
|
74
145
|
style: finalBoxStyles,
|
|
75
146
|
children: /*#__PURE__*/jsx(TextElement, {
|
|
76
147
|
textStyle: textStyle,
|
|
77
|
-
body:
|
|
148
|
+
body: line_0.text
|
|
78
149
|
})
|
|
79
|
-
}) : null
|
|
80
|
-
|
|
150
|
+
}) : null;
|
|
151
|
+
$[24] = active;
|
|
152
|
+
$[25] = finalBoxStyles;
|
|
153
|
+
$[26] = line_0;
|
|
154
|
+
$[27] = textStyle;
|
|
155
|
+
$[28] = t18;
|
|
156
|
+
} else {
|
|
157
|
+
t18 = $[28];
|
|
158
|
+
}
|
|
159
|
+
let t19;
|
|
160
|
+
if ($[29] !== t17 || $[30] !== t18) {
|
|
161
|
+
t19 = /*#__PURE__*/jsx("div", {
|
|
162
|
+
className: t17,
|
|
163
|
+
children: t18
|
|
164
|
+
});
|
|
165
|
+
$[29] = t17;
|
|
166
|
+
$[30] = t18;
|
|
167
|
+
$[31] = t19;
|
|
168
|
+
} else {
|
|
169
|
+
t19 = $[31];
|
|
170
|
+
}
|
|
171
|
+
return t19;
|
|
172
|
+
}
|
|
173
|
+
function _temp3(e) {
|
|
174
|
+
console.error(e);
|
|
175
|
+
}
|
|
176
|
+
function _temp2(srt) {
|
|
177
|
+
return parseSRT(srt);
|
|
178
|
+
}
|
|
179
|
+
function _temp(response) {
|
|
180
|
+
return response.text();
|
|
81
181
|
}
|
|
82
182
|
|
|
83
183
|
export { ClosedCaptions as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/element-closed-captions",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.77",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -32,9 +32,11 @@
|
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"type": "module",
|
|
34
34
|
"module": "es/index.js",
|
|
35
|
+
"style": "./assets/css/styles.css",
|
|
35
36
|
"exports": {
|
|
36
37
|
".": {
|
|
37
38
|
"types": "./es/index.d.ts",
|
|
39
|
+
"style": "./assets/css/styles.css",
|
|
38
40
|
"import": "./es/index.js"
|
|
39
41
|
},
|
|
40
42
|
"./assets/css/styles": "./assets/css/styles.css",
|
|
@@ -51,17 +53,17 @@
|
|
|
51
53
|
"build": "../../scripts/prepare-package.sh --types"
|
|
52
54
|
},
|
|
53
55
|
"devDependencies": {
|
|
54
|
-
"react": "^
|
|
55
|
-
"react-dom": "^
|
|
56
|
+
"react": "^19.0.0",
|
|
57
|
+
"react-dom": "^19.0.0"
|
|
56
58
|
},
|
|
57
59
|
"peerDependencies": {
|
|
58
|
-
"react": "^
|
|
59
|
-
"react-dom": "^
|
|
60
|
+
"react": "^19.0.0",
|
|
61
|
+
"react-dom": "^19.0.0"
|
|
60
62
|
},
|
|
61
63
|
"dependencies": {
|
|
62
64
|
"@babel/runtime": "^7.28.6",
|
|
63
|
-
"@micromag/core": "^0.4.
|
|
64
|
-
"@micromag/element-text": "^0.4.
|
|
65
|
+
"@micromag/core": "^0.4.77",
|
|
66
|
+
"@micromag/element-text": "^0.4.77",
|
|
65
67
|
"classnames": "^2.2.6",
|
|
66
68
|
"parse-srt": "^1.0.0-alpha",
|
|
67
69
|
"react-intl": "^8.1.3 || ^10.0.0",
|
|
@@ -71,6 +73,6 @@
|
|
|
71
73
|
"access": "public",
|
|
72
74
|
"registry": "https://registry.npmjs.org/"
|
|
73
75
|
},
|
|
74
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "b55c2c748383d30c8ff0ca7594e499dbdc8d1c10",
|
|
75
77
|
"types": "es/index.d.ts"
|
|
76
78
|
}
|