bak

src/components/ExportDialog.vue

@@ -12,6 +12,7 @@ import { downloadExampleHtml, downloadRuntime, downloadSceneExport } from '@/lib
 import { downloadSceneAsVideo, pickMimeType } from '@/lib/videoExport'
 import { downloadFromServer } from '@/lib/serverExport'
 import { Modal } from '@/components/ui'
+import { t } from '@/i18n'
 
 defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
@@ -53,7 +54,7 @@ async function exportWebm() {
   progress.value = {
     progress: 0,
     controller,
-    label: 'Rendering WebM (Browser, Realtime)…',
+    label: t('export.labelWebm'),
     error: null,
   }
   store.pause()
@@ -81,7 +82,7 @@ async function exportMp4Server() {
   progress.value = {
     progress: 0,
     controller,
-    label: 'Rendering MP4 (Server)…',
+    label: t('export.labelMp4'),
     error: null,
   }
   store.pause()
@@ -122,7 +123,7 @@ function onUpdate(v: boolean) {
 <template>
   <Modal
     :model-value="modelValue"
-    title="Export"
+    :title="t('export.title')"
     size="md"
     :dismissable="!isLocked"
     :close-on-backdrop="!isLocked"
@@ -135,9 +136,9 @@ function onUpdate(v: boolean) {
         <div class="opt-text">
           <div class="opt-title">
             animatr-runtime.js
-            <span class="badge">1× pro Seite</span>
+            <span class="badge">{{ t('export.runtimeBadge') }}</span>
           </div>
-          <div class="opt-desc">Engine — einmal einbinden, beliebig viele Szenen teilen sich die Runtime</div>
+          <div class="opt-desc">{{ t('export.runtimeDesc') }}</div>
         </div>
         <PhDownloadSimple :size="14" class="opt-arrow" />
       </button>
@@ -147,9 +148,9 @@ function onUpdate(v: boolean) {
         <div class="opt-text">
           <div class="opt-title">
             animation.js
-            <span class="badge">Szene</span>
+            <span class="badge">{{ t('export.sceneBadge') }}</span>
           </div>
-          <div class="opt-desc">Nur Szenen-Daten — benötigt geladene Runtime</div>
+          <div class="opt-desc">{{ t('export.sceneDesc') }}</div>
         </div>
         <PhDownloadSimple :size="14" class="opt-arrow" />
       </button>
@@ -157,8 +158,8 @@ function onUpdate(v: boolean) {
       <button class="opt" @click="exportHtml">
         <div class="opt-icon"><PhFileHtml :size="20" /></div>
         <div class="opt-text">
-          <div class="opt-title">Beispiel HTML</div>
-          <div class="opt-desc">Standalone HTML — Browser öffnen und fertig</div>
+          <div class="opt-title">{{ t('export.exampleTitle') }}</div>
+          <div class="opt-desc">{{ t('export.exampleDesc') }}</div>
         </div>
         <PhDownloadSimple :size="14" class="opt-arrow" />
       </button>
@@ -168,9 +169,9 @@ function onUpdate(v: boolean) {
         <div class="opt-text">
           <div class="opt-title">
             MP4 Video
-            <span class="badge accent">Server · Frame-exakt</span>
+            <span class="badge accent">{{ t('export.mp4Badge') }}</span>
           </div>
-          <div class="opt-desc">H.264, beliebige Auflösung — benötigt Render-Server</div>
+          <div class="opt-desc">{{ t('export.mp4Desc') }}</div>
         </div>
         <PhDownloadSimple :size="14" class="opt-arrow" />
       </button>
@@ -180,10 +181,10 @@ function onUpdate(v: boolean) {
         <div class="opt-text">
           <div class="opt-title">
             WebM Video
-            <span class="badge">Browser · Realtime</span>
+            <span class="badge">{{ t('export.webmBadge') }}</span>
           </div>
           <div class="opt-desc">
-            {{ videoSupported ? 'Ohne Server — Aufnahme in Echtzeit' : 'Browser unterstützt MediaRecorder nicht' }}
+            {{ videoSupported ? t('export.webmDesc') : t('export.webmNotSupported') }}
           </div>
         </div>
         <PhDownloadSimple :size="14" class="opt-arrow" />
@@ -200,15 +201,15 @@ function onUpdate(v: boolean) {
         <div class="r-bar-fill" :style="{ width: progress.progress * 100 + '%' }"></div>
       </div>
       <div class="r-actions">
-        <button class="secondary" @click="cancel">Abbrechen</button>
+        <button class="secondary" @click="cancel">{{ t('export.cancel') }}</button>
       </div>
     </div>
 
     <div v-else class="error-view">
-      <div class="error-title">Export fehlgeschlagen</div>
+      <div class="error-title">{{ t('export.failed') }}</div>
       <div class="error-msg">{{ progress.error }}</div>
       <div class="error-actions">
-        <button class="primary" @click="dismissError">Zurück</button>
+        <button class="primary" @click="dismissError">{{ t('export.back') }}</button>
       </div>
     </div>
   </Modal>