smsb-web-develop/src/components/external/camera/CameraPlayer/index.vue

<template>
  <div
    class="o-video"
    :class="{ offline: !online, mask: !isPlaying, controls }"
  >
    <template v-if="online">
      <video
        ref="video"
        class="o-video__player o-simple-video"
        :poster="poster"
        autoplay
        muted
        @play="onVideoPlay"
        @pause="onVideoPause"
        @waiting="onVideoWaiting"
        @playing="onVideoPlaying"
        @error="onVideoError"
        @ended="onVideoEnded"
      />
      <div class="o-video__mask">
        <div
          class="l-flex--row center o-video__btn u-pointer"
          @click.stop="onPlayOrPause"
        >
          <i :class="statusIconClass" />
        </div>
      </div>
    </template>
    <div
      v-else
      class="o-video__tag"
    />
    <div
      v-if="controls"
      class="l-flex--row c-footer"
    >
      <div class="l-flex__auto c-sibling-item u-ellipsis">{{ camera.name }}</div>
      <slot />
      <i
        v-if="online"
        class="c-sibling-item el-icon-full-screen has-active u-pointer"
        @click="onFullScreen"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { GATEWAY_CAMERA } from '@/constant'
import playerMixin from '../../player'

export default {
  name: 'CameraPlayer',
  mixins: [playerMixin],
  props: {
    camera: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapGetters(['token']),
    online () {
      return this.camera.onlineStatus === 1
    }
  },
  watch: {
    online (val) {
      if (val) {
        this.$nextTick(this.createPlayer)
      } else {
        this.destroyPlayer()
      }
    }
  },
  mounted () {
    this.online && this.createPlayer()
  },
  methods: {
    createPlayer () {
      this.playUrl(`${GATEWAY_CAMERA}/${this.camera.identifier}?authorization=${this.token}`)
    }
  }
}
</script>