karaoke-eternal 2.0.0-beta.6 → 2.0.0-beta.8

package/build/client/851.e01cd516d8fb126954e5.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/client/{958.83b0127845c2fa8729fe.css → 958.e01cd516d8fb126954e5.css}

@@ -133,6 +133,69 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+
+  --color-pink: hsl(var(--hue-pink), 62%, 57%);
+  --color-blue: hsl(var(--hue-blue), 90%, 50%);
+  --color-pink-glow: hsla(var(--hue-pink), 62%, 57%, 0.8);
+  --color-blue-glow: hsla(var(--hue-blue), 90%, 50%, 0.8);
+}
+
+.bHA4DaGm54xZUQxZdLXR {
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+  }
+
+  svg {
+    width: 33vh;
+    height: 33vh;
+    fill: url(#play-icon-gradient);
+    animation: xaTlapXLf3byX5sk0W6R 6s infinite;
+    will-change: filter;
+
+    path {
+      fill: url(#play-icon-gradient);
+    }
+  }
+}
+
+.goAlmmz6jtor51Fz3dQ9 {
+  --color-start: var(--color-pink);
+  --color-end: var(--color-blue);
+  animation: nQMCvBUgU2jqmRFR5KY5 4s infinite;
+}
+
+.I9MQO9OCDtlFwi4b5Xh4 {
+  --color-start: var(--color-blue);
+  --color-end: var(--color-pink);
+  animation: nQMCvBUgU2jqmRFR5KY5 7s infinite;
+}
+
+@keyframes nQMCvBUgU2jqmRFR5KY5 {
+
+  0%,
+  100% {
+    stop-color: var(--color-start);
+  }
+
+  50% {
+    stop-color: var(--color-end);
+  }
+}
+
+@keyframes xaTlapXLf3byX5sk0W6R {
+
+  0%,
+  100% {
+    filter: var(--drop-shadow-filter) drop-shadow(0 0 10px var(--color-pink-glow));
+  }
+
+  50% {
+    filter: var(--drop-shadow-filter) drop-shadow(0 0 20px var(--color-blue-glow));
+  }
 }
 
 .FQpKtHbs3r0MzUvNPO_A {
@@ -148,7 +211,6 @@
     backdrop-filter: saturate(50%) blur(20px);
   }
 }
