@latest-thinking/lt-player 1.0.4-m → 1.0.4-o

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 (22) 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/sections/_control.scss +25 -0
  7. package/src/assets/sass/sections/_poster.scss +3 -0
  8. package/src/assets/sass/sections/_settings.scss +1 -1
  9. package/src/assets/sass/sections/_subtitles.scss +4 -0
  10. package/src/assets/sass/sections/controllers/_botom.scss +12 -5
  11. package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss +69 -10
  12. package/src/components/addInfo/LTPlayerAdditionalInfoEvents.ts +3 -2
  13. package/src/components/controls/LTPlayerChapters.ts +8 -4
  14. package/src/components/controls/LTPlayerControlsEvents.ts +172 -51
  15. package/src/components/controls/settings/LTPlayerDesktopSettingsControllers.ts +2 -4
  16. package/src/components/events/LTPlayer.ts +7 -0
  17. package/src/components/poster/LTPlayerPosterEvents.ts +2 -0
  18. package/src/components/poster/LTPlayerPosterPreloadEvents.ts +17 -6
  19. package/src/services/IconsService.ts +15 -0
  20. package/src/services/LTPlayerRotateDeviceService.ts +0 -1
  21. package/src/views/controls.handlebars +66 -15
  22. package/src/views/settings.handlebars +3 -3
package/src/views/controls.handlebars CHANGED
@@ -40,14 +40,13 @@
40
40
  <!-- </div>-->
41
41
  <div class="lt-player-notification__notification-button-state">
42
42
  <div class="player-state">
43
- <img class="player-state__play-icon filter d-none" src="{{icons.play}}" alt="">
44
- <img class="player-state__pause-icon filter" src="{{icons.pause}}" alt="">
43
+ <img class="player-state__icon filter" src="" alt="">
45
44
  </div>
46
45
  </div>
47
46
  <div class="lt-player-rewind-area">
48
47
  </div>
49
48
  <div class="lt-player-rewind lt-player-notify">
50
- <div class="lt-player-rewind__icon">
49
+ <div class="lt-player-rewind__icon lt-player-rewind__icon__landscape">
51
50
  <div class="lt-player-rewind__icon-wrapper rotate">
52
51
  <img class="filter" src="{{icons.play}}" alt="">
53
52
  <img class="filter" src="{{icons.play}}" alt="">
@@ -58,7 +57,7 @@
58
57
  <div class="lt-player-forward-area">
59
58
  </div>
60
59
  <div class="lt-player-forward lt-player-notify">
61
- <div class="lt-player-forward__icon">
60
+ <div class="lt-player-forward__icon lt-player-forward__icon__landscape">
62
61
  <div class="lt-player-rewind__icon-wrapper">
63
62
  <img class="filter" src="{{icons.play}}" alt="">
64
63
  <img class="filter" src="{{icons.play}}" alt="">
@@ -129,8 +128,8 @@
129
128
  <button type="button" class="plyr__control skip-backward-seconds" data-lt-player-chapterTimeStamp="">
130
129
  <img class="filter" src="{{icons.fast-backward}}" alt="">
131
130
  </button>
132
- <div class="bottom-controller__play-button_body">
133
- <button type="button" class="plyr__control play-button" aria-label="Play, {title}" data-plyr="play">
131
+ <div class="bottom-controller__play-button_body bottom-controller__play-button_body__landscape">
132
+ <button type="button" class="plyr__control play-button">
134
133
  <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
135
134
  <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
136
135
  </button>
@@ -167,7 +166,32 @@
167
166
  <div class="player-lt__modal__mobile d-none"></div>
168
167
  </div>
