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

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 (8) hide show
  1. package/.prettierignore +3 -0
  2. package/deprecated-app/index.html +424 -296
  3. package/dist/index.css +29 -13
  4. package/dist/index.es.js +3 -2
  5. package/dist/index.js +3 -2
  6. package/dist/index.umd.js +3 -2
  7. package/package.json +7 -6
  8. package/src/player.scss +653 -590
package/deprecated-app/index.html CHANGED
@@ -1,298 +1,426 @@
1
1
  <!DOCTYPE html>
2
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>
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,
9
+ body,
10
+ div,
11
+ span,
12
+ applet,
13
+ object,
14
+ iframe,
15
+ h1,
16
+ h2,
17
+ h3,
18
+ h4,
19
+ h5,
20
+ h6,
21
+ p,
22
+ blockquote,
23
+ pre,
24
+ a,
25
+ abbr,
26
+ acronym,
27
+ address,
28
+ big,
29
+ cite,
30
+ code,
31
+ del,
32
+ dfn,
33
+ em,
34
+ img,
35
+ ins,
36
+ kbd,
37
+ q,
38
+ s,
39
+ samp,
40
+ small,
41
+ strike,
42
+ strong,
43
+ sub,
44
+ sup,
45
+ tt,
46
+ var,
47
+ b,
48
+ u,
49
+ i,
50
+ center,
51
+ dl,
52
+ dt,
53
+ dd,
54
+ ol,
55
+ ul,
56
+ li,
57
+ fieldset,
58
+ form,
59
+ label,
60
+ legend,
61
+ table,
62
+ caption,
63
+ tbody,
64
+ tfoot,
65
+ thead,
66
+ tr,
67
+ th,
68
+ td,
69
+ article,
70
+ aside,
71
+ canvas,
72
+ details,
73
+ embed,
74
+ figure,
75
+ figcaption,
76
+ footer,
77
+ header,
78
+ hgroup,
79
+ menu,
80
+ nav,
81
+ output,
82
+ ruby,
83
+ section,
84
+ summary,
85
+ time,
86
+ mark,
87
+ audio,
88
+ video {
89
+ margin: 0;
90
+ padding: 0;
91
+ border: 0;
92
+ font-size: 100%;
93
+ font: inherit;
94
+ vertical-align: baseline;
95
+ } /* HTML5 display-role reset for older browsers */
96
+ article,
97
+ aside,
98
+ details,
99
+ figcaption,
100
+ figure,
101
+ footer,
102
+ header,
103
+ hgroup,
104
+ menu,
105
+ nav,
106
+ section {
107
+ display: block;
108
+ }
109
+ body {
110
+ line-height: 1;
111
+ }
112
+ ol,
113
+ ul {
114
+ list-style: none;
115
+ }
116
+ blockquote,
117
+ q {
118
+ quotes: none;
119
+ }
120
+ blockquote:before,
121
+ blockquote:after,
122
+ q:before,
123
+ q:after {
124
+ content: '';
125
+ content: none;
126
+ }
127
+ table {
128
+ border-collapse: collapse;
129
+ border-spacing: 0;
130
+ }
131
+
132
+ html,
133
+ body {
134
+ width: 100%;
135
+ font-family: 'Helvetica Neue', 'San Francisco', sans-serif;
136
+ line-height: 1.5;
137
+ background: #eee;
138
+ color: #334;
139
+ position: relative;
140
+ }
141
+
142
+ html.dark,
143
+ html.dark body {
144
+ background: #333;
145
+ color: #efefef;
146
+ }
147
+
148
+ html.dark a {
149
+ color: #999;
150
+ }
151
+
152
+ html.dark hr {
153
+ opacity: 0.5;
154
+ }
155
+
156
+ html {
157
+ height: 100%;
158
+ }
159
+ body {
160
+ min-height: 100%;
161
+ }
162
+
163
+ * {
164
+ box-sizing: border-box;
165
+ }
166
+
167
+ hr {
168
+ border: 0px;
169
+ border-top: 1px solid white;
170
+ }
171
+
172
+ label {
173
+ color: #999;
174
+ font-size: 12px;
175
+ display: inline-block;
176
+ transform: translateX(-100%) translateY(-33px);
177
+ padding-right: 42px;
178
+ position: absolute;
179
+ }
180
+
181
+ label:after {
182
+ content: ' ⇢';
183
+ font-size: 15px;
184
+ }
185
+
186
+ #demo-content {
187
+ padding: 0px 0px 20px 0px;
188
+ width: 742px;
189
+ max-width: 100%;
190
+ margin: 0 auto;
191
+ margin-bottom: 40px;
192
+ /*border-bottom: 1px solid white;*/
193
+ }
194
+
195
+ .vdt-lightswitch {
196
+ cursor: pointer;
197
+ padding-top: 120px;
198
+ background-size: 25px auto;
199
+ background-position: center center;
200
+ background-repeat: no-repeat;
201
+ 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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');
202
+ }
203
+
204
+ .vdt-external-controls-wrapper,
205
+ .vdt-seekbar-wrapper {
206
+ margin: 100px auto 20px auto;
207
+ }
208
+
209
+ /* timecode style for demo */
210
+ #demo-content > .vdt-timecode {
211
+ margin: 60px auto 30px auto;
212
+ width: 320px;
213
+ border: 1px solid #777;
214
+ border-radius: 20px;
215
+ }
216
+
217
+ #demo-content > .vdt-timecode input {
218
+ display: inline-block;
219
+ color: #556;
220
+ width: 76px;
221
+ height: 50px;
222
+ background: none;
223
+ font-size: 19px;
224
+ text-align: left;
225
+ padding-left: 28px;
226
+ font-family: monospace, sans-serif;
227
+ /*border: 1px solid #eee;*/
228
+ border: none;
229
+ }
230
+
231
+ .dark #demo-content > .vdt-timecode input {
232
+ color: #fafafa;
233
+ }
234
+
235
+ /* slight adjustment, looks more organized */
236
+ label.externalcontrols-js,
237
+ label.timecodedisplay-js {
238
+ margin-top: -26px;
239
+ }
240
+
241
+ .component-api-test-buttons {
242
+ background: #fafafa;
243
+ border-radius: 20px;
244
+ overflow: hidden;
245
+ margin-top: 26px;
246
+ display: table;
247
+ width: 100%;
248
+ text-align: center;
249
+ user-select: none;
250
+ -webkit-user-select: none;
251
+ opacity: 0.2;
252
+ }
253
+
254
+ .component-api-test-buttons:hover {
255
+ opacity: 1;
256
+ transition: opacity 300ms ease-in;
257
+ }
258
+
259
+ .component-api-test-buttons td {
260
+ display: table-cell;
261
+ padding: 12px 8px;
262
+ cursor: pointer;
263
+ font-size: 15px;
264
+ text-transform: lowercase;
265
+ color: #444;
266
+ }
267
+
268
+ .dark .component-api-test-buttons {
269
+ background: #555;
270
+ }
271
+
272
+ .dark .component-api-test-buttons td {
273
+ color: #999;
274
+ }
275
+
276
+ .component-api-test-buttons td:first-child {
277
+ padding-left: 10px;
278
+ }
279
+
280
+ .component-api-test-buttons td:last-child {
281
+ padding-right: 10px;
282
+ }
283
+
284
+ .component-api-test-buttons td:hover {
285
+ background: white;
286
+ color: #333;
287
+ }
288
+
289
+ /* goals */
290
+ #demo-todos {
291
+ width: 640px;
292
+ max-width: 100%;
293
+ margin: 0 auto;
294
+ padding-bottom: 50px;
295
+ }
296
+
297
+ #demo-todos .progress-bar {
298
+ height: 12px;
299
+ border-radius: 6px;
300
+ background: #fff;
301
+ margin-bottom: 20px;
302
+ margin-top: 20px;
303
+ overflow: hidden;
304
+ }
305
+
306
+ #demo-todos .progress-bar .fill {
307
+ height: 100%;
308
+ background: #2ecc71;
309
+ font-size: 9px;
310
+ letter-spacing: 1px;
311
+ line-height: 13px;
312
+ padding-right: 8px;
313
+ color: white;
314
+ text-align: right;
315
+ }
316
+
317
+ /* for testing */
318
+ .tests {
319
+ padding-bottom: 20px;
320
+ }
321
+ .tests button {
322
+ padding: 8px 22px;
323
+ background: #2ecc71;
324
+ border: 0px;
325
+ border-radius: 20px;
326
+ height: 40px;
327
+ font-size: 1em;
328
+ color: white;
329
+ cursor: pointer;
330
+ }
331
+
332
+ #test-log {
333
+ z-index: 10;
334
+ min-height: 100px;
335
+ max-height: calc(50vh - 100px);
336
+ width: 100%;
337
+ left: 0px;
338
+ bottom: 0px;
339
+ position: fixed;
340
+ overflow-y: auto;
341
+ padding: 22px;
342
+ font-size: 14px;
343
+ transform: translate3d(0px, 100%, 0px);
344
+ transition: transform 300ms ease-in-out;
345
+ box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
346
+ background: rgba(0, 0, 0, 0.75);
347
+ -webkit-backdrop-filter: blur(20px);
348
+ color: rgba(255, 255, 255, 0.9);
349
+ }
350
+
351
+ #test-log.active {
352
+ transform: translate3d(0px, 0px, 0px);
353
+ }
354
+
355
+ #test-log pre {
356
+ padding: 2px 0px;
357
+ }
358
+
359
+ #test-log .final {
360
+ margin-top: 20px;
361
+ }
362
+
363
+ /* footer */
364
+ #footer {
365
+ background: #34495e;
366
+ text-align: center;
367
+ padding: 20px;
368
+ }
369
+
370
+ html.dark #footer {
371
+ background: #555;
372
+ color: #333;
373
+ }
374
+
375
+ #footer a {
376
+ color: white;
377
+ text-decoration: none;
378
+ margin: 5px 16px;
379
+ color: #eee;
380
+ }
381
+
382
+ #footer a:hover {
383
+ text-decoration: underline;
384
+ color: white;
385
+ }
386
+
387
+ @media all and (max-width: 640px) {
388
+ body {
389
+ padding-left: 24px;
390
+ padding-right: 24px;
391
+ }
392
+
393
+ span.to-do {
394
+ display: block;
395
+ /*margin-bottom:8px;*/
396
+ }
397
+
398
+ #footer {
399
+ border-radius: 20px;
400
+ border-bottom-left-radius: 0px;
401
+ border-bottom-right-radius: 0px;
402
+ }
403
+
404
+ #footer a {
405
+ display: block;
406
+ }
407
+ }
408
+
409
+ /* live demo mode */
410
+
411
+ .live-demo #demo-todos,
412
+ .live-demo #footer,
413
+ .live-demo .vdt-label {
414
+ display: none;
415
+ }
416
+ </style>
417
+ </head>
418
+ <body>
419
+ <div id="demo-content"></div>
420
+ <!-- player mounts here -->
421
+
422
+ <!-- quick info / links / todos -->
423
+ <div id="demo-todos"></div>
424
+ <script type="text/javascript" src="./index.js"></script>
425
+ </body>
426
+ </html>