BigScreen/src/views/VideoBox/index.vue

<template>
  <div class="video-box w-100%">
    <TopTools />
    <div class="video-box-wrapper mt-10px relative bg-#00000080">
      <UseFullscreen v-slot="{ toggle, isFullscreen }">
        <div class="relative w-full h-full flex">
          <vue-photo-zoom-pro
            ref="zoomRef"
            class="w-full h-full"
            :scale="3"
            :width="200"
            :disabled-event="isZoom"
          >
            <div class="h-full flex items-center">
              <pub-video-new
                class="aspect-ratio-video"
                @click="isShow = false"
                @click.right.prevent="rightClickFn"
              />
            </div>
            <template v-slot:zoomer>
              <pub-video-new newClass="zoom-video" class="h-full" :key="resetKey" />
            </template>
          </vue-photo-zoom-pro>
          <div class="flex items-center z-99 absolute right-8px top-8px">
            <ul class="flex justify-around items-center mr-2">
              <li
                v-for="item in listComputed"
                class="mr-3 last:mr-0"
                :key="item.iCom"
                v-auth="item.auth"
                @click.stop="toolsHandler(item.type)"
              >
                <div
                  :class="[item.iCom, 'cursor-pointer']"
                  :style="{ width: item.w + 'px', height: item.h + 'px', color: item.color }"
                >
                </div>
                <!-- <Icon
                  v-else
                  :class="[item.class]"
                  :icon="item.iCom"
                  :color="item.color"
                  :width="item.w"
                  :height="item.h"
                /> -->
              </li>
            </ul>
            <span
              class="size-28px mr-2 color-#8ac5ff cursor-pointer i-ph:magnifying-glass-plus"
              @click="magnifying(!magnifyingFlag)"
            ></span>
            <!-- 全屏按钮 -->
            <div v-auth="['mrfullScreenBtn']">
              <span
                v-if="isFullscreen"
                class="block size-28px color-#8ac5ff cursor-pointer i-icon-park-outline:off-screen"
                @click="toggle"
              ></span>
              <span
                v-else
                class="block size-28px color-#8ac5ff cursor-pointer i-iconamoon:screen-full"
                @click="toggle"
              ></span>
            </div>
          </div>
          <div
            v-if="loading"
            class="absolute top-50% left-50% transform-translate--50% flex justify-center items-center"
          >
            <NSpin />
          </div>
        </div>
      </UseFullscreen>

      <TagBox
        v-auth="['mrpanoramicTagShow']"
        v-for="(tag, i) in tagList"
        :key="i"
        :index="i"
        :tag="tag"
      ></TagBox>
      <RightClick v-auth="['mrtagCreationBtn']" v-model="isShow" :x="xy.x" :y="xy.y" />
    </div>
  </div>
</template>

