@latest-thinking/lt-player 1.0.5-k → 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 +96 -36
  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 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latest-thinking/lt-player",
3
- "version": "1.0.5-k",
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
@@ -6,10 +6,10 @@
6
6
  &__controls {
7
7
  .bottom-controller {
8
8
  max-width: 100%;
9
- padding: 2rem;
9
+ padding: 28px 40px;
10
10
 
11
11
  .play-button {
12
- padding: 1rem;
12
+ padding: 16px;
13
13
  bottom: -5px;
14
14
  }
15
15
 
@@ -17,7 +17,7 @@
17
17
  &__center-buttons,
18
18
  &__right-buttons {
19
19
  display: flex;
20
- gap: 1rem;
20
+ gap: 20px;
21
21
  align-items: flex-end;
22
22
  }
23
23
 
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  &__center-buttons {
32
- gap: 2rem;
32
+ gap: 32px;
33
33
  }
34
34
 
35
35
  &__right-buttons {
@@ -42,7 +42,7 @@
42
42
  &__previous-chapter-view-wrapper,
43
43
  &__next-chapter-view-wrapper {
44
44
  display: flex;
45
- gap: 1rem;
45
+ gap: 16px;
46
46
  align-items: flex-end;
47
47
  }
48
48
 
@@ -58,8 +58,9 @@
58
58
  &__previous-chapter-view {
59
59
  display: flex;
60
60
  align-items: flex-end;
61
- margin-bottom: .4rem;
61
+ margin-bottom: 4px;
62
62
  width: 100px;
63
+ font-size: $lt-player-font-size-lg;
63
64
  color: $default-lt-player-white !important;
64
65
  }
65
66
 
@@ -75,34 +76,44 @@
75
76
  }
76
77
 
77
78
  &.lt-player--landscape {
78
- &__md {
79
+ &__lg {
79
80
  .plyr {
80
81
  &__controls {
81
82
  .bottom-controller {
82
- .play-button {
83
- padding: .75rem;
84
- bottom: -2px;
83
+ &__previous-chapter-view {
84
+ display: none;
85
85
  }
86
86
 
87
- &__center-buttons {
88
- gap: 1rem;
87
+ &__next-chapter-view {
88
+ display: none;
89
89
  }
90
90
  }
91
91
  }
92
92
  }
93
93
  }
94
94
 
95
- &__sm {
95
+ &__md {
96
96
  .plyr {
97
97
  &__controls {
98
98
  .bottom-controller {
99
- .play-button {
100
- padding: .75rem;
101
- bottom: -2px;
99
+ &__previous-chapter-view {
100
+ display: none;
101
+ }
102
+
103
+ &__next-chapter-view {
104
+ display: none;
102
105
  }
106
+ }
107
+ }
108
+ }
109
+ }
103
110
 
111
+ &__sm {
112
+ .plyr {
113
+ &__controls {
114
+ .bottom-controller {
104
115
  &__center-buttons {
105
- gap: 1rem;
116
+ gap: 20px;
106
117
  }
107
118
 
108
119
  &__previous-chapter-view {
@@ -115,7 +126,7 @@
115
126
 
116
127
  .skip-backward-seconds,
117
128
  .skip-forward-seconds {
118
- display: none;
129
+ display: flex;
119
130
  }
120
131
  }
121
132
  }
@@ -126,17 +137,55 @@
126
137
  .plyr {
127
138
  &__controls {
128
139
  .bottom-controller {
129
- 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
+ }
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
+ }
130
169
 
170
+ &__xxs {
171
+ .plyr {
172
+ &__progress {
173
+ &--wrapper {
174
+ bottom: 70px;
175
+ }
176
+ }
177
+
178
+ &__controls {
179
+ .bottom-controller {
131
180
  .play-button {
132
- padding: .75rem;
181
+ padding: 12px;
133
182
  bottom: -2px;
134
183
  }
135
184
 
136
185
  .plyr__controls_speed-button {
137
186
  width: 32px;
138
187
  height: 32px;
139
- font-size: .6rem;
188
+ font-size: 10px;
140
189
  transition: none;
141
190
  }
142
191
 
@@ -147,7 +196,7 @@
147
196
  &__left-buttons,
148
197
  &__center-buttons,
149
198
  &__right-buttons {
150
- gap: .5rem;
199
+ gap: 16px;
151
200
  }
152
201
 
153
202
  &__previous-chapter-view {
@@ -187,25 +236,36 @@
187
236
 
188
237
  .lt-player-portrate--mobile,
189
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
+
190
250
  &.lt-player--portrait {
191
251
  &__xs {
192
252
  .plyr {
193
253
  &__controls {
194
254
  .bottom-controller {
195
- padding: 1rem;
255
+ padding: 16px;
196
256
 
197
257
  button {
198
258
  @include buttons-xs;
199
259
  }
200
260
 
201
261
  .play-button {
202
- padding: .75rem;
262
+ padding: 12px;
203
263
  }
204
264
 
205
265
  .plyr__controls_speed-button {
206
266
  width: 32px;
207
267
  height: 32px;
208
- font-size: .6rem;
268
+ font-size: 10px;
209
269
  transition: none;
210
270
  }
211
271
  }
@@ -221,23 +281,23 @@
221
281
 
222
282
  &--wrapper {
223
283
  width: 100%;
224
- padding: 0 2rem;
284
+ padding: 0 40px;
225
285
  position: absolute;
226
- bottom: 6rem;
286
+ bottom: 90px;
227
287
  }
228
288
  }
229
289
 
230
290
  &__controls {
231
291
  .bottom-controller {
232
292
  position: absolute;
233
- bottom: 1rem;
293
+ bottom: 0;
234
294
  width: 100%;
235
295
  height: 36%;
236
296
  max-width: 500px;
237
297
  display: flex;
238
298
  justify-content: space-between;
239
299
  align-items: flex-end;
240
- padding: 1.5rem;
300
+ padding: 24px;
241
301
 
242
302
  button {
243
303
  @extend %lt-player-btn;
@@ -283,15 +343,15 @@
283
343
  .play-button {
284
344
  @extend %lt-player-btn;
285
345
  @include yellow-btn;
286
- padding: 1rem;
346
+ padding: 16px;
287
347
  }
288
348
  }
289
349
 
290
350
  &__current {
291
351
  display: flex;
292
352
  justify-content: space-between;
293
- margin-left: -0.5rem;
294
- margin-right: -0.5rem;
353
+ margin-left: -8px;
354
+ margin-right: -8px;
295
355
 
296
356
  .plyr {
297
357
  &__time {
@@ -315,14 +375,14 @@
315
375
  &__area {
316
376
  position: absolute;
317
377
  rotate: 270deg!important;
318
- bottom: 5rem;
378
+ bottom: 80px;
319
379
  max-width: 110px;
320
380
  min-width: 80px;
321
381
  width: 20%;
322
382
 
323
383
  .volume_control__background__area__range {
324
384
  color: $default-lt-button-color !important;
325
- min-width: 8rem;
385
+ min-width: 128px;
326
386
  -webkit-appearance: none;
327
387
  appearance: none;
328
388
  background: transparent;
@@ -369,7 +429,7 @@
369
429
  }
370
430
 
371
431
  .volume_control__volume-button-close {
372
- bottom: 5rem;
432
+ bottom: 80px;
373
433
  background: $default-lt-player-white;
374
434
  display: flex;
375
435
  justify-content: center;
@@ -391,7 +451,7 @@
391
451
  &__background {
392
452
  position: absolute;
393
453
  width: 100%;
394
- height: 10rem;
454
+ height: 160px;
395
455
  bottom: 0;
396
456
  right: 0;
397
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 {