karaoke-eternal 1.0.0 → 2.0.0-beta.5

package/build/client/851.a51d7d3f87c474adad54.js

@@ -0,0 +1 @@
+/*! See licenses in licenses.txt */"use strict";(self.webpackChunkkaraoke_eternal=self.webpackChunkkaraoke_eternal||[]).push([[851],{9851:(e,i,t)=>{t.r(i),t.d(i,{default:()=>h});var s=t(96540),a=t(23533),r=t(18182),o=t(33795);const n="KkjTCNFeyJblwTH4ZFFo";class d extends s.Component{audioGainNode=null;canvas=s.createRef();frameId=null;visualizer=null;componentDidMount(){try{this.visualizer=a.A.createVisualizer(this.props.audioSourceNode.context,this.canvas.current,{width:this.props.width,height:this.props.height}),this.visualizer.loadExtraImages(o.A)}catch(e){return void this.props.onError(e.message)}const e=r.A[this.props.presetKey];e&&this.visualizer.loadPreset(e,0),this.updateAudioSource(),this.updatePlaying()}componentDidUpdate(e){const{props:i}=this;i.audioSourceNode!==e.audioSourceNode&&this.updateAudioSource(),i.isPlaying!==e.isPlaying&&this.updatePlaying(),i.width===e.width&&i.height===e.height||this.visualizer.setRendererSize(i.width,i.height),i.presetKey!==e.presetKey&&this.visualizer.loadPreset(r.A[i.presetKey],1),this.audioGainNode&&i.sensitivity!==e.sensitivity&&this.audioGainNode.gain.setValueAtTime(i.sensitivity,this.audioGainNode.context.currentTime)}componentWillUnmount(){cancelAnimationFrame(this.frameId),this.frameId=null}render(){const{width:e,height:i}=this.props;return s.createElement("div",{style:{width:e,height:i},className:n},s.createElement("canvas",{width:e,height:i,ref:this.canvas}))}updateAudioSource=()=>{this.audioGainNode=this.props.audioSourceNode.context.createGain(),this.props.audioSourceNode.connect(this.audioGainNode),this.visualizer.connectAudio(this.audioGainNode)};updatePlaying=()=>{this.props.isPlaying&&!this.frameId?this.renderVisualizerFrame():(cancelAnimationFrame(this.frameId),this.frameId=null)};renderVisualizerFrame=()=>{this.frameId=requestAnimationFrame(this.renderVisualizerFrame),this.visualizer.render()}}const h=d}}]);

package/build/{845.4be526e3a94d53aeceae.css → client/958.a51d7d3f87c474adad54.css}

@@ -12,6 +12,20 @@
   position: relative;
 }
 
+.TiuVvEm0pQ4MG4FeoS2h {
+  background-color: transparent;
+  position: relative;
+}
+
+.TyOBt_sxbH8gygrTwSB1 {
+  border-radius: var(--border-radius);
+  position: absolute;
+}
+
+.kzoCOS31nDS6f5pm2GWF {
+  position: relative;
+}
+
 .zCLVuxOKMU3YP7R5BUFg {
   object-position: 50% 50%;
   object-fit: contain;
@@ -83,6 +97,9 @@
   font-size: 6vh;
   text-rendering: optimizeLegibility;
   text-shadow: 1px 1px 5px #000;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 33vw;
 }
 
 .Q2KBXSyDS_61hMQff6Zp {
@@ -90,15 +107,24 @@
 }
 
 @keyframes UC_a9TkGuLwEDTpWBLNB {
-  0% { transform: translateX(0%); }
-  100% { transform: translateX(-100%); }
+  0% {
+    transform: translateX(0%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
 }
 
 @keyframes ORCgKBGhLa4oBtKBHSh7 {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(0%); }
-}
+  0% {
+    transform: translateX(-100%);
+  }
 
+  100% {
+    transform: translateX(0%);
+  }
+}
 .KR1xPhhGxBDKGqbw_jFu {
   font-family: var(--font-family-custom);
   position: absolute;
@@ -112,7 +138,7 @@
 .FQpKtHbs3r0MzUvNPO_A {
   background-color: var(--chrome-bg-color);
   border-radius: var(--border-radius);
-  padding: 1rem 2rem;
+  padding: var(--space-m) var(--space-xl);
 }
 
 @supports (backdrop-filter: saturate(50%) blur(20px)) or (-webkit-backdrop-filter: saturate(50%) blur(20px)) {
@@ -123,6 +149,27 @@
   }
 }
 
