@veltdev/sdk/velt-video-player.js

Velt is an SDK to add collaborative features to your product within minutes. Example: Comments like Figma, Frame.io, Google docs or sheets, Recording like Loom, Huddles like Slack and much more.

import{j as Je,t as Ke}from"./chunk-BACKCNIG.js";import"./chunk-JFNRCHYR.js";import{l as je}from"./chunk-U4YN7DB7.js";import{a as Qe}from"./chunk-3HGEDPEP.js";import"./chunk-JDLRIKAZ.js";import"./chunk-3J52NZMN.js";import"./chunk-4ACOV475.js";import{b as ue,c as Ce,d as K}from"./chunk-WTYACTR5.js";import{a as Ue}from"./chunk-UJRDSNTY.js";import{I as We}from"./chunk-KU45CEXD.js";import{$ as Ee,Bf as ye,Ca as Fe,Db as ae,E as k,Eb as ce,Ee as x,Eg as Z,Fa as s,Fb as se,Fc as D,Fg as ie,Ga as A,Gc as B,Gg as Pe,Hg as ze,Hi as Ge,Ib as P,Ii as qe,J as $,Jb as F,Kb as ne,Lc as J,Nb as T,Nh as L,Ob as z,Pa as O,Pb as N,Pc as Le,Qb as Be,T as E,Ta as Ne,Ua as I,Va as De,Vh as ge,_a as u,a as j,aa as ke,b as Ve,bc as q,bi as _e,ca as H,da as Ae,db as w,di as W,eh as Te,g as he,ha as C,ia as v,ja as V,ka as fe,kc as me,lb as p,lc as pe,li as Ye,mb as c,mi as Ze,na as Ie,nb as d,nd as Y,ob as f,of as $e,p as le,pc as b,pf as He,r as xe,sb as M,tb as S,ti as Xe,ua as we,ub as R,v as G,vb as y,wa as Re,xb as h,xc as de,yi as Q,z as te,zb as g}from"./chunk-GR3NESUB.js";var nt=(()=>{let r=class r{constructor(e,t,o,l,a,m){this.authService=e,this.databaseService=t,this.docService=o,this.loggingService=l,this.commonDbService=a,this.realtimeAdapter=m,this.db=null,this.user=null,this.playersMap=new Map,this.eventsCountPerSecond=0,this.hold=!1,this.counter=0,this.loggingService.log("%c[WB] Creating CLASS: SyncVideoPlayerService","color: blue;");try{this.databaseService.getDb().pipe(k(_=>!!_),$(1)).subscribe(_=>{_&&(this.db=_,this.getUser())},_=>{this.loggingService.catch("Error in CommentService getDb subscription: ",_)}),setTimeout(()=>{this.eventsCountPerSecond=0},1e3)}catch(_){this.loggingService.catch("Error in SyncVideoPlayerService constructor: ",_)}}getUser(){try{this.loggingService.log("%c[WB] Calling FUNCTION: getUser","color: green;"),this.authService.getUser$().pipe(k(e=>!!e)).subscribe(e=>{this.user=e,this.getDocumentPaths()})}catch(e){this.loggingService.catch("Error in SyncVideoPlayerService getUser: ",e)}}getDocumentPaths(){try{this.loggingService.log("%c[WB] Calling FUNCTION: getDocumentPaths","color: green;"),this.docService.getDocumentPaths$().subscribe(e=>{this.documentPaths=e,this.documentPaths&&(this.subscribeToVideoPlayers(),this.getAllVideoTags())})}catch(e){this.loggingService.catch("Error in SyncVideoPlayerService getDocumentPaths: ",e)}}subscribeToVideoPlayers(){try{this.loggingService.log("%c[WB] Calling FUNCTION: subscribeToVideoPlayers","color: green;"),this.documentPaths?.syncVideoPlayer&&this.commonDbService.dbListener({feature:"syncVideoPlayer",properties:{documentId:this.documentPaths?.documentId,organizationId:this.documentPaths?.organizationId,skipFirestore:!0}}).pipe(G(e=>e?.data)).subscribe(e=>{Object.keys(e||{}).forEach(o=>{let l=e[o]||{},a=this.playersMap.get(o)?.playerElement;a||(a=this.getVideoTagByPlayerId(o)),a&&(this.playersMap.set(o,{playerElement:a,player:l}),this.updateLocalPlayerState(o,l))})})}catch(e){this.loggingService.catch("Error in SyncVideoPlayerService subscribeToVideoPlayers: ",e)}}getAllVideoTags(){try{this.loggingService.log("%c[WB] Calling FUNCTION: getAllVideoTags","color: green;"),Array.from(document.querySelectorAll(`video[${x.ATTRIBUTES.SYNC_VIDEO_PLAYER}]`)).forEach(t=>{let o=this.getPlayerId(t),l=new $e;l.playerId=o,l.src=t.src;let a=Array.from(t.querySelectorAll("source"));l.sources=a.map(m=>m?.src)?.filter(m=>!!m)||[],this.playersMap.set(o,{playerElement:t,player:l}),this.subscribeToPlayerEvents(o,t)})}catch(e){this.loggingService.catch("Error in SyncVideoPlayerService getAllVideoTags: ",e)}}subscribeToPlayerEvents(e,t){try{this.loggingService.log("%c[WB] Calling FUNCTION: subscribeToPlayerEvents","color: green;"),t.addEventListener("play",()=>{this.hold||this.updateVideoPlayerState(e,"play",{playing:!0,currentTime:t.currentTime})}),t.addEventListener("pause",()=>{this.hold||t.readyState===4&&this.updateVideoPlayerState(e,"pause",{playing:!1,currentTime:t.currentTime})}),t.addEventListener("ratechange",()=>{this.updateVideoPlayerState(e,"ratechange",{speed:t.playbackRate})}),t.addEventListener("seeked",()=>{if(t.currentTime<t.duration){let o=this.playersMap.get(e)?.player?.playerState||{};"currentTime"in o&&typeof o.currentTime=="number"&&Math.abs(t.currentTime-o.currentTime)>1&&this.updateVideoPlayerState(e,"seeked",{currentTime:t.currentTime})}}),t.addEventListener("timeupdate",()=>{if(!this.hold&&t.currentTime<t.duration){let o=this.playersMap.get(e)?.player?.playerState||{};Math.abs(t.currentTime-(o?.currentTime||0))>1&&this.updateVideoPlayerState(e,"timeupdate",{currentTime:t.currentTime})}}),t.addEventListener("volumechange",()=>{this.hold||this.updateVideoPlayerState(e,"volumechange",{volume:t.volume,muted:t.muted,currentTime:t.currentTime})})}catch(o){this.loggingService.catch("Error in SyncVideoPlayerService subscribeToPlayerEvents: ",o)}}updateVideoPlayerState(e,t,o){try{if(this.loggingService.log("%c[WB] Calling FUNCTION: updateVideoPlayerState","color: green;"),this.eventsCountPerSecond++,this.eventsCountPerSecond>=500&&(this.hold=!0),this.hold){this.loggingService.catch("Too many events in 5 seconds. Holding events.");return}if(e&&this.user&&this.documentPaths?.syncVideoPlayer){let l=this.realtimeAdapter.rtdbRef(this.db,`${this.documentPaths?.syncVideoPlayer}/${e}`),a={lastUpdated:this.timestamp,lastUpdatedBy:this.user,lastUpdatedEvent:t,playerState:j(j({},new He),o)};this.realtimeAdapter.rtdbRunTransaction("syncVideoPlayer",l,m=>{if(m)return a.playerId=m.playerId,a.src=m.src,a.sources=m.sources,a.playerState=j(j({},m.playerState),o),JSON.parse(JSON.stringify(a));a.playerId=e;let _=this.playersMap.get(e);if(_){a.src=_?.playerElement?.src;let X=Array.from(_?.playerElement?.querySelectorAll("source"));a.sources=X.map(U=>U?.src)?.filter(U=>!!U)||[]}return(o?.volume===void 0||o?.volume===null)&&(o.volume=100),JSON.parse(JSON.stringify(a))})}}catch(l){this.loggingService.catch("Error in SyncVideoPlayerService updateVideoPlayerState: ",l)}}updateLocalPlayerState(e,t){try{this.loggingService.log("%c[WB] Calling FUNCTION: updateLocalPlayerState","color: green;");let o=this.playersMap.get(e),l=o?.player?.playerState,a=o?.playerElement;if(!a)return;let m=l?.playing;m!==!a.paused&&(m?a.play():a.pause());let _=l?.currentTime||0;Math.abs(_-a.currentTime)>1&&(a.currentTime=_);let U=!!l?.muted;if(U!==a.muted&&(a.muted=U),!U){let ve=l?.volume||0;ve>=0&&ve!==a.volume&&(a.volume=ve)}let ee=l?.speed;ee==null&&(ee=1),ee!==a.playbackRate&&(a.playbackRate=ee)}catch{}}getPlayerId(e){try{let t="",o=e?.getAttribute("src");if(o)t=`${ye(o)}`;else{let l=e?.querySelectorAll("source");if(l&&l.length>0){let m=l[0]?.getAttribute("src");m&&(t=`${ye(m)}`)}}return t}catch(t){return this.loggingService.catch("Error in SyncVideoPlayerService getSyncVideoPlayId: ",t),""}}getVideoTagByPlayerId(e){try{return Array.from(document.querySelectorAll(`video[${x.ATTRIBUTES.SYNC_VIDEO_PLAYER}]`)).find(l=>this.getPlayerId(l)===e)||void 0}catch(t){this.loggingService.catch("Error in SyncVideoPlayerService getVideoTagByPlayerId: ",t);return}}get timestamp(){return this.commonDbService.getServerTimestamp()}};r.\u0275fac=function(t){return new(t||r)(H(Ze),H(Xe),H(Q),H(W),H(qe),H(Ge))},r.\u0275prov=Ee({token:r,factory:r.\u0275fac,providedIn:"root"});let i=r;return i})();var ot=i=>({$implicit:i});function st(i,r){i&1&&R(0)}function mt(i,r){i&1&&R(0)}function pt(i,r){if(i&1){let n=y();c(0,"div",3),h("click",function(){let t=C(n).$implicit,o=g(2);return v(o.onCommentClick(t==null?null:t.commentAnnotation))}),u(1,mt,1,0,"ng-container",4),d()}if(i&2){let n=r.$implicit;g(2);let e=P(6);s(),p("ngTemplateOutlet",e)("ngTemplateOutletContext",q(2,ot,n==null?null:n.commentAnnotation))}}function dt(i,r){if(i&1&&(M(0),u(1,pt,2,4,"div",6),S()),i&2){let n=g();s(),p("ngForOf",n.data==null?null:n.data.overlappingCommentAnnotations)}}function gt(i,r){i&1&&f(0,"div",10)}function _t(i,r){if(i&1&&(c(0,"div")(1,"div",11),T(2),d(),c(3,"div",12),T(4),d()()),i&2){let n=g().$implicit,e=g();s(2),Be(" ",e.formattedTimeMap[n==null||n.location==null?null:n.location.currentMediaPosition]," / ",e.formattedDuration),s(2),N(" ",(n==null||n.comments[0]==null||n.comments[0].commentText==null?null:n.comments[0].commentText.length)>100?(n==null||n.comments[0]==null||n.comments[0].commentText==null?null:n.comments[0].commentText.slice(0,100))+"...":n==null||n.comments[0]==null?null:n.comments[0].commentText," ")}}function ut(i,r){if(i&1&&(c(0,"div",7),f(1,"snippyly-user-avatar",8),u(2,gt,1,0,"div",9),d(),u(3,_t,5,3,"div",5)),i&2){let n=r.$implicit,e=g();s(),p("user",n==null?null:n.from)("size",24),s(),p("ngIf",e.unreadCommentsMap==null?null:e.unreadCommentsMap[n==null?null:n.annotationId]),s(),p("ngIf",n==null||n.comments==null?null:n.comments.length)}}var Oe=(()=>{let r=class r{constructor(){this.commentClick=new A,this.veltElement=!0}ngOnInit(){}onCommentClick(e){this.commentClick.emit(e)}};r.\u0275fac=function(t){return new(t||r)},r.\u0275cmp=I({type:r,selectors:[["app-player-timeline-comment-tooltip"]],hostVars:1,hostBindings:function(t,o){t&2&&w("data-velt-element",o.veltElement)},inputs:{data:"data",formattedTimeMap:"formattedTimeMap",formattedDuration:"formattedDuration",unreadCommentsMap:"unreadCommentsMap"},outputs:{commentClick:"commentClick"},standalone:!1,decls:7,vars:5,consts:[["commentTemplate",""],[1,"comment-tooltip-container"],[1,"comment-tooltip"],[1,"comment-tooltip__item",3,"click"],[4,"ngTemplateOutlet","ngTemplateOutletContext"],[4,"ngIf"],["class","comment-tooltip__item",3,"click",4,"ngFor","ngForOf"],[1,"comment-tooltip__item__user-avatar"],[3,"user","size"],["class","comment-tooltip__item__unread",4,"ngIf"],[1,"comment-tooltip__item__unread"],[1,"duration-text"],[1,"comment-text"]],template:function(t,o){if(t&1){let l=y();c(0,"div",1)(1,"div",2)(2,"div",3),h("click",function(){return C(l),v(o.onCommentClick(o.data==null?null:o.data.commentAnnotation))}),u(3,st,1,0,"ng-container",4),d(),u(4,dt,2,1,"ng-container",5),d()(),u(5,ut,4,4,"ng-template",null,0,b)}if(t&2){let l=P(6);s(3),p("ngTemplateOutlet",l)("ngTemplateOutletContext",q(3,ot,o.data==null?null:o.data.commentAnnotation)),s(),p("ngIf",o.data==null||o.data.overlappingCommentAnnotations==null?null:o.data.overlappingCommentAnnotations.length)}},dependencies:[D,B,J,K],styles:["html[_ngcontent-%COMP%]{--velt-base-rem-unit: 1}*[data-snippyly-element=true][_ngcontent-%COMP%], *[data-velt-element=true][_ngcontent-%COMP%]{font-family:var(--velt-default-font-family)}velt-wireframe[_ngcontent-%COMP%]{display:none!important}body.velt-pin-dragging[_ngcontent-%COMP%]   iframe[_ngcontent-%COMP%]{pointer-events:none!important}.comment-tooltip-container[_ngcontent-%COMP%]{padding-bottom:calc((.5rem + 0px) * var(--velt-base-rem-unit));transition:all .3s ease-in-out}.comment-tooltip-container[_ngcontent-%COMP%]   .comment-tooltip[_ngcontent-%COMP%]{display:flex;justify-content:center;flex-direction:column;border-radius:calc((1rem + 0px) * var(--velt-base-rem-unit));background:#3333;box-shadow:0 8px 4px #0000000d,0 1px 1px #ffffff4d inset,0 -1px 1px #ffffff1a inset;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden}.comment-tooltip-container[_ngcontent-%COMP%]   .comment-tooltip__item[_ngcontent-%COMP%]{display:flex;align-items:center;gap:calc((.75rem + 0px) * var(--velt-base-rem-unit));color:#fff;max-width:350px;padding:calc((.5rem + 0px) * var(--velt-base-rem-unit)) calc((1.5rem + 0px) * var(--velt-base-rem-unit));cursor:pointer}.comment-tooltip-container[_ngcontent-%COMP%]   .comment-tooltip__item[_ngcontent-%COMP%]   .duration-text[_ngcontent-%COMP%]{color:#fff9;font-size:10px;font-style:normal;font-weight:400;line-height:20px}.comment-tooltip-container[_ngcontent-%COMP%]   .comment-tooltip__item[_ngcontent-%COMP%]   .comment-text[_ngcontent-%COMP%]{color:var(--neutrals-13, #FFF);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.comment-tooltip-container[_ngcontent-%COMP%]   .comment-tooltip__item[_ngcontent-%COMP%]   snippyly-user-avatar[_ngcontent-%COMP%]{--legacy-velt-user-avatar-size: 24px;display:flex;border-radius:31.2px;border:1px solid #FFF;background:var(--primary-2, #A259FE)}.comment-tooltip-container[_ngcontent-%COMP%]   .comment-tooltip__item[_ngcontent-%COMP%]:hover{background:#0003}.comment-tooltip__item__user-avatar[_ngcontent-%COMP%]{position:relative}.comment-tooltip__item__user-avatar[_ngcontent-%COMP%]   .comment-tooltip__item__unread[_ngcontent-%COMP%]{position:absolute;top:-1px;right:-1px;width:7px;height:7px;background:#ff7162;border-radius:50%;border:1px solid #0F0F0F}"],changeDetection:0});let i=r;return i})();var rt=i=>({$implicit:i});function ft(i,r){i&1&&R(0)}function yt(i,r){i&1&&R(0)}function Pt(i,r){if(i&1&&(c(0,"div",6),u(1,yt,1,0,"ng-container",7),d()),i&2){let n=r.$implicit;g(2);let e=P(3);s(),p("ngTemplateOutlet",e)("ngTemplateOutletContext",q(2,rt,n==null?null:n.reactionAnnotation))}}function Tt(i,r){if(i&1&&(c(0,"div",5)(1,"div",6),u(2,ft,1,0,"ng-container",7),d(),u(3,Pt,2,4,"div",8),d()),i&2){let n=g(),e=P(3);s(2),p("ngTemplateOutlet",e)("ngTemplateOutletContext",q(3,rt,n.data==null?null:n.data.reactionAnnotation)),s(),p("ngForOf",n.data==null?null:n.data.overlappingReactionAnnotations)}}function bt(i,r){i&1&&(c(0,"span"),T(1,"(You)"),d())}function Ot(i,r){if(i&1&&(M(0),c(1,"span"),T(2),me(3,"translate"),d(),u(4,bt,2,0,"span",15),S()),i&2){let n=g().$implicit,e=g().user;s(2),z(pe(3,2,(n==null||n.from==null?null:n.from.name)||(n==null||n.from==null?null:n.from.email))),s(2),p("ngIf",(n==null||n.from==null?null:n.from.userSnippylyId)===(e==null?null:e.userSnippylyId))}}function Mt(i,r){i&1&&f(0,"velt-skeleton-loader-internal",16)}function St(i,r){if(i&1&&(c(0,"div",12),f(1,"snippyly-user-avatar",13),u(2,Ot,5,4,"ng-container",14)(3,Mt,1,0,"ng-template",null,2,b),d()),i&2){let n=r.$implicit,e=P(4);s(),p("size",24)("user",n==null?null:n.from),s(),p("ngIf",(n==null||n.from==null?null:n.from.name)||(n==null||n.from==null?null:n.from.email))("ngIfElse",e)}}function Vt(i,r){if(i&1&&(c(0,"div",10),u(1,St,5,4,"div",11),d()),i&2){let n=r.reactionAnnotation;s(),p("ngForOf",n==null?null:n.reactions)}}function xt(i,r){if(i&1){let n=y();c(0,"velt-reaction-pin",9),h("click",function(){let t=C(n).$implicit,o=g();return v(o.onReactionClick(t))}),u(1,Vt,2,1,"ng-template",null,1,b),d()}if(i&2){let n=r.$implicit,e=P(2);p("type","timeline")("width",50)("height",50)("tooltipTemplate",e)("annotationId",n==null?null:n.annotationId)}}var Me=(()=>{let r=class r{constructor(){this.reactionClick=new A,this.veltElement=!0}ngOnInit(){}onReactionClick(e){this.reactionClick.emit(e)}};r.\u0275fac=function(t){return new(t||r)},r.\u0275cmp=I({type:r,selectors:[["app-player-timeline-reaction-tooltip"]],hostVars:1,hostBindings:function(t,o){t&2&&w("data-velt-element",o.veltElement)},inputs:{data:"data"},outputs:{reactionClick:"reactionClick"},standalone:!1,decls:4,vars:1,consts:[["reactionPinTemplate",""],["tooltipTemplate",""],["loadingTemplateRef",""],[1,"reaction-tooltip-container"],["class","reaction-tooltip",4,"ngIf"],[1,"reaction-tooltip"],[1,"reaction-tooltip__item"],[4,"ngTemplateOutlet","ngTemplateOutletContext"],["class","reaction-tooltip__item",4,"ngFor","ngForOf"],[3,"click","type","width","height","tooltipTemplate","annotationId"],[1,"v-tooltip-container"],["class","v-tooltip-reaction-user",4,"ngFor","ngForOf"],[1,"v-tooltip-reaction-user"],[1,"s-tooltip-user-avatar",3,"size","user"],[4,"ngIf","ngIfElse"],[4,"ngIf"],["height","20px","width","64px","borderRadius","20px"]],template:function(t,o){t&1&&(c(0,"div",3),u(1,Tt,4,5,"div",4),d(),u(2,xt,3,5,"ng-template",null,0,b)),t&2&&(s(),p("ngIf",o.data==null||o.data.overlappingReactionAnnotations==null?null:o.data.overlappingReactionAnnotations.length))},dependencies:[D,B,J,K,Ce,ue],styles:["html[_ngcontent-%COMP%]{--velt-base-rem-unit: 1}*[data-snippyly-element=true][_ngcontent-%COMP%], *[data-velt-element=true][_ngcontent-%COMP%]{font-family:var(--velt-default-font-family)}velt-wireframe[_ngcontent-%COMP%]{display:none!important}body.velt-pin-dragging[_ngcontent-%COMP%]   iframe[_ngcontent-%COMP%]{pointer-events:none!important}.reaction-tooltip-container[_ngcontent-%COMP%]{padding-bottom:calc((.5rem + 0px) * var(--velt-base-rem-unit));transition:all .3s ease-in-out}.reaction-tooltip[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;gap:calc((.5rem + 0px) * var(--velt-base-rem-unit));background:#000;border:1px solid grey;border-radius:calc((.5rem + 0px) * var(--velt-base-rem-unit));padding:calc((.5rem + 0px) * var(--velt-base-rem-unit));border-radius:18px;background:#3333;box-shadow:0 8px 4px #0000000d,0 1px 1px #ffffff4d inset,0 -1px 1px #ffffff1a inset;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.reaction-tooltip[_ngcontent-%COMP%]   .reaction-tooltip__item[_ngcontent-%COMP%]{cursor:pointer}[_nghost-%COMP%]     .s-emoji-block_timeline .s-emoji-block__item__emoji svg, [_nghost-%COMP%]   .s-emoji-block_timeline[_ngcontent-%COMP%]   .s-emoji-block__item__emoji[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{width:20px!important;height:20px!important}  .v-tooltip-container{display:flex;flex-direction:column;gap:calc((.5rem + 0px) * var(--velt-base-rem-unit));padding:calc((.5rem + 0px) * var(--velt-base-rem-unit));color:var(--neutrals-13, #FFF);font-size:14px;font-style:normal;font-weight:400;line-height:20px;border-radius:calc((1.5rem + 0px) * var(--velt-base-rem-unit));background:#3333;box-shadow:0 8px 4px #0000000d,0 1px 1px #ffffff4d inset,0 -1px 1px #ffffff1a inset;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}  .v-tooltip-container .v-tooltip-reaction-user{display:flex;align-items:center;gap:calc((.5rem + 0px) * var(--velt-base-rem-unit));padding-right:2px}  .v-tooltip-container .v-tooltip-reaction-user snippyly-user-avatar{display:flex;border-radius:calc((2rem + 0px) * var(--velt-base-rem-unit));border:1px solid #FFF;background:var(--primary-2, #A259FE)}"],changeDetection:0});let i=r;return i})();function At(i,r){i&1&&R(0)}function It(i,r){if(i&1&&(c(0,"velt-shadow-dom-internal"),u(1,At,1,0,"ng-container",5),d()),i&2){g();let n=P(2);s(),p("ngTemplateOutlet",n)}}function wt(i,r){i&1&&f(0,"div",18)}function Rt(i,r){i&1&&f(0,"div",18)}function Ft(i,r){if(i&1){let n=y();c(0,"div",19)(1,"div",20),h("click",function(t){C(n);let o=g(3).$implicit;return g(2).onCommentAnnotationClick(o==null||o.overlappingCommentAnnotations[0]==null?null:o.overlappingCommentAnnotations[0].commentAnnotation),v(t.stopPropagation())}),T(2),u(3,Rt,1,0,"div",16),d()()}if(i&2){let n=g(3).$implicit;s(2),N(" +",n==null||n.overlappingCommentAnnotations==null?null:n.overlappingCommentAnnotations.length," "),s(),p("ngIf",n==null?null:n.isUnread)}}function Nt(i,r){if(i&1&&(c(0,"div",13)(1,"div",14),f(2,"snippyly-user-avatar",15),u(3,wt,1,0,"div",16),d()(),u(4,Ft,4,2,"ng-template",17)),i&2){let n=g(2).$implicit;F("background",(n==null||n.commentAnnotation==null||n.commentAnnotation.status==null?null:n.commentAnnotation.status.color)||null),s(2),p("user",n==null||n.commentAnnotation==null?null:n.commentAnnotation.from)("size",18),s(),p("ngIf",(n==null?null:n.isUnread)&&(n==null||n.overlappingCommentAnnotations==null?null:n.overlappingCommentAnnotations.length)===0),s(),p("ngIf",n==null||n.overlappingCommentAnnotations==null?null:n.overlappingCommentAnnotations.length)}}function Dt(i,r){if(i&1){let n=y();c(0,"app-player-timeline-comment-tooltip",21),h("commentClick",function(t){C(n);let o=g(4);return v(o.onCommentAnnotationClick(t))}),d()}if(i&2){let n=g(2).$implicit,e=g(2);p("data",n)("formattedTimeMap",e.formattedTimeMap)("formattedDuration",e.formattedDuration)("unreadCommentsMap",e.unreadCommentsMap)}}function Bt(i,r){if(i&1){let n=y();c(0,"div",10)(1,"div",11),h("click",function(){C(n);let t=g().$implicit,o=g(2);return v(o.onCommentAnnotationClick(t==null?null:t.commentAnnotation))}),c(2,"app-overlay-tooltip",12),u(3,Nt,5,6,"ng-template",null,1,b)(5,Dt,1,4,"ng-template",null,2,b),d()()()}if(i&2){let n=g().$implicit,e=g(2);F("--legacy-velt-player-position",((n==null?null:n.position)||0)+"%")("--legacy-velt-player-offset-left",(e.frameWidth||0)/2+"px"),s(2),p("positions",e.commentTooltipOverlayPositions)}}function Lt(i,r){if(i&1&&(M(0),u(1,Bt,7,5,"div",9),S()),i&2){let n=r.$implicit;s(),p("ngIf",(n==null?null:n.position)!==null)}}function Wt(i,r){i&1&&(c(0,"span"),T(1,"(You)"),d())}function Ut(i,r){if(i&1&&(M(0),c(1,"span"),T(2),me(3,"translate"),d(),u(4,Wt,2,0,"span",28),S()),i&2){let n=g().$implicit,e=g().user;s(2),z(pe(3,2,(n==null||n.from==null?null:n.from.name)||(n==null||n.from==null?null:n.from.email))),s(2),p("ngIf",(n==null||n.from==null?null:n.from.userSnippylyId)===(e==null?null:e.userSnippylyId))}}function jt(i,r){i&1&&f(0,"velt-skeleton-loader-internal",29)}function $t(i,r){if(i&1&&(c(0,"div",26),f(1,"snippyly-user-avatar",27),u(2,Ut,5,4,"ng-container",4)(3,jt,1,0,"ng-template",null,3,b),d()),i&2){let n=r.$implicit,e=P(4);s(),p("size",24)("user",n==null?null:n.from),s(),p("ngIf",(n==null||n.from==null?null:n.from.name)||(n==null||n.from==null?null:n.from.email))("ngIfElse",e)}}function Ht(i,r){if(i&1&&(c(0,"div",24),u(1,$t,5,4,"div",25),d()),i&2){let n=r.reactionAnnotation;s(),p("ngForOf",n==null?null:n.reactions)}}function zt(i,r){if(i&1){let n=y();c(0,"div",20),h("click",function(t){C(n);let o=g(3).$implicit;return g(2).onReactionAnnotationClick(o==null||o.overlappingReactionAnnotations[0]==null?null:o.overlappingReactionAnnotations[0].reactionAnnotation),v(t.stopPropagation())}),T(1),d()}if(i&2){let n=g(3).$implicit;s(),N(" +",n==null||n.overlappingReactionAnnotations==null?null:n.overlappingReactionAnnotations.length," ")}}function Yt(i,r){if(i&1){let n=y();c(0,"div",22)(1,"velt-reaction-pin",23),h("click",function(){C(n);let t=g(2).$implicit,o=g(2);return v(o.onReactionAnnotationClick(t==null?null:t.reactionAnnotation))}),u(2,Ht,2,1,"ng-template",null,2,b),d()(),u(4,zt,2,1,"ng-template",17)}if(i&2){let n=P(3),e=g(2).$implicit;s(),p("type","timeline")("disableTooltip",!!(!(e==null||e.overlappingReactionAnnotations==null)&&e.overlappingReactionAnnotations.length))("tooltipTemplate",n)("annotationId",e==null||e.reactionAnnotation==null?null:e.reactionAnnotation.annotationId),s(3),p("ngIf",e==null||e.overlappingReactionAnnotations==null?null:e.overlappingReactionAnnotations.length)}}function Zt(i,r){if(i&1){let n=y();c(0,"app-player-timeline-reaction-tooltip",30),h("reactionClick",function(t){C(n);let o=g(4);return v(o.onReactionAnnotationClick(t))}),d()}if(i&2){let n=g(2).$implicit;p("data",n)}}function Xt(i,r){if(i&1){let n=y();c(0,"div",10)(1,"div",11),h("click",function(){C(n);let t=g().$implicit,o=g(2);return v(o.onReactionAnnotationClick(t==null?null:t.reactionAnnotation))}),c(2,"app-overlay-tooltip",12),u(3,Yt,5,5,"ng-template",null,1,b)(5,Zt,1,1,"ng-template",null,2,b),d()()()}if(i&2){let n=g().$implicit,e=g(2);F("--legacy-velt-player-position",((n==null?null:n.position)||0)+"%")("--legacy-velt-player-offset-left",(e.frameWidth||0)/2+"px"),s(2),p("positions",e.commentTooltipOverlayPositions)}}function Gt(i,r){if(i&1&&(M(0),u(1,Xt,7,5,"div",9),S()),i&2){let n=r.$implicit;s(),p("ngIf",(n==null?null:n.position)!==null)}}function qt(i,r){if(i&1&&(c(0,"div",6)(1,"div",7),u(2,Lt,2,1,"ng-container",8)(3,Gt,2,1,"ng-container",8),d()()),i&2){let n=g();s(2),p("ngForOf",n.commentAnnotationsWithPosition)("ngForTrackBy",n.trackByFn),s(),p("ngForOf",n.reactionAnnotationsWithPosition)("ngForTrackBy",n.trackByFn)}}var re=(()=>{let r=class r{set _shadowDom(e){try{let t=e;typeof e=="string"&&(t=JSON.parse(e)),this.shadowDom=t}catch{}}get totalMediaLength(){return this._totalMediaLength}set totalMediaLength(e){this._totalMediaLength=e,e&&(this.formattedDuration=Z(e)),this.calculateFrameWidth(),this.calculateAllCommentAnnotationPosition()}set totalMediaLengthInput(e){typeof e=="string"&&(e=parseFloat(e)),e>=0&&(this.lastTotalMediaLengthInput=e,this.commentService?.setTotalMediaLength(e))}set _version(e){try{let t=e;typeof e=="string"&&(t=JSON.parse(e)),t&&typeof t=="object"?(this.version={id:t.id,name:t.name},this.filterCommentAnnotations(),this.filterReactionAnnotations()):this.version=void 0}catch{}}get offset(){return this._offset}set offset(e){this._offset=e,this.calculateFrameWidth(),this.calculateAllCommentAnnotationPosition()}set _offsetInput(e){try{typeof e=="string"&&(e=parseInt(e,10)),this.offset=e}catch{}}constructor(e,t,o,l,a,m){this.docService=e,this.domService=t,this.serviceBook=o,this.loggingService=l,this.cd=a,this.elementRef=m,this.shadowDom=!0,this._totalMediaLength=0,this._offset=0,this.commentAnnotations=[],this.reactionAnnotations=[],this.commentClickEmitter=new A,this.reactionClickEmitter=new A,this.annotationsPositionChangeEmitter=new A,this.allCommentAnnotations=[],this.allReactionAnnotations=[],this.selectedAnnotationsMap={},this.commentAnnotationsWithPosition=[],this.reactionAnnotationsWithPosition=[],this.formattedTimeMap={},this.frameWidth=0,this.commentTooltipOverlayPositions=[{originX:"center",originY:"top",overlayX:"center",overlayY:"bottom"},{originX:"start",originY:"top",overlayX:"center",overlayY:"bottom"},{originX:"end",originY:"top",overlayX:"center",overlayY:"bottom"},{originX:"center",originY:"top",overlayX:"end",overlayY:"bottom"},{originX:"center",originY:"top",overlayX:"start",overlayY:"bottom"},{originX:"end",originY:"top",overlayX:"start",overlayY:"bottom"},{originX:"start",originY:"top",overlayX:"end",overlayY:"bottom"}],this.unreadCommentsMap=null,this.resolvedCommentsOnDom=!1,this.veltElement=!0,this.destroyRef=Ae(Ie),this.commentService=null,this.reactionService=null;try{this.loggingService.log("%c[WB] Creating CLASS: CommentPlayerTimelineComponent","color: blue;"),this.serviceBook.observe(L).subscribe(_=>{let X=this.commentService===null;this.commentService=_,X&&_&&(this.lastTotalMediaLengthInput!=null&&_.setTotalMediaLength(this.lastTotalMediaLengthInput),this.documentPaths&&this.getAllCommentsOnCurrentDocument())}),this.serviceBook.observe(ge).subscribe(_=>{let X=this.reactionService===null;this.reactionService=_,X&&_&&this.documentPaths&&this.getAllReactionsOnCurrentDocument()}),this.docService.getDocumentPaths$().pipe(Y(this.destroyRef)).subscribe(_=>{this.documentPaths=_,this.getAllCommentsOnCurrentDocument(),this.getAllReactionsOnCurrentDocument()},_=>{this.loggingService.catch("Error in CommentPlayerTimelineComponent getDocumentPaths$ subscription: ",_)}),this.domService.getSelectedAnnotationsMap$().pipe(Y(this.destroyRef)).subscribe(_=>{this.selectedAnnotationsMap=_},_=>{this.loggingService.catch("Error in CommentPlayerTimelineComponent getSelectedAnnotationsMap$ subscription: ",_)}),this.serviceBook.observe(L).pipe(Y(this.destroyRef),k(Boolean),E(_=>_.getTotalMediaLength$())).subscribe(_=>{this.totalMediaLength=_},_=>{this.loggingService.catch("Error in CommentPlayerTimelineComponent getTotalMediaLength$ subscription: ",_)}),this.serviceBook.observe(L).pipe(Y(this.destroyRef),k(Boolean),E(_=>_.getResolvedCommentsOnDom$())).subscribe(_=>{this.resolvedCommentsOnDom!==_&&(this.resolvedCommentsOnDom=_,this.filterCommentAnnotations())},_=>{this.loggingService.catch("Error in CommentPlayerTimelineComponent getResolvedCommentsOnDom$ subscription: ",_)})}catch(_){this.loggingService.catch("Error in CommentPlayerTimelineComponent constructor: ",_)}}ngOnInit(){}ngOnChanges(e){try{e?.version&&this.filterCommentAnnotations(),e?.videoPlayerId&&(this.filterCommentAnnotations(),this.filterReactionAnnotations())}catch(t){this.loggingService.catch("Error in CommentPlayerTimelineComponent ngOnChanges: ",t)}}ngAfterViewInit(){try{this.calculateFrameWidth()}catch(e){this.loggingService.catch("Error in CommentPlayerTimelineComponent ngAfterViewInit: ",e)}}trackByFn(e,t){return t?.commentAnnotation?.annotationId||e}calculateFrameWidth(){try{if(this.source==="video")this.frameWidth=0;else{let e=0;if(this.elementRef?.nativeElement&&(e=this.elementRef.nativeElement?.offsetWidth),e&&this.totalMediaLength){let t=e/this.totalMediaLength;this.frameWidth=t,this.cd.markForCheck()}}}catch(e){this.loggingService.catch("Error in CommentPlayerTimelineComponent calculateOffsetLeft: ",e)}}getAllCommentsOnCurrentDocument(){try{if(this.loggingService.log("%c[WB] Calling FUNCTION: getAllCommentsOnCurrentDocument","color: green;"),this.getAllCommentAnnotationsSubscription&&this.getAllCommentAnnotationsSubscription.unsubscribe(),!this.commentService)return;this.getAllCommentAnnotationsSubscription=this.commentService.getAllCommentAnnotations({customClientDocumentId:this.documentPaths?.clientDocumentId,excludeDomChanges:!0,skipPositionCalculation:!0,analytics:{enabled:!0,properties:{source:"internal",sourceId:"commentPlayerTimeline"}}}).pipe(Y(this.destroyRef),k(e=>!!e),E(e=>this.domService.getSelectedAnnotationsMap$().pipe(G(t=>({filteredAnnotations:e,selectedAnnotationsMap:t||{}})))),E(e=>(this.commentService?.getUnreadCommentsMap$()??xe({})).pipe(G(t=>(this.unreadCommentsMap=t,Ve(j({},e),{unreadCommentsMap:t})))))).subscribe(e=>{this.loggingService.log(e),this.allCommentAnnotations=e?.filteredAnnotations?.slice()||[],this.filterCommentAnnotations()},e=>{this.loggingService.catch("Error in CommentPlayerTimelineComponent getAllCommentAnnotations subscription: ",e)})}catch(e){this.loggingService.catch("Error in CommentPlayerTimelineComponent getAllCommentsOnCurrentDocument: ",e)}}filterCommentAnnotations(){try{this.commentAnnotations=[],this.commentAnnotations=this.allCommentAnnotations.filter(e=>this.version?.id===e?.location?.version?.id?!this.videoPlayerId||e?.location?.videoPlayerId===this.videoPlayerId||e?.targetElementId===this.videoPlayerId:!1),this.commentAnnotations=this.commentAnnotations.filter(e=>!(e.status!==void 0&&e.status.type==="terminal"&&!this.selectedAnnotationsMap[e.annotationId]&&!this.resolvedCommentsOnDom)),this.calculateAllCommentAnnotationPosition(),this.cd.markForCheck()}catch(e){this.loggingService.catch("Error in CommentPlayerTimelineComponent filterCommentAnnotations: ",e)}}calculateAllCommentAnnotationPosition(){try{this.loggingService.log("%c[WB] Calling FUNCTION: calculateAllCommentAnnotationPosition","color: green;"),this.commentAnnotationsWithPosition=[],this.commentAnnotations.length&&this.commentAnnotations.forEach(e=>{let t=this.calculateCommentAnnotationPosition(e),o=this.commentAnnotationsWithPosition.find(a=>a?.position&&t&&a?.position+2>t&&a?.position-2<t?!0:null),l=o?.isUnread??!1;if(this.unreadCommentsMap?.[e.annotationId]&&(l=!0),o)o.isUnread=l,o.overlappingCommentAnnotations?o.overlappingCommentAnnotations.push({commentAnnotation:e,position:t}):o.overlappingCommentAnnotations=[{commentAnnotation:e,position:t}];else{let a=!1;this.unreadCommentsMap?.[e.annotationId]&&(a=!0),this.commentAnnotationsWithPosition.push({commentAnnotation:e,position:t,overlappingCommentAnnotations:[],isUnread:a})}}),this.annotationsPositionChangeEmitter.emit()}catch(e){this.loggingService.catch("Error in CommentPlayerTimelineComponent calculateAllCommentAnnotationPosition: ",e)}}calculateCommentAnnotationPosition(e){try{this.loggingService.log("%c[WB] Calling FUNCTION: calculateCommentAnnotationPosition","color: green;");let t=e?.location?.currentMediaPosition-this.offset;if(this.formattedTimeMap[t]||(this.formattedTimeMap[t]=Z(t)),t>=0&&this.totalMediaLength>0){let o=t/this.totalMediaLength*100;if(o>=0&&o<=100)return o}return null}catch{return null}}onCommentAnnotationClick(e){try{this.loggingService.log("%c[WB] Calling FUNCTION: onCommentAnnotationClick","color: green;"),this.domService.toggleAnnotationSelection(e),this.emitOnCommentClick(e)}catch(t){this.loggingService.catch("Error in CommentPlayerTimelineComponent onCommentAnnotationClick: ",t)}}emitOnCommentClick(e){try{this.loggingService.log("%c[WB] Calling FUNCTION: emitOnCommentClick","color: green;");let t=this.documentPaths?.clientDocumentId,o=e?.location;o||(o=e?.documentParams);let l={};e.context&&(l=e.context),this.commentClickEmitter.emit({documentId:t,location:o,targetElementId:e?.targetElementId,context:l,annotation:e})}catch(t){this.loggingService.catch("Error in CommentPlayerTimelineComponent emitOnCommentClick: ",t)}}getAllReactionsOnCurrentDocument(){try{if(this.loggingService.log("%c[WB] Calling FUNCTION: getAllReactionsOnCurrentDocument","color: green;"),this.getAllReactionAnnotationsSubscription&&this.getAllReactionAnnotationsSubscription.unsubscribe(),!this.reactionService)return;this.getAllReactionAnnotationsSubscription=this.reactionService.getAllReactionAnnotations(this.documentPaths?.clientDocumentId,void 0,!0,void 0,!0).pipe(Y(this.destroyRef),k(e=>!!e),G(e=>e?.filter(t=>!t?.commentAnnotationId))).subscribe(e=>{this.loggingService.log(e),this.allReactionAnnotations=e?.slice()||[],this.filterReactionAnnotations()},e=>{this.loggingService.catch("Error in CommentPlayerTimelineComponent getAllReactionsOnCurrentDocument subscription: ",e)})}catch(e){this.loggingService.catch("Error in CommentPlayerTimelineComponent getAllReactionsOnCurrentDocument: ",e)}}filterReactionAnnotations(){try{this.reactionAnnotations=[],this.reactionAnnotations=this.allReactionAnnotations.filter(e=>this.version?.id===e?.location?.version?.id?!this.videoPlayerId||e?.location?.videoPlayerId===this.videoPlayerId:!1),this.calculateAllReactionAnnotationPosition(),this.cd.markForCheck()}catch(e){this.loggingService.catch("Error in CommentPlayerTimelineComponent filterReactionAnnotations: ",e)}}calculateAllReactionAnnotationPosition(){try{this.loggingService.log("%c[WB] Calling FUNCTION: calculateAllReactionAnnotationPosition","color: green;"),this.reactionAnnotationsWithPosition=[],this.reactionAnnotations.length&&this.reactionAnnotations.forEach(e=>{let t=this.calculateReactionAnnotationPosition(e),o=this.reactionAnnotationsWithPosition.find(l=>l?.position&&t&&l?.position+2>t&&l?.position-2<t?!0:null);o?o.overlappingReactionAnnotations?o.overlappingReactionAnnotations.push({reactionAnnotation:e,position:t}):o.overlappingReactionAnnotations=[{reactionAnnotation:e,position:t}]:this.reactionAnnotationsWithPosition.push({reactionAnnotation:e,position:t,overlappingReactionAnnotations:[]})}),this.annotationsPositionChangeEmitter.emit()}catch(e){this.loggingService.catch("Error in CommentPlayerTimelineComponent calculateAllReactionAnnotationPosition: ",e)}}calculateReactionAnnotationPosition(e){try{this.loggingService.log("%c[WB] Calling FUNCTION: calculateReactionAnnotationPosition","color: green;");let t=e?.location?.currentMediaPosition;return t>=0&&this.totalMediaLength>0?t/this.totalMediaLength*100:null}catch{return null}}onReactionAnnotationClick(e){try{this.loggingService.log("%c[WB] Calling FUNCTION: onReactionAnnotationClick","color: green;"),this.source!=="video"&&this.reactionService?.addOrUpdateReaction(e.icon,[e.annotationId],location),this.emitOnReactionClick(e)}catch(t){this.loggingService.catch("Error in CommentPlayerTimelineComponent onReactionAnnotationClick: ",t)}}emitOnReactionClick(e){try{this.loggingService.log("%c[WB] Calling FUNCTION: emitOnReactionClick","color: green;");let t=this.documentPaths?.clientDocumentId,o=e?.location;this.reactionClickEmitter.emit({documentId:t,location:o,targetElementId:e?.targetElementId,annotation:e})}catch(t){this.loggingService.catch("Error in CommentPlayerTimelineComponent emitOnReactionClick: ",t)}}ngOnDestroy(){this.loggingService.log("%c[WB] Calling FUNCTION: ngOnDestroy","color: green;");try{this.getAllCommentAnnotationsSubscription&&(this.getAllCommentAnnotationsSubscription.unsubscribe(),this.getAllCommentAnnotationsSubscription=void 0),this.getAllReactionAnnotationsSubscription&&(this.getAllReactionAnnotationsSubscription.unsubscribe(),this.getAllReactionAnnotationsSubscription=void 0)}catch(e){this.loggingService.catch("Error in CommentPlayerTimelineComponent ondestroy: ",e)}}};r.\u0275fac=function(t){return new(t||r)(O(Q),O(Ye),O(_e),O(W),O(de),O(Re))},r.\u0275cmp=I({type:r,selectors:[["velt-comment-player-timeline-internal"]],hostVars:1,hostBindings:function(t,o){t&2&&w("data-velt-element",o.veltElement)},inputs:{_shadowDom:[0,"shadowDom","_shadowDom"],totalMediaLengthInput:[0,"totalMediaLength","totalMediaLengthInput"],_version:[0,"version","_version"],_offsetInput:[0,"offset","_offsetInput"],commentAnnotations:"commentAnnotations",reactionAnnotations:"reactionAnnotations",videoPlayerId:"videoPlayerId",source:"source"},outputs:{commentClickEmitter:"onCommentClick",reactionClickEmitter:"onReactionClick",annotationsPositionChangeEmitter:"annotationsPositionChange"},standalone:!1,features:[we],decls:3,vars:2,consts:[["videoContainerRef",""],["triggerTemplate",""],["tooltipTemplate",""],["loadingTemplateRef",""],[4,"ngIf","ngIfElse"],[4,"ngTemplateOutlet"],[1,"comment-player-timeline-container"],[1,"comment-player-timeline"],[4,"ngFor","ngForOf","ngForTrackBy"],["class","comment-player-timeline__item",3,"--legacy-velt-player-position","--legacy-velt-player-offset-left",4,"ngIf"],[1,"comment-player-timeline__item"],[3,"click"],[3,"positions"],[1,"video-comment-user-profile-container"],[1,"video-comment-user-profile-container_wraper"],[3,"user","size"],["class","video-comment-user-profile-container__unread",4,"ngIf"],[3,"ngIf"],[1,"video-comment-user-profile-container__unread"],[1,"video-comment-user-profile-overlapping-comments_wraper"],[1,"comment-player-timeline__item__overlapping-comments__count",3,"click"],[3,"commentClick","data","formattedTimeMap","formattedDuration","unreadCommentsMap"],[1,"video-comment-user-profile-container","video-reaction-container"],[3,"click","type","disableTooltip","tooltipTemplate","annotationId"],[1,"v-tooltip-container"],["class","v-tooltip-reaction-user",4,"ngFor","ngForOf"],[1,"v-tooltip-reaction-user"],[1,"s-tooltip-user-avatar",3,"size","user"],[4,"ngIf"],["height","20px","width","64px","borderRadius","20px"],[3,"reactionClick","data"]],template:function(t,o){if(t&1&&u(0,It,2,1,"velt-shadow-dom-internal",4)(1,qt,4,4,"ng-template",null,0,b),t&2){let l=P(2);p("ngIf",o.shadowDom)("ngIfElse",l)}},dependencies:[D,B,J,Je,Qe,K,Ce,Oe,Me,ue],styles:["html[_ngcontent-%COMP%]{--velt-base-rem-unit: 1}*[data-snippyly-element=true][_ngcontent-%COMP%], *[data-velt-element=true][_ngcontent-%COMP%]{font-family:var(--velt-default-font-family)}velt-wireframe[_ngcontent-%COMP%]{display:none!important}body.velt-pin-dragging[_ngcontent-%COMP%]   iframe[_ngcontent-%COMP%]{pointer-events:none!important}.comment-player-timeline-container[_ngcontent-%COMP%]{width:100%}.comment-player-timeline-container[_ngcontent-%COMP%]   .comment-player-timeline[_ngcontent-%COMP%]{position:relative;width:100%;height:1px}.comment-player-timeline-container[_ngcontent-%COMP%]   .comment-player-timeline[_ngcontent-%COMP%]   .comment-player-timeline__item[_ngcontent-%COMP%]{position:absolute;bottom:100%;left:calc(var(--legacy-velt-player-position, 0%) - var(--legacy-velt-player-offset-left, 0px));transform:translate(-50%)}.comment-player-timeline-container[_ngcontent-%COMP%]   .comment-player-timeline[_ngcontent-%COMP%]   .comment-player-timeline__item[_ngcontent-%COMP%]   .video-comment-user-profile-container[_ngcontent-%COMP%]{padding:2px;background:#fff;border-radius:100%;cursor:pointer;position:relative}.comment-player-timeline-container[_ngcontent-%COMP%]   .comment-player-timeline[_ngcontent-%COMP%]   .comment-player-timeline__item[_ngcontent-%COMP%]   .video-comment-user-profile-container[_ngcontent-%COMP%]   snippyly-user-avatar[_ngcontent-%COMP%]{--legacy-velt-user-avatar-size: 18px;display:flex}.comment-player-timeline-container[_ngcontent-%COMP%]   .comment-player-timeline[_ngcontent-%COMP%]   .comment-player-timeline__item[_ngcontent-%COMP%]   .video-comment-user-profile-container.video-reaction-container[_ngcontent-%COMP%]{background-color:#141416;border:1px solid #625df5}.comment-player-timeline-container[_ngcontent-%COMP%]   .comment-player-timeline[_ngcontent-%COMP%]   .comment-player-timeline__item[_ngcontent-%COMP%]   .comment-player-timeline__item__overlapping-comments__count[_ngcontent-%COMP%]{width:18px;height:18px;background:#65dab5;font-size:calc((.5rem + 0px) * var(--velt-base-rem-unit));color:#fff;border-radius:100%;border:2px solid #57BEA3;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}.comment-player-timeline-container[_ngcontent-%COMP%]   .comment-player-timeline[_ngcontent-%COMP%]   .comment-player-timeline__item[_ngcontent-%COMP%]:hover{z-index:1}.comment-player-timeline-container[_ngcontent-%COMP%]   .comment-player-timeline[_ngcontent-%COMP%]   .comment-player-timeline__item[_ngcontent-%COMP%]:hover   .comment-tooltip-container[_ngcontent-%COMP%]{opacity:1;visibility:visible;display:flex}[_nghost-%COMP%]     .s-emoji-block_timeline .s-emoji-block__item__emoji svg, [_nghost-%COMP%]   .s-emoji-block_timeline[_ngcontent-%COMP%]   .s-emoji-block__item__emoji[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{width:20px!important;height:20px!important}  .v-tooltip-container{display:flex;flex-direction:column;gap:calc((.5rem + 0px) * var(--velt-base-rem-unit));padding:calc((.5rem + 0px) * var(--velt-base-rem-unit));color:var(--neutrals-13, #FFF);font-size:14px;font-style:normal;font-weight:400;line-height:20px;border-radius:calc((1.5rem + 0px) * var(--velt-base-rem-unit));background:#3333;box-shadow:0 8px 4px #0000000d,0 1px 1px #ffffff4d inset,0 -1px 1px #ffffff1a inset;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}  .v-tooltip-container .v-tooltip-reaction-user{display:flex;align-items:center;gap:calc((.5rem + 0px) * var(--velt-base-rem-unit));padding-right:2px}  .v-tooltip-container .v-tooltip-reaction-user snippyly-user-avatar{display:flex;border-radius:calc((2rem + 0px) * var(--velt-base-rem-unit));border:1px solid #FFF;background:var(--primary-2, #A259FE)}.video-comment-user-profile-container_wraper[_ngcontent-%COMP%]{position:relative}.video-comment-user-profile-overlapping-comments_wraper[_ngcontent-%COMP%]{position:absolute;top:0;left:calc((.5rem + 0px) * var(--velt-base-rem-unit))}.video-comment-user-profile-container__unread[_ngcontent-%COMP%]{position:absolute;top:-2px;right:-2px;width:8px;height:8px;background:#ff7162;border-radius:50%}"],changeDetection:0});let i=r;return i})();var Qt=["videoRef"],Kt=["progressBarRef"],en=["ghostProgressBarRef"];function tn(i,r){if(i&1&&(c(0,"div",46),T(1),d()),i&2){let n=g();s(),N(" ",n.hoveredTimeFormatted)}}function nn(i,r){if(i&1&&(M(0),f(1,"div",47),S()),i&2){let n=r.$implicit;s(),F("background",(n==null||n.commentAnnotation==null||n.commentAnnotation.status==null?null:n.commentAnnotation.status.color)||null)("left",n==null?null:n.position,"%")}}function on(i,r){if(i&1&&(M(0),f(1,"div",48),S()),i&2){let n=r.$implicit;s(),F("left",n==null?null:n.position,"%")}}function rn(i,r){if(i&1){let n=y();c(0,"button",49),h("click",function(){C(n);let t=g();return v(t.playVideo())}),V(),c(1,"svg",27),f(2,"path",50),d()()}}function ln(i,r){if(i&1){let n=y();c(0,"button",49),h("click",function(){C(n);let t=g();return v(t.pauseVideo())}),V(),c(1,"svg",27),f(2,"path",51)(3,"path",52),d()()}}function an(i,r){if(i&1){let n=y();c(0,"velt-comment-tool",53),h("enableAddCommentMode",function(){C(n);let t=g();return v(t.onEnableAddCommentMode())}),c(1,"button",26),V(),c(2,"svg",27)(3,"mask",54),f(4,"path",55),d(),f(5,"path",56),d()()()}if(i&2){let n=g();s(),ne("active",n.addCommentMode)}}function cn(i,r){if(i&1){let n=y();c(0,"button",49),h("click",function(){C(n);let t=g();return v(t.toggleMuteVideo())}),V(),c(1,"svg",27),f(2,"path",57)(3,"path",58),d()()}}function sn(i,r){if(i&1){let n=y();c(0,"button",49),h("click",function(){C(n);let t=g();return v(t.toggleMuteVideo())}),V(),c(1,"svg",27),f(2,"path",59),d()()}}function mn(i,r){if(i&1){let n=y();c(0,"div",60),h("click",function(){let t=C(n).$implicit,o=g();return v(o.changeVideoSpeed(t))}),T(1),d()}if(i&2){let n=r.$implicit;g();let e=P(2);ne("selected",(e==null?null:e.playbackRate)===n)("selected",n===(e==null?null:e.playbackRate)),s(),N(" ",n,"x ")}}function pn(i,r){if(i&1){let n=y();c(0,"button",49),h("click",function(){C(n);let t=g();return v(t.toggleFullScreen())}),V(),c(1,"svg",61),f(2,"path",62)(3,"path",63)(4,"path",64)(5,"path",65),d()()}}function dn(i,r){if(i&1){let n=y();c(0,"button",49),h("click",function(){C(n);let t=g();return v(t.toggleFullScreen())}),V(),c(1,"svg",61),f(2,"path",66)(3,"path",67)(4,"path",68)(5,"path",69),d()()}}var Se=(()=>{let r=class r{set _shadowDom(e){try{let t=e;typeof e=="string"&&(t=JSON.parse(e)),this.shadowDom=t}catch{}}set _version(e){try{let t=e;typeof e=="string"&&(t=JSON.parse(e)),t&&typeof t=="object"?this.version={id:t.id,name:t.name}:this.version=void 0}catch{}}set isDarkMode(e){this._darkAttribute=e,this.checkDarkMode()}set commentTool(e){try{let t=e;typeof e=="string"&&(t=JSON.parse(e)),t?this.showCommentTool=!0:this.showCommentTool=!1}catch{}}constructor(e,t,o,l,a){this.serviceBook=e,this.docService=t,this.loggingService=o,this.syncVideoPlayerService=l,this.cd=a,this.shadowDom=!0,this._darkAttribute="",this.darkMode=!1,this.showCommentTool=!0,this.currentTime=0,this.duration=0,this.currentTimeFormatted="00:00",this.durationFormatted="00:00",this.hoveredTimeFormatted="",this.controlPanelVisible=!1,this.HIDE_CONTROL_PANEL_DURATION=1e4,this.VIDEO_FORWARD_DURATION=5,this.VIDEO_BACKWARD_DURATION=5,this.VIDEO_SPEED_OPTIONS=[.25,.5,1,1.25,1.5,2],this.fullScreen=!1,this.addCommentMode=!1,this.subscriptions=[],this.commentService=null,this.reactionService=null,this.loggingService.log("%c[WB] Creating CLASS: VeltVideoPlayerComponent","color: blue;");try{this.checkDarkMode(),this.subscriptions.push(this.serviceBook.observe(L).pipe(E(m=>(this.commentService=m,m&&m.setCommentContainerDarkMode(this.darkMode),m?m.addCommentModeChange():le))).subscribe(m=>{this.addCommentMode=m,m?this.onEnableAddCommentMode():this.onDisableAddCommentMode()})),this.subscriptions.push(this.serviceBook.observe(L).pipe(E(m=>m?m.onCommentAdd$():le)).subscribe(m=>{if(m){this.pauseVideo();let _=this.getLocationOnCurrentTime();this.docService.setLocation({location:_})}})),this.subscriptions.push(this.serviceBook.observe(ge).subscribe(m=>{this.reactionService=m}))}catch(m){this.loggingService.catch("Error in VeltVideoPlayerComponent constructor: ",m)}}ngAfterViewInit(){try{this.addVeltCommentsTag(),this.videoRef?.nativeElement&&(this.playerId=Te(this.videoRef.nativeElement),this.subscriptions.push(te(this.videoRef.nativeElement,"play").subscribe(e=>{let t=this.docService.getLocation();t&&t.location?.videoPlayerId===this.playerId&&this.docService.removeLocations({})})),this.subscriptions.push(te(this.videoRef.nativeElement,"timeupdate").subscribe(e=>{this.currentTime=this.videoRef?.nativeElement?.currentTime||0,this.currentTimeFormatted=Z(this.currentTime),this.cd.markForCheck()})),this.subscriptions.push(te(this.videoRef.nativeElement,"loadedmetadata").subscribe(e=>{this.duration=this.videoRef?.nativeElement?.duration||0,this.durationFormatted=Z(this.duration),this.playerId=Te(this.videoRef?.nativeElement)}))),this.subscriptions.push(this.serviceBook.observe(L).pipe(E(e=>e?e.getSidebarCommentClick$():le)).subscribe(e=>{let t=e.annotation;t?.location?.videoPlayerId===this.playerId&&this.onCommentAnnotationClick(t)}))}catch(e){this.loggingService.catch("Error in VeltVideoPlayerComponent ngAfterViewInit: ",e)}}trackByFn(e,t){return t?.commentAnnotation?.annotationId||e}addVeltCommentsTag(){try{if(this.loggingService.log("%c[WB] Calling FUNCTION: addVeltCommentsTag","color: green;"),!(document.querySelector(x.TAGS.VELT_COMMENTS)||document.querySelector(x.TAGS.SNIPPYLY_COMMENTS))){let t=document.createElement(x.TAGS.VELT_COMMENTS);document.body.appendChild(t)}}catch(e){this.loggingService.catch("Error in VeltVideoPlayerComponent addVeltCommentsTag: ",e)}}playVideo(){try{this.loggingService.log("%c[WB] Calling FUNCTION: playVideo","color: green;"),this.videoRef?.nativeElement?.play()}catch(e){this.loggingService.catch("Error in VeltVideoPlayerComponent playVideo: ",e)}}pauseVideo(){try{this.loggingService.log("%c[WB] Calling FUNCTION: pauseVideo","color: green;"),this.videoRef?.nativeElement?.pause()}catch(e){this.loggingService.catch("Error in VeltVideoPlayerComponent pauseVideo: ",e)}}toggleVideo(){try{this.loggingService.log("%c[WB] Calling FUNCTION: toggleVideo","color: green;"),this.videoRef?.nativeElement?.paused?this.playVideo():this.pauseVideo()}catch(e){this.loggingService.catch("Error in VeltVideoPlayerComponent toggleVideo: ",e)}}moveForwardVideo(){try{this.loggingService.log("%c[WB] Calling FUNCTION: moveForwardVideo","color: green;"),this.videoRef?.nativeElement&&(this.videoRef.nativeElement.currentTime+this.VIDEO_FORWARD_DURATION>this.videoRef.nativeElement.duration?this.videoRef.nativeElement.currentTime=this.videoRef.nativeElement.duration:this.videoRef.nativeElement.currentTime+=this.VIDEO_FORWARD_DURATION)}catch(e){this.loggingService.catch("Error in VeltVideoPlayerComponent moveForwardVideo: ",e)}}moveBackwardVideo(){try{this.loggingService.log("%c[WB] Calling FUNCTION: moveBackwardVideo","color: green;"),this.videoRef?.nativeElement&&(this.videoRef.nativeElement.currentTime-this.VIDEO_BACKWARD_DURATION<0?this.videoRef.nativeElement.currentTime=0:this.videoRef.nativeElement.currentTime-=this.VIDEO_BACKWARD_DURATION)}catch(e){this.loggingService.catch("Error in VeltVideoPlayerComponent moveBackwardVideo: ",e)}}toggleMuteVideo(){try{this.loggingService.log("%c[WB] Calling FUNCTION: toggleMuteVideo","color: green;"),this.videoRef?.nativeElement&&(this.videoRef.nativeElement.muted=!this.videoRef.nativeElement.muted)}catch(e){this.loggingService.catch("Error in VeltVideoPlayerComponent toggleMuteVideo: ",e)}}changeVolumeVideo(e){try{this.loggingService.log("%c[WB] Calling FUNCTION: changeVolumeVideo","color: green;"),this.videoRef?.nativeElement&&(this.videoRef.nativeElement.volume=e.target.value)}catch(t){this.loggingService.catch("Error in VeltVideoPlayerComponent c