var showSingleVideoMediaQuery="(min-width:768px)";Vue.component("video-search",{props:{keywords:String,itemLimit:Number,supportOnly:Boolean,showPaging:Boolean,searchFields:Array},data:function(){return{videos:[],selectedVideo:null,showSingleVideo:!0,totalResults:0,skipResults:0,autoplay:!1}},watch:{keywords(){this.getResults()}},methods:{getResults:function(setSelectedVideo=false){let requestBody={searchQuery:this.keywords,itemLimit:this.itemLimit,skip:this.skipResults,searchFields:this.searchFields,otherOptions:{supportOnly:this.supportOnly}};$.ajax({url:"/api/videos/search",method:"POST",contentType:"application/json",context:this,data:JSON.stringify(requestBody)}).then(response=>{this.totalResults=response.totalCount,this.videos=response.results,(!this.selectedVideo||setSelectedVideo)&&(this.selectedVideo=this.videos[0])})},changePage:function(skipResults){let changeSelectedVideo=this.itemLimit===1;this.skipResults=skipResults;this.getResults(changeSelectedVideo)},selectionChange:function(videoId){this.autoplay=!0;this.selectedVideo=this.videos.find(v=>v.id===videoId)}},mounted:function(){this.getResults()},template:`
<div class="">
	<div v-show="videos.length">
		<video-embed v-if="selectedVideo" :embed-url="selectedVideo.embedUrl" :autoplay="autoplay" :title="selectedVideo.title"></video-embed>
		<div v-if="totalResults > 1" class="row justify-content-center mt-4">
			<video-search-result v-for="video in videos"
								 :key="video.id"
								 :video="video"
								 :selected="video.id === selectedVideo.id"
								 @selection-change="selectionChange($event)"></video-search-result>
		</div>
		<search-paging v-if="showPaging"
						class="mt-4"
						:totalRows="totalResults"
						:start-row="skipResults"
						:row-limit="itemLimit"
						:page-limit="3"
						@change-page="changePage($event)"></search-paging>
	</div>
	<div v-if="!videos.length" class="text-center">
		Sorry, we couldn't find any relevant videos.
	</div>
</div>`});Vue.component("video-embed",{props:{embedUrl:String,title:String,autoplay:Boolean,lazyLoad:{type:Boolean,"default":!0}},computed:{embedCode(){if(!this.embedUrl)return null;let $embed=$(this.embedUrl),url=new URL($embed.attr("src")||$embed.attr("data-src")),autoplayUrlParamValue=this.autoplay?"1":"0";return url.searchParams.set("autoplay",autoplayUrlParamValue),this.lazyLoad?($embed.addClass("embed-responsive-item lazyload"),$embed.attr("loading","lazy"),$embed.attr("data-src",url.toString()),$embed.removeAttr("src")):$embed.attr("src",url.toString()),$embed.attr("title")||$embed.attr("title",this.title),$embed[0].outerHTML}},template:'<div class="embed-responsive embed-responsive-16by9 mx-auto w-100" v-html="embedCode"><\/div>'});Vue.component("video-search-result",{props:{video:Object,selected:Boolean},data:function(){return{thumbnailSize:"mqdefault"}},computed:{thumbnail:function(){let thumbnail=null,$embed=$(this.video.embedUrl),embedSrc=$embed.attr("data-src")||$embed.attr("src"),videoIdMatches=/(\/embed\/)(.*?)(\?|$)/gi.exec(embedSrc),videoId;return videoIdMatches&&(videoId=videoIdMatches[2],thumbnail=`https://i.ytimg.com/vi/${videoId}/${this.thumbnailSize}.jpg`),thumbnail}},template:`
<div class="card col-4 border-0 p-2 p-sm-3" :class="[selected ? 'gray-background selected' : '']">
  <img class="card-img-top" :src="thumbnail" :alt="video.title">
  <div class="card-body p-0 pt-1">
    <p class="caption text-right">Length: {{ video.videoLength }}</p>
    <a v-if="!selected" href="#" class="stretched-link" @click.prevent="$emit('selection-change', video.id)"><h4 class="mt-2">{{ video.title }}</h4></a>
    <h4 v-else class="mt-2">{{ video.title }}</h4>
  </div>
</div>`});Daktronics.Components.RegisterVues(".video-search");Vue.component("video-gallery",{props:{searchQuery:String,defaultKeywords:String,searchFields:String,itemLimit:{type:Number,"default":5},showPaging:{type:Boolean,"default":!1},supportOnly:{type:Boolean,"default":!1},facetFields:{type:Array,"default":function(){return[]}}},computed:{videoResults(){return this.$store.state.results.search},totalResults(){return this.$store.state.results.totalCount},skipResults(){return this.$store.state.query.skip}},methods:{changePage(skipResults){this.$store.dispatch("skipResults",skipResults)},changeSelection(videoId){let video=this.videoResults.find(v=>v.id===videoId);this.$emit("selection-change",video)},loadVideoFromUrlName(urlName){$.ajax({url:`/api/videos/getByName/${urlName}?supportOnly=${this.supportOnly}`,method:"GET"}).then(response=>{response&&this.$emit("selection-change",response)}).catch(error=>{this.$emit("selection-change",{error})})},setSelectedVideoOnLoad(){let urlName=this.$route.query.video;if(urlName){let video=this.videoResults.find(v=>v.urlName===urlName);video?this.changeSelection(video.id):this.loadVideoFromUrlName(urlName)}}},created:function(){this.$store.dispatch("init",{context:{url:"/api/videos/search"},query:{userKeywords:this.searchQuery,defaultKeywords:this.defaultKeywords,itemLimit:this.itemLimit,facetFields:this.facetFields,otherSearchOptions:{supportOnly:this.supportOnly}}}).then(()=>{this.setSelectedVideoOnLoad()})},template:`
<div>
	<div class="row justify-content-center mt-4">
		<template v-if="videoResults && videoResults.length">
			<video-search-result v-for="video in videoResults" :key="video.id"
								:video="video"
								@selection-change="changeSelection"></video-search-result>
		</template>
		<div class="col-auto" v-else>
			Sorry, we couldn't find any relevant videos.
		</div>
	</div>
	<search-paging v-if="showPaging" class="my-5"
				:total-rows="totalResults"
				:start-row="skipResults"
				:row-limit="itemLimit"
				:page-limit="5"
				@change-page="changePage($event)"></search-paging>
</div>`});Vue.component("video-details",{props:{video:{type:Object,"default":function(){return null}}},data(){return{modalSelector:"#video-details-modal"}},computed:{error(){var _a;if((_a=this.video)!==null&&_a!==void 0)return _a.error}},methods:{setUrl(urlName){if(!this.error){let routeQuery=this.$route.query,query=Object.assign({},routeQuery);urlName?query.video=urlName:delete query.video;query.video!==routeQuery.video&&(routeQuery.video?this.$router.replace({query}):this.$router.push({query}))}},close(){this.setUrl(null);this.$emit("close")}},mounted(){this.setUrl(this.video.urlName);$(this.modalSelector).modal("show").on("hidden.bs.modal",()=>{this.close()});window.onpopstate=()=>{$(this.modalSelector).modal("hide")}},template:`
<div id="video-details-modal" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
			<div class="modal-header align-items-center">
				<h4 class="m-0">{{ video.title }}</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div v-if="error" class="modal-body text-center">
				<div v-if="error.status === 404">
                    <h2>Not Found</h2>
                    <p>Sorry, we couldn't find the requested video.</p>
                </div>
				<div v-else-if="error.status === 401">
					<h2>Sorry, you don't have access.</h2>
					<p>You do not have access to this video. <a href="/Account/Login">Make sure you're logged in</a>, then talk to your sales rep if that does not resolve the issue.</p>
				</div>
                <div v-else>
                    <h2>Error Occured</h2>
                    <p>Sorry, there was a problem getting details for this video.</p>
                </div>
			</div>
			<div v-else class="modal-body">
				<div class="row justify-content-center">
					<div class="col-12 col-lg-9">
						<video-embed :embed-url="video.embedUrl" :autoplay="false" :lazy-load="false" :title="video.title"></video-embed>
						<p class="caption text-right"></p>
						<h1 class="mt-5">{{ video.title }}</h1>
						<h2 class="pageSubTitle">{{ video.subTitle }}</h2>
						<div v-html="video.marketingHTML"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>`});$("#video-gallery-search").length&&new Vue({el:"#video-gallery-search",router:Daktronics.Components.GetVueRouter(),store:makeSearchComponentStore(),data:{selectedVideo:null},computed:{searchQuery(){return this.$store.state.query.userKeywords}},methods:{updateUserSearchQuery(keywords){this.$store.dispatch("newKeywordQuery",keywords).then(()=>{$("#video-gallery-search input[type=text]").get(0).blur()})},restartSearch(){this.$store.dispatch("reset")}},created:function(){this.$store.commit("setRouter",this.$router)}});