@latest-thinking/lt-player 1.0.4 → 1.0.5

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 (44) hide show
  1. package/dist/css/lt-player-main.css +1 -3
  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 +10 -8
  6. package/src/assets/sass/app.scss +2 -2
  7. package/src/assets/sass/core/_fonts.scss +5 -5
  8. package/src/assets/sass/sections/_control.scss +35 -0
  9. package/src/assets/sass/sections/_poster.scss +3 -0
  10. package/src/assets/sass/sections/_settings.scss +1 -1
  11. package/src/assets/sass/sections/_subtitles.scss +4 -0
  12. package/src/assets/sass/sections/controllers/_botom.scss +15 -5
  13. package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss +70 -11
  14. package/src/components/LTPlayerManager.ts +12 -5
  15. package/src/components/LTPlayerSetup.ts +31 -7
  16. package/src/components/LTPlayerType.ts +11 -7
  17. package/src/components/addInfo/LTPlayerAdditionalInfoEvents.ts +6 -2
  18. package/src/components/config/LTPlayerConfig.ts +192 -0
  19. package/src/components/config/LTPlayerConfigProcessor.ts +546 -0
  20. package/src/components/controls/LTPlayerChapters.ts +8 -4
  21. package/src/components/controls/LTPlayerControls.ts +1 -1
  22. package/src/components/controls/LTPlayerControlsEvents.ts +206 -65
  23. package/src/components/controls/settings/LTPlayerDesktopSettingsControllers.ts +2 -4
  24. package/src/components/controls/settings/LTPlayerMobileSettingsControllers.ts +2 -0
  25. package/src/components/events/LTPlayer.ts +36 -1
  26. package/src/components/events/LTPlayerDesktop.ts +1 -0
  27. package/src/components/events/LTPlayerMobile.ts +1 -1
  28. package/src/components/poster/LTPlayerPoster.ts +2 -2
  29. package/src/components/poster/LTPlayerPosterEvents.ts +2 -0
  30. package/src/components/poster/LTPlayerPosterManager.ts +1 -1
  31. package/src/components/poster/LTPlayerPosterPreload.ts +1 -1
  32. package/src/components/poster/LTPlayerPosterPreloadEvents.ts +17 -6
  33. package/src/components/share/LTPlayerShare.ts +1 -1
  34. package/src/components/share/LTPlayerShareEvents.ts +20 -20
  35. package/src/global/controllers/LTPlayerController.ts +1 -1
  36. package/src/services/Helper.ts +20 -5
  37. package/src/services/IconsService.ts +15 -0
  38. package/src/services/LTPlayerRotateDeviceService.ts +8 -1
  39. package/src/services/ResizeService.ts +24 -6
  40. package/src/services/TemplateService.ts +1 -1
  41. package/src/views/controls.handlebars +71 -14
  42. package/src/views/settings.handlebars +3 -3
  43. package/src/views/template.handlebars +2 -2
  44. package/src/components/LTPlayerConfig.ts +0 -398
@@ -1,7 +1,6 @@
1
1
  import {LTPlayer} from "../LTPlayerType";
2
2
  import {plyr} from "../../global/types/ModuleTypes";
3
3
 
