{"version":3,"file":"lg-video.umd.js","sources":["../../../src/plugins/video/lg-video-settings.ts","../../../src/lg-events.ts","../../../src/plugins/video/lg-video.ts"],"sourcesContent":["export interface VideoSettings {\n /**\n * Enable/DIsable first video autoplay.\n * @description Autoplay has to be managed using this setting.\n * Autoplay in PlayerParams doesn't have any effect.\n */\n autoplayFirstVideo: boolean;\n\n /**\n * Change YouTube player parameters.\n * You can find the list of YouTube player parameters from the following link\n * YouTube player parameters\n * @example\n * lightGallery(document.getElementById('lightGallery'), {\n * youTubePlayerParams: {\n * modestbranding : 1,\n * showinfo : 0,\n * controls : 0\n * }\n * })\n */\n youTubePlayerParams: any;\n\n /**\n * Change Vimeo player parameters.\n * You can find the list of vimeo player parameters from the following link\n * Vimeo player parameters\n * @example\n * lightGallery(document.getElementById('lightGallery'), {\n * vimeoPlayerParams: {\n * byline : 0,\n * portrait : 0,\n * color : 'CCCCCC'\n * }\n * })\n */\n vimeoPlayerParams: any;\n\n /**\n * Change Wistia player parameters.\n * You can find the list of Wistia player parameters from the following link\n * Vimeo player parameters\n */\n wistiaPlayerParams: any;\n\n /**\n * Go to next slide when video is ended\n * Note - this doesn't work with YouTube videos at the moment\n */\n gotoNextSlideOnVideoEnd: boolean;\n\n /**\n * Autoplay video on slide change\n * @description Make sure you set preload:\"none\"\n */\n autoplayVideoOnSlide: boolean;\n\n /**\n * Enbale videojs custom video player\n *
\n HTML5 video source = source: {\n src: string;\n type: string;\n }[];\n attributes: HTMLVideoElement;\n *
\n */\n html5Video: VideoSource;\n /**\n * True if video has poster\n */\n hasPoster: boolean;\n\n /**\n * True for first slide\n */\n isFirstSlide: boolean;\n}\n","/**\n * Video module for lightGallery\n * Supports HTML5, YouTube, Vimeo, wistia videos\n *\n *\n * @ref Wistia\n * https://wistia.com/support/integrations/wordpress(How to get url)\n * https://wistia.com/support/developers/embed-options#using-embed-options\n * https://wistia.com/support/developers/player-api\n * https://wistia.com/support/developers/construct-an-embed-code\n * http://jsfiddle.net/xvnm7xLm/\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video\n * https://wistia.com/support/embed-and-share/sharing-videos\n * https://private-sharing.wistia.com/medias/mwhrulrucj\n *\n * @ref Youtube\n * https://developers.google.com/youtube/player_parameters#enablejsapi\n * https://developers.google.com/youtube/iframe_api_reference\n *\n */\n\nimport { VideoSettings, videoSettings } from './lg-video-settings';\nimport { LightGallery } from '../../lightgallery';\nimport { lgQuery } from '../../lgQuery';\nimport { CustomEventHasVideo } from '../../types';\nimport { lGEvents } from '../../lg-events';\nimport { VideoSource } from './types';\n\ndeclare let Vimeo: any;\ndeclare let videojs: any;\ndeclare global {\n interface Window {\n _wq: any;\n Vimeo: any;\n }\n}\n\nfunction param(obj: { [x: string]: string | number | boolean }): string {\n return Object.keys(obj)\n .map(function (k) {\n return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);\n })\n .join('&');\n}\n\nexport default class Video {\n private core: LightGallery;\n private settings: VideoSettings;\n constructor(instance: LightGallery) {\n // get lightGallery core plugin instance\n this.core = instance;\n this.settings = { ...videoSettings, ...this.core.settings };\n\n return this;\n }\n init() {\n /**\n * Event triggered when video url found without poster\n * Append video HTML\n * Play if autoplayFirstVideo is true\n */\n this.core.LGel.on(\n `${lGEvents.hasVideo}.video`,\n this.onHasVideo.bind(this),\n );\n\n if (this.core.settings.enableSwipe || this.core.settings.enableDrag) {\n this.core.LGel.on(`${lGEvents.posterClick}.video`, () => {\n const $el = this.core.getSlideItem(this.core.index);\n this.loadVideoOnPosterClick($el);\n });\n } else {\n // For IE 9 and bellow\n this.core.outer\n .find('.lg-item')\n .first()\n .on('click.lg', () => {\n const $el = this.core.getSlideItem(this.core.index);\n this.loadVideoOnPosterClick($el);\n });\n }\n\n // @desc fired immediately before each slide transition.\n this.core.LGel.on(\n `${lGEvents.beforeSlide}.video`,\n this.onBeforeSlide.bind(this),\n );\n\n // @desc fired immediately after each slide transition.\n this.core.LGel.on(\n `${lGEvents.afterSlide}.video`,\n this.onAfterSlide.bind(this),\n );\n }\n\n /**\n * @desc Event triggered when video url or poster found\n * Append video HTML is poster is not given\n * Play if autoplayFirstVideo is true\n *\n * @param {Event} event - Javascript Event object.\n */\n onHasVideo(event: CustomEventHasVideo): void {\n const {\n index,\n src,\n html5Video,\n hasPoster,\n isFirstSlide,\n } = event.detail;\n if (!hasPoster) {\n // All functions are called separately if poster exist in loadVideoOnPosterClick function\n\n this.appendVideos(this.core.getSlideItem(index), {\n src,\n addClass: 'lg-object',\n index,\n html5Video,\n });\n\n // Automatically navigate to next slide once video reaches the end.\n this.gotoNextSlideOnVideoEnd(src, index);\n }\n\n if (this.settings.autoplayFirstVideo && isFirstSlide) {\n if (hasPoster) {\n const $slide = this.core.getSlideItem(index);\n this.loadVideoOnPosterClick($slide);\n } else {\n this.playVideo(index);\n }\n }\n }\n\n /**\n * @desc fired immediately before each slide transition.\n * Pause the previous video\n * Hide the download button if the slide contains YouTube, Vimeo, or Wistia videos.\n *\n * @param {Event} event - Javascript Event object.\n * @param {number} prevIndex - Previous index of the slide.\n * @param {number} index - Current index of the slide\n */\n onBeforeSlide(event: CustomEvent) {\n const { prevIndex, index } = event.detail;\n this.pauseVideo(prevIndex);\n\n const _videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};\n if (_videoInfo.youtube || _videoInfo.vimeo || _videoInfo.wistia) {\n this.core.outer.addClass('lg-hide-download');\n }\n }\n\n /**\n * @desc fired immediately after each slide transition.\n * Play video if autoplayVideoOnSlide option is enabled.\n *\n * @param {Event} event - Javascript Event object.\n * @param {number} prevIndex - Previous index of the slide.\n * @param {number} index - Current index of the slide\n */\n onAfterSlide(event: CustomEvent): void {\n const { index } = event.detail;\n if (this.settings.autoplayVideoOnSlide && this.core.lGalleryOn) {\n setTimeout(() => {\n const $slide = this.core.getSlideItem(index);\n if (!$slide.hasClass('lg-video-loaded')) {\n this.loadVideoOnPosterClick($slide);\n } else {\n this.playVideo(index);\n }\n }, 100);\n }\n }\n\n /**\n * Play HTML5, Youtube, Vimeo or Wistia videos in a particular slide.\n * @param {number} index - Index of the slide\n */\n playVideo(index: number) {\n this.controlVideo(index, 'play');\n }\n\n /**\n * Pause HTML5, Youtube, Vimeo or Wistia videos in a particular slide.\n * @param {number} index - Index of the slide\n */\n pauseVideo(index: number) {\n this.controlVideo(index, 'pause');\n }\n\n getVideoHtml(\n src: any,\n addClass: any,\n index: number,\n html5Video: VideoSource,\n ): string {\n let video = '';\n const videoInfo =\n this.core.galleryItems[(index as unknown) as number]\n .__slideVideoInfo || {};\n const currentGalleryItem = this.core.galleryItems[index];\n let videoTitle = currentGalleryItem.title || currentGalleryItem.alt;\n videoTitle = videoTitle ? 'title=\"' + videoTitle + '\"' : '';\n const commonIframeProps = `allowtransparency=\"true\" \n frameborder=\"0\" \n scrolling=\"no\" \n allowfullscreen \n mozallowfullscreen \n webkitallowfullscreen \n oallowfullscreen \n msallowfullscreen`;\n\n if (videoInfo.youtube) {\n const videoId = 'lg-youtube' + index;\n\n const youTubePlayerParams = `?wmode=opaque&autoplay=0&enablejsapi=1`;\n\n const playerParams =\n youTubePlayerParams +\n (this.settings.youTubePlayerParams\n ? '&' + param(this.settings.youTubePlayerParams)\n : '');\n\n video = ``;\n } else if (videoInfo.vimeo) {\n const videoId = 'lg-vimeo' + index;\n const playerParams = param(this.settings.vimeoPlayerParams);\n\n video = ``;\n } else if (videoInfo.wistia) {\n const wistiaId = 'lg-wistia' + index;\n const playerParams = param(this.settings.wistiaPlayerParams);\n video = ``;\n } else if (videoInfo.html5) {\n let html5VideoMarkup = '';\n for (let i = 0; i < html5Video.source.length; i++) {\n html5VideoMarkup += `