+.KNbu9kyIDEFZeDNrryKF {
+  position: absolute;
+  bottom: 3vh;
+  left: 3vh;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+
+  &.MM1M0wHif8TunIa_00JS {
+    left: unset;
+    right: 3vh;
+  }
+}
+
+.N9nWI9_a9r9Urmsxb0M6 {
+  opacity: 1;
+}
+
+.TjEsnhnwVcWDHhhlRs4B {
+  opacity: 0;
+}
+
 .gdWFZNJZjyDozcxHMCpw {
   display: flex;
   position: absolute;

package/build/client/958.a51d7d3f87c474adad54.js

@@ -0,0 +1 @@
+/*! See licenses in licenses.txt */"use strict";(self.webpackChunkkaraoke_eternal=self.webpackChunkkaraoke_eternal||[]).push([[958],{13958:(e,t,s)=>{s.r(t),s.d(t,{default:()=>ze});var i=s(96540),a=s(45041),r=s(37655),n=s(76140),o=s(15452),d=s(44063);var u=s(42730);const l=(0,o.VP)(u.w1),h=(0,o.VP)(u.Tn),p=(0,o.VP)(u.vD),c=(0,o.VP)(u.D2),m=(0,o.VP)(u.tg),g=(0,o.VP)(u.EA),y=(0,o.VP)(u._P),E=(0,o.VP)(u.Nt),v=(0,o.VP)(u.Sz),f=(0,o.VP)(u.A2);function b(){return e=>{e({type:d.bO,payload:{type:u.zF}}),e({type:u.if})}}const P={cdgAlpha:.5,cdgSize:.8,errorMessage:"",historyJSON:"[]",isAtQueueEnd:!1,isErrored:!1,isPlaying:!1,isVideoKeyingEnabled:!1,isWebGLSupported:function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("webgl2")}catch{return!1}}(),mediaType:null,mp4Alpha:.5,nextUserId:null,position:0,queueId:-1,rgTrackGain:null,rgTrackPeak:null,volume:1,_isFetching:!1,_isPlayingNext:!1,_isReplayingQueueId:null},S=(0,o.vy)(P,e=>{e.addCase(m,e=>{e._isPlayingNext=!0}).addCase(f,(e,{payload:t})=>({...e,cdgAlpha:"number"==typeof t.cdgAlpha?t.cdgAlpha:e.cdgAlpha,cdgSize:"number"==typeof t.cdgSize?t.cdgSize:e.cdgSize,mp4Alpha:"number"==typeof t.mp4Alpha?t.mp4Alpha:e.mp4Alpha})).addCase(g,e=>{e.isPlaying=!1}).addCase(y,e=>{e.isPlaying=!0}).addCase(E,(e,{payload:t})=>{e._isReplayingQueueId=t.queueId}).addCase(v,(e,{payload:t})=>{e.volume=t}).addCase(h,(e,{payload:t})=>({...e,errorMessage:t,isErrored:!0,isPlaying:!1,_isFetching:!1})).addCase(p,e=>({...e,errorMessage:"",isErrored:!1,_isFetching:!0})).addCase(c,e=>{e._isFetching=!1}).addCase(l,(e,{payload:t})=>({...e,...t}))}),I=(0,o.VP)(u.fD);var C=s(18182);const A=Object.keys(C.A),N=e=>({presetKey:A[e],presetName:`[${e+1}/${A.length}] `+A[e]}),x=()=>N(Math.floor(Math.random()*(A.length-1))),T=(0,o.VP)(u.A2),w=(0,o.VP)(u.vD),k=(0,o.VP)(u.Qp),G={isEnabled:!0,isSupported:!0,...x(),sensitivity:1},R=(0,o.vy)(G,e=>{e.addCase(w,e=>({...e,...x()})).addCase(T,(e,{payload:t})=>{const{visualizer:s}=t;if("object"!=typeof s)return e;let i={};if(s.nextPreset||s.prevPreset){const t=A.indexOf(e.presetKey),a=t===A.length-1?0:t+1,r=0===t?A.length-1:t-1;i=N(s.nextPreset?a:s.prevPreset?r:t)}else s.randomPreset&&(i=x());return{...e,...i,isEnabled:"boolean"==typeof s.isEnabled?s.isEnabled:e.isEnabled,sensitivity:"number"==typeof s.sensitivity?s.sensitivity:e.sensitivity}}).addCase(k,e=>{e.isSupported=!1})});var F=s(58168),V=s(11445),z=s(77170);const D="TPkYtEozIQtnpepk8MHq",K="tn97LaCi4L2RekBwCyAM",M="FouT3gwlMtqtJx_j19T_",q=new z.A("media"),B=parseInt(getComputedStyle(document.body).getPropertyValue("--border-radius"));class U extends i.Component{audio=i.createRef();canvas=i.createRef();canvasCtx=null;cdg=null;frameId=null;lastBitmap=null;supportsFilters=CSS.supports("backdrop-filter","blur(10px) brightness(100%) saturate(100%)")||CSS.supports("-webkit-backdrop-filter","blur(10px) brightness(100%) saturate(100%)");state={backgroundRGBA:[0,0,0,0],contentBounds:[0,0,0,0]};componentDidMount(){this.canvasCtx=this.canvas.current.getContext("2d"),this.props.onAudioElement(this.audio.current),this.updateSources()}componentDidUpdate(e){e.mediaId!==this.props.mediaId?this.updateSources():e.mediaKey!==this.props.mediaKey&&(this.audio.current.currentTime=0),e.isPlaying!==this.props.isPlaying&&this.updateIsPlaying(),e.width===this.props.width&&e.height===this.props.height&&e.cdgSize===this.props.cdgSize||this.lastBitmap&&this.paintCDG(this.lastBitmap)}componentWillUnmount(){this.stopCDG()}render(){const{cdgAlpha:e,cdgSize:t,width:s,height:a}=this.props,[r,n,o,d]=this.state.contentBounds,[u,l,h]=this.state.backgroundRGBA,p=[],c=(s-20)/300,m=(a-20)*t/216,g=Math.min(c,m),y=o-r&&d-n?10:0;return this.supportsFilters&&(p.push(`blur(${30*e*g}px)`),p.push(`brightness(${100-100*e**3}%)`),p.push(`saturate(${100-100*e**3}%)`)),i.createElement("div",{className:D},i.createElement("div",{className:K,style:{backdropFilter:this.supportsFilters&&1!==e?p.join(" "):"none",backgroundColor:this.supportsFilters&&1!==e?"transparent":`rgba(${u},${l},${h},${e})`,borderRadius:B*g,left:(r-y)*g,top:(n-y)*g,width:(o-r+2*y)*g,height:(d-n+2*y)*g}}),i.createElement("canvas",{ref:this.canvas,className:M,width:300*g,height:216*g}),i.createElement("br",null),i.createElement("audio",{preload:"auto",onCanPlayThrough:this.updateIsPlaying,onEnded:this.handleEnded,onError:this.handleError,onLoadStart:this.props.onLoad,onPlay:this.handlePlay,onTimeUpdate:this.handleTimeUpdate,ref:this.audio}))}updateSources=async()=>{this.stopCDG();try{const e=await q.get(`/${this.props.mediaId}?type=cdg`);if(!(e instanceof Response))return;const t=await e.arrayBuffer();if(!this.audio.current)return;return this.cdg=new V.A(t),this.audio.current.src=`${document.baseURI}api/media/${this.props.mediaId}?type=audio`,void this.audio.current.load()}catch(e){this.props.onError(e.message)}};updateIsPlaying=()=>{this.props.isPlaying?this.audio.current.play().catch(e=>this.props.onError(e.message)):(this.audio.current.pause(),this.stopCDG())};handleEnded=()=>{this.props.onEnd(),this.stopCDG()};handleError=e=>{const{message:t,code:s}=e.currentTarget.error;this.props.onError(`${t} (code ${s})`)};handlePlay=()=>{this.props.onPlay(),this.startCDG()};handleTimeUpdate=()=>{this.props.onStatus({position:this.audio.current.currentTime})};paintCDG=e=>{const{clientWidth:t,clientHeight:s}=this.canvas.current;this.canvasCtx.imageSmoothingEnabled=!1,this.canvasCtx.shadowBlur=Math.min(16,s*this.props.cdgSize*.0333),this.canvasCtx.shadowColor="rgba(0,0,0,1)",this.canvasCtx.clearRect(0,0,t,s),this.canvasCtx.drawImage(e,0,0,t,s)};startCDG=()=>{this.frameId=requestAnimationFrame(this.startCDG);const e=this.cdg.render(this.audio.current.currentTime,{forceKey:!0});e.isChanged&&(e.backgroundRGBA.every((e,t)=>e===this.state.backgroundRGBA[t])||this.setState({backgroundRGBA:e.backgroundRGBA}),e.contentBounds.every((e,t)=>e===this.state.contentBounds[t])||this.setState({contentBounds:e.contentBounds}),createImageBitmap(e.imageData).then(e=>{this.lastBitmap=e,this.paintCDG(e)}).catch(e=>this.props.onError(e.message)))};stopCDG=()=>cancelAnimationFrame(this.frameId)}const O=U,$="TiuVvEm0pQ4MG4FeoS2h",_="TyOBt_sxbH8gygrTwSB1",Q="kzoCOS31nDS6f5pm2GWF",W="zCLVuxOKMU3YP7R5BUFg";class L extends i.Component{video=i.createRef();componentDidMount(){this.props.onAudioElement(this.video.current),this.updateSources()}componentDidUpdate(e){e.mediaId!==this.props.mediaId?this.updateSources():e.mediaKey!==this.props.mediaKey&&(this.video.current.currentTime=0),e.isPlaying!==this.props.isPlaying&&this.updateIsPlaying()}render(){const{width:e,height:t}=this.props;return i.createElement("video",{className:W,preload:"auto",width:e,height:t,onCanPlayThrough:this.updateIsPlaying,onEnded:this.props.onEnd,onError:this.handleError,onLoadStart:this.props.onLoad,onPlay:this.handlePlay,onTimeUpdate:this.handleTimeUpdate,ref:this.video})}updateSources=()=>{this.video.current.src=`${document.baseURI}api/media/${this.props.mediaId}?type=video`,this.video.current.load()};updateIsPlaying=()=>{this.props.isPlaying?this.video.current.play().catch(e=>this.props.onError(e.message)):this.video.current.pause()};handleError=()=>{const{message:e,code:t}=this.video.current.error;this.props.onError(`${e} (code ${t})`)};handlePlay=()=>this.props.onPlay();handleTimeUpdate=()=>{this.video.current&&this.props.onStatus({position:this.video.current.currentTime})}}const H=L;var J=s(1113);const j=parseInt(getComputedStyle(document.body).getPropertyValue("--border-radius"));class Z extends i.Component{canvas=i.createRef();frameId=null;video=document.createElement("video");supportsFilters=CSS.supports("backdrop-filter","blur(10px) brightness(100%) saturate(100%)")||CSS.supports("-webkit-backdrop-filter","blur(10px) brightness(100%) saturate(100%)");state={contentBounds:[0,0,0,0],videoWidth:0,videoHeight:0};componentDidMount(){this.props.onAudioElement(this.video),this.video.oncanplaythrough=this.updateIsPlaying,this.video.onended=this.handleEnded,this.video.onerror=this.handleError,this.video.onloadstart=this.props.onLoad,this.video.onloadedmetadata=this.handleLoadedMetadata,this.video.onplay=this.handlePlay,this.video.ontimeupdate=this.handleTimeUpdate,this.video.preload="auto",this.canvas.current&&(this.chroma=new J.A(this.video,this.canvas.current),this.chroma.key({color:"auto"})),this.updateSources()}componentDidUpdate(e){if(e.mediaId!==this.props.mediaId?this.updateSources():e.mediaKey!==this.props.mediaKey&&(this.video.currentTime=0),e.isPlaying!==this.props.isPlaying&&this.updateIsPlaying(),!this.props.isPlaying&&(e.width!==this.props.width||e.height!==this.props.height||e.mp4Alpha!==this.props.mp4Alpha)){const e=this.chroma.render({passthrough:1===this.props.mp4Alpha}).getContentBounds();e.every((e,t)=>e===this.state.contentBounds[t])||this.setState({contentBounds:e})}}componentWillUnmount(){this.video.ontimeupdate=null,this.video.pause(),this.stopChroma(),this.chroma.unload(),this.video.removeAttribute("src"),this.video.remove()}render(){const{mp4Alpha:e,width:t,height:s}=this.props,a=t/s,r=this.state.videoWidth/this.state.videoHeight,n=isNaN(r)?0:a>r?s/this.state.videoHeight:t/this.state.videoWidth,o=[],[d,u,l,h]=this.state.contentBounds,p=l-d&&h-u?10*n:0;return this.supportsFilters&&(o.push(`blur(${30*e*n}px)`),o.push(`brightness(${100-100*e**3}%)`),o.push(`saturate(${100-100*e**3}%)`)),i.createElement("div",{className:$},i.createElement("div",{className:_,style:{backdropFilter:this.supportsFilters&&1!==e?o.join(" "):"none",borderRadius:j*n,left:d-p,top:u-p,width:l-d+2*p,height:h-u+2*p}}),i.createElement("canvas",{className:Q,width:this.state.videoWidth*n,height:this.state.videoHeight*n,ref:this.canvas}))}handleLoadedMetadata=()=>{this.setState({videoWidth:this.video.videoWidth,videoHeight:this.video.videoHeight})};updateSources=()=>{this.stopChroma(),this.video.src=`${document.baseURI}api/media/${this.props.mediaId}?type=video`,this.video.load()};updateIsPlaying=()=>{this.props.isPlaying?this.video.play().catch(e=>this.props.onError(e.message)):(this.video.pause(),this.stopChroma())};startChroma=()=>{this.frameId=requestAnimationFrame(this.startChroma);const e=this.chroma.render({passthrough:1===this.props.mp4Alpha}).getContentBounds();e.every((e,t)=>e===this.state.contentBounds[t])||this.setState({contentBounds:e})};stopChroma=()=>cancelAnimationFrame(this.frameId);handleEnded=()=>{this.props.onEnd(),this.stopChroma()};handleError=()=>{const{message:e,code:t}=this.video.error;this.props.onError(`${e} (code ${t})`)};handlePlay=()=>{this.props.onPlay(),this.startChroma()};handleTimeUpdate=()=>{this.props.onStatus({position:this.video.currentTime})}}const Y=Z,X=i.lazy(()=>Promise.all([s.e(715),s.e(851)]).then(s.bind(s,9851)));class ee extends i.Component{audioCtx=null;audioGainNode=null;audioSourceNode=null;isFetching=!1;state={visualizerAudioSourceNode:null};componentDidMount(){this.audioCtx||(this.audioCtx=new(window.AudioContext||window.webkitAudioContext),this.audioGainNode=this.audioCtx.createGain()),this.updateVolume()}componentDidUpdate(e){this.props.isPlaying&&!e.isPlaying&&this.audioCtx.resume(),this.props.mediaKey!==e.mediaKey&&(this.isFetching=!0),this.isFetching||e.volume===this.props.volume&&e.rgTrackGain===this.props.rgTrackGain&&e.rgTrackPeak===this.props.rgTrackPeak&&e.isReplayGainEnabled===this.props.isReplayGainEnabled||this.updateVolume()}handleAudioElement=e=>{if(!this.audioCtx||this.audioSourceNode&&this.audioSourceNode.mediaElement===e)return;this.audioSourceNode=this.audioCtx.createMediaElementSource(e),this.audioSourceNode.connect(this.audioGainNode),this.audioGainNode.connect(this.audioCtx.destination);const t=this.audioSourceNode;this.setState({visualizerAudioSourceNode:t})};handlePlay=()=>{this.isFetching=!1,this.updateVolume(),this.props.onPlay()};updateVolume=()=>{let e=this.props.volume;const{isReplayGainEnabled:t,rgTrackGain:s,rgTrackPeak:i}=this.props;if(t&&"number"==typeof s&&"number"==typeof i){const t=this.props.rgTrackGain,s=10*Math.log10(this.props.rgTrackPeak),i=t+s>=0?-.01-s:t;e*=Math.pow(10,i/10)}this.audioGainNode.gain.setValueAtTime(e,this.audioCtx.currentTime)};render(){if(!this.props.isVisible||"number"!=typeof this.props.mediaId)return null;let e;if("cdg"===this.props.mediaType?e=O:"mp4"===this.props.mediaType&&(e=this.props.isVideoKeyingEnabled?Y:H),void 0===e)return this.props.onError(`No player for mediaType: ${this.props.mediaType}`),null;const t=("cdg"===this.props.mediaType||this.props.isVideoKeyingEnabled)&&this.props.isWebGLSupported&&this.props.visualizer.isEnabled&&this.state.visualizerAudioSourceNode;return i.createElement(i.Fragment,null,i.createElement(e,(0,F.A)({},this.props,{onAudioElement:this.handleAudioElement,onPlay:this.handlePlay})),t&&i.createElement(X,{audioSourceNode:this.state.visualizerAudioSourceNode,isPlaying:this.props.isPlaying,onError:this.props.onError,presetKey:this.props.visualizer.presetKey,sensitivity:this.props.visualizer.sensitivity,width:this.props.width,height:this.props.height}))}}const te=ee;var se=s(34164);const ie="wfATTZ4_j6b_TY69Ic18",ae="rSYTHnGgZWylvF2FCmo6";class re extends i.Component{shouldComponentUpdate(e){return e.text!==this.props.text}render(){const e=this.props.offset||-300*Math.random(),t=this.props.text.split("").map((t,s)=>{const a=33*(s-this.props.text.length+e);return i.createElement("span",{key:this.props.text+s,className:ae,style:{animationDelay:`${a}ms`}},t)});return i.createElement("div",{className:(0,se.A)(ie,this.props.className)},t)}}const ne=re;var oe=s(51009),de=s(5668);const ue="ztWniIznPl6ywm0j65nW",le="T5fdoZnFMIASoNGkWTyQ",he="bGuftvpRla3cVmG6JC6K",pe="xTKaKb5T6fSjh0UvN9Pr",ce="XcvWHmE5QoiGaPRF9yHb",me="N_kMqAEJY9q1nZBGsVUL",ge="Q2KBXSyDS_61hMQff6Zp",ye=({queueItem:e})=>{const[t,s]=(0,i.useState)(!1),a=(0,i.useRef)(null),r=(0,i.useRef)(null),n=()=>{a.current&&clearTimeout(a.current),s(!0),a.current=setTimeout(()=>{s(!1)},5e3)};return(0,i.useEffect)(()=>(n(),()=>{a.current&&clearTimeout(a.current)}),[]),(0,i.useEffect)(()=>(n(),()=>{a.current&&clearTimeout(a.current)}),[e.queueId]),i.createElement(oe.A,{nodeRef:r,in:t,timeout:500,classNames:{enterActive:he,enterDone:pe,exitActive:ce}},i.createElement("div",{ref:r,className:ue},i.createElement("div",{className:le},i.createElement(de.A,{userId:e.userId,dateUpdated:e.userDateUpdated,className:ge}),i.createElement("div",{className:me},e.userDisplayName))))},Ee="KR1xPhhGxBDKGqbw_jFu",ve="FQpKtHbs3r0MzUvNPO_A",fe=({isQueueEmpty:e,isAtQueueEnd:t,isErrored:s,nextQueueItem:a,queueItem:r,width:n,height:o})=>{let d;if(e||t&&!a)d=i.createElement(ne,{text:"CAN HAZ MOAR SONGZ?",className:ve});else if(!r||t&&a)d=i.createElement(ne,{text:"PRESS PLAY TO BEGIN",className:ve});else if(s){const e=-300*Math.random();d=i.createElement(i.Fragment,null,i.createElement(ne,{text:"OOPS...",offset:e,className:ve}),i.createElement(ne,{text:"SEE QUEUE FOR DETAILS",offset:e,className:ve}))}else d=i.createElement(ye,{queueItem:r});return i.createElement("div",{style:{width:n,height:o},className:Ee},d)},be=i.memo(fe);var Pe=s(76028);const Se="KNbu9kyIDEFZeDNrryKF",Ie="MM1M0wHif8TunIa_00JS",Ce="N9nWI9_a9r9Urmsxb0M6",Ae="TjEsnhnwVcWDHhhlRs4B",Ne=({height:e,prefs:t,queueItem:s})=>{const a=(0,i.useRef)(null),r=(0,i.useRef)(null),o=(0,i.useRef)(Date.now()),[d,u]=(0,i.useState)(!0),[l,h]=(0,i.useState)(!1),{isPlaying:p}=(0,n.G)(e=>e.player),{roomId:c}=(0,n.G)(e=>e.user),m=(0,i.useCallback)(()=>{if(r.current&&(clearTimeout(r.current),r.current=null),p)return;const e=Date.now()-o.current,t=Math.max(18e4-e,0);r.current=setTimeout(()=>{u(!1)},t)},[p]);(0,i.useEffect)(()=>(m(),()=>{r.current&&clearTimeout(r.current)}),[p,m]),(0,i.useEffect)(()=>{Date.now()-o.current>1e4&&u(!1)},[s?.queueId]);const g=(0,i.useCallback)(()=>{d||(h(e=>!e),u(!0),o.current=Date.now(),m())},[d,m]),y=(0,i.useMemo)(()=>{const e=new URL(window.location.href);return e.pathname=e.pathname.replace(/\/player$/,""),e.searchParams.append("roomId",String(c)),t.password&&e.searchParams.append("password",btoa(t.password)),e},[c,t.password]),E=Math.round(e*(.05+(t.size??.5)/5)),v=5+10*(t.size??.5);return i.createElement(oe.A,{in:d,nodeRef:a,classNames:{enterActive:Ce,exitActive:Ae},addEndListener:e=>{const t=a.current;if(!t)return;const s=i=>{i.target===t&&(t.removeEventListener("transitionend",s),e(),g())};t.addEventListener("transitionend",s,!1)}},i.createElement("div",{className:(0,se.A)(Se,l&&Ie),ref:a},i.createElement(Pe.r,{value:y.href,ecLevel:"L",size:E,quietZone:v,style:{opacity:t.opacity??.625},logoImage:`${document.baseURI}assets/app.png`,logoWidth:.5*E,logoHeight:.5*E,logoOpacity:.5,qrStyle:"dots"})))};var xe=s(32509),Te=s(25508);const we={qr:{isEnabled:!1,opacity:.625,password:"",size:.5}},ke=(0,Te.Mz)([e=>e.user.roomId,e=>e.rooms.entities],(e,t)=>"number"==typeof e&&t[e]&&t[e].prefs?t[e]?.prefs:we),Ge=ke,Re=e=>{const t=(0,i.useRef)(0),s=(0,n.G)(xe.A),a=(0,n.G)(e=>e.player),r=(0,n.G)(e=>e.playerVisualizer),o=(0,n.G)(e=>e.prefs),d=(0,n.G)(Ge),m=s.entities[a.queueId],g=s.entities[s.result[s.result.indexOf(a.queueId)+1]],y=(0,n.j)(),E=(0,i.useCallback)(e=>y(function(e={},t=!1){return(s,i)=>{const{player:a,playerVisualizer:r}=i();s(l(e));const n=Object.fromEntries(Object.entries({...a,...e}).filter(([e])=>!e.startsWith("_")));s({type:u.zF,payload:{...n,visualizer:r},meta:{throttle:{wait:1e3,leading:!t}}})}}(e)),[y]),v=(0,i.useCallback)(()=>y(p()),[y]),f=(0,i.useCallback)(()=>y(c()),[y]),P=(0,i.useCallback)(e=>{y(h(e)),E()},[y,E]),S=(0,i.useCallback)(e=>{const i=s.entities[e];if(!i)return;t.current=Date.now();const r=JSON.parse(a.historyJSON);if(e!==m?.queueId){const t=r.lastIndexOf(e);-1!==t&&r.splice(t)}E({historyJSON:JSON.stringify(r),isAtQueueEnd:!1,isPlaying:!0,isVideoKeyingEnabled:i.isVideoKeyingEnabled,mediaType:i.mediaType,position:0,queueId:i.queueId,nextUserId:null,_isReplayingQueueId:null})},[E,a.historyJSON,s.entities,m?.queueId]),I=(0,i.useCallback)(()=>{const e=JSON.parse(a.historyJSON);m&&-1===e.lastIndexOf(m.queueId)&&e.push(m.queueId),E(g?{historyJSON:JSON.stringify(e),isAtQueueEnd:!1,isPlaying:!0,isVideoKeyingEnabled:g.isVideoKeyingEnabled,mediaType:g.mediaType,position:0,queueId:g.queueId,nextUserId:null,_isPlayingNext:!1}:{historyJSON:JSON.stringify(e),isAtQueueEnd:!0,mediaType:null,_isPlayingNext:!1})},[E,g,a.historyJSON,m]);return(0,i.useEffect)(()=>{if(!a.nextUserId||m?.userId===g?.userId)for(let e=s.result.indexOf(m?.queueId)+1;e<s.result.length;e++)if(m?.userId!==s.entities[s.result[e]].userId)return void E({nextUserId:s.entities[s.result[e]].userId})},[E,g,a.nextUserId,s,m]),(0,i.useEffect)(()=>E({isVideoKeyingEnabled:m?.isVideoKeyingEnabled}),[E,a.cdgAlpha,a.cdgSize,a.isPlaying,a.mp4Alpha,a.volume,r,m?.isVideoKeyingEnabled]),(0,i.useEffect)(()=>()=>y(b()),[y]),(0,i.useEffect)(()=>{(a.isPlaying&&-1===a.queueId||a._isPlayingNext)&&I()},[I,a.isPlaying,a.queueId,a._isPlayingNext]),(0,i.useEffect)(()=>{null!==a._isReplayingQueueId&&S(a._isReplayingQueueId)},[S,a._isReplayingQueueId]),(0,i.useEffect)(()=>{a.isAtQueueEnd&&g&&a.isPlaying&&I()},[I,a.isPlaying,a.isAtQueueEnd,g]),(0,i.useEffect)(()=>{a.isErrored&&a.isPlaying&&E({isErrored:!1})},[E,a.isErrored,a.isPlaying]),i.createElement(i.Fragment,null,i.createElement(te,{cdgAlpha:a.cdgAlpha,cdgSize:a.cdgSize,isPlaying:a.isPlaying,isVisible:!!m&&!a.isErrored&&!a.isAtQueueEnd,isReplayGainEnabled:o.isReplayGainEnabled,isVideoKeyingEnabled:!!m?.isVideoKeyingEnabled,isWebGLSupported:a.isWebGLSupported,mediaId:m?m.mediaId:null,mediaKey:m?`${m.queueId}-${t.current}`:null,mediaType:m?m.mediaType:null,mp4Alpha:a.mp4Alpha,onEnd:I,onError:P,onLoad:v,onPlay:f,onStatus:E,rgTrackGain:m?m.rgTrackGain:null,rgTrackPeak:m?m.rgTrackPeak:null,visualizer:r,volume:a.volume,width:e.width,height:e.height}),i.createElement(be,{queueItem:m,nextQueueItem:g,isAtQueueEnd:a.isAtQueueEnd,isQueueEmpty:!s.result.length,isErrored:a.isErrored,width:e.width,height:e.height}),d?.qr?.isEnabled&&i.createElement(Ne,{height:e.height,prefs:d.qr,queueItem:m}))};var Fe=s(80470);const Ve="gdWFZNJZjyDozcxHMCpw",ze=()=>{const{innerWidth:e,innerHeight:t,headerHeight:s,footerHeight:o}=(0,n.G)(e=>e.ui),d=t-s-o,u=(0,n.j)();return(0,n.G)(e=>e.player)||(r.A.inject({reducerPath:"player",reducer:S}),r.A.inject({reducerPath:"playerVisualizer",reducer:R}),u(I())),(0,i.useEffect)(()=>{u((0,Fe.x1)())},[u]),(0,i.useEffect)(()=>{document.title="Karaoke Eternal | Player"},[]),i.createElement("div",{style:{overflow:"hidden"}},i.createElement("div",{id:"player-fs-container",className:Ve,style:{top:a.A.isFullscreen?0:s,width:e,height:a.A.isFullscreen?t:d,overflow:"hidden"}},i.createElement(Re,{width:e,height:a.A.isFullscreen?t:d})))}}}]);

package/build/{index.html → client/index.html}

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><title>Karaoke Eternal</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><base href="/"><script defer="defer" src="799.4be526e3a94d53aeceae.js"></script><script defer="defer" src="main.4be526e3a94d53aeceae.js"></script><link href="main.4be526e3a94d53aeceae.css" rel="stylesheet"></head><body><div id="root" style="height: 100%"></div></body></html>
+<!doctype html><html lang="en"><head><title>Karaoke Eternal</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><base href="/"><script defer="defer" src="718.a51d7d3f87c474adad54.js"></script><script defer="defer" src="main.a51d7d3f87c474adad54.js"></script><link href="main.a51d7d3f87c474adad54.css" rel="stylesheet"></head><body><div id="root" style="height: 100%"></div></body></html>