@eternalheart/angular-file-preview 1.6.5 → 1.6.6

package/lib/fesm2022/eternalheart-angular-file-preview-eternalheart-angular-file-preview-index-DWe1kVtU-CJlU6sOy.mjs

@@ -0,0 +1,597 @@
+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 { AudioLines, 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-RPRQhVCg.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.audioLinesIcon = AudioLines;
+        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.isDragging = signal(false);
+        this.dragTime = signal(0);
+        this.volumeRef = viewChild('volumeRef');
+        this.audioEl = viewChild('audioRef');
+        this.volumeHideTimer = null;
+        this.bindRaf = 0;
+        this.displayTime = computed(() => this.isDragging() ? this.dragTime() : this.currentTime());
+        this.progress = computed(() => this.duration() > 0 ? this.displayTime() / this.duration() : 0);
+        this.volumeIcon = computed(() => {
+            if (this.isMuted() || this.volume() === 0)
+                return VolumeX;
+            if (this.volume() < 0.5)
+                return Volume1;
+            return Volume2;
+        });
+        this.getToolbarGroups = () => [];
+        this.onToolbarChange = (listener) => this.emitter.subscribe(listener);
+        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(() => {
+            document.addEventListener('mousedown', this.handleClickOutside);
+        });
+        this.destroyRef.onDestroy(() => {
+            document.removeEventListener('mousedown', this.handleClickOutside);
+            if (this.volumeHideTimer !== null)
+                clearTimeout(this.volumeHideTimer);
+            cancelAnimationFrame(this.bindRaf);
+            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);
+    }
+    progressFillStyle() {
+        return `width:${this.progress() * 100}%;background:var(--fp-player-progress);transition:${this.isDragging() ? 'none' : 'width 0.1s linear'}`;
+    }
+    playBtnStyle() {
+        return 'background:var(--fp-player-progress);color:var(--fp-fg-inverse)';
+    }
+    volumeFillStyle() {
+        const h = (this.isMuted() ? 0 : this.volume()) * 100;
+        return `width:3px;height:${h}%;background:var(--fp-player-progress);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: "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 class="afp-flex afp-items-center afp-justify-center afp-w-full afp-h-full afp-p-4 afp-select-none afp-overflow-auto">
+        <div class="afp-w-full afp-max-w-xl afp-flex-shrink-0 afp-rounded-lg afp-border afp-border-line-weak afp-bg-surface-1 afp-p-4">
+          <div class="afp-flex afp-items-center afp-gap-3 afp-mb-4">
+            <div
+              aria-hidden="true"
+              class="afp-audio-mark afp-w-10 afp-h-10 afp-flex afp-items-center afp-justify-center afp-rounded-md afp-flex-shrink-0"
+              [class.afp-audio-mark-playing]="isPlaying()"
+            >
+              <i-lucide [img]="audioLinesIcon" class="afp-w-5 afp-h-5" />
+            </div>
+            <div class="afp-min-w-0 afp-flex-1 afp-truncate afp-text-sm afp-font-medium afp-text-fg-primary">
+              {{ fileName() }}
+            </div>
+          </div>
+
+          <div class="afp-flex afp-items-center afp-gap-3 afp-mb-4">
+            <span class="afp-w-9 afp-flex-shrink-0 afp-text-right afp-text-[11px] afp-text-fg-tertiary afp-tabular-nums">
+              {{ formatTime(displayTime()) }}
+            </span>
+            <div class="afp-relative afp-h-4 afp-flex afp-flex-1 afp-items-center">
+              <div class="afp-absolute afp-left-[6px] afp-right-[6px] afp-h-[3px] afp-rounded-full afp-bg-surface-3">
+                <div
+                  class="afp-h-full afp-rounded-full afp-pointer-events-none"
+                  [attr.style]="progressFillStyle()"
+                ></div>
+              </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>
+            <span class="afp-w-9 afp-flex-shrink-0 afp-text-[11px] afp-text-fg-tertiary afp-tabular-nums">
+              {{ duration() > 0 ? formatTime(duration()) : '--:--' }}
+            </span>
+          </div>
+
+          <div class="afp-flex afp-items-center afp-gap-1">
+            <button
+              type="button"
+              class="afp-audio-control afp-w-10 afp-h-10 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-flex-shrink-0"
+              [attr.style]="playBtnStyle()"
+              [attr.title]="isPlaying() ? t('audio.aria.pause') : t('audio.aria.play')"
+              [attr.aria-label]="isPlaying() ? t('audio.aria.pause') : t('audio.aria.play')"
+              (click)="togglePlay()"
+            >
+              @if (isPlaying()) {
+                <i-lucide [img]="pauseIcon" class="afp-w-5 afp-h-5" />
+              } @else {
+                <i-lucide [img]="playIcon" class="afp-w-5 afp-h-5 afp-ml-0.5" />
+              }
+            </button>
+
+            <button
+              type="button"
+              class="afp-audio-control afp-w-9 afp-h-9 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-transition-colors afp-text-fg-secondary hover:afp-bg-surface-3 afp-flex-shrink-0"
+              [attr.title]="t('audio.aria.backward_10')"
+              [attr.aria-label]="t('audio.aria.backward_10')"
+              (click)="skip(-10)"
+            >
+              <i-lucide [img]="skipBackIcon" class="afp-w-[18px] afp-h-[18px]" />
+            </button>
+
+            <button
+              type="button"
+              class="afp-audio-control afp-w-9 afp-h-9 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-transition-colors afp-text-fg-secondary hover:afp-bg-surface-3 afp-flex-shrink-0"
+              [attr.title]="t('audio.aria.forward_10')"
+              [attr.aria-label]="t('audio.aria.forward_10')"
+              (click)="skip(10)"
+            >
+              <i-lucide [img]="skipForwardIcon" class="afp-w-[18px] afp-h-[18px]" />
+            </button>
+
+            <div class="afp-w-px afp-h-5 afp-mx-1 afp-bg-divide"></div>
+
+            <button
+              type="button"
+              class="afp-audio-control afp-w-9 afp-h-9 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-transition-colors afp-flex-shrink-0"
+              [class.afp-bg-surface-3]="isLoop()"
+              [class.afp-text-fg-primary]="isLoop()"
+              [class.afp-text-fg-tertiary]="!isLoop()"
+              [attr.title]="isLoop() ? t('audio.aria.loop_off') : t('audio.aria.loop_on')"
+              [attr.aria-label]="isLoop() ? t('audio.aria.loop_off') : t('audio.aria.loop_on')"
+              (click)="toggleLoop()"
+            >
+              <i-lucide [img]="repeatIcon" class="afp-w-4 afp-h-4" />
+            </button>
+
+            <div class="afp-flex-1"></div>
+
+            <div
+              #volumeRef
+              class="afp-relative"
+              (mouseenter)="handleVolumeEnter()"
+              (mouseleave)="handleVolumeLeave()"
+            >
+              <button
+                type="button"
+                class="afp-audio-control afp-w-9 afp-h-9 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-transition-colors afp-flex-shrink-0"
+                [class.afp-bg-surface-3]="showVolume()"
+                [class.afp-text-fg-primary]="showVolume()"
+                [class.afp-text-fg-secondary]="!showVolume()"
+                [attr.title]="isMuted() ? t('audio.aria.unmute') : t('audio.aria.mute')"
+                [attr.aria-label]="isMuted() ? t('audio.aria.unmute') : t('audio.aria.mute')"
+                (click)="toggleMute()"
+              >
+                <i-lucide [img]="volumeIcon()" class="afp-w-4 afp-h-4" />
+              </button>
+
+              @if (showVolume()) {
+                <div
+                  class="afp-absolute afp-right-0 afp-bottom-full afp-mb-2 afp-w-[54px] afp-rounded-md afp-p-3 afp-border afp-bg-surface-toolbar afp-border-line afp-volume-popup"
+                  (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>
+
+        <audio #audioRef [src]="url()" class="afp-hidden"></audio>
+      </div>
+    }
+  `, isInline: true, styles: [".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 class="afp-flex afp-items-center afp-justify-center afp-w-full afp-h-full afp-p-4 afp-select-none afp-overflow-auto">
+        <div class="afp-w-full afp-max-w-xl afp-flex-shrink-0 afp-rounded-lg afp-border afp-border-line-weak afp-bg-surface-1 afp-p-4">
+          <div class="afp-flex afp-items-center afp-gap-3 afp-mb-4">
+            <div
+              aria-hidden="true"
+              class="afp-audio-mark afp-w-10 afp-h-10 afp-flex afp-items-center afp-justify-center afp-rounded-md afp-flex-shrink-0"
+              [class.afp-audio-mark-playing]="isPlaying()"
+            >
+              <i-lucide [img]="audioLinesIcon" class="afp-w-5 afp-h-5" />
+            </div>
+            <div class="afp-min-w-0 afp-flex-1 afp-truncate afp-text-sm afp-font-medium afp-text-fg-primary">
+              {{ fileName() }}
+            </div>
+          </div>
+
+          <div class="afp-flex afp-items-center afp-gap-3 afp-mb-4">
+            <span class="afp-w-9 afp-flex-shrink-0 afp-text-right afp-text-[11px] afp-text-fg-tertiary afp-tabular-nums">
+              {{ formatTime(displayTime()) }}
+            </span>
+            <div class="afp-relative afp-h-4 afp-flex afp-flex-1 afp-items-center">
+              <div class="afp-absolute afp-left-[6px] afp-right-[6px] afp-h-[3px] afp-rounded-full afp-bg-surface-3">
+                <div
+                  class="afp-h-full afp-rounded-full afp-pointer-events-none"
+                  [attr.style]="progressFillStyle()"
+                ></div>
+              </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>
+            <span class="afp-w-9 afp-flex-shrink-0 afp-text-[11px] afp-text-fg-tertiary afp-tabular-nums">
+              {{ duration() > 0 ? formatTime(duration()) : '--:--' }}
+            </span>
+          </div>
+
+          <div class="afp-flex afp-items-center afp-gap-1">
+            <button
+              type="button"
+              class="afp-audio-control afp-w-10 afp-h-10 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-flex-shrink-0"
+              [attr.style]="playBtnStyle()"
+              [attr.title]="isPlaying() ? t('audio.aria.pause') : t('audio.aria.play')"
+              [attr.aria-label]="isPlaying() ? t('audio.aria.pause') : t('audio.aria.play')"
+              (click)="togglePlay()"
+            >
+              @if (isPlaying()) {
+                <i-lucide [img]="pauseIcon" class="afp-w-5 afp-h-5" />
+              } @else {
+                <i-lucide [img]="playIcon" class="afp-w-5 afp-h-5 afp-ml-0.5" />
+              }
+            </button>
+
+            <button
+              type="button"
+              class="afp-audio-control afp-w-9 afp-h-9 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-transition-colors afp-text-fg-secondary hover:afp-bg-surface-3 afp-flex-shrink-0"
+              [attr.title]="t('audio.aria.backward_10')"
+              [attr.aria-label]="t('audio.aria.backward_10')"
+              (click)="skip(-10)"
+            >
+              <i-lucide [img]="skipBackIcon" class="afp-w-[18px] afp-h-[18px]" />
+            </button>
+
+            <button
+              type="button"
+              class="afp-audio-control afp-w-9 afp-h-9 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-transition-colors afp-text-fg-secondary hover:afp-bg-surface-3 afp-flex-shrink-0"
+              [attr.title]="t('audio.aria.forward_10')"
+              [attr.aria-label]="t('audio.aria.forward_10')"
+              (click)="skip(10)"
+            >
+              <i-lucide [img]="skipForwardIcon" class="afp-w-[18px] afp-h-[18px]" />
+            </button>
+
+            <div class="afp-w-px afp-h-5 afp-mx-1 afp-bg-divide"></div>
+
+            <button
+              type="button"
+              class="afp-audio-control afp-w-9 afp-h-9 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-transition-colors afp-flex-shrink-0"
+              [class.afp-bg-surface-3]="isLoop()"
+              [class.afp-text-fg-primary]="isLoop()"
+              [class.afp-text-fg-tertiary]="!isLoop()"
+              [attr.title]="isLoop() ? t('audio.aria.loop_off') : t('audio.aria.loop_on')"
+              [attr.aria-label]="isLoop() ? t('audio.aria.loop_off') : t('audio.aria.loop_on')"
+              (click)="toggleLoop()"
+            >
+              <i-lucide [img]="repeatIcon" class="afp-w-4 afp-h-4" />
+            </button>
+
+            <div class="afp-flex-1"></div>
+
+            <div
+              #volumeRef
+              class="afp-relative"
+              (mouseenter)="handleVolumeEnter()"
+              (mouseleave)="handleVolumeLeave()"
+            >
+              <button
+                type="button"
+                class="afp-audio-control afp-w-9 afp-h-9 afp-rounded-md afp-flex afp-items-center afp-justify-center afp-transition-colors afp-flex-shrink-0"
+                [class.afp-bg-surface-3]="showVolume()"
+                [class.afp-text-fg-primary]="showVolume()"
+                [class.afp-text-fg-secondary]="!showVolume()"
+                [attr.title]="isMuted() ? t('audio.aria.unmute') : t('audio.aria.mute')"
+                [attr.aria-label]="isMuted() ? t('audio.aria.unmute') : t('audio.aria.mute')"
+                (click)="toggleMute()"
+              >
+                <i-lucide [img]="volumeIcon()" class="afp-w-4 afp-h-4" />
+              </button>
+
+              @if (showVolume()) {
+                <div
+                  class="afp-absolute afp-right-0 afp-bottom-full afp-mb-2 afp-w-[54px] afp-rounded-md afp-p-3 afp-border afp-bg-surface-toolbar afp-border-line afp-volume-popup"
+                  (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>
+
+        <audio #audioRef [src]="url()" class="afp-hidden"></audio>
+      </div>
+    }
+  `, styles: [".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-DWe1kVtU-CJlU6sOy.mjs.map