169
168
  {{#mobile}}
170
- <div class="plyr__controls__mobile-background d-none"></div>
169
+ <div class="plyr__controls__mobile-background d-none">
170
+ <div class="lt-player-notification">
171
+ <div class="lt-player-rewind-area">
172
+ </div>
173
+ <div class="lt-player-rewind lt-player-notify">
174
+ <div class="lt-player-rewind__icon lt-player-rewind__icon__portrait">
175
+ <span class="rewind">10 sec</span>
176
+ <div class="lt-player-rewind__icon-wrapper rotate">
177
+ <img class="filter" src="{{icons.play}}" alt="">
178
+ <img class="filter" src="{{icons.play}}" alt="">
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <div class="lt-player-forward-area">
183
+ </div>
184
+ <div class="lt-player-forward lt-player-notify">
185
+ <div class="lt-player-forward__icon lt-player-forward__icon__portrait">
186
+ <div class="lt-player-rewind__icon-wrapper">
187
+ <img class="filter" src="{{icons.play}}" alt="">
188
+ <img class="filter" src="{{icons.play}}" alt="">
189
+ </div>
190
+ <span class="forward">10 sec</span>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
171
195
  {{/mobile}}
172
196
  {{/landscape}}
173
197
  {{#portrait}}
@@ -201,20 +225,22 @@
201
225
  <div class="lt-player-notification">
202
226
  <div class="lt-player-notification__notification-button-state">
203
227
  <div class="player-state">
204
- <img class="player-state__play-icon filter d-none" src="{{icons.play}}" alt="">
205
- <img class="player-state__pause-icon filter d-none" src="{{icons.pause}}" alt="">
228
+ <img class="player-state__icon filter" src="" alt="">
206
229
  </div>
207
230
  </div>
208
231
  <div class="lt-player-video-content">
209
232
  <div class="content__body">
210
233
  <h4 class="poster-title">{{videoParagraph}}</h4>
211
- <p class="poster-paragraph">{{videoTitle}}</p>
234
+ <div class="poster-paragraph">
235
+ <p class="poster-paragraph__content">{{videoTitle}}</p>
236
+ </div>
212
237
  </div>
213
238
  </div>
239
+ <button class="poster-paragraph__button">Read more</button>
214
240
  <div class="lt-player-rewind-area">
215
241
  </div>
216
242
  <div class="lt-player-rewind lt-player-notify">
217
- <div class="lt-player-rewind__icon">
243
+ <div class="lt-player-rewind__icon lt-player-rewind__icon__portrait">
218
244
  <span class="rewind">10 sec</span>
219
245
  <div class="lt-player-rewind__icon-wrapper rotate">
220
246
  <img class="filter" src="{{icons.play}}" alt="">
@@ -225,7 +251,7 @@
225
251
  <div class="lt-player-forward-area">
226
252
  </div>
227
253
  <div class="lt-player-forward lt-player-notify">
228
- <div class="lt-player-forward__icon">
254
+ <div class="lt-player-forward__icon lt-player-forward__icon__portrait">
229
255
  <div class="lt-player-rewind__icon-wrapper">
230
256
  <img class="filter" src="{{icons.play}}" alt="">
231
257
  <img class="filter" src="{{icons.play}}" alt="">
@@ -282,8 +308,8 @@
282
308
  <button type="button" class="plyr__control skip-backward" data-lt-player-chapterTimeStamp="">
283
309
  <img class="filter" src="{{icons.skip-backward}}" alt="">
284
310
  </button>
285
- <div class="bottom-controller__play-button_body">
286
- <button type="button" class="plyr__control play-button" aria-label="Play, {title}" data-plyr="play">
311
+ <div class="bottom-controller__play-button_body bottom-controller__play-button_body__portrait">
312
+ <button type="button" class="plyr__control play-button">
287
313
  <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
288
314
  <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
289
315
  </button>
@@ -307,7 +333,32 @@
307
333
  <div class="player-lt__modal__mobile d-none"></div>
308
334
  </div>
309
335
  {{#mobile}}
310
- <div class="plyr__controls__mobile-background d-none"></div>
336
+ <div class="plyr__controls__mobile-background d-none">
337
+ <div class="lt-player-notification">
338
+ <div class="lt-player-rewind-area">
339
+ </div>
340
+ <div class="lt-player-rewind lt-player-notify">
341
+ <div class="lt-player-rewind__icon lt-player-rewind__icon__portrait">
342
+ <span class="rewind">10 sec</span>
343
+ <div class="lt-player-rewind__icon-wrapper rotate">
344
+ <img class="filter" src="{{icons.play}}" alt="">
345
+ <img class="filter" src="{{icons.play}}" alt="">
346
+ </div>
347
+ </div>
348
+ </div>
349
+ <div class="lt-player-forward-area">
350
+ </div>
351
+ <div class="lt-player-forward lt-player-notify">
352
+ <div class="lt-player-forward__icon lt-player-forward__icon__portrait">
353
+ <div class="lt-player-rewind__icon-wrapper">
354
+ <img class="filter" src="{{icons.play}}" alt="">
355
+ <img class="filter" src="{{icons.play}}" alt="">
356
+ </div>
357
+ <span class="forward">10 sec</span>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
311
362
  {{/mobile}}
312
363
  {{/portrait}}
313
364
  {{/player}}
package/src/views/settings.handlebars CHANGED
@@ -3,14 +3,14 @@
3
3
  <span class="line-button"></span>
4
4
  {{#desktop}}
5
5
  <div class="settings-controllers-enable__subtitles settings">
6
- <p class="settings-text">Subtitles</p>
6
+ <p class="settings-text settings">Subtitles</p>
7
7
  <label class="subtitles-body__switch settings">
8
8
  <input id="captions-lt-player-{{id}}" class="subtitles-body__input-switch settings" value="" type="checkbox">
9
9
  <label for="captions-lt-player-{{id}}" class="subtitles-body__slider settings"></label>
10
10
  </label>
11
11
  </div>
12
12
  <div class="settings-controllers-enable__speed-range settings">
13
- <p class="settings-text">Speed</p>
13
+ <p class="settings-text settings">Speed</p>
14
14
  <div class="speed-range-input-body settings">
15
15
  <output class="settings speed-range-value" style="display: flex; justify-content: center" id="speed-range-value-{{id}}"></output>
16
16
  <input id="speed-range-{{id}}" type="range" min="0" max="3" step="1" class="speed-range-input settings">
@@ -19,7 +19,7 @@
19
19
  {{/desktop}}
20
20
  {{#mobile}}
21
21
  <div class="settings-controllers-enable__speed-range settings">
22
- <p class="settings-text">Speed</p>
22
+ <p class="settings-text settings">Speed</p>
23
23
  <div class="speed-range-input-body mobile settings">
24
24
  <button class="button-speed settings button_active" data-speed="1">1</button>
25
25
  <button class="button-speed settings" data-speed="1.25">1.25</button>