{% 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" />

  <div
    v-if="'{{ lnurl_toggle }}' == 1"
    class="rounded-borders fixed-top-right column"
    style="width: 350px; z-index: 9999; background-color: white"
  >
    <div class="col">
      <qrcode
        :value="'{{ lnurl }}'"
        :options="{width:350}"
        class="rounded-borders"
      ></qrcode>
    </div>
    <div
      class="col"
      style="
        font-size: 25px;
        background-color: white;
        color: black;
        width: 100%;
      "
    >
      <center>{{ copilot.lnurl_title }}</center>
    </div>
  </div>

  <h2
    v-if="'{{ copilot.show_price }}' != 'None'"
    class="text-bold fixed-bottom-left"
    style="
      margin: 60px 60px;
      font-size: 150px;
      text-shadow: 4px 8px 4px black;
      color: white;
    "
  >
    {% raw %}{{ price }}{% endraw %}
  </h2>
  <p
    v-if="'{{ copilot.show_ack }}' != 'None'"
    class="fixed-top"
    style="
      font-size: 22px;
      text-shadow: 2px 4px 1px black;
      color: white;
      padding-left: 40%;
    "
  >
    Powered by LNbits/StreamerCopilot
  </p>
</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 {
        price: '',
        counter: 1
      }
    },
    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('')
            self.counter++
            if (self.counter % 20 === 0) {
              if ('{{ copilot.show_price }}' != 'None') {
                LNbits.api
                  .request('GET', 'https://api.opennode.com/v1/rates', 'filla')
                  .then(function (response) {
                    self.price = String(
                      new Intl.NumberFormat('en-US', {
                        style: 'currency',
                        currency: 'USD'
                      }).format(response.data.data.BTCUSD.USD)
                    )
                    console.log(self.price)
                  })
                  .catch(function (error) {
                    LNbits.utils.notifyApiError(error)
                  })
              }
            }
          }, 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').style.height = '100%'
            document.getElementById('animations').src =
              '/copilot/static/confetti.gif'
            setTimeout(function () {
              document.getElementById('animations').src = ''
              document.getElementById('animations').style.height = ''
            }, 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 %}