4
-
5
4
  export namespace LTPlayerControlsEvents {
6
5
 
7
6
  export class Common {
@@ -9,14 +8,29 @@ export namespace LTPlayerControlsEvents {
9
8
  backwardRewind = {
10
9
 
11
10
  getSelectors(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
12
- return {
11
+
12
+ let selectors = {
13
13
  playerContainer: instance.plyr.elements.container,
14
14
  playerControlsContainer: instance.plyr.elements.controls,
15
15
  forwardArea: instance.plyr.elements.controls.querySelector('.lt-player-forward-area'),
16
16
  rewindArea: instance.plyr.elements.controls.querySelector('.lt-player-rewind-area'),
17
17
  forwardAnimation: instance.plyr.elements.controls.querySelector('.lt-player-forward'),
18
- rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind')
19
- };
18
+ rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind'),
19
+ forwardAreaBackground: null as Element,
20
+ rewindAreaBackground: null as Element,
21
+ forwardAnimationBackground: null as Element,
22
+ rewindAnimationBackground: null as Element,
23
+
24
+ }
25
+
26
+ if (instance.playerConfig.getDevice() === 'mobile') {
27
+ selectors.forwardAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward-area')
28
+ selectors.rewindAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind-area')
29
+ selectors.forwardAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward')
30
+ selectors.rewindAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind')
31
+ }
32
+
33
+ return selectors
20
34
  },
21
35
 
22
36
  updateCurrentTime(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType ,time: number) {
@@ -29,29 +43,23 @@ export namespace LTPlayerControlsEvents {
29
43
 
30
44
  playPause(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
31
45
 
32
- const playInfoIcon = instance.plyr.elements.controls.querySelector('.player-state__play-icon');
33
- const pauseInfoIcon = instance.plyr.elements.controls.querySelector('.player-state__pause-icon');
46
+ const icons = instance.iconService.getIconsByComponent('playPause') as {play : string, pause: string};
34
47
  const playerStateInfo = instance.plyr.elements.controls.querySelector('.player-state');
48
+ const iconSelector: HTMLImageElement = playerStateInfo.querySelector('.player-state__icon');
35
49
 
36
50
  const removeStateButtons = () => {
37
51
  setTimeout(() => {
38
52
  playerStateInfo.classList.remove('active');
39
- setTimeout(() => {
40
- playInfoIcon.classList.add('d-none');
41
- pauseInfoIcon.classList.add('d-none');
42
- }, 300)
43
- }, 300)
44
-
53
+ }, 200)
45
54
  }
46
55
 
47
-
48
56
  if (instance.plyr.playing) {
49
- pauseInfoIcon.classList.remove('d-none');
57
+ iconSelector.src = icons.pause;
50
58
  playerStateInfo.classList.add('active');
51
59
  instance.plyr.togglePlay(false);
52
60
  removeStateButtons();
53
61
  } else {
54
- playInfoIcon.classList.remove('d-none');
62
+ iconSelector.src = icons.play;
55
63
  playerStateInfo.classList.add('active');
56
64
  instance.plyr.togglePlay(true);
57
65
  removeStateButtons();
@@ -64,9 +72,58 @@ export namespace LTPlayerControlsEvents {
64
72
 
65
73
  animateNotificationOut(selector: Element) {
66
74
  selector.classList.remove('animate-in');
67
- }
75
+ },
68
76
  }
69
77
 
78
+ checkTitleBreakWord(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
79
+ const controlsSelector = instance.plyr.elements.controls;
80
+ const videoTitle = controlsSelector.querySelector('.poster-paragraph__content');
81
+ const readButton = controlsSelector.querySelector('.poster-paragraph__button');
82
+
83
+ if (!videoTitle) {
84
+ return;
85
+ }
86
+
87
+ if (videoTitle.scrollHeight <= videoTitle.clientHeight) {
88
+ readButton.classList.add('d-none');
89
+ return;
90
+ }
91
+
92
+ const heightContent = videoTitle.scrollHeight;
93
+
94
+ const openHide = () => {
95
+
96
+ let inlineStyleElement = videoTitle as unknown as ElementCSSInlineStyle
97
+
98
+ if (videoTitle.classList.contains('open-content')) {
99
+ inlineStyleElement.style.maxHeight = null;
100
+ setTimeout(() => {
101
+ videoTitle.classList.remove('open-content');
102
+ }, 300)
103
+ readButton.innerHTML = 'Read more'
104
+ } else {
105
+ readButton.innerHTML = 'Hide'
106
+ inlineStyleElement.style.maxHeight = `${heightContent}px`;
107
+ videoTitle.classList.add('open-content');
108
+ }
109
+ }
110
+
111
+ if (readButton) {
112
+
113
+ if (instance.playerConfig.getDevice() === 'mobile') {
114
+ let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(readButton);
115
+ mobileEvent.on('singletap', function LTPlayerMobileShowHideTitle() {
116
+ openHide();
117
+ instance.playerControl.mobileEvents.showControls(instance)
118
+ })
119
+ } else {
120
+ readButton.addEventListener('click', function LTPlayerTitleButton() {
121
+ openHide();
122
+ })
123
+ }
124
+ }
125
+
126
+ }
70
127
 
71
128
  playPauseIconTimeUpdate(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
72
129
 
@@ -94,7 +151,9 @@ export namespace LTPlayerControlsEvents {
94
151
  constructor() {
95
152
  this.common = new Common();
96
153
  }
97
-
154
+ titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
155
+ this.common.checkTitleBreakWord(instance)
156
+ }
98
157
  subtitles(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
99
158
 
100
159
  const playerContainer = instance.plyr.elements.container;
@@ -128,7 +187,7 @@ export namespace LTPlayerControlsEvents {
128
187
 
129
188
 
130
189
  controls.addEventListener('mouseleave', function () {
131
- controls.classList.remove('plyr__controls-enable')
190
+ // controls.classList.remove('plyr__controls-enable')
132
191
  })
133
192
  }
134
193
 
@@ -166,9 +225,23 @@ export namespace LTPlayerControlsEvents {
166
225
  }
167
226
 
168
227
  playPauseIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
228
+ let common = this.common;
169
229
  switch (type) {
170
230
  case 'timeupdate':
171
231
  this.common.playPauseIconTimeUpdate(instance);
232
+ break
233
+ case 'ready':
234
+ const playButton = instance.plyr.elements.controls.querySelector('.play-button');
235
+ if (playButton) {
236
+ playButton.addEventListener('click', function LTPlayerPlayButton() {
237
+ if (instance.plyr.playing) {
238
+ instance.plyr.togglePlay(false);
239
+ } else {
240
+ instance.plyr.togglePlay(true);
241
+ }
242
+ common.playPauseIconTimeUpdate(instance);
243
+ })
244
+ }
172
245
  }
173
246
  }
174
247
 
@@ -180,22 +253,34 @@ export namespace LTPlayerControlsEvents {
180
253
  if (selectors.forwardArea) {
181
254
  selectors.forwardArea.addEventListener('dblclick', function LTPlayerForwardDbClick(event) {
182
255
  event.preventDefault();
256
+
257
+ const playerState = selectors.playerControlsContainer.querySelector('.lt-player-notification__notification-button-state');
258
+
259
+ if (playerState && !playerState.classList.contains('d-none')) {
260
+ playerState.classList.add('d-none');
261
+ }
262
+
183
263
  common.backwardRewind.animateNotificationIn(selectors.forwardAnimation);
184
264
  common.backwardRewind.updateCurrentTime(instance, 10);
185
265
  setTimeout(() => {
186
- common.backwardRewind.animateNotificationOut(selectors.forwardAnimation)
266
+ common.backwardRewind.animateNotificationOut(selectors.forwardAnimation);
267
+ playerState.classList.remove('d-none');
187
268
  }, 500)
188
269
  })
189
270
 
190
271
  selectors.forwardArea.addEventListener('click', function LTPlayerForwardClick(event) {
191
272
  event.preventDefault();
192
- const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
193
273
 
194
- if (volumeControlArea) {
195
- if (!volumeControlArea.classList.contains('volume-control-enable')) {
196
- common.backwardRewind.playPause(instance);
274
+ setTimeout(() => {
275
+ const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
276
+
277
+ if (volumeControlArea) {
278
+ if (!volumeControlArea.classList.contains('volume-control-enable')) {
279
+ common.backwardRewind.playPause(instance);
280
+ }
197
281
  }
198
- }
282
+ }, 100)
283
+
199
284
 
200
285
  })
201
286
  }
@@ -204,22 +289,35 @@ export namespace LTPlayerControlsEvents {
204
289
 
205
290
  selectors.rewindArea.addEventListener('dblclick', function LTPlayerRewindDbClick(event) {
206
291
  event.preventDefault();
292
+
293
+ const playerState = selectors.playerControlsContainer.querySelector('.lt-player-notification__notification-button-state');
294
+
295
+ if (playerState && !playerState.classList.contains('d-none')) {
296
+ playerState.classList.add('d-none');
297
+ }
298
+
299
+
207
300
  common.backwardRewind.animateNotificationIn(selectors.rewindAnimation);
208
301
  common.backwardRewind.updateCurrentTime(instance, -10);
209
302
  setTimeout(() => {
210
- common.backwardRewind.animateNotificationOut(selectors.rewindAnimation)
303
+ common.backwardRewind.animateNotificationOut(selectors.rewindAnimation);
304
+ playerState.classList.remove('d-none');
211
305
  }, 500)
212
306
  })
213
307
 
214
308
  selectors.rewindArea.addEventListener('click', function LTPlayerRewindClick(event) {
215
309
  event.preventDefault();
216
- const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
217
310
 
218
- if (volumeControlArea) {
219
- if (!volumeControlArea.classList.contains('volume-control-enable')) {
220
- common.backwardRewind.playPause(instance);
311
+ setTimeout(() => {
312
+ const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
313
+
314
+ if (volumeControlArea) {
315
+ if (!volumeControlArea.classList.contains('volume-control-enable')) {
316
+ common.backwardRewind.playPause(instance);
317
+ }
221
318
  }
222
- }
319
+ }, 100)
320
+
223
321
  })
224
322
 
225
323
  }
@@ -375,27 +473,29 @@ export namespace LTPlayerControlsEvents {
375
473
  }
376
474
  seekBar(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
377
475
  const playerControlsContainer = instance.plyr.elements.controls;
378
- const seekBar = playerControlsContainer.querySelector('.plyr__progress__seek');
476
+ const seekBar: HTMLInputElement = playerControlsContainer.querySelector('.plyr__progress__seek');
379
477
  const rangeTouch = require('rangetouch');
380
478
  rangeTouch.setup(seekBar);
479
+ const __this = this;
480
+ seekBar.addEventListener('change', () => {
481
+ __this.showControls(instance);
482
+ })
483
+
381
484
  }
382
485
 
383
486
  controlsTimeShow(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
384
487
  const playerContainer = instance.plyr.elements.container;
385
- const playerControlsContainer = instance.plyr.elements.controls;
488
+ const playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
386
489
  const __this = this;
490
+ if (playerControlsBackground) {
491
+ let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerControlsBackground);
387
492
 
388
- let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerControlsContainer);
389
-
390
- if (mobileEvent) {
391
- mobileEvent.on('singletap', function LTPlayerMobileFullScreen() {
392
-
393
- if (!playerContainer.classList.contains('plyr__controls-enable')) {
493
+ if (mobileEvent) {
494
+ mobileEvent.on('singletap', function LTPlayerMobileBack() {
394
495
  __this.showControls(instance);
395
- }
396
- })
496
+ })
497
+ }
397
498
  }
398
-
399
499
  }
400
500
 
401
501
  removePlyrControlsClass(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
@@ -410,11 +510,19 @@ export namespace LTPlayerControlsEvents {
410
510
 
411
511
 
412
512
  showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
413
-
414
513
  const playerContainer = instance.plyr.elements.container;
415
514
  const playerControlsContainer = instance.plyr.elements.controls;
515
+ let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
416
516
 
417
- playerContainer.classList.remove('plyr--hide-controls');
517
+ if (playerContainer.classList.contains('plyr--hide-controls')) {
518
+ playerContainer.classList.remove('plyr--hide-controls');
519
+ }
520
+
521
+ if (playerControlsBackground) {
522
+ if (!playerControlsBackground.classList.contains('d-none')) {
523
+ playerControlsBackground.classList.add('d-none');
524
+ }
525
+ }
418
526
 
419
527
  if (!playerControlsContainer.classList.contains('plyr__controls-enable')) {
420
528
  playerControlsContainer.classList.add('plyr__controls-enable');
@@ -424,17 +532,32 @@ export namespace LTPlayerControlsEvents {
424
532
  clearTimeout(this.controlsTimeOut);
425
533
  }
426
534
 
427
- this.hideControls(instance);
535
+ this.hideControls(instance, false);
428
536
  }
429
537
 
430
- hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
538
+ hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, now: boolean) {
431
539
  const playerContainer = instance.plyr.elements.container;
432
540
  const playerControlsContainer = instance.plyr.elements.controls;
433
- this.controlsTimeOut = setTimeout(() => {
434
- playerControlsContainer.classList.remove('plyr__controls-enable');
435
- playerContainer.classList.add('plyr--hide-controls');
436
- }, 4000);
541
+ let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
437
542
 
543
+ if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
544
+
545
+ if (now) {
546
+ playerControlsContainer.classList.remove('plyr__controls-enable');
547
+ playerContainer.classList.add('plyr--hide-controls');
548
+ if (!playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
549
+ playerControlsBackground.classList.remove('d-none');
550
+ }
551
+ } else {
552
+ this.controlsTimeOut = setTimeout(() => {
553
+ playerControlsContainer.classList.remove('plyr__controls-enable');
554
+ playerContainer.classList.add('plyr--hide-controls');
555
+ if (!playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
556
+ playerControlsBackground.classList.remove('d-none');
557
+ }
558
+ }, 4000);
559
+ }
560
+ }
438
561
  }
439
562
 
440
563
  fullScreenButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
@@ -451,17 +574,17 @@ export namespace LTPlayerControlsEvents {
451
574
  }
452
575
  }
453
576
  playPauseIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
454
-
455
577
  let common = this.common;
578
+ let instanceMobile = this;
456
579
 
457
580
  switch (type) {
458
581
  case 'timeupdate':
459
582
  common.playPauseIconTimeUpdate(instance);
460
583
  break
461
584
  case 'ready':
462
- const playButton = instance.plyr.elements.container.querySelector('.play-button');
585
+ const playButton = instance.plyr.elements.controls.querySelector('.play-button');
463
586
  let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playButton);
464
- if (mobileEvent && instance.plyr.isHTML5) {
587
+ if (mobileEvent) {
465
588
  mobileEvent.on('singletap', function LTPlayerMobilePLayPauseIcon() {
466
589
  if (instance.plyr.playing) {
467
590
  instance.plyr.togglePlay(false);
@@ -469,6 +592,7 @@ export namespace LTPlayerControlsEvents {
469
592
  instance.plyr.togglePlay(true);
470
593
  }
471
594
  common.playPauseIconTimeUpdate(instance);
595
+ instanceMobile.showControls(instance);
472
596
  });
473
597
  }
474
598
  }
@@ -478,33 +602,37 @@ export namespace LTPlayerControlsEvents {
478
602
 
479
603
  let common = this.common;
480
604
  const selectors = common.backwardRewind.getSelectors(instance);
481
- const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
482
605
 
483
606
  const singleTapAction = () => {
484
- if (instance.plyr.elements.controls.classList.contains('plyr__controls-enable')) {
485
- if (volumeControlArea) {
486
- if (!volumeControlArea.classList.contains('volume-control-enable')) {
487
- common.backwardRewind.playPause(instance);
488
- instance.playerControl.mobileEvents.showControls(instance);
489
- }
490
- }
491
- }
607
+ instance.playerControl.mobileEvents.hideControls(instance, true);
492
608
  }
493
609
 
494
610
  if (selectors.forwardArea) {
495
611
 
496
612
  let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.forwardArea);
497
613
 
498
- mobileEvent.on('doubletap', function LTPlayerMobileForwardDbClick() {
614
+ mobileEvent.on('doubletap', function LTPlayerMobileForwardDbClick(event) {
615
+
499
616
  common.backwardRewind.animateNotificationIn(selectors.forwardAnimation);
500
617
  common.backwardRewind.updateCurrentTime(instance, 10);
501
618
  setTimeout(() => {
502
619
  common.backwardRewind.animateNotificationOut(selectors.forwardAnimation)
503
620
  }, 500)
621
+ instance.playerControl.mobileEvents.showControls(instance);
504
622
  })
505
623
 
506
- mobileEvent.on('singletap', function LTPlayerMobileForwardDbClick() {
624
+ mobileEvent.on('singletap', function LTPlayerMobileForwardDbClick(event) {
507
625
  singleTapAction();
626
+ });
627
+
628
+ let mobileEventBackground: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.forwardAreaBackground);
629
+
630
+ mobileEventBackground.on('doubletap', function LTPlayerMobileForwardDbClickBackground(event) {
631
+ common.backwardRewind.animateNotificationIn(selectors.forwardAnimationBackground);
632
+ common.backwardRewind.updateCurrentTime(instance, 10);
633
+ setTimeout(() => {
634
+ common.backwardRewind.animateNotificationOut(selectors.forwardAnimationBackground)
635
+ }, 500)
508
636
  })
509
637
  }
510
638
 
@@ -512,18 +640,30 @@ export namespace LTPlayerControlsEvents {
512
640
 
513
641
  let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.rewindArea);
514
642
 
515
- mobileEvent.on('doubletap', function LTPlayerMobileRewindDbClick() {
643
+ mobileEvent.on('doubletap', function LTPlayerMobileRewindDbClick(event) {
644
+
516
645
  common.backwardRewind.animateNotificationIn(selectors.rewindAnimation);
517
646
  common.backwardRewind.updateCurrentTime(instance, -10);
518
647
  setTimeout(() => {
519
648
  common.backwardRewind.animateNotificationOut(selectors.rewindAnimation)
520
649
  }, 500)
650
+ instance.playerControl.mobileEvents.showControls(instance);
521
651
  })
522
652
 
523
- mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
653
+ mobileEvent.on('singletap', function LTPlayerMobileRewindClick(event) {
524
654
  singleTapAction();
525
655
  })
526
656
 
657
+ let mobileEventBackground: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.rewindAreaBackground);
658
+
659
+ mobileEventBackground.on('doubletap', function LTPlayerMobileRewindDbClickBackground(event) {
660
+ common.backwardRewind.animateNotificationIn(selectors.rewindAnimationBackground);
661
+ common.backwardRewind.updateCurrentTime(instance, 10);
662
+ setTimeout(() => {
663
+ common.backwardRewind.animateNotificationOut(selectors.rewindAnimationBackground)
664
+ }, 500)
665
+ })
666
+
527
667
  }
528
668
  }
529
669
 
@@ -586,6 +726,7 @@ export namespace LTPlayerControlsEvents {
586
726
  mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
587
727
  let volumeState = setVolume();
588
728
  setVolumeIcon(volumeState);
729
+ instance.playerControl.mobileEvents.showControls(instance);
589
730
  })
590
731
 
591
732
  }
@@ -65,13 +65,11 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
65
65
  let values:any = [1,1.25,1.50,2];
66
66
 
67
67
  myRange.oninput = function() {
68
-
69
- player.speed = parseInt(values[rangeInput.value]);
70
-
68
+ player.speed = parseFloat(values[rangeInput.value]);
71
69
  myValue.innerHTML = values[rangeInput.value] + 'x';
72
70
  };
73
71
 
74
- player.speed = parseInt(String(values[0]));
72
+ player.speed = parseFloat(String(values[0]));
75
73
  myValue.innerHTML = values[0] + 'x';
76
74
  }
77
75
  initSaveButton() {
@@ -24,6 +24,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
24
24
  let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
25
25
  playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}`;
26
26
  let plyr = this.settingsInstance.playerInstance.plyr;
27
+ let instance = this.settingsInstance.playerInstance;
27
28
 
28
29
  if (playerSpeedButton) {
29
30
  let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
@@ -47,6 +48,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
47
48
  plyr.speed = playSpeed;
48
49
  playerSpeedButton.innerHTML = `${playSpeed}`;
49
50
 
51
+ instance.playerControl.mobileEvents.showControls(instance);
50
52
  })
51
53
  }
52
54
  }
@@ -50,6 +50,42 @@ export namespace LTPlayerEvents {
50
50
  if (controls.classList.contains('plyr__controls-enable')) {
51
51
  controls.classList.remove('plyr__controls-enable')
52
52
  }
53
+
54
+ const volumeControl = controls.querySelector('.bottom-controller__volume_control');
55
+ const volumeButton = volumeControl.querySelector('.button-open');
56
+ const volumeBackground = volumeControl.querySelector('.volume_control__background');
57
+ const volumeBackgroundArea = volumeControl.querySelector('.volume_control__background__area');
58
+ const volumeArea = volumeControl.querySelector('.volume_control__background__area__range');
59
+ const controlsBackground = player.elements.container.querySelector('.plyr__controls__mobile-background');
60
+
61
+
62
+ if (volumeButton) {
63
+ volumeButton.classList.remove('d-none');
64
+ }
65
+
66
+ if (volumeBackground) {
67
+ volumeBackground.classList.add('d-none')
68
+ }
69
+
70
+ if (volumeBackgroundArea) {
71
+ volumeBackgroundArea.classList.add('d-none')
72
+ }
73
+
74
+ if (volumeArea) {
75
+ volumeArea.classList.remove('volume-area-open')
76
+ }
77
+
78
+ if (volumeControl) {
79
+ volumeControl.classList.remove('volume-area-open');
80
+ volumeControl.classList.remove('volume-control-enable');
81
+ }
82
+
83
+ if (controlsBackground) {
84
+ if (!controlsBackground.classList.contains('d-none')) {
85
+ controlsBackground.classList.add('d-none');
86
+ }
87
+ }
88
+
53
89
  }
54
90
  const enablePoster = () => {
55
91
 
@@ -91,7 +127,6 @@ export namespace LTPlayerEvents {
91
127
  if (!background.classList.contains('d-none')) {
92
128
  background.classList.add('d-none');
93
129
  }
94
-
95
130
  }
96
131
  }
97
132
 
@@ -147,6 +147,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
147
147
  common.timeUpdate(event);
148
148
  if (instance.playerConfig.getPreload().isActive) {
149
149
  common.preloadPoster.timeUpdate(instance, 'event');
150
+ instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
150
151
  }
151
152
  })
152
153
  }
@@ -130,7 +130,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
130
130
  }
131
131
 
132
132
  eventManager.timeUpdate(event);
133
-
133
+ instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
134
134
  instance.playerControl.mobileEvents.removePlyrControlsClass(instance);
135
135
  })
136
136
  }
@@ -1,5 +1,5 @@
1
1
  import {TemplateService} from "../../services/TemplateService";
2
- import {LTPlayerConfig} from "../LTPlayerConfig";
2
+ import {LTPlayerConfig} from "../config/LTPlayerConfig";
3
3
  import {IconsService} from "../../services/IconsService";
4
4
  import Plyr from "plyr";
5
5
 
@@ -22,7 +22,7 @@ export class LTPlayerPoster {
22
22
 
23
23
  const logo: string = this.iconService.getLogo();
24
24
 
25
- const posterTemplate = this.templateService.getPoster({config:this.config, logoBig: logo, isShare : !!(this.config.getShareData())});
25
+ const posterTemplate = this.templateService.getPoster({config:this.config, logoBig: logo, isShare : !!(this.config.isShareData())});
26
26
 
27
27
  const container = this.plyr.elements.wrapper;
28
28
 
@@ -87,6 +87,7 @@ export namespace LTPlayerPosterEvents {
87
87
  common.poster.getButtons(instance)?.forEach(button => {
88
88
  button.addEventListener('click', function LTPlayerPosterButtons(event) {
89
89
  event.preventDefault();
90
+ instance.playerControl.desktopEvents.titleLineBreak(instance);
90
91
  common.poster.reset(instance);
91
92
  })
92
93
  });
@@ -108,6 +109,7 @@ export namespace LTPlayerPosterEvents {
108
109
 
109
110
  if (mobileEvent) {
110
111
  mobileEvent.on('singletap', function LTPlayerMobilePosterButtons() {
112
+ instance.playerControl.desktopEvents.titleLineBreak(instance);
111
113
 
112
114
  common.poster.reset(instance);
113
115
 
@@ -2,7 +2,7 @@ import {LTPlayerPosterPreload} from "./LTPlayerPosterPreload";
2
2
  import {LTPlayerPoster} from "./LTPlayerPoster";
3
3
  import {LTPlayer} from "../LTPlayerType";
4
4
  import {LTPlayerDevMethode} from "../LTPlayerDevMethode";
5
- import {LTPlayerConfig} from "../LTPlayerConfig";
5
+ import {LTPlayerConfig} from "../config/LTPlayerConfig";
6
6
  import {TemplateService} from "../../services/TemplateService";
7
7
  import {IconsService} from "../../services/IconsService";
8
8
  import {LTPlayerPosterEvents} from "./LTPlayerPosterEvents";
@@ -1,7 +1,7 @@
1
1
  import {LTPlayerPoster} from "./LTPlayerPoster";
2
2
  import Plyr from "plyr";
3
3
  import {TemplateService} from "../../services/TemplateService";
4
- import {LTPlayerConfig} from "../LTPlayerConfig";
4
+ import {LTPlayerConfig} from "../config/LTPlayerConfig";
5
5
  import {IconsService} from "../../services/IconsService";
6
6
  import {LoaderService} from "../../services/LoaderService";
7
7
  import {LTPlayer} from "../LTPlayerType";