https://pafipulangpisaukab.org/frontend/assets/slidervideo/script.js

1(function() {
2    'use strict';
3
4    // youtube or vimeo
5    function checkPlayerName(url) {
6        if (url === 'false') return false;
7
8        var result = url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(&\S+)?/);
9
10        if (result && /youtube/g.test(result[3])) {
11            return 'youtube';
12        } else if (result && /vimeo/g.test(result[3])) {
13            return 'vimeo';
14        }
15
16        return false;
17    }
18
19    // youtube or vimeo
20    function getVideoId(url) {
21        if (url === 'false') return false;
22
23        var result = url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(&\S+)?/);
24
25        return result ? result[6] : false;
26    }
27
28    function getYTPreviewUrl(videoId, quality) {
29        return 'https://img.youtube.com/vi/' + videoId + '/' +
30            (quality || '') + 'default.jpg';
31    }
32
33    function getVimeoPreviewUrl(vimeoId, callback) {
34        var request = new XMLHttpRequest();
35        request.open('GET', 'https://vimeo.com/api/v2/video/' + vimeoId + '.json', true);
36        request.onreadystatechange = function() {
37            if (this.readyState === 4) {
38                if (this.status >= 200 && this.status < 400) {
39                    var response = JSON.parse(this.responseText);
40
41                    callback(response[0].thumbnail_large);
42                }
43            }
44        };
45        request.send();
46        request = null;
47    }
48
49    var getYTPreviewUrlWithBestQuality = (function() {
50        var cache = {};
51
52        return function(id) {
53            var def = $.Deferred();
54            if (id in cache) {
55                if (cache[id]) {
56                    def.resolve(cache[id]);
57                } else {
58                    def.reject('Preview image not found.');
59                }
60            } else {
61                $('<img>').on('load', function() {
62                    if (120 === (this.naturalWidth || this.width)) {
63                        // selection of preview in the best quality
64                        var file = this.src.split('/').pop();
65                        switch (file) {
66                            case 'maxresdefault.jpg':
67                                this.src = this.src.replace(file, 'sddefault.jpg');
68                                break;
69                            case 'sddefault.jpg':
70                                this.src = this.src.replace(file, 'hqdefault.jpg');
71                                break;
72                            case 'hqdefault.jpg':
73                                this.src = this.src.replace(file, 'default.jpg');
74                                break;
75                            default:
76                                cache[id] = null;
77                                def.reject('Preview image not found.');
78                                break;
79                        }
80                    } else {
81                        def.resolve(cache[id] = this.src);
82                    }
83                }).attr('src', getYTPreviewUrl(id, 'maxres'));
84            }
85
86            return def;
87        };
88    })();
89
90    /*
91     * check for youtube/vimeo video section and
92     * load videopreview from youtube/vimeo on 'add' event and enable YTPlayer/vimeo_player
93     * */
94    if (!$('html').hasClass('is-builder')) {
95        $(document).on('add.cards', function(event) {
96            if (!$(event.target).hasClass('carousel')) return;
97            var isDesktop = $('html').hasClass('desktop');
98
99            $(event.target).outerFind('[data-bg-video-slide]').each(function() {
100                var videoId = getVideoId($(this).attr('data-bg-video-slide'));
101                if (!videoId) return;
102
103                var $preview = $('<div class="mbr-background-video-preview"></div>').css({
104                    display: 'none',
105                    backgroundSize: 'cover',
106                    backgroundPosition: 'center'
107                });
108
109                $('.container-slide', this).before($preview);
110                var playerName = checkPlayerName($(this).attr('data-bg-video-slide'));

111                var $overlay = $(this).find('.mbr-overlay');
112
113                if (playerName === 'youtube') {
114                    getYTPreviewUrlWithBestQuality(videoId).done(function(url) {
115                        $preview.css('background-image', 'url("' + url + '")').show();
116                    });
117
118                    if (isDesktop && $.fn.YTPlayer && !$(this).find('.playerBox').length) {
119                        $('.container-slide', this)
120                            .before('<div class="mbr-background-video"></div>').prev()
121                            .YTPlayer({
122                                videoURL: videoId,
123                                containment: 'self',
124                                showControls: false,
125                                mute: true
126                            });
127
128                        if ($overlay.length) {
129                            $('.YTPOverlay', this).css({
130                                opacity: $overlay.css('opacity'),
131                                backgroundColor: $overlay.css('background-color')
132                            });
133                        }
134
135                        $(this).find('.image_wrapper img').css('opacity', '0');
136                        $(this).find('.image_wrapper .mbr-overlay').css('opacity', '0');
137                    }
138                } else {
139                    getVimeoPreviewUrl(videoId, function(url) {
140                        $preview.css('background-image', 'url("' + url + '")').show();
141                    });
142
143                    if (isDesktop && $.fn.vimeo_player && !$(this).find('.playerBox').length) {
144                        $('.container-slide', this)
145                            .before('<div class="mbr-background-video"></div>').prev()
146                            .vimeo_player({
147                                videoURL: videoId,
148                                containment: 'self',
149                                showControls: false,
150                                mute: true
151                            });
152
153                        if ($overlay.length) {
154                            $('.vimeo_player_overlay', this).css({
155                                opacity: $overlay.css('opacity'),
156                                backgroundColor: $overlay.css('background-color')
157                            });
158                        }
159                    }
160                }
161            });
162
163            $(event.target).find('.carousel-item iframe').css({
164                transitionProperty: 'opacity',
165                transitionDuration: '1000ms'
166            });
167
168            // pause YTPlayer/vimeo_player in hidden slides, apply some css rules
169            $(this).on('slide.bs.carousel', 'section.carousel', function(event) {
170                $(event.target).find('.carousel-item.active .mb_YTPlayer').each(function() {
171                    $(this).YTPPause();
172                });
173
174                $(event.target).find('.carousel-item.active .vimeo_player').each(function() {
175                    $(this).v_pause();
176                });
177
178                $(event.target).find('.carousel-item:not(.active) iframe').css('opacity', 0);
179            });
180
181            // start YTPPlayer in active slides, apply some css rules
182            $(this).on('slid.bs.carousel', 'section.carousel', function(event) {
183                $(event.target).find('.carousel-item.active .mb_YTPlayer').each(function() {
184                    $(this).YTPPlay();
185                });
186
187                $(event.target).find('.carousel-item.active .vimeo_player').each(function() {
188                    $(this).v_play();
189                });
190
191                $(event.target).find('.carousel-item.active iframe').resize().css('opacity', 1);
192            });
193        });
194    }
195})();