From 3bc9d076ab05a349fb65ddfa955c100e2f3fe2bb Mon Sep 17 00:00:00 2001
From: srahn <srahn@uni-osnabrueck.de>
Date: Wed, 6 Sep 2023 16:50:11 +0200
Subject: [PATCH] Improve subtitleDialog

---
 .../Videos/Actions/CaptionUpload.vue          | 122 ++++++++++--------
 1 file changed, 68 insertions(+), 54 deletions(-)

diff --git a/vueapp/components/Videos/Actions/CaptionUpload.vue b/vueapp/components/Videos/Actions/CaptionUpload.vue
index a7fb5eb4f..dcfc276a9 100644
--- 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');
                     }
                 }