<template lang='pug'>
  main#nervmag
    video#nervmag-video(@canplay="canPlay" ref="video")
    canvas#nervmag-canvas(aria-hidden ref="canvas")
    #nervmag-error-dialog(ref="error" role="dialog" aria-hidden="true")
      header
        h1
        | {{ $t("error-title") }}
      main
        p {{ $t("no-webcam") }}
      footer
        button#retry(
          ref="retry"
          v-on:click="mounted"
          :aria-label="$t('retry')"
          :title="$t('retry')"
        )
          svg.icon(viewBox="0 0 512 512")
            use(href="@/img/icons/fontawesome/solid/wrench.svg")
</template>

<i18n src="@/locale/nervmag.json"></i18n>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class NervMag extends Vue {
  public $refs!: {
    video: HTMLVideoElement;
    canvas: HTMLCanvasElement;
    error: HTMLElement;
  };
  public mounted() {
    const self: NervMag = this;
    navigator.mediaDevices.getUserMedia({
      audio : false,
      video : true,
    }).then((stream: any) => {
      self.$refs.error.setAttribute('aria-hidden', 'true');
      self.$refs.video.srcObject = stream;
      self.$refs.video.play();
    }).catch ((err: string) => {
      self.$refs.error.removeAttribute('aria-hidden');
    });
  }
}
</script>

<style scoped lang="stylus">
#nervmag
  height 100%
  width 100%

  #nervmag-video, #nervmag-canvas
    width 100vw
    height 100vh
    position absolute
    top 0
    left 0
    filter brightness(150%) contrast(150%) invert(100%) grayscale(100%)
</style>
