sign.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <template>
  2. <ui-group-option class="sign-guide">
  3. <div class="info">
  4. <div class="guide-cover">
  5. <img :src="getResource(getFileUrl(guide.cover))" />
  6. <ui-icon
  7. type="preview"
  8. class="icon"
  9. ctrl
  10. @click="playSceneGuide(paths, undefined, true)"
  11. v-if="paths.length"
  12. />
  13. </div>
  14. <div>
  15. <p>{{ guide.title }}</p>
  16. </div>
  17. </div>
  18. <div class="actions" v-if="edit">
  19. <ui-more
  20. :options="menus"
  21. style="margin-left: 20px"
  22. @click="(action: keyof typeof actions) => actions[action]()"
  23. />
  24. </div>
  25. </ui-group-option>
  26. </template>
  27. <script setup lang="ts">
  28. import { Guide, getGuidePaths } from '@/store'
  29. import { getFileUrl, saveAs } from '@/utils'
  30. import { getResource } from '@/env'
  31. import { computed, watchEffect, nextTick } from 'vue';
  32. import { playSceneGuide, isScenePlayIng, pauseSceneGuide } from '@/sdk'
  33. import { VideoRecorder } from '@simaq/core';
  34. const props = withDefaults(
  35. defineProps<{ guide: Guide, edit?: boolean }>(),
  36. { edit: true }
  37. )
  38. const emit = defineEmits<{
  39. (e: 'delete'): void
  40. (e: 'play'): void
  41. (e: 'edit'): void
  42. }>()
  43. const menus = [
  44. { label: '编辑', value: 'edit' },
  45. { label: '下载', value: 'download' },
  46. { label: '删除', value: 'delete' },
  47. ]
  48. const actions = {
  49. edit: () => emit('edit'),
  50. delete: () => emit('delete'),
  51. download: () => {
  52. const config: any = {
  53. uploadUrl: '',
  54. resolution: '4k',
  55. autoDownload: false,
  56. debug: false,
  57. }
  58. const videoRecorder = new VideoRecorder(config);
  59. videoRecorder.startRecord()
  60. let stopWatch: () => void
  61. const stopRecord = () => {
  62. stopWatch && stopWatch()
  63. pauseSceneGuide()
  64. }
  65. videoRecorder.on('record', blob => {
  66. saveAs(new File([blob], '录屏.mp4', { type: 'video/mp4; codecs=h264' }), props.guide.title + ".mp4")
  67. })
  68. videoRecorder.off('*')
  69. videoRecorder.on('startRecord', () => {
  70. playSceneGuide(paths.value, undefined, true)
  71. stopWatch = watchEffect(() => {
  72. if (!isScenePlayIng.value) {
  73. videoRecorder.endRecord()
  74. nextTick(stopWatch)
  75. }
  76. })
  77. })
  78. videoRecorder.on('cancelRecord', stopRecord)
  79. videoRecorder.on('endRecord', stopRecord)
  80. }
  81. }
  82. const paths = computed(() => getGuidePaths(props.guide))
  83. </script>
  84. <style lang="scss" scoped>
  85. .sign-guide {
  86. display: flex;
  87. justify-content: space-between;
  88. align-items: center;
  89. padding: 20px 0;
  90. border-bottom: 1px solid var(--colors-border-color);
  91. &:first-child {
  92. border-top: 1px solid var(--colors-border-color);
  93. }
  94. .info {
  95. flex: 1;
  96. display: flex;
  97. align-items: center;
  98. .guide-cover {
  99. position: relative;
  100. &::after {
  101. content: '';
  102. position: absolute;
  103. inset: 0;
  104. background: rgba(0,0,0,.2)
  105. }
  106. .icon {
  107. position: absolute;
  108. z-index: 1;
  109. left: 50%;
  110. top: 50%;
  111. transform: translate(-50%, -50%);
  112. font-size: 16px;
  113. }
  114. img {
  115. width: 48px;
  116. height: 48px;
  117. object-fit: cover;
  118. border-radius: 4px;
  119. overflow: hidden;
  120. background-color: rgba(255,255,255,.6);
  121. display: block;
  122. }
  123. }
  124. div {
  125. margin-left: 10px;
  126. p {
  127. color: #fff;
  128. font-size: 14px;
  129. margin-bottom: 6px;
  130. }
  131. }
  132. }
  133. .actions {
  134. flex: none;
  135. }
  136. }
  137. </style>