Schnelle Vorschau in Tauri-Apps: Native macOS-QuickLook einbinden

Die Integration von macOS-QuickLook in Tauri-Apps verbessert die Benutzererfahrung erheblich. Ein Entwickler zeigt, wie sich mit wenigen Zeilen Code die native Dateivorschau direkt in die eigene Anwendung einbinden lässt – ohne Umwege über externe Programme.

Was ist QuickLook und warum ist es wichtig?

QuickLook ist das integrierte Vorschausystem von macOS, das Nutzern ermöglicht, Dateien sofort anzuzeigen, ohne sie zu öffnen. Ein einfacher Druck auf die Leertaste in Finder zeigt Bilder, PDFs, Videos oder Dokumente in einer Vorschau an. Für Dateimanager auf macOS gehört diese Funktion zum Standard – fehlt sie, wirkt die Anwendung unfertig und professionell umgesetzt sieht anders aus.

In Tauri-Anwendungen, insbesondere bei Dateimanagern, lässt sich diese native Vorschaufunktion mit minimalem Aufwand integrieren. Der Entwickler hinter dem Tool HiyokoKit demonstriert, wie dies technisch umgesetzt wird und welche Vorteile sich daraus ergeben.

QuickLook mit Rust steuern

Die Steuerung von QuickLook erfolgt über das Befehlszeilen-Tool qlmanage, das sich direkt aus Rust heraus aufrufen lässt. Der folgende Code zeigt, wie eine Vorschau für lokale Dateien implementiert wird:

use std::process::Command;

#[tauri::command]
async fn preview_file(file_path: String) -> Result<(), AppError> {
    Command::new("qlmanage")
        .args(["-p", &file_path])
        .spawn()
        .map_err(|e| AppError::Preview(e.to_string()))?;
    Ok(())
}

Der Befehl qlmanage -p öffnet ein natives QuickLook-Fenster für die angegebene Datei. Diese einfache Implementierung reicht aus, um die Vorschau lokaler Dateien zu ermöglichen. Der Entwickler betont, dass dieser Ansatz besonders für Dateimanager geeignet ist, da er das Nutzererlebnis stark verbessert – ohne zusätzliche Abhängigkeiten oder komplexe Logik.

MTP-Dateien: Herunterladen, Vorschau anzeigen, bereinigen

Bei Dateien, die auf Android-Geräten über MTP (Media Transfer Protocol) gespeichert sind, gestaltet sich die Vorschau komplexer, da sie zunächst lokal verfügbar gemacht werden müssen. Der vorgeschlagene Workflow sieht wie folgt aus:

1. Die Datei wird temporär auf den Mac heruntergeladen.

1. QuickLook wird für die temporäre Datei aufgerufen.

1. Nach einer festgelegten Zeit wird die temporäre Datei automatisch gelöscht.

Der folgende Code zeigt die Implementierung dieses Ansatzes:

#[tauri::command]
async fn preview_mtp_file(
    device_path: String,
    filename: String,
) -> Result<(), AppError> {
    // Temporäre Datei erstellen
    let temp_path = std::env::temp_dir().join(&filename);
    download_from_device(&device_path, &temp_path).await?;

    // QuickLook aufrufen
    Command::new("qlmanage")
        .args(["-p", temp_path.to_str().unwrap()])
        .spawn()?;

    // Automatische Bereinigung nach 30 Sekunden
    let temp_clone = temp_path.clone();
    tokio::spawn(async move {
        tokio::time::sleep(Duration::from_secs(30)).await;
        std::fs::remove_file(temp_clone).ok();
    });

    Ok(())
}

Der Entwickler weist darauf hin, dass die Wartezeit von 30 Sekunden bei großen Dateien wie RAW-Fotos oder Videos möglicherweise angepasst werden sollte. Alternativ könnte die Bereinigung auch an das Schließen des Vorschau-Fensters geknüpft werden, um Speicherplatz zu schonen.

Die Leertaste als Shortcut nutzen

Damit die Vorschau so natürlich wie in Finder funktioniert, sollte die Leertaste als Auslöser dienen. Die Integration in die Frontend-Logik erfolgt über einen Event-Listener:

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
        if (e.code === 'Space' && selectedFile) {
            e.preventDefault();
            invoke('preview_file', { filePath: selectedFile.path });
        }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedFile]);

Durch diese Implementierung wird das Verhalten von macOS exakt nachgebildet: Drückt der Nutzer die Leertaste auf einer ausgewählten Datei, erscheint sofort die QuickLook-Vorschau. Diese Konsistenz ist entscheidend, um die Benutzerfreundlichkeit zu gewährleisten und Frustration zu vermeiden.

Fazit: Ein kleiner Code, große Wirkung

Die Integration von QuickLook in eine Tauri-Anwendung erfordert lediglich etwa 10 Zeilen Rust-Code und 10 Zeilen TypeScript. Der Aufwand steht in keinem Verhältnis zum Nutzen: Die Anwendung wirkt dadurch deutlich professioneller und fühlt sich wie ein natives macOS-Tool an. Für Entwickler, die Dateimanager oder Anwendungen mit Dateiverwaltung für macOS erstellen, ist diese Funktion ein absolutes Muss.

Wer diese Technik ausprobieren möchte, findet im Projekt HiyokoKit eine vollständige Implementierung. Der Entwickler betont, dass solche kleinen Verbesserungen oft den entscheidenden Unterschied machen – und das bei minimalem Aufwand.