https://holodex.net/assets/MultiviewSyncBar.61c203b6.js

1import{db as C,ap as x,cx as w,dc as $,dd as S,cH as V,de as b,aK as k,bP as P,a9 as h,aO as M,bh as L,ax as o,at as c,ay as E,aB as R,as as O,aN as D,au as F,cq as B,aD as j,ar as I,aE as A,aF as U,aG as z,b2 as H}from"./vendor.b5f99b55.js";import{b as N,H as W,k as u,j as q,n as G}from"./main.0e1538d8.js";var X="Expected a function";function f(t,s,e){var i=!0,n=!0;if(typeof t!="function")throw new TypeError(X);return C(e)&&(i="leading"in e?!!e.leading:i,n="trailing"in e?!!e.trailing:n),x(t,s,{leading:i,maxWait:s,trailing:n})}const K={name:"MultiviewSyncBar",components:{ChannelImg:N},mixins:[W],data(){return{mdiPause:w,mdiFastForward10:$,mdiRewind10:S,mdiLinkVariant:V,mdiPlaySpeed:b,availablePlaybackRates:[.25,.5,.75,1,1.25,1.5,1.75,2],lastSyncTimeMillis:Date.now(),paused:!0,hovering:!1,hoverTs:0,currentTs:0,currentProgressByVideo:{},playbackRate:1,timeTooltipLeft:0,timeTooltipText:"",timer:null,firstPlay:!0,showConfiguration:!1}},computed:{...k("multiview",["layout","layoutContent","presetLayout","autoLayout"]),...P("multiview",["activeVideos"]),pastVideos(){return this.activeVideos.filter(t=>t.status==="past")},videoWithTs(){const t=this.pastVideos.map(s=>({...s,startTs:h(s.available_at).unix(),endTs:h(s.available_at).unix()+s.duration}));return t.sort((s,e)=>s.startTs-e.startTs),t},overlapVideos(){const t=[];return this.videoWithTs.forEach(s=>{if(!t.length){t.push(s);return}s.startTs-t[t.length-1].endTs<60*60?t.push(s):t.length===1&&t.splice(0,1,s)}),t},minTs(){return this.hasVideosToSync?Math.min(...this.overlapVideos.map(t=>t.startTs)):0},maxTs(){return this.hasVideosToSync?Math.max(...this.overlapVideos.map(t=>t.endTs)):0},splitProgressBarData(){const t=this.maxTs-this.minTs;return this.overlapVideos.map(s=>({id:s.id,channel:s.channel,offset:(s.startTs-this.minTs)/t,width:(s.endTs-s.startTs)/t}))},currentProgress(){return this.getPercentForTime(this.currentTs)},currentDuration(){return u(Math.round(this.currentTs-this.minTs)*1e3)},totalDuration(){return u((this.maxTs-this.minTs)*1e3)},hasVideosToSync(){return this.overlapVideos.length>=1},routeCurrentTs(){return this.$route.query.t},routeOffsets(){return this.$route.query.offsets?.split(",")},offsets(){const t=this.$store.state.multiview.syncOffsets;return this.routeOffsets&&this.overlapVideos.length?this.overlapVideos.map((s,e)=>({[s.id]:t[s.id]??+this.routeOffsets[e]})).reduce((s,e)=>({...s,...e}),{}):t}},watch:{paused(t){this.$parent.$refs.videoCell.forEach(s=>{const{video:e}=s;e&&this.overlapVideos.find(n=>n.id===e.id)&&t?s.setPlaying(!1):this.setTime(this.currentTs)})},playbackRate(t){this.$parent.$refs.videoCell.forEach(s=>{const{video:e}=s;e&&this.overlapVideos.find(n=>n.id===e.id)&&s.setPlaybackRate(t)})}},mounted(){this.startTimer(),this.$refs.sliderContainer.addEventListener("mouseenter",this.onMouseEnter,!1),this.$refs.sliderContainer.addEventListener("mousemove",this.onMouseOver,!1),this.$refs.sliderContainer.addEventListener("mouseout",this.onMouseLeave,!1),this.$refs.slider.addEventListener("mousewheel",function(){this.blur()},!1)},beforeDestroy(){this.timer&&clearInterval(this.timer),this.$refs.sliderContainer.removeEventListener("mouseenter",this.onMouseEnter),this.$refs.sliderContainer.removeEventListener("mousemove",this.onMouseOver),this.$refs.sliderContainer.removeEventListener("mouseout",this.onMouseLeave)},methods:{onMouseEnter(){this.hovering=!0},onMouseOver:f(function(t){const s=t.target.getBoundingClientRect().x,e=(t.clientX-s)/t.target.clientWidth*100;e>=0&&e<=100&&(this.hoverTs=this.getTimeForPercent(e),this.timeTooltipLeft=`${e}%`,this.timeTooltipText=`${this.formatUnixTime(this.hoverTs)}
2${u((this.hoverTs-this.minTs)*1e3)}/${this.totalDuration}`)},10),onMouseLeave(){this.hovering=!1},onSliderInput:f(function(t){const s=this.getTimeForPercent(t.target.value);this.setTime(s)},50),getTimeForPercent(t){return t/100*(this.maxTs-this.minTs)+this.minTs},getPercentForTime(t){return(t-this.minTs)/(this.maxTs-this.minTs)*100},getProgressPercentByAbsoluteTime(t,s){return Math.min(100,Math.max((t-s.startTs)/(s.endTs-s.startTs)*100,0))},sync(){if(!this.$parent?.$refs?.videoCell||!this.hasVideosToSync)return;const t=Date.now(),s=(t-this.lastSyncTimeMillis)/1e3;this.lastSyncTimeMillis=t,this.currentTs<=0||this.currentTs<this.minTs||this.currentTs>this.maxTs?this.currentTs=this.findStartTime():this.paused||(this.currentTs=Math.min(Math.max(this.currentTs+s*this.playbackRate,this.minTs),this.maxTs));const e=1.5*this.playbackRate;this.$parent.$refs.videoCell.forEach(i=>

2{const{video:n,currentTime:a}=i,r=n&&this.overlapVideos.find(g=>g.id===n.id);if(!r)return;const d=this.currentTs>r.endTs?100:(a/r.duration*100).toFixed(2);M.set(this.currentProgressByVideo,r.id,d);const l=this.currentTs-r.startTs+(this.offsets[r.id]??0),T=Math.abs(l-a),_=l<0,y=l/r.duration>1;_||y?i.setPlaying(!1):l>0&&T>e&&(i.setPlaying(!this.paused),i.seekTo(l),i.setPlaybackRate(this.playbackRate))})},findStartTime(){if(this.routeCurrentTs)return+this.routeCurrentTs;const t=[];let s=this.minTs;return this.$parent?.$refs?.videoCell?(this.$parent.$refs.videoCell.forEach((e,i)=>{const{video:n,currentTime:a}=e,r=n&&this.overlapVideos.find(l=>l.id===n.id);if(!r)return;const d=a+r.startTs;(i===0||Math.abs(t[i-1]-d)<2e3)&&t.push(d),r.startTs>s&&r.endTs>s&&(s=r.startTs)}),t.length===this.overlapVideos.length?t.reduce((e,i)=>e+i,0)/t.length:s):this.minTs},setTime(t){this.currentTs=t,this.$parent.$refs.videoCell.forEach(s=>{const{video:e}=s,i=e&&this.overlapVideos.find(d=>d.id===e.id);if(!i)return;const n=t-i.startTs,a=n<0,r=n/i.duration>1;if(a||r){s.setPlaying(!1),s.seekTo(a?0:i.duration-1);return}this.firstPlay&&(this.paused=!1,this.firstPlay=!1),s.setPlaying(!this.paused),s.seekTo(n)})},startTimer(){this.timer&&clearInterval(this.timer),this.timer=setInterval(this.sync,500)},formatUnixTime(t){return h.unix(t).format("LTS")},setOffset(t,s){this.$store.commit("multiview/setSyncOffsets",{id:t,value:s})},onShareClick(){const t=encodeURIComponent(q({layout:this.layout,contents:this.layoutContent,includeVideo:!0})),s=new URLSearchParams;this.currentTs&&s.append("t",String(Math.round(this.currentTs)));const e=this.overlapVideos.map(i=>this.offsets[i.id]??0);e.find(i=>+i)&&s.append("offsets",e.join(",")),this.copyToClipboard(`${window.origin}/multiview/${t}${s.toString()?`?${s.toString()}`:""}`)},formatDuration:u}};var m=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e(L,{staticClass:"sync-bar d-flex justify-center align-center pa-2"},[e("div",{staticClass:"mr-2 d-flex align-center flex-column",staticStyle:{height:"100%",width:"120px"}},[t.minTs?e("div",{staticClass:"text-center text-body-2"},[t._v(" "+t._s(t.currentDuration)+" / "+t._s(t.totalDuration)+" ")]):t._e(),e("div",{staticClass:"d-flex justify-space-between align-center"},[e(o,{attrs:{icon:""},on:{click:function(i){return t.setTime(t.currentTs-10)}}},[e(c,[t._v(" "+t._s(t.mdiRewind10)+" ")])],1),e(o,{attrs:{icon:""},on:{click:function(i){t.paused=!t.paused}}},[e(c,{attrs:{large:""}},[t._v(" "+t._s(t.paused?t.icons.mdiPlay:t.mdiPause)+" ")])],1),e(o,{attrs:{icon:""},on:{click:function(i){return t.setTime(t.currentTs+10)}}},[e(c,[t._v(" "+t._s(t.mdiFastForward10)+" ")])],1)],1),e("div",[e(o,{attrs:{icon:""},on:{click:function(i){t.showConfiguration=!t.showConfiguration}}},[e(c,{attrs:{small:""}},[t._v(" "+t._s(t.icons.mdiCog)+" ")])],1),e(E,{attrs:{top:"","offset-y":""},scopedSlots:t._u([{key:"activator",fn:function(i){var n=i.on;return[e(o,t._g({attrs:{icon:""}},n),[e(c,{attrs:{small:""}},[t._v(" "+t._s(t.mdiPlaySpeed)+" ")])],1)]}}])},[e(R,{attrs:{dense:""}},t._l(t.availablePlaybackRates,function(i){return e(O,{key:`playbackRateSelector-${i}`,on:{click:function(n){t.playbackRate=i}}},[e(D,{staticClass:"mr-2"},[t.playbackRate===i?e(c,[t._v(" "+t._s(t.icons.mdiCheck)+" ")]):t._e()],1),e(F,[t._v(" "+t._s(i)+" ")])],1)}),1)],1),e(o,{attrs:{icon:""},on:{click:t.onShareClick}},[e(c,{attrs:{small:""}},[t._v(" "+t._s(t.mdiLinkVariant)+" ")])],1)],1)]),e("div",{staticClass:"flex-grow-1 align-self-start",staticStyle:{position:"relative"}},[e("div",{staticClass:"time-tooltip-wrapper"},[e("div",{directives:[{name:"show",rawName:"v-show",value:t.hovering,expression:"hovering"}],staticClass:"time-tooltip",style:{marginLeft:t.timeTooltipLeft}},[t._v(" "+t._s(t.timeTooltipText)+" ")])]),e("div",{staticClass:"progressSlider pr-2"},[t.hasVideosToSync?t._e():e("div",[t._v(" "+t._s(t.$t("views.multiview.sync.nothingToSync"))+" ")]),e("div",{directives:[{name:"show",rawName:"v-show",value:t.hasVideosToSync,expression:"hasVideosToSync"}],staticStyle:{position:"relative"}},[e("div",{ref:"sliderContainer",staticClass:"slider-container"},[e("input",{ref:"slider",staticClass:"sync-slider",attrs:{type:"range",min:"0",max:"100",step:"0.01"},domProps:{value:t.currentProgress},on:{input:t.onSliderInput}})]),t._l(t.splitProgressBarData,function(i){return[e("div",{key:i.id,staticClass:"d-flex align-center my-1"},[e("channel-img",{staticClass:"px-1",attrs:{channel:i.channel,size:24,rounded:"","no-link":"","no-alt":""}}),e("div",{staticClass:"flex"},[e(B,{staticStyle:{"z-index":"1"},style:{marginLeft:(i.offset*100).toFixed(2)+"%",width:(i.width*100).toFixed(2)+"%",height:"8px"},attrs:{color:"secondary",value:t.currentProgressByVideo[i.id]||0}})],1)],1)]})],2)])]),e(j,{attrs:{"max-width":"450px"},model:{value:t.showConfiguration,callback:function(i){t.showConfiguration=i},expression:"showConfiguration"}},[e(I,[e(A,[t._v(t._s(t.$t("views.multiview.sync.syncSettings")))]),e(U,[t._v(" "+t._s(t.$t("views.multiview.sync.syncSettingsDetail"))+" "),t._l(t.overlapVideos,function(i){return[e("div",{key:i.id,staticClass:"d-flex justify-space-between my-1"}

2,[e("channel-img",{attrs:{channel:i.channel,size:40,rounded:"","no-link":"","no-alt":""}}),e("div",{staticClass:"d-flex align-center"},[e(o,{attrs:{elevation:"1"},on:{click:function(n){t.setOffset(i.id,(t.offsets[i.id]||0)-.5)}}},[t._v(" -0.5 ")]),e(z,{attrs:{label:"Offset",outlined:"",dense:"","hide-details":"",value:t.offsets[i.id]||"0",type:"number",suffix:"sec"},on:{input:function(n){return t.setOffset(i.id,+n)}}}),e(o,{attrs:{elevation:"1"},on:{click:function(n){t.setOffset(i.id,(t.offsets[i.id]||0)+.5)}}},[t._v(" +0.5 ")])],1)],1)]})],2)],1)],1),e(H,{attrs:{color:"success"},model:{value:t.doneCopy,callback:function(i){t.doneCopy=i},expression:"doneCopy"}},[t._v(" "+t._s(t.$t("component.videoCard.copiedToClipboard"))+" ")])],1)},J=[];m._withStripped=!0;const p={};var v=G(K,m,J,!1,Q,null,null,null);function Q(t){for(let s in p)this[s]=p[s]}v.options.__file="src/components/multiview/MultiviewSyncBar.vue";const tt=function(){return v.exports}();export{tt as default};