-
 .KNbu9kyIDEFZeDNrryKF {
   position: absolute;
   bottom: 3vh;

package/build/client/958.e01cd516d8fb126954e5.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:()=>Be});var i=s(96540),a=s(45041),r=s(37655),n=s(76140),o=s(15452),d=s(44063);var l=s(42730);const u=(0,o.VP)(l.w1),h=(0,o.VP)(l.Tn),p=(0,o.VP)(l.vD),c=(0,o.VP)(l.D2),m=(0,o.VP)(l.tg),y=(0,o.VP)(l.EA),g=(0,o.VP)(l._P),E=(0,o.VP)(l.Nt),v=(0,o.VP)(l.Sz),f=(0,o.VP)(l.A2);function b(){return e=>{e({type:d.bO,payload:{type:l.zF}}),e({type:l.if})}}const P={cdgAlpha:.5,cdgSize:.65,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,_lastReplayTime:0},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(y,e=>{e.isPlaying=!1}).addCase(g,e=>{e.isPlaying=!0}).addCase(E,(e,{payload:t})=>{e._isReplayingQueueId=t.queueId,e._lastReplayTime=Date.now()}).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(u,(e,{payload:t})=>({...e,...t}))}),C=(0,o.VP)(l.fD);var A=s(18182);const I=["Flexi + Martin - astral projection","Rovastar & Loadus + Zylot - FractalDrop (Spark Machine v2.0)"],x=Object.keys(A.A).filter(e=>!I.includes(e)),N=e=>({presetKey:x[e],presetName:`[${e+1}/${x.length}] `+x[e]}),T=()=>N(Math.floor(Math.random()*(x.length-1))),w=(0,o.VP)(l.A2),k=(0,o.VP)(l.vD),G=(0,o.VP)(l.Qp),R={isEnabled:!0,isSupported:!0,...T(),sensitivity:1},F=(0,o.vy)(R,e=>{e.addCase(k,e=>({...e,...T()})).addCase(w,(e,{payload:t})=>{const{visualizer:s}=t;if("object"!=typeof s)return e;let i={};if(s.nextPreset||s.prevPreset){const t=x.indexOf(e.presetKey),a=t===x.length-1?0:t+1,r=0===t?x.length-1:t-1;i=N(s.nextPreset?a:s.prevPreset?r:t)}else s.randomPreset&&(i=T());return{...e,...i,isEnabled:"boolean"==typeof s.isEnabled?s.isEnabled:e.isEnabled,sensitivity:"number"==typeof s.sensitivity?s.sensitivity:e.sensitivity}}).addCase(G,e=>{e.isSupported=!1})});var D=s(58168),K=s(11445),z=s(77170);const V="TPkYtEozIQtnpepk8MHq",M="tn97LaCi4L2RekBwCyAM",U="FouT3gwlMtqtJx_j19T_",q=new z.A("media"),B=parseInt(getComputedStyle(document.body).getPropertyValue("--border-radius"));class O 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.mediaKey===this.props.mediaKey?e.mediaReplayKey===this.props.mediaReplayKey?(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)):this.audio.current.currentTime=0:this.updateSources()}componentWillUnmount(){this.stopCDG()}render(){const{cdgAlpha:e,cdgSize:t,width:s,height:a}=this.props,[r,n,o,d]=this.state.contentBounds,[l,u,h]=this.state.backgroundRGBA,p=[],c=(s-20)/300,m=(a-20)*t/216,y=Math.min(c,m),g=o-r&&d-n?10:0;return this.supportsFilters&&(p.push(`blur(${30*e*y}px)`),p.push(`brightness(${100-100*e**3}%)`),p.push(`saturate(${100-100*e**3}%)`)),i.createElement("div",{className:V},i.createElement("div",{className:M,style:{backdropFilter:this.supportsFilters&&1!==e?p.join(" "):"none",backgroundColor:this.supportsFilters&&1!==e?"transparent":`rgba(${l},${u},${h},${e})`,borderRadius:B*y,left:(r-g)*y,top:(n-g)*y,width:(o-r+2*g)*y,height:(d-n+2*g)*y}}),i.createElement("canvas",{ref:this.canvas,className:U,width:300*y,height:216*y}),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 K.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.audio.current&&(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.audio.current&&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=()=>{if(this.frameId=requestAnimationFrame(this.startCDG),!this.audio.current)return;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,Q="TiuVvEm0pQ4MG4FeoS2h",$="TyOBt_sxbH8gygrTwSB1",L="kzoCOS31nDS6f5pm2GWF",W="zCLVuxOKMU3YP7R5BUFg";class H extends i.Component{video=i.createRef();componentDidMount(){this.props.onAudioElement(this.video.current),this.updateSources()}componentDidUpdate(e){e.mediaKey===this.props.mediaKey?e.mediaReplayKey===this.props.mediaReplayKey?e.isPlaying!==this.props.isPlaying&&this.updateIsPlaying():this.video.current.currentTime=0:this.updateSources()}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&&(this.video.current.src=`${document.baseURI}api/media/${this.props.mediaId}?type=video`,this.video.current.load())};updateIsPlaying=()=>{this.video.current&&(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 j=H;var J=s(1113);const Z=parseInt(getComputedStyle(document.body).getPropertyValue("--border-radius"));class Y 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.mediaKey===this.props.mediaKey)if(e.mediaReplayKey===this.props.mediaReplayKey){if(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})}}else this.video.currentTime=0;else this.updateSources()}componentWillUnmount(){this.video.ontimeupdate=null,this.video.pause(),this.stopChroma(),this.chroma.unload(),this.video.removeAttribute("src"),this.video.load()}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,l,u,h]=this.state.contentBounds,p=u-d&&h-l?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:Q},i.createElement("div",{className:$,style:{backdropFilter:this.supportsFilters&&1!==e?o.join(" "):"none",borderRadius:Z*n,left:d-p,top:l-p,width:u-d+2*p,height:h-l+2*p}}),i.createElement("canvas",{className:L,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 X=Y,ee=i.lazy(()=>Promise.all([s.e(715),s.e(851)]).then(s.bind(s,9851)));class te 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=20*Math.log10(this.props.rgTrackPeak),i=t+s>=0?-.01-s:t;e*=Math.pow(10,i/20)}this.audioCtx&&this.audioGainNode&&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=_:"mp4"===this.props.mediaType&&(e=this.props.isVideoKeyingEnabled?X:j),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,D.A)({},this.props,{onAudioElement:this.handleAudioElement,onPlay:this.handlePlay})),t&&i.createElement(ee,{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 se=te;var ie=s(88146),ae=s(34164);const re="wfATTZ4_j6b_TY69Ic18",ne="rSYTHnGgZWylvF2FCmo6";class oe 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:ne,style:{animationDelay:`${a}ms`}},t)});return i.createElement("div",{className:(0,ae.A)(re,this.props.className)},t)}}const de=oe;var le=s(51009),ue=s(5668);const he="ztWniIznPl6ywm0j65nW",pe="T5fdoZnFMIASoNGkWTyQ",ce="bGuftvpRla3cVmG6JC6K",me="xTKaKb5T6fSjh0UvN9Pr",ye="XcvWHmE5QoiGaPRF9yHb",ge="N_kMqAEJY9q1nZBGsVUL",Ee="Q2KBXSyDS_61hMQff6Zp",ve=({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(le.A,{nodeRef:r,in:t,timeout:500,classNames:{enterActive:ce,enterDone:me,exitActive:ye}},i.createElement("div",{ref:r,className:he,translate:"no"},i.createElement("div",{className:pe},i.createElement(ue.A,{userId:e.userId,dateUpdated:e.userDateUpdated,className:Ee}),i.createElement("div",{className:ge},e.userDisplayName))))};var fe=s(80519);const be="KR1xPhhGxBDKGqbw_jFu",Pe="bHA4DaGm54xZUQxZdLXR",Se="goAlmmz6jtor51Fz3dQ9",Ce="I9MQO9OCDtlFwi4b5Xh4",Ae="FQpKtHbs3r0MzUvNPO_A",Ie=({isQueueEmpty:e,isAtQueueEnd:t,isErrored:s,nextQueueItem:a,queueItem:r,width:o,height:d})=>{const l=(0,n.j)(),u=(0,i.useCallback)(()=>l((0,ie.cd)()),[l]);let h;if(e||t&&!a)h=i.createElement(de,{text:"CAN HAZ MOAR SONGZ?",className:Ae});else if(!r||t&&a)h=i.createElement(i.Fragment,null,i.createElement("svg",{width:"0",height:"0",style:{position:"absolute"}},i.createElement("defs",null,i.createElement("linearGradient",{id:"play-icon-gradient",x1:"0%",y1:"0%",x2:"100%",y2:"100%"},i.createElement("stop",{offset:"0%",className:Se}),i.createElement("stop",{offset:"100%",className:Ce})))),i.createElement("button",{className:Pe,onClick:u,"aria-label":"Play"},i.createElement(fe.A,{icon:"PLAY"})));else if(s){const e=-300*Math.random();h=i.createElement(i.Fragment,null,i.createElement(de,{text:"OOPS...",offset:e,className:Ae}),i.createElement(de,{text:"SEE QUEUE FOR DETAILS",offset:e,className:Ae}))}else h=i.createElement(ve,{queueItem:r});return i.createElement("div",{style:{width:o,height:d},className:be},h)},xe=i.memo(Ie);var Ne=s(76028);const Te="KNbu9kyIDEFZeDNrryKF",we="MM1M0wHif8TunIa_00JS",ke="N9nWI9_a9r9Urmsxb0M6",Ge="TjEsnhnwVcWDHhhlRs4B",Re=({height:e,prefs:t,queueItem:s})=>{const a=(0,i.useRef)(null),r=(0,i.useRef)(null),o=(0,i.useRef)(Date.now()),[d,l]=(0,i.useState)(!0),[u,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(()=>{l(!1)},t)},[p]);(0,i.useEffect)(()=>(m(),()=>{r.current&&clearTimeout(r.current)}),[p,m]),(0,i.useEffect)(()=>{Date.now()-o.current>1e4&&l(!1)},[s?.queueId]);const y=(0,i.useCallback)(()=>{d||(h(e=>!e),l(!0),o.current=Date.now(),m())},[d,m]),g=(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(le.A,{in:d,nodeRef:a,classNames:{enterActive:ke,exitActive:Ge},addEndListener:e=>{const t=a.current;if(!t)return;const s=i=>{i.target===t&&(t.removeEventListener("transitionend",s),e(),y())};t.addEventListener("transitionend",s,!1)}},i.createElement("div",{className:(0,ae.A)(Te,u&&we),ref:a},i.createElement(Ne.r,{value:g.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 Fe=s(32509),De=s(25508);const Ke={qr:{isEnabled:!1,opacity:.625,password:"",size:.5}},ze=(0,De.Mz)([e=>e.user.roomId,e=>e.rooms.entities],(e,t)=>"number"==typeof e&&t[e]&&t[e].prefs?t[e]?.prefs:Ke),Ve=ze,Me=e=>{const t=(0,n.G)(Fe.A),s=(0,n.G)(e=>e.player),a=(0,n.G)(e=>e.playerVisualizer),r=(0,n.G)(e=>e.prefs),o=(0,n.G)(Ve),d=t.entities[s.queueId],m=t.entities[t.result[t.result.indexOf(s.queueId)+1]],y=(0,n.j)(),g=(0,i.useCallback)(e=>y(function(e={},t=!1){return(s,i)=>{const{player:a,playerVisualizer:r}=i();s(u(e));const n=Object.fromEntries(Object.entries({...a,...e}).filter(([e])=>!e.startsWith("_")));s({type:l.zF,payload:{...n,visualizer:r},meta:{throttle:{wait:1e3,leading:!t}}})}}(e)),[y]),E=(0,i.useCallback)(()=>y(p()),[y]),v=(0,i.useCallback)(()=>y(c()),[y]),f=(0,i.useCallback)(e=>{y(h(e)),g()},[y,g]),P=(0,i.useCallback)(e=>{const i=t.entities[e];if(!i)return;const a=JSON.parse(s.historyJSON);if(e!==s.queueId){const t=a.lastIndexOf(e);-1!==t&&a.splice(t)}g({historyJSON:JSON.stringify(a),isAtQueueEnd:!1,isPlaying:!0,isVideoKeyingEnabled:i.isVideoKeyingEnabled,mediaType:i.mediaType,position:0,queueId:i.queueId,nextUserId:null,_isReplayingQueueId:null})},[g,s.queueId,s.historyJSON,t.entities]),S=(0,i.useCallback)(()=>{const e=JSON.parse(s.historyJSON);d&&-1===e.lastIndexOf(d.queueId)&&e.push(d.queueId),g(m?{historyJSON:JSON.stringify(e),isAtQueueEnd:!1,isPlaying:!0,isVideoKeyingEnabled:m.isVideoKeyingEnabled,mediaType:m.mediaType,position:0,queueId:m.queueId,nextUserId:null,_isPlayingNext:!1}:{historyJSON:JSON.stringify(e),isAtQueueEnd:!0,mediaType:null,_isPlayingNext:!1})},[g,m,s.historyJSON,d]);return(0,i.useEffect)(()=>{if(!s.nextUserId||d?.userId===m?.userId)for(let e=t.result.indexOf(d?.queueId)+1;e<t.result.length;e++)if(d?.userId!==t.entities[t.result[e]].userId)return void g({nextUserId:t.entities[t.result[e]].userId})},[g,m,s.nextUserId,t,d]),(0,i.useEffect)(()=>g({isVideoKeyingEnabled:d?.isVideoKeyingEnabled}),[g,s.cdgAlpha,s.cdgSize,s.isPlaying,s.mp4Alpha,s.volume,a,d?.isVideoKeyingEnabled]),(0,i.useEffect)(()=>()=>y(b()),[y]),(0,i.useEffect)(()=>{(s.isPlaying&&-1===s.queueId||s._isPlayingNext)&&S()},[S,s.isPlaying,s.queueId,s._isPlayingNext]),(0,i.useEffect)(()=>{null!==s._isReplayingQueueId&&P(s._isReplayingQueueId)},[P,s._isReplayingQueueId]),(0,i.useEffect)(()=>{s.isAtQueueEnd&&m&&s.isPlaying&&S()},[S,s.isPlaying,s.isAtQueueEnd,m]),(0,i.useEffect)(()=>{s.isErrored&&s.isPlaying&&g({isErrored:!1})},[g,s.isErrored,s.isPlaying]),i.createElement(i.Fragment,null,i.createElement(se,{cdgAlpha:s.cdgAlpha,cdgSize:s.cdgSize,isPlaying:s.isPlaying,isVisible:!!d&&!s.isErrored&&!s.isAtQueueEnd,isReplayGainEnabled:r.isReplayGainEnabled,isVideoKeyingEnabled:!!d?.isVideoKeyingEnabled,isWebGLSupported:s.isWebGLSupported,mediaId:d?d.mediaId:null,mediaKey:d?d.queueId:null,mediaReplayKey:s._lastReplayTime,mediaType:d?d.mediaType:null,mp4Alpha:s.mp4Alpha,onEnd:S,onError:f,onLoad:E,onPlay:v,onStatus:g,rgTrackGain:d?d.rgTrackGain:null,rgTrackPeak:d?d.rgTrackPeak:null,visualizer:a,volume:s.volume,width:e.width,height:e.height}),i.createElement(xe,{queueItem:d,nextQueueItem:m,isAtQueueEnd:s.isAtQueueEnd,isQueueEmpty:!t.result.length,isErrored:s.isErrored,width:e.width,height:e.height}),o?.qr?.isEnabled&&i.createElement(Re,{height:e.height,prefs:o.qr,queueItem:d}))};var Ue=s(80470);const qe="gdWFZNJZjyDozcxHMCpw",Be=()=>{const{innerWidth:e,innerHeight:t,headerHeight:s,footerHeight:o}=(0,n.G)(e=>e.ui),d=t-s-o,l=(0,n.j)();return(0,n.G)(e=>e.player)||(r.A.inject({reducerPath:"player",reducer:S}),r.A.inject({reducerPath:"playerVisualizer",reducer:F}),l(C())),(0,i.useEffect)(()=>{l((0,Ue.x1)())},[l]),(0,i.useEffect)(()=>{document.title="Karaoke Eternal | Player"},[]),i.createElement("div",{style:{overflow:"hidden"}},i.createElement("div",{id:"player-fs-container",className:qe,style:{top:a.A.isFullscreen?0:s,width:e,height:a.A.isFullscreen?t:d,overflow:"hidden"}},i.createElement(Me,{width:e,height:a.A.isFullscreen?t:d})))}}}]);

package/build/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="718.83b0127845c2fa8729fe.js"></script><script defer="defer" src="main.83b0127845c2fa8729fe.js"></script><link href="main.83b0127845c2fa8729fe.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="811.e01cd516d8fb126954e5.js"></script><script defer="defer" src="main.e01cd516d8fb126954e5.js"></script><link href="main.e01cd516d8fb126954e5.css" rel="stylesheet"></head><body><div id="root" style="height: 100%"></div></body></html>

package/build/client/licenses.txt

@@ -778,33 +778,6 @@ SOFTWARE.
 
 *******************************************************************************
 
-react-router
-MIT License
-
-Copyright (c) React Training LLC 2015-2019
-Copyright (c) Remix Software Inc. 2020-2021
-Copyright (c) Shopify Inc. 2022-2023
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-*******************************************************************************
-
 redux
 The MIT License (MIT)
 
@@ -995,6 +968,33 @@ SOFTWARE.
 
 *******************************************************************************
 
+react-router
+MIT License
+
+Copyright (c) React Training LLC 2015-2019
+Copyright (c) Remix Software Inc. 2020-2021
+Copyright (c) Shopify Inc. 2022-2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*******************************************************************************
+
 @babel/runtime
 MIT License
 

package/build/client/{main.83b0127845c2fa8729fe.css → main.e01cd516d8fb126954e5.css}

@@ -269,12 +269,12 @@ summary {
   --btn-bg-color: hsl(var(--hue-blue), 40%, 30%);
   --btn-active-bg-color: var(--link-color);
   --btn-active-filter: drop-shadow(0 0 10px hsla(var(--hue-blue), 100%, 100%, .5));
-  --btn-activate-filter: drop-shadow(-.25rem 0 .75rem hsl(var(--hue-blue), 80%, 50%)) drop-shadow(.25rem 0 .75rem hsl(var(--hue-blue), 80%, 50%)) drop-shadow(0 0 1rem hsl(var(--hue-blue), 80%, 50%));
+  --btn-activate-filter: drop-shadow(-.25rem 0 .75rem hsl(var(--hue-blue), 80%, 50%)) drop-shadow(.25rem 0 .75rem hsl(var(--hue-blue), 80%, 50%)) drop-shadow(0 0 1rem hsla(var(--hue-blue), 80%, 50%, 0.5));
 
   --btn-danger-bg-color: hsl(var(--hue-pink), 60%, 57%);
   --btn-danger-filter: drop-shadow(0 0 10px hsla(var(--hue-pink), 100%, 100%, .5));
   --btn-danger-activate-filter:
-    drop-shadow(-5px 0 10px hsl(var(--hue-pink), 80%, 70%)) drop-shadow(5px 0 10px hsl(var(--hue-pink), 80%, 70%)) drop-shadow(0 0 10px hsl(var(--hue-pink), 80%, 70%));
+    drop-shadow(-5px 0 10px hsl(var(--hue-pink), 80%, 70%)) drop-shadow(5px 0 10px hsl(var(--hue-pink), 80%, 70%)) drop-shadow(0 0 10px hsla(var(--hue-pink), 80%, 70%, 0.5));
 
   /* UI chrome (header/footer) */
   --chrome-bg-color: hsla(var(--hue-blue), 100%, 5%, .8);
@@ -326,14 +326,14 @@ summary {
   --spring-duration: .5s;
   --spring-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --animation-text-shadow-glow: glow .25s ease-out;
-  --animation-btn-danger-activate: btn-danger-activate .1s ease-out;
+  --animation-btn-danger-activate: btn-danger-activate 1s var(--activate-1);
   --text-shadow-glow: 0 0 .25em hsl(var(--hue-pink), 100%, 50%), 0 0 .5em hsl(var(--hue-pink), 100%, 50%);
 
   --animation-btn-star: starBounce .5s var(--bounce-1);
   --bounce-1: linear(0, 0.74 5.9%, 0.911 8.5%, 0.954 9.8%, 0.969 11.1%, 0.956 12.4%, 0.919 13.7%, 0.766 16.5%, -0.246 28.6%, -0.382 31.4%, -0.449 34.2%, -0.456 35.4%, -0.452 36.6%, -0.405 39.3%, 0.012 50.9%, 0.09 54.1%, 0.131 57.3%, 0.138 59.7%, 0.127 62.4%, 0.022 72.7%, -0.011 78.2%, -0.016 82.9%, 0);
 
-  --animation-btn-activate: btn-activate 5s var(--activate-1);
-  --activate-1: linear(0, 0.027 1%, 0.206 4.8%, 0.331 7.9%, 0.437 11%, 0.532 14.3%, 0.623 18.2%, 0.7 22.3%, 0.766 26.8%, 0.821 31.6%, 0.865 36.7%, 0.902 42.4%, 0.954 56%, 0.983 73.7%, 1);
+  --animation-btn-activate: btn-activate 1s var(--activate-1);
+  --activate-1: ease-out;
 }
 
 @keyframes starBounce {
@@ -376,7 +376,7 @@ summary {
   }
 
   to {
-    filter: none;
+    filter: var(--btn-danger-filter);
   }
 }
 @font-face {
@@ -385,21 +385,6 @@ summary {
   font-weight: normal;
   src: url(a35814dd9eb496e3d7cc.woff2) format('woff2');
 }
-
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 200;
-  src: url(e419b95dccb58b362811.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 700;
-  src: url(7ce9eb3fe454f54745a4.woff2) format('woff2');
-}
-
 html {
   height: 100%;
   touch-action: manipulation;
@@ -569,11 +554,10 @@ mark {
 }
 
 .jvBgtBq5nhwhgFxDdohV {
-  flex: 1;
-  margin: 0;
-  margin-left: -4px;
-  border: none !important;
+  align-self: stretch;
+  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs) !important;
   font-size: var(--font-size-m) !important;
+  line-height: normal;
   color: var(--text-color) !important;
   background-color: transparent !important;
   box-shadow: none !important;
@@ -595,8 +579,12 @@ mark {
   }
 }
 
-.zKCotnvYis3lj_IxNd42 svg {
-  height: 2.75rem;
+.zKCotnvYis3lj_IxNd42 {
+  margin-right: var(--space-s);
+
+  svg {
+    height: 3rem;
+  }
 }
 .DY6_kAr5khzv1QwqLveK {
   --track-height: 0.5rem;
@@ -930,11 +918,13 @@ mark {
 }
 
 .R0tWhGzOMnxRvplqamqt {
+  --progress-color: hsl(var(--hue-blue), 100%, 20%);
+
   display: flex;
   align-items: center;
   height: 40px;
   width: 100%;
-  background-image: linear-gradient(to right, var(--active-item-from-bg-color), var(--active-item-from-bg-color));
+  background-image: linear-gradient(to right, var(--progress-color), var(--progress-color));
   background-repeat: no-repeat;
 }
 
@@ -948,10 +938,6 @@ mark {
   color: var(--text-color);
 }
 
-.L3KVVs498s_TTzMFHKn5 {
-  cursor: pointer;
-}
-
 .iL_22Dl4fbuLsQo42o2o {
   color: var(--btn-danger-bg-color);
   filter: var(--btn-danger-filter);
@@ -977,8 +963,13 @@ mark {
 }
 
 @keyframes chycT2sgXRCUDLsKIkuK {
-  0% { background-color: var(--up-next-bg-color-to); }
-  100% { background-color: var(--up-next-bg-color-from); }
+  0% {
+    background-color: var(--up-next-bg-color-to);
+  }
+
+  100% {
+    background-color: var(--up-next-bg-color-from);
+  }
 }
 
 .C9WuYntlaEVvxRaewY7r {
@@ -987,8 +978,13 @@ mark {
 }
 
 @keyframes arEOr6pUTnFXinmiHz2o {
-  0% { background-color: var(--up-now-bg-color-to); }
-  100% { background-color: var(--up-now-bg-color-from); }
+  0% {
+    background-color: var(--up-now-bg-color-to);
+  }
+
+  100% {
+    background-color: var(--up-now-bg-color-from);
+  }
 }
 
 .pXcSEQ5RRGogLr2WCFum {
@@ -1048,7 +1044,7 @@ mark {
 }
 
 .bx9kUlhkDMmCKpxez9Kn {
-  animation: YlMykufEl9xVpOVVrlnC 5s var(--activate-1);
+  animation: YlMykufEl9xVpOVVrlnC 1s var(--activate-1);
 }
 
 @keyframes YlMykufEl9xVpOVVrlnC {
@@ -1303,6 +1299,10 @@ mark {
   margin-right: 5px;
 }
 
+.ZKYWLeUdrki571OMgwqw.zMurrtazRZl6yxeeInn2 svg {
+  color: #E3B341;
+}
+
 .ZKYWLeUdrki571OMgwqw.z6j4SZzTbavwii_DBoa2 svg {
   color: #db61a2;
 }
@@ -1877,6 +1877,10 @@ mark {
     .oqSOn8U_QmqEzSvyfAw_ {
       color: var(--color-gray-5);
     }
+
+    .INKd0vI4DamezRZUfFHO {
+      color: var(--color-gray-4);
+    }
   }
 
   &._t4JBPFRguFbumW7x8D6 {
@@ -1903,11 +1907,13 @@ mark {
 }
 
 .z8K08MurHExDsFH50TjN {
-  cursor: pointer;
   flex: 1;
+  align-self: stretch;
+  align-content: center;
   overflow: hidden;
   white-space: nowrap;
   margin-left: 14px;
+  cursor: pointer;
 }
 
 .oqSOn8U_QmqEzSvyfAw_ {
@@ -2217,7 +2223,6 @@ mark {
 .SUdDbZdeZwQPymCmhaMA {
   button {
     position: relative;
-    /* overflow: hidden; */
     width: var(--queue-item-btn-size);
     height: var(--queue-item-btn-size);
     color: var(--song-item-btn-bg-color);
@@ -2236,19 +2241,28 @@ mark {
   svg {
     width: var(--queue-item-btn-size);
     height: var(--queue-item-btn-size);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
   }
 }
 
 .gh_SYElq5eTJHE5IZynP svg,
-._gt_BEXlOrYwzEmK6sQ8 svg,
 .ENoEOjlwEk0jBI45f4pk svg {
-  position: absolute;
-  top: 50%;
-  left: 50%;
   width: 60px;
   height: 60px;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
+}
+
+._gt_BEXlOrYwzEmK6sQ8 svg {
+  width: 56px;
+  height: 56px;
+}
+
+.sSOYgUUl_mJhj1uPzBFs svg {
+  width: 52px;
+  height: 52px;
 }
 
 .ZRVZZ_1kYEKO36fznW79 {