基本完成Web端的任务缩略图显示

autodotua · Jul 19, 2023 · 1e080c0 · 1e080c0
1 parent 6468423
commit 1e080c0
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 20 deletions.
diff --git a/SimpleFFmpegGUI.Core/IPipeService.cs b/SimpleFFmpegGUI.Core/IPipeService.cs
@@ -99,5 +99,8 @@ public interface IPipeService
         public void SetDefaultProcessPriority(int priority);
 
         public string GetSnapshot(string path,double seconds);
+
+        public byte[] ReadFiles(string path);
+        System.Threading.Tasks.Task TestAsync();
     }
 }
diff --git a/SimpleFFmpegGUI.Host/PipeService.cs b/SimpleFFmpegGUI.Host/PipeService.cs
@@ -271,5 +271,15 @@ public string GetSnapshot(string path, double seconds)
         {
             return MediaInfoManager.GetSnapshotAsync(path, TimeSpan.FromSeconds(seconds), "-1:480", "jpg").Result;
         }
+
+        public byte[] ReadFiles(string path)
+        {
+            return File.ReadAllBytes(path);
+        }
+
+        public async System.Threading.Tasks.Task TestAsync()
+        {
+            await System.Threading.Tasks.Task.Yield();
+        }
     }
 }
diff --git a/SimpleFFmpegGUI.Host/Program.cs b/SimpleFFmpegGUI.Host/Program.cs
@@ -58,6 +58,7 @@ public static IHostBuilder CreateHostBuilder(string pipeName)
                     .ConfigureLogging(builder =>
                     {
                         builder.AddConsole();
+                        builder.SetMinimumLevel(LogLevel.Information);
                     });
         }
 

diff --git a/SimpleFFmpegGUI.Web/src/components/StatusBar.vue b/SimpleFFmpegGUI.Web/src/components/StatusBar.vue
@@ -4,14 +4,17 @@
     <div v-if="status.hasDetail">
       <div v-if="windowWidth > 768">
         <el-row>
-          <el-col style="width: 108px">
-            <img
-              v-if="snapshotSrc != ''"
-              width="108"
-              height="64"
-              onerror="this.style.display='none'"
-              :src="snapshotSrc"
-            />
+          <el-col style="width: 108px; height: 64px">
+            <div style="background-color: #7dd07d; width: 100%; height: 100%">
+              <img
+                width="108"
+                height="64"
+                style="cursor: pointer"
+                :src="snapshotSrc"
+                v-show="snapshotSrc != ''"
+                @click="clickSnapshot"
+              />
+            </div>
           </el-col>
           <el-col style="width: calc(100% - 120px); padding-left: 12px">
             <el-row>
@@ -202,6 +205,8 @@ export default Vue.component("status-bar", {
     return {
       walkingProgress: 0,
       snapshotSrc: "",
+      lastSnapshotTime: 1e10,
+      lastSnapshotFile: "",
     };
   },
   props: ["status", "windowWidth", "isPaused"],
@@ -228,17 +233,37 @@ export default Vue.component("status-bar", {
         })
         .catch(showError);
     },
+    clickSnapshot() {
+      this.$alert(
+        '<img src="' + this.snapshotSrc + '" style="width:100%">',
+        "缩略图",
+        {
+          dangerouslyUseHTMLString: true,
+        }
+      );
+    },
     updateSnapshot() {
+      if (this.status.isPaused) {
+        return;
+      }
       if (
         this.status != null &&
         this.status.hasDetail &&
         this.status.task != null &&
-        !this.status.isPaused
+        this.windowWidth > 768
       ) {
         if (this.status.task.inputs.length >= 1) {
+          if (
+            this.status.task.inputs[0].filePath == this.lastSnapshotFile &&
+            Math.abs(this.status.time - this.lastSnapshotTime) < 1
+          ) {
+            return;
+          }
           net
             .getSnapshot(this.status.task.inputs[0].filePath, this.status.time)
             .then((r) => {
+              this.lastSnapshotFile = this.status.task.inputs[0].filePath;
+              this.lastSnapshotTime = this.status.time;
               var reader = new window.FileReader();
               reader.readAsDataURL(r.data);
               reader.onload = () => {
@@ -250,10 +275,12 @@ export default Vue.component("status-bar", {
               console.log("下载截图错误");
               console.log(r.response ? r.response.data : r);
               this.snapshotSrc = "";
+              this.lastSnapshotFile = "";
             });
         }
       } else {
         this.snapshotSrc = "";
+        this.lastSnapshotFile = "";
       }
     },
   },
@@ -264,7 +291,7 @@ export default Vue.component("status-bar", {
         this.updateSnapshot();
       }, 10 * 1000);
       setTimeout(() => {
-      this.updateSnapshot();
+        this.updateSnapshot();
       }, 1000);
       return;
     });
@@ -287,13 +314,7 @@ export default Vue.component("status-bar", {
 .unknown-progress > div > div > div {
   text-align: center;
 }
-
-/* .el-progress__text {
-  font-size: 14px !important;
+.el-message-box {
+  width: 80% !important;
 }
-
-.el-progress-bar {
-  margin-right: -60px !important;
-  padding-right: 72px !important;
-} */
 </style>
diff --git a/SimpleFFmpegGUI.WebAPI/Controllers/MediaInfoController.cs b/SimpleFFmpegGUI.WebAPI/Controllers/MediaInfoController.cs
@@ -36,7 +36,15 @@ public async Task<IActionResult> GetSnapshotAsync(string videoPath, double secon
             {
                 videoPath = await CheckAndGetInputFilePathAsync(videoPath);
                 string path = await pipeClient.InvokeAsync(p => p.GetSnapshot(videoPath, seconds));
-                return PhysicalFile(path, "image/jpeg");
+
+                if (CanAccessInputDir())
+                {
+                    return PhysicalFile(path, "image/jpeg");
+                }
+                else
+                {
+                    return File(await pipeClient.InvokeAsync(p => p.ReadFiles(path)), "image/jpeg");
+                }
             }
             catch (Exception ex)
             {

diff --git a/日志.md b/日志.md
@@ -655,4 +655,8 @@
 
 ## 20230623
 
-【Core】【WPF】【Web】优化同步文件修改时间功能为任务级别参数
+【Core】【WPF】【Web】优化同步文件修改时间功能为任务级别参数
+
+## 20230718~19
+
+【Web】新增支持转码时的缩略图显示
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,6 +58,7 @@ public static IHostBuilder CreateHostBuilder(string pipeName) @@
                         .ConfigureLogging(builder =>
                         {
                             builder.AddConsole();
+                            builder.SetMinimumLevel(LogLevel.Information);
                         });
             }
@@ Expand Down @@