fix: video preview style and static server (#4324)

* fix: video preview style and static server

* fix: video preview style and static server

Author: Aaaaash

packages/express-file-server/src/node/express-file-server.contribution.ts

@@ -44,12 +44,47 @@ export class ExpressFileServerContribution implements ServerAppContribution {
           // 在允许的 contentType
           contentType
         ) {
-          ctx.set('Content-Type', contentType);
+          const range = ctx.headers.range;
+
+          if (!fs.existsSync(filePath)) {
+            ctx.status = 404;
+            ctx.body = '文件未找到';
+            return;
+          }
+
           if (this.appConfig.staticAllowOrigin) {
             ctx.set('Access-Control-Allow-Origin', this.appConfig.staticAllowOrigin);
           }
 
-          ctx.body = fs.createReadStream(filePath);
+          const stats = await fs.promises.stat(filePath);
+          const total = stats.size;
+
+          if (!range) {
+            ctx.status = 200;
+            ctx.set('Content-Type', contentType);
+            ctx.set('Content-Length', String(total));
+            ctx.body = fs.createReadStream(filePath);
+            return;
+          }
+
+          const parts = range.replace(/bytes=/, '').split('-');
+          const start = parseInt(parts[0], 10);
+          const end = parts[1] ? parseInt(parts[1], 10) : total - 1;
+
+          if (start >= total || end >= total || start > end) {
+            ctx.status = 416; // Range Not Satisfiable
+            ctx.set('Content-Range', `bytes */${total}`);
+            return;
+          }
+
+          ctx.status = 206;
+          ctx.set('Content-Range', `bytes ${start}-${end}/${total}`);
+          ctx.set('Accept-Ranges', 'bytes');
+          ctx.set('Content-Length', String(end - start + 1));
+          ctx.set('Content-Type', contentType);
+
+          const stream = fs.createReadStream(filePath, { start, end });
+          ctx.body = stream;
         } else {
           ctx.status = 403;
         }

packages/file-scheme/src/browser/preview.view.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { Disposable, useInjectable } from '@opensumi/ide-core-browser';
 import { StaticResourceService } from '@opensumi/ide-core-browser/lib/static-resource';
@@ -16,15 +16,14 @@ const useResource = (resource: IResource) => {
   };
 };
 
-export const VideoPreview: ReactEditorComponent<null> = (props) => {
+export const VideoPreview: ReactEditorComponent<null> = memo((props) => {
   const { src } = useResource(props.resource);
-
   return (
     <div className={styles.kt_video_preview}>
-      <video autoPlay controls className={styles.kt_video} src={src}></video>
+      <video playsInline controls className={styles.kt_video} src={src} />
     </div>
   );
-};
+});
 
 export const ImagePreview: ReactEditorComponent<null> = (props) => {
   const imgRef = React.useRef<HTMLImageElement>();

packages/file-scheme/src/browser/style.module.less

@@ -43,11 +43,15 @@
 
 .kt_video_preview {
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
 }
 
 .kt_video {
-  width: 100%;
-  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .error-page {