@latest-thinking/lt-player 1.0.5-l → 1.0.5-m

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 (18) hide show
  1. package/dist/css/lt-player-main.css +1 -1
  2. package/dist/css/lt-player-main.css.map +1 -1
  3. package/dist/js/lt-player-main.js +1 -1
  4. package/dist/js/lt-player-main.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/assets/sass/abstracts/_mixins.scss +4 -4
  7. package/src/assets/sass/abstracts/_placeholders.scss +5 -5
  8. package/src/assets/sass/abstracts/_variables.scss +7 -7
  9. package/src/assets/sass/components/_modal.scss +15 -15
  10. package/src/assets/sass/sections/_additional-info.scss +3 -3
  11. package/src/assets/sass/sections/_poster.scss +11 -10
  12. package/src/assets/sass/sections/_settings.scss +11 -11
  13. package/src/assets/sass/sections/_subtitles.scss +1 -1
  14. package/src/assets/sass/sections/controllers/_botom.scss +85 -37
  15. package/src/assets/sass/sections/controllers/_mini-player.scss +1 -1
  16. package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss +19 -20
  17. package/src/assets/sass/sections/controllers/_top.scss +4 -4
  18. package/src/services/ResizeService.ts +7 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latest-thinking/lt-player",
3
- "version": "1.0.5-l",
3
+ "version": "1.0.5-m",
4
4
  "description": "LT player.",
5
5
  "main": "dist/js/lt-player-main.js",
6
6
  "module": "dist/js/lt-player-main.js",
package/src/assets/sass/abstracts/_mixins.scss CHANGED
@@ -76,10 +76,10 @@
76
76
  padding: 8px 8px;
77
77
 
78
78
  img {
79
- width: 1rem;
80
- height: 1rem;
81
- min-width: 1rem;
82
- min-height: 1rem;
79
+ width: 16px;
80
+ height: 16px;
81
+ min-width: 16px;
82
+ min-height: 16px;
83
83
  }
84
84
  }
85
85
 
package/src/assets/sass/abstracts/_placeholders.scss CHANGED
@@ -22,17 +22,17 @@
22
22
  text-decoration: none;
23
23
  vertical-align: middle;
24
24
  line-height: 150%;
25
- padding: 8px 10px;
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: 1.5rem;
33
- height: 1.5rem;
34
- min-width: 1.5rem;
35
- min-height: 1.5rem;
32
+ width: 24px;
33
+ height: 24px;
34
+ min-width: 24px;
35
+ min-height: 24px;
36
36
  }
37
37
  }
38
38
 
package/src/assets/sass/abstracts/_variables.scss CHANGED
@@ -16,13 +16,13 @@
16
16
 
17
17
  $lt-font-family-base: "MuseoSans", sans-serif !important;
18
18
 
19
- $lt-player-font-size-xs: 0.75rem;
20
- $lt-player-font-size-base: 1rem;
21
- $lt-player-font-size-lg: 1.125rem;
22
- $lt-player-font-size-xl: 1.25rem;
23
- $lt-player-font-size-xxl: 1.313rem;
24
- $lt-player-font-size-xxl2: 1.5rem;
25
- $lt-player-font-size-xxxl2: 1.875rem;
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;
package/src/assets/sass/components/_modal.scss CHANGED
@@ -4,7 +4,7 @@
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: 1rem;
7
+ margin-bottom: 16px;
8
8
  color: $default-lt-player-modal-color !important;
9
9
  }
10
10
 
@@ -12,14 +12,14 @@
12
12
  font-size: $lt-player-font-size-xxl;
13
13
  font-weight: $lt-player-font-weight-lg;
14
14
  margin-bottom: 0;
15
- margin-top: 1rem;
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: 1rem;
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: 1rem;
37
+ margin-bottom: 16px;
38
38
  }
39
39
 
