fix: remove workaround for Safari's iOS fullscreen

* After the merge of vueuse/vueuse#2822, this is implemented upstream

frontend/package.json

@@ -27,8 +27,9 @@
   },
   "dependencies": {
     "@jellyfin/sdk": "0.0.0-unstable.202301101857",
-    "@vueuse/components": "9.12.0",
-    "@vueuse/core": "9.12.0",
+    "@vueuse/components": "10.0.0-beta.0",
+    "@vueuse/core": "10.0.0-beta.0",
+    "@vueuse/integrations": "10.0.0-beta.0",
     "all-iso-language-codes": "1.0.12",
     "axios": "0.27.2",
     "blurhash": "1.1.5",

frontend/src/pages/playback/video/index.vue

@@ -94,7 +94,7 @@
                   class="align-self-center"
                   :tooltip="{ text: $t('fullScreen'), location: 'top' }"
                   :btn="{ icon: true }"
-                  @click="toggleFullscreen">
+                  @click="fullscreen.toggle">
                   <v-icon>
                     <i-mdi-fullscreen v-if="fullscreen.isFullscreen" />
                     <i-mdi-fullscreen-exit v-else />
@@ -167,26 +167,6 @@ function handleMouseMove(): void {
   timeout.start();
 }
 
-/**
- * Toggles the fullscreen view, based on browsers supporting it or not (basically iOS or the others)
- */
-function toggleFullscreen(): void {
-  if (fullscreen.isSupported.value) {
-    fullscreen.toggle();
-  } else if (
-    !fullscreen.isSupported.value &&
-    // @ts-expect-error - Property 'webkitEnterFullScreen' does not exist on type 'HTMLMediaElement'
-    mediaElementRef.value?.webkitEnterFullScreen
-  ) {
-    /**
-     * Use case for iOS where the fullscreen methods on non <video> elements aren't supported
-     */
-    // TODO - if entering FS this way, SSA subs won't display. So we should trigger a new encode
-    // @ts-expect-error - Property 'webkitEnterFullScreen' does not exist on type 'HTMLMediaElement'
-    mediaElementRef.value?.webkitEnterFullScreen();
-  }
-}
-
 onBeforeUnmount(() => {
   if (fullscreen.isFullscreen.value) {
     fullscreen.exit();
@@ -213,7 +193,7 @@ whenever(keys.right, playbackManager.skipForward);
 whenever(keys.l, playbackManager.skipForward);
 whenever(keys.left, playbackManager.skipBackward);
 whenever(keys.j, playbackManager.skipBackward);
-whenever(keys.f, toggleFullscreen);
+whenever(keys.f, fullscreen.toggle);
 whenever(keys.m, playbackManager.toggleMute);
 
 watch(staticOverlay, (val) => {