瀏覽代碼

feat: 移植metaType内容

gemercheung 6 月之前
父節點
當前提交
9b6a342961
共有 2 個文件被更改,包括 104 次插入91 次删除
  1. 4 4
      src/views/record/shot.vue
  2. 100 87
      src/views/record/sign.vue

+ 4 - 4
src/views/record/shot.vue

@@ -41,7 +41,7 @@
 
     <Preview
       v-if="palyUrl"
-      :items="[{ type: MediaType.video, url: palyUrl }]"
+      :items="[{ type: MetaType.video, url: palyUrl }]"
       @close="palyUrl = null"
     />
 
@@ -62,8 +62,8 @@ import {
 } from "vue";
 import { VideoRecorder } from "simaqcore";
 import { sdk } from "@/sdk";
-import { getVideoCover, togetherCallback } from "@/utils";
-import { MediaType, Preview } from "@/components/static-preview/index.vue";
+import { getVideoCover, MetaType, togetherCallback } from "@/utils";
+import { Preview } from "@/components/static-preview/index.vue";
 import { Record, getRecordFragmentBlobs } from "@/store";
 import ShotImiate from "./shot-imitate.vue";
 import {
@@ -251,7 +251,7 @@ export default defineComponent({
     });
 
     return {
-      MediaType,
+      MetaType,
       complete,
       pause,
       close,

+ 100 - 87
src/views/record/sign.vue

@@ -1,23 +1,26 @@
 <template>
-  <ui-group-option class=" record-sign" :class="{sign: record.status === RecordStatus.SUCCESS}">
+  <ui-group-option
+    class="record-sign"
+    :class="{ sign: record.status === RecordStatus.SUCCESS }"
+  >
     <div class="content">
       <span class="cover">
-        <img :src="getResource(getFileUrl(record.cover))" alt="" v-if="record.cover">
-        <ui-icon 
-          type="preview" 
-          ctrl 
-          class="preview" 
-          @click="actions.play()"  
+        <img :src="getResource(getFileUrl(record.cover))" alt="" v-if="record.cover" />
+        <ui-icon
+          type="preview"
+          ctrl
+          class="preview"
+          @click="actions.play()"
           v-if="record.status === RecordStatus.SUCCESS"
         />
       </span>
-      <ui-input 
-        type="text" 
-        :modelValue="record.title" 
+      <ui-input
+        type="text"
+        :modelValue="record.title"
         @update:modelValue="(title: string) => $emit('updateTitle', title.trim())"
-        v-show="isEditTitle" 
-        ref="inputRef" 
-        height="28px" 
+        v-show="isEditTitle"
+        ref="inputRef"
+        height="28px"
         :maxlength="15"
       />
       <div class="title" v-show="!isEditTitle">
@@ -27,112 +30,124 @@
     </div>
     <div class="action" v-if="edit && record.status === RecordStatus.SUCCESS">
       <ui-icon type="order" ctrl />
-      <ui-more 
-        :options="menus" 
-        style="margin-left: 20px" 
-        @click="(action: keyof typeof actions) => actions[action]()" 
+      <ui-more
+        :options="menus"
+        style="margin-left: 20px"
+        @click="(action: keyof typeof actions) => actions[action]()"
       />
     </div>
 
-    <Shot 
-      v-if="isShot" 
+    <Shot
+      v-if="isShot"
       @close="closeHandler"
-      @append="appendFragment" 
-      @updateCover="(cover: string) => $emit('updateCover', cover)" 
+      @append="appendFragment"
+      @updateCover="(cover: string) => $emit('updateCover', cover)"
       @deleteRecord="$emit('delete')"
-      :record="record" />
-    <Preview 
-      v-if="isPlayVideo" 
-      :items="[{ type: MediaType.video, url: record.url! }]"
-      @close="isPlayVideo = false" 
+      :record="record"
+    />
+    <Preview
+      v-if="isPlayVideo"
+      :items="[{ type: MetaType.video, url: record.url! }]"
+      @close="isPlayVideo = false"
     />
   </ui-group-option>
 </template>
 
 <script lang="ts">
-import type {PropType} from 'vue'
-import {computed, defineComponent, ref, watchEffect} from 'vue'
-import {getExtname, getFileUrl, loadPack, saveAs} from '@/utils'
-import {useFocus} from 'bill/hook/useFocus'
-import {createRecordFragment, getRecordFragmentBlobs, isTemploraryID, recordFragments, RecordStatus} from '@/store'
-import {MediaType, Preview} from '@/components/static-preview/index.vue'
-import {getResource} from '@/env'
-import Shot from './shot.vue'
-import type {RecordProcess} from './help'
-import {Message} from 'bill/index'
+import type { PropType } from "vue";
+import { computed, defineComponent, ref, watchEffect } from "vue";
+import { getExtname, getFileUrl, loadPack, MetaType, saveAs } from "@/utils";
+import { useFocus } from "bill/hook/useFocus";
+import {
+  createRecordFragment,
+  getRecordFragmentBlobs,
+  isTemploraryID,
+  recordFragments,
+  RecordStatus,
+} from "@/store";
+import { Preview } from "@/components/static-preview/index.vue";
+import { getResource } from "@/env";
+import Shot from "./shot.vue";
+import type { RecordProcess } from "./help";
+import { Message } from "bill/index";
 
 export default defineComponent({
   props: {
     record: {
       type: Object as PropType<RecordProcess>,
-      required: true
+      required: true,
     },
     edit: {
       type: Boolean,
       required: false,
-      default: true
-    }
+      default: true,
+    },
   },
   emits: {
-    'updateCover': (cover: string) => true,
-    'updateTitle': (title: string) => true,
-    'delete': () => true
+    updateCover: (cover: string) => true,
+    updateTitle: (title: string) => true,
+    delete: () => true,
   },
   setup(props, { emit }) {
     const menus = computed(() => {
-      const base = []
+      const base = [];
       if ([RecordStatus.SUCCESS, RecordStatus.UN].includes(props.record.status)) {
         base.push(
-          { label: '重命名', value: 'rename' },
-          { label: '继续录制', value: 'continue' },
-        )
+          { label: "重命名", value: "rename" },
+          { label: "继续录制", value: "continue" }
+        );
 
         if (props.record.status === RecordStatus.SUCCESS) {
-          base.push({ label: '下载', value: 'download' },)
+          base.push({ label: "下载", value: "download" });
         }
       }
-      base.push({ label: '删除', value: 'delete' })
-      return base
-    })
+      base.push({ label: "删除", value: "delete" });
+      return base;
+    });
 
-    const isShot = ref<boolean>(false)
-    const inputRef = ref()
-    const isEditTitle = useFocus(computed(() => inputRef.value?.vmRef.root))
+    const isShot = ref<boolean>(false);
+    const inputRef = ref();
+    const isEditTitle = useFocus(computed(() => inputRef.value?.vmRef.root));
 
     watchEffect(() => {
       if (!isEditTitle.value && !props.record.title.length) {
-        isEditTitle.value = true
-        Message.warning('视频名称不可为空')
+        isEditTitle.value = true;
+        Message.warning("视频名称不可为空");
       }
-    })
+    });
 
