Merge branch 'master' of http://192.168.0.115:3000/bill/fuse-code

src/views/record/shot.vue

@@ -57,6 +57,7 @@ import {
 import { appEl } from '@/store';
 import { useViewStack } from '@/hook';
 import { currentModel } from '@/model';
+import { Message } from 'bill/expose-common';
 
 
 export default defineComponent({
@@ -83,20 +84,26 @@ export default defineComponent({
     const videoRecorder = new VideoRecorder(config);
     const showLeftPano = ref(false)
     const showBottomBar = ref(false)
+    const MAX_SIZE = 2 * 1024 * 1024 * 1024
+    const MAX_TIME = 30 * 60 * 1000
 
     type VideoItem = { origin: Blob | string, cover: string }
 
     const countdown = ref(0)
     let interval: NodeJS.Timer
-    let recordIng = false
+    let recordIng = ref(false)
     const start = () => {
+      if (size.value > MAX_SIZE || pauseTime.value < 2000) {
+        return Message.warning('已超出限制大小无法继续录制，可保存后继续录制！')
+      }
+
       showBottomBar.value = false
       countdown.value = 2
       const timeiffe = () => {
         if (--countdown.value <= 0) {
           clearInterval(interval)
           videoRecorder.startRecord()
-          recordIng = true
+          recordIng.value = true
         } else {
           interval = setTimeout(timeiffe, 300)
         }
@@ -112,26 +119,40 @@ export default defineComponent({
     }
 
     const pause = () => {
-      console.error('停止了')
-      if (countdown.value === 0 && recordIng) {
+      if (countdown.value === 0 && recordIng.value) {
         videoRecorder.endRecord()
-        recordIng = false
+        recordIng.value = false
       }
       countdown.value = 0
       showBottomBar.value = true
       clearInterval(interval)
     }
 
+    watch(recordIng, (_n, _o, onCleanup) => {
+      if (recordIng.value) {
+        const timeout = setTimeout(() => videoRecorder.endRecord(), pauseTime.value)
+        onCleanup(() => clearTimeout(timeout))
+      }
+    })
+
     const blobs: File[] = shallowReactive([])
+    const size = computed(() => {
+      console.log(videoList)
+      return videoList.reduce((t, f) => typeof f.origin === 'string' ? t : t + f.origin.size, 0)
+    })
+    const pauseTime = computed(() => (MAX_TIME / MAX_SIZE) * (MAX_SIZE - size.value))
     videoRecorder.off('*')
     videoRecorder.on('record', blob => {
-      blobs.push(new File([blob], '录屏.mp4', { type: 'video/mp4; codecs=h264' }))
+      if (recordIng.value) {
+        blobs.push(new File([blob], '录屏.mp4', { type: 'video/mp4; codecs=h264' }))
+      }
     })
     videoRecorder.on('cancelRecord', pause)
     videoRecorder.on('endRecord', pause)
 
     const palyUrl = ref<string | Blob | null>(null)
     const videoList: VideoItem[] = shallowReactive([])
+    let initial = false
     watch([blobs, props], async () => {
       const existsVideos = []
 
@@ -155,9 +176,14 @@ export default defineComponent({
       if (!props.record.cover && videoList.length) {
         emit('updateCover', videoList[0].cover)
       }
+      if (!initial) {
+        initial = true
+        start()
+      }
+      
     }, { immediate: true })
 
-    const upHandler = (ev: KeyboardEvent) => ev.code === `Escape` && pause()
+    const upHandler = (ev: KeyboardEvent) => ev.code === `Escape` && videoRecorder.endRecord()
     document.body.addEventListener('keyup', upHandler, { capture: true })
 
     const complete = () => {
@@ -170,7 +196,6 @@ export default defineComponent({
       emit('close')
     }
 
-    start()
     const barHeight = computed(() => videoList.length ? '180px' : '60px')
     
     onUnmounted(() => {