feat: Rework video player

src/lib/components/VideoPlayer/VideoPlayer.ts

@@ -1,7 +1,14 @@
 import { writable } from 'svelte/store';
 import { modalStack } from '../Modal/modal.store';
 import { jellyfinItemsStore } from '../../stores/data.store';
-import VideoPlayerModal from './VideoPlayerModal.svelte';
+import VideoPlayerModal from './JellyfinVideoPlayerModal.svelte';
+
+export type PlaybackInfo = {
+	playbackUrl: string;
+	directPlay: boolean;
+	backdrop?: string;
+	startTime?: number;
+};
 
 const initialValue = { visible: false, jellyfinId: '' };
 export type PlayerStateValue = typeof initialValue;
@@ -23,3 +30,72 @@ function createPlayerState() {
 }
 
 export const playerState = createPlayerState();
+
+export function getBrowserSpecificMediaFunctions() {
+	// These functions are different in every browser
+	let reqFullscreenFunc: ((elem: HTMLElement) => void) | undefined = undefined;
+	let exitFullscreen: (() => void) | undefined = undefined;
+	let fullscreenChangeEvent: string | undefined = undefined;
+	let getFullscreenElement: (() => HTMLElement) | undefined = undefined;
+
+	// Find the correct functions
+	let elem = document.createElement('div');
+	// @ts-expect-error
+	if (elem.requestFullscreen) {
+		reqFullscreenFunc = (elem) => {
+			elem.requestFullscreen();
+		};
+		fullscreenChangeEvent = 'fullscreenchange';
+		getFullscreenElement = () => <HTMLElement>document.fullscreenElement;
+		if (document.exitFullscreen) exitFullscreen = () => document.exitFullscreen();
+
+		// @ts-expect-error
+	} else if (elem.webkitRequestFullscreen) {
+		reqFullscreenFunc = (elem) => {
+			// @ts-expect-error
+			elem.webkitRequestFullscreen();
+		};
+		fullscreenChangeEvent = 'webkitfullscreenchange';
+
+		// @ts-expect-error
+		getFullscreenElement = () => <HTMLElement>document.webkitFullscreenElement;
+
+		// @ts-expect-error
+		if (document.webkitExitFullscreen) exitFullscreen = () => document.webkitExitFullscreen();
+
+		// @ts-expect-error
+	} else if (elem.msRequestFullscreen) {
+		reqFullscreenFunc = (elem) => {
+			// @ts-expect-error
+			elem.msRequestFullscreen();
+		};
+		fullscreenChangeEvent = 'MSFullscreenChange';
+
+		// @ts-expect-error
+		getFullscreenElement = () => <HTMLElement>document.msFullscreenElement;
+
+		// @ts-expect-error
+		if (document.msExitFullscreen) exitFullscreen = () => document.msExitFullscreen();
+
+		// @ts-expect-error
+	} else if (elem.mozRequestFullScreen) {
+		reqFullscreenFunc = (elem) => {
+			// @ts-expect-error
+			elem.mozRequestFullScreen();
+		};
+		fullscreenChangeEvent = 'mozfullscreenchange';
+
+		// @ts-expect-error
+		getFullscreenElement = () => <HTMLElement>document.mozFullScreenElement;
+
+		// @ts-expect-error
+		if (document.mozCancelFullScreen) exitFullscreen = () => document.mozCancelFullScreen();
+	}
+
+	return {
+		reqFullscreenFunc,
+		exitFullscreen,
+		fullscreenChangeEvent,
+		getFullscreenElement
+	};
+}