-    const isPlayVideo = ref(false)
+    const isPlayVideo = ref(false);
     const actions = {
-      continue: () => isShot.value = true,
-      delete: () => emit('delete'),
-      rename: () => isEditTitle.value = true,
-      play: () => isPlayVideo.value = true,
+      continue: () => (isShot.value = true),
+      delete: () => emit("delete"),
+      rename: () => (isEditTitle.value = true),
+      play: () => (isPlayVideo.value = true),
       download() {
-        const url = getResource(props.record.url!)
-        const ext = getExtname(url) || 'mp4'
-        loadPack(saveAs(url, `${props.record.title}.${ext}`))
+        const url = getResource(props.record.url!);
+        const ext = getExtname(url) || "mp4";
+        loadPack(saveAs(url, `${props.record.title}.${ext}`));
       },
-    }
-    props.record.immediately && actions.continue()
+    };
+    props.record.immediately && actions.continue();
 
     const closeHandler = () => {
-      if (getRecordFragmentBlobs(props.record).length === 0 && isTemploraryID(props.record.id)) {
-        emit('delete')
+      if (
+        getRecordFragmentBlobs(props.record).length === 0 &&
+        isTemploraryID(props.record.id)
+      ) {
+        emit("delete");
       }
-      isShot.value = false
-    }
+      isShot.value = false;
+    };
 
     const appendFragment = (blobs: Blob[]) => {
       recordFragments.value.push(
-        ...blobs.map(blob => createRecordFragment({ url: blob, recordId: props.record.id }))
-      )
-      props.record.status = RecordStatus.UN
-    }
+        ...blobs.map((blob) =>
+          createRecordFragment({ url: blob, recordId: props.record.id })
+        )
+      );
+      props.record.status = RecordStatus.UN;
+    };
 
     return {
       menus,
@@ -142,26 +157,24 @@ export default defineComponent({
       closeHandler,
       inputRef,
       RecordStatus,
-      MediaType,
+      MetaType,
       isPlayVideo,
       getResource,
       getFileUrl,
-      appendFragment
-    }
+      appendFragment,
+    };
   },
   components: {
     Shot,
-    Preview
-  }
-})
+    Preview,
+  },
+});
 </script>
 
-
-<style lang="scss" src="./style.scss" scoped>
-</style>
+<style lang="scss" src="./style.scss" scoped></style>
 
 <style>
-  .record-sign .ui-input .text.suffix input {
-    padding-right: 60px;
-  }
-</style>
+.record-sign .ui-input .text.suffix input {
+  padding-right: 60px;
+}
+</style>