perf: add some comments

Author: ZhaoJiSen

src/hooks/useResolveFile.ts

@@ -94,10 +94,19 @@ const handleFileOnLoad = (
     let jsonFile: Record<string, unknown> | null = null;
 
     const bufferData: ArrayBuffer = e.target.result as ArrayBuffer;
-    // 注意：第二个 'binary' 参数是无效的，这里要去掉
-    const uint8Array = new Uint8Array(bufferData);
     const regExp = /\.(json|replay|cast|part)(\.mp4|\.json|\.gz)?$/;
 
+    /**
+     * MP4 类型: 
+     *    处理: 直接以 Blob → ObjectURL 作为 videoUrl
+     *    补充: ArrayBuffer 是原始二进制内存, Uint8Array 是 读取/写入这块内存的视图
+     * 
+     * gz tar 类型:
+     *    - .replay.gz 为 Gua 产生的录像,需要写入本地磁盘.同时也会存在 .replay.mp4 形式
+     *    - .cast.gz 为字符协议的录像,直接将 ArrayBuffer 转为 ObjectURL
+     *    - .part.gz 为 Gua 的分片录像,也需要直接写入磁盘
+     */
+
     /** -------------------- 处理 .tar -------------------- */
     if (fileName.includes('.tar')) {
       try {
@@ -108,6 +117,9 @@ const handleFileOnLoad = (
           const partJson: string = match?.[0] ?? '';
           const decompressFileName: string = match?.[1] ?? '';
 
+          // .part 是 rdp 的分片形式
+          // .cast 是 字符协议的
+
           // part 的 JSON：xxx.replay.json
           if (partJson === '.replay.json') {
             jsonFile = safeParseJson(extractedFile.buffer) ?? jsonFile;
@@ -178,7 +190,6 @@ const handleFileOnLoad = (
               break;
             }
             default:
-              // 其他文件跳过
               break;
           }
         }
@@ -209,8 +220,10 @@ const handleFileOnLoad = (
       switch (processName) {
         case 'replay': {
           const isGua = fileName.split('.')[2] === 'gz';
+
           if (isGua) {
             type = 'gua';
+          
             try {
               const res = await handleGuaData(
                 e.currentTarget?.result as ArrayBuffer,
@@ -275,8 +288,14 @@ const handleFileOnLoad = (
     /** -------------------- 处理 .mp4 -------------------- */
     if (fileName.includes('.mp4')) {
       type = 'mp4';
+
+      /**
+       * 完全没必要下面这种写法,可以直接替换为 const videoBlob = new Blob([e.currentTarget.result], { type: "video/mp4" });
+       * new Blob 本身就可以接收 ArrayBuffer 类型 ArrayBufferView 类型 等,而 Uint8Array 类型本身就归属于 ArrayBufferView
+       */
       const videoBuffer: Uint8Array = new Uint8Array(e.currentTarget?.result as ArrayBuffer);
       const videoBlob: Blob = new Blob([videoBuffer], { type: 'video/mp4' });
+
       videoUrl = URL.createObjectURL(videoBlob);
 
       fileStore.setVideoList({
@@ -312,13 +331,15 @@ const fileParser = (fileInfo: UploadFileInfo, eventOptions: IFileParser): Promis
 
     fileReader.readAsArrayBuffer(file);
 
+    // 读取过程
     fileReader.onprogress = (e: ProgressEvent<FileReader>) => {
       if (e.lengthComputable) {
         const percentComplete = Math.round((e.loaded / e.total) * 100);
         eventOptions.onProgress({ percent: percentComplete });
       }
     };
 
+    // 读取成功
     fileReader.onload = async (e: ProgressEvent<FileReader>) => {
       try {
         const res = await handleFileOnLoad(e, fileName, eventOptions);
@@ -332,6 +353,7 @@ const fileParser = (fileInfo: UploadFileInfo, eventOptions: IFileParser): Promis
       }
     };
 
+    // 读取失败
     fileReader.onerror = () => {
       eventOptions.onError();
       notification.error({

src/views/guaPlayer/index.vue

@@ -66,14 +66,21 @@ const playerAreaRef = ref<HTMLElement | null>(null);
 const scale = ref(0);
 const max = ref(100);
 const currentPercent = ref(0);
-const chunks = ref('');
+let chunksArr: string[] = [];
 const totalDuration = ref('00:00');
 const currentPosition = ref('00:00');
 const isPlaying = ref(false);
 const isProcessing = ref(false);
 const loadingBuffer = ref(false);
 const fileDataEndCalled = ref(false);
 
+/**
+ * @description 计算缩放比
+ * 
+ * 核心: 
+ *    哪个方向比例更小，就由哪个方向限制缩放，避免该方向溢出；另一方向会留出空白.如果容器更“扁宽”，则宽度限制比例（scaleX 更小）；如果更“瘦高”，则高度限制比例（scaleY 更小）
+ *    设原始画布尺寸为 (W, H)，容器尺寸为 (Cw, Ch)，统一缩放比例为 s. 约束就是 缩放后尺寸不超过容器 s * W <= Cw; s * H <= Ch 因此 s <= Cw / W 且 s <= Ch / H
+ */
 const recomputeScale = () => {
   if (!display || !display.getDefaultLayer) return;
 
@@ -134,19 +141,20 @@ const loadResource = async (record: any) => {
   el.appendChild(displayElement);
 
   await window.electron.readFile(guaUrl.value);
-  chunks.value = '';
+  chunksArr.length = 0;
 
   window.electron.onFileDataChunk(chunk => {
     try {
-      chunks.value += chunk.trim();
+      // 不进行 trim，避免破坏协议文本边界
+      chunksArr.push(chunk);
     } catch (e) {
       console.log(e);
     }
   });
 
   window.electron.onFileDataEnd(() => {
     if (fileDataEndCalled.value) {
-      chunks.value = '';
+      chunksArr.length = 0;
       return;
     }
     fileDataEndCalled.value = true;
@@ -164,8 +172,9 @@ const loadResource = async (record: any) => {
       }
     }
 
-    record.connect(chunks.value);
-    chunks.value = '';
+    const data = chunksArr.join('');
+    record.connect(data);
+    chunksArr.length = 0;
     initRecordingEvent(record);
   });
 
@@ -453,15 +462,15 @@ onBeforeUnmount(() => {
     tunnel = null;
     recording = null;
     display = null;
-    chunks.value = '';
+    chunksArr.length = 0;
   }
 
   delete (window as any).guacamoleKeyHandler;
   delete (window as any).guacamoleWheelHandler;
 });
 
 onUnmounted(() => {
-  chunks.value = '';
+  chunksArr.length = 0;
   currentPercent.value = 0;
   currentPosition.value = '00:00';
   isPlaying.value = false;