<script lang="ts">
  import { createEventDispatcher, onMount } from "svelte";

  const dispatch = createEventDispatcher();
  export let url: string;

  let visible = false;
  onMount(() => {
    visible = true;
  });

  function exit() {
    if (visible == false) {
      dispatch("exit");
    }
  }
</script>

<div
  class="videoPlayer"
  on:click={() => (visible = false)}
  class:visible
  on:transitionend={() => exit()}
>
  <!-- svelte-ignore a11y-media-has-caption -->
  <video controls autoplay src={url} />
</div>

<style lang="scss">
  .videoPlayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background: rgba(0, 0, 0, 0.88);
    video {
      width: 90%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    transition: opacity 0.5s;
    opacity: 0;
    &.visible {
      opacity: 1;
    }
  }
</style>
