@vidispine/vdt-videojs 23.1.0 → 23.2.0-pre.2

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.
Files changed (31) hide show
  1. package/dist/index.css +1 -456
  2. package/dist/index.js +1915 -342
  3. package/dist/index.umd.cjs +460 -0
  4. package/package.json +24 -22
  5. package/deprecated-app/README.md +0 -21
  6. package/deprecated-app/index.html +0 -298
  7. package/deprecated-app/index.js +0 -614
  8. package/deprecated-app/samples/birds-es.vvt +0 -53
  9. package/deprecated-app/samples/birds.vvt +0 -53
  10. package/deprecated-app/tests.js +0 -365
  11. package/dist/index.es.js +0 -335
  12. package/dist/index.umd.js +0 -351
  13. package/rollup.config.js +0 -58
  14. package/screenshot.png +0 -0
  15. package/src/constants.js +0 -51
  16. package/src/externalControls.js +0 -318
  17. package/src/helpOverlay.js +0 -110
  18. package/src/helpers.js +0 -39
  19. package/src/index.js +0 -7
  20. package/src/index.stories.mdx +0 -52
  21. package/src/menu.api.stories.mdx +0 -53
  22. package/src/menu.js +0 -373
  23. package/src/menu.usage.stories.mdx +0 -78
  24. package/src/osd.js +0 -105
  25. package/src/player.api.stories.mdx +0 -114
  26. package/src/player.js +0 -1029
  27. package/src/player.scss +0 -604
  28. package/src/player.usage.stories.mdx +0 -62
  29. package/src/seekBar.js +0 -904
  30. package/src/timeCodeDisplay.js +0 -274
  31. package/src/videoTime.js +0 -66
