52 lines
919 B
Svelte
52 lines
919 B
Svelte
<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>
|