<template>
	<div class="video-slider-container position-relative">

		<div class="swiper-container overflow-hidden shadow-sm">
			<div class="swiper-wrapper">		
				
				<template v-for="item,i in displayItems">
					<div :key="i" class="swiper-slide">

						<div class="media-size video-embed">
							<video
								:data-url="(item.source == 'local' ? item.video : item.youtube)"
								:data-type="(item.source == 'local' ? 'video/mp4' : 'video/youtube')"
								class="video-js w-100 vjs-big-play-centered vjs-show-big-play-button-on-pause"
								preload="auto"
								width="100%"
								playsinline
								responsive="true"
								controls
								:poster="item.image.src"
							>    
							</video>
						</div>
					</div>
				</template>

			</div>
			<div class="swiper-pagination position-absolute" style="bottom:-30px;"></div>
			<template v-if="displayOptions.showNavigation">
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</template>
		</div>
		
	</div>
</template>

<script>
import { initIfExists as swiperJsLoader } from '../../cdnLoaders/swiperJs/swiperJsLoader';
import { initIfExists as videoJsLoader } from '../../cdnLoaders/videoJs/videoJsLoader';

export default {
    props: {
		items : {
			type		: Array,
			required	: true,
			default		: () => [],
		},
		options : Object
	},
	data : () => ({
		displayItems: [],
		displayOptions: {}
	}),
	beforeMount(){
		this.setup();
	},
	mounted(){
		videoJsLoader('.video-slider-container .swiper-slide');
		swiperJsLoader('.video-slider-container', {
			slidesPerView: 1,
			autoplay: false,
			spaceBetween: 30,
			allowTouchMove: false,
			loop: false,
			on: {
				slideChange: (swiper) => {
					// Pause Video on Slide Change
					let videos = swiper.el.querySelectorAll('.video-js');
					let previousVideo = videos[swiper.previousIndex] || {}
					if((previousVideo.player || {}).constructor.name == 'Player') {
						previousVideo.player.pause();
					}
				}
			},
		});
	},
	methods : {
		setup(){
			this.displayItems = this.items;
			this.displayOptions = Object.assign({},{ 
				showNavigation : true,
			},this.options)
		}
	}
};
</script>