+ preview

src/main/browser.ts

@@ -29,6 +29,31 @@ export function enable() {
       console.log(`Opened ${cleanFilePath} with Visual Studio Code.`)
     })
   })
+
+  handleRequest('requestPreview', async (_ev, args) => {
+    if (!fsSync.existsSync(args.path)) {
+      return 'ERROR: File doesn\'t exist.'
+    }
+
+    if (!args.path.includes('.')) {
+      // requested preview of directory
+      const children = await fs.readdir(args.path)
+      return children.join('\n')
+    }
+
+    if (args.type == 'text') {
+      const fileBuffer = await fs.readFile(args.path)
+      return fileBuffer.toString('utf-8')
+    }
+
+    if (args.type == 'img') {
+      const fileContent = await fs.readFile(args.path)
+      const base64 = fileContent.toString('base64')
+      return base64
+    }
+
+    return 'ERROR'
+  })
 }
 
 function getFileStats(filePath: string): fsSync.Stats | false {

src/renderer/src/assets/test-files/test.js

@@ -0,0 +1,8 @@
+import test from './test.json'
+
+function removeHttpProtocols(input) {
+  return input.replace('https://', '')
+}
+
+test.author.website = removeHttpProtocols(test.author.website)
+console.log(test)

src/renderer/src/assets/test-files/test.json

@@ -0,0 +1,7 @@
+{
+  "name": "browser",
+  "author": {
+    "name": "zManuu",
+    "website": "https://github.com/zManuu"
+  }
+}

src/renderer/src/assets/test-files/test.txt

@@ -0,0 +1 @@
+Hello!

src/renderer/src/assets/test-files/test.xml

@@ -0,0 +1,3 @@
+<test>
+  <testEntry>zManuu</testEntry>
+</test>

src/renderer/src/assets/test-files/test.yaml

@@ -0,0 +1,6 @@
+a:
+  b:
+    c:
+  d:
+  e:
+

src/renderer/src/assets/test-files/test.yml

@@ -0,0 +1,6 @@
+a:
+  b:
+    c:
+  d:
+  e:
+

src/renderer/src/components/ContextMenuComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col w-max select-none opacity-75 hover:opacity-100 bg-slate-700">
+  <div class="flex flex-col w-full select-none opacity-75 hover:opacity-100 bg-slate-700">
     <div v-for="(itemCategory, itemCategoryIndex) in menuItems.keys()" :key="itemCategoryIndex">
       <h1 class="my-3 font-semibold text-xl text-center">{{ itemCategory }}</h1>
       <div

src/renderer/src/components/PreviewComponent.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex flex-col w-full select-none opacity-75 hover:opacity-100 bg-slate-700 p-3">
+    <h1 class="font-semibold text-xl">Preview: {{ fsEntry.name }}</h1>
+    <p v-if="previewType == 'text'" class="whitespace-pre break-words">
+      {{ previewValue }}
+    </p>
+    <img v-if="previewType == 'img'" :src="previewValue" />
+  </div>
+</template>
+<script lang="ts">
+import { request } from '@renderer/ipc'
+import { FsEntry } from '@shared/FsEntry'
+import { PreviewType } from '@shared/PreviewType'
+import { PropType, defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    fsEntry: {
+      type: Object as PropType<FsEntry>,
+      required: true
+    }
+  },
+  data() {
+    return {
+      previewValue: ''
+    }
+  },
+  computed: {
+    previewType(): PreviewType {
+      if (this.fsEntry.type == 'directory') return 'text'
+
+      const fileType = this.fsEntry.name.split('.').pop()
+
+      switch (fileType) {
+        case 'png':
+        case 'jpg':
+        case 'svg':
+          return 'img'
+      }
+
+      return 'text'
+    }
+  },
+  watch: {
+    fsEntry() {
+      this.loadValue()
+    }
+  },
+  created() {
+    this.loadValue()
+  },
+  methods: {
+    loadValue() {
+      const type = this.previewType
+      const path = `${this.fsEntry.parentPath}\\${this.fsEntry.name}`
+      request('requestPreview', { path, type }).then((res) => (this.previewValue = res))
+    }
+  }
+})
+</script>

src/renderer/src/router.ts

@@ -22,6 +22,14 @@ export default createRouter({
         {
           path: 'contextmenu/directory',
           component: () => import('./views/ContextMenuDirectoryTestView.vue')
+        },
+        {
+          path: 'preview/file',
+          component: () => import('./views/PreviewFileTestView.vue')
+        },
+        {
+          path: 'preview/directory',
+          component: () => import('./views/PreviewDirectoryTestView.vue')
         }
       ]
     }

src/renderer/src/views/BrowserView.vue

@@ -1,15 +1,18 @@
 <template>
   <BrowseUpComponent @go-up="goUp" />
   <div class="flex">
-    <div class="w-full flex flex-col">
+    <div class="w-5/6 flex flex-col">
       <FsEntryComponent
         v-for="(fsEntry, index) in shownFsEntries"
         :key="index"
         :fs-entry="fsEntry"
         @handle-click="handleClick(fsEntry)"
       />
     </div>
