From 0a5c42cb113a76d0f6f9fa69e2ba0cebfc0b8e6c Mon Sep 17 00:00:00 2001
From: Salem Yaslem <s@sy.sa>
Date: Fri, 21 Jul 2023 20:23:33 +0300
Subject: [PATCH] support play videos

---
 app.vue                            | 10 +++++----
 components/media/video-player.vue  |  7 +++++--
 composables/worker/7zip-manager.ts | 31 +++++++---------------------
 package-lock.json                  | 33 +++++++-----------------------
 package.json                       |  4 ++--
 5 files changed, 27 insertions(+), 58 deletions(-)

diff --git a/app.vue b/app.vue
index 0a4b3e8..4623ee5 100644
--- a/app.vue
+++ b/app.vue
@@ -18,6 +18,7 @@ let selectedList = ref<any>([]);
 let filesManager = new FilesManager(filesList);
 let history = new HistoryManager(filesManager);
 
+const videoExtensions = ['mp4', 'avi', 'mov', 'mkv'];
 let mediaBlobUrl = ref('');
 
 watchEffect(async () => {
@@ -65,9 +66,10 @@ watchEffect(async () => {
   }
 
   // Experimental feature
-  // if(['mp4', 'avi', 'mov', 'mkv'].includes(filesManager.getFile(selectedPath.value)?.extension?.toLowerCase())) {
-  //   mediaBlobUrl.value = await filesManager.getFileBlobUrl(selectedPath.value) as string;
-  // }  
+  if(videoExtensions.includes(filesManager.getFile(selectedPath.value)?.extension?.toLowerCase())) {
+    mediaBlobUrl.value = await filesManager.getFileBlobUrl(selectedPath.value) as string;
+    console.log(mediaBlobUrl.value)
+  }  
 })
 
 const dragContainer = document.querySelector(".select-area");
@@ -168,7 +170,7 @@ function stepUp(path: string) {
             </v-row>
           </v-list>
         </template>
-        <template v-if="!filesManager.getFile(selectedPath)?.isFolder && ['mp4'].includes(filesManager.getFile(selectedPath)?.extension)">
+        <template v-if="!filesManager.getFile(selectedPath)?.isFolder && videoExtensions.includes(filesManager.getFile(selectedPath)?.extension)">
           <MediaVideoPlayer :src="mediaBlobUrl"></MediaVideoPlayer>
         </template>
         <template v-if="!files.length">
diff --git a/components/media/video-player.vue b/components/media/video-player.vue
index 7ed5cf2..351f289 100644
--- a/components/media/video-player.vue
+++ b/components/media/video-player.vue
@@ -2,17 +2,20 @@
 import 'vue-plyr/dist/vue-plyr.css';
 // @ts-ignore
 import VuePlyr from 'vue-plyr';
+import mime from 'mime';
 
 interface Props {
     src: string
 }
 
 let { src } = defineProps<Props>();
+let selectedPath = useSelectedPath();
+
+let videoType = mime.getType(selectedPath.value);
 </script>
 <template>
     <VuePlyr>
-        <video controls playsinline>
-            <source :src="src" />
+        <video controls playsinline :src="src" :type="videoType!" style="height: 84vh;">
         </video>
     </VuePlyr>
 </template>
\ No newline at end of file
diff --git a/composables/worker/7zip-manager.ts b/composables/worker/7zip-manager.ts
index cb758d1..392d3aa 100644
--- a/composables/worker/7zip-manager.ts
+++ b/composables/worker/7zip-manager.ts
@@ -5,7 +5,7 @@ import SevenZip, { SevenZipModule } from "7z-wasm";
 // @ts-expect-error 7z-wasm have that file but typescript can't find it when query it with url
 import SevenZipWasm from "7z-wasm/7zz.wasm?url";
 import * as Comlink from "comlink";
-import mime from 'mime-types';
+import mime from 'mime';
 
 export interface iFile {
     name: string;
@@ -148,37 +148,20 @@ export class SevenZipManager {
         if (!this.sevenZip) return;
         file = typeof file === "string" ? JSON.parse(file) : file;
 
-        // override archive name as file name
-        file.path = '/' + this.archiveName;
-
         this.sevenZip.FS.chdir("/");
-        console.log("Directory content before extracting", this.sevenZip.FS.readdir("/"));
 
         // extract file from archive
         this.execute(['x', '-y', this.archiveName, file.path.substring(1)]);
 
-        console.log("Directory content after extracting", this.sevenZip.FS.readdir('/'));
+        const { node } = this.sevenZip.FS.lookupPath('/');
+        const buffer = node.contents[file.path.substring(1)].contents;
 
-        console.log({
-            file: file.path.substring(1),
-            p: file.path
-        });
+        const blob = new Blob([buffer as unknown as Uint8Array], { type: mime.getType(file.extension!) || "application/octet-stream" });
+        const blobUrl = URL.createObjectURL(blob);
 
-        const stream = this.sevenZip.FS.open(file.path, 'r');
-        const stat = this.sevenZip.FS.stat(file.path);
-        const bufferLength = stat.size;
-        const buffer = new Uint8Array(bufferLength);
-        this.sevenZip.FS.read(stream, buffer, 0, bufferLength, 0);
-        this.sevenZip.FS.close(stream);
+        // this.sevenZip.FS.unlink(file.path.substring(1));
 
-        console.log({buffer});
-
-        // const blob = new Blob([buffer], { type: mime.lookup(file.extension!) || "application/octet-stream" });
-        // const blobUrl = URL.createObjectURL(blob);
-
-        // console.log({blobUrl});
-
-        return "blobUrl";
+        return blobUrl;
     }
 }
 
diff --git a/package-lock.json b/package-lock.json
index 90df671..4268597 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,12 +6,13 @@
     "": {
       "name": "nuxt-app",
       "hasInstallScript": true,
+      "license": "GPL-3.0",
       "dependencies": {
         "@mdi/font": "^7.2.96",
-        "@types/mime-types": "^2.1.1",
+        "@types/mime": "^3.0.1",
         "7z-wasm": "^1.0.2",
         "comlink": "^4.4.1",
-        "mime-types": "^2.1.35",
+        "mime": "^3.0.0",
         "moveable": "^0.47.7",
         "sass": "^1.62.1",
         "selecto": "^1.22.3",
@@ -1734,10 +1735,10 @@
       "integrity": "sha512-ddCRDAyVftfnbNvEe77FrOSWMYoFI85xJKITQ5AnvfR330KmEHS48KOmhEncpZadxefh64TO6jk6g2oabxWupg==",
       "dev": true
     },
-    "node_modules/@types/mime-types": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
-      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw=="
+    "node_modules/@types/mime": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
+      "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "node_modules/@types/node": {
       "version": "18.16.9",
@@ -5048,7 +5049,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
       "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-      "dev": true,
       "bin": {
         "mime": "cli.js"
       },
@@ -5056,25 +5056,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
diff --git a/package.json b/package.json
index 63ef413..3872c11 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,10 @@
   },
   "dependencies": {
     "@mdi/font": "^7.2.96",
-    "@types/mime-types": "^2.1.1",
+    "@types/mime": "^3.0.1",
     "7z-wasm": "^1.0.2",
     "comlink": "^4.4.1",
-    "mime-types": "^2.1.35",
+    "mime": "^3.0.0",
     "moveable": "^0.47.7",
     "sass": "^1.62.1",
     "selecto": "^1.22.3",