<template>
  <v-btn
    fab
    text
    large
    style="position: absolute; top: calc(50% - 2rem); left: calc(50% - 2rem)"
    color="white"
    @click.stop="
      (paused = !video.paused),
        video.paused ? (video.play(), $emit('close')) : video.pause()
    "
  >
    <v-icon size="3.5rem">
      {{ paused ? "mdi-play" : "mdi-pause" }}
    </v-icon>
  </v-btn>
</template>

<script>
export default {
  props: ["video"],
  emits: ["close"],
  data: () => ({
    paused: false,
  }),
};
</script>
