ecplayer 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ecplayer.es.js +834 -817
- package/dist/ecplayer.umd.js +32 -33
- package/dist/index.d.ts +3 -3
- package/package.json +1 -1
package/dist/ecplayer.es.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ecp-full-width{width:100%}.ecp-h-full{height:100%}.ecp-relative{position:relative}.ecp-absolute{position:absolute}.ecp-inset-0{top:0;right:0;bottom:0;left:0}.ecp-z-10{z-index:10}.ecp-flex{display:flex}.ecp-inline-flex{display:inline-flex}.ecp-flex-col{flex-direction:column}.ecp-flex-wrap{flex-wrap:wrap}.ecp-flex-1{flex:1 1 0%}.ecp-flex-shrink-0{flex-shrink:0}.ecp-grid{display:grid}.ecp-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ecp-hidden{display:none}.ecp-items-center{align-items:center}.ecp-items-end{align-items:flex-end}.ecp-items-start{align-items:flex-start}.ecp-justify-center{justify-content:center}.ecp-justify-between{justify-content:space-between}.ecp-justify-end{justify-content:flex-end}.ecp-justify-start{justify-content:flex-start}.ecp-text-center{text-align:center}.ecp-text-right{text-align:right}.ecp-self-center{align-self:center}.ecp-gap-1{gap:.25rem}.ecp-gap-2{gap:.5rem}.ecp-gap-3{gap:.75rem}.ecp-gap-px{gap:1px}.ecp-gap-05{gap:2px}.ecp-mb-1{margin-bottom:.25rem}.ecp-mb-2{margin-bottom:.5rem}.ecp-mb-4{margin-bottom:1rem}.ecp-mb-6{margin-bottom:1.5rem}.ecp-mr-2{margin-right:.5rem}.ecp-mt-4{margin-top:1rem}.ecp-mt-6{margin-top:1.5rem}.ecp-ml-auto{margin-left:auto}.ecp-p-1{padding:.25rem}.ecp-p-1-5{padding:.375rem}.ecp-p-2{padding:.5rem}.ecp-p-3{padding:.75rem}.ecp-p-4{padding:1rem}.ecp-p-6{padding:1.5rem}.ecp-p-8{padding:2rem}.ecp-px-2{padding-left:.5rem;padding-right:.5rem}.ecp-px-3{padding-left:.75rem;padding-right:.75rem}.ecp-px-4{padding-left:1rem;padding-right:1rem}.ecp-px-6{padding-left:1.5rem;padding-right:1.5rem}.ecp-py-1{padding-top:.25rem;padding-bottom:.25rem}.ecp-py-2{padding-top:.5rem;padding-bottom:.5rem}.ecp-py-3{padding-top:.75rem;padding-bottom:.75rem}.ecp-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.ecp-pb-2{padding-bottom:.5rem}.ecp-pt-2{padding-top:.5rem}.ecp-w-1{width:.25rem}.ecp-w-3{width:.75rem}.ecp-w-4{width:1rem}.ecp-w-10{width:2.5rem}.ecp-w-12{width:3rem}.ecp-w-20{width:5rem}.ecp-w-24{width:6rem}.ecp-w-px{width:1px}.ecp-w-full{width:100%}.ecp-max-w-xs{max-width:20rem}.ecp-max-w-lg{max-width:32rem}.ecp-max-w-4xl{max-width:56rem}.ecp-h-0-5{height:.125rem}.ecp-h-1{height:.25rem}.ecp-h-1-5{height:.375rem}.ecp-h-2{height:.5rem}.ecp-h-3{height:.75rem}.ecp-h-4{height:1rem}.ecp-h-6{height:1.5rem}.ecp-h-8{height:2rem}.ecp-h-10{height:2.5rem}.ecp-h-12{height:3rem}.ecp-h-20{height:5rem}.ecp-h-40{width:10rem;height:40px}.ecp-h-64{height:16rem}.ecp-h-screen{height:100vh}.ecp-min-h-screen{min-height:100vh}.ecp-min-h-0{min-height:0}.ecp-min-w-12{min-width:3rem}.ecp-min-w-0{min-width:0}.ecp-aspect-square{aspect-ratio:1 / 1}.ecp-text-xs{font-size:.75rem;line-height:1rem}.ecp-text-sm{font-size:.875rem;line-height:1.25rem}.ecp-text-lg{font-size:1.125rem;line-height:1.75rem}.ecp-text-2xl{font-size:1.5rem;line-height:2rem}.ecp-font-medium{font-weight:500}.ecp-font-semibold{font-weight:600}.ecp-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.ecp-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ecp-text-white{color:#fff}.ecp-text-transparent{color:transparent}.ecp-text-gray-400{color:#9ca3af}.ecp-text-gray-500{color:#6b7280}.ecp-text-gray-600{color:#4b5563}.ecp-text-gray-700{color:#374151}.ecp-text-gray-800{color:#1f2937}.ecp-text-gray-100{color:#f3f4f6}.ecp-text-gray-200{color:#e5e7eb}.ecp-text-gray-300{color:#d1d5db}.ecp-text-red-500{color:#ef4444}.ecp-dark .ecp-text-dark-100{color:#f3f4f6}.ecp-dark .ecp-text-dark-200{color:#e5e7eb}.ecp-dark .ecp-text-dark-300{color:#d1d5db}.ecp-bg-white{background-color:#fff}.ecp-bg-black-20{background-color:#0003}.ecp-bg-black-30{background-color:#0000004d}.ecp-bg-black-40{background-color:#0006}.ecp-bg-black-50{background-color:#00000080}.ecp-bg-gray-100{background-color:#f3f4f6}.ecp-bg-gray-200{background-color:#e5e7eb}.ecp-bg-gray-300{background-color:#d1d5db}.ecp-bg-gray-700{background-color:#374151}.ecp-bg-gray-800{background-color:#1f2937}.ecp-bg-red-50{background-color:#fef2f2}.ecp-bg-transparent{background-color:transparent}.ecp-border{border-width:1px}.ecp-border-2{border-width:2px}.ecp-border-r{border-right-width:1px}.ecp-border-transparent{border-color:transparent}.ecp-border-gray-300{border-color:#d1d5db}.ecp-border-red-300{border-color:#fca5a5}.ecp-border-current{border-color:currentColor}.ecp-border-none{border:none}.ecp-outline-none{outline:none}.ecp-rounded{border-radius:.25rem}.ecp-rounded-lg{border-radius:.5rem}.ecp-rounded-xl{border-radius:.75rem}.ecp-rounded-2xl{border-radius:1rem}.ecp-rounded-full{border-radius:9999px}.ecp-rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.ecp-shadow-sm{box-shadow:0 1px 2px #0000000d}.ecp-shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.ecp-shadow-2xl{box-shadow:0 25px 50px -12px #00000040}.ecp-opacity-20{opacity:.2}.ecp-opacity-40{opacity:.4}.ecp-opacity-70{opacity:.7}.ecp-opacity-80{opacity:.8}.ecp-cursor-pointer{cursor:pointer}.ecp-cursor-not-allowed{cursor:not-allowed}.ecp-pointer-events-none{pointer-events:none}.ecp-transition{transition-property:color,background-color,border-color,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ecp-transition-all{transition:all .15s cubic-bezier(.4,0,.2,1)}.ecp-duration-75{transition-duration:75ms}.ecp-duration-100{transition-duration:.1s}.ecp-duration-150{transition-duration:.15s}.ecp-duration-300{transition-duration:.3s}.ecp-scale-0{transform:scale(0)}.ecp-translate-y-10{transform:translateY(2.5rem)}.ecp--translate-y-10{transform:translateY(-2.5rem)}.ecp-rotate-180{transform:rotate(180deg)}.ecp-hover-scale-105:hover{transform:scale(1.05)}.ecp-hover-scale-110:hover{transform:scale(1.1)}@keyframes ecp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ecp-animation-spin{animation:ecp-spin 15s infinite linear}.ecp-object-contain{-o-object-fit:contain;object-fit:contain}.ecp-backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.ecp-overflow-hidden{overflow:hidden}.ecp-top-0{top:0}.ecp-left-0{left:0}.ecp-fixed{position:fixed}.ecp-z-9999{z-index:9999}.ecp-appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.ecp-page-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}@media (min-width: 768px){.ecp-page-wrapper{padding:2rem}}.ecp-demo-container{width:100%;height:100%}@media (min-width: 768px){.ecp-demo-container{height:auto;max-width:56rem}}.ecp-container-glass{border-radius:.75rem;padding:2rem}.ecp-demo-header{margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:flex-start}.ecp-demo-title{font-size:1.5rem;font-weight:600;color:#1f2937;margin-bottom:.25rem}.ecp-demo-title--dark{color:#e5e7eb}.ecp-demo-subtitle{font-size:.875rem;color:#6b7280}.ecp-theme-btn{background:#fff;border:1px solid #d1d5db;color:#374151;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem}.ecp-theme-btn:hover{background:#f9fafb}.ecp-demo-actions{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-action-btn{background:#fff;border:1px solid #d1d5db;color:#374151;padding:.5rem 1.5rem;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem}.ecp-action-btn:hover{background:#f9fafb}.ecp-file-input-hidden{display:none}.ecp-theme-selector-panel{border-radius:.75rem;padding:1.5rem;margin-bottom:1.5rem}.ecp-theme-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ecp-theme-selector-title{font-size:1.125rem;font-weight:600;color:#1f2937}.ecp-theme-selector-close{color:#6b7280;font-size:.875rem;font-weight:500;background:none;border:none;cursor:pointer}.ecp-theme-selector-close:hover{color:#374151}.ecp-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}@media (min-width: 640px){.ecp-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 768px){.ecp-theme-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.ecp-theme-card{background:#fff;padding:1rem;border-radius:.5rem;cursor:pointer;border:2px solid transparent;transition:all .15s cubic-bezier(.4,0,.2,1)}.ecp-theme-card--active{border-color:currentColor;box-shadow:0 10px 15px -3px #0000001a}.ecp-theme-color-preview{height:2.5rem;border-radius:.25rem;margin-bottom:.5rem}.ecp-theme-name{font-size:.875rem;font-weight:500;color:#374151}.ecp-vp-wrapper{width:100%;border-radius:.75rem;overflow:hidden}.ecp-vp-bg{padding:1rem}.ecp-vp-vu-outer{position:relative}.ecp-vp-vu-bg{border-radius:.5rem;margin-bottom:1.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d}.ecp-vp-vu-bg--light{background:#ffffffb3}.ecp-vp-vu-bg--dark{background:#0006}.ecp-vp-vu-bg--transparent{background:transparent!important;padding:0!important;box-shadow:none!important}.ecp-vp-vu-bg--dimmed{opacity:.3}.ecp-vp-vu-bg--no-margin{margin-bottom:0}.ecp-vp-vu-bars{display:flex;justify-content:center;align-items:flex-end;gap:.25rem;height:16rem}.ecp-vp-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;justify-content:center;z-index:10;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s cubic-bezier(.4,0,.2,1)}.ecp-vp-eq-overlay--light{background:#ffffffe6}.ecp-vp-eq-overlay--dark{background:#000000b3}.ecp-vp-eq-title{font-size:.875rem;font-weight:500;margin-bottom:1rem}.ecp-vp-eq-title--light{color:#374151}.ecp-vp-eq-title--dark{color:#e5e7eb}.ecp-vp-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-vp-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-vp-eq-band-label{font-size:.75rem}.ecp-vp-eq-band-label--light{color:#4b5563}.ecp-vp-eq-band-label--dark{color:#d1d5db}.ecp-vp-eq-band-range{display:flex;align-items:center;gap:.75rem}.ecp-vp-eq-range-bound{font-size:.75rem}.ecp-vp-eq-range-bound--light{color:#6b7280}.ecp-vp-eq-range-bound--dark{color:#9ca3af}.ecp-vp-eq-slider{flex:1;height:1.5rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-vp-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-vp-eq-footer{display:flex;justify-content:flex-end;margin-top:1rem}.ecp-vp-eq-reset{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;transition:all .15s;border:none}.ecp-vp-eq-reset--light{background:#e5e7eb;color:#374151}.ecp-vp-eq-reset--light:hover{background:#d1d5db}.ecp-vp-eq-reset--dark{background:#374151;color:#e5e7eb}.ecp-vp-eq-reset--dark:hover{background:#4b5563}.ecp-vp-8d-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.ecp-vp-8d-title-group,.ecp-vp-8d-toggle-wrap{display:flex;align-items:center;gap:.5rem}.ecp-vp-8d-toggle-label{font-size:.75rem;font-weight:500}.ecp-vp-8d-toggle-label--light{color:#4b5563}.ecp-vp-8d-toggle-label--dark{color:#d1d5db}.ecp-vp-8d-toggle{position:relative;width:2.75rem;height:1.5rem;border-radius:9999px;background:#d1d5db;cursor:pointer;border:none;transition:background .2s}.ecp-vp-8d-toggle--on{background:var(--theme-slider, #8b5cf6)}.ecp-vp-8d-toggle-thumb{position:absolute;top:.125rem;left:.125rem;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px #0000004d}.ecp-vp-8d-toggle--on .ecp-vp-8d-toggle-thumb{transform:translate(1.25rem)}.ecp-vp-8d-visualizer{position:relative;height:4.5rem;margin-bottom:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden}.ecp-vp-8d-visualizer--light{background:#0000000a}.ecp-vp-8d-visualizer--dark{background:#ffffff0f}.ecp-vp-8d-orbit-ring{position:absolute;width:6rem;height:3rem;border:1.5px dashed var(--theme-slider-alpha, rgba(139, 92, 246, .4));border-radius:50%}.ecp-vp-8d-head-icon{position:relative;z-index:2;color:var(--theme-slider, #8b5cf6)}.ecp-vp-8d-orbit-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--theme-slider, #8b5cf6);box-shadow:0 0 10px var(--theme-slider, #8b5cf6),0 0 15px var(--theme-slider, #8b5cf6);z-index:3}.ecp-vp-8d-live-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:.3rem;pointer-events:none;animation:ecp-8d-badge-blink 2s ease-in-out infinite}.ecp-vp-8d-live-visualizer{position:relative;width:14rem;height:9.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:visible}.ecp-vp-8d-live-visualizer--light{background:#fffd;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 0 20px #0000000d,0 8px 24px #0000000f}.ecp-vp-8d-live-visualizer--dark{background:#0c0c10d8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 0 30px #0006,0 8px 24px #00000040}.ecp-vp-8d-live-glow{position:absolute;width:14rem;height:9.5rem;border-radius:50%;animation:ecp-8d-pulse 2.5s ease-in-out infinite;pointer-events:none;z-index:0}@keyframes ecp-8d-pulse{0%,to{opacity:.3;transform:scale(.92)}50%{opacity:.75;transform:scale(1.08)}}.ecp-vp-8d-live-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.ecp-vp-8d-radar-border{fill:none;stroke:var(--theme-slider, #8b5cf6);stroke-opacity:.25;stroke-width:1.5}.ecp-vp-8d-live-head-icon{position:absolute;z-index:3;filter:drop-shadow(0 0 5px currentColor)}.ecp-vp-8d-live-dot{position:absolute;left:50%;top:50%;width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:50%;z-index:4;display:flex;align-items:center;justify-content:center}.ecp-vp-8d-live-dot-inner{width:5px;height:5px;border-radius:50%;background:#000000bf}@keyframes ecp-8d-badge-blink{0%,to{opacity:1}50%{opacity:.8}}.ecp-vp-8d-tabs{display:flex;gap:.25rem;margin-bottom:.75rem;border-bottom:1px solid rgba(156,163,175,.2);padding-bottom:.25rem}.ecp-vp-8d-tab{padding:.25rem .6rem;font-size:.75rem;font-weight:500;border-radius:.375rem;border:1px solid transparent;background:transparent;cursor:pointer;transition:all .15s}.ecp-vp-8d-tab--light{color:#6b7280}.ecp-vp-8d-tab--light:hover{color:#1f2937;background:#0000000d}.ecp-vp-8d-tab--dark{color:#9ca3af}.ecp-vp-8d-tab--dark:hover{color:#f3f4f6;background:#ffffff14}.ecp-vp-8d-tab--active{background:var(--theme-slider-alpha, rgba(139, 92, 246, .15))!important;color:var(--theme-slider, #8b5cf6)!important;border-color:var(--theme-slider, #8b5cf6)!important}.ecp-vp-8d-controls-grid{display:flex;flex-direction:column;gap:.75rem;padding-top:.25rem}.ecp-vp-eq-bands--horizontal{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.75rem;width:100%}.ecp-vp-eq-band-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0}.ecp-vp-eq-band-col .ecp-vp-eq-slider{height:.5rem;border-radius:9999px}.ecp-vp-eq-band-col .ecp-vp-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer}.ecp-vp-eq-band-col .ecp-vp-eq-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer}.ecp-vp-eq-val{font-size:.75rem;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.ecp-vp-eq-val--light{color:#374151}.ecp-vp-eq-val--dark{color:#f3f4f6}.ecp-vp-eq-label{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.ecp-vp-eq-label--light{color:#6b7280}.ecp-vp-eq-label--dark{color:#9ca3af}.ecp-vp-eq-bar-wrap{width:100%;display:flex;align-items:center}@media (max-width: 640px){.ecp-vp-eq-bands--horizontal{flex-direction:column;gap:.6rem}.ecp-vp-eq-band-col{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:.6rem}.ecp-vp-eq-label{order:1;width:3.5rem;text-align:left;flex-shrink:0}.ecp-vp-eq-bar-wrap{order:2;flex:1}.ecp-vp-eq-val{order:3;width:3.5rem;text-align:right;flex-shrink:0}}.ecp-vp-track{margin-bottom:1.5rem;display:flex;align-items:center}.ecp-vp-thumbnail-wrap{margin-right:.5rem;width:3rem;flex-shrink:0}.ecp-vp-thumbnail{height:3rem;width:3rem;border-radius:9999px}.ecp-vp-track-info{width:100%;min-width:0}.ecp-vp-track-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ecp-vp-track-name--light{color:#374151}.ecp-vp-track-name--dark{color:#f3f4f6}.ecp-vp-track-author{font-size:.75rem}.ecp-vp-track-author--light{color:#6b7280}.ecp-vp-track-author--dark{color:#d1d5db}.ecp-vp-seekbar{margin-bottom:1.5rem}.ecp-vp-seekbar-row{display:flex;align-items:center;gap:.25rem}.ecp-vp-time{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:3rem}.ecp-vp-time--right{text-align:right}.ecp-vp-time--light{color:#4b5563}.ecp-vp-time--dark{color:#f3f4f6}.ecp-vp-seek-input{flex:1;height:.5rem;background:#e5e7eb;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-seek-input:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-seek-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-seek-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-vp-controls--sm{gap:.5rem}.ecp-vp-play-btn{padding:.5rem 1rem;min-width:6rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:opacity .15s}.ecp-vp-play-btn:hover{opacity:.9}.ecp-vp-play-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-play-btn--compact{padding:1.25rem .75rem;min-width:unset}.ecp-vp-play-icon-wrap{position:relative;width:1rem;display:flex;align-items:center}.ecp-vp-stop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-stop-btn--light{background:#374151;color:#fff}.ecp-vp-stop-btn--light:hover{background:#1f2937}.ecp-vp-stop-btn--dark{background:#f3f4f6;color:#000}.ecp-vp-stop-btn--dark:hover{background:#d1d5db}.ecp-vp-stop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-stop-btn--wide{padding:.5rem 1rem}.ecp-vp-eq-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-eq-btn--off{background:#f3f4f6;color:#374151}.ecp-vp-eq-btn--off:hover{background:#d1d5db}.ecp-vp-eq-btn--on{color:#fff}.ecp-vp-eq-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-eq-btn--wide{padding:.5rem 1rem}.ecp-vp-loop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-loop-btn--off{background:#f3f4f6;color:#374151}.ecp-vp-loop-btn--off:hover{background:#d1d5db}.ecp-vp-loop-btn--on{color:#fff}.ecp-vp-loop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-loop-btn--wide{padding:.5rem 1rem}.ecp-vp-loop-icon--active{transform:rotate(180deg)}.ecp-vp-speed-wrap{display:flex;align-items:center}.ecp-vp-speed-select{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;outline:none;cursor:pointer;transition:all .15s;background:transparent}.ecp-vp-speed-select--light{color:#1f2937}.ecp-vp-speed-select--dark{color:#e5e7eb}.ecp-vp-speed-option--light{background:#fff;color:#1f2937}.ecp-vp-speed-option--dark{background:#1f2937;color:#f3f4f6}.ecp-vp-volume{display:flex;align-items:center;gap:.25rem;margin-left:auto}@media (min-width: 768px){.ecp-vp-volume{gap:.75rem}}.ecp-vp-mute-btn{padding:.5rem;border-radius:9999px;background:none;border:none;cursor:pointer;transition:all .15s}.ecp-vp-mute-btn:hover{background:#f3f4f680}.ecp-vp-mute-icon--light{color:#4b5563}.ecp-vp-mute-icon--dark{color:#f3f4f6}.ecp-vp-volume-slider{width:6rem;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}@media (max-width: 460px){.ecp-vp-volume-slider{display:none}}.ecp-vp-volume-pct{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:2.5rem;text-align:right}.ecp-vp-volume-pct--light{color:#374151}.ecp-vp-volume-pct--dark{color:#f3f4f6}.ecp-vp-error{font-size:.875rem;color:#ef4444;background:#fef2f2;padding:.75rem;border-radius:.25rem;margin-bottom:1rem;border:1px solid #fca5a5}.ecp-wave-outer{width:100%;max-width:32rem;position:relative}.ecp-wave-audio-el{display:none}.ecp-wave-card{border-radius:1rem;box-shadow:0 25px 50px -12px #00000040}.ecp-wave-card-inner{border-radius:1rem;padding:1.5rem;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.ecp-wave-thumbnail-wrap{width:100%;padding:1rem}.ecp-wave-thumbnail{width:100%;aspect-ratio:1 / 1;border-radius:.75rem}.ecp-wave-seek{position:relative;height:5rem;margin-bottom:1.5rem;cursor:pointer}.ecp-wave-bars{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;height:100%;width:100%;gap:1px}.ecp-wave-bar{width:.25rem;border-radius:.25rem .25rem 0 0;transition:all .15s}.ecp-wave-progress-line{position:absolute;top:0;height:100%;width:.25rem;background:#fff;border-right:1px solid black;border-radius:9999px;transition:all .15s;transform:translate(-50%)}.ecp-wave-times{display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:1.5rem}.ecp-wave-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;justify-content:space-between;margin-bottom:1rem}.ecp-wave-left-controls{display:flex;align-items:center;gap:.5rem}.ecp-wave-vol-btn{padding:.5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s}.ecp-wave-vol-slider{width:5rem;height:.375rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-wave-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 3px #0003}.ecp-wave-vol-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none}.ecp-wave-center-controls{display:flex;justify-content:center}.ecp-wave-play-btn{padding:1rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s;box-shadow:0 10px 15px -3px #0000001a}.ecp-wave-play-btn:hover{transform:scale(1.05)}.ecp-wave-right-controls{display:flex;align-items:center;gap:.75rem}.ecp-wave-speed-select{padding:.25rem .5rem;border-radius:.5rem;font-size:.875rem;border:none;cursor:pointer}.ecp-wave-speed-select--light{background:#f3f4f6;color:#374151}.ecp-wave-speed-select--dark{background:#1f2937;color:#f3f4f6}.ecp-wave-eq-btn{padding:.5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s}.ecp-wave-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0003;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:1rem;padding:1rem}.ecp-wave-eq-panel{max-width:20rem;width:100%;padding:.5rem 1rem 1rem;border-radius:.75rem}.ecp-wave-eq-panel--light{background:#fff}.ecp-wave-eq-panel--dark{background:#1f2937}.ecp-wave-eq-title{font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.ecp-wave-eq-title--light{color:#374151}.ecp-wave-eq-title--dark{color:#e5e7eb}.ecp-wave-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-wave-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-wave-eq-label--light{font-size:.75rem;color:#4b5563}.ecp-wave-eq-label--dark{font-size:.75rem;color:#d1d5db}.ecp-wave-eq-range-row{display:flex;align-items:center;gap:.75rem}.ecp-wave-eq-bound--light{font-size:.75rem;color:#6b7280}.ecp-wave-eq-bound--dark{font-size:.75rem;color:#9ca3af}.ecp-wave-eq-slider{flex:1;height:1rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-wave-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-wave-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none}.ecp-wave-eq-footer{display:flex;justify-content:space-between;margin-top:1.5rem}.ecp-wave-eq-footer-btn{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;border:none;transition:all .15s}.ecp-wave-eq-footer-btn--light{background:#e5e7eb;color:#374151}.ecp-wave-eq-footer-btn--light:hover{background:#d1d5db}.ecp-wave-eq-footer-btn--dark{background:#374151;color:#e5e7eb}.ecp-wave-eq-footer-btn--dark:hover{background:#4b5563}.ecp-wave-error{padding:1.5rem;border-radius:.75rem;text-align:center}.ecp-wave-error-title{font-weight:500}.ecp-wave-error-msg{font-size:.875rem}.ecp-wave-error--light{color:#dc2626}.ecp-wave-error--dark{color:#fca5a5}.ecp-nano-wrapper{position:relative;overflow:hidden;display:inline-flex;flex-direction:column;padding:.5rem .75rem;box-shadow:0 10px 15px -3px #0000001a}.ecp-nano-wrapper--pill{border-radius:9999px;width:110px;height:40px}.ecp-nano-wrapper--card{border-radius:1rem;width:120px;height:150px}.ecp-nano-progress-bg{position:absolute;top:0;left:0;height:100%;opacity:.2}.ecp-nano-content{position:absolute;display:flex;flex-direction:column}.ecp-nano-thumbnail-wrap{width:6rem;padding-bottom:.5rem}.ecp-nano-thumbnail{width:6rem;aspect-ratio:1 / 1;border-radius:.75rem}.ecp-nano-row{display:flex;align-items:center;gap:.5rem}.ecp-nano-play-btn{padding:.375rem;border-radius:9999px;border:none;cursor:pointer;flex-shrink:0;transition:transform .15s}.ecp-nano-play-btn:hover{transform:scale(1.1)}.ecp-nano-waveform{display:flex;width:100%;min-width:3rem;align-items:center;gap:2px;height:1.5rem}.ecp-nano-wave-bar{border-radius:9999px;width:100%;transition:height .2s}.ecp-video-wrapper{border-radius:.75rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.ecp-video-wrapper--fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;height:100vh;width:100vw;background:#000}.ecp-video-inner{height:auto}.ecp-video-inner--fullscreen{display:flex;flex-direction:column;flex:1;min-height:0}.ecp-video-inner--padded{padding:1rem}.ecp-video-name{margin-bottom:1rem;font-weight:500}.ecp-video-name--light{color:#374151}.ecp-video-name--dark{color:#f3f4f6}.ecp-video-layout{position:relative;margin-bottom:1rem}.ecp-video-layout--row{display:flex;gap:.75rem}.ecp-video-layout--col{display:flex;flex-direction:column;gap:.75rem}.ecp-video-layout--fullscreen{flex:1;min-height:0}.ecp-video-vu-top,.ecp-video-vu-bottom{width:100%;height:3rem}.ecp-video-vu-side{width:3rem;background:#00000080;border-radius:.5rem;padding:.25rem}.ecp-video-el-wrap{flex:1;border-radius:.5rem;overflow:hidden;position:relative}.ecp-video-el-wrap--light{background:#ffffffb3}.ecp-video-el-wrap--dark{background:#000000b3}.ecp-video-el{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.ecp-video-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;justify-content:center;z-index:10;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s}.ecp-video-eq-panel{max-width:600px;width:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:center;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s}.ecp-video-eq-panel--light{background:#fffc}.ecp-video-eq-panel--dark{background:#000000b3}.ecp-video-eq-title{font-size:.875rem;font-weight:500;margin-bottom:1rem}.ecp-video-eq-title--light{color:#374151}.ecp-video-eq-title--dark{color:#e5e7eb}.ecp-video-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-video-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-video-eq-label--light{font-size:.75rem;color:#4b5563}.ecp-video-eq-label--dark{font-size:.75rem;color:#d1d5db}.ecp-video-eq-range-row{display:flex;align-items:center;gap:.75rem}.ecp-video-eq-bound--light{font-size:.75rem;color:#6b7280}.ecp-video-eq-bound--dark{font-size:.75rem;color:#9ca3af}.ecp-video-eq-slider{flex:1;height:1.5rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-video-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none}.ecp-video-eq-footer{display:flex;justify-content:space-between;margin-top:1.5rem}.ecp-video-eq-footer-btn{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;border:none;transition:all .15s}.ecp-video-eq-footer-btn--light{background:#e5e7eb;color:#374151}.ecp-video-eq-footer-btn--light:hover{background:#d1d5db}.ecp-video-eq-footer-btn--dark{background:#374151;color:#e5e7eb}.ecp-video-eq-footer-btn--dark:hover{background:#4b5563}.ecp-video-seekbar{margin-bottom:1rem}.ecp-video-seekbar--fullscreen{margin-top:.75rem}.ecp-video-seekbar-row{display:flex;align-items:center;gap:.75rem}.ecp-video-time{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:3rem}.ecp-video-time--right{text-align:right}.ecp-video-time--light{color:#4b5563}.ecp-video-time--dark{color:#f3f4f6}.ecp-video-seek-input{flex:1;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-seek-input:disabled{opacity:.4;cursor:not-allowed}.ecp-video-seek-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-seek-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-video-play-btn{border-radius:9999px;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:opacity .15s;padding:.5rem 1rem}.ecp-video-play-btn:hover{opacity:.9}.ecp-video-play-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-play-btn--compact{padding:1.25rem .75rem}.ecp-video-play-icon-wrap{position:relative;width:1rem;display:flex;align-items:center}.ecp-video-stop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-video-stop-btn--light{background:#374151;color:#fff}.ecp-video-stop-btn--light:hover{background:#1f2937}.ecp-video-stop-btn--dark{background:#f3f4f6;color:#000}.ecp-video-stop-btn--dark:hover{background:#d1d5db}.ecp-video-stop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-fullscreen-btn{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s;padding:.75rem}.ecp-video-fullscreen-btn--light{background:#374151;color:#fff}.ecp-video-fullscreen-btn--light:hover{background:#1f2937}.ecp-video-fullscreen-btn--dark{background:#f3f4f6;color:#000}.ecp-video-fullscreen-btn--dark:hover{background:#d1d5db}.ecp-video-fullscreen-btn--wide{padding:.5rem 1rem}.ecp-video-eq-toggle-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-video-eq-toggle-btn--off{background:#f3f4f6;color:#374151}.ecp-video-eq-toggle-btn--off:hover{background:#d1d5db}.ecp-video-eq-toggle-btn--on{color:#fff}.ecp-video-eq-toggle-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-eq-toggle-btn--wide{padding:.5rem 1rem}.ecp-video-speed-wrap{display:flex;align-items:center}.ecp-video-speed-select{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;outline:none;cursor:pointer;background:transparent;transition:all .15s}.ecp-video-speed-select--light{color:#1f2937}.ecp-video-speed-select--dark{color:#e5e7eb}.ecp-video-speed-option--light{background:#f3f4f6;color:#1f2937}.ecp-video-speed-option--dark{background:#1f2937;color:#f3f4f6}.ecp-video-volume{display:flex;align-items:center;gap:.25rem;margin-left:auto}@media (min-width: 768px){.ecp-video-volume{gap:.75rem}}.ecp-video-mute-btn{padding:.5rem;border-radius:.5rem;background:none;border:none;cursor:pointer;transition:all .15s}.ecp-video-mute-btn:hover{background:#f3f4f6}.ecp-video-mute-icon--light{color:#4b5563}.ecp-video-mute-icon--dark{color:#f3f4f6}.ecp-video-vol-slider{width:6rem;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-vol-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}@media (max-width: 460px){.ecp-video-vol-slider{display:none}}.ecp-video-vol-pct{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:2.5rem;text-align:right}.ecp-video-vol-pct--light{color:#374151}.ecp-video-vol-pct--dark{color:#f3f4f6}.ecp-video-error{font-size:.875rem;color:#ef4444;background:#fef2f2;padding:.75rem;border-radius:.25rem;margin-bottom:1rem;border:1px solid #fca5a5}.ecp-vu-bar-wrap{flex:1;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.ecp-vu-bar-fill{border-radius:.25rem .25rem 0 0;transition:height 75ms}.ecp-vu-peak-line{position:absolute;width:100%;height:2px;transition:top .1s}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
|
-
import { jsx as e, Fragment as
|
|
3
|
-
import { forwardRef as
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ecp-full-width{width:100%}.ecp-h-full{height:100%}.ecp-relative{position:relative}.ecp-absolute{position:absolute}.ecp-inset-0{top:0;right:0;bottom:0;left:0}.ecp-z-10{z-index:10}.ecp-flex{display:flex}.ecp-inline-flex{display:inline-flex}.ecp-flex-col{flex-direction:column}.ecp-flex-wrap{flex-wrap:wrap}.ecp-flex-1{flex:1 1 0%}.ecp-flex-shrink-0{flex-shrink:0}.ecp-grid{display:grid}.ecp-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ecp-hidden{display:none}.ecp-items-center{align-items:center}.ecp-items-end{align-items:flex-end}.ecp-items-start{align-items:flex-start}.ecp-justify-center{justify-content:center}.ecp-justify-between{justify-content:space-between}.ecp-justify-end{justify-content:flex-end}.ecp-justify-start{justify-content:flex-start}.ecp-text-center{text-align:center}.ecp-text-right{text-align:right}.ecp-self-center{align-self:center}.ecp-gap-1{gap:.25rem}.ecp-gap-2{gap:.5rem}.ecp-gap-3{gap:.75rem}.ecp-gap-px{gap:1px}.ecp-gap-05{gap:2px}.ecp-mb-1{margin-bottom:.25rem}.ecp-mb-2{margin-bottom:.5rem}.ecp-mb-4{margin-bottom:1rem}.ecp-mb-6{margin-bottom:1.5rem}.ecp-mr-2{margin-right:.5rem}.ecp-mt-4{margin-top:1rem}.ecp-mt-6{margin-top:1.5rem}.ecp-ml-auto{margin-left:auto}.ecp-p-1{padding:.25rem}.ecp-p-1-5{padding:.375rem}.ecp-p-2{padding:.5rem}.ecp-p-3{padding:.75rem}.ecp-p-4{padding:1rem}.ecp-p-6{padding:1.5rem}.ecp-p-8{padding:2rem}.ecp-px-2{padding-left:.5rem;padding-right:.5rem}.ecp-px-3{padding-left:.75rem;padding-right:.75rem}.ecp-px-4{padding-left:1rem;padding-right:1rem}.ecp-px-6{padding-left:1.5rem;padding-right:1.5rem}.ecp-py-1{padding-top:.25rem;padding-bottom:.25rem}.ecp-py-2{padding-top:.5rem;padding-bottom:.5rem}.ecp-py-3{padding-top:.75rem;padding-bottom:.75rem}.ecp-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.ecp-pb-2{padding-bottom:.5rem}.ecp-pt-2{padding-top:.5rem}.ecp-w-1{width:.25rem}.ecp-w-3{width:.75rem}.ecp-w-4{width:1rem}.ecp-w-10{width:2.5rem}.ecp-w-12{width:3rem}.ecp-w-20{width:5rem}.ecp-w-24{width:6rem}.ecp-w-px{width:1px}.ecp-w-full{width:100%}.ecp-max-w-xs{max-width:20rem}.ecp-max-w-lg{max-width:32rem}.ecp-max-w-4xl{max-width:56rem}.ecp-h-0-5{height:.125rem}.ecp-h-1{height:.25rem}.ecp-h-1-5{height:.375rem}.ecp-h-2{height:.5rem}.ecp-h-3{height:.75rem}.ecp-h-4{height:1rem}.ecp-h-6{height:1.5rem}.ecp-h-8{height:2rem}.ecp-h-10{height:2.5rem}.ecp-h-12{height:3rem}.ecp-h-20{height:5rem}.ecp-h-40{width:10rem;height:40px}.ecp-h-64{height:16rem}.ecp-h-screen{height:100vh}.ecp-min-h-screen{min-height:100vh}.ecp-min-h-0{min-height:0}.ecp-min-w-12{min-width:3rem}.ecp-min-w-0{min-width:0}.ecp-aspect-square{aspect-ratio:1 / 1}.ecp-text-xs{font-size:.75rem;line-height:1rem}.ecp-text-sm{font-size:.875rem;line-height:1.25rem}.ecp-text-lg{font-size:1.125rem;line-height:1.75rem}.ecp-text-2xl{font-size:1.5rem;line-height:2rem}.ecp-font-medium{font-weight:500}.ecp-font-semibold{font-weight:600}.ecp-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.ecp-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ecp-text-white{color:#fff}.ecp-text-transparent{color:transparent}.ecp-text-gray-400{color:#9ca3af}.ecp-text-gray-500{color:#6b7280}.ecp-text-gray-600{color:#4b5563}.ecp-text-gray-700{color:#374151}.ecp-text-gray-800{color:#1f2937}.ecp-text-gray-100{color:#f3f4f6}.ecp-text-gray-200{color:#e5e7eb}.ecp-text-gray-300{color:#d1d5db}.ecp-text-red-500{color:#ef4444}.ecp-dark .ecp-text-dark-100{color:#f3f4f6}.ecp-dark .ecp-text-dark-200{color:#e5e7eb}.ecp-dark .ecp-text-dark-300{color:#d1d5db}.ecp-bg-white{background-color:#fff}.ecp-bg-black-20{background-color:#0003}.ecp-bg-black-30{background-color:#0000004d}.ecp-bg-black-40{background-color:#0006}.ecp-bg-black-50{background-color:#00000080}.ecp-bg-gray-100{background-color:#f3f4f6}.ecp-bg-gray-200{background-color:#e5e7eb}.ecp-bg-gray-300{background-color:#d1d5db}.ecp-bg-gray-700{background-color:#374151}.ecp-bg-gray-800{background-color:#1f2937}.ecp-bg-red-50{background-color:#fef2f2}.ecp-bg-transparent{background-color:transparent}.ecp-border{border-width:1px}.ecp-border-2{border-width:2px}.ecp-border-r{border-right-width:1px}.ecp-border-transparent{border-color:transparent}.ecp-border-gray-300{border-color:#d1d5db}.ecp-border-red-300{border-color:#fca5a5}.ecp-border-current{border-color:currentColor}.ecp-border-none{border:none}.ecp-outline-none{outline:none}.ecp-rounded{border-radius:.25rem}.ecp-rounded-lg{border-radius:.5rem}.ecp-rounded-xl{border-radius:.75rem}.ecp-rounded-2xl{border-radius:1rem}.ecp-rounded-full{border-radius:9999px}.ecp-rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.ecp-shadow-sm{box-shadow:0 1px 2px #0000000d}.ecp-shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.ecp-shadow-2xl{box-shadow:0 25px 50px -12px #00000040}.ecp-opacity-20{opacity:.2}.ecp-opacity-40{opacity:.4}.ecp-opacity-70{opacity:.7}.ecp-opacity-80{opacity:.8}.ecp-cursor-pointer{cursor:pointer}.ecp-cursor-not-allowed{cursor:not-allowed}.ecp-pointer-events-none{pointer-events:none}.ecp-transition{transition-property:color,background-color,border-color,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ecp-transition-all{transition:all .15s cubic-bezier(.4,0,.2,1)}.ecp-duration-75{transition-duration:75ms}.ecp-duration-100{transition-duration:.1s}.ecp-duration-150{transition-duration:.15s}.ecp-duration-300{transition-duration:.3s}.ecp-scale-0{transform:scale(0)}.ecp-translate-y-10{transform:translateY(2.5rem)}.ecp--translate-y-10{transform:translateY(-2.5rem)}.ecp-rotate-180{transform:rotate(180deg)}.ecp-hover-scale-105:hover{transform:scale(1.05)}.ecp-hover-scale-110:hover{transform:scale(1.1)}@keyframes ecp-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ecp-animation-spin{animation:ecp-spin 15s infinite linear}.ecp-object-contain{-o-object-fit:contain;object-fit:contain}.ecp-backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.ecp-overflow-hidden{overflow:hidden}.ecp-top-0{top:0}.ecp-left-0{left:0}.ecp-fixed{position:fixed}.ecp-z-9999{z-index:9999}.ecp-appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.ecp-page-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}@media (min-width: 768px){.ecp-page-wrapper{padding:2rem}}.ecp-demo-container{width:100%;height:100%}@media (min-width: 768px){.ecp-demo-container{height:auto;max-width:56rem}}.ecp-container-glass{border-radius:.75rem;padding:2rem}.ecp-demo-header{margin-bottom:1.5rem;display:flex;justify-content:space-between;align-items:flex-start}.ecp-demo-title{font-size:1.5rem;font-weight:600;color:#1f2937;margin-bottom:.25rem}.ecp-demo-title--dark{color:#e5e7eb}.ecp-demo-subtitle{font-size:.875rem;color:#6b7280}.ecp-theme-btn{background:#fff;border:1px solid #d1d5db;color:#374151;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem}.ecp-theme-btn:hover{background:#f9fafb}.ecp-demo-actions{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-action-btn{background:#fff;border:1px solid #d1d5db;color:#374151;padding:.5rem 1.5rem;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem}.ecp-action-btn:hover{background:#f9fafb}.ecp-file-input-hidden{display:none}.ecp-theme-selector-panel{border-radius:.75rem;padding:1.5rem;margin-bottom:1.5rem}.ecp-theme-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ecp-theme-selector-title{font-size:1.125rem;font-weight:600;color:#1f2937}.ecp-theme-selector-close{color:#6b7280;font-size:.875rem;font-weight:500;background:none;border:none;cursor:pointer}.ecp-theme-selector-close:hover{color:#374151}.ecp-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}@media (min-width: 640px){.ecp-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 768px){.ecp-theme-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.ecp-theme-card{background:#fff;padding:1rem;border-radius:.5rem;cursor:pointer;border:2px solid transparent;transition:all .15s cubic-bezier(.4,0,.2,1)}.ecp-theme-card--active{border-color:currentColor;box-shadow:0 10px 15px -3px #0000001a}.ecp-theme-color-preview{height:2.5rem;border-radius:.25rem;margin-bottom:.5rem}.ecp-theme-name{font-size:.875rem;font-weight:500;color:#374151}.ecp-vp-wrapper{width:100%;border-radius:.75rem;overflow:hidden}.ecp-vp-bg{padding:1rem}.ecp-vp-vu-outer{position:relative}.ecp-vp-vu-bg{border-radius:.5rem;margin-bottom:1.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d}.ecp-vp-vu-bg--light{background:#ffffffb3}.ecp-vp-vu-bg--dark{background:#0006}.ecp-vp-vu-bg--transparent{background:transparent!important;padding:0!important;box-shadow:none!important}.ecp-vp-vu-bg--dimmed{opacity:.55}.ecp-vp-vu-bg--no-margin{margin-bottom:0}.ecp-vp-vu-bars{display:flex;justify-content:center;align-items:flex-end;gap:.25rem;height:16rem}.ecp-vp-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;justify-content:center;z-index:10;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.ecp-vp-eq-overlay--light{background:#ffffffa6}.ecp-vp-eq-overlay--dark{background:#1212188c}.ecp-vp-eq-title{font-size:.875rem;font-weight:500;margin-bottom:1rem}.ecp-vp-eq-title--light{color:#374151}.ecp-vp-eq-title--dark{color:#e5e7eb}.ecp-vp-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-vp-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.02rem}.ecp-vp-eq-band-label{font-size:.75rem}.ecp-vp-eq-band-label--light{color:#4b5563}.ecp-vp-eq-band-label--dark{color:#d1d5db}.ecp-vp-eq-band-range{display:flex;align-items:center;gap:.75rem}.ecp-vp-eq-range-bound{font-size:.75rem}.ecp-vp-eq-range-bound--light{color:#6b7280}.ecp-vp-eq-range-bound--dark{color:#9ca3af}.ecp-vp-eq-slider{flex:1;height:1.5rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-vp-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-vp-eq-footer{display:flex;justify-content:flex-end;margin-top:1rem}.ecp-vp-eq-reset{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;transition:all .15s;border:none}.ecp-vp-eq-reset--light{background:#e5e7eb;color:#374151}.ecp-vp-eq-reset--light:hover{background:#d1d5db}.ecp-vp-eq-reset--dark{background:#374151;color:#e5e7eb}.ecp-vp-eq-reset--dark:hover{background:#4b5563}.ecp-vp-8d-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.ecp-vp-8d-title-group,.ecp-vp-8d-toggle-wrap{display:flex;align-items:center;gap:.5rem}.ecp-vp-8d-toggle-label{font-size:.75rem;font-weight:500}.ecp-vp-8d-toggle-label--light{color:#4b5563}.ecp-vp-8d-toggle-label--dark{color:#d1d5db}.ecp-vp-8d-toggle{position:relative;width:2.75rem;height:1.5rem;border-radius:9999px;background:#d1d5db;cursor:pointer;border:none;transition:background .2s}.ecp-vp-8d-toggle--on{background:var(--theme-slider, #8b5cf6)}.ecp-vp-8d-toggle-thumb{position:absolute;top:.125rem;left:.125rem;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px #0000004d}.ecp-vp-8d-toggle--on .ecp-vp-8d-toggle-thumb{transform:translate(1.25rem)}.ecp-vp-8d-visualizer{position:relative;height:4.5rem;margin-bottom:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden}.ecp-vp-8d-visualizer--light{background:#0000000a}.ecp-vp-8d-visualizer--dark{background:#ffffff0f}.ecp-vp-8d-orbit-ring{position:absolute;width:6rem;height:3rem;border:1.5px dashed var(--theme-slider-alpha, rgba(139, 92, 246, .4));border-radius:50%}.ecp-vp-8d-head-icon{position:relative;z-index:2;color:var(--theme-slider, #8b5cf6)}.ecp-vp-8d-orbit-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--theme-slider, #8b5cf6);box-shadow:0 0 10px var(--theme-slider, #8b5cf6),0 0 15px var(--theme-slider, #8b5cf6);z-index:3}.ecp-vp-8d-live-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:.3rem;pointer-events:none;animation:ecp-8d-badge-blink 2s ease-in-out infinite}.ecp-vp-8d-live-visualizer{position:relative;width:14rem;height:9.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:visible}.ecp-vp-8d-live-visualizer--light{background:#fffffff9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 0 20px #0000000d,0 8px 24px #0000000f}.ecp-vp-8d-live-visualizer--dark{background:#0c0c10ee;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 0 30px #0006,0 8px 24px #00000040}.ecp-vp-8d-live-glow{position:absolute;width:14rem;height:9.5rem;border-radius:50%;animation:ecp-8d-pulse 2.5s ease-in-out infinite;pointer-events:none;z-index:0}@keyframes ecp-8d-pulse{0%,to{opacity:.3;transform:scale(.92)}50%{opacity:.75;transform:scale(1.08)}}.ecp-vp-8d-live-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.ecp-vp-8d-radar-border{fill:none;stroke:var(--theme-slider, #8b5cf6);stroke-opacity:.25;stroke-width:1.5}.ecp-vp-8d-live-head-icon{position:absolute;z-index:3;filter:drop-shadow(0 0 5px currentColor)}.ecp-vp-8d-live-dot{position:absolute;left:50%;top:50%;width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:50%;z-index:4;display:flex;align-items:center;justify-content:center}.ecp-vp-8d-live-dot-inner{width:5px;height:5px;border-radius:50%;background:#000000bf}@keyframes ecp-8d-badge-blink{0%,to{opacity:1}50%{opacity:.85}}.ecp-vp-8d-tabs{display:flex;gap:.25rem;margin-bottom:.75rem;border-bottom:1px solid rgba(156,163,175,.2);padding-bottom:.25rem}.ecp-vp-8d-tab{padding:.25rem .6rem;font-size:.75rem;font-weight:500;border-radius:.375rem;border:1px solid transparent;background:transparent;cursor:pointer;transition:all .15s}.ecp-vp-8d-tab--light{color:#6b7280}.ecp-vp-8d-tab--light:hover{color:#1f2937;background:#0000000d}.ecp-vp-8d-tab--dark{color:#9ca3af}.ecp-vp-8d-tab--dark:hover{color:#f3f4f6;background:#ffffff14}.ecp-vp-8d-tab--active{background:var(--theme-slider-alpha, rgba(139, 92, 246, .15))!important;color:var(--theme-slider, #8b5cf6)!important;border-color:var(--theme-slider, #8b5cf6)!important}.ecp-vp-8d-controls-grid{display:flex;flex-direction:column;gap:.75rem;padding-top:.25rem}.ecp-vp-eq-bands--horizontal{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.75rem;width:100%}.ecp-vp-eq-band-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0}.ecp-vp-eq-band-col .ecp-vp-eq-slider{height:.5rem;border-radius:9999px}.ecp-vp-eq-band-col .ecp-vp-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer}.ecp-vp-eq-band-col .ecp-vp-eq-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer}.ecp-vp-eq-val{font-size:.75rem;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.ecp-vp-eq-val--light{color:#374151}.ecp-vp-eq-val--dark{color:#f3f4f6}.ecp-vp-eq-label{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.ecp-vp-eq-label--light{color:#6b7280}.ecp-vp-eq-label--dark{color:#9ca3af}.ecp-vp-eq-bar-wrap{width:100%;display:flex;align-items:center}@media (max-width: 640px){.ecp-vp-eq-bands--horizontal{flex-direction:column;gap:.6rem}.ecp-vp-eq-band-col{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:.6rem}.ecp-vp-eq-label{order:1;width:3.5rem;text-align:left;flex-shrink:0}.ecp-vp-eq-bar-wrap{order:2;flex:1}.ecp-vp-eq-val{order:3;width:3.5rem;text-align:right;flex-shrink:0}}.ecp-vp-track{margin-bottom:1.5rem;display:flex;align-items:center}.ecp-vp-thumbnail-wrap{margin-right:.5rem;width:3rem;flex-shrink:0}.ecp-vp-thumbnail{height:3rem;width:3rem;border-radius:9999px}.ecp-vp-track-info{width:100%;min-width:0}.ecp-vp-track-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ecp-vp-track-name--light{color:#374151}.ecp-vp-track-name--dark{color:#f3f4f6}.ecp-vp-track-author{font-size:.75rem}.ecp-vp-track-author--light{color:#6b7280}.ecp-vp-track-author--dark{color:#d1d5db}.ecp-vp-seekbar{margin-bottom:1.5rem}.ecp-vp-seekbar-row{display:flex;align-items:center;gap:.25rem}.ecp-vp-time{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:3rem}.ecp-vp-time--right{text-align:right}.ecp-vp-time--light{color:#4b5563}.ecp-vp-time--dark{color:#f3f4f6}.ecp-vp-seek-input{flex:1;height:.5rem;background:#e5e7eb;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-seek-input:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-seek-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-seek-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-vp-controls--sm{gap:.5rem}.ecp-vp-play-btn{padding:.5rem 1rem;min-width:6rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:opacity .15s}.ecp-vp-play-btn:hover{opacity:.9}.ecp-vp-play-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-play-btn--compact{padding:1.25rem .75rem;min-width:unset}.ecp-vp-play-icon-wrap{position:relative;width:1rem;display:flex;align-items:center}.ecp-vp-stop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-stop-btn--light{background:#374151;color:#fff}.ecp-vp-stop-btn--light:hover{background:#1f2937}.ecp-vp-stop-btn--dark{background:#f3f4f6;color:#000}.ecp-vp-stop-btn--dark:hover{background:#d1d5db}.ecp-vp-stop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-stop-btn--wide{padding:.5rem 1rem}.ecp-vp-eq-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-eq-btn--off{background:#f3f4f6;color:#374151}.ecp-vp-eq-btn--off:hover{background:#d1d5db}.ecp-vp-eq-btn--on{color:#fff}.ecp-vp-eq-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-eq-btn--wide{padding:.5rem 1rem}.ecp-vp-loop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-vp-loop-btn--off{background:#f3f4f6;color:#374151}.ecp-vp-loop-btn--off:hover{background:#d1d5db}.ecp-vp-loop-btn--on{color:#fff}.ecp-vp-loop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-vp-loop-btn--wide{padding:.5rem 1rem}.ecp-vp-loop-icon--active{transform:rotate(180deg)}.ecp-vp-speed-wrap{display:flex;align-items:center}.ecp-vp-speed-select{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;outline:none;cursor:pointer;transition:all .15s;background:transparent}.ecp-vp-speed-select--light{color:#1f2937}.ecp-vp-speed-select--dark{color:#e5e7eb}.ecp-vp-speed-option--light{background:#fff;color:#1f2937}.ecp-vp-speed-option--dark{background:#1f2937;color:#f3f4f6}.ecp-vp-volume{display:flex;align-items:center;gap:.25rem;margin-left:auto}@media (min-width: 768px){.ecp-vp-volume{gap:.75rem}}.ecp-vp-mute-btn{padding:.5rem;border-radius:9999px;background:none;border:none;cursor:pointer;transition:all .15s}.ecp-vp-mute-btn:hover{background:#f3f4f680}.ecp-vp-mute-icon--light{color:#4b5563}.ecp-vp-mute-icon--dark{color:#f3f4f6}.ecp-vp-volume-slider{width:6rem;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-vp-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-vp-volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}@media (max-width: 460px){.ecp-vp-volume-slider{display:none}}.ecp-vp-volume-pct{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:2.5rem;text-align:right}.ecp-vp-volume-pct--light{color:#374151}.ecp-vp-volume-pct--dark{color:#f3f4f6}.ecp-vp-error{font-size:.875rem;color:#ef4444;background:#fef2f2;padding:.75rem;border-radius:.25rem;margin-bottom:1rem;border:1px solid #fca5a5}.ecp-wave-outer{width:100%;max-width:32rem;position:relative}.ecp-wave-audio-el{display:none}.ecp-wave-card{border-radius:1rem;box-shadow:0 25px 50px -12px #00000040}.ecp-wave-card-inner{border-radius:1rem;padding:1.5rem;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.ecp-wave-thumbnail-wrap{width:100%;padding:1rem}.ecp-wave-thumbnail{width:100%;aspect-ratio:1 / 1;border-radius:.75rem}.ecp-wave-seek{position:relative;height:5rem;margin-bottom:1.5rem;cursor:pointer}.ecp-wave-bars{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;height:100%;width:100%;gap:1px}.ecp-wave-bar{width:.25rem;border-radius:.25rem .25rem 0 0;transition:all .15s}.ecp-wave-progress-line{position:absolute;top:0;height:100%;width:.25rem;background:#fff;border-right:1px solid black;border-radius:9999px;transition:all .15s;transform:translate(-50%)}.ecp-wave-times{display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:1.5rem}.ecp-wave-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;justify-content:space-between;margin-bottom:1rem}.ecp-wave-left-controls{display:flex;align-items:center;gap:.5rem}.ecp-wave-vol-btn{padding:.5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s}.ecp-wave-vol-slider{width:5rem;height:.375rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-wave-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 1px 3px #0003}.ecp-wave-vol-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none}.ecp-wave-center-controls{display:flex;justify-content:center}.ecp-wave-play-btn{padding:1rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s;box-shadow:0 10px 15px -3px #0000001a}.ecp-wave-play-btn:hover{transform:scale(1.05)}.ecp-wave-right-controls{display:flex;align-items:center;gap:.75rem}.ecp-wave-speed-select{padding:.25rem .5rem;border-radius:.5rem;font-size:.875rem;border:none;cursor:pointer}.ecp-wave-speed-select--light{background:#f3f4f6;color:#374151}.ecp-wave-speed-select--dark{background:#1f2937;color:#f3f4f6}.ecp-wave-eq-btn{padding:.5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .15s}.ecp-wave-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0003;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:1rem;padding:1rem}.ecp-wave-eq-panel{max-width:20rem;width:100%;padding:.5rem 1rem 1rem;border-radius:.75rem}.ecp-wave-eq-panel--light{background:#fff}.ecp-wave-eq-panel--dark{background:#1f2937}.ecp-wave-eq-title{font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.ecp-wave-eq-title--light{color:#374151}.ecp-wave-eq-title--dark{color:#e5e7eb}.ecp-wave-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-wave-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-wave-eq-label--light{font-size:.75rem;color:#4b5563}.ecp-wave-eq-label--dark{font-size:.75rem;color:#d1d5db}.ecp-wave-eq-range-row{display:flex;align-items:center;gap:.75rem}.ecp-wave-eq-bound--light{font-size:.75rem;color:#6b7280}.ecp-wave-eq-bound--dark{font-size:.75rem;color:#9ca3af}.ecp-wave-eq-slider{flex:1;height:1rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-wave-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-wave-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none}.ecp-wave-eq-footer{display:flex;justify-content:space-between;margin-top:1.5rem}.ecp-wave-eq-footer-btn{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;border:none;transition:all .15s}.ecp-wave-eq-footer-btn--light{background:#e5e7eb;color:#374151}.ecp-wave-eq-footer-btn--light:hover{background:#d1d5db}.ecp-wave-eq-footer-btn--dark{background:#374151;color:#e5e7eb}.ecp-wave-eq-footer-btn--dark:hover{background:#4b5563}.ecp-wave-error{padding:1.5rem;border-radius:.75rem;text-align:center}.ecp-wave-error-title{font-weight:500}.ecp-wave-error-msg{font-size:.875rem}.ecp-wave-error--light{color:#dc2626}.ecp-wave-error--dark{color:#fca5a5}.ecp-nano-wrapper{position:relative;overflow:hidden;display:inline-flex;flex-direction:column;padding:.5rem .75rem;box-shadow:0 10px 15px -3px #0000001a}.ecp-nano-wrapper--pill{border-radius:9999px;width:110px;height:40px}.ecp-nano-wrapper--card{border-radius:1rem;width:120px;height:150px}.ecp-nano-progress-bg{position:absolute;top:0;left:0;height:100%;opacity:.2}.ecp-nano-content{position:absolute;display:flex;flex-direction:column}.ecp-nano-thumbnail-wrap{width:6rem;padding-bottom:.5rem}.ecp-nano-thumbnail{width:6rem;aspect-ratio:1 / 1;border-radius:.75rem}.ecp-nano-row{display:flex;align-items:center;gap:.5rem}.ecp-nano-play-btn{padding:.375rem;border-radius:9999px;border:none;cursor:pointer;flex-shrink:0;transition:transform .15s}.ecp-nano-play-btn:hover{transform:scale(1.1)}.ecp-nano-waveform{display:flex;width:100%;min-width:3rem;align-items:center;gap:2px;height:1.5rem}.ecp-nano-wave-bar{border-radius:9999px;width:100%;transition:height .2s}.ecp-video-wrapper{border-radius:.75rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.ecp-video-wrapper--fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;height:100vh;width:100vw;background:#000}.ecp-video-inner{height:auto}.ecp-video-inner--fullscreen{display:flex;flex-direction:column;flex:1;min-height:0}.ecp-video-inner--padded{padding:1rem}.ecp-video-name{margin-bottom:1rem;font-weight:500}.ecp-video-name--light{color:#374151}.ecp-video-name--dark{color:#f3f4f6}.ecp-video-layout{position:relative;margin-bottom:1rem}.ecp-video-layout--row{display:flex;gap:.75rem}.ecp-video-layout--col{display:flex;flex-direction:column;gap:.75rem}.ecp-video-layout--fullscreen{flex:1;min-height:0}.ecp-video-vu-top,.ecp-video-vu-bottom{width:100%;height:3rem}.ecp-video-vu-side{width:3rem;background:#00000080;border-radius:.5rem;padding:.25rem}.ecp-video-el-wrap{flex:1;border-radius:.5rem;overflow:hidden;position:relative}.ecp-video-el-wrap--light{background:#ffffffb3}.ecp-video-el-wrap--dark{background:#000000b3}.ecp-video-el{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.ecp-video-eq-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;justify-content:center;z-index:10;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s}.ecp-video-eq-panel{max-width:600px;width:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:center;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000d;transition:all .3s}.ecp-video-eq-panel--light{background:#fffc}.ecp-video-eq-panel--dark{background:#000000b3}.ecp-video-eq-title{font-size:.875rem;font-weight:500;margin-bottom:1rem}.ecp-video-eq-title--light{color:#374151}.ecp-video-eq-title--dark{color:#e5e7eb}.ecp-video-eq-bands{display:flex;flex-direction:column;gap:1rem}.ecp-video-eq-band-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.ecp-video-eq-label--light{font-size:.75rem;color:#4b5563}.ecp-video-eq-label--dark{font-size:.75rem;color:#d1d5db}.ecp-video-eq-range-row{display:flex;align-items:center;gap:.75rem}.ecp-video-eq-bound--light{font-size:.75rem;color:#6b7280}.ecp-video-eq-bound--dark{font-size:.75rem;color:#9ca3af}.ecp-video-eq-slider{flex:1;height:1.5rem;background:#d1d5db;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;background:transparent;border:none;box-shadow:none}.ecp-video-eq-slider::-moz-range-thumb{width:0;height:0;background:transparent;border:none}.ecp-video-eq-footer{display:flex;justify-content:space-between;margin-top:1.5rem}.ecp-video-eq-footer-btn{padding:.25rem .75rem;border-radius:.25rem;font-size:.75rem;cursor:pointer;border:none;transition:all .15s}.ecp-video-eq-footer-btn--light{background:#e5e7eb;color:#374151}.ecp-video-eq-footer-btn--light:hover{background:#d1d5db}.ecp-video-eq-footer-btn--dark{background:#374151;color:#e5e7eb}.ecp-video-eq-footer-btn--dark:hover{background:#4b5563}.ecp-video-seekbar{margin-bottom:1rem}.ecp-video-seekbar--fullscreen{margin-top:.75rem}.ecp-video-seekbar-row{display:flex;align-items:center;gap:.75rem}.ecp-video-time{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:3rem}.ecp-video-time--right{text-align:right}.ecp-video-time--light{color:#4b5563}.ecp-video-time--dark{color:#f3f4f6}.ecp-video-seek-input{flex:1;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-seek-input:disabled{opacity:.4;cursor:not-allowed}.ecp-video-seek-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-seek-input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.ecp-video-play-btn{border-radius:9999px;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:opacity .15s;padding:.5rem 1rem}.ecp-video-play-btn:hover{opacity:.9}.ecp-video-play-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-play-btn--compact{padding:1.25rem .75rem}.ecp-video-play-icon-wrap{position:relative;width:1rem;display:flex;align-items:center}.ecp-video-stop-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-video-stop-btn--light{background:#374151;color:#fff}.ecp-video-stop-btn--light:hover{background:#1f2937}.ecp-video-stop-btn--dark{background:#f3f4f6;color:#000}.ecp-video-stop-btn--dark:hover{background:#d1d5db}.ecp-video-stop-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-fullscreen-btn{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s;padding:.75rem}.ecp-video-fullscreen-btn--light{background:#374151;color:#fff}.ecp-video-fullscreen-btn--light:hover{background:#1f2937}.ecp-video-fullscreen-btn--dark{background:#f3f4f6;color:#000}.ecp-video-fullscreen-btn--dark:hover{background:#d1d5db}.ecp-video-fullscreen-btn--wide{padding:.5rem 1rem}.ecp-video-eq-toggle-btn{padding:.75rem;border-radius:9999px;font-size:.875rem;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .15s}.ecp-video-eq-toggle-btn--off{background:#f3f4f6;color:#374151}.ecp-video-eq-toggle-btn--off:hover{background:#d1d5db}.ecp-video-eq-toggle-btn--on{color:#fff}.ecp-video-eq-toggle-btn:disabled{opacity:.4;cursor:not-allowed}.ecp-video-eq-toggle-btn--wide{padding:.5rem 1rem}.ecp-video-speed-wrap{display:flex;align-items:center}.ecp-video-speed-select{border-radius:9999px;font-size:.875rem;font-weight:500;border:none;outline:none;cursor:pointer;background:transparent;transition:all .15s}.ecp-video-speed-select--light{color:#1f2937}.ecp-video-speed-select--dark{color:#e5e7eb}.ecp-video-speed-option--light{background:#f3f4f6;color:#1f2937}.ecp-video-speed-option--dark{background:#1f2937;color:#f3f4f6}.ecp-video-volume{display:flex;align-items:center;gap:.25rem;margin-left:auto}@media (min-width: 768px){.ecp-video-volume{gap:.75rem}}.ecp-video-mute-btn{padding:.5rem;border-radius:.5rem;background:none;border:none;cursor:pointer;transition:all .15s}.ecp-video-mute-btn:hover{background:#f3f4f6}.ecp-video-mute-icon--light{color:#4b5563}.ecp-video-mute-icon--dark{color:#f3f4f6}.ecp-video-vol-slider{width:6rem;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.ecp-video-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}.ecp-video-vol-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:var(--thumb-color, #ffffff);border:none;box-shadow:0 2px 6px #0003}@media (max-width: 460px){.ecp-video-vol-slider{display:none}}.ecp-video-vol-pct{font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;width:2.5rem;text-align:right}.ecp-video-vol-pct--light{color:#374151}.ecp-video-vol-pct--dark{color:#f3f4f6}.ecp-video-error{font-size:.875rem;color:#ef4444;background:#fef2f2;padding:.75rem;border-radius:.25rem;margin-bottom:1rem;border:1px solid #fca5a5}.ecp-vu-bar-wrap{flex:1;height:100%;position:relative;overflow:hidden;box-sizing:border-box;backface-visibility:hidden;contain:paint}.ecp-vu-bar-fill{position:absolute;bottom:0;left:0;width:100%;border-radius:2px 2px 0 0;box-sizing:border-box;backface-visibility:hidden}.ecp-vu-peak-line{position:absolute;top:0;left:0;width:100%;height:2px;pointer-events:none;backface-visibility:hidden;will-change:transform}.ecp-vp-play-btn,.ecp-vp-eq-btn,.ecp-vp-loop-btn,.ecp-vp-seek-input,.ecp-vp-seek-input::-webkit-slider-thumb,.ecp-vp-seek-input::-moz-range-thumb,.ecp-vp-volume-slider,.ecp-vp-volume-slider::-webkit-slider-thumb,.ecp-vp-volume-slider::-moz-range-thumb,.ecp-vp-eq-slider,.ecp-vp-eq-slider::-webkit-slider-thumb,.ecp-vp-eq-slider::-moz-range-thumb,.ecp-vp-8d-live-glow,.ecp-vp-8d-live-svg circle,.ecp-vp-8d-live-svg line,.ecp-vp-8d-live-svg text,.ecp-vp-8d-live-head-icon{-webkit-transition:background 2s ease,background-color 2s ease,border-color 2s ease,color 2s ease,fill 2s ease,stroke 2s ease,box-shadow 2s ease;-moz-transition:background 2s ease,background-color 2s ease,border-color 2s ease,color 2s ease,fill 2s ease,stroke 2s ease,box-shadow 2s ease;transition:background 2s ease,background-color 2s ease,border-color 2s ease,color 2s ease,fill 2s ease,stroke 2s ease,box-shadow 2s ease}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
|
+
import { jsx as e, Fragment as St, jsxs as r } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as It, createElement as ot, useState as k, useEffect as T, useRef as u } from "react";
|
|
4
4
|
/**
|
|
5
5
|
* @license lucide-react v0.540.0 - ISC
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the ISC license.
|
|
8
8
|
* See the LICENSE file in the root directory of this source tree.
|
|
9
9
|
*/
|
|
10
|
-
const
|
|
10
|
+
const Qt = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Jt = (s) => s.replace(
|
|
11
11
|
/^([A-Z])|[\s-_]+(\w)/g,
|
|
12
|
-
(
|
|
13
|
-
),
|
|
14
|
-
const
|
|
15
|
-
return
|
|
16
|
-
},
|
|
17
|
-
for (const
|
|
18
|
-
if (
|
|
12
|
+
(d, v, m) => m ? m.toUpperCase() : v.toLowerCase()
|
|
13
|
+
), Ft = (s) => {
|
|
14
|
+
const d = Jt(s);
|
|
15
|
+
return d.charAt(0).toUpperCase() + d.slice(1);
|
|
16
|
+
}, Dt = (...s) => s.filter((d, v, m) => !!d && d.trim() !== "" && m.indexOf(d) === v).join(" ").trim(), er = (s) => {
|
|
17
|
+
for (const d in s)
|
|
18
|
+
if (d.startsWith("aria-") || d === "role" || d === "title")
|
|
19
19
|
return !0;
|
|
20
20
|
};
|
|
21
21
|
/**
|
|
@@ -24,7 +24,7 @@ const Vt = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Yt = (
|
|
|
24
24
|
* This source code is licensed under the ISC license.
|
|
25
25
|
* See the LICENSE file in the root directory of this source tree.
|
|
26
26
|
*/
|
|
27
|
-
var
|
|
27
|
+
var tr = {
|
|
28
28
|
xmlns: "http://www.w3.org/2000/svg",
|
|
29
29
|
width: 24,
|
|
30
30
|
height: 24,
|
|
@@ -41,31 +41,31 @@ var Kt = {
|
|
|
41
41
|
* This source code is licensed under the ISC license.
|
|
42
42
|
* See the LICENSE file in the root directory of this source tree.
|
|
43
43
|
*/
|
|
44
|
-
const
|
|
44
|
+
const rr = It(
|
|
45
45
|
({
|
|
46
46
|
color: s = "currentColor",
|
|
47
|
-
size:
|
|
47
|
+
size: d = 24,
|
|
48
48
|
strokeWidth: v = 2,
|
|
49
|
-
absoluteStrokeWidth:
|
|
50
|
-
className:
|
|
49
|
+
absoluteStrokeWidth: m,
|
|
50
|
+
className: R = "",
|
|
51
51
|
children: h,
|
|
52
|
-
iconNode:
|
|
53
|
-
...
|
|
54
|
-
}, P) =>
|
|
52
|
+
iconNode: N,
|
|
53
|
+
...re
|
|
54
|
+
}, P) => ot(
|
|
55
55
|
"svg",
|
|
56
56
|
{
|
|
57
57
|
ref: P,
|
|
58
|
-
...
|
|
59
|
-
width:
|
|
60
|
-
height:
|
|
58
|
+
...tr,
|
|
59
|
+
width: d,
|
|
60
|
+
height: d,
|
|
61
61
|
stroke: s,
|
|
62
|
-
strokeWidth:
|
|
63
|
-
className:
|
|
64
|
-
...!h && !
|
|
65
|
-
...
|
|
62
|
+
strokeWidth: m ? Number(v) * 24 / Number(d) : v,
|
|
63
|
+
className: Dt("lucide", R),
|
|
64
|
+
...!h && !er(re) && { "aria-hidden": "true" },
|
|
65
|
+
...re
|
|
66
66
|
},
|
|
67
67
|
[
|
|
68
|
-
...
|
|
68
|
+
...N.map(([I, V]) => ot(I, V)),
|
|
69
69
|
...Array.isArray(h) ? h : [h]
|
|
70
70
|
]
|
|
71
71
|
)
|
|
@@ -76,20 +76,20 @@ const Qt = zt(
|
|
|
76
76
|
* This source code is licensed under the ISC license.
|
|
77
77
|
* See the LICENSE file in the root directory of this source tree.
|
|
78
78
|
*/
|
|
79
|
-
const
|
|
80
|
-
const v =
|
|
81
|
-
({ className:
|
|
79
|
+
const ke = (s, d) => {
|
|
80
|
+
const v = It(
|
|
81
|
+
({ className: m, ...R }, h) => ot(rr, {
|
|
82
82
|
ref: h,
|
|
83
|
-
iconNode:
|
|
84
|
-
className:
|
|
85
|
-
`lucide-${
|
|
83
|
+
iconNode: d,
|
|
84
|
+
className: Dt(
|
|
85
|
+
`lucide-${Qt(Ft(s))}`,
|
|
86
86
|
`lucide-${s}`,
|
|
87
|
-
|
|
87
|
+
m
|
|
88
88
|
),
|
|
89
|
-
...
|
|
89
|
+
...R
|
|
90
90
|
})
|
|
91
91
|
);
|
|
92
|
-
return v.displayName =
|
|
92
|
+
return v.displayName = Ft(s), v;
|
|
93
93
|
};
|
|
94
94
|
/**
|
|
95
95
|
* @license lucide-react v0.540.0 - ISC
|
|
@@ -97,7 +97,7 @@ const ge = (s, p) => {
|
|
|
97
97
|
* This source code is licensed under the ISC license.
|
|
98
98
|
* See the LICENSE file in the root directory of this source tree.
|
|
99
99
|
*/
|
|
100
|
-
const
|
|
100
|
+
const nr = [
|
|
101
101
|
[
|
|
102
102
|
"path",
|
|
103
103
|
{
|
|
@@ -105,48 +105,48 @@ const Jt = [
|
|
|
105
105
|
key: "1xhozi"
|
|
106
106
|
}
|
|
107
107
|
]
|
|
108
|
-
], it =
|
|
108
|
+
], it = ke("headphones", nr);
|
|
109
109
|
/**
|
|
110
110
|
* @license lucide-react v0.540.0 - ISC
|
|
111
111
|
*
|
|
112
112
|
* This source code is licensed under the ISC license.
|
|
113
113
|
* See the LICENSE file in the root directory of this source tree.
|
|
114
114
|
*/
|
|
115
|
-
const
|
|
115
|
+
const ar = [
|
|
116
116
|
["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
|
|
117
117
|
["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
|
|
118
118
|
["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
|
|
119
119
|
["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
|
|
120
|
-
],
|
|
120
|
+
], cr = ke("maximize", ar);
|
|
121
121
|
/**
|
|
122
122
|
* @license lucide-react v0.540.0 - ISC
|
|
123
123
|
*
|
|
124
124
|
* This source code is licensed under the ISC license.
|
|
125
125
|
* See the LICENSE file in the root directory of this source tree.
|
|
126
126
|
*/
|
|
127
|
-
const
|
|
127
|
+
const lr = [
|
|
128
128
|
["path", { d: "M8 3v3a2 2 0 0 1-2 2H3", key: "hohbtr" }],
|
|
129
129
|
["path", { d: "M21 8h-3a2 2 0 0 1-2-2V3", key: "5jw1f3" }],
|
|
130
130
|
["path", { d: "M3 16h3a2 2 0 0 1 2 2v3", key: "198tvr" }],
|
|
131
131
|
["path", { d: "M16 21v-3a2 2 0 0 1 2-2h3", key: "ph8mxp" }]
|
|
132
|
-
],
|
|
132
|
+
], sr = ke("minimize", lr);
|
|
133
133
|
/**
|
|
134
134
|
* @license lucide-react v0.540.0 - ISC
|
|
135
135
|
*
|
|
136
136
|
* This source code is licensed under the ISC license.
|
|
137
137
|
* See the LICENSE file in the root directory of this source tree.
|
|
138
138
|
*/
|
|
139
|
-
const
|
|
139
|
+
const ir = [
|
|
140
140
|
["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
|
|
141
141
|
["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
|
|
142
|
-
],
|
|
142
|
+
], rt = ke("pause", ir);
|
|
143
143
|
/**
|
|
144
144
|
* @license lucide-react v0.540.0 - ISC
|
|
145
145
|
*
|
|
146
146
|
* This source code is licensed under the ISC license.
|
|
147
147
|
* See the LICENSE file in the root directory of this source tree.
|
|
148
148
|
*/
|
|
149
|
-
const
|
|
149
|
+
const or = [
|
|
150
150
|
[
|
|
151
151
|
"path",
|
|
152
152
|
{
|
|
@@ -154,26 +154,26 @@ const cr = [
|
|
|
154
154
|
key: "10ikf1"
|
|
155
155
|
}
|
|
156
156
|
]
|
|
157
|
-
],
|
|
157
|
+
], nt = ke("play", or);
|
|
158
158
|
/**
|
|
159
159
|
* @license lucide-react v0.540.0 - ISC
|
|
160
160
|
*
|
|
161
161
|
* This source code is licensed under the ISC license.
|
|
162
162
|
* See the LICENSE file in the root directory of this source tree.
|
|
163
163
|
*/
|
|
164
|
-
const
|
|
164
|
+
const dr = [
|
|
165
165
|
["path", { d: "m17 2 4 4-4 4", key: "nntrym" }],
|
|
166
166
|
["path", { d: "M3 11v-1a4 4 0 0 1 4-4h14", key: "84bu3i" }],
|
|
167
167
|
["path", { d: "m7 22-4-4 4-4", key: "1wqhfi" }],
|
|
168
168
|
["path", { d: "M21 13v1a4 4 0 0 1-4 4H3", key: "1rx37r" }]
|
|
169
|
-
],
|
|
169
|
+
], pr = ke("repeat", dr);
|
|
170
170
|
/**
|
|
171
171
|
* @license lucide-react v0.540.0 - ISC
|
|
172
172
|
*
|
|
173
173
|
* This source code is licensed under the ISC license.
|
|
174
174
|
* See the LICENSE file in the root directory of this source tree.
|
|
175
175
|
*/
|
|
176
|
-
const
|
|
176
|
+
const ur = [
|
|
177
177
|
["line", { x1: "4", x2: "4", y1: "21", y2: "14", key: "1p332r" }],
|
|
178
178
|
["line", { x1: "4", x2: "4", y1: "10", y2: "3", key: "gb41h5" }],
|
|
179
179
|
["line", { x1: "12", x2: "12", y1: "21", y2: "12", key: "hf2csr" }],
|
|
@@ -183,34 +183,34 @@ const lr = [
|
|
|
183
183
|
["line", { x1: "2", x2: "6", y1: "14", y2: "14", key: "1uebub" }],
|
|
184
184
|
["line", { x1: "10", x2: "14", y1: "8", y2: "8", key: "1yglbp" }],
|
|
185
185
|
["line", { x1: "18", x2: "22", y1: "16", y2: "16", key: "1jxqpz" }]
|
|
186
|
-
],
|
|
186
|
+
], tt = ke("sliders-vertical", ur);
|
|
187
187
|
/**
|
|
188
188
|
* @license lucide-react v0.540.0 - ISC
|
|
189
189
|
*
|
|
190
190
|
* This source code is licensed under the ISC license.
|
|
191
191
|
* See the LICENSE file in the root directory of this source tree.
|
|
192
192
|
*/
|
|
193
|
-
const
|
|
193
|
+
const vr = [
|
|
194
194
|
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
|
|
195
|
-
],
|
|
195
|
+
], Bt = ke("square", vr);
|
|
196
196
|
/**
|
|
197
197
|
* @license lucide-react v0.540.0 - ISC
|
|
198
198
|
*
|
|
199
199
|
* This source code is licensed under the ISC license.
|
|
200
200
|
* See the LICENSE file in the root directory of this source tree.
|
|
201
201
|
*/
|
|
202
|
-
const
|
|
202
|
+
const hr = [
|
|
203
203
|
["path", { d: "M12 3v12", key: "1x0j5s" }],
|
|
204
204
|
["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
|
|
205
205
|
["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
|
|
206
|
-
],
|
|
206
|
+
], mr = ke("upload", hr);
|
|
207
207
|
/**
|
|
208
208
|
* @license lucide-react v0.540.0 - ISC
|
|
209
209
|
*
|
|
210
210
|
* This source code is licensed under the ISC license.
|
|
211
211
|
* See the LICENSE file in the root directory of this source tree.
|
|
212
212
|
*/
|
|
213
|
-
const
|
|
213
|
+
const fr = [
|
|
214
214
|
[
|
|
215
215
|
"path",
|
|
216
216
|
{
|
|
@@ -220,14 +220,14 @@ const ur = [
|
|
|
220
220
|
],
|
|
221
221
|
["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
|
|
222
222
|
["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
|
|
223
|
-
],
|
|
223
|
+
], dt = ke("volume-2", fr);
|
|
224
224
|
/**
|
|
225
225
|
* @license lucide-react v0.540.0 - ISC
|
|
226
226
|
*
|
|
227
227
|
* This source code is licensed under the ISC license.
|
|
228
228
|
* See the LICENSE file in the root directory of this source tree.
|
|
229
229
|
*/
|
|
230
|
-
const
|
|
230
|
+
const br = [
|
|
231
231
|
[
|
|
232
232
|
"path",
|
|
233
233
|
{
|
|
@@ -237,7 +237,7 @@ const vr = [
|
|
|
237
237
|
],
|
|
238
238
|
["line", { x1: "22", x2: "16", y1: "9", y2: "15", key: "1ewh16" }],
|
|
239
239
|
["line", { x1: "16", x2: "22", y1: "9", y2: "15", key: "5ykzw1" }]
|
|
240
|
-
],
|
|
240
|
+
], pt = ke("volume-x", br), me = {
|
|
241
241
|
rainbow: {
|
|
242
242
|
name: "Rainbow",
|
|
243
243
|
bg: "linear-gradient(135deg, #ef444422 0%, #f9731622 15%, #f59e0b22 30%, #10b98122 45%, #06b6d422 60%, #3b82f622 75%, #6366f122 85%, #a855f722 92%, #ec489922 100%)",
|
|
@@ -337,63 +337,63 @@ const vr = [
|
|
|
337
337
|
slider: "#ec4899"
|
|
338
338
|
}
|
|
339
339
|
};
|
|
340
|
-
function
|
|
341
|
-
const
|
|
342
|
-
key:
|
|
343
|
-
name:
|
|
344
|
-
colors:
|
|
340
|
+
function gr({ theme: s, setTheme: d, close: v }) {
|
|
341
|
+
const m = Object.keys(me).map((R) => ({
|
|
342
|
+
key: R,
|
|
343
|
+
name: me[R].name,
|
|
344
|
+
colors: me[R].bars
|
|
345
345
|
}));
|
|
346
346
|
return /* @__PURE__ */ r("div", { className: "ecp-theme-selector-panel", children: [
|
|
347
347
|
/* @__PURE__ */ r("div", { className: "ecp-theme-selector-header", children: [
|
|
348
348
|
/* @__PURE__ */ e("h2", { className: "ecp-theme-selector-title", children: "Choose Color Palette" }),
|
|
349
349
|
/* @__PURE__ */ e("button", { onClick: () => v(), className: "ecp-theme-selector-close", children: "Close" })
|
|
350
350
|
] }),
|
|
351
|
-
/* @__PURE__ */ e("div", { className: "ecp-theme-grid", children:
|
|
351
|
+
/* @__PURE__ */ e("div", { className: "ecp-theme-grid", children: m.map((R) => /* @__PURE__ */ r(
|
|
352
352
|
"div",
|
|
353
353
|
{
|
|
354
|
-
className: `ecp-theme-card${s ===
|
|
355
|
-
onClick: () =>
|
|
354
|
+
className: `ecp-theme-card${s === R.key ? " ecp-theme-card--active" : ""}`,
|
|
355
|
+
onClick: () => d(R.key),
|
|
356
356
|
children: [
|
|
357
357
|
/* @__PURE__ */ e(
|
|
358
358
|
"div",
|
|
359
359
|
{
|
|
360
360
|
className: "ecp-theme-color-preview",
|
|
361
|
-
style: { background: `linear-gradient(to right, ${
|
|
361
|
+
style: { background: `linear-gradient(to right, ${R.colors.join(", ")})` }
|
|
362
362
|
}
|
|
363
363
|
),
|
|
364
|
-
/* @__PURE__ */ e("div", { className: "ecp-theme-name", children:
|
|
364
|
+
/* @__PURE__ */ e("div", { className: "ecp-theme-name", children: R.name })
|
|
365
365
|
]
|
|
366
366
|
},
|
|
367
|
-
|
|
367
|
+
R.key
|
|
368
368
|
)) })
|
|
369
369
|
] });
|
|
370
370
|
}
|
|
371
|
-
const
|
|
372
|
-
const v = s.sampleRate,
|
|
373
|
-
for (let P = 0; P <
|
|
374
|
-
const
|
|
375
|
-
h[P] = (Math.random() * 2 - 1) * V,
|
|
371
|
+
const zt = (s, d) => {
|
|
372
|
+
const v = s.sampleRate, m = Math.max(1, Math.floor(v * Math.max(0.1, d))), R = s.createBuffer(2, m, v), h = R.getChannelData(0), N = R.getChannelData(1), re = 3 / d;
|
|
373
|
+
for (let P = 0; P < m; P++) {
|
|
374
|
+
const I = P / v, V = Math.exp(-I * re);
|
|
375
|
+
h[P] = (Math.random() * 2 - 1) * V, N[P] = (Math.random() * 2 - 1) * V;
|
|
376
376
|
}
|
|
377
|
-
return
|
|
378
|
-
},
|
|
379
|
-
const
|
|
380
|
-
if (
|
|
381
|
-
for (let h = 0; h < v; ++h)
|
|
377
|
+
return R;
|
|
378
|
+
}, Lt = (s) => {
|
|
379
|
+
const d = Math.max(0, s), v = 44100, m = new Float32Array(v), R = Math.PI / 180;
|
|
380
|
+
if (d === 0)
|
|
381
|
+
for (let h = 0; h < v; ++h) m[h] = h * 2 / v - 1;
|
|
382
382
|
else
|
|
383
383
|
for (let h = 0; h < v; ++h) {
|
|
384
|
-
const
|
|
385
|
-
|
|
384
|
+
const N = h * 2 / v - 1;
|
|
385
|
+
m[h] = (3 + d) * N * 20 * R / (Math.PI + d * Math.abs(N));
|
|
386
386
|
}
|
|
387
|
-
return
|
|
387
|
+
return m;
|
|
388
388
|
};
|
|
389
|
-
function
|
|
389
|
+
function yr({
|
|
390
390
|
audio: s,
|
|
391
|
-
name:
|
|
391
|
+
name: d = "No track loaded",
|
|
392
392
|
author: v,
|
|
393
|
-
theme:
|
|
394
|
-
volume:
|
|
393
|
+
theme: m = "rainbow",
|
|
394
|
+
volume: R = 100,
|
|
395
395
|
thumbnail: h = null,
|
|
396
|
-
controls:
|
|
396
|
+
controls: N = {
|
|
397
397
|
play: !0,
|
|
398
398
|
pause: !0,
|
|
399
399
|
stop: !0,
|
|
@@ -403,122 +403,122 @@ function mr({
|
|
|
403
403
|
trackName: !0,
|
|
404
404
|
equalizer: !0,
|
|
405
405
|
speed: !0,
|
|
406
|
-
|
|
406
|
+
spatialEngine: !1
|
|
407
407
|
},
|
|
408
|
-
mode:
|
|
408
|
+
mode: re = "light",
|
|
409
409
|
bands: P = null,
|
|
410
|
-
transparent:
|
|
410
|
+
transparent: I = !1,
|
|
411
411
|
autoPlay: V = !1,
|
|
412
|
-
equalizer:
|
|
413
|
-
|
|
412
|
+
equalizer: Y = { bass: 0, mid: 0, treble: 0 },
|
|
413
|
+
spatialEngine: a = null
|
|
414
414
|
}) {
|
|
415
|
-
var
|
|
416
|
-
const [
|
|
417
|
-
bass:
|
|
418
|
-
mid:
|
|
419
|
-
treble:
|
|
420
|
-
}), [
|
|
421
|
-
enable:
|
|
415
|
+
var kt, qt, wt, Nt, $t, xt, Ct, Tt, Rt, Pt, Mt;
|
|
416
|
+
const [Z, H] = k(!1), [O, K] = k(0), [_, L] = k(0), [F, Fe] = k(R || 100), [ge, Re] = k(!1), [E, ze] = k(!1), [fe, qe] = k(!1), [we, G] = k([]), [ee, Le] = k(!1), [Q, Pe] = k({
|
|
417
|
+
bass: Y.bass || 0,
|
|
418
|
+
mid: Y.mid || 0,
|
|
419
|
+
treble: Y.treble || 0
|
|
420
|
+
}), [ce, Ee] = k(1), [w, Me] = k(0), [ne, $e] = k(!1), [i, de] = k({
|
|
421
|
+
enable: N.spatialEngine && (a == null ? void 0 : a.enable) !== void 0 ? a.enable : !1,
|
|
422
422
|
spatial: {
|
|
423
|
-
rate: ((
|
|
424
|
-
width: ((
|
|
425
|
-
focus: ((
|
|
423
|
+
rate: ((kt = a == null ? void 0 : a.spatial) == null ? void 0 : kt.rate) !== void 0 ? a.spatial.rate : 0.2,
|
|
424
|
+
width: ((qt = a == null ? void 0 : a.spatial) == null ? void 0 : qt.width) !== void 0 ? a.spatial.width : 150,
|
|
425
|
+
focus: ((wt = a == null ? void 0 : a.spatial) == null ? void 0 : wt.focus) !== void 0 ? a.spatial.focus : 20
|
|
426
426
|
},
|
|
427
427
|
reverb: {
|
|
428
|
-
size: ((
|
|
429
|
-
tone: ((
|
|
430
|
-
mix: ((
|
|
428
|
+
size: ((Nt = a == null ? void 0 : a.reverb) == null ? void 0 : Nt.size) !== void 0 ? a.reverb.size : 3,
|
|
429
|
+
tone: (($t = a == null ? void 0 : a.reverb) == null ? void 0 : $t.tone) !== void 0 ? a.reverb.tone : 40,
|
|
430
|
+
mix: ((xt = a == null ? void 0 : a.reverb) == null ? void 0 : xt.mix) !== void 0 ? a.reverb.mix : 30
|
|
431
431
|
},
|
|
432
432
|
echo: {
|
|
433
|
-
time: ((
|
|
434
|
-
feedback: ((
|
|
435
|
-
mix: ((
|
|
433
|
+
time: ((Ct = a == null ? void 0 : a.echo) == null ? void 0 : Ct.time) !== void 0 ? a.echo.time : 50,
|
|
434
|
+
feedback: ((Tt = a == null ? void 0 : a.echo) == null ? void 0 : Tt.feedback) !== void 0 ? a.echo.feedback : 30,
|
|
435
|
+
mix: ((Rt = a == null ? void 0 : a.echo) == null ? void 0 : Rt.mix) !== void 0 ? a.echo.mix : 10
|
|
436
436
|
},
|
|
437
437
|
tape: {
|
|
438
|
-
speed: typeof (a == null ? void 0 : a.tape) == "number" ? a.tape : ((
|
|
439
|
-
drive: typeof (a == null ? void 0 : a.tape) == "object" && ((
|
|
438
|
+
speed: typeof (a == null ? void 0 : a.tape) == "number" ? a.tape : ((Pt = a == null ? void 0 : a.tape) == null ? void 0 : Pt.speed) !== void 0 ? a.tape.speed : 1,
|
|
439
|
+
drive: typeof (a == null ? void 0 : a.tape) == "object" && ((Mt = a.tape) == null ? void 0 : Mt.drive) !== void 0 ? a.tape.drive : 0
|
|
440
440
|
}
|
|
441
441
|
});
|
|
442
|
-
|
|
443
|
-
var t,
|
|
444
|
-
a &&
|
|
445
|
-
enable: a.enable !== void 0 ? a.enable : !0,
|
|
442
|
+
T(() => {
|
|
443
|
+
var t, l, g, b, y, U, ae, X, J, D, se;
|
|
444
|
+
a && de({
|
|
445
|
+
enable: !!N.spatialEngine && (a.enable !== void 0 ? a.enable : !0),
|
|
446
446
|
spatial: {
|
|
447
447
|
rate: ((t = a.spatial) == null ? void 0 : t.rate) !== void 0 ? a.spatial.rate : 0.2,
|
|
448
|
-
width: ((
|
|
448
|
+
width: ((l = a.spatial) == null ? void 0 : l.width) !== void 0 ? a.spatial.width : 150,
|
|
449
449
|
focus: ((g = a.spatial) == null ? void 0 : g.focus) !== void 0 ? a.spatial.focus : 20
|
|
450
450
|
},
|
|
451
451
|
reverb: {
|
|
452
|
-
size: ((
|
|
453
|
-
tone: ((
|
|
454
|
-
mix: ((
|
|
452
|
+
size: ((b = a.reverb) == null ? void 0 : b.size) !== void 0 ? a.reverb.size : 3,
|
|
453
|
+
tone: ((y = a.reverb) == null ? void 0 : y.tone) !== void 0 ? a.reverb.tone : 40,
|
|
454
|
+
mix: ((U = a.reverb) == null ? void 0 : U.mix) !== void 0 ? a.reverb.mix : 30
|
|
455
455
|
},
|
|
456
456
|
echo: {
|
|
457
|
-
time: ((
|
|
458
|
-
feedback: ((
|
|
459
|
-
mix: ((
|
|
457
|
+
time: ((ae = a.echo) == null ? void 0 : ae.time) !== void 0 ? a.echo.time : 50,
|
|
458
|
+
feedback: ((X = a.echo) == null ? void 0 : X.feedback) !== void 0 ? a.echo.feedback : 30,
|
|
459
|
+
mix: ((J = a.echo) == null ? void 0 : J.mix) !== void 0 ? a.echo.mix : 10
|
|
460
460
|
},
|
|
461
461
|
tape: {
|
|
462
|
-
speed: typeof a.tape == "number" ? a.tape : ((
|
|
463
|
-
drive: typeof a.tape == "object" && ((
|
|
462
|
+
speed: typeof a.tape == "number" ? a.tape : ((D = a.tape) == null ? void 0 : D.speed) !== void 0 ? a.tape.speed : 1,
|
|
463
|
+
drive: typeof a.tape == "object" && ((se = a.tape) == null ? void 0 : se.drive) !== void 0 ? a.tape.drive : 0
|
|
464
464
|
}
|
|
465
465
|
});
|
|
466
466
|
}, [a]);
|
|
467
|
-
const [
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
}, [
|
|
471
|
-
|
|
472
|
-
}, [
|
|
467
|
+
const [pe, Ne] = k("spatial"), M = u(i), j = u(ce);
|
|
468
|
+
T(() => {
|
|
469
|
+
M.current = i;
|
|
470
|
+
}, [i]), T(() => {
|
|
471
|
+
j.current = ce;
|
|
472
|
+
}, [ce]);
|
|
473
473
|
const ie = () => {
|
|
474
|
-
if (
|
|
475
|
-
const t =
|
|
476
|
-
"preservesPitch" in
|
|
474
|
+
if (p.current) {
|
|
475
|
+
const t = M.current.enable, l = t ? M.current.tape.speed : 1, b = !(t && l !== 1);
|
|
476
|
+
"preservesPitch" in p.current && (p.current.preservesPitch = b), "webkitPreservesPitch" in p.current && (p.current.webkitPreservesPitch = b), "mozPreservesPitch" in p.current && (p.current.mozPreservesPitch = b), p.current.playbackRate = j.current * l;
|
|
477
477
|
}
|
|
478
|
-
}, c = (t,
|
|
479
|
-
|
|
480
|
-
...
|
|
478
|
+
}, c = (t, l, g) => {
|
|
479
|
+
de((b) => ({
|
|
480
|
+
...b,
|
|
481
481
|
enable: !0,
|
|
482
482
|
[t]: {
|
|
483
|
-
...
|
|
484
|
-
[
|
|
483
|
+
...b[t],
|
|
484
|
+
[l]: g
|
|
485
485
|
}
|
|
486
486
|
}));
|
|
487
|
-
},
|
|
488
|
-
|
|
487
|
+
}, $ = () => {
|
|
488
|
+
de((t) => ({
|
|
489
489
|
...t,
|
|
490
490
|
enable: !t.enable
|
|
491
491
|
}));
|
|
492
|
-
},
|
|
493
|
-
|
|
492
|
+
}, z = () => {
|
|
493
|
+
de({
|
|
494
494
|
enable: !0,
|
|
495
495
|
spatial: { rate: 0.11, width: 135, focus: 65 },
|
|
496
496
|
reverb: { size: 2.4, tone: 62, mix: 30 },
|
|
497
497
|
echo: { time: 500, feedback: 45, mix: 5 },
|
|
498
498
|
tape: { speed: 1, drive: 0 }
|
|
499
499
|
});
|
|
500
|
-
},
|
|
501
|
-
|
|
502
|
-
const t =
|
|
500
|
+
}, p = u(null), C = u(null), te = u(null), A = u(null), ue = u(null), Ae = u(null), xe = u(null), B = u(null), ve = u(null), We = u(null), Ue = u(null), Ge = u(null), He = u(null), je = u(null), Xe = u(null), Ve = u(null), at = u(null), Ye = u(0), Se = u(null), Ce = u(null), le = u(null), he = u(null), Ie = u(0), Ke = u(null), ct = u(null);
|
|
501
|
+
T(() => {
|
|
502
|
+
const t = ct.current;
|
|
503
503
|
if (!t) return;
|
|
504
|
-
const
|
|
505
|
-
for (let
|
|
504
|
+
const l = new ResizeObserver((g) => {
|
|
505
|
+
for (let b of g) Me(b.contentRect.width);
|
|
506
506
|
});
|
|
507
|
-
return
|
|
508
|
-
}, []),
|
|
507
|
+
return l.observe(t), () => l.disconnect();
|
|
508
|
+
}, []), T(() => {
|
|
509
509
|
const t = [];
|
|
510
|
-
if (s && typeof s != "string" && t.push(["TypeError", "audio must be a string (URL or path)"]),
|
|
511
|
-
else if (typeof
|
|
512
|
-
const
|
|
513
|
-
for (const g of
|
|
514
|
-
g in
|
|
510
|
+
if (s && typeof s != "string" && t.push(["TypeError", "audio must be a string (URL or path)"]), d && typeof d != "string" && t.push(["TypeError", "name must be a string"]), m && typeof m != "string" && typeof m != "object") t.push(["TypeError", "theme must be a string or a valid theme object"]);
|
|
511
|
+
else if (typeof m == "object") {
|
|
512
|
+
const l = ["name", "bg", "bars", "peak", "button", "buttonHover", "slider"];
|
|
513
|
+
for (const g of l)
|
|
514
|
+
g in m || t.push(["ThemeError", `theme object missing key: ${g}`]);
|
|
515
515
|
}
|
|
516
|
-
(typeof
|
|
517
|
-
|
|
518
|
-
}), P && (Array.isArray(P) ? P.length === 0 ? t.push(["ValueError", "bands array cannot be empty"]) : P.forEach((
|
|
519
|
-
typeof
|
|
520
|
-
}) : t.push(["TypeError", "bands must be an array"])), t.length > 0 ? (
|
|
521
|
-
}, [s,
|
|
516
|
+
(typeof R != "number" || R < 0 || R > 100) && t.push(["TypeError", "volume must be a number between 0 and 100"]), typeof N != "object" || Array.isArray(N) ? t.push(["TypeError", "controls must be an object"]) : ["play", "pause", "stop", "seekbar", "volume", "loop", "trackName", "equalizer"].forEach((g) => {
|
|
517
|
+
N && g in N && typeof N[g] != "boolean" && t.push(["TypeError", `controls.${g} must be a boolean`]);
|
|
518
|
+
}), P && (Array.isArray(P) ? P.length === 0 ? t.push(["ValueError", "bands array cannot be empty"]) : P.forEach((l, g) => {
|
|
519
|
+
typeof l.freq != "number" && t.push(["TypeError", `bands[${g}].freq must be a number`]);
|
|
520
|
+
}) : t.push(["TypeError", "bands must be an array"])), t.length > 0 ? (G(t), console.group("%cVisualizePlayer: Prop validation failed", "color:red"), t.forEach((l) => console.error(`${l[0]}: ${l[1]}`)), console.groupEnd()) : G([]);
|
|
521
|
+
}, [s, d, m, R, N, re, P]);
|
|
522
522
|
const n = P || [
|
|
523
523
|
{ freq: 0 },
|
|
524
524
|
{ freq: 10 },
|
|
@@ -551,39 +551,52 @@ function mr({
|
|
|
551
551
|
{ freq: 8e3 },
|
|
552
552
|
{ freq: 1e4 },
|
|
553
553
|
{ freq: 12500 }
|
|
554
|
-
], f = u(n.map(() => 0)),
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
554
|
+
], f = u(n.map(() => 0)), x = u(n.map(() => 0)), S = u(n.map(() => 0)), W = u(!1), oe = u(typeof m == "string" ? m : "purple"), [De, Ht] = k(0), lt = typeof m == "string" && m === "rainbow" || typeof m == "object" && (m == null ? void 0 : m.name) === "Rainbow";
|
|
555
|
+
T(() => {
|
|
556
|
+
if (!lt) return;
|
|
557
|
+
const t = setInterval(() => {
|
|
558
|
+
Ht((l) => (l + 1) % me.rainbow.bars.length);
|
|
559
|
+
}, 5e3);
|
|
560
|
+
return () => clearInterval(t);
|
|
561
|
+
}, [lt]);
|
|
562
|
+
const ut = typeof m == "string" ? me[m] || me.purple : typeof m == "object" ? m : me.purple, o = lt ? {
|
|
563
|
+
...ut,
|
|
564
|
+
button: me.rainbow.bars[De],
|
|
565
|
+
buttonHover: me.rainbow.bars[(De + 1) % me.rainbow.bars.length],
|
|
566
|
+
slider: me.rainbow.bars[De]
|
|
567
|
+
} : ut, q = re === "dark", Qe = typeof N == "object" && Object.keys(N).length === 0;
|
|
568
|
+
T(() => {
|
|
569
|
+
typeof m == "string" ? oe.current = m : oe.current = "purple", Oe();
|
|
570
|
+
}, [m]), T(() => {
|
|
571
|
+
p.current || (p.current = new Audio());
|
|
572
|
+
const t = p.current, l = () => {
|
|
573
|
+
fe || K(t.currentTime);
|
|
574
|
+
}, g = () => L(t.duration), b = () => {
|
|
575
|
+
E || (H(!1), le.current && cancelAnimationFrame(le.current));
|
|
576
|
+
}, y = () => {
|
|
577
|
+
H(!0), ie();
|
|
578
|
+
}, U = () => H(!1);
|
|
579
|
+
return t.addEventListener("timeupdate", l), t.addEventListener("loadedmetadata", g), t.addEventListener("ended", b), t.addEventListener("play", y), t.addEventListener("pause", U), () => {
|
|
580
|
+
t.removeEventListener("timeupdate", l), t.removeEventListener("loadedmetadata", g), t.removeEventListener("ended", b), t.removeEventListener("play", y), t.removeEventListener("pause", U);
|
|
568
581
|
};
|
|
569
|
-
}, [
|
|
570
|
-
he.current && clearInterval(he.current),
|
|
571
|
-
}, []),
|
|
582
|
+
}, [fe, E]), T(() => () => {
|
|
583
|
+
he.current && clearInterval(he.current), p.current && (p.current.pause(), p.current.src = "", p.current.load()), C.current && C.current.close().catch((t) => console.warn("AudioContext cleanup error:", t)), le.current && cancelAnimationFrame(le.current);
|
|
584
|
+
}, []), T(() => {
|
|
572
585
|
if (s) {
|
|
573
|
-
const t =
|
|
574
|
-
if (
|
|
586
|
+
const t = Z, l = F, g = E;
|
|
587
|
+
if (le.current && (cancelAnimationFrame(le.current), le.current = null), A.current) {
|
|
575
588
|
try {
|
|
576
589
|
A.current.disconnect();
|
|
577
590
|
} catch {
|
|
578
591
|
}
|
|
579
592
|
A.current = null;
|
|
580
593
|
}
|
|
581
|
-
if (
|
|
594
|
+
if (te.current) {
|
|
582
595
|
try {
|
|
583
|
-
|
|
596
|
+
te.current.disconnect();
|
|
584
597
|
} catch {
|
|
585
598
|
}
|
|
586
|
-
|
|
599
|
+
te.current = null;
|
|
587
600
|
}
|
|
588
601
|
if (ue.current) {
|
|
589
602
|
try {
|
|
@@ -592,218 +605,224 @@ function mr({
|
|
|
592
605
|
}
|
|
593
606
|
ue.current = null;
|
|
594
607
|
}
|
|
595
|
-
if (
|
|
608
|
+
if (Ae.current) {
|
|
596
609
|
try {
|
|
597
|
-
|
|
610
|
+
Ae.current.disconnect();
|
|
598
611
|
} catch {
|
|
599
612
|
}
|
|
600
|
-
|
|
613
|
+
Ae.current = null;
|
|
601
614
|
}
|
|
602
|
-
if (
|
|
615
|
+
if (xe.current) {
|
|
603
616
|
try {
|
|
604
|
-
|
|
617
|
+
xe.current.disconnect();
|
|
605
618
|
} catch {
|
|
606
619
|
}
|
|
607
|
-
|
|
620
|
+
xe.current = null;
|
|
608
621
|
}
|
|
609
|
-
C.current && (C.current.close().catch((
|
|
622
|
+
C.current && (C.current.close().catch((D) => console.warn("AudioContext close error:", D)), C.current = null), p.current && (p.current.pause(), p.current.src = "", p.current.load()), p.current = new Audio();
|
|
610
623
|
try {
|
|
611
|
-
|
|
624
|
+
p.current.crossOrigin = "anonymous";
|
|
612
625
|
} catch {
|
|
613
626
|
}
|
|
614
|
-
|
|
615
|
-
const
|
|
616
|
-
|
|
617
|
-
},
|
|
618
|
-
|
|
619
|
-
},
|
|
620
|
-
|
|
621
|
-
},
|
|
622
|
-
|
|
627
|
+
p.current.src = s, p.current.preload = "auto", p.current.muted = !1, p.current.volume = ge ? 0 : l / 100, p.current.loop = g, p.current.load();
|
|
628
|
+
const b = p.current, y = () => {
|
|
629
|
+
fe || K(b.currentTime);
|
|
630
|
+
}, U = () => L(b.duration), ae = () => {
|
|
631
|
+
E || H(!1);
|
|
632
|
+
}, X = () => {
|
|
633
|
+
H(!0), ie();
|
|
634
|
+
}, J = () => H(!1);
|
|
635
|
+
b.addEventListener("timeupdate", y), b.addEventListener("loadedmetadata", U), b.addEventListener("ended", ae), b.addEventListener("play", X), b.addEventListener("pause", J), K(0), H(!1), f.current = n.map(() => 0), x.current = n.map(() => 0), S.current = n.map(() => 0), Oe(), (t || V || Qe) && p.current.play().catch((D) => console.error("Play failed:", D));
|
|
623
636
|
}
|
|
624
|
-
}, [s]),
|
|
625
|
-
|
|
626
|
-
}, [
|
|
627
|
-
|
|
628
|
-
}, [
|
|
637
|
+
}, [s]), T(() => {
|
|
638
|
+
p.current && (p.current.volume = ge ? 0 : F / 100);
|
|
639
|
+
}, [F, ge]), T(() => {
|
|
640
|
+
p.current && (p.current.loop = E);
|
|
641
|
+
}, [E]), T(() => {
|
|
629
642
|
ie();
|
|
630
|
-
}, [
|
|
631
|
-
C.current && (ue.current && (ue.current.gain.value =
|
|
632
|
-
}, [
|
|
643
|
+
}, [ce, i.tape.speed, i.enable]), T(() => {
|
|
644
|
+
C.current && (ue.current && (ue.current.gain.value = Q.bass), Ae.current && (Ae.current.gain.value = Q.mid), xe.current && (xe.current.gain.value = Q.treble));
|
|
645
|
+
}, [Q]), T(() => {
|
|
633
646
|
if (C.current) {
|
|
634
|
-
const t =
|
|
635
|
-
if (
|
|
647
|
+
const t = i.enable;
|
|
648
|
+
if (Ve.current && (Ve.current.curve = Lt(t ? i.tape.drive : 0)), Ue.current && (Ue.current.frequency.value = i.reverb.tone / 100 * 8e3 + 500), Ge.current && (Ge.current.gain.value = t ? i.reverb.mix / 100 : 0), We.current && C.current)
|
|
636
649
|
try {
|
|
637
|
-
|
|
650
|
+
We.current.buffer = zt(C.current, i.reverb.size);
|
|
638
651
|
} catch {
|
|
639
652
|
}
|
|
640
|
-
if (
|
|
641
|
-
const
|
|
642
|
-
|
|
653
|
+
if (He.current && (He.current.delayTime.value = Math.max(0.01, i.echo.time / 1e3)), je.current && (je.current.gain.value = t ? Math.min(0.85, i.echo.feedback / 100) : 0), Xe.current && (Xe.current.gain.value = t ? i.echo.mix / 100 : 0), !t && (ve.current && (ve.current.pan.value = 0), B.current && C.current)) {
|
|
654
|
+
const l = C.current.currentTime;
|
|
655
|
+
B.current.positionX ? (B.current.positionX.setTargetAtTime(0, l, 0.01), B.current.positionY.setTargetAtTime(0, l, 0.01), B.current.positionZ.setTargetAtTime(-1.4, l, 0.01)) : B.current.setPosition && B.current.setPosition(0, 0, -1.4);
|
|
643
656
|
}
|
|
644
657
|
}
|
|
645
|
-
}, [
|
|
646
|
-
const
|
|
658
|
+
}, [i]);
|
|
659
|
+
const vt = () => {
|
|
647
660
|
if (!C.current || !W.current) return;
|
|
648
|
-
const t =
|
|
661
|
+
const t = M.current;
|
|
649
662
|
if (!t.enable) return;
|
|
650
|
-
const
|
|
651
|
-
|
|
652
|
-
const
|
|
653
|
-
|
|
654
|
-
const
|
|
655
|
-
if (
|
|
656
|
-
const
|
|
657
|
-
ve.current.pan.setTargetAtTime(
|
|
663
|
+
const l = performance.now(), g = Ie.current ? Math.min(0.1, (l - Ie.current) / 1e3) : 0.016;
|
|
664
|
+
Ie.current = l;
|
|
665
|
+
const b = t.spatial.rate;
|
|
666
|
+
Ye.current += b * 5 * g;
|
|
667
|
+
const y = Ye.current, ae = 2.3 * (t.spatial.width / 135), X = Math.sin(y) * ae, J = -Math.cos(y) * ae, D = Math.sin(y * 2) * 0.4, se = C.current.currentTime;
|
|
668
|
+
if (B.current && (B.current.positionX ? (B.current.positionX.setTargetAtTime(X, se, 0.04), B.current.positionY.setTargetAtTime(D, se, 0.04), B.current.positionZ.setTargetAtTime(J, se, 0.04)) : B.current.setPosition && B.current.setPosition(X, D, J)), ve.current) {
|
|
669
|
+
const be = Math.sin(y) * (t.spatial.width / 180), ye = (t.spatial.focus - 50) / 100, _e = Math.max(-1, Math.min(1, be + ye));
|
|
670
|
+
ve.current.pan.setTargetAtTime(_e, se, 0.04);
|
|
658
671
|
}
|
|
659
672
|
};
|
|
660
|
-
|
|
661
|
-
W.current =
|
|
662
|
-
}, [
|
|
663
|
-
const
|
|
664
|
-
if (!C.current &&
|
|
673
|
+
T(() => {
|
|
674
|
+
W.current = Z, le.current && (cancelAnimationFrame(le.current), le.current = null), he.current && (clearInterval(he.current), he.current = null), Z ? (C.current || jt(), Ie.current = performance.now(), he.current = window.setInterval(vt, 30), ft()) : mt();
|
|
675
|
+
}, [Z]);
|
|
676
|
+
const jt = () => {
|
|
677
|
+
if (!C.current && p.current)
|
|
665
678
|
try {
|
|
666
679
|
const t = window.AudioContext || window.webkitAudioContext;
|
|
667
680
|
if (t) {
|
|
668
|
-
const
|
|
669
|
-
C.current =
|
|
670
|
-
const g =
|
|
671
|
-
g.type = "lowshelf", g.frequency.value = 320, g.gain.value =
|
|
672
|
-
const
|
|
673
|
-
|
|
674
|
-
const
|
|
675
|
-
|
|
676
|
-
const
|
|
677
|
-
|
|
678
|
-
let
|
|
681
|
+
const l = new t();
|
|
682
|
+
C.current = l;
|
|
683
|
+
const g = l.createBiquadFilter();
|
|
684
|
+
g.type = "lowshelf", g.frequency.value = 320, g.gain.value = Q.bass;
|
|
685
|
+
const b = l.createBiquadFilter();
|
|
686
|
+
b.type = "peaking", b.frequency.value = 1e3, b.Q.value = 0.5, b.gain.value = Q.mid;
|
|
687
|
+
const y = l.createBiquadFilter();
|
|
688
|
+
y.type = "highshelf", y.frequency.value = 3200, y.gain.value = Q.treble;
|
|
689
|
+
const U = l.createWaveShaper();
|
|
690
|
+
U.curve = Lt(M.current.enable ? M.current.tape.drive : 0), ie();
|
|
691
|
+
let ae = null;
|
|
679
692
|
try {
|
|
680
|
-
const
|
|
681
|
-
|
|
693
|
+
const Te = l.createPanner();
|
|
694
|
+
Te.panningModel = "HRTF", Te.distanceModel = "inverse", Te.refDistance = 1.4, Te.rolloffFactor = 0.55, ae = Te;
|
|
682
695
|
} catch {
|
|
683
696
|
}
|
|
684
|
-
let
|
|
685
|
-
if (
|
|
686
|
-
const
|
|
687
|
-
|
|
697
|
+
let X = null;
|
|
698
|
+
if (l.createStereoPanner) {
|
|
699
|
+
const Te = l.createStereoPanner();
|
|
700
|
+
Te.pan.value = 0, X = Te;
|
|
688
701
|
}
|
|
689
|
-
const
|
|
690
|
-
|
|
691
|
-
const
|
|
692
|
-
|
|
693
|
-
const
|
|
694
|
-
|
|
695
|
-
const
|
|
696
|
-
|
|
697
|
-
const
|
|
698
|
-
|
|
699
|
-
const
|
|
700
|
-
|
|
701
|
-
const
|
|
702
|
-
|
|
703
|
-
const
|
|
704
|
-
|
|
705
|
-
const
|
|
706
|
-
|
|
707
|
-
const
|
|
708
|
-
|
|
702
|
+
const J = l.createGain();
|
|
703
|
+
J.gain.value = 1;
|
|
704
|
+
const D = l.createConvolver();
|
|
705
|
+
D.buffer = zt(l, M.current.reverb.size);
|
|
706
|
+
const se = l.createBiquadFilter();
|
|
707
|
+
se.type = "lowpass", se.frequency.value = M.current.reverb.tone / 100 * 8e3 + 500;
|
|
708
|
+
const be = l.createGain();
|
|
709
|
+
be.gain.value = M.current.enable ? M.current.reverb.mix / 100 : 0;
|
|
710
|
+
const ye = l.createDelay(2);
|
|
711
|
+
ye.delayTime.value = M.current.echo.time / 1e3;
|
|
712
|
+
const _e = l.createGain();
|
|
713
|
+
_e.gain.value = Math.min(0.85, M.current.echo.feedback / 100);
|
|
714
|
+
const Je = l.createGain();
|
|
715
|
+
Je.gain.value = M.current.enable ? M.current.echo.mix / 100 : 0, ye.connect(_e), _e.connect(ye);
|
|
716
|
+
const Be = l.createAnalyser();
|
|
717
|
+
Be.fftSize = 8192, Be.smoothingTimeConstant = 0.7;
|
|
718
|
+
const At = l.createMediaElementSource(p.current);
|
|
719
|
+
At.connect(g), g.connect(b), b.connect(y), y.connect(U);
|
|
720
|
+
const et = ae, Ze = X, st = et || Ze || U;
|
|
721
|
+
et ? (U.connect(et), Ze && et.connect(Ze)) : Ze && U.connect(Ze), st.connect(J), J.connect(Be), st.connect(D), D.connect(se), se.connect(be), be.connect(Be), st.connect(ye), ye.connect(Je), Je.connect(Be), Be.connect(l.destination), ue.current = g, Ae.current = b, xe.current = y, Ve.current = U, B.current = ae, ve.current = X, at.current = J, We.current = D, Ue.current = se, Ge.current = be, He.current = ye, je.current = _e, Xe.current = Je, te.current = Be, A.current = At;
|
|
709
722
|
}
|
|
710
723
|
} catch (t) {
|
|
711
724
|
console.error("Failed to setup audio context:", t);
|
|
712
725
|
}
|
|
713
|
-
},
|
|
714
|
-
const
|
|
715
|
-
if (!
|
|
716
|
-
const
|
|
717
|
-
return Math.min(
|
|
718
|
-
},
|
|
726
|
+
}, ht = (t) => {
|
|
727
|
+
const l = C.current, g = te.current;
|
|
728
|
+
if (!l || !g) return 0;
|
|
729
|
+
const b = l.sampleRate / 2, y = Math.round(t / b * g.frequencyBinCount);
|
|
730
|
+
return Math.min(y, g.frequencyBinCount - 1);
|
|
731
|
+
}, mt = () => {
|
|
719
732
|
if (W.current) return;
|
|
720
|
-
f.current = f.current.map((
|
|
733
|
+
f.current = f.current.map((b) => b * 0.7);
|
|
721
734
|
const t = Date.now();
|
|
722
|
-
|
|
723
|
-
const
|
|
724
|
-
|
|
725
|
-
},
|
|
726
|
-
if (!
|
|
727
|
-
const t =
|
|
735
|
+
x.current = x.current.map((b, y) => t - S.current[y] > 1500 ? b * 0.95 : b), Oe();
|
|
736
|
+
const l = Math.max(...f.current), g = Math.max(...x.current);
|
|
737
|
+
l > 0.01 || g > 0.01 ? le.current = requestAnimationFrame(mt) : (W.current || (f.current = n.map(() => 0), x.current = n.map(() => 0), S.current = n.map(() => 0), Oe()), le.current && cancelAnimationFrame(le.current), le.current = null);
|
|
738
|
+
}, ft = () => {
|
|
739
|
+
if (!te.current || !W.current) return;
|
|
740
|
+
const t = M.current;
|
|
728
741
|
if (t.enable && C.current) {
|
|
729
|
-
|
|
730
|
-
const
|
|
731
|
-
if (
|
|
732
|
-
const
|
|
733
|
-
|
|
742
|
+
vt();
|
|
743
|
+
const b = Ye.current, y = t.spatial.width / 135;
|
|
744
|
+
if (Se.current) {
|
|
745
|
+
const U = 85 * (y > 0 ? 1 : 0), ae = 55 * (y > 0 ? 1 : 0), X = Math.sin(b) * U, J = -Math.cos(b) * ae;
|
|
746
|
+
Se.current.style.transform = `translate(${X}px, ${J}px)`, Ce.current && (Ce.current.setAttribute("x2", `${110 + X}`), Ce.current.setAttribute("y2", `${75 + J}`));
|
|
734
747
|
}
|
|
735
748
|
} else if (C.current) {
|
|
736
|
-
const
|
|
737
|
-
|
|
749
|
+
const b = C.current.currentTime;
|
|
750
|
+
B.current && (B.current.positionX ? (B.current.positionX.setTargetAtTime(0, b, 0.04), B.current.positionY.setTargetAtTime(0, b, 0.04), B.current.positionZ.setTargetAtTime(-1.4, b, 0.04)) : B.current.setPosition && B.current.setPosition(0, 0, -1.4)), ve.current && ve.current.pan.setTargetAtTime(0, b, 0.04), Se.current && (Se.current.style.transform = "translate(0px, 0px)"), Ce.current && (Ce.current.setAttribute("x2", "110"), Ce.current.setAttribute("y2", "20"));
|
|
738
751
|
}
|
|
739
|
-
const
|
|
740
|
-
|
|
741
|
-
const
|
|
742
|
-
let
|
|
743
|
-
for (let
|
|
744
|
-
|
|
745
|
-
let
|
|
746
|
-
|
|
747
|
-
const
|
|
748
|
-
f.current[
|
|
749
|
-
}),
|
|
750
|
-
},
|
|
751
|
-
if (!
|
|
752
|
-
const t =
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
752
|
+
const l = te.current.frequencyBinCount, g = new Uint8Array(l);
|
|
753
|
+
te.current.getByteFrequencyData(g), n.forEach((b, y) => {
|
|
754
|
+
const U = ht(b.freq), ae = y < n.length - 1 ? ht(n[y + 1].freq) : g.length;
|
|
755
|
+
let X = 0, J = 0;
|
|
756
|
+
for (let be = U; be < ae; be++)
|
|
757
|
+
X += g[be], J++;
|
|
758
|
+
let D = J > 0 ? X / J / 255 : 0;
|
|
759
|
+
D = Math.pow(D, 0.6), f.current[y] = f.current[y] * 0.8 + D * 0.2;
|
|
760
|
+
const se = Date.now();
|
|
761
|
+
f.current[y] > x.current[y] ? (x.current[y] = f.current[y], S.current[y] = se) : se - S.current[y] > 1500 && (x.current[y] *= 0.95);
|
|
762
|
+
}), Oe(), le.current = requestAnimationFrame(ft);
|
|
763
|
+
}, Oe = () => {
|
|
764
|
+
if (!Ke.current) return;
|
|
765
|
+
const t = me[oe.current] || me.rainbow, l = Ke.current;
|
|
766
|
+
if (l.children.length !== n.length) {
|
|
767
|
+
let y = "";
|
|
768
|
+
n.forEach(() => {
|
|
769
|
+
y += `
|
|
770
|
+
<div class="ecp-vu-bar-wrap">
|
|
771
|
+
<div class="ecp-vu-bar-fill"></div>
|
|
772
|
+
<div class="ecp-vu-peak-line" style="display:none;"></div>
|
|
760
773
|
</div>
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
}
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
},
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
774
|
+
`;
|
|
775
|
+
}), l.innerHTML = y;
|
|
776
|
+
}
|
|
777
|
+
const g = l.clientHeight, b = l.children;
|
|
778
|
+
for (let y = 0; y < n.length; y++) {
|
|
779
|
+
const U = b[y];
|
|
780
|
+
if (!U) continue;
|
|
781
|
+
const ae = U.children[0], X = U.children[1], J = Math.round(f.current[y] * g), D = Math.round((1 - x.current[y]) * g), se = Math.floor(y / n.length * t.bars.length), be = t.bars[Math.min(se, t.bars.length - 1)];
|
|
782
|
+
if (ae && (ae.style.height = `${J}px`, ae.style.backgroundColor = be), X) {
|
|
783
|
+
const ye = x.current[y] > 0.1;
|
|
784
|
+
X.style.display = ye ? "block" : "none", ye && (X.style.transform = `translate3d(0, ${D}px, 0)`, X.style.backgroundColor = t.peak);
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
}, Ot = () => {
|
|
788
|
+
!p.current || !s || (Z ? p.current.pause() : (C.current && C.current.state === "suspended" && C.current.resume(), p.current.play().catch((t) => console.error("Play failed:", t))));
|
|
789
|
+
}, _t = () => {
|
|
790
|
+
p.current && (p.current.pause(), p.current.currentTime = 0, H(!1), K(0), f.current = n.map(() => 0), x.current = n.map(() => 0), S.current = n.map(() => 0), Oe());
|
|
791
|
+
}, Et = (t) => {
|
|
792
|
+
const g = parseFloat(t.target.value) / 100 * _;
|
|
793
|
+
K(g), p.current && !fe && (p.current.currentTime = g);
|
|
794
|
+
}, bt = () => qe(!0), gt = () => {
|
|
795
|
+
p.current && (p.current.currentTime = O), qe(!1);
|
|
796
|
+
}, Wt = (t) => {
|
|
797
|
+
const l = parseInt(t.target.value);
|
|
798
|
+
Fe(l), Re(l === 0);
|
|
799
|
+
}, Ut = () => Re(!ge), Gt = (t) => Ee(parseFloat(t.target.value)), Xt = () => ze(!E), Vt = (t, l) => Pe((g) => ({ ...g, [t]: l })), Yt = () => Pe({ bass: 0, mid: 0, treble: 0 }), yt = (t) => {
|
|
781
800
|
if (isNaN(t)) return "0:00";
|
|
782
|
-
const
|
|
783
|
-
return `${
|
|
801
|
+
const l = Math.floor(t / 60), g = Math.floor(t % 60);
|
|
802
|
+
return `${l}:${g.toString().padStart(2, "0")}`;
|
|
784
803
|
};
|
|
785
|
-
if (
|
|
786
|
-
return /* @__PURE__ */ e(
|
|
804
|
+
if (we && we.length > 0)
|
|
805
|
+
return /* @__PURE__ */ e(St, { children: we.map((t, l) => /* @__PURE__ */ r("div", { className: "ecp-vp-error", children: [
|
|
787
806
|
/* @__PURE__ */ r("strong", { children: [
|
|
788
807
|
t[0],
|
|
789
808
|
":"
|
|
790
809
|
] }),
|
|
791
810
|
" ",
|
|
792
811
|
t[1]
|
|
793
|
-
] },
|
|
794
|
-
const
|
|
795
|
-
return /* @__PURE__ */ e("div", { ref:
|
|
812
|
+
] }, l)) });
|
|
813
|
+
const Zt = Qe || I ? void 0 : q ? "#6060606a" : "#ffffffab", Kt = Qe || I ? void 0 : o.bg;
|
|
814
|
+
return /* @__PURE__ */ e("div", { ref: ct, className: "ecp-vp-wrapper", style: { backgroundColor: Zt }, children: /* @__PURE__ */ r("div", { className: "ecp-vp-bg", style: { background: Kt }, children: [
|
|
796
815
|
/* @__PURE__ */ r("div", { className: "ecp-vp-vu-outer", children: [
|
|
797
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-vu-bg ${
|
|
798
|
-
|
|
816
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-vu-bg ${I ? " ecp-vp-vu-bg--transparent" : q ? " ecp-vp-vu-bg--dark" : " ecp-vp-vu-bg--light"}${(ee || ne) && I ? " ecp-vp-vu-bg--dimmed" : ""}${Qe ? " ecp-vp-vu-bg--no-margin" : ""}`, style: { overflow: "hidden" }, children: /* @__PURE__ */ e("div", { className: "ecp-vp-vu-bars", ref: Ke }) }),
|
|
817
|
+
i.enable && Z && /* @__PURE__ */ e("div", { className: "ecp-vp-8d-live-overlay", children: /* @__PURE__ */ r(
|
|
799
818
|
"div",
|
|
800
819
|
{
|
|
801
|
-
className: `ecp-vp-8d-live-visualizer${
|
|
802
|
-
style: { "--theme-slider":
|
|
820
|
+
className: `ecp-vp-8d-live-visualizer${q ? " ecp-vp-8d-live-visualizer--dark" : " ecp-vp-8d-live-visualizer--light"}`,
|
|
821
|
+
style: { "--theme-slider": o.slider, "--theme-slider-alpha": `${o.slider}33` },
|
|
803
822
|
children: [
|
|
804
|
-
/* @__PURE__ */ e("div", { className: "ecp-vp-8d-live-glow", style: { background: `radial-gradient(circle, ${
|
|
823
|
+
/* @__PURE__ */ e("div", { className: "ecp-vp-8d-live-glow", style: { background: `radial-gradient(circle, ${o.slider}35 0%, transparent 70%)` } }),
|
|
805
824
|
/* @__PURE__ */ r("svg", { className: "ecp-vp-8d-live-svg", viewBox: "0 0 220 150", children: [
|
|
806
|
-
/* @__PURE__ */ e("circle", { cx: "110", cy: "75", r: "35", stroke:
|
|
825
|
+
/* @__PURE__ */ e("circle", { cx: "110", cy: "75", r: "35", stroke: o.slider, strokeOpacity: "0.2", strokeWidth: "1", fill: "none" }),
|
|
807
826
|
/* @__PURE__ */ e(
|
|
808
827
|
"ellipse",
|
|
809
828
|
{
|
|
@@ -812,7 +831,7 @@ function mr({
|
|
|
812
831
|
rx: "85",
|
|
813
832
|
ry: "55",
|
|
814
833
|
fill: "none",
|
|
815
|
-
stroke:
|
|
834
|
+
stroke: o.slider,
|
|
816
835
|
strokeOpacity: "0.5",
|
|
817
836
|
strokeWidth: "2",
|
|
818
837
|
strokeDasharray: "2 7",
|
|
@@ -822,26 +841,26 @@ function mr({
|
|
|
822
841
|
/* @__PURE__ */ e(
|
|
823
842
|
"line",
|
|
824
843
|
{
|
|
825
|
-
ref:
|
|
844
|
+
ref: Ce,
|
|
826
845
|
x1: "110",
|
|
827
846
|
y1: "75",
|
|
828
847
|
x2: "110",
|
|
829
848
|
y2: "20",
|
|
830
|
-
stroke:
|
|
849
|
+
stroke: o.slider,
|
|
831
850
|
strokeOpacity: "0.75",
|
|
832
851
|
strokeWidth: "1.5"
|
|
833
852
|
}
|
|
834
853
|
),
|
|
835
854
|
/* @__PURE__ */ r("g", { transform: "translate(110, 75)", children: [
|
|
836
|
-
/* @__PURE__ */ e("circle", { cx: "0", cy: "0", r: "14", fill: "none", stroke:
|
|
837
|
-
/* @__PURE__ */ e("line", { x1: "0", y1: "14", x2: "0", y2: "19", stroke:
|
|
855
|
+
/* @__PURE__ */ e("circle", { cx: "0", cy: "0", r: "14", fill: "none", stroke: o.slider, strokeOpacity: "0.8", strokeWidth: "1.5" }),
|
|
856
|
+
/* @__PURE__ */ e("line", { x1: "0", y1: "14", x2: "0", y2: "19", stroke: o.slider, strokeOpacity: "0.8", strokeWidth: "1.5" }),
|
|
838
857
|
/* @__PURE__ */ e(
|
|
839
858
|
"text",
|
|
840
859
|
{
|
|
841
860
|
x: "0",
|
|
842
861
|
y: "29",
|
|
843
862
|
textAnchor: "middle",
|
|
844
|
-
fill:
|
|
863
|
+
fill: o.slider,
|
|
845
864
|
fillOpacity: "0.75",
|
|
846
865
|
fontSize: "8",
|
|
847
866
|
fontWeight: "700",
|
|
@@ -852,15 +871,15 @@ function mr({
|
|
|
852
871
|
)
|
|
853
872
|
] })
|
|
854
873
|
] }),
|
|
855
|
-
/* @__PURE__ */ e(it, { size: 14, className: "ecp-vp-8d-live-head-icon", style: { color:
|
|
874
|
+
/* @__PURE__ */ e(it, { size: 14, className: "ecp-vp-8d-live-head-icon", style: { color: o.slider } }),
|
|
856
875
|
/* @__PURE__ */ e(
|
|
857
876
|
"div",
|
|
858
877
|
{
|
|
859
|
-
ref:
|
|
878
|
+
ref: Se,
|
|
860
879
|
className: "ecp-vp-8d-live-dot",
|
|
861
880
|
style: {
|
|
862
|
-
background:
|
|
863
|
-
boxShadow: `0 0 12px ${
|
|
881
|
+
background: o.slider,
|
|
882
|
+
boxShadow: `0 0 12px ${o.slider}`
|
|
864
883
|
},
|
|
865
884
|
children: /* @__PURE__ */ e("span", { className: "ecp-vp-8d-live-dot-inner" })
|
|
866
885
|
}
|
|
@@ -868,59 +887,59 @@ function mr({
|
|
|
868
887
|
]
|
|
869
888
|
}
|
|
870
889
|
) }),
|
|
871
|
-
|
|
872
|
-
/* @__PURE__ */ e("h3", { className: `ecp-vp-eq-title${
|
|
890
|
+
ee && /* @__PURE__ */ r("div", { className: `ecp-vp-eq-overlay${q ? " ecp-vp-eq-overlay--dark" : " ecp-vp-eq-overlay--light"}`, children: [
|
|
891
|
+
/* @__PURE__ */ e("h3", { className: `ecp-vp-eq-title${q ? " ecp-vp-eq-title--dark" : " ecp-vp-eq-title--light"}`, children: "Equalizer" }),
|
|
873
892
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bands", children: ["bass", "mid", "treble"].map((t) => /* @__PURE__ */ r("div", { className: "ecp-vp-eq-band", children: [
|
|
874
893
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-header", children: [
|
|
875
|
-
/* @__PURE__ */ e("span", { className: `ecp-vp-eq-band-label${
|
|
876
|
-
/* @__PURE__ */ r("span", { className: `ecp-vp-eq-band-label${
|
|
877
|
-
|
|
894
|
+
/* @__PURE__ */ e("span", { className: `ecp-vp-eq-band-label${q ? " ecp-vp-eq-band-label--dark" : " ecp-vp-eq-band-label--light"}`, children: t.charAt(0).toUpperCase() + t.slice(1) }),
|
|
895
|
+
/* @__PURE__ */ r("span", { className: `ecp-vp-eq-band-label${q ? " ecp-vp-eq-band-label--dark" : " ecp-vp-eq-band-label--light"}`, children: [
|
|
896
|
+
Q[t] > 0 ? `+${Q[t]}` : Q[t],
|
|
878
897
|
" dB"
|
|
879
898
|
] })
|
|
880
899
|
] }),
|
|
881
900
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-range", children: [
|
|
882
|
-
/* @__PURE__ */ e("span", { className: `ecp-vp-eq-range-bound${
|
|
901
|
+
/* @__PURE__ */ e("span", { className: `ecp-vp-eq-range-bound${q ? " ecp-vp-eq-range-bound--dark" : " ecp-vp-eq-range-bound--light"}`, children: "-20" }),
|
|
883
902
|
/* @__PURE__ */ e(
|
|
884
903
|
"input",
|
|
885
904
|
{
|
|
886
905
|
type: "range",
|
|
887
906
|
min: "-20",
|
|
888
907
|
max: "20",
|
|
889
|
-
value:
|
|
890
|
-
onChange: (
|
|
908
|
+
value: Q[t],
|
|
909
|
+
onChange: (l) => Vt(t, parseInt(l.target.value)),
|
|
891
910
|
className: "ecp-vp-eq-slider",
|
|
892
911
|
style: {
|
|
893
|
-
background: `linear-gradient(to right, ${
|
|
894
|
-
"--thumb-color":
|
|
912
|
+
background: `linear-gradient(to right, ${o.slider} ${(Q[t] + 20) / 40 * 100}%, ${o.slider + "30"} ${(Q[t] + 20) / 40 * 100}%)`,
|
|
913
|
+
"--thumb-color": o.slider
|
|
895
914
|
}
|
|
896
915
|
}
|
|
897
916
|
),
|
|
898
|
-
/* @__PURE__ */ e("span", { className: `ecp-vp-eq-range-bound${
|
|
917
|
+
/* @__PURE__ */ e("span", { className: `ecp-vp-eq-range-bound${q ? " ecp-vp-eq-range-bound--dark" : " ecp-vp-eq-range-bound--light"}`, children: "+20" })
|
|
899
918
|
] })
|
|
900
919
|
] }, t)) }),
|
|
901
|
-
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-footer", children: /* @__PURE__ */ e("button", { onClick:
|
|
920
|
+
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-footer", children: /* @__PURE__ */ e("button", { onClick: Yt, className: `ecp-vp-eq-reset${q ? " ecp-vp-eq-reset--dark" : " ecp-vp-eq-reset--light"}`, children: "Reset" }) })
|
|
902
921
|
] }),
|
|
903
|
-
|
|
922
|
+
ne && /* @__PURE__ */ r(
|
|
904
923
|
"div",
|
|
905
924
|
{
|
|
906
|
-
className: `ecp-vp-eq-overlay${
|
|
925
|
+
className: `ecp-vp-eq-overlay${q ? " ecp-vp-eq-overlay--dark" : " ecp-vp-eq-overlay--light"}`,
|
|
907
926
|
style: {
|
|
908
|
-
"--theme-slider":
|
|
909
|
-
"--theme-slider-alpha": `${
|
|
927
|
+
"--theme-slider": o.slider,
|
|
928
|
+
"--theme-slider-alpha": `${o.slider}33`
|
|
910
929
|
},
|
|
911
930
|
children: [
|
|
912
931
|
/* @__PURE__ */ r("div", { className: "ecp-vp-8d-header", children: [
|
|
913
932
|
/* @__PURE__ */ r("div", { className: "ecp-vp-8d-title-group", children: [
|
|
914
|
-
/* @__PURE__ */ e(it, { size: 18, style: { color:
|
|
915
|
-
/* @__PURE__ */ e("h3", { className: `ecp-vp-eq-title${
|
|
933
|
+
/* @__PURE__ */ e(it, { size: 18, style: { color: o.slider } }),
|
|
934
|
+
/* @__PURE__ */ e("h3", { className: `ecp-vp-eq-title${q ? " ecp-vp-eq-title--dark" : " ecp-vp-eq-title--light"}`, style: { margin: 0 }, children: "8D Spatial Engine" })
|
|
916
935
|
] }),
|
|
917
936
|
/* @__PURE__ */ r("div", { className: "ecp-vp-8d-toggle-wrap", children: [
|
|
918
|
-
/* @__PURE__ */ e("span", { className: `ecp-vp-8d-toggle-label${
|
|
937
|
+
/* @__PURE__ */ e("span", { className: `ecp-vp-8d-toggle-label${q ? " ecp-vp-8d-toggle-label--dark" : " ecp-vp-8d-toggle-label--light"}`, children: i.enable ? "On" : "Off" }),
|
|
919
938
|
/* @__PURE__ */ e(
|
|
920
939
|
"button",
|
|
921
940
|
{
|
|
922
|
-
onClick:
|
|
923
|
-
className: `ecp-vp-8d-toggle${
|
|
941
|
+
onClick: $,
|
|
942
|
+
className: `ecp-vp-8d-toggle${i.enable ? " ecp-vp-8d-toggle--on" : ""}`,
|
|
924
943
|
children: /* @__PURE__ */ e("div", { className: "ecp-vp-8d-toggle-thumb" })
|
|
925
944
|
}
|
|
926
945
|
)
|
|
@@ -929,17 +948,17 @@ function mr({
|
|
|
929
948
|
/* @__PURE__ */ e("div", { className: "ecp-vp-8d-tabs", children: ["spatial", "reverb", "echo", "tape"].map((t) => /* @__PURE__ */ e(
|
|
930
949
|
"button",
|
|
931
950
|
{
|
|
932
|
-
onClick: () =>
|
|
933
|
-
className: `ecp-vp-8d-tab${
|
|
951
|
+
onClick: () => Ne(t),
|
|
952
|
+
className: `ecp-vp-8d-tab${q ? " ecp-vp-8d-tab--dark" : " ecp-vp-8d-tab--light"}${pe === t ? " ecp-vp-8d-tab--active" : ""}`,
|
|
934
953
|
children: t.charAt(0).toUpperCase() + t.slice(1)
|
|
935
954
|
},
|
|
936
955
|
t
|
|
937
956
|
)) }),
|
|
938
957
|
/* @__PURE__ */ r("div", { className: "ecp-vp-8d-controls-grid", children: [
|
|
939
|
-
|
|
958
|
+
pe === "spatial" && /* @__PURE__ */ r("div", { className: "ecp-vp-eq-bands--horizontal", children: [
|
|
940
959
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
941
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
942
|
-
|
|
960
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
961
|
+
i.spatial.rate.toFixed(2),
|
|
943
962
|
"x"
|
|
944
963
|
] }),
|
|
945
964
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -949,20 +968,20 @@ function mr({
|
|
|
949
968
|
min: "0.01",
|
|
950
969
|
max: "1.00",
|
|
951
970
|
step: "0.01",
|
|
952
|
-
value:
|
|
971
|
+
value: i.spatial.rate,
|
|
953
972
|
onChange: (t) => c("spatial", "rate", parseFloat(t.target.value)),
|
|
954
973
|
className: "ecp-vp-eq-slider",
|
|
955
974
|
style: {
|
|
956
|
-
background: `linear-gradient(to right, ${
|
|
957
|
-
"--thumb-color":
|
|
975
|
+
background: `linear-gradient(to right, ${o.slider} ${(i.spatial.rate - 0.01) / 0.99 * 100}%, ${o.slider + "30"} ${(i.spatial.rate - 0.01) / 0.99 * 100}%)`,
|
|
976
|
+
"--thumb-color": o.slider
|
|
958
977
|
}
|
|
959
978
|
}
|
|
960
979
|
) }),
|
|
961
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
980
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "RATE" })
|
|
962
981
|
] }),
|
|
963
982
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
964
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
965
|
-
|
|
983
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
984
|
+
i.spatial.width,
|
|
966
985
|
"°"
|
|
967
986
|
] }),
|
|
968
987
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -972,20 +991,20 @@ function mr({
|
|
|
972
991
|
min: "0",
|
|
973
992
|
max: "180",
|
|
974
993
|
step: "5",
|
|
975
|
-
value:
|
|
994
|
+
value: i.spatial.width,
|
|
976
995
|
onChange: (t) => c("spatial", "width", parseInt(t.target.value)),
|
|
977
996
|
className: "ecp-vp-eq-slider",
|
|
978
997
|
style: {
|
|
979
|
-
background: `linear-gradient(to right, ${
|
|
980
|
-
"--thumb-color":
|
|
998
|
+
background: `linear-gradient(to right, ${o.slider} ${i.spatial.width / 180 * 100}%, ${o.slider + "30"} ${i.spatial.width / 180 * 100}%)`,
|
|
999
|
+
"--thumb-color": o.slider
|
|
981
1000
|
}
|
|
982
1001
|
}
|
|
983
1002
|
) }),
|
|
984
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1003
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "WIDTH" })
|
|
985
1004
|
] }),
|
|
986
1005
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
987
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
988
|
-
|
|
1006
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
1007
|
+
i.spatial.focus,
|
|
989
1008
|
"%"
|
|
990
1009
|
] }),
|
|
991
1010
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -995,22 +1014,22 @@ function mr({
|
|
|
995
1014
|
min: "0",
|
|
996
1015
|
max: "100",
|
|
997
1016
|
step: "1",
|
|
998
|
-
value:
|
|
1017
|
+
value: i.spatial.focus,
|
|
999
1018
|
onChange: (t) => c("spatial", "focus", parseInt(t.target.value)),
|
|
1000
1019
|
className: "ecp-vp-eq-slider",
|
|
1001
1020
|
style: {
|
|
1002
|
-
background: `linear-gradient(to right, ${
|
|
1003
|
-
"--thumb-color":
|
|
1021
|
+
background: `linear-gradient(to right, ${o.slider} ${i.spatial.focus}%, ${o.slider + "30"} ${i.spatial.focus}%)`,
|
|
1022
|
+
"--thumb-color": o.slider
|
|
1004
1023
|
}
|
|
1005
1024
|
}
|
|
1006
1025
|
) }),
|
|
1007
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1026
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "FOCUS" })
|
|
1008
1027
|
] })
|
|
1009
1028
|
] }),
|
|
1010
|
-
|
|
1029
|
+
pe === "reverb" && /* @__PURE__ */ r("div", { className: "ecp-vp-eq-bands--horizontal", children: [
|
|
1011
1030
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
1012
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
1013
|
-
|
|
1031
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
1032
|
+
i.reverb.size.toFixed(1),
|
|
1014
1033
|
"s"
|
|
1015
1034
|
] }),
|
|
1016
1035
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -1020,20 +1039,20 @@ function mr({
|
|
|
1020
1039
|
min: "0.2",
|
|
1021
1040
|
max: "5.0",
|
|
1022
1041
|
step: "0.1",
|
|
1023
|
-
value:
|
|
1042
|
+
value: i.reverb.size,
|
|
1024
1043
|
onChange: (t) => c("reverb", "size", parseFloat(t.target.value)),
|
|
1025
1044
|
className: "ecp-vp-eq-slider",
|
|
1026
1045
|
style: {
|
|
1027
|
-
background: `linear-gradient(to right, ${
|
|
1028
|
-
"--thumb-color":
|
|
1046
|
+
background: `linear-gradient(to right, ${o.slider} ${(i.reverb.size - 0.2) / 4.8 * 100}%, ${o.slider + "30"} ${(i.reverb.size - 0.2) / 4.8 * 100}%)`,
|
|
1047
|
+
"--thumb-color": o.slider
|
|
1029
1048
|
}
|
|
1030
1049
|
}
|
|
1031
1050
|
) }),
|
|
1032
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1051
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "SIZE" })
|
|
1033
1052
|
] }),
|
|
1034
1053
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
1035
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
1036
|
-
|
|
1054
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
1055
|
+
i.reverb.tone,
|
|
1037
1056
|
"%"
|
|
1038
1057
|
] }),
|
|
1039
1058
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -1043,20 +1062,20 @@ function mr({
|
|
|
1043
1062
|
min: "0",
|
|
1044
1063
|
max: "100",
|
|
1045
1064
|
step: "1",
|
|
1046
|
-
value:
|
|
1065
|
+
value: i.reverb.tone,
|
|
1047
1066
|
onChange: (t) => c("reverb", "tone", parseInt(t.target.value)),
|
|
1048
1067
|
className: "ecp-vp-eq-slider",
|
|
1049
1068
|
style: {
|
|
1050
|
-
background: `linear-gradient(to right, ${
|
|
1051
|
-
"--thumb-color":
|
|
1069
|
+
background: `linear-gradient(to right, ${o.slider} ${i.reverb.tone}%, ${o.slider + "30"} ${i.reverb.tone}%)`,
|
|
1070
|
+
"--thumb-color": o.slider
|
|
1052
1071
|
}
|
|
1053
1072
|
}
|
|
1054
1073
|
) }),
|
|
1055
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1074
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "TONE" })
|
|
1056
1075
|
] }),
|
|
1057
1076
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
1058
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
1059
|
-
|
|
1077
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
1078
|
+
i.reverb.mix,
|
|
1060
1079
|
"%"
|
|
1061
1080
|
] }),
|
|
1062
1081
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -1066,22 +1085,22 @@ function mr({
|
|
|
1066
1085
|
min: "0",
|
|
1067
1086
|
max: "100",
|
|
1068
1087
|
step: "1",
|
|
1069
|
-
value:
|
|
1088
|
+
value: i.reverb.mix,
|
|
1070
1089
|
onChange: (t) => c("reverb", "mix", parseInt(t.target.value)),
|
|
1071
1090
|
className: "ecp-vp-eq-slider",
|
|
1072
1091
|
style: {
|
|
1073
|
-
background: `linear-gradient(to right, ${
|
|
1074
|
-
"--thumb-color":
|
|
1092
|
+
background: `linear-gradient(to right, ${o.slider} ${i.reverb.mix}%, ${o.slider + "30"} ${i.reverb.mix}%)`,
|
|
1093
|
+
"--thumb-color": o.slider
|
|
1075
1094
|
}
|
|
1076
1095
|
}
|
|
1077
1096
|
) }),
|
|
1078
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1097
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "MIX" })
|
|
1079
1098
|
] })
|
|
1080
1099
|
] }),
|
|
1081
|
-
|
|
1100
|
+
pe === "echo" && /* @__PURE__ */ r("div", { className: "ecp-vp-eq-bands--horizontal", children: [
|
|
1082
1101
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
1083
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
1084
|
-
|
|
1102
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
1103
|
+
i.echo.time,
|
|
1085
1104
|
"ms"
|
|
1086
1105
|
] }),
|
|
1087
1106
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -1091,20 +1110,20 @@ function mr({
|
|
|
1091
1110
|
min: "50",
|
|
1092
1111
|
max: "1000",
|
|
1093
1112
|
step: "10",
|
|
1094
|
-
value:
|
|
1113
|
+
value: i.echo.time,
|
|
1095
1114
|
onChange: (t) => c("echo", "time", parseInt(t.target.value)),
|
|
1096
1115
|
className: "ecp-vp-eq-slider",
|
|
1097
1116
|
style: {
|
|
1098
|
-
background: `linear-gradient(to right, ${
|
|
1099
|
-
"--thumb-color":
|
|
1117
|
+
background: `linear-gradient(to right, ${o.slider} ${(i.echo.time - 50) / 950 * 100}%, ${o.slider + "30"} ${(i.echo.time - 50) / 950 * 100}%)`,
|
|
1118
|
+
"--thumb-color": o.slider
|
|
1100
1119
|
}
|
|
1101
1120
|
}
|
|
1102
1121
|
) }),
|
|
1103
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1122
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "TIME" })
|
|
1104
1123
|
] }),
|
|
1105
1124
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
1106
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
1107
|
-
|
|
1125
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
1126
|
+
i.echo.feedback,
|
|
1108
1127
|
"%"
|
|
1109
1128
|
] }),
|
|
1110
1129
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -1114,20 +1133,20 @@ function mr({
|
|
|
1114
1133
|
min: "0",
|
|
1115
1134
|
max: "85",
|
|
1116
1135
|
step: "1",
|
|
1117
|
-
value:
|
|
1136
|
+
value: i.echo.feedback,
|
|
1118
1137
|
onChange: (t) => c("echo", "feedback", parseInt(t.target.value)),
|
|
1119
1138
|
className: "ecp-vp-eq-slider",
|
|
1120
1139
|
style: {
|
|
1121
|
-
background: `linear-gradient(to right, ${
|
|
1122
|
-
"--thumb-color":
|
|
1140
|
+
background: `linear-gradient(to right, ${o.slider} ${i.echo.feedback / 85 * 100}%, ${o.slider + "30"} ${i.echo.feedback / 85 * 100}%)`,
|
|
1141
|
+
"--thumb-color": o.slider
|
|
1123
1142
|
}
|
|
1124
1143
|
}
|
|
1125
1144
|
) }),
|
|
1126
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1145
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "FEEDBACK" })
|
|
1127
1146
|
] }),
|
|
1128
1147
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
1129
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
1130
|
-
|
|
1148
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
1149
|
+
i.echo.mix,
|
|
1131
1150
|
"%"
|
|
1132
1151
|
] }),
|
|
1133
1152
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -1137,22 +1156,22 @@ function mr({
|
|
|
1137
1156
|
min: "0",
|
|
1138
1157
|
max: "100",
|
|
1139
1158
|
step: "1",
|
|
1140
|
-
value:
|
|
1159
|
+
value: i.echo.mix,
|
|
1141
1160
|
onChange: (t) => c("echo", "mix", parseInt(t.target.value)),
|
|
1142
1161
|
className: "ecp-vp-eq-slider",
|
|
1143
1162
|
style: {
|
|
1144
|
-
background: `linear-gradient(to right, ${
|
|
1145
|
-
"--thumb-color":
|
|
1163
|
+
background: `linear-gradient(to right, ${o.slider} ${i.echo.mix}%, ${o.slider + "30"} ${i.echo.mix}%)`,
|
|
1164
|
+
"--thumb-color": o.slider
|
|
1146
1165
|
}
|
|
1147
1166
|
}
|
|
1148
1167
|
) }),
|
|
1149
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1168
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "MIX" })
|
|
1150
1169
|
] })
|
|
1151
1170
|
] }),
|
|
1152
|
-
|
|
1171
|
+
pe === "tape" && /* @__PURE__ */ r("div", { className: "ecp-vp-eq-bands--horizontal", children: [
|
|
1153
1172
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
1154
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${
|
|
1155
|
-
|
|
1173
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: [
|
|
1174
|
+
i.tape.speed.toFixed(2),
|
|
1156
1175
|
"x"
|
|
1157
1176
|
] }),
|
|
1158
1177
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
@@ -1162,19 +1181,19 @@ function mr({
|
|
|
1162
1181
|
min: "0.50",
|
|
1163
1182
|
max: "2.00",
|
|
1164
1183
|
step: "0.01",
|
|
1165
|
-
value:
|
|
1184
|
+
value: i.tape.speed,
|
|
1166
1185
|
onChange: (t) => c("tape", "speed", parseFloat(t.target.value)),
|
|
1167
1186
|
className: "ecp-vp-eq-slider",
|
|
1168
1187
|
style: {
|
|
1169
|
-
background: `linear-gradient(to right, ${
|
|
1170
|
-
"--thumb-color":
|
|
1188
|
+
background: `linear-gradient(to right, ${o.slider} ${(i.tape.speed - 0.5) / 1.5 * 100}%, ${o.slider + "30"} ${(i.tape.speed - 0.5) / 1.5 * 100}%)`,
|
|
1189
|
+
"--thumb-color": o.slider
|
|
1171
1190
|
}
|
|
1172
1191
|
}
|
|
1173
1192
|
) }),
|
|
1174
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1193
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "SPEED" })
|
|
1175
1194
|
] }),
|
|
1176
1195
|
/* @__PURE__ */ r("div", { className: "ecp-vp-eq-band-col", children: [
|
|
1177
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-val${
|
|
1196
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-val${q ? " ecp-vp-eq-val--dark" : " ecp-vp-eq-val--light"}`, children: i.tape.drive }),
|
|
1178
1197
|
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-bar-wrap", children: /* @__PURE__ */ e(
|
|
1179
1198
|
"input",
|
|
1180
1199
|
{
|
|
@@ -1182,156 +1201,156 @@ function mr({
|
|
|
1182
1201
|
min: "0",
|
|
1183
1202
|
max: "50",
|
|
1184
1203
|
step: "1",
|
|
1185
|
-
value:
|
|
1204
|
+
value: i.tape.drive,
|
|
1186
1205
|
onChange: (t) => c("tape", "drive", parseFloat(t.target.value)),
|
|
1187
1206
|
className: "ecp-vp-eq-slider",
|
|
1188
1207
|
style: {
|
|
1189
|
-
background: `linear-gradient(to right, ${
|
|
1190
|
-
"--thumb-color":
|
|
1208
|
+
background: `linear-gradient(to right, ${o.slider} ${i.tape.drive / 50 * 100}%, ${o.slider + "30"} ${i.tape.drive / 50 * 100}%)`,
|
|
1209
|
+
"--thumb-color": o.slider
|
|
1191
1210
|
}
|
|
1192
1211
|
}
|
|
1193
1212
|
) }),
|
|
1194
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${
|
|
1213
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-eq-label${q ? " ecp-vp-eq-label--dark" : " ecp-vp-eq-label--light"}`, children: "DRIVE" })
|
|
1195
1214
|
] })
|
|
1196
1215
|
] })
|
|
1197
1216
|
] }),
|
|
1198
|
-
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-footer", children: /* @__PURE__ */ e("button", { onClick:
|
|
1217
|
+
/* @__PURE__ */ e("div", { className: "ecp-vp-eq-footer", children: /* @__PURE__ */ e("button", { onClick: z, className: `ecp-vp-eq-reset${q ? " ecp-vp-eq-reset--dark" : " ecp-vp-eq-reset--light"}`, children: "Reset Defaults" }) })
|
|
1199
1218
|
]
|
|
1200
1219
|
}
|
|
1201
1220
|
)
|
|
1202
1221
|
] }),
|
|
1203
|
-
|
|
1204
|
-
h && /* @__PURE__ */ e("div", { className: "ecp-vp-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: h, alt: "", className: `ecp-vp-thumbnail${
|
|
1222
|
+
N.trackName && /* @__PURE__ */ r("div", { className: "ecp-vp-track", children: [
|
|
1223
|
+
h && /* @__PURE__ */ e("div", { className: "ecp-vp-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: h, alt: "", className: `ecp-vp-thumbnail${Z ? " ecp-animation-spin" : ""}` }) }),
|
|
1205
1224
|
/* @__PURE__ */ r("div", { className: "ecp-vp-track-info", children: [
|
|
1206
|
-
/* @__PURE__ */ e("div", { className: `ecp-vp-track-name${
|
|
1207
|
-
v && typeof v == "string" && /* @__PURE__ */ e("div", { className: `ecp-vp-track-author${
|
|
1225
|
+
/* @__PURE__ */ e("div", { className: `ecp-vp-track-name${q ? " ecp-vp-track-name--dark" : " ecp-vp-track-name--light"}`, children: d }),
|
|
1226
|
+
v && typeof v == "string" && /* @__PURE__ */ e("div", { className: `ecp-vp-track-author${q ? " ecp-vp-track-author--dark" : " ecp-vp-track-author--light"}`, children: v })
|
|
1208
1227
|
] })
|
|
1209
1228
|
] }),
|
|
1210
|
-
|
|
1211
|
-
/* @__PURE__ */ e("span", { className: `ecp-vp-time${
|
|
1229
|
+
N.seekbar && /* @__PURE__ */ e("div", { className: "ecp-vp-seekbar", children: /* @__PURE__ */ r("div", { className: "ecp-vp-seekbar-row", children: [
|
|
1230
|
+
/* @__PURE__ */ e("span", { className: `ecp-vp-time${q ? " ecp-vp-time--dark" : " ecp-vp-time--light"}`, children: yt(O) }),
|
|
1212
1231
|
/* @__PURE__ */ e(
|
|
1213
1232
|
"input",
|
|
1214
1233
|
{
|
|
1215
1234
|
type: "range",
|
|
1216
1235
|
min: "0",
|
|
1217
1236
|
max: "100",
|
|
1218
|
-
value:
|
|
1219
|
-
onChange:
|
|
1220
|
-
onMouseDown:
|
|
1221
|
-
onMouseUp:
|
|
1222
|
-
onTouchStart:
|
|
1223
|
-
onTouchEnd:
|
|
1237
|
+
value: _ > 0 ? O / _ * 100 : 0,
|
|
1238
|
+
onChange: Et,
|
|
1239
|
+
onMouseDown: bt,
|
|
1240
|
+
onMouseUp: gt,
|
|
1241
|
+
onTouchStart: bt,
|
|
1242
|
+
onTouchEnd: gt,
|
|
1224
1243
|
disabled: !s,
|
|
1225
1244
|
className: "ecp-vp-seek-input",
|
|
1226
1245
|
style: {
|
|
1227
|
-
background: s &&
|
|
1228
|
-
"--thumb-color":
|
|
1246
|
+
background: s && _ > 0 ? `linear-gradient(to right, ${o.slider} ${O / _ * 100}%, ${o.slider + "30"} ${O / _ * 100}%)` : o.slider + "30",
|
|
1247
|
+
"--thumb-color": o.slider
|
|
1229
1248
|
}
|
|
1230
1249
|
}
|
|
1231
1250
|
),
|
|
1232
|
-
/* @__PURE__ */ e("span", { className: `ecp-vp-time ecp-vp-time--right${
|
|
1251
|
+
/* @__PURE__ */ e("span", { className: `ecp-vp-time ecp-vp-time--right${q ? " ecp-vp-time--dark" : " ecp-vp-time--light"}`, children: yt(_) })
|
|
1233
1252
|
] }) }),
|
|
1234
|
-
/* @__PURE__ */ r("div", { className: `ecp-vp-controls${
|
|
1235
|
-
|
|
1253
|
+
/* @__PURE__ */ r("div", { className: `ecp-vp-controls${w < 330 ? " ecp-vp-controls--sm" : ""}`, children: [
|
|
1254
|
+
N.play && /* @__PURE__ */ r(
|
|
1236
1255
|
"button",
|
|
1237
1256
|
{
|
|
1238
|
-
onClick:
|
|
1257
|
+
onClick: Ot,
|
|
1239
1258
|
disabled: !s,
|
|
1240
|
-
className: `ecp-vp-play-btn${
|
|
1241
|
-
style: { backgroundColor:
|
|
1259
|
+
className: `ecp-vp-play-btn${w < 350 ? " ecp-vp-play-btn--compact" : ""}`,
|
|
1260
|
+
style: { backgroundColor: o.button },
|
|
1242
1261
|
children: [
|
|
1243
1262
|
/* @__PURE__ */ r("div", { className: "ecp-vp-play-icon-wrap", children: [
|
|
1244
|
-
/* @__PURE__ */ e(
|
|
1245
|
-
/* @__PURE__ */ e(
|
|
1263
|
+
/* @__PURE__ */ e(rt, { size: 16, style: { position: "absolute", transform: Z ? void 0 : "scale(0) translateY(2.5rem)", transition: "all 150ms" } }),
|
|
1264
|
+
/* @__PURE__ */ e(nt, { size: 16, style: { position: "absolute", transform: Z ? "scale(0) translateY(-2.5rem)" : void 0, transition: "all 150ms" } })
|
|
1246
1265
|
] }),
|
|
1247
|
-
/* @__PURE__ */ e("span", { style: { display:
|
|
1266
|
+
/* @__PURE__ */ e("span", { style: { display: w < 350 ? "none" : "block" }, children: Z ? "Pause" : "Play" })
|
|
1248
1267
|
]
|
|
1249
1268
|
}
|
|
1250
1269
|
),
|
|
1251
|
-
|
|
1270
|
+
N.stop && /* @__PURE__ */ r(
|
|
1252
1271
|
"button",
|
|
1253
1272
|
{
|
|
1254
|
-
onClick:
|
|
1273
|
+
onClick: _t,
|
|
1255
1274
|
disabled: !s,
|
|
1256
|
-
className: `ecp-vp-stop-btn${
|
|
1275
|
+
className: `ecp-vp-stop-btn${q ? " ecp-vp-stop-btn--dark" : " ecp-vp-stop-btn--light"}${w >= 600 ? " ecp-vp-stop-btn--wide" : ""}`,
|
|
1257
1276
|
children: [
|
|
1258
|
-
/* @__PURE__ */ e(
|
|
1259
|
-
/* @__PURE__ */ e("span", { style: { display:
|
|
1277
|
+
/* @__PURE__ */ e(Bt, { size: 16 }),
|
|
1278
|
+
/* @__PURE__ */ e("span", { style: { display: w < 600 ? "none" : "block" }, children: "Stop" })
|
|
1260
1279
|
]
|
|
1261
1280
|
}
|
|
1262
1281
|
),
|
|
1263
|
-
|
|
1282
|
+
N.equalizer && /* @__PURE__ */ r(
|
|
1264
1283
|
"button",
|
|
1265
1284
|
{
|
|
1266
1285
|
onClick: () => {
|
|
1267
|
-
|
|
1286
|
+
Le(!ee), $e(!1);
|
|
1268
1287
|
},
|
|
1269
1288
|
disabled: !s,
|
|
1270
|
-
className: `ecp-vp-eq-btn${
|
|
1271
|
-
style:
|
|
1289
|
+
className: `ecp-vp-eq-btn${ee ? " ecp-vp-eq-btn--on" : " ecp-vp-eq-btn--off"}${w >= 600 ? " ecp-vp-eq-btn--wide" : ""}`,
|
|
1290
|
+
style: ee ? { backgroundColor: o.button } : {},
|
|
1272
1291
|
children: [
|
|
1273
|
-
/* @__PURE__ */ e(
|
|
1274
|
-
/* @__PURE__ */ e("span", { style: { display:
|
|
1292
|
+
/* @__PURE__ */ e(tt, { size: 16 }),
|
|
1293
|
+
/* @__PURE__ */ e("span", { style: { display: w < 600 ? "none" : "block" }, children: "EQ" })
|
|
1275
1294
|
]
|
|
1276
1295
|
}
|
|
1277
1296
|
),
|
|
1278
|
-
|
|
1297
|
+
N.loop && /* @__PURE__ */ r(
|
|
1279
1298
|
"button",
|
|
1280
1299
|
{
|
|
1281
|
-
onClick:
|
|
1300
|
+
onClick: Xt,
|
|
1282
1301
|
disabled: !s,
|
|
1283
|
-
className: `ecp-vp-loop-btn${
|
|
1284
|
-
style:
|
|
1302
|
+
className: `ecp-vp-loop-btn${E ? " ecp-vp-loop-btn--on" : " ecp-vp-loop-btn--off"}${w >= 700 ? " ecp-vp-loop-btn--wide" : ""}`,
|
|
1303
|
+
style: E ? { backgroundColor: o.button } : {},
|
|
1285
1304
|
children: [
|
|
1286
|
-
/* @__PURE__ */ e(
|
|
1287
|
-
/* @__PURE__ */ e("span", { style: { display:
|
|
1305
|
+
/* @__PURE__ */ e(pr, { size: 16, className: E ? "ecp-vp-loop-icon--active" : "" }),
|
|
1306
|
+
/* @__PURE__ */ e("span", { style: { display: w < 700 ? "none" : "block" }, children: "Loop" })
|
|
1288
1307
|
]
|
|
1289
1308
|
}
|
|
1290
1309
|
),
|
|
1291
|
-
|
|
1310
|
+
N.speed && !N.spatialEngine && /* @__PURE__ */ e("div", { className: "ecp-vp-speed-wrap", children: /* @__PURE__ */ e("select", { value: ce, onChange: Gt, className: `ecp-vp-speed-select${q ? " ecp-vp-speed-select--dark" : " ecp-vp-speed-select--light"}`, children: ["0.5", "0.75", "1", "1.25", "1.5", "2"].map((t) => /* @__PURE__ */ r("option", { value: t, className: q ? "ecp-vp-speed-option--dark" : "ecp-vp-speed-option--light", children: [
|
|
1292
1311
|
t,
|
|
1293
1312
|
"x"
|
|
1294
1313
|
] }, t)) }) }),
|
|
1295
|
-
|
|
1314
|
+
N.spatialEngine && /* @__PURE__ */ r(
|
|
1296
1315
|
"button",
|
|
1297
1316
|
{
|
|
1298
1317
|
onClick: () => {
|
|
1299
|
-
|
|
1318
|
+
$e(!ne), Le(!1);
|
|
1300
1319
|
},
|
|
1301
1320
|
disabled: !s,
|
|
1302
|
-
className: `ecp-vp-loop-btn${
|
|
1303
|
-
style:
|
|
1321
|
+
className: `ecp-vp-loop-btn${ne ? " ecp-vp-loop-btn--on" : " ecp-vp-loop-btn--off"}${w >= 700 ? " ecp-vp-loop-btn--wide" : ""}`,
|
|
1322
|
+
style: ne ? { backgroundColor: o.button } : {},
|
|
1304
1323
|
children: [
|
|
1305
1324
|
/* @__PURE__ */ e(it, { size: 16, className: "" }),
|
|
1306
|
-
/* @__PURE__ */ e("span", { style: { display:
|
|
1325
|
+
/* @__PURE__ */ e("span", { style: { display: w < 700 ? "none" : "block" }, children: "Dolby" })
|
|
1307
1326
|
]
|
|
1308
1327
|
}
|
|
1309
1328
|
),
|
|
1310
|
-
|
|
1311
|
-
/* @__PURE__ */ e("button", { onClick:
|
|
1329
|
+
N.volume && /* @__PURE__ */ r("div", { className: "ecp-vp-volume", children: [
|
|
1330
|
+
/* @__PURE__ */ e("button", { onClick: Ut, className: "ecp-vp-mute-btn", children: ge || F === 0 ? /* @__PURE__ */ e(pt, { size: 20, className: q ? "ecp-vp-mute-icon--dark" : "ecp-vp-mute-icon--light" }) : /* @__PURE__ */ e(dt, { size: 20, className: q ? "ecp-vp-mute-icon--dark" : "ecp-vp-mute-icon--light" }) }),
|
|
1312
1331
|
/* @__PURE__ */ e(
|
|
1313
1332
|
"input",
|
|
1314
1333
|
{
|
|
1315
1334
|
type: "range",
|
|
1316
1335
|
min: "0",
|
|
1317
1336
|
max: "100",
|
|
1318
|
-
value:
|
|
1319
|
-
onChange:
|
|
1337
|
+
value: F,
|
|
1338
|
+
onChange: Wt,
|
|
1320
1339
|
className: "ecp-vp-volume-slider",
|
|
1321
1340
|
style: {
|
|
1322
|
-
background: `linear-gradient(to right, ${
|
|
1323
|
-
"--thumb-color":
|
|
1324
|
-
display:
|
|
1341
|
+
background: `linear-gradient(to right, ${o.slider} ${F}%, ${o.slider + "30"} ${F}%)`,
|
|
1342
|
+
"--thumb-color": o.slider,
|
|
1343
|
+
display: w < 460 ? "none" : "block"
|
|
1325
1344
|
}
|
|
1326
1345
|
}
|
|
1327
1346
|
),
|
|
1328
1347
|
/* @__PURE__ */ r(
|
|
1329
1348
|
"span",
|
|
1330
1349
|
{
|
|
1331
|
-
className: `ecp-vp-volume-pct${
|
|
1332
|
-
style: { display:
|
|
1350
|
+
className: `ecp-vp-volume-pct${q ? " ecp-vp-volume-pct--dark" : " ecp-vp-volume-pct--light"}`,
|
|
1351
|
+
style: { display: w < 800 ? "none" : "block" },
|
|
1333
1352
|
children: [
|
|
1334
|
-
|
|
1353
|
+
F,
|
|
1335
1354
|
"%"
|
|
1336
1355
|
]
|
|
1337
1356
|
}
|
|
@@ -1340,121 +1359,121 @@ function mr({
|
|
|
1340
1359
|
] })
|
|
1341
1360
|
] }) });
|
|
1342
1361
|
}
|
|
1343
|
-
function
|
|
1362
|
+
function kr({
|
|
1344
1363
|
audio: s,
|
|
1345
|
-
gradient:
|
|
1364
|
+
gradient: d = ["#cd7eff", "#ff00f2"],
|
|
1346
1365
|
background: v = "#f4e4ffff",
|
|
1347
|
-
autoPlay:
|
|
1348
|
-
thumbnail:
|
|
1366
|
+
autoPlay: m = !1,
|
|
1367
|
+
thumbnail: R = null,
|
|
1349
1368
|
width: h,
|
|
1350
|
-
equalizer:
|
|
1351
|
-
mode:
|
|
1369
|
+
equalizer: N = { bass: 0, mid: 0, treble: 0 },
|
|
1370
|
+
mode: re = "light"
|
|
1352
1371
|
}) {
|
|
1353
|
-
const [P,
|
|
1372
|
+
const [P, I] = k(!1), [V, Y] = k(0), [a, Z] = k(0), [H, O] = k(!1), [K, _] = k(80), [L, F] = k(1), [Fe, ge] = k([]), [Re, E] = k(null), [ze, fe] = k(!1), [qe, we] = k({ bass: N.bass || 0, mid: N.mid || 0, treble: N.treble || 0 }), G = u(null), ee = u(null), Le = u(null), Q = u(null), Pe = u(null), ce = u(null), Ee = () => {
|
|
1354
1373
|
const c = [];
|
|
1355
|
-
for (let
|
|
1374
|
+
for (let $ = 0; $ < 100; $++) c.push(20 + Math.random() * 60);
|
|
1356
1375
|
return c;
|
|
1357
1376
|
};
|
|
1358
|
-
|
|
1377
|
+
T(() => {
|
|
1359
1378
|
if (!s) return;
|
|
1360
|
-
if (!Array.isArray(
|
|
1361
|
-
|
|
1379
|
+
if (!Array.isArray(d) || d.length < 2) {
|
|
1380
|
+
E("Gradient must be an array with at least 2 colors");
|
|
1362
1381
|
return;
|
|
1363
1382
|
}
|
|
1364
|
-
const c =
|
|
1383
|
+
const c = G.current;
|
|
1365
1384
|
if (!c) return;
|
|
1366
|
-
const
|
|
1367
|
-
|
|
1368
|
-
},
|
|
1385
|
+
const $ = () => Y(c.currentTime), z = () => {
|
|
1386
|
+
Z(c.duration), ge(Ee());
|
|
1387
|
+
}, p = () => I(!1), C = (te) => {
|
|
1369
1388
|
var A, ue;
|
|
1370
|
-
return
|
|
1389
|
+
return E(`Audio error: ${((ue = (A = te.target) == null ? void 0 : A.error) == null ? void 0 : ue.message) || "Failed to load audio"}`);
|
|
1371
1390
|
};
|
|
1372
|
-
return c.addEventListener("timeupdate",
|
|
1373
|
-
c.removeEventListener("timeupdate",
|
|
1391
|
+
return c.addEventListener("timeupdate", $), c.addEventListener("loadedmetadata", z), c.addEventListener("ended", p), c.addEventListener("error", C), () => {
|
|
1392
|
+
c.removeEventListener("timeupdate", $), c.removeEventListener("loadedmetadata", z), c.removeEventListener("ended", p), c.removeEventListener("error", C);
|
|
1374
1393
|
};
|
|
1375
|
-
}, [s,
|
|
1376
|
-
s &&
|
|
1377
|
-
console.error("Play failed:", c),
|
|
1378
|
-
}),
|
|
1379
|
-
}, [s]),
|
|
1380
|
-
if (
|
|
1394
|
+
}, [s, d, re]), T(() => {
|
|
1395
|
+
s && G.current && m && (G.current.play().catch((c) => {
|
|
1396
|
+
console.error("Play failed:", c), I(!1);
|
|
1397
|
+
}), I(!0));
|
|
1398
|
+
}, [s]), T(() => {
|
|
1399
|
+
if (G.current && !ee.current && G.current) {
|
|
1381
1400
|
const c = window.AudioContext || window.webkitAudioContext;
|
|
1382
1401
|
if (c) {
|
|
1383
|
-
const
|
|
1384
|
-
|
|
1385
|
-
const
|
|
1386
|
-
|
|
1387
|
-
const
|
|
1388
|
-
|
|
1389
|
-
const C =
|
|
1390
|
-
C.type = "peaking", C.frequency.value = 1e3, C.Q.value = 1,
|
|
1391
|
-
const
|
|
1392
|
-
|
|
1402
|
+
const $ = new c();
|
|
1403
|
+
ee.current = $;
|
|
1404
|
+
const z = $.createMediaElementSource(G.current);
|
|
1405
|
+
Le.current = z;
|
|
1406
|
+
const p = $.createBiquadFilter();
|
|
1407
|
+
p.type = "lowshelf", p.frequency.value = 200, Q.current = p;
|
|
1408
|
+
const C = $.createBiquadFilter();
|
|
1409
|
+
C.type = "peaking", C.frequency.value = 1e3, C.Q.value = 1, Pe.current = C;
|
|
1410
|
+
const te = $.createBiquadFilter();
|
|
1411
|
+
te.type = "highshelf", te.frequency.value = 3e3, ce.current = te, z.connect(p).connect(C).connect(te).connect($.destination);
|
|
1393
1412
|
}
|
|
1394
1413
|
}
|
|
1395
|
-
}, [s]),
|
|
1396
|
-
|
|
1397
|
-
}, [
|
|
1398
|
-
|
|
1399
|
-
}, [
|
|
1400
|
-
const
|
|
1401
|
-
|
|
1402
|
-
},
|
|
1403
|
-
|
|
1404
|
-
},
|
|
1405
|
-
const
|
|
1406
|
-
|
|
1407
|
-
},
|
|
1408
|
-
|
|
1409
|
-
},
|
|
1410
|
-
|
|
1411
|
-
},
|
|
1414
|
+
}, [s]), T(() => {
|
|
1415
|
+
G.current && (G.current.volume = H ? 0 : K / 100);
|
|
1416
|
+
}, [K, H]), T(() => {
|
|
1417
|
+
G.current && (G.current.playbackRate = L);
|
|
1418
|
+
}, [L]);
|
|
1419
|
+
const w = () => {
|
|
1420
|
+
G.current && (P ? G.current.pause() : G.current.play().catch((c) => E(`Playback failed: ${c instanceof Error ? c.message : String(c)}`)), I(!P));
|
|
1421
|
+
}, Me = () => O(!H), ne = (c) => {
|
|
1422
|
+
_(parseInt(c.target.value)), H && parseInt(c.target.value) > 0 && O(!1);
|
|
1423
|
+
}, $e = (c) => F(parseFloat(c.target.value)), i = (c) => {
|
|
1424
|
+
const $ = c.currentTarget.getBoundingClientRect(), p = (c.clientX - $.left) / $.width * a;
|
|
1425
|
+
G.current && (G.current.currentTime = p, Y(p));
|
|
1426
|
+
}, de = (c, $) => {
|
|
1427
|
+
we((z) => ({ ...z, [c]: $ })), c === "bass" && Q.current && (Q.current.gain.value = $), c === "mid" && Pe.current && (Pe.current.gain.value = $), c === "treble" && ce.current && (ce.current.gain.value = $);
|
|
1428
|
+
}, pe = () => {
|
|
1429
|
+
de("bass", 0), de("mid", 0), de("treble", 0);
|
|
1430
|
+
}, Ne = (c) => {
|
|
1412
1431
|
if (isNaN(c)) return "0:00";
|
|
1413
|
-
const
|
|
1414
|
-
return `${
|
|
1415
|
-
},
|
|
1416
|
-
if (
|
|
1432
|
+
const $ = Math.floor(c / 60), z = Math.floor(c % 60);
|
|
1433
|
+
return `${$}:${z.toString().padStart(2, "0")}`;
|
|
1434
|
+
}, M = a > 0 ? V / a * 100 : 0, j = re === "dark";
|
|
1435
|
+
if (Re)
|
|
1417
1436
|
return /* @__PURE__ */ r("div", { className: "ecp-wave-error", style: { background: v }, children: [
|
|
1418
|
-
/* @__PURE__ */ e("p", { className: `ecp-wave-error-title${
|
|
1419
|
-
/* @__PURE__ */ e("p", { className: `ecp-wave-error-msg${
|
|
1437
|
+
/* @__PURE__ */ e("p", { className: `ecp-wave-error-title${j ? " ecp-wave-error--dark" : " ecp-wave-error--light"}`, children: "Error" }),
|
|
1438
|
+
/* @__PURE__ */ e("p", { className: `ecp-wave-error-msg${j ? " ecp-wave-error--dark" : " ecp-wave-error--light"}`, children: Re })
|
|
1420
1439
|
] });
|
|
1421
1440
|
if (!s) return null;
|
|
1422
|
-
const ie =
|
|
1441
|
+
const ie = j ? "#9ca3af" : "#6b7280";
|
|
1423
1442
|
return /* @__PURE__ */ r("div", { className: "ecp-wave-outer", style: { width: h ? `${h}px` : void 0 }, children: [
|
|
1424
|
-
/* @__PURE__ */ e("audio", { ref:
|
|
1443
|
+
/* @__PURE__ */ e("audio", { ref: G, src: s, className: "ecp-wave-audio-el" }),
|
|
1425
1444
|
/* @__PURE__ */ e("div", { className: "ecp-wave-card", children: /* @__PURE__ */ r("div", { className: "ecp-wave-card-inner", style: { background: v }, children: [
|
|
1426
|
-
|
|
1427
|
-
/* @__PURE__ */ r("div", { className: "ecp-wave-seek", onClick:
|
|
1428
|
-
/* @__PURE__ */ e("div", { className: "ecp-wave-bars", children:
|
|
1429
|
-
const
|
|
1445
|
+
R && /* @__PURE__ */ e("div", { className: "ecp-wave-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: R, alt: "", className: "ecp-wave-thumbnail" }) }),
|
|
1446
|
+
/* @__PURE__ */ r("div", { className: "ecp-wave-seek", onClick: i, children: [
|
|
1447
|
+
/* @__PURE__ */ e("div", { className: "ecp-wave-bars", children: Fe.map((c, $) => {
|
|
1448
|
+
const z = $ / Fe.length * 100 <= M;
|
|
1430
1449
|
return /* @__PURE__ */ e(
|
|
1431
1450
|
"div",
|
|
1432
1451
|
{
|
|
1433
1452
|
className: "ecp-wave-bar",
|
|
1434
1453
|
style: {
|
|
1435
1454
|
height: `${c}%`,
|
|
1436
|
-
background:
|
|
1437
|
-
opacity:
|
|
1455
|
+
background: z ? d[0] : d[1],
|
|
1456
|
+
opacity: z ? 1 : 0.4
|
|
1438
1457
|
}
|
|
1439
1458
|
},
|
|
1440
|
-
|
|
1459
|
+
$
|
|
1441
1460
|
);
|
|
1442
1461
|
}) }),
|
|
1443
|
-
/* @__PURE__ */ e("div", { className: "ecp-wave-progress-line", style: { left: `${
|
|
1462
|
+
/* @__PURE__ */ e("div", { className: "ecp-wave-progress-line", style: { left: `${M}%` } })
|
|
1444
1463
|
] }),
|
|
1445
1464
|
/* @__PURE__ */ r("div", { className: "ecp-wave-times", style: { color: ie }, children: [
|
|
1446
|
-
/* @__PURE__ */ e("span", { children:
|
|
1447
|
-
/* @__PURE__ */ e("span", { children:
|
|
1465
|
+
/* @__PURE__ */ e("span", { children: Ne(V) }),
|
|
1466
|
+
/* @__PURE__ */ e("span", { children: Ne(a) })
|
|
1448
1467
|
] }),
|
|
1449
1468
|
/* @__PURE__ */ r("div", { className: "ecp-wave-controls", children: [
|
|
1450
1469
|
/* @__PURE__ */ r("div", { className: "ecp-wave-left-controls", children: [
|
|
1451
1470
|
/* @__PURE__ */ e(
|
|
1452
1471
|
"button",
|
|
1453
1472
|
{
|
|
1454
|
-
onClick:
|
|
1473
|
+
onClick: Me,
|
|
1455
1474
|
className: "ecp-wave-vol-btn",
|
|
1456
|
-
style: { background: `linear-gradient(135deg, ${
|
|
1457
|
-
children:
|
|
1475
|
+
style: { background: `linear-gradient(135deg, ${d[0]}, ${d[1]})` },
|
|
1476
|
+
children: H || K === 0 ? /* @__PURE__ */ e(pt, { style: { width: "1rem", height: "1rem", color: "white" } }) : /* @__PURE__ */ e(dt, { style: { width: "1rem", height: "1rem", color: "white" } })
|
|
1458
1477
|
}
|
|
1459
1478
|
),
|
|
1460
1479
|
/* @__PURE__ */ e(
|
|
@@ -1463,12 +1482,12 @@ function fr({
|
|
|
1463
1482
|
type: "range",
|
|
1464
1483
|
min: "0",
|
|
1465
1484
|
max: "100",
|
|
1466
|
-
value:
|
|
1467
|
-
onChange:
|
|
1485
|
+
value: K,
|
|
1486
|
+
onChange: ne,
|
|
1468
1487
|
className: "ecp-wave-vol-slider",
|
|
1469
1488
|
style: {
|
|
1470
|
-
background: `linear-gradient(to right, ${
|
|
1471
|
-
"--thumb-color":
|
|
1489
|
+
background: `linear-gradient(to right, ${d[0]} ${K}%, ${j ? "#374151" : "#d1d5db"} ${K}%)`,
|
|
1490
|
+
"--thumb-color": d[0],
|
|
1472
1491
|
display: h && h < 400 ? "none" : void 0
|
|
1473
1492
|
}
|
|
1474
1493
|
}
|
|
@@ -1476,30 +1495,30 @@ function fr({
|
|
|
1476
1495
|
h && h < 400 && /* @__PURE__ */ e(
|
|
1477
1496
|
"button",
|
|
1478
1497
|
{
|
|
1479
|
-
onClick: () =>
|
|
1498
|
+
onClick: () => fe(!ze),
|
|
1480
1499
|
className: "ecp-wave-eq-btn",
|
|
1481
|
-
style: { background: `linear-gradient(135deg, ${
|
|
1482
|
-
children: /* @__PURE__ */ e(
|
|
1500
|
+
style: { background: `linear-gradient(135deg, ${d[0]}, ${d[1]})` },
|
|
1501
|
+
children: /* @__PURE__ */ e(tt, { style: { width: "1rem", height: "1rem", color: "white" } })
|
|
1483
1502
|
}
|
|
1484
1503
|
)
|
|
1485
1504
|
] }),
|
|
1486
1505
|
/* @__PURE__ */ e("div", { className: "ecp-wave-center-controls", children: /* @__PURE__ */ e(
|
|
1487
1506
|
"button",
|
|
1488
1507
|
{
|
|
1489
|
-
onClick:
|
|
1508
|
+
onClick: w,
|
|
1490
1509
|
className: "ecp-wave-play-btn",
|
|
1491
|
-
style: { background: `linear-gradient(135deg, ${
|
|
1492
|
-
children: P ? /* @__PURE__ */ e(
|
|
1510
|
+
style: { background: `linear-gradient(135deg, ${d[0]}, ${d[1]})` },
|
|
1511
|
+
children: P ? /* @__PURE__ */ e(rt, { style: { width: "1.5rem", height: "1.5rem", color: "white", fill: "white" } }) : /* @__PURE__ */ e(nt, { style: { width: "1.5rem", height: "1.5rem", color: "white", fill: "white" } })
|
|
1493
1512
|
}
|
|
1494
1513
|
) }),
|
|
1495
1514
|
/* @__PURE__ */ r("div", { className: "ecp-wave-right-controls", children: [
|
|
1496
1515
|
/* @__PURE__ */ e(
|
|
1497
1516
|
"select",
|
|
1498
1517
|
{
|
|
1499
|
-
value:
|
|
1500
|
-
onChange:
|
|
1501
|
-
className: `ecp-wave-speed-select${
|
|
1502
|
-
style: { background: v, color:
|
|
1518
|
+
value: L,
|
|
1519
|
+
onChange: $e,
|
|
1520
|
+
className: `ecp-wave-speed-select${j ? " ecp-wave-speed-select--dark" : " ecp-wave-speed-select--light"}`,
|
|
1521
|
+
style: { background: v, color: d[0] },
|
|
1503
1522
|
children: ["0.5", "0.75", "1", "1.25", "1.5", "2"].map((c) => /* @__PURE__ */ r("option", { value: c, children: [
|
|
1504
1523
|
c,
|
|
1505
1524
|
"x"
|
|
@@ -1509,87 +1528,87 @@ function fr({
|
|
|
1509
1528
|
!(h && h < 400) && /* @__PURE__ */ e(
|
|
1510
1529
|
"button",
|
|
1511
1530
|
{
|
|
1512
|
-
onClick: () =>
|
|
1531
|
+
onClick: () => fe(!ze),
|
|
1513
1532
|
className: "ecp-wave-eq-btn",
|
|
1514
|
-
style: { background: `linear-gradient(135deg, ${
|
|
1515
|
-
children: /* @__PURE__ */ e(
|
|
1533
|
+
style: { background: `linear-gradient(135deg, ${d[0]}, ${d[1]})` },
|
|
1534
|
+
children: /* @__PURE__ */ e(tt, { style: { width: "1rem", height: "1rem", color: "white" } })
|
|
1516
1535
|
}
|
|
1517
1536
|
)
|
|
1518
1537
|
] })
|
|
1519
1538
|
] })
|
|
1520
1539
|
] }) }),
|
|
1521
|
-
|
|
1522
|
-
/* @__PURE__ */ e("h3", { className: `ecp-wave-eq-title${
|
|
1540
|
+
ze && /* @__PURE__ */ e("div", { className: "ecp-wave-eq-overlay", children: /* @__PURE__ */ r("div", { className: `ecp-wave-eq-panel${j ? " ecp-wave-eq-panel--dark" : " ecp-wave-eq-panel--light"}`, children: [
|
|
1541
|
+
/* @__PURE__ */ e("h3", { className: `ecp-wave-eq-title${j ? " ecp-wave-eq-title--dark" : " ecp-wave-eq-title--light"}`, children: "Equalizer" }),
|
|
1523
1542
|
/* @__PURE__ */ e("div", { className: "ecp-wave-eq-bands", children: ["bass", "mid", "treble"].map((c) => /* @__PURE__ */ r("div", { children: [
|
|
1524
1543
|
/* @__PURE__ */ r("div", { className: "ecp-wave-eq-band-header", children: [
|
|
1525
|
-
/* @__PURE__ */ e("span", { className:
|
|
1526
|
-
/* @__PURE__ */ r("span", { className:
|
|
1527
|
-
|
|
1544
|
+
/* @__PURE__ */ e("span", { className: j ? "ecp-wave-eq-label--dark" : "ecp-wave-eq-label--light", children: c.charAt(0).toUpperCase() + c.slice(1) }),
|
|
1545
|
+
/* @__PURE__ */ r("span", { className: j ? "ecp-wave-eq-label--dark" : "ecp-wave-eq-label--light", children: [
|
|
1546
|
+
qe[c],
|
|
1528
1547
|
" dB"
|
|
1529
1548
|
] })
|
|
1530
1549
|
] }),
|
|
1531
1550
|
/* @__PURE__ */ r("div", { className: "ecp-wave-eq-range-row", children: [
|
|
1532
|
-
/* @__PURE__ */ e("span", { className:
|
|
1551
|
+
/* @__PURE__ */ e("span", { className: j ? "ecp-wave-eq-bound--dark" : "ecp-wave-eq-bound--light", children: "-20" }),
|
|
1533
1552
|
/* @__PURE__ */ e(
|
|
1534
1553
|
"input",
|
|
1535
1554
|
{
|
|
1536
1555
|
type: "range",
|
|
1537
1556
|
min: "-20",
|
|
1538
1557
|
max: "20",
|
|
1539
|
-
value:
|
|
1540
|
-
onChange: (
|
|
1558
|
+
value: qe[c],
|
|
1559
|
+
onChange: ($) => de(c, parseInt($.target.value)),
|
|
1541
1560
|
className: "ecp-wave-eq-slider",
|
|
1542
1561
|
style: {
|
|
1543
|
-
background: `linear-gradient(to right, ${
|
|
1544
|
-
"--thumb-color":
|
|
1562
|
+
background: `linear-gradient(to right, ${d[0]} ${(qe[c] + 20) / 40 * 100}%, ${d[1] + "30"} ${(qe[c] + 20) / 40 * 100}%)`,
|
|
1563
|
+
"--thumb-color": d[0]
|
|
1545
1564
|
}
|
|
1546
1565
|
}
|
|
1547
1566
|
),
|
|
1548
|
-
/* @__PURE__ */ e("span", { className:
|
|
1567
|
+
/* @__PURE__ */ e("span", { className: j ? "ecp-wave-eq-bound--dark" : "ecp-wave-eq-bound--light", children: "+20" })
|
|
1549
1568
|
] })
|
|
1550
1569
|
] }, c)) }),
|
|
1551
1570
|
/* @__PURE__ */ r("div", { className: "ecp-wave-eq-footer", children: [
|
|
1552
|
-
/* @__PURE__ */ e("button", { onClick:
|
|
1553
|
-
/* @__PURE__ */ e("button", { onClick: () =>
|
|
1571
|
+
/* @__PURE__ */ e("button", { onClick: pe, className: `ecp-wave-eq-footer-btn${j ? " ecp-wave-eq-footer-btn--dark" : " ecp-wave-eq-footer-btn--light"}`, children: "Reset" }),
|
|
1572
|
+
/* @__PURE__ */ e("button", { onClick: () => fe(!1), className: `ecp-wave-eq-footer-btn${j ? " ecp-wave-eq-footer-btn--dark" : " ecp-wave-eq-footer-btn--light"}`, children: "Close" })
|
|
1554
1573
|
] })
|
|
1555
1574
|
] }) })
|
|
1556
1575
|
] });
|
|
1557
1576
|
}
|
|
1558
|
-
function
|
|
1559
|
-
const [h,
|
|
1560
|
-
|
|
1561
|
-
const
|
|
1562
|
-
if (!
|
|
1563
|
-
const
|
|
1564
|
-
return
|
|
1565
|
-
}, []),
|
|
1566
|
-
const
|
|
1567
|
-
h && V((
|
|
1577
|
+
function qr({ audio: s, thumbnail: d, gradient: v = ["#cd7eff", "#fe59f6"], background: m = "#1f273a", autoPlay: R = !1 }) {
|
|
1578
|
+
const [h, N] = k(!1), [, re] = k(0), P = u(null), [I, V] = k(0), [Y, a] = k(0), [Z, H] = k(0);
|
|
1579
|
+
T(() => {
|
|
1580
|
+
const L = P.current;
|
|
1581
|
+
if (!L) return;
|
|
1582
|
+
const F = () => re(L.currentTime);
|
|
1583
|
+
return L.addEventListener("timeupdate", F), () => L.removeEventListener("timeupdate", F);
|
|
1584
|
+
}, []), T(() => {
|
|
1585
|
+
const L = setInterval(() => {
|
|
1586
|
+
h && V((F) => F + 0.1);
|
|
1568
1587
|
}, 100);
|
|
1569
|
-
return () => clearInterval(
|
|
1570
|
-
}, [h]),
|
|
1571
|
-
const
|
|
1572
|
-
h &&
|
|
1588
|
+
return () => clearInterval(L);
|
|
1589
|
+
}, [h]), T(() => {
|
|
1590
|
+
const L = setInterval(() => {
|
|
1591
|
+
h && H((F) => F + 0.1);
|
|
1573
1592
|
}, 100);
|
|
1574
|
-
return () => clearInterval(
|
|
1575
|
-
}, [h]),
|
|
1576
|
-
s && P.current &&
|
|
1577
|
-
}, [s]),
|
|
1578
|
-
const
|
|
1579
|
-
if (!
|
|
1580
|
-
const
|
|
1581
|
-
return
|
|
1593
|
+
return () => clearInterval(L);
|
|
1594
|
+
}, [h]), T(() => {
|
|
1595
|
+
s && P.current && R && (P.current.play().catch(() => N(!1)), N(!0));
|
|
1596
|
+
}, [s]), T(() => {
|
|
1597
|
+
const L = P.current;
|
|
1598
|
+
if (!L) return;
|
|
1599
|
+
const F = () => a(L.duration);
|
|
1600
|
+
return H(0), L.addEventListener("loadedmetadata", F), () => L.removeEventListener("loadedmetadata", F);
|
|
1582
1601
|
}, [s]);
|
|
1583
|
-
const
|
|
1584
|
-
P.current && (h ? P.current.pause() : P.current.play().catch((
|
|
1602
|
+
const O = () => {
|
|
1603
|
+
P.current && (h ? P.current.pause() : P.current.play().catch((L) => console.error("NanoPlayer play failed:", L)), N(!h));
|
|
1585
1604
|
};
|
|
1586
1605
|
if (!s) return null;
|
|
1587
|
-
const
|
|
1606
|
+
const K = `linear-gradient(135deg, ${v[0]}, ${v[1]})`, _ = `${(Y > 0 ? Z / Y : 0) * 100}%`;
|
|
1588
1607
|
return /* @__PURE__ */ r(
|
|
1589
1608
|
"div",
|
|
1590
1609
|
{
|
|
1591
|
-
className: `ecp-nano-wrapper${
|
|
1592
|
-
style: { backgroundColor:
|
|
1610
|
+
className: `ecp-nano-wrapper${d ? " ecp-nano-wrapper--card" : " ecp-nano-wrapper--pill"}`,
|
|
1611
|
+
style: { backgroundColor: m },
|
|
1593
1612
|
children: [
|
|
1594
1613
|
/* @__PURE__ */ e(
|
|
1595
1614
|
"audio",
|
|
@@ -1597,26 +1616,26 @@ function gr({ audio: s, thumbnail: p, gradient: v = ["#cd7eff", "#fe59f6"], back
|
|
|
1597
1616
|
ref: P,
|
|
1598
1617
|
src: s,
|
|
1599
1618
|
onEnded: () => {
|
|
1600
|
-
|
|
1619
|
+
N(!1), H(0);
|
|
1601
1620
|
}
|
|
1602
1621
|
}
|
|
1603
1622
|
),
|
|
1604
|
-
/* @__PURE__ */ e("div", { className: "ecp-nano-progress-bg", style: { width:
|
|
1623
|
+
/* @__PURE__ */ e("div", { className: "ecp-nano-progress-bg", style: { width: _, backgroundImage: K } }),
|
|
1605
1624
|
/* @__PURE__ */ r("div", { className: "ecp-nano-content", children: [
|
|
1606
|
-
|
|
1625
|
+
d && /* @__PURE__ */ e("div", { className: "ecp-nano-thumbnail-wrap", children: /* @__PURE__ */ e("img", { src: d, alt: "", className: "ecp-nano-thumbnail" }) }),
|
|
1607
1626
|
/* @__PURE__ */ r("div", { className: "ecp-nano-row", children: [
|
|
1608
|
-
/* @__PURE__ */ e("button", { onClick:
|
|
1609
|
-
/* @__PURE__ */ e("div", { className: "ecp-nano-waveform", children: [...Array(12)].map((
|
|
1627
|
+
/* @__PURE__ */ e("button", { onClick: O, className: "ecp-nano-play-btn", style: { background: K }, children: h ? /* @__PURE__ */ e(rt, { fill: m, style: { width: "0.75rem", height: "0.75rem", color: "transparent" } }) : /* @__PURE__ */ e(nt, { fill: m, style: { width: "0.75rem", height: "0.75rem", color: "transparent" } }) }),
|
|
1628
|
+
/* @__PURE__ */ e("div", { className: "ecp-nano-waveform", children: [...Array(12)].map((L, F) => /* @__PURE__ */ e(
|
|
1610
1629
|
"div",
|
|
1611
1630
|
{
|
|
1612
1631
|
className: "ecp-nano-wave-bar",
|
|
1613
1632
|
style: {
|
|
1614
1633
|
background: `linear-gradient(to top, ${v[0]}, ${v[1]})`,
|
|
1615
|
-
height: h ? `${8 + Math.sin((
|
|
1634
|
+
height: h ? `${8 + Math.sin((I * 8 + F) * 0.6) * 10}px` : "8px",
|
|
1616
1635
|
opacity: h ? 0.8 : 0.4
|
|
1617
1636
|
}
|
|
1618
1637
|
},
|
|
1619
|
-
|
|
1638
|
+
F
|
|
1620
1639
|
)) })
|
|
1621
1640
|
] })
|
|
1622
1641
|
] })
|
|
@@ -1624,12 +1643,12 @@ function gr({ audio: s, thumbnail: p, gradient: v = ["#cd7eff", "#fe59f6"], back
|
|
|
1624
1643
|
}
|
|
1625
1644
|
);
|
|
1626
1645
|
}
|
|
1627
|
-
function
|
|
1646
|
+
function xr({
|
|
1628
1647
|
video: s,
|
|
1629
|
-
name:
|
|
1648
|
+
name: d = "No video loaded",
|
|
1630
1649
|
audioVisual: v = null,
|
|
1631
|
-
volume:
|
|
1632
|
-
thumbnail:
|
|
1650
|
+
volume: m = 100,
|
|
1651
|
+
thumbnail: R = null,
|
|
1633
1652
|
controls: h = {
|
|
1634
1653
|
play: !0,
|
|
1635
1654
|
pause: !0,
|
|
@@ -1641,161 +1660,159 @@ function qr({
|
|
|
1641
1660
|
equalizer: !0,
|
|
1642
1661
|
speed: !0
|
|
1643
1662
|
},
|
|
1644
|
-
mode:
|
|
1645
|
-
transparent:
|
|
1663
|
+
mode: N = "light",
|
|
1664
|
+
transparent: re = !1,
|
|
1646
1665
|
autoPlay: P = !1,
|
|
1647
|
-
color:
|
|
1666
|
+
color: I = "#3b82f6",
|
|
1648
1667
|
equalizer: V = { bass: 0, mid: 0, treble: 0 }
|
|
1649
1668
|
}) {
|
|
1650
|
-
const [
|
|
1651
|
-
|
|
1652
|
-
const n =
|
|
1669
|
+
const [Y, a] = k(!1), [Z, H] = k(0), [O, K] = k(0), [_, L] = k(m || 100), [F, Fe] = k(!1), [ge, Re] = k(!1), [E, ze] = k(!1), [fe, qe] = k([]), [we, G] = k(!1), [ee, Le] = k({ bass: V.bass || 0, mid: V.mid || 0, treble: V.treble || 0 }), [Q, Pe] = k(1), [ce, Ee] = k(0), w = u(null), Me = u(null), ne = u(null), $e = u(null), i = u(null), de = u(null), pe = u(null), Ne = u(null), M = u(null), j = u(null), ie = u(0), c = u(0), $ = u(0), z = u(0), p = u(0), C = u(0), te = u(!1), A = N === "dark" || E, ue = typeof h == "object" && Object.keys(h).length === 0;
|
|
1670
|
+
T(() => {
|
|
1671
|
+
const n = Me.current;
|
|
1653
1672
|
if (!n) return;
|
|
1654
|
-
const f = new ResizeObserver((
|
|
1655
|
-
for (let
|
|
1673
|
+
const f = new ResizeObserver((x) => {
|
|
1674
|
+
for (let S of x) Ee(S.contentRect.width);
|
|
1656
1675
|
});
|
|
1657
1676
|
return f.observe(n), () => f.disconnect();
|
|
1658
|
-
}, []),
|
|
1677
|
+
}, []), T(() => {
|
|
1659
1678
|
const n = [];
|
|
1660
|
-
s && typeof s != "string" && n.push(["TypeError", "video must be a string (URL or path)"]),
|
|
1661
|
-
}, [s,
|
|
1662
|
-
if (!
|
|
1663
|
-
const n =
|
|
1664
|
-
|
|
1665
|
-
},
|
|
1666
|
-
a(!1),
|
|
1667
|
-
}, W = () => a(!0),
|
|
1668
|
-
return n.addEventListener("timeupdate", f), n.addEventListener("loadedmetadata",
|
|
1669
|
-
n.removeEventListener("timeupdate", f), n.removeEventListener("loadedmetadata",
|
|
1679
|
+
s && typeof s != "string" && n.push(["TypeError", "video must be a string (URL or path)"]), d && typeof d != "string" && n.push(["TypeError", "name must be a string"]), (typeof m != "number" || m < 0 || m > 100) && n.push(["TypeError", "volume must be a number between 0 and 100"]), v && typeof v != "object" ? n.push(["TypeError", "audioVisual must be an object"]) : v && !["left", "right", "top", "bottom"].includes(v.side) && n.push(["ValueError", "audioVisual.side must be 'left', 'right', 'top', or 'bottom'"]), n.length > 0 ? qe(n) : qe([]);
|
|
1680
|
+
}, [s, d, m, v, h, N]), T(() => {
|
|
1681
|
+
if (!w.current) return;
|
|
1682
|
+
const n = w.current, f = () => {
|
|
1683
|
+
ge || H(n.currentTime);
|
|
1684
|
+
}, x = () => K(n.duration), S = () => {
|
|
1685
|
+
a(!1), M.current && cancelAnimationFrame(M.current);
|
|
1686
|
+
}, W = () => a(!0), oe = () => a(!1);
|
|
1687
|
+
return n.addEventListener("timeupdate", f), n.addEventListener("loadedmetadata", x), n.addEventListener("ended", S), n.addEventListener("play", W), n.addEventListener("pause", oe), () => {
|
|
1688
|
+
n.removeEventListener("timeupdate", f), n.removeEventListener("loadedmetadata", x), n.removeEventListener("ended", S), n.removeEventListener("play", W), n.removeEventListener("pause", oe);
|
|
1670
1689
|
};
|
|
1671
|
-
}, [
|
|
1690
|
+
}, [ge]), T(() => {
|
|
1672
1691
|
if (s) {
|
|
1673
|
-
const n =
|
|
1674
|
-
if (
|
|
1675
|
-
|
|
1676
|
-
const
|
|
1677
|
-
n &&
|
|
1692
|
+
const n = Y, f = _;
|
|
1693
|
+
if (w.current) {
|
|
1694
|
+
w.current.pause(), w.current.src = s, w.current.volume = F ? 0 : f / 100;
|
|
1695
|
+
const x = () => {
|
|
1696
|
+
(n || P || ue) && w.current && w.current.play().catch((S) => console.error("Play failed:", S)), w.current && w.current.removeEventListener("canplay", x);
|
|
1678
1697
|
};
|
|
1679
|
-
|
|
1698
|
+
w.current.addEventListener("canplay", x), w.current.load();
|
|
1680
1699
|
}
|
|
1681
|
-
|
|
1700
|
+
H(0), a(!1), ie.current = 0, c.current = 0, $.current = 0, z.current = 0, p.current = 0, C.current = 0, ve();
|
|
1682
1701
|
}
|
|
1683
|
-
}, [s]),
|
|
1684
|
-
|
|
1685
|
-
}, [
|
|
1686
|
-
|
|
1687
|
-
}, [
|
|
1688
|
-
|
|
1689
|
-
}, [
|
|
1690
|
-
|
|
1691
|
-
}, [
|
|
1692
|
-
const n = () =>
|
|
1702
|
+
}, [s]), T(() => {
|
|
1703
|
+
w.current && (w.current.volume = F ? 0 : _ / 100);
|
|
1704
|
+
}, [_, F]), T(() => {
|
|
1705
|
+
w.current && (w.current.playbackRate = Q);
|
|
1706
|
+
}, [Q]), T(() => {
|
|
1707
|
+
ne.current && (de.current && (de.current.gain.value = ee.bass), pe.current && (pe.current.gain.value = ee.mid), Ne.current && (Ne.current.gain.value = ee.treble));
|
|
1708
|
+
}, [ee]), T(() => {
|
|
1709
|
+
te.current = Y, M.current && (cancelAnimationFrame(M.current), M.current = null), Y && v ? (ne.current || Ae(), B()) : !Y && v && xe();
|
|
1710
|
+
}, [Y, v]), T(() => {
|
|
1711
|
+
const n = () => ze(!!document.fullscreenElement);
|
|
1693
1712
|
return document.addEventListener("fullscreenchange", n), () => document.removeEventListener("fullscreenchange", n);
|
|
1694
|
-
}, []),
|
|
1695
|
-
|
|
1713
|
+
}, []), T(() => () => {
|
|
1714
|
+
M.current && cancelAnimationFrame(M.current), ne.current && ne.current.close().catch((n) => console.warn("AudioContext cleanup error:", n));
|
|
1696
1715
|
}, []);
|
|
1697
|
-
const
|
|
1698
|
-
if (!
|
|
1716
|
+
const Ae = () => {
|
|
1717
|
+
if (!ne.current && w.current)
|
|
1699
1718
|
try {
|
|
1700
1719
|
const n = window.AudioContext || window.webkitAudioContext;
|
|
1701
1720
|
if (n) {
|
|
1702
1721
|
const f = new n();
|
|
1703
|
-
|
|
1704
|
-
const
|
|
1705
|
-
|
|
1706
|
-
const
|
|
1707
|
-
|
|
1722
|
+
ne.current = f;
|
|
1723
|
+
const x = f.createBiquadFilter();
|
|
1724
|
+
x.type = "lowshelf", x.frequency.value = 320, x.gain.value = ee.bass;
|
|
1725
|
+
const S = f.createBiquadFilter();
|
|
1726
|
+
S.type = "peaking", S.frequency.value = 1e3, S.Q.value = 0.5, S.gain.value = ee.mid;
|
|
1708
1727
|
const W = f.createBiquadFilter();
|
|
1709
|
-
W.type = "highshelf", W.frequency.value = 3200, W.gain.value =
|
|
1710
|
-
const
|
|
1711
|
-
|
|
1712
|
-
const
|
|
1713
|
-
|
|
1728
|
+
W.type = "highshelf", W.frequency.value = 3200, W.gain.value = ee.treble;
|
|
1729
|
+
const oe = f.createAnalyser();
|
|
1730
|
+
oe.fftSize = 2048, oe.smoothingTimeConstant = 0.8;
|
|
1731
|
+
const De = f.createMediaElementSource(w.current);
|
|
1732
|
+
De.connect(x), x.connect(S), S.connect(W), W.connect(oe), W.connect(f.destination), de.current = x, pe.current = S, Ne.current = W, $e.current = oe, i.current = De;
|
|
1714
1733
|
}
|
|
1715
1734
|
} catch (n) {
|
|
1716
1735
|
console.error("Failed to setup audio context:", n);
|
|
1717
1736
|
}
|
|
1718
|
-
},
|
|
1719
|
-
if (
|
|
1737
|
+
}, xe = () => {
|
|
1738
|
+
if (te.current) return;
|
|
1720
1739
|
ie.current *= 0.7, c.current *= 0.7;
|
|
1721
1740
|
const n = Date.now();
|
|
1722
|
-
n -
|
|
1723
|
-
const f = Math.max(ie.current, c.current),
|
|
1724
|
-
f > 0.01 ||
|
|
1725
|
-
},
|
|
1726
|
-
if (
|
|
1727
|
-
const n =
|
|
1728
|
-
|
|
1729
|
-
let
|
|
1730
|
-
for (let
|
|
1731
|
-
let
|
|
1732
|
-
ie.current = ie.current * 0.7 +
|
|
1741
|
+
n - p.current > 1500 && ($.current *= 0.95), n - C.current > 1500 && (z.current *= 0.95), ve();
|
|
1742
|
+
const f = Math.max(ie.current, c.current), x = Math.max($.current, z.current);
|
|
1743
|
+
f > 0.01 || x > 0.01 ? M.current = requestAnimationFrame(xe) : (te.current || (ie.current = 0, c.current = 0, $.current = 0, z.current = 0, ve()), M.current && cancelAnimationFrame(M.current), M.current = null);
|
|
1744
|
+
}, B = () => {
|
|
1745
|
+
if (!$e.current || !te.current) return;
|
|
1746
|
+
const n = $e.current.frequencyBinCount, f = new Uint8Array(n);
|
|
1747
|
+
$e.current.getByteFrequencyData(f);
|
|
1748
|
+
let x = 0;
|
|
1749
|
+
for (let oe = 0; oe < n; oe++) x += f[oe];
|
|
1750
|
+
let S = Math.pow(x / n / 255, 0.5);
|
|
1751
|
+
ie.current = ie.current * 0.7 + S * 0.3, c.current = c.current * 0.7 + S * 0.3;
|
|
1733
1752
|
const W = Date.now();
|
|
1734
|
-
ie.current >
|
|
1753
|
+
ie.current > $.current ? ($.current = ie.current, p.current = W) : W - p.current > 1500 && ($.current *= 0.95), c.current > z.current ? (z.current = c.current, C.current = W) : W - C.current > 1500 && (z.current *= 0.95), ve(), M.current = requestAnimationFrame(B);
|
|
1735
1754
|
}, ve = () => {
|
|
1736
|
-
if (!
|
|
1737
|
-
const n = v.color || "#00ff00", f = v.peak || "#ff0000",
|
|
1738
|
-
v.side === "top" || v.side === "bottom" ?
|
|
1755
|
+
if (!j.current || !v) return;
|
|
1756
|
+
const n = v.color || "#00ff00", f = v.peak || "#ff0000", x = ie.current * 100, S = c.current * 100, W = 100 - $.current * 100, oe = 100 - z.current * 100;
|
|
1757
|
+
v.side === "top" || v.side === "bottom" ? j.current.innerHTML = `
|
|
1739
1758
|
<div style="display:flex;flex-direction:column;gap:0.25rem;height:100%;justify-content:center;">
|
|
1740
1759
|
<div style="display:flex;align-items:center;justify-content:center;gap:0.5rem;">
|
|
1741
1760
|
<div style="font-size:0.75rem;opacity:0.8;width:1rem;text-align:center;color:${A ? "#f3f4f6" : "#111827"}">L</div>
|
|
1742
1761
|
<div style="position:relative;flex:1;height:0.75rem;background:rgba(0,0,0,0.4);border-radius:9999px;overflow:hidden;display:flex;justify-content:flex-end;">
|
|
1743
|
-
<div style="height:100%;border-radius:9999px 0 0 9999px;transition:width 75ms;width:${
|
|
1744
|
-
${
|
|
1762
|
+
<div style="height:100%;border-radius:9999px 0 0 9999px;transition:width 75ms;width:${x}%;background:${n};"></div>
|
|
1763
|
+
${$.current > 0.1 ? `<div style="position:absolute;top:0;width:0.25rem;height:100%;transition:right 100ms;right:${$.current * 100}%;background:${f};"></div>` : ""}
|
|
1745
1764
|
</div>
|
|
1746
1765
|
<div style="width:1px;height:1rem;background:rgba(255,255,255,0.2)"></div>
|
|
1747
1766
|
<div style="position:relative;flex:1;height:0.75rem;background:rgba(0,0,0,0.4);border-radius:9999px;overflow:hidden;display:flex;justify-content:flex-start;">
|
|
1748
|
-
<div style="height:100%;border-radius:0 9999px 9999px 0;transition:width 75ms;width:${
|
|
1749
|
-
${
|
|
1767
|
+
<div style="height:100%;border-radius:0 9999px 9999px 0;transition:width 75ms;width:${S}%;background:${n};"></div>
|
|
1768
|
+
${z.current > 0.1 ? `<div style="position:absolute;top:0;width:0.25rem;height:100%;transition:left 100ms;left:${z.current * 100}%;background:${f};"></div>` : ""}
|
|
1750
1769
|
</div>
|
|
1751
1770
|
<div style="font-size:0.75rem;opacity:0.8;width:1rem;text-align:center;color:${A ? "#f3f4f6" : "#111827"}">R</div>
|
|
1752
1771
|
</div>
|
|
1753
1772
|
</div>
|
|
1754
|
-
` :
|
|
1773
|
+
` : j.current.innerHTML = `
|
|
1755
1774
|
<div style="display:flex;gap:0.5rem;height:100%;">
|
|
1756
1775
|
<div style="flex:1;display:flex;flex-direction:column;">
|
|
1757
1776
|
<div style="font-size:0.75rem;color:white;opacity:0.7;text-align:center;margin-bottom:0.25rem;">L</div>
|
|
1758
1777
|
<div style="flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,0.3);border-radius:0.5rem;overflow:hidden;">
|
|
1759
|
-
<div style="border-radius:0.25rem 0.25rem 0 0;transition:height 75ms;height:${
|
|
1760
|
-
${
|
|
1778
|
+
<div style="border-radius:0.25rem 0.25rem 0 0;transition:height 75ms;height:${x}%;background:${n};">
|
|
1779
|
+
${$.current > 0.1 ? `<div style="position:absolute;width:100%;height:0.25rem;transition:top 100ms;top:${W}%;background:${f};"></div>` : ""}
|
|
1761
1780
|
</div>
|
|
1762
1781
|
</div>
|
|
1763
1782
|
</div>
|
|
1764
1783
|
<div style="flex:1;display:flex;flex-direction:column;">
|
|
1765
1784
|
<div style="font-size:0.75rem;color:white;opacity:0.7;text-align:center;margin-bottom:0.25rem;">R</div>
|
|
1766
1785
|
<div style="flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,0.3);border-radius:0.5rem;overflow:hidden;">
|
|
1767
|
-
<div style="border-radius:0.25rem 0.25rem 0 0;transition:height 75ms;height:${
|
|
1768
|
-
${
|
|
1786
|
+
<div style="border-radius:0.25rem 0.25rem 0 0;transition:height 75ms;height:${S}%;background:${n};">
|
|
1787
|
+
${z.current > 0.1 ? `<div style="position:absolute;width:100%;height:0.25rem;transition:top 100ms;top:${oe}%;background:${f};"></div>` : ""}
|
|
1769
1788
|
</div>
|
|
1770
1789
|
</div>
|
|
1771
1790
|
</div>
|
|
1772
1791
|
</div>
|
|
1773
1792
|
`;
|
|
1774
|
-
}, Ie = () => {
|
|
1775
|
-
!N.current || !s || (U ? N.current.pause() : (ce.current && ce.current.state === "suspended" && ce.current.resume(), N.current.play().catch((n) => console.error("Play failed:", n))));
|
|
1776
1793
|
}, We = () => {
|
|
1777
|
-
|
|
1778
|
-
}, Ue = (
|
|
1779
|
-
|
|
1780
|
-
I($), N.current && !fe && (N.current.currentTime = $);
|
|
1781
|
-
}, Be = () => Ce(!0), je = () => {
|
|
1782
|
-
N.current && (N.current.currentTime = G), Ce(!1);
|
|
1794
|
+
!w.current || !s || (Y ? w.current.pause() : (ne.current && ne.current.state === "suspended" && ne.current.resume(), w.current.play().catch((n) => console.error("Play failed:", n))));
|
|
1795
|
+
}, Ue = () => {
|
|
1796
|
+
w.current && (w.current.pause(), w.current.currentTime = 0, a(!1), H(0), ie.current = 0, c.current = 0, $.current = 0, z.current = 0, ve());
|
|
1783
1797
|
}, Ge = (n) => {
|
|
1798
|
+
const x = parseFloat(n.target.value) / 100 * O;
|
|
1799
|
+
H(x), w.current && !ge && (w.current.currentTime = x);
|
|
1800
|
+
}, He = () => Re(!0), je = () => {
|
|
1801
|
+
w.current && (w.current.currentTime = Z), Re(!1);
|
|
1802
|
+
}, Xe = (n) => {
|
|
1784
1803
|
const f = parseInt(n.target.value);
|
|
1785
|
-
|
|
1786
|
-
},
|
|
1787
|
-
|
|
1788
|
-
},
|
|
1789
|
-
|
|
1790
|
-
},
|
|
1804
|
+
L(f), Fe(f === 0);
|
|
1805
|
+
}, Ve = (n) => Pe(parseFloat(n.target.value)), at = () => Fe(!F), Ye = () => {
|
|
1806
|
+
Me.current && (document.fullscreenElement ? document.exitFullscreen() : Me.current.requestFullscreen().catch((n) => console.error("Fullscreen failed:", n)));
|
|
1807
|
+
}, Se = (n, f) => {
|
|
1808
|
+
Le((x) => ({ ...x, [n]: f })), ne.current && (n === "bass" && de.current && (de.current.gain.value = f), n === "mid" && pe.current && (pe.current.gain.value = f), n === "treble" && Ne.current && (Ne.current.gain.value = f));
|
|
1809
|
+
}, Ce = () => Le({ bass: 0, mid: 0, treble: 0 }), le = (n) => {
|
|
1791
1810
|
if (isNaN(n)) return "0:00";
|
|
1792
|
-
const f = Math.floor(n / 60),
|
|
1793
|
-
return `${f}:${
|
|
1811
|
+
const f = Math.floor(n / 60), x = Math.floor(n % 60);
|
|
1812
|
+
return `${f}:${x.toString().padStart(2, "0")}`;
|
|
1794
1813
|
};
|
|
1795
|
-
if (
|
|
1796
|
-
(
|
|
1797
|
-
}, [h]), me && me.length > 0)
|
|
1798
|
-
return /* @__PURE__ */ e(Ft, { children: me.map((n, f) => /* @__PURE__ */ r("div", { className: "ecp-video-error", children: [
|
|
1814
|
+
if (fe && fe.length > 0)
|
|
1815
|
+
return /* @__PURE__ */ e(St, { children: fe.map((n, f) => /* @__PURE__ */ r("div", { className: "ecp-video-error", children: [
|
|
1799
1816
|
/* @__PURE__ */ r("strong", { children: [
|
|
1800
1817
|
n[0],
|
|
1801
1818
|
":"
|
|
@@ -1803,36 +1820,36 @@ function qr({
|
|
|
1803
1820
|
" ",
|
|
1804
1821
|
n[1]
|
|
1805
1822
|
] }, f)) });
|
|
1806
|
-
const he = v ? v.side : null,
|
|
1823
|
+
const he = v ? v.side : null, Ie = he === "top" || he === "bottom";
|
|
1807
1824
|
return /* @__PURE__ */ e(
|
|
1808
1825
|
"div",
|
|
1809
1826
|
{
|
|
1810
|
-
ref:
|
|
1811
|
-
className: `ecp-video-wrapper${
|
|
1812
|
-
style: { backgroundColor: ue ||
|
|
1827
|
+
ref: Me,
|
|
1828
|
+
className: `ecp-video-wrapper${E ? " ecp-video-wrapper--fullscreen" : ""}`,
|
|
1829
|
+
style: { backgroundColor: ue || re ? void 0 : A ? "#49494937" : "white" },
|
|
1813
1830
|
children: /* @__PURE__ */ r(
|
|
1814
1831
|
"div",
|
|
1815
1832
|
{
|
|
1816
|
-
className: `ecp-video-inner${
|
|
1817
|
-
style: { background: ue ||
|
|
1833
|
+
className: `ecp-video-inner${E ? " ecp-video-inner--fullscreen" : ""}${re ? "" : " ecp-video-inner--padded"}`,
|
|
1834
|
+
style: { background: ue || re ? void 0 : A ? "#1a1a1ab0" : "#f5f5f5" },
|
|
1818
1835
|
children: [
|
|
1819
|
-
h.videoName && !
|
|
1820
|
-
/* @__PURE__ */ r("div", { className: `ecp-video-layout${
|
|
1821
|
-
v && he === "top" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-top", ref:
|
|
1822
|
-
/* @__PURE__ */ r("div", { style: { display: "flex", flex:
|
|
1823
|
-
v && he === "left" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-side", ref:
|
|
1836
|
+
h.videoName && !E && /* @__PURE__ */ e("div", { className: `ecp-video-name${A ? " ecp-video-name--dark" : " ecp-video-name--light"}`, children: d }),
|
|
1837
|
+
/* @__PURE__ */ r("div", { className: `ecp-video-layout${Ie ? " ecp-video-layout--col" : " ecp-video-layout--row"}${E ? " ecp-video-layout--fullscreen" : ""}`, children: [
|
|
1838
|
+
v && he === "top" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-top", ref: j }),
|
|
1839
|
+
/* @__PURE__ */ r("div", { style: { display: "flex", flex: Ie ? void 0 : 1, gap: "0.75rem" }, children: [
|
|
1840
|
+
v && he === "left" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-side", ref: j }),
|
|
1824
1841
|
/* @__PURE__ */ r("div", { className: `ecp-video-el-wrap${A ? " ecp-video-el-wrap--dark" : " ecp-video-el-wrap--light"}`, children: [
|
|
1825
|
-
/* @__PURE__ */ r("video", { ref:
|
|
1842
|
+
/* @__PURE__ */ r("video", { ref: w, className: "ecp-video-el", poster: R || void 0, children: [
|
|
1826
1843
|
s && /* @__PURE__ */ e("source", { src: s }),
|
|
1827
1844
|
"Your browser does not support the video tag."
|
|
1828
1845
|
] }),
|
|
1829
|
-
|
|
1846
|
+
we && /* @__PURE__ */ e("div", { className: "ecp-video-eq-overlay", children: /* @__PURE__ */ r("div", { className: `ecp-video-eq-panel${A ? " ecp-video-eq-panel--dark" : " ecp-video-eq-panel--light"}`, children: [
|
|
1830
1847
|
/* @__PURE__ */ e("h3", { className: `ecp-video-eq-title${A ? " ecp-video-eq-title--dark" : " ecp-video-eq-title--light"}`, children: "Equalizer" }),
|
|
1831
1848
|
/* @__PURE__ */ e("div", { className: "ecp-video-eq-bands", children: ["bass", "mid", "treble"].map((n) => /* @__PURE__ */ r("div", { children: [
|
|
1832
1849
|
/* @__PURE__ */ r("div", { className: "ecp-video-eq-band-header", children: [
|
|
1833
1850
|
/* @__PURE__ */ e("span", { className: A ? "ecp-video-eq-label--dark" : "ecp-video-eq-label--light", children: n.charAt(0).toUpperCase() + n.slice(1) }),
|
|
1834
1851
|
/* @__PURE__ */ r("span", { className: A ? "ecp-video-eq-label--dark" : "ecp-video-eq-label--light", children: [
|
|
1835
|
-
|
|
1852
|
+
ee[n],
|
|
1836
1853
|
" dB"
|
|
1837
1854
|
] })
|
|
1838
1855
|
] }),
|
|
@@ -1844,12 +1861,12 @@ function qr({
|
|
|
1844
1861
|
type: "range",
|
|
1845
1862
|
min: "-20",
|
|
1846
1863
|
max: "20",
|
|
1847
|
-
value:
|
|
1848
|
-
onChange: (f) =>
|
|
1864
|
+
value: ee[n],
|
|
1865
|
+
onChange: (f) => Se(n, parseInt(f.target.value)),
|
|
1849
1866
|
className: "ecp-video-eq-slider",
|
|
1850
1867
|
style: {
|
|
1851
|
-
background: `linear-gradient(to right, ${
|
|
1852
|
-
"--thumb-color":
|
|
1868
|
+
background: `linear-gradient(to right, ${I} ${(ee[n] + 20) / 40 * 100}%, #e5e7eb ${(ee[n] + 20) / 40 * 100}%)`,
|
|
1869
|
+
"--thumb-color": I
|
|
1853
1870
|
}
|
|
1854
1871
|
}
|
|
1855
1872
|
),
|
|
@@ -1857,100 +1874,100 @@ function qr({
|
|
|
1857
1874
|
] })
|
|
1858
1875
|
] }, n)) }),
|
|
1859
1876
|
/* @__PURE__ */ r("div", { className: "ecp-video-eq-footer", children: [
|
|
1860
|
-
/* @__PURE__ */ e("button", { onClick:
|
|
1861
|
-
/* @__PURE__ */ e("button", { onClick: () =>
|
|
1877
|
+
/* @__PURE__ */ e("button", { onClick: Ce, className: `ecp-video-eq-footer-btn${A ? " ecp-video-eq-footer-btn--dark" : " ecp-video-eq-footer-btn--light"}`, children: "Reset" }),
|
|
1878
|
+
/* @__PURE__ */ e("button", { onClick: () => G(!1), className: `ecp-video-eq-footer-btn${A ? " ecp-video-eq-footer-btn--dark" : " ecp-video-eq-footer-btn--light"}`, style: { marginLeft: "0.5rem" }, children: "Close" })
|
|
1862
1879
|
] })
|
|
1863
1880
|
] }) })
|
|
1864
1881
|
] }),
|
|
1865
|
-
v && he === "right" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-side", ref:
|
|
1882
|
+
v && he === "right" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-side", ref: j })
|
|
1866
1883
|
] }),
|
|
1867
|
-
v && he === "bottom" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-bottom", ref:
|
|
1884
|
+
v && he === "bottom" && /* @__PURE__ */ e("div", { className: "ecp-video-vu-bottom", ref: j })
|
|
1868
1885
|
] }),
|
|
1869
|
-
h.seekbar && /* @__PURE__ */ e("div", { className: `ecp-video-seekbar${
|
|
1870
|
-
/* @__PURE__ */ e("span", { className: `ecp-video-time${A ? " ecp-video-time--dark" : " ecp-video-time--light"}`, children:
|
|
1886
|
+
h.seekbar && /* @__PURE__ */ e("div", { className: `ecp-video-seekbar${E ? " ecp-video-seekbar--fullscreen" : ""}`, children: /* @__PURE__ */ r("div", { className: "ecp-video-seekbar-row", children: [
|
|
1887
|
+
/* @__PURE__ */ e("span", { className: `ecp-video-time${A ? " ecp-video-time--dark" : " ecp-video-time--light"}`, children: le(Z) }),
|
|
1871
1888
|
/* @__PURE__ */ e(
|
|
1872
1889
|
"input",
|
|
1873
1890
|
{
|
|
1874
1891
|
type: "range",
|
|
1875
1892
|
min: "0",
|
|
1876
1893
|
max: "100",
|
|
1877
|
-
value:
|
|
1878
|
-
onChange:
|
|
1879
|
-
onMouseDown:
|
|
1894
|
+
value: O > 0 ? Z / O * 100 : 0,
|
|
1895
|
+
onChange: Ge,
|
|
1896
|
+
onMouseDown: He,
|
|
1880
1897
|
onMouseUp: je,
|
|
1881
|
-
onTouchStart:
|
|
1898
|
+
onTouchStart: He,
|
|
1882
1899
|
onTouchEnd: je,
|
|
1883
1900
|
disabled: !s,
|
|
1884
1901
|
className: "ecp-video-seek-input",
|
|
1885
1902
|
style: {
|
|
1886
|
-
background: s &&
|
|
1887
|
-
"--thumb-color":
|
|
1903
|
+
background: s && O > 0 ? `linear-gradient(to right, ${I} ${Z / O * 100}%, #e5e7eb ${Z / O * 100}%)` : "#e5e7eb",
|
|
1904
|
+
"--thumb-color": I
|
|
1888
1905
|
}
|
|
1889
1906
|
}
|
|
1890
1907
|
),
|
|
1891
|
-
/* @__PURE__ */ e("span", { className: `ecp-video-time ecp-video-time--right${A ? " ecp-video-time--dark" : " ecp-video-time--light"}`, children:
|
|
1908
|
+
/* @__PURE__ */ e("span", { className: `ecp-video-time ecp-video-time--right${A ? " ecp-video-time--dark" : " ecp-video-time--light"}`, children: le(O) })
|
|
1892
1909
|
] }) }),
|
|
1893
1910
|
/* @__PURE__ */ r("div", { className: "ecp-video-controls", children: [
|
|
1894
1911
|
h.play && /* @__PURE__ */ r(
|
|
1895
1912
|
"button",
|
|
1896
1913
|
{
|
|
1897
|
-
onClick:
|
|
1914
|
+
onClick: We,
|
|
1898
1915
|
disabled: !s,
|
|
1899
|
-
className: `ecp-video-play-btn${
|
|
1900
|
-
style: { backgroundColor:
|
|
1916
|
+
className: `ecp-video-play-btn${ce <= 400 ? " ecp-video-play-btn--compact" : ""}`,
|
|
1917
|
+
style: { backgroundColor: I },
|
|
1901
1918
|
children: [
|
|
1902
1919
|
/* @__PURE__ */ r("div", { className: "ecp-video-play-icon-wrap", children: [
|
|
1903
|
-
/* @__PURE__ */ e(
|
|
1904
|
-
/* @__PURE__ */ e(
|
|
1920
|
+
/* @__PURE__ */ e(rt, { size: 16, style: { position: "absolute", transform: Y ? void 0 : "scale(0) translateY(2.5rem)", transition: "all 150ms" } }),
|
|
1921
|
+
/* @__PURE__ */ e(nt, { size: 16, style: { position: "absolute", transform: Y ? "scale(0) translateY(-2.5rem)" : void 0, transition: "all 150ms" } })
|
|
1905
1922
|
] }),
|
|
1906
|
-
|
|
1923
|
+
ce > 400 && (Y ? "Pause" : "Play")
|
|
1907
1924
|
]
|
|
1908
1925
|
}
|
|
1909
1926
|
),
|
|
1910
|
-
h.stop && /* @__PURE__ */ e("button", { onClick:
|
|
1927
|
+
h.stop && /* @__PURE__ */ e("button", { onClick: Ue, disabled: !s, className: `ecp-video-stop-btn${A ? " ecp-video-stop-btn--dark" : " ecp-video-stop-btn--light"}`, children: /* @__PURE__ */ e(Bt, { size: 16 }) }),
|
|
1911
1928
|
h.fullscreen && /* @__PURE__ */ r(
|
|
1912
1929
|
"button",
|
|
1913
1930
|
{
|
|
1914
|
-
onClick:
|
|
1915
|
-
className: `ecp-video-fullscreen-btn${A ? " ecp-video-fullscreen-btn--dark" : " ecp-video-fullscreen-btn--light"}${
|
|
1931
|
+
onClick: Ye,
|
|
1932
|
+
className: `ecp-video-fullscreen-btn${A ? " ecp-video-fullscreen-btn--dark" : " ecp-video-fullscreen-btn--light"}${ce >= 800 ? " ecp-video-fullscreen-btn--wide" : ""}`,
|
|
1916
1933
|
children: [
|
|
1917
|
-
|
|
1918
|
-
/* @__PURE__ */ e("span", { style: { display:
|
|
1934
|
+
E ? /* @__PURE__ */ e(sr, { size: 16 }) : /* @__PURE__ */ e(cr, { size: 16 }),
|
|
1935
|
+
/* @__PURE__ */ e("span", { style: { display: ce < 800 ? "none" : "block" }, children: E ? "Exit" : "Full" })
|
|
1919
1936
|
]
|
|
1920
1937
|
}
|
|
1921
1938
|
),
|
|
1922
1939
|
h.equalizer && /* @__PURE__ */ r(
|
|
1923
1940
|
"button",
|
|
1924
1941
|
{
|
|
1925
|
-
onClick: () =>
|
|
1942
|
+
onClick: () => G(!we),
|
|
1926
1943
|
disabled: !s,
|
|
1927
|
-
className: `ecp-video-eq-toggle-btn${
|
|
1928
|
-
style:
|
|
1944
|
+
className: `ecp-video-eq-toggle-btn${we ? " ecp-video-eq-toggle-btn--on" : " ecp-video-eq-toggle-btn--off"}${ce >= 700 ? " ecp-video-eq-toggle-btn--wide" : ""}`,
|
|
1945
|
+
style: we ? { backgroundColor: I } : {},
|
|
1929
1946
|
children: [
|
|
1930
|
-
/* @__PURE__ */ e(
|
|
1931
|
-
/* @__PURE__ */ e("span", { style: { display:
|
|
1947
|
+
/* @__PURE__ */ e(tt, { size: 16 }),
|
|
1948
|
+
/* @__PURE__ */ e("span", { style: { display: ce < 700 ? "none" : "block" }, children: "EQ" })
|
|
1932
1949
|
]
|
|
1933
1950
|
}
|
|
1934
1951
|
),
|
|
1935
|
-
h.speed && /* @__PURE__ */ e("div", { className: "ecp-video-speed-wrap", children: /* @__PURE__ */ e("select", { value:
|
|
1952
|
+
h.speed && /* @__PURE__ */ e("div", { className: "ecp-video-speed-wrap", children: /* @__PURE__ */ e("select", { value: Q, onChange: Ve, className: `ecp-video-speed-select${A ? " ecp-video-speed-select--dark" : " ecp-video-speed-select--light"}`, children: ["0.5", "0.75", "1", "1.25", "1.5", "2"].map((n) => /* @__PURE__ */ r("option", { value: n, className: A ? "ecp-video-speed-option--dark" : "ecp-video-speed-option--light", children: [
|
|
1936
1953
|
n,
|
|
1937
1954
|
"x"
|
|
1938
1955
|
] }, n)) }) }),
|
|
1939
1956
|
h.volume && /* @__PURE__ */ r("div", { className: "ecp-video-volume", children: [
|
|
1940
|
-
/* @__PURE__ */ e("button", { onClick:
|
|
1957
|
+
/* @__PURE__ */ e("button", { onClick: at, className: "ecp-video-mute-btn", children: F || _ === 0 ? /* @__PURE__ */ e(pt, { size: 20, className: A ? "ecp-video-mute-icon--dark" : "ecp-video-mute-icon--light" }) : /* @__PURE__ */ e(dt, { size: 20, className: A ? "ecp-video-mute-icon--dark" : "ecp-video-mute-icon--light" }) }),
|
|
1941
1958
|
/* @__PURE__ */ e(
|
|
1942
1959
|
"input",
|
|
1943
1960
|
{
|
|
1944
1961
|
type: "range",
|
|
1945
1962
|
min: "0",
|
|
1946
1963
|
max: "100",
|
|
1947
|
-
value:
|
|
1948
|
-
onChange:
|
|
1964
|
+
value: _,
|
|
1965
|
+
onChange: Xe,
|
|
1949
1966
|
className: "ecp-video-vol-slider",
|
|
1950
1967
|
style: {
|
|
1951
|
-
background: `linear-gradient(to right, ${
|
|
1952
|
-
"--thumb-color":
|
|
1953
|
-
display:
|
|
1968
|
+
background: `linear-gradient(to right, ${I} ${_}%, #e5e7eb ${_}%)`,
|
|
1969
|
+
"--thumb-color": I,
|
|
1970
|
+
display: ce < 460 ? "none" : "block"
|
|
1954
1971
|
}
|
|
1955
1972
|
}
|
|
1956
1973
|
),
|
|
@@ -1958,9 +1975,9 @@ function qr({
|
|
|
1958
1975
|
"span",
|
|
1959
1976
|
{
|
|
1960
1977
|
className: `ecp-video-vol-pct${A ? " ecp-video-vol-pct--dark" : " ecp-video-vol-pct--light"}`,
|
|
1961
|
-
style: { display:
|
|
1978
|
+
style: { display: ce < 800 ? "none" : "block" },
|
|
1962
1979
|
children: [
|
|
1963
|
-
|
|
1980
|
+
_,
|
|
1964
1981
|
"%"
|
|
1965
1982
|
]
|
|
1966
1983
|
}
|
|
@@ -1973,28 +1990,28 @@ function qr({
|
|
|
1973
1990
|
}
|
|
1974
1991
|
);
|
|
1975
1992
|
}
|
|
1976
|
-
function
|
|
1977
|
-
const [s,
|
|
1993
|
+
function Cr() {
|
|
1994
|
+
const [s, d] = k(null), [v, m] = k("No track loaded"), [R, h] = k("purple"), [N, re] = k(!1), [P, I] = k(!1), [V, Y] = k("light"), a = u(null);
|
|
1978
1995
|
return /* @__PURE__ */ e("div", { className: "ecp-page-wrapper", style: { backgroundColor: V === "dark" ? "#222" : "white" }, children: /* @__PURE__ */ r("div", { className: "ecp-demo-container", children: [
|
|
1979
|
-
|
|
1996
|
+
N && /* @__PURE__ */ e(gr, { theme: R, setTheme: h, close: () => re(!1) }),
|
|
1980
1997
|
/* @__PURE__ */ r("div", { className: "ecp-container-glass", children: [
|
|
1981
1998
|
/* @__PURE__ */ r("div", { className: "ecp-demo-header", children: [
|
|
1982
1999
|
/* @__PURE__ */ r("div", { children: [
|
|
1983
2000
|
/* @__PURE__ */ e("h1", { className: `ecp-demo-title${V === "dark" ? " ecp-demo-title--dark" : ""}`, children: "Audio Visualizer" }),
|
|
1984
2001
|
/* @__PURE__ */ e("p", { className: "ecp-demo-subtitle", children: "Professional frequency analyzer" })
|
|
1985
2002
|
] }),
|
|
1986
|
-
/* @__PURE__ */ r("button", { onClick: () =>
|
|
2003
|
+
/* @__PURE__ */ r("button", { onClick: () => re(!N), className: "ecp-theme-btn", children: [
|
|
1987
2004
|
/* @__PURE__ */ e("span", { children: "🎨" }),
|
|
1988
2005
|
" Themes"
|
|
1989
2006
|
] })
|
|
1990
2007
|
] }),
|
|
1991
2008
|
/* @__PURE__ */ e(
|
|
1992
|
-
|
|
2009
|
+
yr,
|
|
1993
2010
|
{
|
|
1994
2011
|
audio: s || void 0,
|
|
1995
2012
|
name: v || void 0,
|
|
1996
2013
|
author: "K.Prabhasha",
|
|
1997
|
-
theme:
|
|
2014
|
+
theme: R,
|
|
1998
2015
|
autoPlay: !1,
|
|
1999
2016
|
thumbnail: "https://cdn-icons-png.flaticon.com/512/3845/3845874.png",
|
|
2000
2017
|
mode: V,
|
|
@@ -2012,7 +2029,7 @@ function Nr() {
|
|
|
2012
2029
|
}
|
|
2013
2030
|
),
|
|
2014
2031
|
/* @__PURE__ */ e(
|
|
2015
|
-
|
|
2032
|
+
kr,
|
|
2016
2033
|
{
|
|
2017
2034
|
audio: s || "",
|
|
2018
2035
|
width: 400,
|
|
@@ -2023,7 +2040,7 @@ function Nr() {
|
|
|
2023
2040
|
}
|
|
2024
2041
|
),
|
|
2025
2042
|
/* @__PURE__ */ e(
|
|
2026
|
-
|
|
2043
|
+
qr,
|
|
2027
2044
|
{
|
|
2028
2045
|
audio: s || "",
|
|
2029
2046
|
thumbnail: "https://cdn-icons-png.flaticon.com/512/17524/17524837.png",
|
|
@@ -2033,23 +2050,23 @@ function Nr() {
|
|
|
2033
2050
|
}
|
|
2034
2051
|
),
|
|
2035
2052
|
/* @__PURE__ */ r("div", { className: "ecp-demo-actions", children: [
|
|
2036
|
-
/* @__PURE__ */ e("input", { type: "file", ref: a, onChange: (
|
|
2037
|
-
var
|
|
2038
|
-
const
|
|
2039
|
-
if (
|
|
2040
|
-
const
|
|
2041
|
-
|
|
2053
|
+
/* @__PURE__ */ e("input", { type: "file", ref: a, onChange: (O) => {
|
|
2054
|
+
var _;
|
|
2055
|
+
const K = (_ = O.target.files) == null ? void 0 : _[0];
|
|
2056
|
+
if (K) {
|
|
2057
|
+
const L = URL.createObjectURL(K);
|
|
2058
|
+
d(L), m(K.name);
|
|
2042
2059
|
}
|
|
2043
2060
|
}, accept: "audio/*", className: "ecp-file-input-hidden" }),
|
|
2044
2061
|
/* @__PURE__ */ r("button", { onClick: () => {
|
|
2045
|
-
var
|
|
2046
|
-
return (
|
|
2062
|
+
var O;
|
|
2063
|
+
return (O = a.current) == null ? void 0 : O.click();
|
|
2047
2064
|
}, className: "ecp-action-btn", children: [
|
|
2048
|
-
/* @__PURE__ */ e(
|
|
2065
|
+
/* @__PURE__ */ e(mr, { size: 16 }),
|
|
2049
2066
|
"Load Audio"
|
|
2050
2067
|
] }),
|
|
2051
|
-
/* @__PURE__ */ e("button", { onClick: () =>
|
|
2052
|
-
/* @__PURE__ */ r("button", { onClick: () =>
|
|
2068
|
+
/* @__PURE__ */ e("button", { onClick: () => Y(V === "dark" ? "light" : "dark"), className: "ecp-action-btn", children: V === "dark" ? "Light" : "Dark" }),
|
|
2069
|
+
/* @__PURE__ */ r("button", { onClick: () => I(!P), className: "ecp-action-btn", children: [
|
|
2053
2070
|
"Transparent: ",
|
|
2054
2071
|
String(P)
|
|
2055
2072
|
] })
|
|
@@ -2058,11 +2075,11 @@ function Nr() {
|
|
|
2058
2075
|
] }) });
|
|
2059
2076
|
}
|
|
2060
2077
|
export {
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2078
|
+
Cr as DemoVisualizePlayer,
|
|
2079
|
+
qr as NanoAudioPlayer,
|
|
2080
|
+
gr as ThemeSelector,
|
|
2081
|
+
xr as VideoPlayer,
|
|
2082
|
+
yr as VisualizePlayer,
|
|
2083
|
+
kr as WaveAudioPlayer,
|
|
2084
|
+
me as themes
|
|
2068
2085
|
};
|