Extract extensions from the button

2 files changed, 12 insertions, 2 deletions

diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index f151383f1..7d9443209 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -9,9 +9,10 @@
       <div class="icon icon-upload"></div>
 
       <div class="button-file">
-        <span i18n>Select the file to upload (.mp4, .webm, .ogv)</span>
+        <span i18n>Select the file to upload</span>
         <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" />
       </div>
+      <span class="button-file-extension">(.mp4, .webm, .ogv)</span>
 
       <div class="form-group form-group-channel">
         <label i18n for="first-step-channel">Channel</label>
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index de7dec65d..c0b5f3d07 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -37,8 +37,17 @@
       @include peertube-button-file(auto);
 
       min-width: 190px;
-      margin-bottom: 45px;
     }
+
+    .button-file-extension {
+      display: block;
+      font-size: 12px;
+      margin-top: 5px;
+    }
+  }
+
+  .form-group-channel {
+    margin-top: 35px;
   }
 }