40
40
  @mixin modal-text-color {
@@ -93,7 +93,7 @@
93
93
  align-items: center;
94
94
  background-color: $default-lt-player-modal-header;
95
95
  min-height: 50px;
96
- padding: 0 1rem;
96
+ padding: 0 16px;
97
97
  border-radius: 15px 15px 0 0;
98
98
 
99
99
  .player-lt__close-button {
@@ -108,7 +108,7 @@
108
108
  &__modal-content {
109
109
  color: $default-lt-button-color;
110
110
  text-align: left;
111
- padding: 1rem;
111
+ padding: 16px;
112
112
  overflow: auto;
113
113
 
114
114
  button,
@@ -169,7 +169,7 @@
169
169
  z-index: 50;
170
170
  left: 0;
171
171
  background: $default-lt-player-white;
172
- padding: 0 0 2rem 0;
172
+ padding: 0 0 32px 0;
173
173
  bottom: -66%;
174
174
  transition: .3s;
175
175
  max-height: 90%;
@@ -197,7 +197,7 @@
197
197
  transform: translate(-50%, -50%);
198
198
  background-color: $default-lt-player-white;
199
199
  color: $default-lt-player-modal-color;
200
- padding: 2rem 2.5rem;
200
+ padding: 32px 40px;
201
201
  border-radius: 0;
202
202
  font-family: $lt-font-family-base;
203
203
  width: 100%;
@@ -220,7 +220,7 @@
220
220
  }
221
221
 
222
222
  hr {
223
- margin: 1rem 0;
223
+ margin: 16px 0;
224
224
  border-top: 1px solid $default-lt-button-other;
225
225
  }
226
226
 
@@ -242,7 +242,7 @@
242
242
  h1,
243
243
  h2 {
244
244
  @include modal-h2;
245
- margin-bottom: 2rem;
245
+ margin-bottom: 32px;
246
246
  }
247
247
 
248
248
  h3,
@@ -261,16 +261,16 @@
261
261
 
262
262
  p {
263
263
  @include modal-p;
264
- margin-top: .5rem;
265
- margin-bottom: 2rem;
264
+ margin-top: 8px;
265
+ margin-bottom: 32px;
266
266
  }
267
267
  }
268
268
 
269
269
  &__close-button {
270
270
  z-index: 20;
271
271
  float: right;
272
- width: 1.5rem;
273
- font-size: 1.5rem !important;
272
+ width: 24px;
273
+ font-size: $lt-player-font-size-xxl2 !important;
274
274
  line-height: 1;
275
275
  padding: 0 .2em .15em;
276
276
  text-align: center;
@@ -279,7 +279,7 @@
279
279
  background-color: transparent;
280
280
  color: $default-lt-button-color;
281
281
  transition: color 0.12s ease-in-out;
282
- margin-bottom: 1rem;
282
+ margin-bottom: 16px;
283
283
  position: sticky;
284
284
  top: 0;
285
285
  margin-top: 0 !important;
package/src/assets/sass/sections/_additional-info.scss CHANGED
@@ -31,9 +31,9 @@
31
31
  display: flex;
32
32
  flex-direction: column;
33
33
  justify-content: flex-end;
34
- gap: 2rem;
34
+ gap: 32px;
35
35
  background: transparent;
36
- padding-bottom: 1.6rem;
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: 1rem;
51
+ gap: 16px;
52
52
  background: transparent;
53
53
  padding-bottom: 0;
54
54
 
package/src/assets/sass/sections/_poster.scss CHANGED
@@ -32,15 +32,15 @@
32
32
  &__body {
33
33
  .content {
34
34
  &__header {
35
- padding: 2rem;
35
+ padding: 32px;
36
36
  }
37
37
 
38
38
  &__body {
39
- padding: 0 2rem;
39
+ padding: 0 32px;
40
40
  }
41
41
 
42
42
  &__footer {
43
- padding: 2rem;
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: 1rem;
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: .8rem;
72
+ font-size: $lt-player-font-size-xs;
73
73
  }
74
74
  }
75
75
  }
@@ -121,7 +121,7 @@
121
121
  bottom: 0;
122
122
 
123
123
  &__header {
124
- padding: 1.5rem;
124
+ padding: 24px;
125
125
 
126
126
  .poster-logo-header {
127
127
  display: flex;
@@ -141,7 +141,7 @@
141
141
 
142
142
  &__body {
143
143
  margin-top: auto;
144
- padding: 0 1.5rem;
144
+ padding: 0 24px;
145
145
 
146
146
  .poster-title {
147
147
  @extend %line-clamp-3;
@@ -149,7 +149,7 @@
149
149
  color: $default-lt-player-white !important;
150
150
  font-size: $lt-player-font-size-base;
151
151
  font-weight: $lt-player-font-weight-xs;
152
- margin: 0 0 .5rem;
152
+ margin: 0 0 8px;
153
153
  }
154
154
 
155
155
  .poster-paragraph {
@@ -164,15 +164,16 @@
164
164
  }
165
165
 
166
166
  &__footer {
167
- padding: 1.5rem;
167
+ padding: 24px;
168
168
 
169
169
  .poster-buttons {
170
170
  display: flex;
171
- gap: .5rem;
171
+ gap: 8px;
172
172
 
173
173
  .poster-button-play {
174
174
  @extend %lt-player-btn;
175
175
  @include yellow-btn;
176
+ padding: 12px 12px;
176
177
  }
177
178
 
178
179
  .poster-button-watch-now {
package/src/assets/sass/sections/_settings.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  border-radius: 0;
21
21
 
22
22
  &__subtitles {
23
- padding: 1rem 1.5rem 1.5rem;
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: .8rem;
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: 1rem;
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 2rem 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 1.5rem 0;
144
+ padding: 0 0 24px 0;
145
145
 
146
146
  &__speed-range {
147
- padding: 1.5rem 1.5rem 0 1.5rem;
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: 2rem;
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: 1rem 1.5rem 0 1.5rem;
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: 1rem 1.5rem 0 1.5rem;
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: .75rem 2rem;
324
+ padding: 12px 32px;
325
325
  }
326
326
  }
327
327
 
328
328
  &__exit-button {
329
- padding: 1rem;
329
+ padding: 16px;
330
330
 
331
331
  span {
332
332
  display: flex;
package/src/assets/sass/sections/_subtitles.scss CHANGED
@@ -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: .5rem .75rem !important;
10
+ padding: 8px 12px !important;
11
11
  font-family: $lt-font-family-base !important;
12
12
  white-space: unset !important;
13
13
  }
package/src/assets/sass/sections/controllers/_botom.scss CHANGED
@@ -1,7 +1,3 @@
1
- body {
2
- margin: 0 !important;
3
- }
4
-
5
1
  @import "../../abstracts/variables";
6
2
 
7
3
  .lt-player-landscape--desktop,
@@ -10,10 +6,10 @@ body {
10
6
  &__controls {
11
7
  .bottom-controller {
12
8
  max-width: 100%;
13
- padding: 2rem;
9
+ padding: 28px 40px;
14
10
 
15
11
  .play-button {
16
- padding: 1rem;
12
+ padding: 16px;
17
13
  bottom: -5px;
18
14
  }
19
15
 
@@ -46,7 +42,7 @@ body {
46
42
  &__previous-chapter-view-wrapper,
47
43
  &__next-chapter-view-wrapper {
48
44
  display: flex;
49
- gap: 1rem;
45
+ gap: 16px;
50
46
  align-items: flex-end;
51
47
  }
52
48
 
@@ -62,8 +58,9 @@ body {
62
58
  &__previous-chapter-view {
63
59
  display: flex;
64
60
  align-items: flex-end;
65
- margin-bottom: .4rem;
61
+ margin-bottom: 4px;
66
62
  width: 100px;
63
+ font-size: $lt-player-font-size-lg;
67
64
  color: $default-lt-player-white !important;
68
65
  }
69
66
 
@@ -79,19 +76,26 @@ body {
79
76
  }
80
77
 
81
78
  &.lt-player--landscape {
82
- &__md {
79
+ &__lg {
83
80
  .plyr {
84
81
  &__controls {
85
82
  .bottom-controller {
86
- .play-button {
87
- //padding: .75rem;
88
- //bottom: -2px;
83
+ &__previous-chapter-view {
84
+ display: none;
89
85
  }
90
86
 
91
- &__center-buttons {
92
- //gap: 1rem;
87
+ &__next-chapter-view {
88
+ display: none;
93
89
  }
90
+ }
91
+ }
92
+ }
93
+ }
94
94
 
95
+ &__md {
96
+ .plyr {
97
+ &__controls {
98
+ .bottom-controller {
95
99
  &__previous-chapter-view {
96
100
  display: none;
97
101
  }
@@ -108,13 +112,8 @@ body {
108
112
  .plyr {
109
113
  &__controls {
110
114
  .bottom-controller {
111
- .play-button {
112
- padding: .75rem;
113
- bottom: -2px;
114
- }
115
-
116
115
  &__center-buttons {
117
- gap: 1rem;
116
+ gap: 20px;
118
117
  }
119
118
 
120
119
  &__previous-chapter-view {
@@ -138,17 +137,55 @@ body {
138
137
  .plyr {
139
138
  &__controls {
140
139
  .bottom-controller {
141
- padding: 1.5rem;
140
+ .plyr__controls_speed-button {
141
+ width: 32px;
142
+ height: 32px;
143
+ font-size: 10px;
144
+ transition: none;
145
+ }
146
+
147
+ &__left-buttons,
148
+ &__center-buttons,
149
+ &__right-buttons {
150
+ gap: 20px;
151
+ }
142
152
 
153
+ &__previous-chapter-view {
154
+ display: none;
155
+ }
156
+
157
+ &__next-chapter-view {
158
+ display: none;
159
+ }
160
+
161
+ .skip-backward-seconds,
162
+ .skip-forward-seconds {
163
+ display: none;
164
+ }
165
+ }
166
+ }
167
+ }
168
+ }
169
+
170
+ &__xxs {
171
+ .plyr {
172
+ &__progress {
173
+ &--wrapper {
174
+ bottom: 70px;
175
+ }
176
+ }
177
+
178
+ &__controls {
179
+ .bottom-controller {
143
180
  .play-button {
144
- padding: .75rem;
181
+ padding: 12px;
145
182
  bottom: -2px;
146
183
  }
147
184
 
148
185
  .plyr__controls_speed-button {
149
186
  width: 32px;
150
187
  height: 32px;
151
- font-size: .6rem;
188
+ font-size: 10px;
152
189
  transition: none;
153
190
  }
154
191
 
@@ -159,7 +196,7 @@ body {
159
196
  &__left-buttons,
160
197
  &__center-buttons,
161
198
  &__right-buttons {
162
- gap: .5rem;
199
+ gap: 16px;
163
200
  }
164
201
 
165
202
  &__previous-chapter-view {
@@ -199,25 +236,36 @@ body {
199
236
 
200
237
  .lt-player-portrate--mobile,
201
238
  .lt-player-portrate--desktop {
239
+ .plyr {
240
+ &__progress {
241
+ &--wrapper {
242
+ width: 100%;
243
+ padding: 0 25px;
244
+ position: absolute;
245
+ bottom: 90px;
246
+ }
247
+ }
248
+ }
249
+
202
250
  &.lt-player--portrait {
203
251
  &__xs {
204
252
  .plyr {
205
253
  &__controls {
206
254
  .bottom-controller {
207
- padding: 1rem;
255
+ padding: 16px;
208
256
 
209
257
  button {
210
258
  @include buttons-xs;
211
259
  }
212
260
 
213
261
  .play-button {
214
- padding: .75rem;
262
+ padding: 12px;
215
263
  }
216
264
 
217
265
  .plyr__controls_speed-button {
218
266
  width: 32px;
219
267
  height: 32px;
220
- font-size: .6rem;
268
+ font-size: 10px;
221
269
  transition: none;
222
270
  }
223
271
  }
@@ -233,9 +281,9 @@ body {
233
281
 
234
282
  &--wrapper {
235
283
  width: 100%;
236
- padding: 0 2rem;
284
+ padding: 0 40px;
237
285
  position: absolute;
238
- bottom: 6rem;
286
+ bottom: 90px;
239
287
  }
240
288
  }
241
289
 
@@ -249,7 +297,7 @@ body {
249
297
  display: flex;
250
298
  justify-content: space-between;
251
299
  align-items: flex-end;
252
- padding: 1.5rem;
300
+ padding: 24px;
253
301
 
254
302
  button {
255
303
  @extend %lt-player-btn;
@@ -295,15 +343,15 @@ body {
295
343
  .play-button {
296
344
  @extend %lt-player-btn;
297
345
  @include yellow-btn;
298
- padding: 1rem;
346
+ padding: 16px;
299
347
  }
300
348
  }
301
349
 
302
350
  &__current {
303
351
  display: flex;
304
352
  justify-content: space-between;
305
- margin-left: -0.5rem;
306
- margin-right: -0.5rem;
353
+ margin-left: -8px;
354
+ margin-right: -8px;
307
355
 
308
356
  .plyr {
309
357
  &__time {
@@ -327,14 +375,14 @@ body {
327
375
  &__area {
328
376
  position: absolute;
329
377
  rotate: 270deg!important;
330
- bottom: 5rem;
378
+ bottom: 80px;
331
379
  max-width: 110px;
332
380
  min-width: 80px;
333
381
  width: 20%;
334
382
 
335
383
  .volume_control__background__area__range {
336
384
  color: $default-lt-button-color !important;
337
- min-width: 8rem;
385
+ min-width: 128px;
338
386
  -webkit-appearance: none;
339
387
  appearance: none;
340
388
  background: transparent;
@@ -381,7 +429,7 @@ body {
381
429
  }
382
430
 
383
431
  .volume_control__volume-button-close {
384
- bottom: 5rem;
432
+ bottom: 80px;
385
433
  background: $default-lt-player-white;
386
434
  display: flex;
387
435
  justify-content: center;
@@ -403,7 +451,7 @@ body {
403
451
  &__background {
404
452
  position: absolute;
405
453
  width: 100%;
406
- height: 10rem;
454
+ height: 160px;
407
455
  bottom: 0;
408
456
  right: 0;
409
457
  background: linear-gradient(transparent,rgba(0,0,0,.75))!important;
package/src/assets/sass/sections/controllers/_mini-player.scss CHANGED
@@ -78,7 +78,7 @@
78
78
  &__play-button {
79
79
  @extend %lt-player-btn;
80
80
  @include yellow-btn;
81
- padding: .75rem;
81
+ padding: 12px;
82
82
  }
83
83
 
84
84
  &__progress__seek {