-    <ContextMenuComponent v-if="selectedFsEntry" :fs-entry="selectedFsEntry" />
+    <div class="w-1/6 flex flex-col">
+      <ContextMenuComponent v-if="selectedFsEntry" :fs-entry="selectedFsEntry" />
+      <PreviewComponent v-if="selectedFsEntry" :fs-entry="selectedFsEntry" />
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -20,9 +23,10 @@ import { request, send } from '../ipc'
 import FsEntryComponent from '@renderer/components/FsEntryComponent.vue'
 import BrowseUpComponent from '@renderer/components/BrowseUpComponent.vue'
 import ContextMenuComponent from '@renderer/components/ContextMenuComponent.vue'
+import PreviewComponent from '@renderer/components/PreviewComponent.vue'
 
 export default defineComponent({
-  components: { FsEntryComponent, BrowseUpComponent, ContextMenuComponent },
+  components: { FsEntryComponent, BrowseUpComponent, ContextMenuComponent, PreviewComponent },
   data() {
     return {
       currentDirectory: undefined as Directory | undefined,

src/renderer/src/views/HomeView.vue

@@ -7,4 +7,8 @@
   <router-link to="/test/contextmenu/directory"
     >Click to test contextmenu with a directory</router-link
   >
+  <br />
+  <router-link to="/test/preview/file">Click to test preview with a file</router-link>
+  <br />
+  <router-link to="/test/preview/directory">Click to test preview with a directory</router-link>
 </template>

src/renderer/src/views/PreviewDirectoryTestView.vue

@@ -0,0 +1,17 @@
+<template>
+  <PreviewComponent :fs-entry="testDirectory" />
+</template>
+<script lang="ts">
+import PreviewComponent from '@renderer/components/PreviewComponent.vue'
+import { getTestDirectory } from '@shared/testData'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: { PreviewComponent },
+  data() {
+    return {
+      testDirectory: getTestDirectory()
+    }
+  }
+})
+</script>

src/renderer/src/views/PreviewFileTestView.vue

@@ -0,0 +1,31 @@
+<template>
+  <label>File-Type:</label>
+  <select v-model="selectedFileType" class="bg-slate-700" @change="handleFileTypeSelection">
+    <option v-for="(fileType, fileTypeIndex) in fileTypes" :key="fileTypeIndex" :value="fileType">
+      {{ fileType }}
+    </option>
+  </select>
+  <PreviewComponent :fs-entry="testFile" />
+</template>
+<script lang="ts">
+import { getTestFile } from '@shared/testData'
+import { fileType, fileTypes } from '@shared/File'
+import { defineComponent } from 'vue'
+import PreviewComponent from '@renderer/components/PreviewComponent.vue'
+
+export default defineComponent({
+  components: { PreviewComponent },
+  data() {
+    return {
+      fileTypes,
+      testFile: getTestFile('txt' as fileType),
+      selectedFileType: 'txt' as fileType
+    }
+  },
+  methods: {
+    handleFileTypeSelection() {
+      this.testFile = getTestFile(this.selectedFileType)
+    }
+  }
+})
+</script>

src/shared/Emit.ts

@@ -1,5 +1,6 @@
 import { type Directory } from './Directory'
 import { FsEntry } from './FsEntry'
+import { PreviewType } from './PreviewType'
 
 /**
  * A request that is sent by the window and responded to by the node env
@@ -12,6 +13,13 @@ type WindowRequest = {
       fsEntries: FsEntry[]
     }
   }
+  requestPreview: {
+    reqArgs: {
+      path: string
+      type: PreviewType
+    }
+    resArgs: string
+  }
 }
 
 type WindowToNode = {

src/shared/File.ts

@@ -10,7 +10,13 @@ export const fileTypes = {
   java: 'java',
   class: 'class',
   gitignore: 'gitignore',
-  json: 'json'
+  json: 'json',
+  svg: 'svg',
+  png: 'png',
+  jpg: 'jpg',
+  yml: 'yml',
+  yaml: 'yaml',
+  xml: 'xml'
 } as const
 
 export type fileType = keyof typeof fileTypes

src/shared/PreviewType.ts

@@ -0,0 +1 @@
+export type PreviewType = 'text' | 'img'

src/shared/testData.ts

@@ -5,7 +5,7 @@ function getTestFile(type: fileType = fileTypes[0]): File {
   return {
     type: 'file',
     name: `test.${type}`,
-    parentPath: 'C:\\Users\\Manuel Rettkowski\\Downloads',
+    parentPath: 'M:\\Developement\\Projects\\app\\browser\\src\\renderer\\src\\assets\\test-files',
     sizeInKb: 5,
     isHidden: false
   }
@@ -14,8 +14,8 @@ function getTestFile(type: fileType = fileTypes[0]): File {
 function getTestDirectory(): Directory {
   return {
     type: 'directory',
-    name: 'Downloads',
-    parentPath: 'C:\\Users\\Manuel Rettkowski',
+    name: 'test-files',
+    parentPath: 'M:\\Developement\\Projects\\app\\browser\\src\\renderer\\src\\assets',
     sizeInKb: 50,
     isHidden: false
   }