@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.
- package/dist/css/lt-player-main.css +1 -3
- 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 +10 -8
- package/src/assets/sass/app.scss +2 -2
- package/src/assets/sass/core/_fonts.scss +5 -5
- package/src/assets/sass/sections/_control.scss +35 -0
- package/src/assets/sass/sections/_poster.scss +3 -0
- package/src/assets/sass/sections/_settings.scss +1 -1
- package/src/assets/sass/sections/_subtitles.scss +4 -0
- package/src/assets/sass/sections/controllers/_botom.scss +15 -5
- package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss +70 -11
- package/src/components/LTPlayerManager.ts +12 -5
- package/src/components/LTPlayerSetup.ts +31 -7
- package/src/components/LTPlayerType.ts +11 -7
- package/src/components/addInfo/LTPlayerAdditionalInfoEvents.ts +6 -2
- package/src/components/config/LTPlayerConfig.ts +192 -0
- package/src/components/config/LTPlayerConfigProcessor.ts +546 -0
- package/src/components/controls/LTPlayerChapters.ts +8 -4
- package/src/components/controls/LTPlayerControls.ts +1 -1
- package/src/components/controls/LTPlayerControlsEvents.ts +206 -65
- package/src/components/controls/settings/LTPlayerDesktopSettingsControllers.ts +2 -4
- package/src/components/controls/settings/LTPlayerMobileSettingsControllers.ts +2 -0
- package/src/components/events/LTPlayer.ts +36 -1
- package/src/components/events/LTPlayerDesktop.ts +1 -0
- package/src/components/events/LTPlayerMobile.ts +1 -1
- package/src/components/poster/LTPlayerPoster.ts +2 -2
- package/src/components/poster/LTPlayerPosterEvents.ts +2 -0
- package/src/components/poster/LTPlayerPosterManager.ts +1 -1
- package/src/components/poster/LTPlayerPosterPreload.ts +1 -1
- package/src/components/poster/LTPlayerPosterPreloadEvents.ts +17 -6
- package/src/components/share/LTPlayerShare.ts +1 -1
- package/src/components/share/LTPlayerShareEvents.ts +20 -20
- package/src/global/controllers/LTPlayerController.ts +1 -1
- package/src/services/Helper.ts +20 -5
- package/src/services/IconsService.ts +15 -0
- package/src/services/LTPlayerRotateDeviceService.ts +8 -1
- package/src/services/ResizeService.ts +24 -6
- package/src/services/TemplateService.ts +1 -1
- package/src/views/controls.handlebars +71 -14
- package/src/views/settings.handlebars +3 -3
- package/src/views/template.handlebars +2 -2
- 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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
57
|
+
iconSelector.src = icons.pause;
|
|
50
58
|
playerStateInfo.classList.add('active');
|
|
51
59
|
instance.plyr.togglePlay(false);
|
|
52
60
|
removeStateButtons();
|
|
53
61
|
} else {
|
|
54
|
-
|
|
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
|
-
|
|
195
|
-
|
|
196
|
-
|
|
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
|
-
|
|
219
|
-
|
|
220
|
-
|
|
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
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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.
|
|
585
|
+
const playButton = instance.plyr.elements.controls.querySelector('.play-button');
|
|
463
586
|
let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playButton);
|
|
464
|
-
if (mobileEvent
|
|
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
|
-
|
|
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 =
|
|
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.
|
|
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";
|