@eternalheart/angular-file-preview 1.6.5

package/lib/fesm2022/eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-CQwhffym-DAGw4Xy_.mjs

@@ -0,0 +1,823 @@
+import * as i0 from '@angular/core';
+import { input, inject, DestroyRef, signal, viewChild, computed, effect, untracked, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from 'lucide-angular';
+import { Play, Pause, SkipBack, SkipForward, Repeat, VolumeX, Volume1, Volume2, LucideAngularModule } from 'lucide-angular';
+import { L as LocaleService, g as getFallbackTranslator, r as r0 } from './eternalheart-angular-file-preview-eternalheart-angular-file-preview-UobTf36G.mjs';
+import { R as RendererError } from './eternalheart-angular-file-preview-eternalheart-angular-file-preview-RendererError-DtNihCIX-DtNihCIX.mjs';
+import { T as ToolbarEventEmitter } from './eternalheart-angular-file-preview-eternalheart-angular-file-preview-base.types-D5x7QPey-D5x7QPey.mjs';
+
+function createAudioPlayer() {
+    const isPlaying = signal(false);
+    const isLoading = signal(true);
+    const currentTime = signal(0);
+    const duration = signal(0);
+    const volume = signal(1);
+    const isMuted = signal(false);
+    const isLoop = signal(false);
+    const error = signal(null);
+    let audio = null;
+    let unbind = null;
+    const bind = (el) => {
+        unbind?.();
+        unbind = null;
+        audio = el;
+        if (!el)
+            return;
+        isLoading.set(true);
+        error.set(null);
+        const onTimeUpdate = () => {
+            if (!isNaN(el.currentTime))
+                currentTime.set(el.currentTime);
+        };
+        const onDurationChange = () => {
+            if (!isNaN(el.duration) && isFinite(el.duration))
+                duration.set(el.duration);
+        };
+        const onCanPlay = () => {
+            isLoading.set(false);
+            onDurationChange();
+        };
+        const onWaiting = () => isLoading.set(true);
+        const onPlaying = () => {
+            isLoading.set(false);
+            isPlaying.set(true);
+        };
+        const onPlay = () => isPlaying.set(true);
+        const onPause = () => isPlaying.set(false);
+        const onEnded = () => isPlaying.set(false);
+        const onError = () => {
+            error.set('audio.load_failed');
+            isLoading.set(false);
+        };
+        el.addEventListener('timeupdate', onTimeUpdate);
+        el.addEventListener('loadedmetadata', onDurationChange);
+        el.addEventListener('durationchange', onDurationChange);
+        el.addEventListener('canplay', onCanPlay);
+        el.addEventListener('waiting', onWaiting);
+        el.addEventListener('playing', onPlaying);
+        el.addEventListener('play', onPlay);
+        el.addEventListener('pause', onPause);
+        el.addEventListener('ended', onEnded);
+        el.addEventListener('error', onError);
+        if (el.readyState >= 3) {
+            isLoading.set(false);
+            onDurationChange();
+        }
+        unbind = () => {
+            el.removeEventListener('timeupdate', onTimeUpdate);
+            el.removeEventListener('loadedmetadata', onDurationChange);
+            el.removeEventListener('durationchange', onDurationChange);
+            el.removeEventListener('canplay', onCanPlay);
+            el.removeEventListener('waiting', onWaiting);
+            el.removeEventListener('playing', onPlaying);
+            el.removeEventListener('play', onPlay);
+            el.removeEventListener('pause', onPause);
+            el.removeEventListener('ended', onEnded);
+            el.removeEventListener('error', onError);
+        };
+    };
+    const togglePlay = () => {
+        if (!audio)
+            return;
+        if (audio.paused)
+            void audio.play();
+        else
+            audio.pause();
+    };
+    const seek = (time) => {
+        if (!audio)
+            return;
+        audio.currentTime = time;
+        currentTime.set(time);
+    };
+    const skip = (seconds) => {
+        if (!audio)
+            return;
+        audio.currentTime = Math.max(0, Math.min(audio.currentTime + seconds, audio.duration || Infinity));
+        currentTime.set(audio.currentTime);
+    };
+    const setVolume = (v) => {
+        volume.set(v);
+        if (audio)
+            audio.volume = v;
+        if (v > 0 && isMuted()) {
+            isMuted.set(false);
+            if (audio)
+                audio.muted = false;
+        }
+    };
+    const toggleMute = () => {
+        const next = !isMuted();
+        isMuted.set(next);
+        if (audio)
+            audio.muted = next;
+    };
+    const toggleLoop = () => {
+        const next = !isLoop();
+        isLoop.set(next);
+        if (audio)
+            audio.loop = next;
+    };
+    const formattedCurrent = () => r0(currentTime());
+    const formattedDuration = () => r0(duration());
+    const destroy = () => {
+        unbind?.();
+        unbind = null;
+        audio = null;
+    };
+    return {
+        isPlaying,
+        isLoading,
+        currentTime,
+        duration,
+        volume,
+        isMuted,
+        isLoop,
+        error,
+        bind,
+        togglePlay,
+        seek,
+        skip,
+        setVolume,
+        toggleMute,
+        toggleLoop,
+        formattedCurrent,
+        formattedDuration,
+        destroy,
+    };
+}
+
+class AudioRenderer {
+    constructor() {
+        this.url = input.required();
+        this.fileName = input.required();
+        this.emitter = new ToolbarEventEmitter();
+        this.locale = inject(LocaleService, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.t = this.locale?.t() ?? getFallbackTranslator();
+        this.formatTime = r0;
+        this.Math = Math;
+        this.playIcon = Play;
+        this.pauseIcon = Pause;
+        this.skipBackIcon = SkipBack;
+        this.skipForwardIcon = SkipForward;
+        this.repeatIcon = Repeat;
+        this.player = createAudioPlayer();
+        this.isPlaying = this.player.isPlaying;
+        this.isLoop = this.player.isLoop;
+        this.currentTime = this.player.currentTime;
+        this.duration = this.player.duration;
+        this.volume = this.player.volume;
+        this.isMuted = this.player.isMuted;
+        this.error = this.player.error;
+        this.togglePlay = this.player.togglePlay;
+        this.toggleMute = this.player.toggleMute;
+        this.toggleLoop = this.player.toggleLoop;
+        this.showVolume = signal(false);
+        this.isCompact = signal(false);
+        this.controlScale = signal(1);
+        this.isDragging = signal(false);
+        this.dragTime = signal(0);
+        this.containerRef = viewChild('containerRef');
+        this.volumeRef = viewChild('volumeRef');
+        this.audioEl = viewChild('audioRef');
+        this.volumeHideTimer = null;
+        this.resizeObserver = null;
+        this.bindRaf = 0;
+        this.vinylBase = 260;
+        this.vinylHeightBase = 240;
+        this.displayTime = computed(() => this.isDragging() ? this.dragTime() : this.currentTime());
+        this.progress = computed(() => this.duration() > 0 ? this.displayTime() / this.duration() : 0);
+        this.vinylScale = computed(() => (this.isCompact() ? 0.72 : 1));
+        this.finalVinylScale = computed(() => this.vinylScale() * this.controlScale());
+        this.volumeIcon = computed(() => {
+            if (this.isMuted() || this.volume() === 0)
+                return VolumeX;
+            if (this.volume() < 0.5)
+                return Volume1;
+            return Volume2;
+        });
+        this.timeRowClass = computed(() => this.isCompact()
+            ? 'afp-flex afp-justify-between afp-text-fg-tertiary afp-text-[10px] afp-mt-1.5'
+            : 'afp-flex afp-justify-between afp-text-fg-tertiary afp-text-xs afp-mt-2.5');
+        this.getToolbarGroups = () => [];
+        this.onToolbarChange = (listener) => this.emitter.subscribe(listener);
+        this.checkSize = () => {
+            const el = this.containerRef()?.nativeElement;
+            if (!el)
+                return;
+            this.isCompact.set(el.clientHeight < 580);
+            const width = el.clientWidth;
+            const baseWidth = 464;
+            const minVisualWidth = 320;
+            const minScale = minVisualWidth / baseWidth;
+            const scale = width >= baseWidth ? 1 : Math.max(minScale, width / baseWidth);
+            this.controlScale.set(scale);
+        };
+        this.handleClickOutside = (e) => {
+            const el = this.volumeRef()?.nativeElement;
+            if (el && !el.contains(e.target)) {
+                this.showVolume.set(false);
+            }
+        };
+        effect(() => {
+            this.url();
+            const el = this.audioEl()?.nativeElement ?? null;
+            untracked(() => {
+                cancelAnimationFrame(this.bindRaf);
+                this.bindRaf = requestAnimationFrame(() => {
+                    this.player.bind(el);
+                });
+            });
+        });
+        afterNextRender(() => {
+            this.checkSize();
+            const el = this.containerRef()?.nativeElement;
+            if (el) {
+                this.resizeObserver = new ResizeObserver(() => this.checkSize());
+                this.resizeObserver.observe(el);
+            }
+            document.addEventListener('mousedown', this.handleClickOutside);
+        });
+        this.destroyRef.onDestroy(() => {
+            document.removeEventListener('mousedown', this.handleClickOutside);
+            if (this.volumeHideTimer !== null)
+                clearTimeout(this.volumeHideTimer);
+            cancelAnimationFrame(this.bindRaf);
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.player.destroy();
+        });
+    }
+    skip(seconds) {
+        const dur = this.duration();
+        const next = Math.max(0, Math.min(this.currentTime() + seconds, dur || Infinity));
+        this.player.seek(next);
+    }
+    onProgressPointerDown() {
+        this.dragTime.set(this.currentTime());
+        this.isDragging.set(true);
+    }
+    onProgressInput(e) {
+        const value = parseFloat(e.target.value);
+        if (this.isDragging()) {
+            this.dragTime.set(value);
+        }
+        else {
+            this.player.seek(value);
+        }
+    }
+    onProgressPointerUp(e) {
+        const value = parseFloat(e.target.value);
+        this.player.seek(value);
+        this.isDragging.set(false);
+    }
+    onVolumeInput(e) {
+        this.player.setVolume(parseFloat(e.target.value));
+    }
+    handleVolumeEnter() {
+        if (this.volumeHideTimer !== null)
+            clearTimeout(this.volumeHideTimer);
+        this.showVolume.set(true);
+    }
+    handleVolumeLeave() {
+        this.volumeHideTimer = window.setTimeout(() => {
+            this.showVolume.set(false);
+        }, 300);
+    }
+    vinylBoxStyle() {
+        const scale = this.finalVinylScale();
+        const compact = this.isCompact();
+        const m = compact ? `${-(this.vinylHeightBase * (1 - scale)) / 2}px` : '0';
+        return `width:${this.vinylBase}px;height:${this.vinylHeightBase}px;transform:scale(${scale});transform-origin:center center;margin-top:${m};margin-bottom:${m}`;
+    }
+    glowStyle() {
+        return `width:220px;height:220px;top:18px;left:8px;background:radial-gradient(circle, rgba(234,5,96,0.16) 0%, rgba(136,34,255,0.08) 42%, transparent 70%);opacity:${this.isPlaying() ? 0.7 : 0.2};transition:opacity 0.5s`;
+    }
+    vinylStyle() {
+        const playing = this.isPlaying();
+        const shadow = playing
+            ? '0 0 36px rgba(241,7,18,0.18), 0 0 20px rgba(136,34,255,0.14), 0 8px 32px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.4)'
+            : '0 8px 32px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.4)';
+        return `width:200px;height:200px;top:28px;left:18px;background:radial-gradient(circle at center, transparent 95%, rgba(30,30,30,0.8) 95.5%, #111 97%),radial-gradient(circle at center, transparent 38%, rgba(50,50,50,0.5) 38.15%, transparent 38.4%),radial-gradient(circle at center, transparent 45%, rgba(50,50,50,0.3) 45.15%, transparent 45.4%),radial-gradient(circle at center, transparent 52%, rgba(50,50,50,0.5) 52.15%, transparent 52.4%),radial-gradient(circle at center, transparent 59%, rgba(50,50,50,0.3) 59.15%, transparent 59.4%),radial-gradient(circle at center, transparent 66%, rgba(50,50,50,0.5) 66.15%, transparent 66.4%),radial-gradient(circle at center, transparent 73%, rgba(50,50,50,0.3) 73.15%, transparent 73.4%),radial-gradient(circle at center, transparent 80%, rgba(50,50,50,0.4) 80.15%, transparent 80.4%),radial-gradient(circle at center, transparent 87%, rgba(50,50,50,0.3) 87.15%, transparent 87.4%),conic-gradient(from 0deg, #1c1c1c, #232323, #1a1a1a, #262626, #1c1c1c, #212121, #1a1a1a, #252525, #1c1c1c, #232323, #1a1a1a, #262626, #1c1c1c);box-shadow:${shadow};animation:afp-vinyl-spin 8s linear infinite;animation-play-state:${playing ? 'running' : 'paused'}`;
+    }
+    labelStyle() {
+        return 'width:34%;height:34%;top:33%;left:33%;background:radial-gradient(circle at 40% 38%, #FA31A1, #F10712, #EA0560, #8822FF);box-shadow:inset 0 1px 3px rgba(255,255,255,0.25), inset 0 -1px 3px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.3)';
+    }
+    spindleStyle() {
+        return 'width:14%;height:14%;top:43%;left:43%;background:radial-gradient(circle at 40% 40%, #333, #0d0d0d);box-shadow:inset 0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.5)';
+    }
+    tonearmStyle() {
+        return `top:-6px;right:2px;width:100px;height:120px;transform-origin:76px 16px;z-index:5;transform:rotate(${this.isPlaying() ? 16 : 0}deg);transition:transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)`;
+    }
+    panelStyle() {
+        const scale = this.controlScale();
+        const transform = scale < 1 ? `scale(${scale})` : undefined;
+        const marginBottom = scale < 1 ? `${-(1 - scale) * 100}px` : undefined;
+        return `width:448px;backdrop-filter:blur(16px)${transform ? `;transform:${transform};transform-origin:top center` : ''}${marginBottom ? `;margin-bottom:${marginBottom}` : ''}`;
+    }
+    progressFillStyle() {
+        return `width:${this.progress() * 100}%;background:var(--fp-accent-gradient);box-shadow:${this.isPlaying() ? '0 0 8px rgba(136,34,255,0.4)' : 'none'};transition:${this.isDragging() ? 'none' : 'width 0.1s linear'}`;
+    }
+    playBtnStyle() {
+        return 'background:var(--fp-accent-gradient);color:var(--fp-fg-inverse);box-shadow:0 4px 20px rgba(136,34,255,0.35)';
+    }
+    volumePopupStyle() {
+        return 'left:50%;margin-left:-27px;backdrop-filter:blur(16px)';
+    }
+    volumeFillStyle() {
+        const h = (this.isMuted() ? 0 : this.volume()) * 100;
+        return `width:3px;height:${h}%;background:var(--fp-accent-hover);transition:height 0.1s linear`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AudioRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AudioRenderer, isStandalone: true, selector: "afp-audio-renderer", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "afp-block afp-w-full afp-h-full" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }, { propertyName: "volumeRef", first: true, predicate: ["volumeRef"], descendants: true, isSignal: true }, { propertyName: "audioEl", first: true, predicate: ["audioRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (error(); as err) {
+      <afp-renderer-error [message]="t(err)" />
+    } @else {
+      <div
+        #containerRef
+        class="afp-flex afp-flex-col afp-items-center afp-justify-center afp-w-full afp-h-full afp-select-none afp-overflow-auto"
+        [class.afp-p-3]="isCompact()"
+        [class.afp-gap-3]="isCompact()"
+        [class.afp-p-6]="!isCompact()"
+        [class.afp-gap-6]="!isCompact()"
+      >
+        <div class="afp-relative afp-flex-shrink-0" [attr.style]="vinylBoxStyle()">
+          <div
+            class="afp-absolute afp-rounded-full"
+            [attr.style]="glowStyle()"
+          ></div>
+
+          <div
+            class="afp-absolute afp-rounded-full afp-overflow-hidden"
+            [attr.style]="vinylStyle()"
+          >
+            <div class="afp-absolute afp-rounded-full" [attr.style]="labelStyle()">
+              <div class="afp-absolute afp-rounded-full" [attr.style]="spindleStyle()"></div>
+            </div>
+          </div>
+
+          <div class="afp-absolute" [attr.style]="tonearmStyle()">
+            <svg width="100" height="120" viewBox="0 0 100 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="76" cy="16" r="13" fill="rgba(0,0,0,0.3)" />
+              <circle cx="76" cy="16" r="11" fill="url(#afp-baseGrad)" />
+              <circle cx="76" cy="16" r="6" fill="url(#afp-baseInnerGrad)" />
+              <circle cx="76" cy="16" r="2.5" fill="#222" stroke="#555" stroke-width="0.5" />
+              <path d="M74 22 L56 88" stroke="url(#afp-armGrad)" stroke-width="3.5" stroke-linecap="round" />
+              <rect x="50" y="86" width="12" height="7" rx="1.5" fill="url(#afp-headGrad)" />
+              <rect x="52.5" y="92" width="7" height="9" rx="1" fill="url(#afp-cartridgeGrad)" />
+              <line x1="56" y1="101" x2="56" y2="105" stroke="#bbb" stroke-width="1.2" stroke-linecap="round" />
+              <circle cx="56" cy="105.5" r="0.8" fill="#ddd" />
+
+              <defs>
+                <radialGradient id="afp-baseGrad" cx="40%" cy="35%">
+                  <stop offset="0%" stop-color="#555" />
+                  <stop offset="100%" stop-color="#1a1a1a" />
+                </radialGradient>
+                <radialGradient id="afp-baseInnerGrad" cx="40%" cy="35%">
+                  <stop offset="0%" stop-color="#666" />
+                  <stop offset="100%" stop-color="#333" />
+                </radialGradient>
+                <linearGradient id="afp-armGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#555" />
+                  <stop offset="50%" stop-color="#444" />
+                  <stop offset="100%" stop-color="#333" />
+                </linearGradient>
+                <linearGradient id="afp-headGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#555" />
+                  <stop offset="100%" stop-color="#333" />
+                </linearGradient>
+                <linearGradient id="afp-cartridgeGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#444" />
+                  <stop offset="100%" stop-color="#222" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
+        </div>
+
+        <div
+          class="afp-text-center afp-max-w-md afp-flex-shrink-0"
+          [class.afp-px-2]="isCompact()"
+          [class.afp-px-4]="!isCompact()"
+        >
+          <div
+            class="afp-font-medium afp-truncate afp-text-fg-primary"
+            [class.afp-text-sm]="isCompact()"
+            [class.afp-text-lg]="!isCompact()"
+          >
+            {{ fileName() }}
+          </div>
+        </div>
+
+        <div class="afp-w-full afp-flex afp-justify-center afp-flex-shrink-0">
+          <div
+            class="afp-rounded-2xl afp-border afp-bg-surface-1 afp-border-line-weak"
+            [class.afp-p-3]="isCompact()"
+            [class.afp-p-5]="!isCompact()"
+            [attr.style]="panelStyle()"
+          >
+            <div [class.afp-mb-3]="isCompact()" [class.afp-mb-5]="!isCompact()">
+              <div class="afp-relative afp-h-4 afp-flex afp-items-center">
+                <div class="afp-absolute afp-w-full afp-h-[5px] afp-rounded-full afp-bg-surface-2"></div>
+                <div class="afp-absolute afp-h-[5px] afp-rounded-full afp-pointer-events-none" [attr.style]="progressFillStyle()"></div>
+                <input
+                  type="range"
+                  min="0"
+                  [max]="duration() > 0 ? duration() : currentTime() || 100"
+                  step="any"
+                  [value]="displayTime()"
+                  [disabled]="duration() <= 0"
+                  [attr.aria-label]="t('audio.aria.progress')"
+                  class="audio-slider afp-absolute afp-w-full"
+                  (pointerdown)="onProgressPointerDown()"
+                  (input)="onProgressInput($event)"
+                  (pointerup)="onProgressPointerUp($event)"
+                  (pointercancel)="isDragging.set(false)"
+                />
+              </div>
+              <div [class]="timeRowClass()">
+                <span style="font-variant-numeric: tabular-nums">{{ formatTime(displayTime()) }}</span>
+                <span style="font-variant-numeric: tabular-nums">{{ duration() > 0 ? formatTime(duration()) : '--:--' }}</span>
+              </div>
+            </div>
+
+            <div
+              class="afp-flex afp-items-center afp-justify-center"
+              [class.afp-gap-2]="isCompact()"
+              [class.afp-gap-3]="!isCompact()"
+            >
+              <button
+                type="button"
+                class="afp-rounded-full afp-flex afp-items-center afp-justify-center afp-transition-colors audio-ctrl-btn afp-flex-shrink-0"
+                [class.afp-w-8]="isCompact()"
+                [class.afp-h-8]="isCompact()"
+                [class.afp-w-9]="!isCompact()"
+                [class.afp-h-9]="!isCompact()"
+                [class.afp-bg-accent-soft]="isLoop()"
+                [class.afp-text-accent]="isLoop()"
+                [class.afp-bg-surface-2]="!isLoop()"
+                [class.afp-text-fg-tertiary]="!isLoop()"
+                [attr.aria-label]="isLoop() ? t('audio.aria.loop_off') : t('audio.aria.loop_on')"
+                (click)="toggleLoop()"
+              >
+                <i-lucide [img]="repeatIcon" [class]="isCompact() ? 'afp-w-3.5 afp-h-3.5' : 'afp-w-4 afp-h-4'" />
+              </button>
+
+              <button
+                type="button"
+                class="afp-rounded-full afp-flex afp-items-center afp-justify-center afp-transition-colors audio-ctrl-btn afp-bg-surface-2 afp-text-fg-secondary afp-flex-shrink-0"
+                [class.afp-w-9]="isCompact()"
+                [class.afp-h-9]="isCompact()"
+                [class.afp-w-10]="!isCompact()"
+                [class.afp-h-10]="!isCompact()"
+                [attr.aria-label]="t('audio.aria.backward_10')"
+                (click)="skip(-10)"
+              >
+                <i-lucide [img]="skipBackIcon" [class]="isCompact() ? 'afp-w-4 afp-h-4' : 'afp-w-[18px] afp-h-[18px]'" />
+              </button>
+
+              <button
+                type="button"
+                class="afp-rounded-full afp-flex afp-items-center afp-justify-center audio-ctrl-btn afp-flex-shrink-0"
+                [class.afp-w-12]="isCompact()"
+                [class.afp-h-12]="isCompact()"
+                [class.afp-w-14]="!isCompact()"
+                [class.afp-h-14]="!isCompact()"
+                [attr.style]="playBtnStyle()"
+                [attr.aria-label]="isPlaying() ? t('audio.aria.pause') : t('audio.aria.play')"
+                (click)="togglePlay()"
+              >
+                @if (isPlaying()) {
+                  <i-lucide [img]="pauseIcon" [class]="isCompact() ? 'afp-w-5 afp-h-5' : 'afp-w-6 afp-h-6'" />
+                } @else {
+                  <i-lucide [img]="playIcon" [class]="isCompact() ? 'afp-w-5 afp-h-5 afp-ml-0.5' : 'afp-w-6 afp-h-6 afp-ml-0.5'" />
+                }
+              </button>
+
+              <button
+                type="button"
+                class="afp-rounded-full afp-flex afp-items-center afp-justify-center afp-transition-colors audio-ctrl-btn afp-bg-surface-2 afp-text-fg-secondary afp-flex-shrink-0"
+                [class.afp-w-9]="isCompact()"
+                [class.afp-h-9]="isCompact()"
+                [class.afp-w-10]="!isCompact()"
+                [class.afp-h-10]="!isCompact()"
+                [attr.aria-label]="t('audio.aria.forward_10')"
+                (click)="skip(10)"
+              >
+                <i-lucide [img]="skipForwardIcon" [class]="isCompact() ? 'afp-w-4 afp-h-4' : 'afp-w-[18px] afp-h-[18px]'" />
+              </button>
+
+              <div
+                #volumeRef
+                class="afp-relative"
+                (mouseenter)="handleVolumeEnter()"
+                (mouseleave)="handleVolumeLeave()"
+              >
+                <button
+                  type="button"
+                  class="afp-rounded-full afp-flex afp-items-center afp-justify-center afp-transition-colors audio-ctrl-btn afp-flex-shrink-0"
+                  [class.afp-w-8]="isCompact()"
+                  [class.afp-h-8]="isCompact()"
+                  [class.afp-w-9]="!isCompact()"
+                  [class.afp-h-9]="!isCompact()"
+                  [class.afp-bg-accent-soft]="showVolume()"
+                  [class.afp-text-accent]="showVolume()"
+                  [class.afp-bg-surface-2]="!showVolume()"
+                  [class.afp-text-fg-secondary]="!showVolume()"
+                  [attr.aria-label]="isMuted() ? t('audio.aria.unmute') : t('audio.aria.mute')"
+                  (click)="toggleMute()"
+                >
+                  <i-lucide [img]="volumeIcon()" [class]="isCompact() ? 'afp-w-3.5 afp-h-3.5' : 'afp-w-4 afp-h-4'" />
+                </button>
+
+                @if (showVolume()) {
+                  <div
+                    class="afp-absolute afp-bottom-full afp-mb-2 afp-rounded-xl afp-p-3 afp-border afp-bg-surface-3 afp-border-line afp-volume-popup"
+                    [attr.style]="volumePopupStyle()"
+                    (mouseenter)="handleVolumeEnter()"
+                    (mouseleave)="handleVolumeLeave()"
+                  >
+                    <div class="afp-flex afp-flex-col afp-items-center afp-gap-2" style="height: 100px">
+                      <div class="afp-relative afp-flex afp-items-center afp-justify-center" style="width: 24px; height: 80px">
+                        <div class="afp-absolute afp-rounded-full afp-bg-surface-2" style="width: 3px; height: 100%"></div>
+                        <div
+                          class="afp-absolute afp-bottom-0 afp-rounded-full afp-pointer-events-none"
+                          [attr.style]="volumeFillStyle()"
+                        ></div>
+                        <input
+                          type="range"
+                          min="0"
+                          max="1"
+                          step="0.01"
+                          [value]="isMuted() ? 0 : volume()"
+                          [attr.aria-label]="t('audio.aria.volume')"
+                          class="volume-slider-vertical afp-absolute"
+                          style="width: 80px; height: 24px; transform: rotate(-90deg); transform-origin: center center"
+                          (input)="onVolumeInput($event)"
+                        />
+                      </div>
+                      <span class="afp-text-[10px] afp-tabular-nums afp-text-fg-tertiary">
+                        {{ Math.round((isMuted() ? 0 : volume()) * 100) }}
+                      </span>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <audio #audioRef [src]="url()" class="afp-hidden"></audio>
+      </div>
+    }
+  `, isInline: true, styles: [".audio-ctrl-btn{border:0;cursor:pointer}.afp-volume-popup{animation:afp-fade-in .2s ease}@keyframes afp-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: RendererError, selector: "afp-renderer-error", inputs: ["message", "detail", "showIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AudioRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'afp-audio-renderer', standalone: true, imports: [LucideAngularModule, RendererError], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'afp-block afp-w-full afp-h-full' }, template: `
+    @if (error(); as err) {
+      <afp-renderer-error [message]="t(err)" />
+    } @else {
+      <div
+        #containerRef
+        class="afp-flex afp-flex-col afp-items-center afp-justify-center afp-w-full afp-h-full afp-select-none afp-overflow-auto"
+        [class.afp-p-3]="isCompact()"
+        [class.afp-gap-3]="isCompact()"
+        [class.afp-p-6]="!isCompact()"
+        [class.afp-gap-6]="!isCompact()"
+      >
+        <div class="afp-relative afp-flex-shrink-0" [attr.style]="vinylBoxStyle()">
+          <div
+            class="afp-absolute afp-rounded-full"
+            [attr.style]="glowStyle()"
+          ></div>
+
+          <div
+            class="afp-absolute afp-rounded-full afp-overflow-hidden"
+            [attr.style]="vinylStyle()"
+          >
+            <div class="afp-absolute afp-rounded-full" [attr.style]="labelStyle()">
+              <div class="afp-absolute afp-rounded-full" [attr.style]="spindleStyle()"></div>
+            </div>
+          </div>
+
+          <div class="afp-absolute" [attr.style]="tonearmStyle()">
+            <svg width="100" height="120" viewBox="0 0 100 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="76" cy="16" r="13" fill="rgba(0,0,0,0.3)" />
+              <circle cx="76" cy="16" r="11" fill="url(#afp-baseGrad)" />
+              <circle cx="76" cy="16" r="6" fill="url(#afp-baseInnerGrad)" />
+              <circle cx="76" cy="16" r="2.5" fill="#222" stroke="#555" stroke-width="0.5" />
+              <path d="M74 22 L56 88" stroke="url(#afp-armGrad)" stroke-width="3.5" stroke-linecap="round" />
+              <rect x="50" y="86" width="12" height="7" rx="1.5" fill="url(#afp-headGrad)" />
+              <rect x="52.5" y="92" width="7" height="9" rx="1" fill="url(#afp-cartridgeGrad)" />
+              <line x1="56" y1="101" x2="56" y2="105" stroke="#bbb" stroke-width="1.2" stroke-linecap="round" />
+              <circle cx="56" cy="105.5" r="0.8" fill="#ddd" />
+
+              <defs>
+                <radialGradient id="afp-baseGrad" cx="40%" cy="35%">
+                  <stop offset="0%" stop-color="#555" />
+                  <stop offset="100%" stop-color="#1a1a1a" />
+                </radialGradient>
+                <radialGradient id="afp-baseInnerGrad" cx="40%" cy="35%">
+                  <stop offset="0%" stop-color="#666" />
+                  <stop offset="100%" stop-color="#333" />
+                </radialGradient>
+                <linearGradient id="afp-armGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#555" />
+                  <stop offset="50%" stop-color="#444" />
+                  <stop offset="100%" stop-color="#333" />
+                </linearGradient>
+                <linearGradient id="afp-headGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#555" />
+                  <stop offset="100%" stop-color="#333" />
+                </linearGradient>
+                <linearGradient id="afp-cartridgeGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#444" />
+                  <stop offset="100%" stop-color="#222" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
+        </div>
+
+        <div
+          class="afp-text-center afp-max-w-md afp-flex-shrink-0"
+          [class.afp-px-2]="isCompact()"
+          [class.afp-px-4]="!isCompact()"
+        >
+          <div
+            class="afp-font-medium afp-truncate afp-text-fg-primary"
+            [class.afp-text-sm]="isCompact()"
+            [class.afp-text-lg]="!isCompact()"
+          >
+            {{ fileName() }}
+          </div>
+        </div>
+
+        <div class="afp-w-full afp-flex afp-justify-center afp-flex-shrink-0">
+          <div
+            class="afp-rounded-2xl afp-border afp-bg-surface-1 afp-border-line-weak"
+            [class.afp-p-3]="isCompact()"
+            [class.afp-p-5]="!isCompact()"
+            [attr.style]="panelStyle()"
+          >
+            <div [class.afp-mb-3]="isCompact()" [class.afp-mb-5]="!isCompact()">
+              <div class="afp-relative afp-h-4 afp-flex afp-items-center">
+                <div class="afp-absolute afp-w-full afp-h-[5px] afp-rounded-full afp-bg-surface-2"></div>
+                <div class="afp-absolute afp-h-[5px] afp-rounded-full afp-pointer-events-none" [attr.style]="progressFillStyle()"></div>
+                <input
+                  type="range"
+                  min="0"
+                  [max]="duration() > 0 ? duration() : currentTime() || 100"
+                  step="any"
+                  [value]="displayTime()"
+                  [disabled]="duration() <= 0"
+                  [attr.aria-label]="t('audio.aria.progress')"
+                  class="audio-slider afp-absolute afp-w-full"
+                  (pointerdown)="onProgressPointerDown()"
+                  (input)="onProgressInput($event)"
+                  (pointerup)="onProgressPointerUp($event)"
+                  (pointercancel)="isDragging.set(false)"
+                />
+              </div>
+              <div [class]="timeRowClass()">
+                <span style="font-variant-numeric: tabular-nums">{{ formatTime(displayTime()) }}</span>
+                <span style="font-variant-numeric: tabular-nums">{{ duration() > 0 ? formatTime(duration()) : '--:--' }}</span>
+              </div>
+            </div>
+
+            <div
+              class="afp-flex afp-items-center afp-justify-center"
+              [class.afp-gap-2]="isCompact()"
+              [class.afp-gap-3]="!isCompact()"
+            >
+              <button
+                type="button"
+                class="afp-rounded-full afp-flex afp-items-center afp-justify-center afp-transition-colors audio-ctrl-btn afp-flex-shrink-0"
+                [class.afp-w-8]="isCompact()"
+                [class.afp-h-8]="isCompact()"
+                [class.afp-w-9]="!isCompact()"
+                [class.afp-h-9]="!isCompact()"
+                [class.afp-bg-accent-soft]="isLoop()"
+                [class.afp-text-accent]="isLoop()"
+                [class.afp-bg-surface-2]="!isLoop()"
+                [class.afp-text-fg-tertiary]="!isLoop()"
+                [attr.aria-label]="isLoop() ? t('audio.aria.loop_off') : t('audio.aria.loop_on')"
+                (click)="toggleLoop()"
+              >
+                <i-lucide [img]="repeatIcon" [class]="isCompact() ? 'afp-w-3.5 afp-h-3.5' : 'afp-w-4 afp-h-4'" />
+              </button>
+
+              <button
+                type="button"
+                class="afp-rounded-full afp-flex afp-items-center afp-justify-center afp-transition-colors audio-ctrl-btn afp-bg-surface-2 afp-text-fg-secondary afp-flex-shrink-0"
+                [class.afp-w-9]="isCompact()"
+                [class.afp-h-9]="isCompact()"
+                [class.afp-w-10]="!isCompact()"
+                [class.afp-h-10]="!isCompact()"
+                [attr.aria-label]="t('audio.aria.backward_10')"
+                (click)="skip(-10)"
+              >
+                <i-lucide [img]="skipBackIcon" [class]="isCompact() ? 'afp-w-4 afp-h-4' : 'afp-w-[18px] afp-h-[18px]'" />
+              </button>
+
+              <button
+                type="button"
+                class="afp-rounded-full afp-flex afp-items-center afp-justify-center audio-ctrl-btn afp-flex-shrink-0"
+                [class.afp-w-12]="isCompact()"
+                [class.afp-h-12]="isCompact()"
+                [class.afp-w-14]="!isCompact()"
+                [class.afp-h-14]="!isCompact()"
+                [attr.style]="playBtnStyle()"
+                [attr.aria-label]="isPlaying() ? t('audio.aria.pause') : t('audio.aria.play')"
+                (click)="togglePlay()"
+              >
+                @if (isPlaying()) {
+                  <i-lucide [img]="pauseIcon" [class]="isCompact() ? 'afp-w-5 afp-h-5' : 'afp-w-6 afp-h-6'" />
+                } @else {
+                  <i-lucide [img]="playIcon" [class]="isCompact() ? 'afp-w-5 afp-h-5 afp-ml-0.5' : 'afp-w-6 afp-h-6 afp-ml-0.5'" />
+                }
+              </button>
+
+              <button
+                type="button"
+                class="afp-rounded-full afp-flex afp-items-center afp-justify-center afp-transition-colors audio-ctrl-btn afp-bg-surface-2 afp-text-fg-secondary afp-flex-shrink-0"
+                [class.afp-w-9]="isCompact()"
+                [class.afp-h-9]="isCompact()"
+                [class.afp-w-10]="!isCompact()"
+                [class.afp-h-10]="!isCompact()"
+                [attr.aria-label]="t('audio.aria.forward_10')"
+                (click)="skip(10)"
+              >
+                <i-lucide [img]="skipForwardIcon" [class]="isCompact() ? 'afp-w-4 afp-h-4' : 'afp-w-[18px] afp-h-[18px]'" />
+              </button>
+
+              <div
+                #volumeRef
+                class="afp-relative"
+                (mouseenter)="handleVolumeEnter()"
+                (mouseleave)="handleVolumeLeave()"
+              >
+                <button
+                  type="button"
+                  class="afp-rounded-full afp-flex afp-items-center afp-justify-center afp-transition-colors audio-ctrl-btn afp-flex-shrink-0"
+                  [class.afp-w-8]="isCompact()"
+                  [class.afp-h-8]="isCompact()"
+                  [class.afp-w-9]="!isCompact()"
+                  [class.afp-h-9]="!isCompact()"
+                  [class.afp-bg-accent-soft]="showVolume()"
+                  [class.afp-text-accent]="showVolume()"
+                  [class.afp-bg-surface-2]="!showVolume()"
+                  [class.afp-text-fg-secondary]="!showVolume()"
+                  [attr.aria-label]="isMuted() ? t('audio.aria.unmute') : t('audio.aria.mute')"
+                  (click)="toggleMute()"
+                >
+                  <i-lucide [img]="volumeIcon()" [class]="isCompact() ? 'afp-w-3.5 afp-h-3.5' : 'afp-w-4 afp-h-4'" />
+                </button>
+
+                @if (showVolume()) {
+                  <div
+                    class="afp-absolute afp-bottom-full afp-mb-2 afp-rounded-xl afp-p-3 afp-border afp-bg-surface-3 afp-border-line afp-volume-popup"
+                    [attr.style]="volumePopupStyle()"
+                    (mouseenter)="handleVolumeEnter()"
+                    (mouseleave)="handleVolumeLeave()"
+                  >
+                    <div class="afp-flex afp-flex-col afp-items-center afp-gap-2" style="height: 100px">
+                      <div class="afp-relative afp-flex afp-items-center afp-justify-center" style="width: 24px; height: 80px">
+                        <div class="afp-absolute afp-rounded-full afp-bg-surface-2" style="width: 3px; height: 100%"></div>
+                        <div
+                          class="afp-absolute afp-bottom-0 afp-rounded-full afp-pointer-events-none"
+                          [attr.style]="volumeFillStyle()"
+                        ></div>
+                        <input
+                          type="range"
+                          min="0"
+                          max="1"
+                          step="0.01"
+                          [value]="isMuted() ? 0 : volume()"
+                          [attr.aria-label]="t('audio.aria.volume')"
+                          class="volume-slider-vertical afp-absolute"
+                          style="width: 80px; height: 24px; transform: rotate(-90deg); transform-origin: center center"
+                          (input)="onVolumeInput($event)"
+                        />
+                      </div>
+                      <span class="afp-text-[10px] afp-tabular-nums afp-text-fg-tertiary">
+                        {{ Math.round((isMuted() ? 0 : volume()) * 100) }}
+                      </span>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <audio #audioRef [src]="url()" class="afp-hidden"></audio>
+      </div>
+    }
+  `, styles: [".audio-ctrl-btn{border:0;cursor:pointer}.afp-volume-popup{animation:afp-fade-in .2s ease}@keyframes afp-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [] });
+
+export { AudioRenderer };
+//# sourceMappingURL=eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-CQwhffym-DAGw4Xy_.mjs.map