feat: v1.5.5

Author: Flex-7746

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 更新日志
 
+## 1.5.5
+
+- 新增：简单支持音频(mp3、wav)、视频(mp4、mov)文件的播放
+- 优化：优化二进制文件的检测，避免卡死情况
+
 ## 1.5.4
 
 - 新增：目录支持上传文件，顶级目录同样可操作

frontend/components.d.ts

@@ -12,6 +12,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AudioView: typeof import('./src/components/AudioView.vue')['default']
     ClickMove: typeof import('./src/components/ClickMove.vue')['default']
     Code: typeof import('./src/components/icons/Code.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -42,12 +43,14 @@ declare module 'vue' {
     OfficeWord: typeof import('./src/components/icons/OfficeWord.vue')['default']
     Pdf: typeof import('./src/components/icons/Pdf.vue')['default']
     PdfView: typeof import('./src/components/PdfView.vue')['default']
+    VideoView: typeof import('./src/components/VideoView.vue')['default']
     Zip: typeof import('./src/components/icons/Zip.vue')['default']
   }
 }
 
 // For TSX support
 declare global {
+  const AudioView: typeof import('./src/components/AudioView.vue')['default']
   const ClickMove: typeof import('./src/components/ClickMove.vue')['default']
   const Code: typeof import('./src/components/icons/Code.vue')['default']
   const ElButton: typeof import('element-plus/es')['ElButton']
@@ -78,5 +81,6 @@ declare global {
   const OfficeWord: typeof import('./src/components/icons/OfficeWord.vue')['default']
   const Pdf: typeof import('./src/components/icons/Pdf.vue')['default']
   const PdfView: typeof import('./src/components/PdfView.vue')['default']
+  const VideoView: typeof import('./src/components/VideoView.vue')['default']
   const Zip: typeof import('./src/components/icons/Zip.vue')['default']
 }

frontend/src/components/AudioView.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="audio-view">
+    <audio :src="getFullPath($props.src)" controls></audio>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getFullPath } from '@/utils/file'
+
+const $props = defineProps<{ src: string }>()
+</script>
+
+<style lang="scss" scoped>
+.audio-view {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > .i {
+    max-width: 80%;
+    max-height: 80%;
+  }
+}
+</style>

frontend/src/components/VideoView.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="video-view">
+    <video class="i" :src="getFullPath($props.src)" controls></video>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getFullPath } from '@/utils/file'
+
+const $props = defineProps<{ src: string }>()
+</script>
+
+<style lang="scss" scoped>
+.video-view {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > .i {
+    max-width: 80%;
+    max-height: 80%;
+  }
+}
+</style>

frontend/src/layout/ViewRight/ViewBox.vue

@@ -15,6 +15,10 @@
 
       <PdfView v-else-if="fileType === 'pdf'" :src="$props.value.path" />
 
+      <AudioView v-else-if="fileType === 'audio'" :src="$props.value.path" />
+
+      <VideoView v-else-if="fileType === 'video'" :src="$props.value.path" />
+
       <MonacoEditor v-else ref="editorRef" :path="$props.value.path" @diff="(v) => $emit('diff', v)" @error="(v) => v && (error = v)" />
     </template>
   </template>
@@ -26,6 +30,8 @@ import { computed, ref } from 'vue'
 import MonacoEditor from '@/components/MonacoEditor.vue'
 import ImageView from '@/components/ImageView.vue'
 import PdfView from '@/components/PdfView.vue'
+import AudioView from '@/components/AudioView.vue'
+import VideoView from '@/components/VideoView.vue'
 
 import { FILE_MAP } from '@/utils/option'
 import { getFileSuffix, getSize } from '@/utils/file'
@@ -44,7 +50,7 @@ const editorRef = ref<{ save: () => void }>()
 
 const error = ref('')
 const fileType = computed(() => FILE_MAP[getFileSuffix($props.value.path)])
-const isBinaryFile = computed(() => fileType.value && !['img', 'pdf'].includes(fileType.value))
+const isBinaryFile = computed(() => fileType.value && !['img', 'pdf', 'audio', 'video'].includes(fileType.value))
 </script>
 
 <style lang="scss" scoped>

frontend/src/utils/option.ts

@@ -43,6 +43,10 @@ export const FILE_MAP: { [x: string]: string } = {
   apng: 'img',
   ico: 'img',
   pdf: 'pdf',
+  mp3: 'audio',
+  wav: 'audio',
+  mp4: 'video',
+  mov: 'video',
   zip: 'zip',
   rar: 'zip',
   '7z': 'zip',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "code.editor",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "changelog": "<div>新增：文件快照功能，可随时回退文件</div><div>新增：图片查看，支持同级快速预览</div><div>新增：PDF 阅读，支持索引跳转和缩放</div><div>新增：支持刷新目录和在目录下创建文件</div><div>新增：偏好设置-启动时询问，可在桌面图标访问时不询问开启</div><div>新增：markdown 文件支持预览</div><div>新增：偏好设置支持设置打开 markdown 时默认预览</div><div>新增：显示字数、文件大小、最后更新日期</div><div>新增：独立窗口按钮</div><div>新增：加载大文件将提示是否继续加载，避免带宽浪费</div><div>新增：支持在目录进行文件上传</div>",
   "scripts": {
     "dev": "node src/app.js",