|
@@ -8,10 +8,10 @@
|
|
|
<ui-editor-toolbar :toolbar="custom.showBottomBar" class="shot-ctrl">
|
|
|
<ui-button type="submit" class="btn" @click="close">取消</ui-button>
|
|
|
<ui-button type="primary" class="btn" @click="complete" :class="{disabled: blobs.length === 0}">合并视频</ui-button>
|
|
|
- <div class="other">
|
|
|
+ <div class="other" :style="{bottom: barHeight}">
|
|
|
<ui-icon class="icon" type="video1" ctrl @click="start" tip="继续录制" tipV="top" />
|
|
|
</div>
|
|
|
- <div class="video-list">
|
|
|
+ <div class="video-list" v-if="videoList.length">
|
|
|
<div class="layout" :style="{width: `${videoList.length * 130}px`}">
|
|
|
<div v-for="video in videoList" :key="video.cover" class="cover">
|
|
|
<img :src="video.cover">
|
|
@@ -28,15 +28,14 @@
|
|
|
|
|
|
<Preview
|
|
|
v-if="palyUrl"
|
|
|
- :type="MediaType.video"
|
|
|
- :url="palyUrl"
|
|
|
+ :items="[{ type: MediaType.video, url: palyUrl }]"
|
|
|
@close="palyUrl = null"
|
|
|
/>
|
|
|
</teleport>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { ref, defineComponent, onUnmounted, watch, shallowReactive, PropType } from 'vue'
|
|
|
+import { ref, defineComponent, onUnmounted, watch, shallowReactive, PropType, computed, watchEffect } from 'vue'
|
|
|
import { VideoRecorder } from '@simaq/core';
|
|
|
import { sdk } from '@/sdk'
|
|
|
import { getVideoCover, togetherCallback } from '@/utils'
|
|
@@ -54,6 +53,7 @@ import {
|
|
|
} from '@/env'
|
|
|
import { appEl } from '@/store';
|
|
|
import { useViewStack } from '@/hook';
|
|
|
+import { currentModel } from '@/model';
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
@@ -79,6 +79,8 @@ export default defineComponent({
|
|
|
|
|
|
console.error('new VideoRecorder')
|
|
|
const videoRecorder = new VideoRecorder(config);
|
|
|
+ const showLeftPano = ref(false)
|
|
|
+ const showBottomBar = ref(false)
|
|
|
|
|
|
type VideoItem = { origin: Blob | string, cover: string }
|
|
|
|
|
@@ -86,7 +88,7 @@ export default defineComponent({
|
|
|
let interval: NodeJS.Timer
|
|
|
let recordIng = false
|
|
|
const start = () => {
|
|
|
- custom.showBottomBar = false
|
|
|
+ showBottomBar.value = false
|
|
|
countdown.value = 1
|
|
|
const timeiffe = () => {
|
|
|
if (--countdown.value === 0) {
|
|
@@ -113,7 +115,7 @@ export default defineComponent({
|
|
|
recordIng = false
|
|
|
}
|
|
|
countdown.value = 0
|
|
|
- custom.showBottomBar = true
|
|
|
+ showBottomBar.value = true
|
|
|
clearInterval(interval)
|
|
|
}
|
|
|
|
|
@@ -172,21 +174,30 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
start()
|
|
|
- const pop = togetherCallback([
|
|
|
- showHeadBarStack.push(ref(false)),
|
|
|
- showRightCtrlPanoStack.push(ref(false)),
|
|
|
- showRightPanoStack.push(ref(false)),
|
|
|
- showBottomBarStack.push(ref(false)),
|
|
|
- bottomBarHeightStack.push(ref('180px'))
|
|
|
- ])
|
|
|
+ const barHeight = computed(() => videoList.length ? '180px' : '60px')
|
|
|
+
|
|
|
onUnmounted(() => {
|
|
|
- close()
|
|
|
- pop()
|
|
|
- custom.showBottomBar = false
|
|
|
document.body.removeEventListener('keyup', upHandler, { capture: true })
|
|
|
})
|
|
|
|
|
|
- useViewStack(() => showLeftPanoStack.push(ref(false)))
|
|
|
+
|
|
|
+ watch(currentModel, () => {
|
|
|
+ if (currentModel.value) {
|
|
|
+ showLeftPano.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ useViewStack(() => togetherCallback([
|
|
|
+ showHeadBarStack.push(ref(false)),
|
|
|
+ showRightCtrlPanoStack.push(ref(false)),
|
|
|
+ showRightPanoStack.push(ref(false)),
|
|
|
+ showBottomBarStack.push(showBottomBar),
|
|
|
+ bottomBarHeightStack.push(barHeight),
|
|
|
+ showLeftPanoStack.push(showLeftPano),
|
|
|
+ close,
|
|
|
+ () => {
|
|
|
+ console.log('pop', showBottomBarStack.current)
|
|
|
+ }
|
|
|
+ ]))
|
|
|
|
|
|
return {
|
|
|
MediaType,
|
|
@@ -194,6 +205,7 @@ export default defineComponent({
|
|
|
pause,
|
|
|
close,
|
|
|
start,
|
|
|
+ barHeight,
|
|
|
el: sdk.layout,
|
|
|
blobs,
|
|
|
countdown,
|