@latest-thinking/lt-player 1.0.4-n → 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.
- package/dist/css/lt-player-main.css +1 -1
- 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 +1 -1
- package/src/assets/sass/sections/_control.scss +22 -0
- package/src/assets/sass/sections/_poster.scss +3 -0
- package/src/assets/sass/sections/controllers/_botom.scss +3 -3
- package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss +42 -3
- package/src/components/controls/LTPlayerControlsEvents.ts +92 -7
- package/src/components/poster/LTPlayerPosterEvents.ts +2 -0
- package/src/views/controls.handlebars +56 -3
package/package.json
CHANGED
|
@@ -36,6 +36,28 @@
|
|
|
36
36
|
width: 100%;
|
|
37
37
|
height: 100%;
|
|
38
38
|
z-index: 9999;
|
|
39
|
+
|
|
40
|
+
.lt-player-notification {
|
|
41
|
+
.lt-player-rewind {
|
|
42
|
+
height: 100%;
|
|
43
|
+
top: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.lt-player-rewind__icon__portrait {
|
|
47
|
+
margin: auto auto auto 2rem;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.lt-player-forward {
|
|
51
|
+
height: 100%;
|
|
52
|
+
top: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.lt-player-forward__icon__portrait {
|
|
56
|
+
margin: auto 2rem auto auto;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
|
|
39
61
|
}
|
|
40
62
|
|
|
41
63
|
&__shortcut-area {
|
|
@@ -117,6 +117,8 @@
|
|
|
117
117
|
display: flex;
|
|
118
118
|
flex-direction: column;
|
|
119
119
|
justify-content: space-between;
|
|
120
|
+
position: absolute;
|
|
121
|
+
bottom: 0;
|
|
120
122
|
|
|
121
123
|
&__header {
|
|
122
124
|
padding: 1.5rem;
|
|
@@ -157,6 +159,7 @@
|
|
|
157
159
|
font-size: $lt-player-font-size-xxl;
|
|
158
160
|
margin: 0;
|
|
159
161
|
color: $default-lt-player-white !important;
|
|
162
|
+
display: block;
|
|
160
163
|
}
|
|
161
164
|
}
|
|
162
165
|
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
.bottom-controller {
|
|
81
81
|
.play-button {
|
|
82
82
|
padding: .75rem;
|
|
83
|
-
bottom:
|
|
83
|
+
bottom: -2px;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
&__center-buttons {
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
.bottom-controller {
|
|
98
98
|
.play-button {
|
|
99
99
|
padding: .75rem;
|
|
100
|
-
bottom:
|
|
100
|
+
bottom: -2px;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
&__center-buttons {
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
|
|
130
130
|
.play-button {
|
|
131
131
|
padding: .75rem;
|
|
132
|
-
bottom:
|
|
132
|
+
bottom: -2px;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
.plyr__controls_speed-button {
|
|
@@ -12,7 +12,10 @@
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.poster-paragraph {
|
|
15
|
-
|
|
15
|
+
&__content {
|
|
16
|
+
font-size: .9rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
16
19
|
}
|
|
17
20
|
}
|
|
18
21
|
}
|
|
@@ -70,6 +73,7 @@
|
|
|
70
73
|
.content__body {
|
|
71
74
|
z-index: 2;
|
|
72
75
|
margin-top: auto;
|
|
76
|
+
width: 100%;
|
|
73
77
|
}
|
|
74
78
|
|
|
75
79
|
.poster-title {
|
|
@@ -83,10 +87,45 @@
|
|
|
83
87
|
}
|
|
84
88
|
|
|
85
89
|
.poster-paragraph {
|
|
86
|
-
|
|
87
|
-
|
|
90
|
+
|
|
91
|
+
margin-bottom: 3rem;
|
|
92
|
+
|
|
93
|
+
&__content {
|
|
94
|
+
display: -webkit-box;
|
|
95
|
+
-webkit-line-clamp: 2;
|
|
96
|
+
-webkit-box-orient: vertical;
|
|
97
|
+
word-wrap: break-word;
|
|
98
|
+
text-overflow: ellipsis;
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
|
|
101
|
+
font-weight: $lt-player-font-weight-sm;
|
|
102
|
+
color: $default-lt-player-white !important;
|
|
103
|
+
margin-bottom: 0;
|
|
104
|
+
max-height: 3.1rem;
|
|
105
|
+
transition: max-height 0.3s ease-in-out;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.open-content {
|
|
109
|
+
display: block;
|
|
110
|
+
transition: max-height 0.3s ease-in-out;
|
|
111
|
+
}
|
|
88
112
|
}
|
|
113
|
+
}
|
|
89
114
|
|
|
115
|
+
.poster-paragraph__button {
|
|
116
|
+
background: none;
|
|
117
|
+
box-shadow: none;
|
|
118
|
+
padding: 0;
|
|
119
|
+
border: none;
|
|
120
|
+
margin: 0;
|
|
121
|
+
text-decoration: none;
|
|
122
|
+
font-size: 0.8rem;
|
|
123
|
+
color: white;
|
|
124
|
+
cursor: pointer;
|
|
125
|
+
position: absolute;
|
|
126
|
+
bottom: 6rem;
|
|
127
|
+
right: 6rem;
|
|
128
|
+
z-index: 8;
|
|
90
129
|
}
|
|
91
130
|
|
|
92
131
|
|
|
@@ -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) {
|
|
@@ -58,9 +72,58 @@ export namespace LTPlayerControlsEvents {
|
|
|
58
72
|
|
|
59
73
|
animateNotificationOut(selector: Element) {
|
|
60
74
|
selector.classList.remove('animate-in');
|
|
61
|
-
}
|
|
75
|
+
},
|
|
62
76
|
}
|
|
63
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
|
+
}
|
|
64
127
|
|
|
65
128
|
playPauseIconTimeUpdate(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
|
|
66
129
|
|
|
@@ -88,6 +151,9 @@ export namespace LTPlayerControlsEvents {
|
|
|
88
151
|
constructor() {
|
|
89
152
|
this.common = new Common();
|
|
90
153
|
}
|
|
154
|
+
titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
|
|
155
|
+
this.common.checkTitleBreakWord(instance)
|
|
156
|
+
}
|
|
91
157
|
subtitles(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
|
|
92
158
|
|
|
93
159
|
const playerContainer = instance.plyr.elements.container;
|
|
@@ -121,7 +187,7 @@ export namespace LTPlayerControlsEvents {
|
|
|
121
187
|
|
|
122
188
|
|
|
123
189
|
controls.addEventListener('mouseleave', function () {
|
|
124
|
-
controls.classList.remove('plyr__controls-enable')
|
|
190
|
+
// controls.classList.remove('plyr__controls-enable')
|
|
125
191
|
})
|
|
126
192
|
}
|
|
127
193
|
|
|
@@ -557,6 +623,16 @@ export namespace LTPlayerControlsEvents {
|
|
|
557
623
|
|
|
558
624
|
mobileEvent.on('singletap', function LTPlayerMobileForwardDbClick(event) {
|
|
559
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)
|
|
560
636
|
})
|
|
561
637
|
}
|
|
562
638
|
|
|
@@ -575,10 +651,19 @@ export namespace LTPlayerControlsEvents {
|
|
|
575
651
|
})
|
|
576
652
|
|
|
577
653
|
mobileEvent.on('singletap', function LTPlayerMobileRewindClick(event) {
|
|
578
|
-
|
|
579
654
|
singleTapAction();
|
|
580
655
|
})
|
|
581
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
|
+
|
|
582
667
|
}
|
|
583
668
|
}
|
|
584
669
|
|
|
@@ -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
|
|
|
@@ -166,7 +166,32 @@
|
|
|
166
166
|
<div class="player-lt__modal__mobile d-none"></div>
|
|
167
167
|
</div>
|
|
168
168
|
{{#mobile}}
|
|
169
|
-
<div class="plyr__controls__mobile-background d-none"
|
|
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>
|
|
170
195
|
{{/mobile}}
|
|
171
196
|
{{/landscape}}
|
|
172
197
|
{{#portrait}}
|
|
@@ -206,9 +231,12 @@
|
|
|
206
231
|
<div class="lt-player-video-content">
|
|
207
232
|
<div class="content__body">
|
|
208
233
|
<h4 class="poster-title">{{videoParagraph}}</h4>
|
|
209
|
-
<
|
|
234
|
+
<div class="poster-paragraph">
|
|
235
|
+
<p class="poster-paragraph__content">{{videoTitle}}</p>
|
|
236
|
+
</div>
|
|
210
237
|
</div>
|
|
211
238
|
</div>
|
|
239
|
+
<button class="poster-paragraph__button">Read more</button>
|
|
212
240
|
<div class="lt-player-rewind-area">
|
|
213
241
|
</div>
|
|
214
242
|
<div class="lt-player-rewind lt-player-notify">
|
|
@@ -305,7 +333,32 @@
|
|
|
305
333
|
<div class="player-lt__modal__mobile d-none"></div>
|
|
306
334
|
</div>
|
|
307
335
|
{{#mobile}}
|
|
308
|
-
<div class="plyr__controls__mobile-background d-none"
|
|
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>
|
|
309
362
|
{{/mobile}}
|
|
310
363
|
{{/portrait}}
|
|
311
364
|
{{/player}}
|