Improve subtitleDialog

elan-ev · Sep 6, 2023 · 3bc9d07 · 3bc9d07
1 parent 312bf95
commit 3bc9d07
Showing 1 changed file with 68 additions and 54 deletions.
diff --git a/vueapp/components/Videos/Actions/CaptionUpload.vue b/vueapp/components/Videos/Actions/CaptionUpload.vue
@@ -14,10 +14,10 @@
  >
  <template v-slot:dialogContent ref="upload-dialog">
  <form class="default" style="max-width: 50em;" ref="upload-form">
- <label v-if="config && config['server'] && config['server'].length > 1">
- <span class="required">
+ <fieldset v-if="this.config?.server && Object.keys(this.config.server).length > 1">
+ <legend>
  {{ $gettext('Server auswählen:') }}
- </span>
+ </legend>
 
  <select v-model="selectedServer" required>
  <option v-for="server in config['server']"
@@ -28,58 +28,68 @@
  </option>
 
  </select>
- </label>
-
- <div v-for="language in languages">
- <div v-if="!uploadProgress">
- <h4 class="oc--file-type">
- {{
- $gettext('Untertitel für %{ lang }', {
- lang: language.lang
- })
- }}
- </h4>
-
- <div class="oc--file-preview" v-if="files[language.flavor] && files[language.flavor].size">
- <span class="oc--file-name">
- <b>{{ $gettext('Name:') }}</b> {{ files[language.flavor].name }}
- </span>
-
- <span class="oc--file-size" v-if="files[language.flavor].size">
- <b>{{ $gettext('Größe:') }}</b> {{files[language.flavor].size }}
- </span>
- </div>
-
- <div class="oc--button-bar">
- <label v-if="files[language.flavor] && files[language.flavor].url">
- <a :href="files[language.flavor].url">
- <button class='button download' type=button>
- {{ $gettext('Herunterladen') }}
- </button>
- </a>
- </label>
-
- <label v-if="files[language.flavor]">
- <StudipButton icon="trash" @click.prevent="removeCaption(language.flavor)">
- {{ $gettext('Löschen') }}
- </StudipButton>
- </label>
-
- <label class="oc--file-upload">
- <StudipButton icon="accept" @click.prevent="chooseFiles('oc-file-' + language.lang)">
- {{ $gettext('Untertiteldatei auswählen') }}
- </StudipButton>
- <input
- type="file" class="caption_upload" :data-flavor="language.flavor"
- @change="previewFiles" :ref="'oc-file-' + language.lang"
- accept=".vtt"
- >
- </label>
- </div>
+ </fieldset>
+
+ <fieldset>
+ <legend >
+ {{ $gettext('Datei(en)') }}
+ </legend>
+
+ <p class="help" v-translate>
+ Unterstützt wird das WebVTT Format mit der Endung .vtt
+ </p>
+
+ <div v-for="language in languages">
+ <fieldset v-if="!uploadProgress">
+ <legend class="oc--file-type">
+ {{
+ $gettext('Untertitel für %{ lang }', {
+ lang: language.lang
+ })
+ }}
+ </legend>
+
+ <div class="oc--file-preview" v-if="files[language.flavor] && files[language.flavor].size">
+ <span class="oc--file-name">
+ <b>{{ $gettext('Name:') }}</b> {{ files[language.flavor].name }}
+ </span>
+
+ <span class="oc--file-size" v-if="files[language.flavor].size">
+ <b>{{ $gettext('Größe:') }}</b> {{files[language.flavor].size }}
+ </span>
+ </div>
+
+ <div class="oc--button-bar">
+ <label v-if="files[language.flavor] && files[language.flavor].url">
+ <a :href="files[language.flavor].url">
+ <button class='button download' type=button>
+ {{ $gettext('Herunterladen') }}
+ </button>
+ </a>
+ </label>
+
+ <label v-if="files[language.flavor]">
+ <StudipButton icon="trash" @click.prevent="removeCaption(language.flavor)">
+ {{ $gettext('Löschen') }}
+ </StudipButton>
+ </label>
+
+ <label class="oc--file-upload">
+ <StudipButton icon="accept" @click.prevent="chooseFiles('oc-file-' + language.lang)">
+ {{ $gettext('Untertiteldatei auswählen') }}
+ </StudipButton>
+ <input
+ type="file" class="caption_upload" :data-flavor="language.flavor"
+ @change="previewFiles" :ref="'oc-file-' + language.lang"
+ accept=".vtt"
+ >
+ </label>
+ </div>
+ </fieldset>
+
+ <ProgressBar v-if="uploadProgress && uploadProgress.flavor == language.flavor" :progress="uploadProgress.progress" />
  </div>
-
- <ProgressBar v-if="uploadProgress && uploadProgress.flavor == language.flavor" :progress="uploadProgress.progress" />
- </div>
+ </fieldset>
 
  <Error :float="true" />
 
@@ -239,6 +249,10 @@ export default {
  }
  },
  uploadDone: () => {
+ this.$store.dispatch('addMessage', {
+ type: 'success',
+ text: this.$gettext('Die Datei wurde erfolgreich hochgeladen.')
+ });
  view.$emit('done');
  }
  }