fnx_web/svelte/src/file_viewer/viewers/Video.svelte

<script>
import { onMount,  createEventDispatcher, tick } from "svelte";
import { formatDuration } from "../../util/Formatting.svelte";
let dispatch = createEventDispatcher()

export let file = {
	id: "",
	size: 0,
	name: "",
	mime_type: "",
	get_href: "",
	icon_href: "",
	allow_video_player: true,
	show_ads: false,
}

$: loop = file.name.includes(".loop.")

let player
let video_reload = false
let media_session = false

$: update_file(file.id)
const update_file = async () => {
	if (media_session) {
		navigator.mediaSession.metadata = new MediaMetadata({
			title: file.name,
			artist: "pixeldrain",
			album: "unknown",
		});
		console.log("updating media session")
	}

	// When the component receives a new ID the video track does not automatically
	// start playing the new video. So we use this little hack to make sure that the
	// video is unloaded and loaded when the ID changes
	video_reload = true
	await tick()
	video_reload = false
}

onMount(() => {
	if ('mediaSession' in navigator) {
		media_session = true
		navigator.mediaSession.setActionHandler('play', () => player.play());
		navigator.mediaSession.setActionHandler('pause', () => player.pause());
		navigator.mediaSession.setActionHandler('stop', () => player.stop());
		navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("prev", {}));
		navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("next", {}));
		update_file()
	}
})

let download = () => { dispatch("download", {}) }
</script>

<div class="container">
	{#if file.allow_video_player}
		{#if !video_reload}
			<!-- svelte-ignore a11y-media-has-caption -->
			<video
				bind:this={player}
				controls
				playsinline
				autoplay
				loop={loop}
				class="center drop_shadow"
				on:ended={() => {dispatch("next", {})}}
			>
				<source src={file.get_href} type={file.mime_type} />
			</video>
		{/if}
	{:else}
		<h1>This is a video file on pixeldrain</h1>
		<img src={file.icon_href} alt="Video icon" style="display: inline-block; vertical-align: top;">
		<div class="description">
			The online video player on pixeldrain has been disabled to prevent
			abuse. You can still watch videos online by upgrading to Pro. Or
			download the video and watch it locally on your computer.
			<br/>
			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" class="button button_highlight">
				<i class="icon">upgrade</i> Upgrade to Pro
			</a>
			<button on:click={download}>
				<i class="icon">save</i> Download
			</button>
		</div>
		{#if file.show_ads && file.size > 5e8}
			<br/>
			<div class="description" style="max-width: 700px; text-align: center;">
				<!-- If the file is larger than 500 MB-->
				<hr/>
				Your download speed is currently limited to 4 MiB/s. Downloading this
				file for free will take at least
				{formatDuration((file.size/4194304)*1000)}.
				You can
				<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
					upgrade to Pro
				</a>
				to download at the fastest speed available.
			</div>
		{/if}
	{/if}
</div>

<style>
.container{
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	text-align: center;
	overflow: hidden;
}
.center {
	position: relative;
	display: block;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	transform: translateY(-50%);
}
.description {
	display: inline-block;
	text-align: left;
	padding-left: 8px;
	vertical-align: middle;
	max-width: 550px;
}
</style>