https://www.castellodigranarola.it/wp-content/plugins/de-builder-e…/slideshow/assets/js/video.js?ver=1.0.0

1(function ($) {
2
3    $(document).ready(function () {
4        headerWrapper = $('#header_wrapper');
5        window.headerIsTransparent = true;
6        if (!headerWrapper.hasClass('custom')) {
7            headerIsTransparent = false;
8        }
9        window.headerIsTransparentMobile = true;
10        if (!headerWrapper.hasClass('custom') && is_mobile) {
11            headerIsTransparentMobile = false;
12        }
13        window.pauseCounter = 0;
14
15        autoplayVideo();
16    });
17
18
19    $('.play_on_slideshow').on('click', function (e) {
20        e.preventDefault();
21        videoOnSlideshow();
22    });
23
24    function videoOnSlideshow() {
25        //Player setting
26        var provider = $('#player_video').attr('data-plyr-provider'),
27            body = $('body'),
28            header = $('#header_wrapper'),
29            bfAfterSlideshowInline = $('.after_slideshow.booking_form_section.inline'),
30            slideshow = $('.slideshow_container'),
31            videoBox = $('#video_box'),
32            video = $('#video_box video[autoplay]'),
33            error = 0;
34
35        var player = new Plyr('#player_video', {
36            autoplay: video.length > 0 ? 1 : 0, //autoplay only if there is a video with autoplay attribute
37            muted: video.length > 0 ? 1 : 0,
38            controls: [
39                'play-large',
40                'play',
41                'progress',
42                'current-time',
43                'mute',
44                'volume',
45                'captions',
46                'airplay',
47                'fullscreen'
48
49            ],
50            quality: {
51                default: 'auto',
52            },
53            storage: {
54                enabled: video.length > 0 ? false : true,
55                key: 'ply'
56            }
57
58        });
59
60        if (is_mobile) {
61            var mobileHeaderHeight = header.height();
62            videoBox.css({
63                'top': mobileHeaderHeight
64            });
65        }
66
67        if (!is_mobile) {
68            if (!headerIsTransparent) {
69                header.addClass('absolute custom');
70            }
71            $('.slideshow_container + .booking_form_section.static.inline').hide();
72        }
73
74        videoBox.show();
75        slideshow.addClass('full');
76        body.addClass('video_play');
77        $('.close_video').focus();
78
79        //EVENTS MANAGER
80
81        //ready
82        player.on('ready', function () {
83            player.play();
84        });
85
86        //pause
87        player.on('pause', function () {
88            pauseCounter++;
89            body.addClass('video_pause');
90            body.removeClass('video_play');
91            //with on demand loading vimeo trigger a pause event at video load
92
93            if (provider === 'vimeo' && pauseCounter === 1 && !is_mobile) {
94                header.addClass('custom absolute');
95            } else if (provider === 'vimeo' && pauseCounter === 1 && headerIsTransparent && is_mobile) {
96                header.addClass('custom absolute');
97            } else {
98                header.removeClass('custom');
99            }
100        });
101
102        //play
103        player.on('play', function () {
104            if (!is_mobile) {
105                header.addClass('custom absolute');
106            } else if (headerIsTransparentMobile && is_mobile) {
107                header.addClass('custom absolute');
108            }
109            body.removeClass('video_pause');
110            body.addClass('video_play');
111        });
112
113        //end
114        player.on('ended', function () {
115
116
117            videoBox.hide();
118
119            if (headerIsTransparent && !is_mobile) {
120                header.addClass('custom absolute');
121            } else if (headerIsTransparentMobile && is_mobile) {
122                header.addClass('custom absolute');
123            } else {
124                header.removeClass('custom absolute');
125            }
126
127            slideshow.removeClass('full');
128            bfAfterSlideshowInline.show();
129
130            if (provider !== 'youtube') {
131                player.stop();
132            }
133
134            video.removeAttr('autoplay');
135        });
136
137        //scroll beyond the video
138        $(window).on("scroll", function () {
139            var scrollPosition = window.pageYOffset;
140            if (scrollPosition >= $(window).height() &&
141                body.hasClass('video_play')) {
142                player.pause();
143                body.addClass('video_pause');
144                body.removeClass('video_play');
145            }
146
147            if (scrollPosition === 0 && body.hasClass('video_pause')) {
148                setTimeout(function () {
149                    header.removeClass('custom');
150                }, 50)
151
152            }
153        });
154
155        //Hours spent to "fix" it: 8
156        //Please update the counter above if you are working on it.
157
158        //Fix IOS + chrome on youtube - play doesn't work with this combo. So we just remove the slideshow layer on click.
159        //Fix it would require to drop the video load on click hugely worsening the page speed (about 15mb more).
160        //And anyway WTF https://www.zdnet.com/article/which-browser-is-most-popular-on-each-major-operating-system/
161        player.on('statechange', function (e) {
162            var eventCode = e.detail.code;
163            //we have two event code -1 (unstarted) only when the browser consider illegitimate the video play (detected as "auto play")
164            //more info https://developers.google.com/youtube/iframe_api_reference
165            if (eventCode == -1) {
166                error++;
167                console.log('error', error);
168                if (error > 1) {
169                    player.pause();
170                }
171            }
172        });
173
174        //click on main book now
175        if (bfAfterSlideshowInline.length > 0 &&
176            (body.hasClass('video_pause') || body.hasClass('video_play'))) {
177            $('#main_book').on('click', function () {
178                $('.close_video').trigger('click');
179            })
180        }
181
182        //close (button)
183        $('.close_video').on('click', function () {
184            player.pause();
185            body.removeClass('video_pause');
186            body.removeClass('video_play');
187            videoBox.hide();
188            if (!headerIsTransparent) {
189                header.removeClass('absolute custom');
190            } else {
191                header.addClass('absolute custom');
192            }
193            slideshow.removeClass('full');
194            bfAfterSlideshowInline.show();

195            slideshow.find('.slick-current .play_on_slideshow').focus();
196        });
197
198        //stop (button)
199        $('.stop_video').on('click', function () {
200            //it would be better to use stop(); but it cast an error for yt mobile
201            if (provider === 'youtube') {
202                player.restart();
203                setTimeout(function () {
204                    player.pause();
205                }, 500)
206            } else {
207                player.stop();
208            }
209        });
210
211        $('.mute_video').on('click', function () {
212            //toggle mute on Plyr player
213            player.muted = !player.muted;
214            //toggle font awesome icon (default is mute)
215            $(this).find('span').toggleClass('fa-volume-mute');
216            $(this).find('span').toggleClass('fa-volume-up');
217
218        });
219
220        //full screen (button)
221        $('.full_screen').on('click', function () {
222            player.fullscreen.enter();
223        });
224
225        $('.controls div[role="button"]:has(span.fas)').on('keydown', function (e) {
226            if (e.key === 'Enter' || e.key === ' ') {
227                e.preventDefault();
228                $(this).trigger('click');
229            }
230        });
231
232    }
233
234    function autoplayVideo() {
235        var video = $('#video_box video[autoplay]'),
236            body = $('body'),
237            slideshow = $('.slideshow_container'),
238            videoBox = $('#video_box');
239        if (video.length > 0) {
240            videoOnSlideshow();
241            videoBox.show();
242            slideshow.addClass('full');
243            body.addClass('video_play');
244            $('.plyr__control.plyr__control--overlaid').trigger('click');
245        }
246    }
247
248
249}(jQuery));