@latest-thinking/lt-player 1.0.5-l → 1.0.5-n
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/dist/css/lt-player-main.css +1 -1
- package/dist/css/lt-player-main.css.map +1 -1
- package/dist/js/lt-player-main.js +1 -1
- package/dist/js/lt-player-main.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/sass/abstracts/_mixins.scss +4 -4
- package/src/assets/sass/abstracts/_placeholders.scss +5 -5
- package/src/assets/sass/abstracts/_variables.scss +7 -7
- package/src/assets/sass/components/_modal.scss +61 -19
- package/src/assets/sass/sections/_additional-info.scss +3 -3
- package/src/assets/sass/sections/_poster.scss +13 -10
- package/src/assets/sass/sections/_settings.scss +11 -11
- package/src/assets/sass/sections/_subtitles.scss +1 -1
- package/src/assets/sass/sections/controllers/_botom.scss +85 -37
- package/src/assets/sass/sections/controllers/_mini-player.scss +1 -1
- package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss +19 -20
- package/src/assets/sass/sections/controllers/_top.scss +8 -4
- package/src/components/LTPlayerSetup.ts +13 -8
- package/src/components/LTPlayerType.ts +5 -0
- package/src/components/addInfo/LTPlayerAddInfoManager.ts +12 -5
- package/src/components/addInfo/LTPlayerAdditionalInfoEvents.ts +37 -12
- package/src/components/config/LTPlayerConfigProcessor.ts +9 -5
- package/src/components/events/LTPlayerCommon.ts +1 -4
- package/src/components/share/LTPlayerShareEvents.ts +13 -3
- package/src/services/ResizeService.ts +32 -11
- package/src/views/additionalInfo.handlebars +58 -0
package/package.json
CHANGED
|
@@ -22,17 +22,17 @@
|
|
|
22
22
|
text-decoration: none;
|
|
23
23
|
vertical-align: middle;
|
|
24
24
|
line-height: 150%;
|
|
25
|
-
padding: 8px
|
|
25
|
+
padding: 8px 8px;
|
|
26
26
|
text-align: center;
|
|
27
27
|
border: none;
|
|
28
28
|
border-radius: 0;
|
|
29
29
|
cursor: pointer;
|
|
30
30
|
|
|
31
31
|
img {
|
|
32
|
-
width:
|
|
33
|
-
height:
|
|
34
|
-
min-width:
|
|
35
|
-
min-height:
|
|
32
|
+
width: 24px;
|
|
33
|
+
height: 24px;
|
|
34
|
+
min-width: 24px;
|
|
35
|
+
min-height: 24px;
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
|
|
17
17
|
$lt-font-family-base: "MuseoSans", sans-serif !important;
|
|
18
18
|
|
|
19
|
-
$lt-player-font-size-xs:
|
|
20
|
-
$lt-player-font-size-base:
|
|
21
|
-
$lt-player-font-size-lg:
|
|
22
|
-
$lt-player-font-size-xl:
|
|
23
|
-
$lt-player-font-size-xxl:
|
|
24
|
-
$lt-player-font-size-xxl2:
|
|
25
|
-
$lt-player-font-size-xxxl2:
|
|
19
|
+
$lt-player-font-size-xs: 12px;
|
|
20
|
+
$lt-player-font-size-base: 16px;
|
|
21
|
+
$lt-player-font-size-lg: 18px;
|
|
22
|
+
$lt-player-font-size-xl: 20px;
|
|
23
|
+
$lt-player-font-size-xxl: 21px;
|
|
24
|
+
$lt-player-font-size-xxl2: 24px;
|
|
25
|
+
$lt-player-font-size-xxxl2: 30px;
|
|
26
26
|
|
|
27
27
|
$lt-player-font-weight-xs: 100;
|
|
28
28
|
$lt-player-font-weight-sm: 300;
|
|
@@ -4,22 +4,22 @@
|
|
|
4
4
|
font-size: $lt-player-font-size-xxxl2;
|
|
5
5
|
font-weight: $lt-player-font-weight-lg;
|
|
6
6
|
margin-top: 0;
|
|
7
|
-
margin-bottom:
|
|
7
|
+
margin-bottom: 16px;
|
|
8
8
|
color: $default-lt-player-modal-color !important;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@mixin modal-h4 {
|
|
12
|
-
font-size: $lt-player-font-size-
|
|
12
|
+
font-size: $lt-player-font-size-xxl2;
|
|
13
13
|
font-weight: $lt-player-font-weight-lg;
|
|
14
14
|
margin-bottom: 0;
|
|
15
|
-
margin-top:
|
|
15
|
+
margin-top: 16px;
|
|
16
16
|
color: $default-lt-player-modal-color !important;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
@mixin modal-b {
|
|
20
20
|
display: block;
|
|
21
21
|
font-size: $lt-player-font-size-base;
|
|
22
|
-
margin-top:
|
|
22
|
+
margin-top: 16px;
|
|
23
23
|
color: $default-lt-player-modal-color !important;
|
|
24
24
|
}
|
|
25
25
|
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
@mixin modal-img {
|
|
35
35
|
max-width: 100%;
|
|
36
36
|
height: auto;
|
|
37
|
-
margin-bottom:
|
|
37
|
+
margin-bottom: 16px;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
@mixin modal-text-color {
|
|
@@ -48,6 +48,17 @@
|
|
|
48
48
|
|
|
49
49
|
.lt-player-portrate--mobile {
|
|
50
50
|
&.lt-player--portrait {
|
|
51
|
+
&__lg,
|
|
52
|
+
&__md,
|
|
53
|
+
&__sm,
|
|
54
|
+
&__xs {
|
|
55
|
+
.player-lt {
|
|
56
|
+
&__modal-body {
|
|
57
|
+
padding: 0;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
51
62
|
&__xs {
|
|
52
63
|
.player-lt {
|
|
53
64
|
&__mobile {
|
|
@@ -60,7 +71,7 @@
|
|
|
60
71
|
h6,
|
|
61
72
|
p,
|
|
62
73
|
b,
|
|
63
|
-
|
|
74
|
+
strong,
|
|
64
75
|
span {
|
|
65
76
|
font-size: $lt-player-font-size-base;
|
|
66
77
|
}
|
|
@@ -93,7 +104,7 @@
|
|
|
93
104
|
align-items: center;
|
|
94
105
|
background-color: $default-lt-player-modal-header;
|
|
95
106
|
min-height: 50px;
|
|
96
|
-
padding: 0
|
|
107
|
+
padding: 0 16px;
|
|
97
108
|
border-radius: 15px 15px 0 0;
|
|
98
109
|
|
|
99
110
|
.player-lt__close-button {
|
|
@@ -108,8 +119,9 @@
|
|
|
108
119
|
&__modal-content {
|
|
109
120
|
color: $default-lt-button-color;
|
|
110
121
|
text-align: left;
|
|
111
|
-
padding:
|
|
122
|
+
padding: 16px;
|
|
112
123
|
overflow: auto;
|
|
124
|
+
font-family: $lt-font-family-base;
|
|
113
125
|
|
|
114
126
|
button,
|
|
115
127
|
a {
|
|
@@ -169,7 +181,7 @@
|
|
|
169
181
|
z-index: 50;
|
|
170
182
|
left: 0;
|
|
171
183
|
background: $default-lt-player-white;
|
|
172
|
-
padding: 0 0
|
|
184
|
+
padding: 0 0 32px 0;
|
|
173
185
|
bottom: -66%;
|
|
174
186
|
transition: .3s;
|
|
175
187
|
max-height: 90%;
|
|
@@ -197,13 +209,35 @@
|
|
|
197
209
|
transform: translate(-50%, -50%);
|
|
198
210
|
background-color: $default-lt-player-white;
|
|
199
211
|
color: $default-lt-player-modal-color;
|
|
200
|
-
padding: 2rem 2.5rem;
|
|
201
212
|
border-radius: 0;
|
|
202
213
|
font-family: $lt-font-family-base;
|
|
203
214
|
width: 100%;
|
|
204
215
|
max-height: 540px;
|
|
205
|
-
max-width: 715px;
|
|
206
216
|
overflow: auto;
|
|
217
|
+
max-width: 620px;
|
|
218
|
+
padding: 40px 0;
|
|
219
|
+
|
|
220
|
+
span {
|
|
221
|
+
margin-right: 40px;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.modal-flex {
|
|
225
|
+
display: flex;
|
|
226
|
+
align-items: end;
|
|
227
|
+
gap: 24px;
|
|
228
|
+
flex-wrap: wrap;
|
|
229
|
+
|
|
230
|
+
img {
|
|
231
|
+
max-width: 220px;
|
|
232
|
+
margin-bottom: 0;
|
|
233
|
+
flex: 50%;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
h3 {
|
|
237
|
+
flex: 50%;
|
|
238
|
+
word-break: unset;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
207
241
|
|
|
208
242
|
&::-webkit-scrollbar-track {
|
|
209
243
|
-webkit-box-shadow: transparent;
|
|
@@ -220,7 +254,7 @@
|
|
|
220
254
|
}
|
|
221
255
|
|
|
222
256
|
hr {
|
|
223
|
-
margin:
|
|
257
|
+
margin: 24px 0;
|
|
224
258
|
border-top: 1px solid $default-lt-button-other;
|
|
225
259
|
}
|
|
226
260
|
|
|
@@ -242,7 +276,7 @@
|
|
|
242
276
|
h1,
|
|
243
277
|
h2 {
|
|
244
278
|
@include modal-h2;
|
|
245
|
-
margin-bottom:
|
|
279
|
+
margin-bottom: 32px;
|
|
246
280
|
}
|
|
247
281
|
|
|
248
282
|
h3,
|
|
@@ -261,25 +295,33 @@
|
|
|
261
295
|
|
|
262
296
|
p {
|
|
263
297
|
@include modal-p;
|
|
264
|
-
margin-top:
|
|
265
|
-
margin-bottom:
|
|
298
|
+
margin-top: 8px;
|
|
299
|
+
margin-bottom: 32px;
|
|
300
|
+
|
|
301
|
+
&:last-child {
|
|
302
|
+
margin-bottom: 0;
|
|
303
|
+
}
|
|
266
304
|
}
|
|
267
305
|
}
|
|
268
306
|
|
|
307
|
+
&__modal-body {
|
|
308
|
+
padding: 0 40px;
|
|
309
|
+
}
|
|
310
|
+
|
|
269
311
|
&__close-button {
|
|
270
312
|
z-index: 20;
|
|
271
313
|
float: right;
|
|
272
|
-
width:
|
|
273
|
-
font-size:
|
|
314
|
+
width: 24px;
|
|
315
|
+
font-size: $lt-player-font-size-xxxl2 !important;
|
|
274
316
|
line-height: 1;
|
|
275
|
-
padding: 0
|
|
317
|
+
padding: 0;
|
|
276
318
|
text-align: center;
|
|
277
319
|
cursor: pointer;
|
|
278
320
|
border-radius: 0.25rem;
|
|
279
321
|
background-color: transparent;
|
|
280
322
|
color: $default-lt-button-color;
|
|
281
323
|
transition: color 0.12s ease-in-out;
|
|
282
|
-
margin-bottom:
|
|
324
|
+
margin-bottom: 16px;
|
|
283
325
|
position: sticky;
|
|
284
326
|
top: 0;
|
|
285
327
|
margin-top: 0 !important;
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-direction: column;
|
|
33
33
|
justify-content: flex-end;
|
|
34
|
-
gap:
|
|
34
|
+
gap: 32px;
|
|
35
35
|
background: transparent;
|
|
36
|
-
padding-bottom:
|
|
36
|
+
padding-bottom: 25px;
|
|
37
37
|
z-index: 30;
|
|
38
38
|
|
|
39
39
|
button {
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
display: flex;
|
|
49
49
|
flex-direction: column;
|
|
50
50
|
justify-content: flex-end;
|
|
51
|
-
gap:
|
|
51
|
+
gap: 16px;
|
|
52
52
|
background: transparent;
|
|
53
53
|
padding-bottom: 0;
|
|
54
54
|
|
|
@@ -32,15 +32,15 @@
|
|
|
32
32
|
&__body {
|
|
33
33
|
.content {
|
|
34
34
|
&__header {
|
|
35
|
-
padding:
|
|
35
|
+
padding: 32px;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&__body {
|
|
39
|
-
padding: 0
|
|
39
|
+
padding: 0 32px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&__footer {
|
|
43
|
-
padding:
|
|
43
|
+
padding: 32px;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
}
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
.content {
|
|
59
59
|
&__body {
|
|
60
60
|
.poster-paragraph {
|
|
61
|
-
font-size:
|
|
61
|
+
font-size: 16px;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.poster-button-watch-now {
|
|
72
|
-
font-size:
|
|
72
|
+
font-size: $lt-player-font-size-xs;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
}
|
|
@@ -115,13 +115,14 @@
|
|
|
115
115
|
|
|
116
116
|
.content {
|
|
117
117
|
display: flex;
|
|
118
|
+
width: 100%;
|
|
118
119
|
flex-direction: column;
|
|
119
120
|
justify-content: space-between;
|
|
120
121
|
position: absolute;
|
|
121
122
|
bottom: 0;
|
|
122
123
|
|
|
123
124
|
&__header {
|
|
124
|
-
padding:
|
|
125
|
+
padding: 24px;
|
|
125
126
|
|
|
126
127
|
.poster-logo-header {
|
|
127
128
|
display: flex;
|
|
@@ -141,7 +142,7 @@
|
|
|
141
142
|
|
|
142
143
|
&__body {
|
|
143
144
|
margin-top: auto;
|
|
144
|
-
padding: 0
|
|
145
|
+
padding: 0 24px;
|
|
145
146
|
|
|
146
147
|
.poster-title {
|
|
147
148
|
@extend %line-clamp-3;
|
|
@@ -149,7 +150,7 @@
|
|
|
149
150
|
color: $default-lt-player-white !important;
|
|
150
151
|
font-size: $lt-player-font-size-base;
|
|
151
152
|
font-weight: $lt-player-font-weight-xs;
|
|
152
|
-
margin: 0 0
|
|
153
|
+
margin: 0 0 8px;
|
|
153
154
|
}
|
|
154
155
|
|
|
155
156
|
.poster-paragraph {
|
|
@@ -164,15 +165,16 @@
|
|
|
164
165
|
}
|
|
165
166
|
|
|
166
167
|
&__footer {
|
|
167
|
-
padding:
|
|
168
|
+
padding: 24px;
|
|
168
169
|
|
|
169
170
|
.poster-buttons {
|
|
170
171
|
display: flex;
|
|
171
|
-
gap:
|
|
172
|
+
gap: 8px;
|
|
172
173
|
|
|
173
174
|
.poster-button-play {
|
|
174
175
|
@extend %lt-player-btn;
|
|
175
176
|
@include yellow-btn;
|
|
177
|
+
padding: 12px 12px;
|
|
176
178
|
}
|
|
177
179
|
|
|
178
180
|
.poster-button-watch-now {
|
|
@@ -185,6 +187,7 @@
|
|
|
185
187
|
@extend %lt-player-btn;
|
|
186
188
|
background-color: $default-lt-button-other;
|
|
187
189
|
margin-left: auto;
|
|
190
|
+
padding: 12px 12px;
|
|
188
191
|
}
|
|
189
192
|
}
|
|
190
193
|
}
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
border-radius: 0;
|
|
21
21
|
|
|
22
22
|
&__subtitles {
|
|
23
|
-
padding:
|
|
23
|
+
padding: 16px 24px 24px;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.line-button {
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
&__button-save {
|
|
49
49
|
.button-save {
|
|
50
50
|
@include buttons-xs;
|
|
51
|
-
font-size:
|
|
51
|
+
font-size: $lt-player-font-size-xs;
|
|
52
52
|
width: 100%;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
&__button-save {
|
|
81
81
|
.button-save {
|
|
82
82
|
@include buttons-sm;
|
|
83
|
-
font-size:
|
|
83
|
+
font-size: $lt-player-font-size-base;
|
|
84
84
|
width: 100%;
|
|
85
85
|
}
|
|
86
86
|
}
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
left: 0;
|
|
115
115
|
background: $default-lt-player-white;
|
|
116
116
|
border-radius: 0 0 0 30px;
|
|
117
|
-
padding: 0 0
|
|
117
|
+
padding: 0 0 32px 0;
|
|
118
118
|
bottom: -200%;
|
|
119
119
|
transition:.3s;
|
|
120
120
|
|
|
@@ -141,10 +141,10 @@
|
|
|
141
141
|
bottom: 0;
|
|
142
142
|
display: flex;
|
|
143
143
|
flex-direction: column;
|
|
144
|
-
padding: 0 0
|
|
144
|
+
padding: 0 0 24px 0;
|
|
145
145
|
|
|
146
146
|
&__speed-range {
|
|
147
|
-
padding:
|
|
147
|
+
padding: 24px 24px 0 24px;
|
|
148
148
|
align-items: center;
|
|
149
149
|
color: $default-lt-player-black;
|
|
150
150
|
display: flex;
|
|
@@ -212,7 +212,7 @@
|
|
|
212
212
|
|
|
213
213
|
.speed-range-input {
|
|
214
214
|
color: $default-lt-player-blue;
|
|
215
|
-
height:
|
|
215
|
+
height: 32px;
|
|
216
216
|
cursor: pointer;
|
|
217
217
|
}
|
|
218
218
|
|
|
@@ -245,7 +245,7 @@
|
|
|
245
245
|
&__subtitles {
|
|
246
246
|
display: flex;
|
|
247
247
|
justify-content: space-between;
|
|
248
|
-
padding:
|
|
248
|
+
padding: 16px 24px 0 24px;
|
|
249
249
|
align-items: center;
|
|
250
250
|
|
|
251
251
|
.subtitles-body__input-switch:checked + .subtitles-body__slider {
|
|
@@ -313,7 +313,7 @@
|
|
|
313
313
|
}
|
|
314
314
|
|
|
315
315
|
&__button-save {
|
|
316
|
-
padding:
|
|
316
|
+
padding: 16px 24px 0 24px;
|
|
317
317
|
color: black;
|
|
318
318
|
display: flex;
|
|
319
319
|
justify-content: left;
|
|
@@ -321,12 +321,12 @@
|
|
|
321
321
|
.button-save {
|
|
322
322
|
@extend %lt-player-btn;
|
|
323
323
|
@include yellow-btn;
|
|
324
|
-
padding:
|
|
324
|
+
padding: 12px 32px;
|
|
325
325
|
}
|
|
326
326
|
}
|
|
327
327
|
|
|
328
328
|
&__exit-button {
|
|
329
|
-
padding:
|
|
329
|
+
padding: 16px;
|
|
330
330
|
|
|
331
331
|
span {
|
|
332
332
|
display: flex;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
background-color: $default-lt-player-black !important;
|
|
8
8
|
font-size: $lt-player-font-size-lg !important;
|
|
9
9
|
line-height: $lt-player-line-height !important;
|
|
10
|
-
padding:
|
|
10
|
+
padding: 8px 12px !important;
|
|
11
11
|
font-family: $lt-font-family-base !important;
|
|
12
12
|
white-space: unset !important;
|
|
13
13
|
}
|