multicam-player
Version:
Multicam player component for Vue 2 with swiper playlist and eb-player integration.
1 lines • 20.4 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue-awesome-swiper")):"function"==typeof define&&define.amd?define("MulticamPlayer",["vue-awesome-swiper"],t):"object"==typeof exports?exports.MulticamPlayer=t(require("vue-awesome-swiper")):e.MulticamPlayer=t(e[void 0])}(this,function(e){return function(){"use strict";var t,i,s={829:function(t){t.exports=e}},n={};function r(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return s[e](i,i.exports,r),i.exports}i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var n=Object.create(null);r.r(n);var a={};t=t||[null,i({}),i([]),i(i)];for(var o=2&s&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=i(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},r.d(n,a),n},r.d=function(e,t){for(var i in t)r.o(t,i)&&!r.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};function o(e,t,i,s,n,r,a,o){var l,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=i,c._compiled=!0),s&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},c._ssrRegister=l):n&&(l=o?function(){n.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:n),l)if(c.functional){c._injectStyles=l;var d=c.render;c.render=function(e,t){return l.call(t),d(e,t)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,l):[l]}return{exports:e,options:c}}r.r(a),r.d(a,{MulticamPlayer:function(){return c},default:function(){return h}});var l={name:"MulticamPlayer",components:{MainPlayer:o({name:"MulticamGrid",props:{src:{type:String,required:!0},height:{type:String,default:"56.25vw"}},computed:{gridStyle(){return{width:"100%",height:this.height,maxHeight:"100vh"}}},mounted(){console.log("MulticamGrid mounted with src:",this.src)}},function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"main-player-grid",style:e.gridStyle},[i("eb-player",{ref:"player",staticStyle:{width:"100%",height:"100%","object-fit":"contain"},attrs:{src:e.src,autoplay:!0,"live-button":!0,startAt:-2,lib:"https://libs.easybroadcast.io/assets/js/eblib/hls1/latest/eblib.bundle.js",controls:!0,engineSettings:{liveSyncDurationCount:3,lowLatencyMode:!1,maxLiveSyncPlaybackRate:1},stats:"https://stats.easybroadcast.fr",origin:"mutlicam",libSettings:{resourceManager:{timeoutV2V:6e3,storageSize:300,randomWaitForPeers:[2e3,4e3],enableV2V:!1},statsOutput:{enable:!1,intervalMs:3e4}},disableCustomAbr:"true"}})],1)},[],!1,null,"387d4468",null).exports,PreviewPlayer:o({props:["config","play","simple","syncTime","multicamDebug"],data(){return{playerTime:0,_hudInterval:null,isBuffering:!1,_videoEventsBound:!1,lastSynced:0}},computed:{engineSettings(){return{liveSyncDurationCount:4,lowLatencyMode:!1,maxLiveSyncPlaybackRate:1}}},watch:{play(){this.handlePlayPause()},syncTime(e){const t=this._getVideo();if(!t)return;const i=()=>{if(!(Math.abs(t.currentTime-e)<.3||Math.abs(this.lastSynced-e)<.3))try{t.currentTime=e,this.lastSynced=e}catch(e){console.warn(`[PreviewPlayer:${this.config&&this.config.id}] sync seek failed`,e)}};if(t.readyState>=2)i();else{const e=(e,t,i)=>{const s=n=>{e.removeEventListener(t,s),i(n)};e.addEventListener(t,s)};e(t,"loadedmetadata",i),e(t,"canplay",i)}}},mounted(){console.log(`[PreviewPlayer:${this.config?.id}] Mounted`),this.$nextTick(()=>{this._bindVideoEventsIfNeeded()}),this.multicamDebug&&(this._hudInterval=setInterval(()=>{const e=this._getVideo();e&&(this.playerTime=e.currentTime)},100))},beforeDestroy(){this._unbindVideoEvents(),clearInterval(this._hudInterval);const e=this._getVideo();if(e)try{e.pause(),e.src="",e.load()}catch(e){}},methods:{_getVideo(){return this.$refs.ebPlayer?.$el?.querySelector("video")||null},_bindVideoEventsIfNeeded(){if(this._videoEventsBound)return;const e=this._getVideo();e&&(e.onwaiting=()=>this.isBuffering=!0,e.onplaying=()=>this.isBuffering=!1,this._videoEventsBound=!0,this.handlePlayPause())},_unbindVideoEvents(){const e=this._getVideo();e&&(e.onwaiting=e.onplaying=null),this._videoEventsBound=!1},async handlePlayPause(){const e=this._getVideo();if(!e)return void this.$nextTick(this.handlePlayPause);const t=!!this.play,i=!e.paused&&!e.ended&&e.readyState>2;try{t&&!i?(await new Promise(e=>requestAnimationFrame(e)),await e.play()):!t&&i&&e.pause()}catch(e){if(e&&("AbortError"===e.name||/AbortError/.test(e.message)))return;console.warn(`[PreviewPlayer:${this.config&&this.config.id}] play/pause error`,e)}}}},function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"previewContainer",staticClass:"preview-player"},[e.multicamDebug?i("div",{staticStyle:{position:"absolute",bottom:"4px",right:"4px",background:"rgba(0, 0, 0, 0.7)",color:"#0f0","font-size":"10px",padding:"4px","z-index":"999"}},[i("div",[e._v("Cam "+e._s(e.config&&e.config.id||""))]),e._v(" "),i("div",[e._v("Player: "+e._s(e.playerTime.toFixed(2)))])]):e._e(),e._v(" "),i("eb-player",{ref:"ebPlayer",staticStyle:{width:"100%",height:"100%","object-fit":"cover"},attrs:{src:e.config&&(e.config.lowestSrc||e.config.src),ad:e.config&&e.config.ad,muted:!0,middlebar:!1,autoplay:e.play,controls:!1,preview:!1,engineSettings:e.engineSettings,noUi:!0,speed:"false",startAt:"0",forceQuality:"lowest",preload:"none",pip:"false",manager:"wss://manager.kube.easybroadcast.fr/easybroadcast/Xc152ogNOWvOZSH",lib:"https://libs.easybroadcast.io/assets/js/eblib/hls1/latest/eblib.bundle.js",stats:"https://stats.easybroadcast.fr",origin:"multicam",libSettings:{resourceManager:{timeoutV2V:6e3,storageSize:300,randomWaitForPeers:[2e3,4e3],enableV2V:!1},statsOutput:{enable:!1,intervalMs:3e4}},disableCustomAbr:"true",about:"false"}})],1)},[],!1,null,"043e0973",null).exports},props:{config:{type:Array,default:()=>[]},configUrl:{type:String,default:""},autoPlaylist:{type:Boolean,default:!1},multicamDebug:{type:Boolean,default:!1},mainHeight:{type:String,default:"56.25vw"}},data(){return{fps:0,_rafTimer:null,performanceWarning:!1,memoryWarning:!1,cams:[],selectedCamIndex:0,currentMainTime:0,mainPlayerPlaying:!0,playlistVisible:!0,hidePlaylistTimer:null,playlistAutoMode:!!(this.$config&&!0===this.$config.multicamPlaylistAuto||"undefined"!=typeof process&&process.env&&"true"===process.env.MULTICAM_PLAYLIST_AUTO),visiblePreviewIndexes:new Set,playlistMaxWidth:1224,swiperReady:!1,swiperOptions:{loop:!1,virtual:!1,observer:!0,observeParents:!0,watchSlidesProgress:!0,watchSlidesVisibility:!0,slidesPerView:5,spaceBetween:4,freeMode:!0,scrollbar:{draggable:!0},mousewheel:!0,breakpoints:{800:{slidesPerView:2},1200:{slidesPerView:4}},navigation:{nextEl:".playlist-inner .swiper-button-next",prevEl:".playlist-inner .swiper-button-prev"}},$swiper:null,currentSlide:0,_fullscreenBtnObserver:null,_slideIO:null}},computed:{visiblePreviewCount(){return this.visiblePreviewIndexes.size},memoryUsage(){return"undefined"!=typeof window&&window.performance&&performance.memory?`${(performance.memory.usedJSHeapSize/1024/1024).toFixed(1)} MB`:"N/A"},isAutoMode(){return!0===this.playlistAutoMode},toggleTooltip(){return""+(this.playlistVisible?"Hide playlist":"Show playlist")},toggleHandleStyle(){return{top:(this.playlistVisible?130:8)+"px"}}},async mounted(){const{swiper:e,swiperSlide:t}=await Promise.resolve().then(r.t.bind(r,829,23));if(this.observeFullscreenButton(),this.$options.components.swiper=e,this.$options.components.swiperSlide=t,this.swiperReady=!0,this.$nextTick(async()=>{await this.initCams();const e=this.$refs.swiper?.swiper;if(e){if(this.playlistVisible=!1,this.$swiper=e,this.$swiper.navigation)try{this.$swiper.navigation.init?.(),this.$swiper.navigation.update?.()}catch(e){console.warn("[mounted] Navigation init/update failed:",e)}this.attachSwiperEvents(),this.initSlideObserver(),this.updateVisibleSlidesByRect(),requestAnimationFrame(()=>this.updateVisibleSlidesByRect()),this.onResize=this.debouncedUpdateVisibleSlidesRect,window.addEventListener("resize",this.onResize),this.attachMainPlayerEvents(),this.isAutoMode&&this._armAutoHideTimer(),console.log("[mounted] Ready (events + IO attached)")}else console.warn("[mounted] Swiper instance not ready")}),this.multicamDebug){let e=performance.now(),t=0;const i=()=>{const s=performance.now();if(t++,s-e>=1e3){if(this.fps=t,this.performanceWarning=this.fps<25,performance.memory){const e=performance.memory.usedJSHeapSize/1024/1024;this.memoryWarning=e>500}t=0,e=s}requestAnimationFrame(i)};requestAnimationFrame(i)}},beforeDestroy(){cancelAnimationFrame(this._rafTimer),this._teardownSwiperAndIO(),window.removeEventListener("resize",this.onResize),clearTimeout(this.hidePlaylistTimer),this._fullscreenBtnObserver&&(this._fullscreenBtnObserver.disconnect(),this._fullscreenBtnObserver=null)},methods:{async initCams(){let e=[];if(this.config.length)e=this.config;else if(this.configUrl)try{const t=await fetch(this.configUrl);e=await t.json()}catch(e){console.error("[Multicam] Failed to fetch configUrl",e)}else console.warn("[Multicam] No config or configUrl provided"),e=[];const t=e.filter(e=>e&&!0===e.active).map((e,t)=>({id:t+1,src:e.stream_url,lowestSrc:e.lowest_stream_url||e.stream_url,ad:e.ads_url||""})),i=[...t];for(let e=t.length+1;i.length<50&&t.length;e++)i.push({...t[(e-1)%t.length],id:e});i.length||console.warn("[Multicam] No active cameras"),this.cams=i},togglePlaylist(){this.playlistVisible=!this.playlistVisible,this.isAutoMode&&this.playlistVisible?this._armAutoHideTimer():clearTimeout(this.hidePlaylistTimer)},_armAutoHideTimer(){clearTimeout(this.hidePlaylistTimer),this.isAutoMode&&(this.hidePlaylistTimer=setTimeout(()=>{this.playlistVisible=!1},4e4))},onUserActive(){this.isAutoMode&&(this.playlistVisible,this.playlistVisible=!0,this._armAutoHideTimer())},attachSwiperEvents(){if(!this.$swiper)return;const e=this.$swiper;this.onSlideChange=()=>{this.currentSlide=e.realIndex,this.updateVisibleSlidesByRect(),this.onUserActive()},this.onTransitionEnd=()=>{this.updateVisibleSlidesByRect()},this.throttledUpdateVisibleSlidesRect=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:80,i=0,s=null;return function(){for(var n=arguments.length,r=new Array(n),a=0;a<n;a++)r[a]=arguments[a];const o=Date.now();o-i>=t?(i=o,e.apply(this,r)):(clearTimeout(s),s=setTimeout(()=>{i=Date.now(),e.apply(this,r)},t-(o-i)))}}(()=>{this.updateVisibleSlidesByRect()},80),this.onSliderMove=()=>{this.onUserActive(),this.throttledUpdateVisibleSlidesRect()},this.onScroll=()=>{this.onUserActive(),this.throttledUpdateVisibleSlidesRect()},e.on("slideChange",this.onSlideChange),e.on("transitionEnd",this.onTransitionEnd),e.on("sliderMove",this.onSliderMove),e.on("scroll",this.onScroll)},_detachSwiperEvents(){this.$swiper&&(this.$swiper.off("slideChange",this.onSlideChange),this.$swiper.off("transitionEnd",this.onTransitionEnd),this.$swiper.off("sliderMove",this.onSliderMove),this.$swiper.off("scroll",this.onScroll))},_teardownSwiperAndIO(){if(clearTimeout(this.hidePlaylistTimer),this._slideIO&&(this._slideIO.disconnect(),this._slideIO=null),this.$swiper){try{this._detachSwiperEvents(),"function"==typeof this.$swiper.destroy&&this.$swiper.destroy(!0,!1)}catch(e){console.warn("[teardown] Swiper destroy error",e)}this.$swiper=null}this.visiblePreviewIndexes=new Set},async _rebuildFromProps(){await this.initCams(),this.cams.length&&this.$nextTick(()=>{const e=this.$refs.swiper?.swiper;if(e){this.$swiper=e;try{this.$swiper.update(),this.$swiper.navigation?.init?.(),this.$swiper.navigation?.update?.()}catch(e){}this.attachSwiperEvents(),this.initSlideObserver(),this.updateVisibleSlidesByRect(),requestAnimationFrame(()=>this.updateVisibleSlidesByRect())}this.attachMainPlayerEvents()})},initSlideObserver(){if(!("IntersectionObserver"in window)||!this.$swiper)return console.warn("[IO] IntersectionObserver unavailable – using rect fallback."),void this.updateVisibleSlidesByRect();const e=this.$swiper.el,t=this.$swiper.slides;if(!e||!t||!t.length)return void console.warn("[IO] Missing container or slides");this._slideIO&&(this._slideIO.disconnect(),this._slideIO=null);const i=new Set;this._slideIO=new IntersectionObserver(e=>{const s=Array.prototype.slice.call(t);let n=!1;if(e.forEach(e=>{const t=s.indexOf(e.target);if(-1===t)return;const r=e.isIntersecting&&e.intersectionRatio>=.7;r&&!i.has(t)?(i.add(t),n=!0):!r&&i.delete(t)&&(n=!0)}),n){const e=new Set(i);(e.size!==this.visiblePreviewIndexes.size||[...e].some(e=>!this.visiblePreviewIndexes.has(e)))&&(this.visiblePreviewIndexes=e)}},{root:e,rootMargin:"0px",threshold:[0,.7,1]}),Array.prototype.forEach.call(t,e=>this._slideIO.observe(e)),this.updateVisibleSlidesByRect(),requestAnimationFrame(()=>this.updateVisibleSlidesByRect())},updateVisibleSlidesByRect(){const e=this.$swiper,t=e?.el,i=e?.slides;if(!t||!i||!i.length)return;const s=t.getBoundingClientRect(),n=new Set;if(Array.prototype.forEach.call(i,(e,t)=>{const i=e.getBoundingClientRect(),r=Math.max(0,Math.min(i.right,s.right)-Math.max(i.left,s.left))*Math.max(0,Math.min(i.bottom,s.bottom)-Math.max(i.top,s.top)),a=(i.width||0)*(i.height||0);(a>0?r/a:0)>=.7&&n.add(t)}),0===n.size&&i.length){const t=e.realIndex??e.activeIndex??0;n.add(t)}(n.size!==this.visiblePreviewIndexes.size||[...n].some(e=>!this.visiblePreviewIndexes.has(e)))&&(this.visiblePreviewIndexes=n)},debouncedUpdateVisibleSlidesRect:function(e){let t,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:200;return function(){for(var s=arguments.length,n=new Array(s),r=0;r<s;r++)n[r]=arguments[r];clearTimeout(t),t=setTimeout(()=>e.apply(this,n),i)}}(function(){this.updateVisibleSlidesByRect()},100),observeFullscreenButton(){const e=new MutationObserver(()=>{const e=document.querySelectorAll("a.eb-button.eb-fullscreen");if(e.length>0){const t=e[0];if(t.dataset.customHandlerAttached)return;t.dataset.customHandlerAttached="true";const i=t.cloneNode(!0);i.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),document.fullscreenElement?document.exitFullscreen?.():this.enterFullscreen()}),t.parentNode.replaceChild(i,t)}});e.observe(document.body,{childList:!0,subtree:!0}),this._fullscreenBtnObserver=e},async enterFullscreen(){const e=this.$refs.fullscreenContainer;e.requestFullscreen?await e.requestFullscreen():e.webkitRequestFullscreen?await e.webkitRequestFullscreen():e.mozRequestFullScreen?await e.mozRequestFullScreen():e.msRequestFullscreen?await e.msRequestFullscreen():console.warn("Fullscreen not supported.")},isPreviewVisible(e){return this.visiblePreviewIndexes.has(e)},selectCam(e){this.selectedCamIndex=e,this.$nextTick(this.attachMainPlayerEvents),this.onUserActive()},onPrevClick(){this.$swiper&&(this.$swiper.slidePrev(),this.onUserActive())},onNextClick(){this.$swiper&&(this.$swiper.slideNext(),this.onUserActive())},syncPlayPause(e){const t="play"===e;(this.$refs.previewPlayers||[]).map((e,i)=>{if(!this.isPreviewVisible(i))return;const s=e?.$refs?.ebPlayer?.$el?.querySelector("video");if(!s)return;const n=!s.paused&&!s.ended&&s.readyState>2;if((!t||!n)&&(t||n))try{t?requestAnimationFrame(()=>s.play().catch(()=>{})):s.pause()}catch(e){e&&("AbortError"===e.name||/AbortError/.test(e.message))||console.warn(`[syncPlayPause] idx ${i}:`,e)}})},attachMainPlayerEvents(){this.$nextTick(()=>{const e=this.$refs.mainPlayer?.$el?.querySelector("video");if(!e)return void console.warn("[attachMainPlayerEvents] No main player video found");try{e.setAttribute("playsinline","")}catch(e){}try{e.muted=!0}catch(e){}const t=t=>{const i=e.currentTime||0;Math.abs(this.currentMainTime-i)>=.01&&(this.currentMainTime=i)};e.onloadedmetadata=()=>t(),e.oncanplay=()=>t(),e.onplay=()=>{this.mainPlayerPlaying=!0,this.syncPlayPause("play"),t()},e.onpause=()=>{this.mainPlayerPlaying=!1,this.syncPlayPause("pause"),t()},e.onseeked=()=>{t()},e.ontimeupdate=()=>t();let i=0;const s=n=>{const r=e.paused||e.seeking?500:100;n-i>=r&&(t(),i=n),this._rafTimer=requestAnimationFrame(s)};cancelAnimationFrame(this._rafTimer),this._rafTimer=requestAnimationFrame(s),Promise.resolve().then(()=>e.play()).catch(()=>{})})}},watch:{playlistVisible(e){e?this.$nextTick(()=>{const e=this.$refs.swiper?.swiper;if(e){if(this.$swiper=e,this.$swiper.navigation)try{this.$swiper.navigation.init?.(),this.$swiper.navigation.update?.()}catch(e){console.warn("[watch:playlistVisible] Navigation init/update failed:",e)}this.attachSwiperEvents(),this.initSlideObserver(),this.updateVisibleSlidesByRect(),requestAnimationFrame(()=>this.updateVisibleSlidesByRect())}else console.warn("[watch:playlistVisible] Swiper not ready on show")}):this._teardownSwiperAndIO()},config:{deep:!0,handler(){this._rebuildFromProps()}},configUrl(){this._rebuildFromProps()}}},c=o(l,function(){var e=this,t=e.$createElement,i=e._self._c||t;return e.cams.length>0?i("div",{staticClass:"home"},[e.multicamDebug?i("div",{staticStyle:{position:"fixed",bottom:"10px",right:"10px",background:"#000",color:"#0f0",padding:"6px 10px","z-index":"9999","font-size":"12px","line-height":"1.4","font-family":"monospace"}},[i("div",[i("strong",[e._v("Visible previews:")]),e._v(" "+e._s(e.visiblePreviewCount))]),e._v(" "),i("div",[i("strong",[e._v("Main time:")]),e._v(" "+e._s(e.currentMainTime.toFixed(2))+"s")]),e._v(" "),i("div",[i("strong",[e._v("FPS:")]),e._v(" "),i("span",{style:{color:e.fps<30?"#f33":"#0f0"}},[e._v(e._s(e.fps))])]),e._v(" "),i("div",[i("strong",[e._v("RAM:")]),e._v(" "),i("span",{style:{color:e.memoryWarning?"#f33":"#0f0"}},[e._v("\n "+e._s(e.memoryUsage)+"\n ")])]),e._v(" "),e.performanceWarning?i("div",{staticStyle:{color:"#f33"}},[e._v("\n ⚠️ Perf warning: weak device\n ")]):e._e()]):e._e(),e._v(" "),i("div",{ref:"fullscreenContainer",staticClass:"main-player-area"},[i("div",{staticClass:"main-player-wrapper",on:{mousemove:e.onUserActive,touchstart:e.onUserActive}},[i("div",{staticClass:"main-player-aspect"},[i("MainPlayer",{ref:"mainPlayer",attrs:{src:e.cams[e.selectedCamIndex].src,height:e.mainHeight}})],1)]),e._v(" "),i("div",{staticClass:"playlist-toggle-handle",class:{expanded:e.playlistVisible},style:e.toggleHandleStyle,attrs:{"data-tip":e.toggleTooltip,role:"button","aria-label":"Toggle playlist"},on:{click:e.togglePlaylist,mousemove:e.onUserActive,touchstart:e.onUserActive}},[i("span",{staticClass:"chevron"})]),e._v(" "),i("transition",{attrs:{name:"playlist-slide",appear:""}},[e.playlistVisible?i("div",{staticClass:"playlist-area",on:{mousemove:e.onUserActive,touchstart:e.onUserActive}},[i("div",{staticClass:"playlist-inner",style:{maxWidth:e.playlistMaxWidth?e.playlistMaxWidth+"px":void 0}},[i("div",{staticClass:"swiper-button-prev",attrs:{title:"Prev"},on:{click:e.onPrevClick}}),e._v(" "),i("div",{staticClass:"swiper-button-next",attrs:{title:"Next"},on:{click:e.onNextClick}}),e._v(" "),e.swiperReady&&e.cams.length>0?i("swiper",{ref:"swiper",staticClass:"playlist-strip",attrs:{options:e.swiperOptions}},e._l(e.cams,function(t,s){return i("swiper-slide",{key:t.id},[i("div",{class:["playlist-cam",{selected:s===e.selectedCamIndex}],on:{click:function(t){return e.selectCam(s)}}},[e.isPreviewVisible(s)?i("PreviewPlayer",{ref:"previewPlayers",refInFor:!0,attrs:{config:t,play:e.mainPlayerPlaying,simple:!0,syncTime:e.currentMainTime,multicamDebug:e.multicamDebug}}):i("div",{staticClass:"cam-label"},[e._v("Cam "+e._s(s+1))])],1)])}),1):e._e()],1)]):e._e()])],1)]):e._e()},[],!1,null,"c9f5fbc2",null).exports;function d(e){d.installed||(d.installed=!0,e.component("MulticamPlayer",c))}let u=null;"undefined"!=typeof window?u=window.Vue:void 0!==r.g&&(u=r.g.Vue),u&&u.use({install:d});var h={install:d};return a}()});