<script setup>
  import { useModal, NSpin } from 'naive-ui'
  // import useWorker from '@/assets/js/video-lib/omnimatrix-video-player'
  // import { useWindowSize, watchDebounced } from '@vueuse/core'
  import { omatVideoPlayer } from '@/assets/js/video-lib/flv/omatVideoPlayer'
  import { useOutsideSystemStore } from '@/stores/modules/system.js'
  import { useOutsideTagStore } from '@/stores/modules/tag.js'
  import TagBox from './components/tagBox.vue'
  import RemotePlayback from './RemotePlayback/RemotePlayback.vue'

  import { UseFullscreen } from '@vueuse/components'
  import { $mitt, uuid } from '@/utils'
  import RightClick from './components/rightClick.vue'
  import TopTools from './components/topTools.vue'
  import VuePhotoZoomPro from 'vue-photo-zoom-pro'
  import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'

  const props = defineProps({
    id: Number,
    RtspMain: String
  })
  const playbackModal = useModal()
  const useSystem = useOutsideSystemStore()
  const useTag = useOutsideTagStore()
  const loading = ref(true)
  let playerObj = null
  let magnifyingWorkerObj = null

  const videoList = computed(() => useSystem.videoList)
  const tagList = ref([])
  let tagListClone = []

  const init = async () => {
    loading.value = true
    const { url } = await useSystem.getStream({ device_id: props.RtspMain })
    useSystem.videoUrl = url
    console.log('url', url)
    try {
      playerObj = omatVideoPlayer(
        '.pub-video',
        url,
        () => {
          loading.value = false
          setTimeout(() => {
            useSystem.setRatio()
            useTag.getGroupTag()
          }, 50)
        },
        {
          enableZoom: false,
          enableDrag: false
        }
      )
    } catch (error) {
      console.log(error)
    }
  }

  const xy = ref({ x: 0, y: 0 })
  const rightClickFn = (event) => {
    isShow.value = true

    xy.value.x = event.offsetX
    xy.value.y = event.offsetY
  }

  const isShow = ref(false)

  // watchDebounced([width, height], useSystem.setRatio, { debounce: 500, maxWait: 1000 })
  // watch(
  //   () => useSystem.ratio,
  //   () => {
  //     const [t, tc] = useTag.initTagList()
  //     tagList.value = t
  //     tagListClone = tc
  //   }
  // )
  const isZoom = ref(true)
  const zoomRef = ref(null)
  const resetKey = ref(uuid())
  const magnifyingFlag = ref(false)
  const magnifying = (flag) => {
    zoomRef.value?.mouseLeave()
    magnifyingFlag.value = flag
    if (flag) {
      if (magnifyingWorkerObj) return
      // const url = videoList.value.pano_view.replace('{14}', useSystem.deviceInfo.id)
      magnifyingWorkerObj = omatVideoPlayer('.zoom-video', useSystem.videoUrl, () => {
        isZoom.value = false
        zoomRef.value.mouseEnter()
      })
    } else {
      isZoom.value = true
      zoomRef.value.mouseLeave()
      magnifyingWorkerObj?.destroyed()
      resetKey.value = uuid()
      magnifyingWorkerObj = null
    }
  }
  useTag.$subscribe(() => {
    const [t, tc] = useTag.initTagList()
    tagList.value = t
    tagListClone = tc
  })
  const keyupHedler = (e) => {
    if (e.code === 'Escape') {
      if (magnifyingFlag.value) {
        magnifying(false)
      }
    }
  }

  const listComputed = computed(() => {
    return tools.value.map((item) => {
      if (item.type === 'lx') {
        if (state.value) {
          item.iCom = 'i-fad:armrecording showhide-anim'
          item.color = 'red'
        } else {
          item.iCom = 'i-gala-video'
          item.color = '#8ac5ff'
          item.class = ''
        }
      }
      return item
    })
  })
  const tools = ref([
    {
      iCom: 'i-fluent-mdl2-playback-rate-1x',
      label: '远程回放',
      color: '#8ac5ff',
      type: 'hf',
      w: 25,
      h: 25,
      auth: ['mrpanoramicPlaybackBtn']
    },
    {
      iCom: 'i-iconoir:screenshot',
      label: '截图',
      color: '#8ac5ff',
      type: 'jt',
      w: 25,
      h: 25,
      auth: ['mrscreenshotBtn']
    },
    {
      iCom: 'i-gala-video',
      label: '录像',
      type: 'lx',
      color: '#8ac5ff',
      class: '',
      w: 30,
      h: 30,
      auth: ['mrrecordingBtn']
    }
  ])
  const state = ref(false)
  const toolsHandler = (type) => {
    switch (type) {
      case 'lx':
        // switchState()
        state.value = !state.value
        playerObj.recording(state.value)
        break
      case 'jt':
        playerObj.screenshot()
        break
      case 'hf':
        {
          const m = playbackModal.create({
            title: '全景回放',
            preset: 'card',
            maskClosable: false,
            autoFocus: false,
            style: {
              width: '60%',
              marginTop: '10%'
            },
            content: () => h(RemotePlayback, { device_id: props.RtspMain })
          })
        }
        break
    }
  }

  onMounted(() => {
    init()
    document.body.addEventListener('keyup', keyupHedler)
  })
  onUnmounted(() => {
    playerObj?.destroyed()
    keyupHedler({ code: 'Escape' })
    document.body.removeEventListener('keyup', keyupHedler)
  })
</script>