{% extends "public.html" %} {% block page %}<q-page>
  <iframe
    width="100%"
    height="100%"
    id="iframe_main"
    src="/"
    class="fixed-bottom-left"
  >
  </iframe>
  <video
    autoplay="true"
    id="videoElement"
    style="width: 100%"
    class="fixed-bottom-right"
  ></video>
  <img src="" style="width: 100%" id="animations" class="fixed-bottom-left" />
  {% raw %}
  <qrcode
    style="width: 20%; z-index: 9999"
    :value="{{ lnurl }}"
    :options="{width:150}"
    class="rounded-borders fixed-top-right"
  ></qrcode>
  {% endraw %}
  <q-btn
    color="primary"
    @click="reconnect"
    label="Reconnect"
    class="fixed-bottom-left"
  />
</q-page>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
<style>
  body.body--dark .q-drawer,
  body.body--dark .q-footer,
  body.body--dark .q-header,
  .q-drawer,
  .q-footer,
  .q-header {
    display: none;
  }
  .q-page {
    padding: 0px;
  }
</style>
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data() {
      return {}
    },
    methods: {
      openURL: function (url) {
        console.log(url)
        return Quasar.utils.openURL(url)
      },
      initCamera() {
        var video = document.querySelector('#videoElement')

        if (navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices
            .getUserMedia({video: true})
            .then(function (stream) {
              video.srcObject = stream
            })
            .catch(function (err0r) {
              console.log('Something went wrong!')
            })
        }
      },
      animation1: function () {
        self = this
        setTimeout(function () {
          setInterval(function () {
            self.connection.send('')
          }, 1000)
        }, 2000)
      }
    },
    mounted() {
      this.initCamera()
    },
    created: function () {
      console.log('{{ copilot.id }}')
      if (location.protocol !== 'http:') {
        this.connection = new WebSocket(
          'wss://' +
            document.domain +
            ':' +
            location.port +
            '/copilot/ws/compose/{{ copilot.id }}'
        )
      } else {
        this.connection = new WebSocket(
          'ws://' +
            document.domain +
            ':' +
            location.port +
            '/copilot/ws/compose/{{ copilot.id }}'
        )
      }

      this.connection.addEventListener('open', function (event) {
        this.connection.send('')
      })

      this.connection.addEventListener('message', function (event) {
        res = event.data.split('-')
        console.log(res[1])
        if (res[0] != this.oldRes) {
          this.oldRes = res[0]
          if (res[1] == 'rocket') {
            document.getElementById('animations').style.width = '50%'
            document.getElementById('animations').src =
              '/copilot/static/rocket.gif'
            setTimeout(function () {
              document.getElementById('animations').src = ''
            }, 5000)
          }
          if (res[1] == 'face') {
            document.getElementById('animations').style.width = '50%'
            document.getElementById('animations').src =
              '/copilot/static/face.gif'
            setTimeout(function () {
              document.getElementById('animations').src = ''
            }, 5000)
          }
          if (res[1] == 'bitcoin') {
            document.getElementById('animations').style.width = '30%'
            document.getElementById('animations').src =
              '/copilot/static/bitcoin.gif'
            setTimeout(function () {
              document.getElementById('animations').src = ''
            }, 5000)
          }
          if (res[1] == 'confetti') {
            document.getElementById('animations').style.width = '100%'
            document.getElementById('animations').src =
              '/copilot/static/confetti.gif'
            setTimeout(function () {
              document.getElementById('animations').src = ''
            }, 5000)
          }
          if (res[1] == 'martijn') {
            document.getElementById('animations').style.width = '50%'
            document.getElementById('animations').src =
              '/copilot/static/martijn.gif'
            setTimeout(function () {
              document.getElementById('animations').src = ''
            }, 5000)
          }
          if (res[1] == 'rick') {
            document.getElementById('animations').style.width = '50%'
            document.getElementById('animations').src =
              '/copilot/static/rick.gif'
            setTimeout(function () {
              document.getElementById('animations').src = ''
            }, 5000)
          }
          if (res[1] == 'true') {
            document.getElementById('videoElement').style.width = '20%'
          }
          if (res[1] == 'false') {
            document.getElementById('videoElement').style.width = '100%'
          }
          if (res[1].substring(0, 3) == 'htt') {
            document.getElementById('iframe_main').src = res[1]
          }
        }
      })

      this.connection.addEventListener('close', function (event) {
        console.log('The connection has been closed')
      })
      var animation1 = this.animation1
      animation1()
    }
  })
</script>
{% endblock %}