1/*! lg-video - v1.0.0 - 2016-09-20
2* http://sachinchoolur.github.io/lightGallery
3* Copyright (c) 2016 Sachin N; Licensed GPLv3 */
4
5(function (root, factory) {
6  if (typeof define === 'function' && define.amd) {
7    // AMD. Register as an anonymous module unless amdModuleId is set
8    define([], function () {
9      return (factory());
10    });
11  } else if (typeof exports === 'object') {
12    // Node. Does not work with strict CommonJS, but
13    // only CommonJS-like environments that support module.exports,
14    // like Node.
15    module.exports = factory();
16  } else {
17    factory();
18  }
19}(this, function () {
20
21(function($, window, document, undefined) {
22
23    'use strict';
24
25    var defaults = {
26        videoMaxWidth: '855px',
27        youtubePlayerParams: false,
28        vimeoPlayerParams: false,
29        dailymotionPlayerParams: false,
30        vkPlayerParams: false,
31        videojs: false,
32        videojsOptions: {}
33    };
34
35    var Video = function(element) {
36
37        this.core = $(element).data('lightGallery');
38
39        this.$el = $(element);
40        this.core.s = $.extend({}, defaults, this.core.s);
41        this.videoLoaded = false;
42
43        this.init();
44
45        return this;
46    };
47
48    Video.prototype.init = function() {
49        var _this = this;
50
51        // Event triggered when video url found without poster
52        _this.core.$el.on('hasVideo.lg.tm', function(event, index, src, html) {
53            _this.core.$slide.eq(index).find('.lg-video').append(_this.loadVideo(src, 'lg-object', true, index, html));
54            if (html) {
55                if (_this.core.s.videojs) {
56                    try {
57                        videojs(_this.core.$slide.eq(index).find('.lg-html5').get(0), _this.core.s.videojsOptions, function() {
58                            if (!_this.videoLoaded) {
59                                this.play();
60                            }
61                        });
62                    } catch (e) {
63                        console.error('Make sure you have included videojs');
64                    }
65                } else {
66                    _this.core.$slide.eq(index).find('.lg-html5').get(0).play();
67                }
68            }
69        });
70
71        // Set max width for video
72        _this.core.$el.on('onAferAppendSlide.lg.tm', function(event, index) {
73            _this.core.$slide.eq(index).find('.lg-video-cont').css('max-width', _this.core.s.videoMaxWidth);
74            _this.videoLoaded = true;
75        });
76
77        var loadOnClick = function($el) {
78            // check slide has poster
79            if ($el.find('.lg-object').hasClass('lg-has-poster') && $el.find('.lg-object').is(':visible')) {
80
81                // check already video element present
82                if (!$el.hasClass('lg-has-video')) {
83
84                    $el.addClass('lg-video-playing lg-has-video');
85
86                    var _src;
87                    var _html;
88                    var _loadVideo = function(_src, _html) {
89
90                        $el.find('.lg-video').append(_this.loadVideo(_src, '', false, _this.core.index, _html));
91
92                        if (_html) {
93                            if (_this.core.s.videojs) {
94                                try {
95                                    videojs(_this.core.$slide.eq(_this.core.index).find('.lg-html5').get(0), _this.core.s.videojsOptions, function() {
96                                        this.play();
97                                    });
98                                } catch (e) {
99                                    console.error('Make sure you have included videojs');
100                                }
101                            } else {
102                                _this.core.$slide.eq(_this.core.index).find('.lg-html5').get(0).play();
103                            }
104                        }
105
106                    };
107
108                    if (_this.core.s.dynamic) {
109
110                        _src = _this.core.s.dynamicEl[_this.core.index].src;
111                        _html = _this.core.s.dynamicEl[_this.core.index].html;
112
113                        _loadVideo(_src, _html);
114
115                    } else {
116
117                        _src = _this.core.$items.eq(_this.core.index).attr('href') || _this.core.$items.eq(_this.core.index).attr('data-src');
118                        _html = _this.core.$items.eq(_this.core.index).attr('data-html');
119
120                        _loadVideo(_src, _html);
121
122                    }
123
124                    var $tempImg = $el.find('.lg-object');
125                    $el.find('.lg-video').append($tempImg);
126
127                    // @todo loading icon for html5 videos also
128                    // for showing the loading indicator while loading video
129                    if (!$el.find('.lg-video-object').hasClass('lg-html5')) {
130                        $el.removeClass('lg-complete');
131                        $el.find('.lg-video-object').on('load.lg error.lg', function() {
132                            $el.addClass('lg-complete');
133                        });
134                    }
135
136                } else {
137
138                    var youtubePlayer = $el.find('.lg-youtube').get(0);
139                    var vimeoPlayer = $el.find('.lg-vimeo').get(0);
140                    var dailymotionPlayer = $el.find('.lg-dailymotion').get(0);
141                    var html5Player = $el.find('.lg-html5').get(0);
142                    if (youtubePlayer) {
143                        youtubePlayer.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
144                    } else if (vimeoPlayer) {
145                        try {
146                            $f(vimeoPlayer).api('play');
147                        } catch (e) {
148                            console.error('Make sure you have included froogaloop2 js');
149                        }
150                    } else if (dailymotionPlayer) {
151                        dailymotionPlayer.contentWindow.postMessage('play', '*');
152
153                    } else if (html5Player) {
154                        if (_this.core.s.videojs) {
155                            try {
156                                videojs(html5Player).play();
157                            } catch (e) {
158                                console.error('Make sure you have included videojs');
159                            }
160                        } else {
161                            html5Player.play();
162                        }
163                    }
164
165                    $el.addClass('lg-video-playing');
166
167                }
168            }
169        };
170
171        if (_this.core.doCss() && _this.core.$items.length > 1 && ((_this.core.s.enableSwipe && _this.core.isTouch) || (_this.core.s.enableDrag && !_this.core.isTouch))) {
172            _this.core.$el.on('onSlideClick.lg.tm', function() {
173                var $el = _this.core.$slide.eq(_this.core.index);
174                loadOnClick($el);
175            });
176        } else {
177
178            // For IE 9 and bellow
179            _this.core.$slide.on('click.lg', function() {
180                loadOnClick($(this));
181            });
182        }
183
184        _this.core.$el.on('onBeforeSlide.lg.tm', function(event, prevIndex, index) {
185
186            var $videoSlide = _this.core.$slide.eq(prevIndex);
187            var youtubePlayer = $videoSlide.find('.lg-youtube').get(0);
188            var vimeoPlayer = $videoSlide.find('.lg-vimeo').get(0);
189            var dailymotionPlayer = $videoSlide.find('.lg-dailymotion').get(0);
190            var vkPlayer = $videoSlide.find('.lg-vk').get(0);
191            var html5Player = $videoSlide.find('.lg-html5').get(0);
192            if (youtubePlayer) {
193                youtubePlayer.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
194            } else if (vimeoPlayer) {
195                try {
196                    $f(vimeoPlayer).api('pause');
197                } catch (e) {
198                    console.error('Make sure you have included froogaloop2 js');
199                }
200            } else if (dailymotionPlayer) {
201                dailymotionPlayer.contentWindow.postMessage('pause', '*');
202
203            } else if (html5Player) {
204                if (_this.core.s.videojs) {
205                    try {
206                        videojs(html5Player).pause();
207                    } catch (e) {
208                        console.error('Make sure you have included videojs');
209                    }
210                } else {
211                    html5Player.pause();
212                }
213            } if (vkPlayer) {
214                $(vkPlayer).attr('src', $(vkPlayer).attr('src').replace('&autoplay', '&noplay'));
215            }
216
217            var _src;
218            if (_this.core.s.dynamic) {
219                _src = _this.core.s.dynamicEl[index].src;
220            } else {
221                _src = _this.core.$items.eq(index).attr('href') || _this.core.$items.eq(index).attr('data-src');
222
223            }
224
225            var _isVideo = _this.core.isVideo(_src, index) || {};
226            if (_isVideo.youtube || _isVideo.vimeo || _isVideo.dailymotion || _isVideo.vk) {
227                _this.core.$outer.addClass('lg-hide-download');
228            }
229
230            //$videoSlide.addClass('lg-complete');
231
232        });
233
234        _this.core.$el.on('onAfterSlide.lg.tm', function(event, prevIndex) {
235            _this.core.$slide.eq(prevIndex).removeClass('lg-video-playing');
236        });
237    };
238
239    Video.prototype.loadVideo = function(src, addClass, noposter, index, html) {
240        var video = '';
241        var autoplay = 1;
242        var a = '';
243        var isVideo = this.core.isVideo(src, index) || {};
244
245        // Enable autoplay for first video if poster doesn't exist
246        if (noposter) {
247            if (this.videoLoaded) {
248                autoplay = 0;
249            } else {
250                autoplay = 1;
251            }
252        }
253
254        if (isVideo.youtube) {
255
256            a = '?wmode=opaque&autoplay=' + autoplay + '&enablejsapi=1';
257            if (this.core.s.youtubePlayerParams) {
258                a = a + '&' + $.param(this.core.s.youtubePlayerParams);
259            }
260
261            video = '<iframe class="lg-video-object lg-youtube ' + addClass + '" width="560" height="315" src="//www.youtube.com/embed/' + isVideo.youtube[1] + a + '" frameborder="0" allowfullscreen></iframe>';
262
263        } else if (isVideo.vimeo) {
264
265            a = '?autoplay=' + autoplay + '&api=1';
266            if (this.core.s.vimeoPlayerParams) {
267                a = a + '&' + $.param(this.core.s.vimeoPlayerParams);
268            }
269
270            video = '<iframe class="lg-video-object lg-vimeo ' + addClass + '" width="560" height="315"  src="//player.vimeo.com/video/' + isVideo.vimeo[1] + a + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
271
272        } else if (isVideo.dailymotion) {
273
274            a = '?wmode=opaque&autoplay=' + autoplay + '&api=postMessage';
275            if (this.core.s.dailymotionPlayerParams) {
276                a = a + '&' + $.param(this.core.s.dailymotionPlayerParams);
277            }
278
279            video = '<iframe class="lg-video-object lg-dailymotion ' + addClass + '" width="560" height="315" src="//www.dailymotion.com/embed/video/' + isVideo.dailymotion[1] + a + '" frameborder="0" allowfullscreen></iframe>';
280
281        } else if (isVideo.html5) {
282            var fL = html.substring(0, 1);
283            if (fL === '.' || fL === '#') {
284                html = $(html).html();
285            }
286
287            video = html;
288
289        } else if (isVideo.vk) {
290
291            a = '&autoplay=' + autoplay;
292            if (this.core.s.vkPlayerParams) {
293                a = a + '&' + $.param(this.core.s.vkPlayerParams);
294            }
295
296            video = '<iframe class="lg-video-object lg-vk ' + addClass + '" width="560" height="315" src="http://vk.com/video_ext.php?' + isVideo.vk[1] + a + '" frameborder="0" allowfullscreen></iframe>';
297
298        }
299
300        return video;
301    };
302
303    Video.prototype.destroy = function() {
304        this.videoLoaded = false;
305    };
306
307    $.fn.lightGallery.modules.video = Video;
308
309})(jQuery, window, document);
310
311
312}));
313