feat: Video player UI improvements, double click to fullscreen and click to pause

src/lib/components/ContextMenu/ContextMenu.svelte

@@ -74,7 +74,10 @@
 			style={position === 'fixed'
 				? `left: ${
 						fixedPosition.x - (fixedPosition.x > windowWidth / 2 ? menu?.clientWidth : 0)
-				  }px; top: ${fixedPosition.y - (bottom ? (fixedPosition.y > windowHeight / 2 ? menu?.clientHeight : 0) : 0)}px;`
+				  }px; top: ${
+						fixedPosition.y -
+						(bottom ? (fixedPosition.y > windowHeight / 2 ? menu?.clientHeight : 0) : 0)
+				  }px;`
 				: menu?.getBoundingClientRect()?.left > windowWidth / 2
 				? `right: 0;${bottom ? 'bottom: 40px;' : ''}`
 				: `left: 0;${bottom ? 'bottom: 40px;' : ''}`}

src/lib/components/ContextMenu/SelectableContextMenuItem.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import { Check } from 'radix-icons-svelte';
+	import ContextMenuItem from './ContextMenuItem.svelte';
+
+	export let selected = false;
+</script>
+
+<ContextMenuItem on:click>
+	<div class="flex items-center gap-2 justify-between cursor-pointer">
+		<Check
+			size={20}
+			class={classNames({
+				'opacity-0': !selected,
+				'opacity-100': selected
+			})}
+		/>
+		<div class="flex items-center text-left w-32">
+			<slot />
+		</div>
+	</div>
+</ContextMenuItem>

src/lib/components/ContextMenu/SelectableMenuItem.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-    import classNames from 'classnames';
-    import { Check } from "radix-icons-svelte";
-    import ContextMenuItem from "./ContextMenuItem.svelte";
-
-    export let selected = false;
-</script>
-
-<ContextMenuItem on:click>
-    <div class="flex items-center justify-between cursor-pointer">
-        <Check size={20} class={classNames('mr-4', {
-            'opacity-0': !selected,
-            'opacity-100': selected
-        })} />
-        <div class="flex items-center text-left w-32">
-            <slot />
-        </div>
-    </div>
-</ContextMenuItem>