<template>
  <h2>Camera Stream</h2>
  <div id='playerCont'>
    <video id='player' muted></video>
  </div>
  <button @click='toggleStream()' :disabled='disabled'>
    {{ command }}
  </button>
</template>

<script>
import axios        from 'axios'
import config       from './config'
import GstWebRTCAPI from '@tomoxv/gstwebrtc-api/src/gstwebrtc-api.js'

export default {
  data() {
    return {
      api:       null,
      listener:  null,
      player:    null,
      session:   null,

      command:   'Loading',
      disabled:  true,
      streaming: false
    }
  },
  mounted() {
    this.player = document.getElementById('player')
    this.monitor()
    this.bindStream()
  },
  methods: {
    // Continuously checks if WebRTC stream is running on server
    async monitor() {
      const res = await axios.get(config.api + '/isStreaming')

      switch (res.status) {
      case 200:
        this.command   = res.data ? 'Stop' : 'Play'
        this.disabled  = false
        this.streaming = res.data
        break
      default:
        this.command   = 'Error'
        this.disabled  = true
        this.streaming = false
      }

      setTimeout(this.monitor, 1000)
    },

    // Toggles WebRTC stream
    async toggleStream() {
      const ep  = this.streaming ? '/stopStream' : '/startStream'
      const res = await axios.get(config.api + ep)

      if (res.status != 200) {
        console.error(res)
      }
    },

    // Binds WebRTC stream to video element
    bindStream() {
      this.api = new GstWebRTCAPI({
        meta:               { name: 'WebClient-' + Date.now() },
        signalingServerUrl: 'ws://' + window.location.hostname + ':8443'
      })

      this.listener = {
        producerAdded: (producer) => {
          console.log("Producer added", producer)

          this.session = this.api.createConsumerSession(producer.id)
          this.session.addEventListener('streamsChanged', () => {
            if (this.session.streams.length > 0) {
              this.player.srcObject = this.session.streams[0]
              this.player.play()
            }
          })

          this.session.connect()
        },

        producerRemoved: (producer) => {
          console.log("Producer removed", producer)

          this.player.pause()
          this.player.srcObject = null
          this.session          = null
        }
      }

      this.api.registerProducersListener(this.listener)
    }
  }
}
</script>

<style>
#playerCont {
  background-color: #073642;
}
#player {
  aspect-ratio: 32 / 27;
  display:      block;
  margin:       auto;
  width:        480px;
  max-width:    100%;
}
</style>