package/deprecated-app/index.html DELETED
@@ -1,298 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>vdt-videojs demo</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <style type="text/css">
7
- /* css reset */
8
- html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; } table {border-collapse: collapse; border-spacing: 0; }
9
-
10
- html, body{
11
- width: 100%;
12
- font-family: 'Helvetica Neue', 'San Francisco', sans-serif;
13
- line-height: 1.5;
14
- background: #eee;
15
- color: #334;
16
- position: relative;
17
- }
18
-
19
- html.dark, html.dark body{
20
- background: #333;
21
- color: #efefef;
22
- }
23
-
24
- html.dark a{
25
- color: #999;
26
- }
27
-
28
- html.dark hr{
29
- opacity: .5;
30
- }
31
-
32
- html{ height: 100%; }
33
- body{ min-height: 100%; }
34
-
35
- *{
36
- box-sizing: border-box;
37
- }
38
-
39
- hr{
40
- border: 0px;
41
- border-top: 1px solid white;
42
- }
43
-
44
- label{
45
- color: #999;
46
- font-size: 12px;
47
- display: inline-block;
48
- transform: translateX(-100%) translateY(-33px);
49
- padding-right: 42px;
50
- position: absolute;
51
- }
52
-
53
- label:after{
54
- content: " ⇢";
55
- font-size: 15px;
56
- }
57
-
58
- #demo-content{
59
- padding: 0px 0px 20px 0px;
60
- width: 742px;
61
- max-width: 100%;
62
- margin: 0 auto;
63
- margin-bottom: 40px;
64
- /*border-bottom: 1px solid white;*/
65
- }
66
-
67
- .vdt-lightswitch{
68
- cursor: pointer;
69
- padding-top: 120px;
70
- background-size: 25px auto;
71
- background-position: center center;
72
- background-repeat: no-repeat;
73
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABLCAYAAAAyEtS4AAAQu0lEQVR42s2beYxV9RXHRQSXojVUY611qUFtSpuYkphQbKGVItg/WCKJWFkERAUUBBQQF5BFRFFZBURBVmWRVRAHZBEcUNZBdhBlE4ZtGGbmLXf59ft5+f1ebqZoeJk3M7zk5L53372/e77nfM/yO2/msvJ4GWOqSC6XVJ01a1bV/v37877KZZf6C0VRGMV/SWEHLCqcKy2sV5HKX7Fjx47qenC10sp37979+q+++qrO1q1bG23atOnvc+fO/X2m669cufKKcgUgK6J89Qt8dc2qVaua7N27d0Z+fv7xRCJhePm+b06dOlV85MiRVXv27Ok4ffr0O3XttZIrJTVefPHFmz/88MM7df4uvnv77bdrRp5VtVx4jwcip6BTHVm+y3fffTf50KFDe2KxmOEVhqE5f/58KAD+sWPHguPHj5vi4mJz5swZs23btuItW7bs27179/YDBw7s+/7770/++OOP53/44YeSgwcPFurcEa03e8OGDX+wz80emKhlXn/99Vq5ubkDZd3NUtILgsC418mTJwMpE9u5c6cnCffv32+OHj0anj592hewuIAm8ZB78R7wRUVF5ty5c+bs2bN4z3ieZ0TJHaJvDQum7DETXeTrr78eJosloE0ymUw9WJTxdS4uSiUEAuujFAqiUOq6kpISU1hYiJIh4OWBBOtwjwAnt2/f7slT3ubNm72NGzfGBaJEHjEzZ878T1YoFgniqt9++20OCv30009GlvZRYNeuXZ6oEaI8tAGYrG9OnDgBQCNgRp4zogqUMqIUljZay0jRcP369YGM461bty65du3a5Jo1a5KKs9jy5cu9ZcuWGcVOw2wAIXNcxfGLL74YjmJ5eXlxKRTs27cvFGWgUkppxYfROaMYSiksy6aU/eabb4wszGdf57k3pjViymYJAfL5DmD6zH2snwIrI5lPP/10Te3atau79F6m7OTef/7550dRUnQIRA0DKPgvSqQUgQayLko7pdKK4Q1RyCiYzeHDh5GUp+TN1PVKFonVq1fnS/bKI2tlvHk69nWU1rVXwYwyB7eUHIwiWjDEEyiIpVEciQJwFOKzEoIRXYyUCkWdYwK8RmtNluL9v/zyy/bz589/UOn23rfeeut21Z2bW7VqdVObNm1+o0deJ7m6ZcuW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');
74
- }
75
-
76
- .vdt-external-controls-wrapper,
77
- .vdt-seekbar-wrapper{
78
- margin: 100px auto 20px auto;
79
- }
80
-
81
- /* timecode style for demo */
82
- #demo-content > .vdt-timecode{
83
- margin: 60px auto 30px auto;
84
- width: 320px;
85
- border: 1px solid #777;
86
- border-radius: 20px;
87
- }
88
-
89
- #demo-content > .vdt-timecode input{
90
- display: inline-block;
91
- color: #556;
92
- width: 76px;
93
- height: 50px;
94
- background: none;
95
- font-size: 19px;
96
- text-align: left;
97
- padding-left: 28px;
98
- font-family: monospace, sans-serif;
99
- /*border: 1px solid #eee;*/
100
- border: none;
101
-
102
- }
103
-
104
- .dark #demo-content > .vdt-timecode input{
105
- color: #fafafa;
106
- }
107
-
108
- /* slight adjustment, looks more organized */
109
- label.externalcontrols-js,
110
- label.timecodedisplay-js{
111
- margin-top: -26px;
112
- }
113
-
114
- .component-api-test-buttons{
115
- background: #fafafa;
116
- border-radius: 20px;
117
- overflow: hidden;
118
- margin-top: 26px;
119
- display: table;
120
- width: 100%;
121
- text-align: center;
122
- user-select: none;
123
- -webkit-user-select: none;
124
- opacity: .2;
125
- }
126
-
127
- .component-api-test-buttons:hover{
128
- opacity: 1;
129
- transition: opacity 300ms ease-in;
130
- }
131
-
132
- .component-api-test-buttons td{
133
- display: table-cell;
134
- padding: 12px 8px;
135
- cursor: pointer;
136
- font-size: 15px;
137
- text-transform: lowercase;
138
- color: #444;
139
- }
140
-
141
- .dark .component-api-test-buttons{
142
- background: #555;
143
- }
144
-
145
- .dark .component-api-test-buttons td{
146
- color: #999;
147
- }
148
-
149
- .component-api-test-buttons td:first-child{
150
- padding-left: 10px;
151
- }
152
-
153
- .component-api-test-buttons td:last-child{
154
- padding-right: 10px;
155
- }
156
-
157
- .component-api-test-buttons td:hover{
158
- background: white;
159
- color: #333;
160
- }
161
-
162
- /* goals */
163
- #demo-todos{
164
- width: 640px;
165
- max-width: 100%;
166
- margin: 0 auto;
167
- padding-bottom: 50px;
168
- }
169
-
170
- #demo-todos .progress-bar{
171
- height: 12px;
172
- border-radius: 6px;
173
- background: #fff;
174
- margin-bottom: 20px;
175
- margin-top: 20px;
176
- overflow: hidden;
177
- }
178
-
179
- #demo-todos .progress-bar .fill{
180
- height: 100%;
181
- background: #2ecc71 ;
182
- font-size: 9px;
183
- letter-spacing: 1px;
184
- line-height: 13px;
185
- padding-right: 8px;
186
- color: white;
187
- text-align: right;
188
- }
189
-
190
-
191
- /* for testing */
192
- .tests{
193
- padding-bottom: 20px;
194
- }
195
- .tests button{
196
- padding: 8px 22px;
197
- background: #2ecc71;
198
- border: 0px;
199
- border-radius: 20px;
200
- height: 40px;
201
- font-size: 1em;
202
- color: white;
203
- cursor: pointer;
204
- }
205
-
206
- #test-log{
207
- z-index: 10;
208
- min-height: 100px;
209
- max-height: calc(50vh - 100px);
210
- width: 100%;
211
- left: 0px; bottom: 0px;
212
- position: fixed;
213
- overflow-y: auto;
214
- padding: 22px;
215
- font-size: 14px;
216
- transform: translate3d(0px, 100%, 0px);
217
- transition: transform 300ms ease-in-out;
218
- box-shadow: 0px 0px 25px rgba(0,0,0,.1);
219
- background: rgba(0,0,0,.75);
220
- -webkit-backdrop-filter: blur(20px);
221
- color: rgba(255,255,255,.9);
222
- }
223
-
224
- #test-log.active{
225
- transform: translate3d(0px, 0px, 0px);
226
- }
227
-
228
- #test-log pre{
229
- padding: 2px 0px;
230
- }
231
-
232
- #test-log .final{ margin-top: 20px; }
233
-
234
-
235
- /* footer */
236
- #footer{
237
- background: #34495e;
238
- text-align: center;
239
- padding: 20px;
240
- }
241
-
242
- html.dark #footer{
243
- background: #555;
244
- color: #333;
245
- }
246
-
247
- #footer a{
248
- color: white;
249
- text-decoration: none;
250
- margin: 5px 16px;
251
- color: #eee;
252
- }
253
-
254
- #footer a:hover{
255
- text-decoration: underline;
256
- color: white;
257
- }
258
-
259
-
260
- @media all and (max-width: 640px){
261
- body{
262
- padding-left: 24px;
263
- padding-right: 24px;
264
- }
265
-
266
- span.to-do{
267
- display: block;
268
- /*margin-bottom:8px;*/
269
- }
270
-
271
- #footer{
272
- border-radius: 20px;
273
- border-bottom-left-radius: 0px;
274
- border-bottom-right-radius: 0px;
275
- }
276
-
277
- #footer a{
278
- display: block;
279
- }
280
- }
281
-
282
- /* live demo mode */
283
-
284
- .live-demo #demo-todos,
285
- .live-demo #footer,
286
- .live-demo .vdt-label{
287
- display: none;
288
- }
289
- </style>
290
- </head>
291
- <body>
292
- <div id="demo-content"></div> <!-- player mounts here -->
293
-
294
- <!-- quick info / links / todos -->
295
- <div id="demo-todos"></div>
296
- <script type="text/javascript" src="./index.js"></script>
297
- </body>
298
- </html>