snice 3.6.0 → 3.8.0

package/dist/components/music-player/snice-music-player.js

@@ -0,0 +1,730 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property, query, styles, ready, dispose, watch, render, dispatch, css, html } from 'snice';
+
+var playerStyles = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}.player-container{background:var(--snice-color-background,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-lg,.5rem);padding:var(--snice-spacing-lg,1.5rem);box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1))}.player-info{display:flex;align-items:center;gap:var(--snice-spacing-md,1rem);margin-bottom:var(--snice-spacing-lg,1.5rem)}.player-artwork{flex-shrink:0;width:5rem;height:5rem;border-radius:var(--snice-border-radius-md,.25rem);overflow:hidden;background:var(--snice-color-background-secondary,rgb(250 250 250));display:flex;align-items:center;justify-content:center}.player-artwork img{width:100%;height:100%;object-fit:cover}.player-artwork-placeholder{color:var(--snice-color-text-tertiary,rgb(115 115 115))}.player-track-info{flex:1;min-width:0}.player-track-title{font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin-bottom:var(--snice-spacing-3xs,.125rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-track-artist{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));margin-bottom:var(--snice-spacing-3xs,.125rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-track-album{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-tertiary,rgb(115 115 115));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-controls{margin-bottom:var(--snice-spacing-md,1rem);overflow:visible}.player-control-buttons{display:flex;align-items:center;justify-content:center;gap:var(--snice-spacing-sm,.75rem);margin-bottom:var(--snice-spacing-md,1rem)}.player-btn{background:0 0;border:none;cursor:pointer;padding:var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,.25rem);color:var(--snice-color-text,rgb(23 23 23));display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--snice-transition-fast, 150ms) ease}.player-btn:hover:not(:disabled){background:var(--snice-color-background-hover,rgb(241 241 241))}.player-btn:active:not(:disabled){background:var(--snice-color-background-active,rgb(226 226 226))}.player-btn:disabled{opacity:.5;cursor:not-allowed}.player-btn.active{color:var(--snice-color-primary,rgb(37 99 235))}.player-btn-play-pause{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));padding:var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-circle,50%)}.player-btn-play-pause:active:not(:disabled),.player-btn-play-pause:hover:not(:disabled){background:var(--snice-color-primary-hover,rgb(29 78 216))}.player-progress-container{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);position:relative}.player-time{font-size:var(--snice-font-size-xs, .75rem);font-variant-numeric:tabular-nums;color:var(--snice-color-text-secondary,rgb(82 82 82));min-width:2.5rem}.player-time-current{text-align:right}.player-progress{flex:1;height:.375rem;background:var(--snice-color-background-secondary,rgb(250 250 250));border-radius:var(--snice-border-radius-pill,9999px);cursor:pointer;position:relative;overflow:hidden}.player-progress:hover{background:var(--snice-color-background-tertiary,rgb(241 241 241))}.player-progress-bar{height:100%;background:var(--snice-color-primary,rgb(37 99 235));border-radius:var(--snice-border-radius-pill,9999px);transition:width .1s linear}.player-volume{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);margin-left:var(--snice-spacing-sm,.75rem)}.player-btn-volume{flex-shrink:0}.player-volume-slider-container{display:flex;align-items:center}.player-volume-slider{-webkit-appearance:none;appearance:none;width:5rem;height:.375rem;background:linear-gradient(to right,var(--snice-color-primary,rgb(37 99 235)) 0,var(--snice-color-primary,rgb(37 99 235)) var(--volume-percent,100%),var(--snice-color-background-secondary,rgb(250 250 250)) var(--volume-percent,100%),var(--snice-color-background-secondary,rgb(250 250 250)) 100%);border-radius:var(--snice-border-radius-pill,9999px);outline:0;cursor:pointer}.player-volume-slider::-webkit-slider-runnable-track{width:100%;height:.375rem;background:0 0;border-radius:var(--snice-border-radius-pill,9999px)}.player-volume-slider::-moz-range-track{width:100%;height:.375rem;background:var(--snice-color-background-secondary,rgb(250 250 250));border-radius:var(--snice-border-radius-pill,9999px)}.player-volume-slider::-moz-range-progress{height:.375rem;background:var(--snice-color-primary,rgb(37 99 235));border-radius:var(--snice-border-radius-pill,9999px)}.player-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:.875rem;height:.875rem;background:var(--snice-color-primary,rgb(37 99 235));border-radius:var(--snice-border-radius-circle,50%);cursor:pointer;transition:transform var(--snice-transition-fast, 150ms) ease;margin-top:-.25rem}.player-volume-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.player-volume-slider::-moz-range-thumb{width:.875rem;height:.875rem;background:var(--snice-color-primary,rgb(37 99 235));border:none;border-radius:var(--snice-border-radius-circle,50%);cursor:pointer;transition:transform var(--snice-transition-fast, 150ms) ease}.player-volume-slider::-moz-range-thumb:hover{transform:scale(1.15)}.player-playlist{border-top:1px solid var(--snice-color-border,rgb(226 226 226));padding-top:var(--snice-spacing-md,1rem);margin-top:var(--snice-spacing-md,1rem)}.player-playlist-header{font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin-bottom:var(--snice-spacing-sm,.75rem)}.player-playlist-items{display:flex;flex-direction:column;gap:var(--snice-spacing-2xs,.25rem);max-height:15rem;overflow-y:auto}.player-playlist-item{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-sm,.75rem);border-radius:var(--snice-border-radius-md,.25rem);cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease}.player-playlist-item:hover{background:var(--snice-color-background-hover,rgb(241 241 241))}.player-playlist-item.active{background:var(--snice-color-primary-subtle,rgb(239 246 255))}.player-playlist-item.active .player-playlist-item-title{color:var(--snice-color-primary,rgb(37 99 235));font-weight:var(--snice-font-weight-medium,500)}.player-playlist-item-number{font-size:var(--snice-font-size-xs, .75rem);font-variant-numeric:tabular-nums;color:var(--snice-color-text-tertiary,rgb(115 115 115));width:1.5rem;text-align:center;flex-shrink:0}.player-playlist-item-artwork{width:2.5rem;height:2.5rem;border-radius:var(--snice-border-radius-sm,.125rem);object-fit:cover;flex-shrink:0}.player-playlist-item-info{flex:1;min-width:0}.player-playlist-item-title{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text,rgb(23 23 23));margin-bottom:var(--snice-spacing-3xs,.125rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-playlist-item-artist{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-playlist-item-duration{font-size:var(--snice-font-size-xs, .75rem);font-variant-numeric:tabular-nums;color:var(--snice-color-text-tertiary,rgb(115 115 115));flex-shrink:0}.player-playlist-items::-webkit-scrollbar{width:.5rem}.player-playlist-items::-webkit-scrollbar-track{background:var(--snice-color-background-secondary,rgb(250 250 250));border-radius:var(--snice-border-radius-pill,9999px)}.player-playlist-items::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-pill,9999px)}.player-playlist-items::-webkit-scrollbar-thumb:hover{background:var(--snice-color-border-hover,rgb(204 204 204))}.player-container--compact{padding:var(--snice-spacing-sm,.75rem);display:flex;align-items:center;gap:var(--snice-spacing-md,1rem)}.player-container--compact .player-info{gap:var(--snice-spacing-sm,.75rem);margin-bottom:0;flex-shrink:0}.player-container--compact .player-artwork{width:3rem;height:3rem}.player-container--compact .player-track-title{font-size:var(--snice-font-size-sm, .875rem)}.player-container--compact .player-track-artist{font-size:var(--snice-font-size-xs, .75rem)}.player-container--compact .player-track-album{display:none}.player-container--compact .player-controls{flex:1;margin-bottom:0;display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem)}.player-container--compact .player-control-buttons{gap:var(--snice-spacing-xs,.5rem);margin-bottom:0}.player-container--compact .player-btn{padding:var(--snice-spacing-2xs,.25rem)}.player-container--compact .player-btn svg{width:1.25rem;height:1.25rem}.player-container--compact .player-btn-play-pause{padding:var(--snice-spacing-xs,.5rem)}.player-container--compact .player-btn-play-pause svg{width:1.5rem;height:1.5rem}.player-container--compact .player-progress-container{flex:1}.player-container--compact .player-time{font-size:var(--snice-font-size-2xs, .625rem);min-width:2rem}";
+
+let SniceMusicPlayer = (() => {
+    let _classDecorators = [element('snice-music-player')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _tracks_decorators;
+    let _tracks_initializers = [];
+    let _tracks_extraInitializers = [];
+    let _currentTrackIndex_decorators;
+    let _currentTrackIndex_initializers = [];
+    let _currentTrackIndex_extraInitializers = [];
+    let _currentTrack_decorators;
+    let _currentTrack_initializers = [];
+    let _currentTrack_extraInitializers = [];
+    let _volume_decorators;
+    let _volume_initializers = [];
+    let _volume_extraInitializers = [];
+    let _muted_decorators;
+    let _muted_initializers = [];
+    let _muted_extraInitializers = [];
+    let _shuffle_decorators;
+    let _shuffle_initializers = [];
+    let _shuffle_extraInitializers = [];
+    let _repeat_decorators;
+    let _repeat_initializers = [];
+    let _repeat_extraInitializers = [];
+    let _state_decorators;
+    let _state_initializers = [];
+    let _state_extraInitializers = [];
+    let _autoplay_decorators;
+    let _autoplay_initializers = [];
+    let _autoplay_extraInitializers = [];
+    let _showPlaylist_decorators;
+    let _showPlaylist_initializers = [];
+    let _showPlaylist_extraInitializers = [];
+    let _showControls_decorators;
+    let _showControls_initializers = [];
+    let _showControls_extraInitializers = [];
+    let _showVolume_decorators;
+    let _showVolume_initializers = [];
+    let _showVolume_extraInitializers = [];
+    let _showArtwork_decorators;
+    let _showArtwork_initializers = [];
+    let _showArtwork_extraInitializers = [];
+    let _showTrackInfo_decorators;
+    let _showTrackInfo_initializers = [];
+    let _showTrackInfo_extraInitializers = [];
+    let _compact_decorators;
+    let _compact_initializers = [];
+    let _compact_extraInitializers = [];
+    let _showVolumeSlider_decorators;
+    let _showVolumeSlider_initializers = [];
+    let _showVolumeSlider_extraInitializers = [];
+    let _progressElement_decorators;
+    let _progressElement_initializers = [];
+    let _progressElement_extraInitializers = [];
+    let _volumeSlider_decorators;
+    let _volumeSlider_initializers = [];
+    let _volumeSlider_extraInitializers = [];
+    let _componentStyles_decorators;
+    let _init_decorators;
+    let _cleanup_decorators;
+    let _handleTracksChange_decorators;
+    let _handleCurrentTrackChange_decorators;
+    let _handleVolumeChange_decorators;
+    let _handleMutedChange_decorators;
+    let _renderPlayer_decorators;
+    let _emitPlay_decorators;
+    let _emitPause_decorators;
+    let _emitStop_decorators;
+    let _emitTrackChange_decorators;
+    let _emitTrackEnded_decorators;
+    let _emitSeek_decorators;
+    let _emitVolumeChange_decorators;
+    let _emitShuffleChange_decorators;
+    let _emitRepeatChange_decorators;
+    let _emitError_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _tracks_decorators = [property({ type: Array })];
+            _currentTrackIndex_decorators = [property({ type: Number, attribute: 'current-track-index' })];
+            _currentTrack_decorators = [property({ type: String, attribute: 'current-track' })];
+            _volume_decorators = [property({ type: Number })];
+            _muted_decorators = [property({ type: Boolean })];
+            _shuffle_decorators = [property({ type: Boolean })];
+            _repeat_decorators = [property({ type: String })];
+            _state_decorators = [property({ type: String })];
+            _autoplay_decorators = [property({ type: Boolean })];
+            _showPlaylist_decorators = [property({ type: Boolean, attribute: 'show-playlist' })];
+            _showControls_decorators = [property({ type: Boolean, attribute: 'show-controls' })];
+            _showVolume_decorators = [property({ type: Boolean, attribute: 'show-volume' })];
+            _showArtwork_decorators = [property({ type: Boolean, attribute: 'show-artwork' })];
+            _showTrackInfo_decorators = [property({ type: Boolean, attribute: 'show-track-info' })];
+            _compact_decorators = [property({ type: Boolean })];
+            _showVolumeSlider_decorators = [property({ type: Boolean, attribute: 'show-volume-slider' })];
+            _progressElement_decorators = [query('.player-progress')];
+            _volumeSlider_decorators = [query('.player-volume-slider')];
+            _componentStyles_decorators = [styles()];
+            _init_decorators = [ready()];
+            _cleanup_decorators = [dispose()];
+            _handleTracksChange_decorators = [watch('tracks')];
+            _handleCurrentTrackChange_decorators = [watch('currentTrack')];
+            _handleVolumeChange_decorators = [watch('volume')];
+            _handleMutedChange_decorators = [watch('muted')];
+            _renderPlayer_decorators = [render()];
+            _emitPlay_decorators = [dispatch('@snice/player-play', { bubbles: true, composed: true })];
+            _emitPause_decorators = [dispatch('@snice/player-pause', { bubbles: true, composed: true })];
+            _emitStop_decorators = [dispatch('@snice/player-stop', { bubbles: true, composed: true })];
+            _emitTrackChange_decorators = [dispatch('@snice/player-track-change', { bubbles: true, composed: true })];
+            _emitTrackEnded_decorators = [dispatch('@snice/player-track-ended', { bubbles: true, composed: true })];
+            _emitSeek_decorators = [dispatch('@snice/player-seek', { bubbles: true, composed: true })];
+            _emitVolumeChange_decorators = [dispatch('@snice/player-volume-change', { bubbles: true, composed: true })];
+            _emitShuffleChange_decorators = [dispatch('@snice/player-shuffle-change', { bubbles: true, composed: true })];
+            _emitRepeatChange_decorators = [dispatch('@snice/player-repeat-change', { bubbles: true, composed: true })];
+            _emitError_decorators = [dispatch('@snice/player-error', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleTracksChange_decorators, { kind: "method", name: "handleTracksChange", static: false, private: false, access: { has: obj => "handleTracksChange" in obj, get: obj => obj.handleTracksChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleCurrentTrackChange_decorators, { kind: "method", name: "handleCurrentTrackChange", static: false, private: false, access: { has: obj => "handleCurrentTrackChange" in obj, get: obj => obj.handleCurrentTrackChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleVolumeChange_decorators, { kind: "method", name: "handleVolumeChange", static: false, private: false, access: { has: obj => "handleVolumeChange" in obj, get: obj => obj.handleVolumeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMutedChange_decorators, { kind: "method", name: "handleMutedChange", static: false, private: false, access: { has: obj => "handleMutedChange" in obj, get: obj => obj.handleMutedChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderPlayer_decorators, { kind: "method", name: "renderPlayer", static: false, private: false, access: { has: obj => "renderPlayer" in obj, get: obj => obj.renderPlayer }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitPlay_decorators, { kind: "method", name: "emitPlay", static: false, private: false, access: { has: obj => "emitPlay" in obj, get: obj => obj.emitPlay }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitPause_decorators, { kind: "method", name: "emitPause", static: false, private: false, access: { has: obj => "emitPause" in obj, get: obj => obj.emitPause }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitStop_decorators, { kind: "method", name: "emitStop", static: false, private: false, access: { has: obj => "emitStop" in obj, get: obj => obj.emitStop }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitTrackChange_decorators, { kind: "method", name: "emitTrackChange", static: false, private: false, access: { has: obj => "emitTrackChange" in obj, get: obj => obj.emitTrackChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitTrackEnded_decorators, { kind: "method", name: "emitTrackEnded", static: false, private: false, access: { has: obj => "emitTrackEnded" in obj, get: obj => obj.emitTrackEnded }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitSeek_decorators, { kind: "method", name: "emitSeek", static: false, private: false, access: { has: obj => "emitSeek" in obj, get: obj => obj.emitSeek }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitVolumeChange_decorators, { kind: "method", name: "emitVolumeChange", static: false, private: false, access: { has: obj => "emitVolumeChange" in obj, get: obj => obj.emitVolumeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitShuffleChange_decorators, { kind: "method", name: "emitShuffleChange", static: false, private: false, access: { has: obj => "emitShuffleChange" in obj, get: obj => obj.emitShuffleChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitRepeatChange_decorators, { kind: "method", name: "emitRepeatChange", static: false, private: false, access: { has: obj => "emitRepeatChange" in obj, get: obj => obj.emitRepeatChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitError_decorators, { kind: "method", name: "emitError", static: false, private: false, access: { has: obj => "emitError" in obj, get: obj => obj.emitError }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _tracks_decorators, { kind: "field", name: "tracks", static: false, private: false, access: { has: obj => "tracks" in obj, get: obj => obj.tracks, set: (obj, value) => { obj.tracks = value; } }, metadata: _metadata }, _tracks_initializers, _tracks_extraInitializers);
+            __esDecorate(null, null, _currentTrackIndex_decorators, { kind: "field", name: "currentTrackIndex", static: false, private: false, access: { has: obj => "currentTrackIndex" in obj, get: obj => obj.currentTrackIndex, set: (obj, value) => { obj.currentTrackIndex = value; } }, metadata: _metadata }, _currentTrackIndex_initializers, _currentTrackIndex_extraInitializers);
+            __esDecorate(null, null, _currentTrack_decorators, { kind: "field", name: "currentTrack", static: false, private: false, access: { has: obj => "currentTrack" in obj, get: obj => obj.currentTrack, set: (obj, value) => { obj.currentTrack = value; } }, metadata: _metadata }, _currentTrack_initializers, _currentTrack_extraInitializers);
+            __esDecorate(null, null, _volume_decorators, { kind: "field", name: "volume", static: false, private: false, access: { has: obj => "volume" in obj, get: obj => obj.volume, set: (obj, value) => { obj.volume = value; } }, metadata: _metadata }, _volume_initializers, _volume_extraInitializers);
+            __esDecorate(null, null, _muted_decorators, { kind: "field", name: "muted", static: false, private: false, access: { has: obj => "muted" in obj, get: obj => obj.muted, set: (obj, value) => { obj.muted = value; } }, metadata: _metadata }, _muted_initializers, _muted_extraInitializers);
+            __esDecorate(null, null, _shuffle_decorators, { kind: "field", name: "shuffle", static: false, private: false, access: { has: obj => "shuffle" in obj, get: obj => obj.shuffle, set: (obj, value) => { obj.shuffle = value; } }, metadata: _metadata }, _shuffle_initializers, _shuffle_extraInitializers);
+            __esDecorate(null, null, _repeat_decorators, { kind: "field", name: "repeat", static: false, private: false, access: { has: obj => "repeat" in obj, get: obj => obj.repeat, set: (obj, value) => { obj.repeat = value; } }, metadata: _metadata }, _repeat_initializers, _repeat_extraInitializers);
+            __esDecorate(null, null, _state_decorators, { kind: "field", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
+            __esDecorate(null, null, _autoplay_decorators, { kind: "field", name: "autoplay", static: false, private: false, access: { has: obj => "autoplay" in obj, get: obj => obj.autoplay, set: (obj, value) => { obj.autoplay = value; } }, metadata: _metadata }, _autoplay_initializers, _autoplay_extraInitializers);
+            __esDecorate(null, null, _showPlaylist_decorators, { kind: "field", name: "showPlaylist", static: false, private: false, access: { has: obj => "showPlaylist" in obj, get: obj => obj.showPlaylist, set: (obj, value) => { obj.showPlaylist = value; } }, metadata: _metadata }, _showPlaylist_initializers, _showPlaylist_extraInitializers);
+            __esDecorate(null, null, _showControls_decorators, { kind: "field", name: "showControls", static: false, private: false, access: { has: obj => "showControls" in obj, get: obj => obj.showControls, set: (obj, value) => { obj.showControls = value; } }, metadata: _metadata }, _showControls_initializers, _showControls_extraInitializers);
+            __esDecorate(null, null, _showVolume_decorators, { kind: "field", name: "showVolume", static: false, private: false, access: { has: obj => "showVolume" in obj, get: obj => obj.showVolume, set: (obj, value) => { obj.showVolume = value; } }, metadata: _metadata }, _showVolume_initializers, _showVolume_extraInitializers);
+            __esDecorate(null, null, _showArtwork_decorators, { kind: "field", name: "showArtwork", static: false, private: false, access: { has: obj => "showArtwork" in obj, get: obj => obj.showArtwork, set: (obj, value) => { obj.showArtwork = value; } }, metadata: _metadata }, _showArtwork_initializers, _showArtwork_extraInitializers);
+            __esDecorate(null, null, _showTrackInfo_decorators, { kind: "field", name: "showTrackInfo", static: false, private: false, access: { has: obj => "showTrackInfo" in obj, get: obj => obj.showTrackInfo, set: (obj, value) => { obj.showTrackInfo = value; } }, metadata: _metadata }, _showTrackInfo_initializers, _showTrackInfo_extraInitializers);
+            __esDecorate(null, null, _compact_decorators, { kind: "field", name: "compact", static: false, private: false, access: { has: obj => "compact" in obj, get: obj => obj.compact, set: (obj, value) => { obj.compact = value; } }, metadata: _metadata }, _compact_initializers, _compact_extraInitializers);
+            __esDecorate(null, null, _showVolumeSlider_decorators, { kind: "field", name: "showVolumeSlider", static: false, private: false, access: { has: obj => "showVolumeSlider" in obj, get: obj => obj.showVolumeSlider, set: (obj, value) => { obj.showVolumeSlider = value; } }, metadata: _metadata }, _showVolumeSlider_initializers, _showVolumeSlider_extraInitializers);
+            __esDecorate(null, null, _progressElement_decorators, { kind: "field", name: "progressElement", static: false, private: false, access: { has: obj => "progressElement" in obj, get: obj => obj.progressElement, set: (obj, value) => { obj.progressElement = value; } }, metadata: _metadata }, _progressElement_initializers, _progressElement_extraInitializers);
+            __esDecorate(null, null, _volumeSlider_decorators, { kind: "field", name: "volumeSlider", static: false, private: false, access: { has: obj => "volumeSlider" in obj, get: obj => obj.volumeSlider, set: (obj, value) => { obj.volumeSlider = value; } }, metadata: _metadata }, _volumeSlider_initializers, _volumeSlider_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        componentStyles() {
+            return css /*css*/ `${playerStyles}`;
+        }
+        init() {
+            this.audioElement = new Audio();
+            this.audioElement.volume = this.volume;
+            this.audioElement.muted = this.muted;
+            // Set up audio event listeners
+            this.audioElement.addEventListener('loadedmetadata', () => {
+                this.duration = this.audioElement.duration;
+                this.state = this.state === 'loading' ? 'paused' : this.state;
+            });
+            this.audioElement.addEventListener('play', () => {
+                this.state = 'playing';
+                this.startUpdateInterval();
+            });
+            this.audioElement.addEventListener('pause', () => {
+                if (!this.audioElement.ended) {
+                    this.state = 'paused';
+                }
+                this.stopUpdateInterval();
+            });
+            this.audioElement.addEventListener('ended', () => {
+                this.handleTrackEnded();
+            });
+            this.audioElement.addEventListener('error', () => {
+                this.state = 'error';
+                this.emitError(new Error('Failed to load track'));
+            });
+            this.audioElement.addEventListener('timeupdate', () => {
+                this.currentTime = this.audioElement.currentTime;
+            });
+            // Load first track if available
+            if (this.tracks.length > 0) {
+                this.loadTrack(this.currentTrackIndex);
+            }
+        }
+        cleanup() {
+            this.stop();
+            this.stopUpdateInterval();
+            if (this.audioElement) {
+                this.audioElement.pause();
+                this.audioElement.src = '';
+                this.audioElement = null;
+            }
+        }
+        handleTracksChange() {
+            if (this.tracks.length > 0 && this.currentTrackIndex >= this.tracks.length) {
+                this.currentTrackIndex = 0;
+            }
+            // Reset shuffle queue when tracks change
+            if (this.shuffle) {
+                this.shuffleQueue = [];
+            }
+            if (this.tracks.length > 0 && this.audioElement && !this.audioElement.src) {
+                this.loadTrack(this.currentTrackIndex);
+            }
+        }
+        handleCurrentTrackChange(oldVal, newVal) {
+            if (!newVal || newVal === oldVal)
+                return;
+            // Find track by ID and load it
+            const index = this.tracks.findIndex(t => t.id === newVal);
+            if (index >= 0 && index !== this.currentTrackIndex) {
+                this.loadTrack(index);
+            }
+        }
+        handleVolumeChange(oldVal, newVal) {
+            if (this.audioElement && newVal >= 0 && newVal <= 1) {
+                this.audioElement.volume = newVal;
+            }
+            // Update volume slider fill
+            if (this.volumeSlider) {
+                this.volumeSlider.style.setProperty('--volume-percent', `${newVal * 100}%`);
+            }
+        }
+        handleMutedChange(oldVal, newVal) {
+            if (this.audioElement) {
+                this.audioElement.muted = newVal;
+            }
+        }
+        renderPlayer() {
+            const currentTrack = this.getCurrentTrack();
+            const progress = this.duration > 0 ? (this.currentTime / this.duration) * 100 : 0;
+            return html /*html*/ `
+      <div class="player-container ${this.compact ? 'player-container--compact' : ''}">
+        <if ${this.showArtwork || this.showTrackInfo}>
+          <div class="player-info">
+            <if ${this.showArtwork}>
+              <div class="player-artwork">
+                <if ${currentTrack?.artwork}>
+                  <img src="${currentTrack?.artwork}" alt="${currentTrack?.title || 'Track artwork'}" />
+                </if>
+                <if ${!currentTrack?.artwork}>
+                  <div class="player-artwork-placeholder">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <circle cx="12" cy="12" r="10"></circle>
+                      <circle cx="12" cy="12" r="3"></circle>
+                    </svg>
+                  </div>
+                </if>
+              </div>
+            </if>
+
+            <if ${this.showTrackInfo}>
+              <div class="player-track-info">
+                <div class="player-track-title">${currentTrack?.title || 'No track loaded'}</div>
+                <if ${currentTrack?.artist}>
+                  <div class="player-track-artist">${currentTrack?.artist}</div>
+                </if>
+                <if ${currentTrack?.album}>
+                  <div class="player-track-album">${currentTrack?.album}</div>
+                </if>
+              </div>
+            </if>
+          </div>
+        </if>
+
+        <if ${this.showControls}>
+          <div class="player-controls">
+            <div class="player-control-buttons">
+              <button
+                class="player-btn player-btn-shuffle ${this.shuffle ? 'active' : ''}"
+                @click=${() => this.toggleShuffle()}
+                title="Shuffle"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/>
+                </svg>
+              </button>
+
+              <button
+                class="player-btn player-btn-prev"
+                @click=${() => this.previous()}
+                title="Previous"
+                ?disabled=${this.tracks.length === 0}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
+                </svg>
+              </button>
+
+              <button
+                class="player-btn player-btn-play-pause ${this.state === 'playing' ? 'playing' : ''}"
+                @click=${() => this.state === 'playing' ? this.pause() : this.play()}
+                title="${this.state === 'playing' ? 'Pause' : 'Play'}"
+                ?disabled=${this.tracks.length === 0}
+              >
+                <if ${this.state === 'playing'}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+                    <rect x="6" y="4" width="4" height="16"></rect>
+                    <rect x="14" y="4" width="4" height="16"></rect>
+                  </svg>
+                </if>
+                <if ${this.state !== 'playing'}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M8 5v14l11-7z"/>
+                  </svg>
+                </if>
+              </button>
+
+              <button
+                class="player-btn player-btn-next"
+                @click=${() => this.next()}
+                title="Next"
+                ?disabled=${this.tracks.length === 0}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M16 18h2V6h-2zM6 18l8.5-6L6 6z"/>
+                </svg>
+              </button>
+
+              <button
+                class="player-btn player-btn-repeat ${this.repeat !== 'off' ? 'active' : ''}"
+                @click=${() => this.cycleRepeat()}
+                title="Repeat ${this.repeat}"
+              >
+                <if ${this.repeat === 'one'}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M17 1l4 4-4 4"/>
+                    <path d="M3 11V9a4 4 0 0 1 4-4h14"/>
+                    <path d="M7 23l-4-4 4-4"/>
+                    <path d="M21 13v2a4 4 0 0 1-4 4H3"/>
+                    <text x="12" y="15" font-size="8" text-anchor="middle" fill="currentColor">1</text>
+                  </svg>
+                </if>
+                <if ${this.repeat !== 'one'}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M17 1l4 4-4 4"/>
+                    <path d="M3 11V9a4 4 0 0 1 4-4h14"/>
+                    <path d="M7 23l-4-4 4-4"/>
+                    <path d="M21 13v2a4 4 0 0 1-4 4H3"/>
+                  </svg>
+                </if>
+              </button>
+            </div>
+
+            <div class="player-progress-container">
+              <span class="player-time player-time-current">${this.formatTime(this.currentTime)}</span>
+              <div class="player-progress" @click=${(e) => this.handleSeek(e)}>
+                <div class="player-progress-bar" style="width: ${progress}%"></div>
+              </div>
+              <span class="player-time player-time-duration">${this.formatTime(this.duration)}</span>
+              <if ${this.showVolume}>
+                <div class="player-volume">
+            <button
+              class="player-btn player-btn-volume"
+              @click=${() => this.toggleVolumeSlider()}
+              title="Volume"
+            >
+              <if ${this.muted || this.volume === 0}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M11 5L6 9H2v6h4l5 4V5z"/>
+                  <line x1="23" y1="9" x2="17" y2="15"/>
+                  <line x1="17" y1="9" x2="23" y2="15"/>
+                </svg>
+              </if>
+              <if ${!this.muted && this.volume > 0.5}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M11 5L6 9H2v6h4l5 4V5z"/>
+                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/>
+                </svg>
+              </if>
+              <if ${!this.muted && this.volume > 0 && this.volume <= 0.5}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M11 5L6 9H2v6h4l5 4V5z"/>
+                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
+                </svg>
+              </if>
+            </button>
+            <if ${this.showVolumeSlider}>
+              <div class="player-volume-slider-container">
+                <input
+                  class="player-volume-slider"
+                  type="range"
+                  min="0"
+                  max="1"
+                  step="0.01"
+                  .value=${this.volume.toString()}
+                  style="--volume-percent: ${this.volume * 100}%"
+                  @input=${(e) => this.handleVolumeSlider(e)}
+                />
+              </div>
+            </if>
+                </div>
+              </if>
+            </div>
+          </div>
+        </if>
+
+        <if ${this.showPlaylist && this.tracks.length > 0}>
+          <div class="player-playlist">
+            <div class="player-playlist-header">Playlist</div>
+            <div class="player-playlist-items">
+              ${this.tracks.map((track, index) => html /*html*/ `
+                <div
+                  class="player-playlist-item ${index === this.currentTrackIndex ? 'active' : ''}"
+                  @click=${() => this.loadTrack(index)}
+                  key=${track.id}
+                >
+                  <div class="player-playlist-item-number">${index + 1}</div>
+                  <if ${track.artwork}>
+                    <img class="player-playlist-item-artwork" src="${track.artwork}" alt="${track.title}" />
+                  </if>
+                  <div class="player-playlist-item-info">
+                    <div class="player-playlist-item-title">${track.title}</div>
+                    <if ${track.artist}>
+                      <div class="player-playlist-item-artist">${track.artist}</div>
+                    </if>
+                  </div>
+                  <if ${track.duration}>
+                    <div class="player-playlist-item-duration">${this.formatTime(track.duration || 0)}</div>
+                  </if>
+                </div>
+              `)}
+            </div>
+          </div>
+        </if>
+      </div>
+    `;
+        }
+        async play() {
+            if (!this.audioElement || this.tracks.length === 0) {
+                return;
+            }
+            try {
+                await this.audioElement.play();
+                this.emitPlay();
+            }
+            catch (error) {
+                this.state = 'error';
+                this.emitError(error);
+            }
+        }
+        pause() {
+            if (!this.audioElement) {
+                return;
+            }
+            this.audioElement.pause();
+            this.emitPause();
+        }
+        stop() {
+            if (!this.audioElement) {
+                return;
+            }
+            this.audioElement.pause();
+            this.audioElement.currentTime = 0;
+            this.currentTime = 0;
+            this.state = 'stopped';
+            this.emitStop();
+        }
+        next() {
+            if (this.tracks.length === 0) {
+                return;
+            }
+            let nextIndex;
+            if (this.shuffle) {
+                nextIndex = this.getNextShuffleIndex();
+            }
+            else {
+                nextIndex = this.currentTrackIndex + 1;
+                if (nextIndex >= this.tracks.length) {
+                    nextIndex = 0;
+                }
+            }
+            this.loadTrack(nextIndex);
+            if (this.state === 'playing') {
+                this.play();
+            }
+        }
+        previous() {
+            if (this.tracks.length === 0) {
+                return;
+            }
+            // If we're more than 3 seconds into the track, restart it
+            if (this.currentTime > 3) {
+                this.seek(0);
+                return;
+            }
+            let prevIndex;
+            if (this.shuffle && this.shuffleHistory.length > 0) {
+                prevIndex = this.shuffleHistory.pop();
+            }
+            else {
+                prevIndex = this.currentTrackIndex - 1;
+                if (prevIndex < 0) {
+                    prevIndex = this.tracks.length - 1;
+                }
+            }
+            this.loadTrack(prevIndex);
+            if (this.state === 'playing') {
+                this.play();
+            }
+        }
+        seek(time) {
+            if (!this.audioElement) {
+                return;
+            }
+            this.audioElement.currentTime = time;
+            this.currentTime = time;
+            this.emitSeek(time);
+        }
+        setVolume(volume) {
+            if (volume < 0 || volume > 1) {
+                throw new Error('Volume must be between 0 and 1');
+            }
+            this.volume = volume;
+            if (this.volume > 0 && this.muted) {
+                this.muted = false;
+            }
+            this.emitVolumeChange(volume);
+        }
+        toggleShuffle() {
+            this.shuffle = !this.shuffle;
+            if (!this.shuffle) {
+                this.shuffleHistory = [];
+                this.shuffleQueue = [];
+            }
+            else {
+                this.initializeShuffleQueue();
+            }
+            this.emitShuffleChange(this.shuffle);
+        }
+        setRepeat(mode) {
+            this.repeat = mode;
+            this.emitRepeatChange(mode);
+        }
+        async loadTrack(index) {
+            if (index < 0 || index >= this.tracks.length) {
+                throw new Error('Invalid track index');
+            }
+            const wasPlaying = this.state === 'playing';
+            this.state = 'loading';
+            this.currentTrackIndex = index;
+            const track = this.tracks[index];
+            this.currentTrack = track.id;
+            if (this.audioElement) {
+                this.audioElement.src = track.src;
+                this.audioElement.load();
+                this.currentTime = 0;
+                if (wasPlaying || this.autoplay) {
+                    await this.play();
+                }
+            }
+            this.emitTrackChange(track);
+        }
+        getCurrentTrack() {
+            if (this.currentTrackIndex >= 0 && this.currentTrackIndex < this.tracks.length) {
+                return this.tracks[this.currentTrackIndex];
+            }
+            return null;
+        }
+        toggleMute() {
+            this.muted = !this.muted;
+        }
+        toggleVolumeSlider() {
+            this.showVolumeSlider = !this.showVolumeSlider;
+        }
+        cycleRepeat() {
+            const modes = ['off', 'all', 'one'];
+            const currentIndex = modes.indexOf(this.repeat);
+            const nextIndex = (currentIndex + 1) % modes.length;
+            this.setRepeat(modes[nextIndex]);
+        }
+        handleSeek(e) {
+            if (!this.progressElement || this.duration === 0) {
+                return;
+            }
+            const rect = this.progressElement.getBoundingClientRect();
+            const percent = (e.clientX - rect.left) / rect.width;
+            const seekTime = percent * this.duration;
+            this.seek(seekTime);
+        }
+        handleVolumeSlider(e) {
+            const input = e.target;
+            const volume = parseFloat(input.value);
+            // Update visual immediately
+            input.style.setProperty('--volume-percent', `${volume * 100}%`);
+            this.setVolume(volume);
+        }
+        handleTrackEnded() {
+            if (this.repeat === 'one') {
+                this.seek(0);
+                this.play();
+            }
+            else if (this.repeat === 'all' || this.currentTrackIndex < this.tracks.length - 1) {
+                this.next();
+                this.play();
+            }
+            else {
+                this.state = 'stopped';
+                this.currentTime = 0;
+            }
+            this.emitTrackEnded();
+        }
+        getNextShuffleIndex() {
+            if (this.tracks.length === 1) {
+                return 0;
+            }
+            // If queue is empty, create new shuffled queue excluding current track
+            if (this.shuffleQueue.length === 0) {
+                this.initializeShuffleQueue();
+            }
+            // Pop next track from queue
+            this.shuffleHistory.push(this.currentTrackIndex);
+            return this.shuffleQueue.shift();
+        }
+        initializeShuffleQueue() {
+            // Create array of all indices except current track
+            const indices = [];
+            for (let i = 0; i < this.tracks.length; i++) {
+                if (i !== this.currentTrackIndex) {
+                    indices.push(i);
+                }
+            }
+            // Fisher-Yates shuffle
+            for (let i = indices.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [indices[i], indices[j]] = [indices[j], indices[i]];
+            }
+            this.shuffleQueue = indices;
+        }
+        startUpdateInterval() {
+            this.updateInterval = window.setInterval(() => {
+                // Progress is updated via timeupdate event
+            }, 100);
+        }
+        stopUpdateInterval() {
+            if (this.updateInterval !== null) {
+                clearInterval(this.updateInterval);
+                this.updateInterval = null;
+            }
+        }
+        formatTime(seconds) {
+            if (isNaN(seconds) || seconds === Infinity) {
+                return '0:00';
+            }
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs.toString().padStart(2, '0')}`;
+        }
+        emitPlay() {
+            return { player: this, track: this.getCurrentTrack() };
+        }
+        emitPause() {
+            return { player: this, track: this.getCurrentTrack() };
+        }
+        emitStop() {
+            return { player: this };
+        }
+        emitTrackChange(track) {
+            return { player: this, track };
+        }
+        emitTrackEnded() {
+            return { player: this, track: this.getCurrentTrack() };
+        }
+        emitSeek(time) {
+            return { player: this, time };
+        }
+        emitVolumeChange(volume) {
+            return { player: this, volume };
+        }
+        emitShuffleChange(shuffle) {
+            return { player: this, shuffle };
+        }
+        emitRepeatChange(repeat) {
+            return { player: this, repeat };
+        }
+        emitError(error) {
+            return { player: this, error };
+        }
+        constructor() {
+            super(...arguments);
+            this.tracks = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _tracks_initializers, []));
+            this.currentTrackIndex = (__runInitializers(this, _tracks_extraInitializers), __runInitializers(this, _currentTrackIndex_initializers, 0));
+            this.currentTrack = (__runInitializers(this, _currentTrackIndex_extraInitializers), __runInitializers(this, _currentTrack_initializers, ''));
+            this.currentTime = (__runInitializers(this, _currentTrack_extraInitializers), 0);
+            this.duration = 0;
+            this.volume = __runInitializers(this, _volume_initializers, 1);
+            this.muted = (__runInitializers(this, _volume_extraInitializers), __runInitializers(this, _muted_initializers, false));
+            this.shuffle = (__runInitializers(this, _muted_extraInitializers), __runInitializers(this, _shuffle_initializers, false));
+            this.repeat = (__runInitializers(this, _shuffle_extraInitializers), __runInitializers(this, _repeat_initializers, 'off'));
+            this.state = (__runInitializers(this, _repeat_extraInitializers), __runInitializers(this, _state_initializers, 'stopped'));
+            this.autoplay = (__runInitializers(this, _state_extraInitializers), __runInitializers(this, _autoplay_initializers, false));
+            this.showPlaylist = (__runInitializers(this, _autoplay_extraInitializers), __runInitializers(this, _showPlaylist_initializers, true));
+            this.showControls = (__runInitializers(this, _showPlaylist_extraInitializers), __runInitializers(this, _showControls_initializers, true));
+            this.showVolume = (__runInitializers(this, _showControls_extraInitializers), __runInitializers(this, _showVolume_initializers, true));
+            this.showArtwork = (__runInitializers(this, _showVolume_extraInitializers), __runInitializers(this, _showArtwork_initializers, true));
+            this.showTrackInfo = (__runInitializers(this, _showArtwork_extraInitializers), __runInitializers(this, _showTrackInfo_initializers, true));
+            this.compact = (__runInitializers(this, _showTrackInfo_extraInitializers), __runInitializers(this, _compact_initializers, false));
+            this.showVolumeSlider = (__runInitializers(this, _compact_extraInitializers), __runInitializers(this, _showVolumeSlider_initializers, false));
+            this.audioElement = (__runInitializers(this, _showVolumeSlider_extraInitializers), null);
+            this.updateInterval = null;
+            this.shuffleHistory = [];
+            this.shuffleQueue = [];
+            this.progressElement = __runInitializers(this, _progressElement_initializers, void 0);
+            this.volumeSlider = (__runInitializers(this, _progressElement_extraInitializers), __runInitializers(this, _volumeSlider_initializers, void 0));
+            __runInitializers(this, _volumeSlider_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceMusicPlayer };
+//# sourceMappingURL=snice-music-player.js.map