https://mazzucconi.com/wp-content/plugins/pe-core/assets/js/pe-video-player.js?ver=7.1.2

1class peVideoPlayer {
2
3    constructor(DOM_el, options) {
4
5        this.DOM = {
6            el: null,
7            video: null,
8            button: null,
9            flip: null,
10            widget: null
11        };
12
13        this.DOM.el = DOM_el;
14
15        this.options = {
16            controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
17            clickToPlay: false,
18            autopause: false,
19            debug: false,
20            autoplay: false,
21            autopause: false,
22            muted: false,
23            playsinline: true,
24            loop: {
25                active: true
26            },
27            storage: {
28                enabled: false
29            },
30            youtube: {
31                modestbranding: 1,
32                controls: 0,
33                rel: 0,
34                cc_load_policy: 0,
35                iv_load_policy: 3,
36                noCookie: true,
37                frameborder: 0,
38            },
39            vimeo: {
40                autopause: false,
41                controls: false
42            }
43        }
44
45        var parent = this.DOM.el;
46        this.video = parent.querySelector('.p-video');
47        this.button = parent.querySelector('.pe--large--play');
48        this.parent = parent.parentNode;
49        this.lbHold = this.parent.querySelector('.pe--lightbox--hold');
50
51        //Get Attributes
52        this.autoplay = (this.DOM.el.dataset.autoplay === 'true');
53        this.muted = (this.DOM.el.dataset.muted === 'true');
54        this.loop = (this.DOM.el.dataset.loop === 'true');
55        this.controls = this.DOM.el.dataset.controls;
56        this.lightbox = (this.DOM.el.dataset.lightbox === 'true');
57
58        this.autoplay ? parent.classList.add('autoplay--running') : parent.classList.add('not-interacted');
59        this.dynamicControls = parent.classList.contains('vid--controls--dynamic') ? true : false;
60
61        // Set Player Options
62        this.options.controls = this.controls.split(',');
63        this.options.autoplay = this.autoplay;
64        this.options.loop.active = this.loop;
65        this.options.muted = this.muted;
66
67        this.render();
68
69    }
70
71    render() {
72
73        if (!this.DOM.el.classList.contains('vid--initialized')) {
74
75            this.player = new Plyr(this.video, this.options);
76
77            if (this.button) {
78
79                this.button.addEventListener("click", () => {
80                   
81                    if (!this.DOM.el.classList.contains('vid--interracted')) {
82
83                        this.DOM.el.classList.add('vid--interracted');
84
85                        if (this.lightbox) {
86
87                            let state = Flip.getState([this.DOM.el, this.DOM.el.querySelector('.plyr')]);
88
89                            this.DOM.el.classList.add('lightbox-open');
90                            this.parent.classList.add('lb-hold');
91                            document.body.classList.add('lightbox--active');
92
93                            if (ScrollSmoother.get()) { 
94
95                                gsap.set(this.DOM.el , {
96                                    top:  ScrollSmoother.get().scrollTop()
97                                })
98
99                            }
100
101                            this.flip = Flip.from(state, {
102                                duration: 1,
103                                absolute: true,
104                                absoluteOnLeave: true,
105                                ease: 'expo.inOut',
106                                onReverseComplete: () => {
107
108                                    this.parent.classList.remove('lb-hold');
109                                    this.DOM.el.classList.remove('lightbox-open');
110                                    this.DOM.el.classList.remove('lightbox--started');
111                                    document.body.classList.remove('lightbox--active');
112
113                                    gsap.set(this.DOM.el, {
114                                        clearProps: 'all'
115                                    })
116
117                                },
118                                onComplete: () => {
119                                    this.DOM.el.classList.add('lightbox--started');
120                                }
121                            });
122
123                            this.DOM.el.classList.remove('autoplay--running');
124                            this.DOM.el.classList.add('vid--playing');
125                            this.player.muted = false;

126                            this.autoplay ? this.player.restart() : this.player.play();
127
128
129                        } else {
130
131                            this.DOM.el.classList.remove('autoplay--running');
132                            this.DOM.el.classList.add('vid--playing');
133                            this.player.muted = false;
134                            this.autoplay ? this.player.restart() : this.player.play();
135                        }
136
137
138                    } else {
139
140                        this.player.play();
141                        this.DOM.el.classList.add('vid--playing');
142                        this.DOM.el.classList.remove('vid--paused');
143
144                    }
145
146
147                }, false);
148
149            }
150
151            this.player.on('pause', (event) => {
152
153                this.DOM.el.classList.remove('vid--playing');
154                this.DOM.el.classList.add('vid--paused');
155
156            })
157
158            this.player.on('play', (event) => {
159
160                if (this.DOM.el.classList.contains('vid--interracted')) {
161
162                    this.DOM.el.classList.add('vid--playing');
163                    this.DOM.el.classList.remove('vid--paused');
164
165                }
166
167            })
168
169            this.player.once('playing', (event) => {
170
171                this.DOM.el.classList.add('vid--initialized');
172
173                if (this.lbHold) {
174                    gsap.set(this.lbHold, {
175                        height: this.DOM.el.offsetHeight
176                    })
177                }
178
179                this.ratio = this.player.ratio.split(':')[0] / this.player.ratio.split(':')[1];
180
181                var parentRatio = this.parent.offsetWidth / this.parent.offsetHeight;
182
183                const $iframe = this.parent.querySelector('.plyr__video-wrapper');
184                const targetWidth = this.parent.offsetHeight * this.ratio;
185
186
187                if (parentRatio < this.ratio) {
188
189                    gsap.set($iframe, {
190                        width: targetWidth + 10,
191                        height: this.parent.offsetHeight + 10,
192                        x: -1 * (targetWidth - this.parent.offsetWidth) / 2
193                    })
194
195                    gsap.set(this.parent.querySelector('.plyr__video-embed__container'), {
196                        //                        paddingBottom: 0,
197                        //                        y: 0,
198                        //                        yPercent: 0
199                    })
200                }
201
202            })
203
204            if (this.lightbox) {
205
206                this.DOM.el.querySelector('.pe--lightbox--close').addEventListener('click', () => {
207
208                    this.player.pause();
209                    this.DOM.el.classList.remove('lightbox--started');
210                    this.flip.reverse();
211
212                })
213
214            }
215
216        }
217
218
219    }
220
221}