Add optional title and description to video upload

app/app.go

@@ -209,6 +209,9 @@ func (a *App) uploadHandler(w http.ResponseWriter, r *http.Request) {
 		}
 		defer file.Close()
 
+		title := r.FormValue("video_title")
+		description := r.FormValue("video_description")
+
 		// TODO: Make collection user selectable from drop-down in Form
 		// XXX: Assume we can put uploaded videos into the first collection (sorted) we find
 		keys := make([]string, 0, len(a.Library.Paths))
@@ -266,6 +269,8 @@ func (a *App) uploadHandler(w http.ResponseWriter, r *http.Request) {
 			"-acodec", "aac",
 			"-strict", "-2",
 			"-loglevel", "quiet",
+			"-metadata", fmt.Sprintf("title=%s", title),
+			"-metadata", fmt.Sprintf("comment=%s", description),
 			tf.Name(),
 		); err != nil {
 			err := fmt.Errorf("error transcoding video: %w", err)
@@ -413,8 +418,8 @@ func (a *App) importHandler(w http.ResponseWriter, r *http.Request) {
 			"-acodec", "aac",
 			"-strict", "-2",
 			"-loglevel", "quiet",
-			"-metadata", fmt.Sprintf("title=\"%s\"", vid.Title),
+			"-metadata", fmt.Sprintf("title=%s", vid.Title),
-			"-metadata", fmt.Sprintf("description=\"%s\"", vid.Description),
+			"-metadata", fmt.Sprintf("comment=%s", vid.Description),
 			tf.Name(),
 		); err != nil {
 			err := fmt.Errorf("error transcoding video: %w", err)

static/theme.css

@@ -99,7 +99,7 @@ main {
     background: #282a2e;
     box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);
     overflow-x: hidden;
-    overflow-x: auto;
+    overflow-y: auto;
 }
 
 #playlist > a {
@@ -239,6 +239,18 @@ main {
 .clear_both {
     clear:both;
 }
+
+textarea {
+    border-radius:10px;
+    -moz-border-radius:10px;
+    -ms-border-radius:10px;
+    -o-border-radius:10px;
+    -webkit-border-radius:10px;
+    border:1px solid #ccc;
+    font-size:14pt;
+    padding:5px 10px;
+}
+
 input {
     border-radius:10px;
     -moz-border-radius:10px;

static/upload.js

@@ -12,6 +12,8 @@ let file = null
 
 const uploadForm = document.getElementById('upload-form')
 const videoInput = document.getElementById('video-input')
+const videoTitle = document.getElementById('video-title')
+const videoDescription = document.getElementById('video-description')
 const uploadMessageLabel = document.getElementById('upload-message')
 const uploadFileContainer = document.getElementById('upload-file')
 const uploadFilenameLabel = document.getElementById('upload-filename')
@@ -161,6 +163,8 @@ const startUploading = () => {
 
     const formData = new FormData()
     formData.append('video_file', file)
+    formData.append('video_title', videoTitle.value)
+    formData.append('video_description', videoDescription.value)
     const xhr = new XMLHttpRequest()
 
     xhr.upload.addEventListener('progress', uploadProgress, false)
@@ -236,4 +240,4 @@ const uploadAbort = () => { // upload abort
     setMessage('The upload has been canceled by the user or the browser dropped the connection.', true)
     setProgress(0)
     setUploadState(false)
-}
+}

templates/upload.html

@@ -9,6 +9,8 @@
             <span>Click to browse or drop file here</span>
           </div>
           <div class="upload-details">
+            <input id="video-title" type="text" placeholder="Optional title" />
+            <textarea id="video-description" rows="2" placeholder="Optional description"></textarea>
             <div id="upload-file" class="upload-file">
               <span id="upload-filename"></span>
               <img width="20" src="/static/close-icon.png" onclick="removeFile(event)"/>