optimized a interface

sentence_api/static/admin.html

@@ -32,8 +32,8 @@
           <input id="video-file" name="file" type="file" accept="video/*" required>
         </label>
         <label>
-          <span>标题</span>
-          <input id="video-title" name="title" type="text" maxlength="200">
+          <span>标题（自动使用文件名）</span>
+          <input id="video-title" name="title" type="text" maxlength="200" placeholder="选择视频后自动填写">
         </label>
         <label>
           <span>语言</span>

sentence_api/static/admin.js

@@ -11,6 +11,8 @@ const elements = {
   uploadForm: document.querySelector("#upload-form"),
   uploadState: document.querySelector("#upload-state"),
   uploadProgress: document.querySelector("#upload-progress"),
+  videoFile: document.querySelector("#video-file"),
+  videoTitle: document.querySelector("#video-title"),
   videoRows: document.querySelector("#video-rows"),
   videoCount: document.querySelector("#video-count"),
   emptyState: document.querySelector("#empty-state"),
@@ -30,6 +32,10 @@ elements.saveKey.addEventListener("click", () => {
 elements.refresh.addEventListener("click", loadVideos);
 elements.closeDialog.addEventListener("click", () => elements.dialog.close());
 elements.uploadForm.addEventListener("submit", uploadVideo);
+elements.videoFile.addEventListener("change", () => {
+  if (!elements.videoFile.files[0]) return;
+  elements.videoTitle.value = titleFromFilename(elements.videoFile.files[0].name);
+});
 
 async function api(path, options = {}) {
   const headers = new Headers(options.headers || {});
@@ -173,6 +179,13 @@ function uploadVideo(event) {
   request.send(file);
 }
 
+function titleFromFilename(filename) {
+  const name = filename.replace(/\\/g, "/").split("/").pop() || "";
+  const dotIndex = name.lastIndexOf(".");
+  const stem = dotIndex > 0 ? name.slice(0, dotIndex) : name;
+  return stem.slice(0, 200);
+}
+
 function readXhrError(request) {
   try { return JSON.parse(request.responseText).detail || `HTTP ${request.status}`; }
   catch (_) { return `HTTP ${request.status}`; }