fuse-code/src/views/record/sign.vue

<template>
  <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()"
          v-if="record.status === RecordStatus.SUCCESS"
        />
      </span>
      <ui-input
        type="text"
        :modelValue="record.title"
        @update:modelValue="(title: string) => $emit('updateTitle', title.trim())"
        v-show="isEditTitle"
        ref="inputRef"
        height="28px"
        :maxlength="15"
      />
      <div class="title" v-show="!isEditTitle">
        <p>{{ record.title }}</p>
        <span v-if="record.status === RecordStatus.RUN">后台正在处理</span>
      </div>
    </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]()"
      />
    </div>

    <Shot
      v-if="isShot"
      @close="closeHandler"
      @append="appendFragment"
      @updateCover="(cover: string) => $emit('updateCover', cover)"
      @deleteRecord="$emit('delete')"
      :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, 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,
    },
    edit: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  emits: {
    updateCover: (cover: string) => true,
    updateTitle: (title: string) => true,
    delete: () => true,
  },
  setup(props, { emit }) {
    const menus = computed(() => {
      const base = [];
      if ([RecordStatus.SUCCESS, RecordStatus.UN].includes(props.record.status)) {
        base.push(
          { label: "重命名", value: "rename" },
          { label: "继续录制", value: "continue" }
        );

        if (props.record.status === RecordStatus.SUCCESS) {
          base.push({ label: "下载", value: "download" });
        }
      }
      base.push({ label: "删除", value: "delete" });
      return base;
    });

    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("视频名称不可为空");
      }
    });

    const isPlayVideo = ref(false);
    const actions = {
      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}`));
      },
    };
    props.record.immediately && actions.continue();

    const closeHandler = () => {
      if (
        getRecordFragmentBlobs(props.record).length === 0 &&
        isTemploraryID(props.record.id)
      ) {
        emit("delete");
      }
      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;
    };

    return {
      menus,
      actions,
      isShot,
      isEditTitle,
      closeHandler,
      inputRef,
      RecordStatus,
      MetaType,
      isPlayVideo,
      getResource,
      getFileUrl,
      appendFragment,
    };
  },
  components: {
    Shot,
    Preview,
  },
});
</script>

<style lang="scss" src="./style.scss" scoped></style>

<style>
.record-sign .ui-input .text.suffix input {
  padding-right: 60px;
}
</style>