✨ Add livestream support for iOS (iPhone) devices (#2875)

Author: moisout

client/app/components/flip/Player.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ApiDto } from '@viewtube/shared';
+import { useIsIOS } from '~/composables/videoplayer/isIOS';
 
 const props = defineProps<{
   video: ApiDto<'VTVideoInfoDto'>;
@@ -28,11 +29,12 @@ const videoState = useVideoState({
   autoplay: props.autoplay,
   embed: props.embed
 });
+const { isIOSOnIPhone } = useIsIOS();
 </script>
 
 <template>
   <div class="flip-player" :class="{ embed }">
-    <FlipPlayerUI :video-state="videoState" :video :embed>
+    <FlipPlayerUI :hidden="isIOSOnIPhone" :video-state="videoState" :video :embed>
       <video ref="videoElementRef" class="flip-video-element" />
     </FlipPlayerUI>
   </div>

client/app/components/flip/PlayerUI.vue

@@ -5,11 +5,19 @@ const props = defineProps<{
   videoState: VideoState;
   video: ApiDto<'VTVideoInfoDto'>;
   embed?: boolean;
+  hidden?: boolean;
 }>();
 const flipPlayerUIRef = ref<HTMLDivElement | null>(null);
 
 const captionsState = useCaptionsState(toRef(props, 'video'));
-const uiState = useUIState(props.videoState, toRef(props, 'video'), flipPlayerUIRef, captionsState);
+const isHidden = toRef(props, 'hidden');
+const uiState = useUIState(
+  props.videoState,
+  toRef(props, 'video'),
+  flipPlayerUIRef,
+  captionsState,
+  isHidden
+);
 
 const cursor = computed(() => uiState.cursor.value);
 </script>
@@ -27,7 +35,7 @@ const cursor = computed(() => uiState.cursor.value);
   >
     <slot />
     <Spinner v-if="videoState.video.buffering" class="flip-spinner" />
-    <transition name="flip-fade">
+    <transition v-show="!hidden" name="flip-fade">
       <FlipControls
         v-if="uiState.visible.value"
         :video-state="videoState"

client/app/components/meta/PageHead.vue

@@ -18,6 +18,8 @@ const props = withDefaults(
   }
 );
 
+const runtimeConfig = useRuntimeConfig();
+
 const safelyReturn = (prop: ConditionalPropType, returnValue: string | null = ''): string => {
   if (
     prop !== null &&
@@ -38,6 +40,8 @@ const descriptionString = computed(() => safelyReturn(props.description));
 const imageString = computed(() => safelyReturn(props.image, null));
 
 const videoString = computed(() => safelyReturn(props.video, null));
+
+useHead(JSON.parse(runtimeConfig.public.additionalMeta));
 </script>
 
 <template>

client/app/composables/proxyUrls.ts

@@ -4,9 +4,17 @@ export const useProxyUrls = () => {
   const origin = window?.location?.origin ?? '';
 
   const streamProxy = `${clientApiUrl.value}proxy/stream?originUrl=${origin}&url=`;
+
+  const applyStreamProxy = (url: string) => {
+    if (url.includes(streamProxy)) {
+      return url;
+    }
+    return `${streamProxy}${encodeURIComponent(url)}`;
+  };
+
   return {
     imgProxy: `${clientApiUrl.value}proxy/image?url=`,
-    streamProxy,
+    applyStreamProxy,
     videoPlaybackProxy: `${clientApiUrl.value}videoplayback`,
     textProxy: `${clientApiUrl.value}proxy/text?url=`
   };

client/app/composables/videoplayer/isIOS.ts

@@ -0,0 +1,9 @@
+export const useIsIOS = () => {
+  const isIOSOnIPhone = computed(() => {
+    return /iPhone/.test(navigator?.userAgent);
+  });
+
+  return {
+    isIOSOnIPhone
+  };
+};

client/app/composables/videoplayer/uiState.ts

@@ -1,6 +1,6 @@
+import type { ApiDto } from '@viewtube/shared';
 import { usePopupStore } from '~/store/popup';
 import { useSettingsStore } from '~/store/settings';
-import type { ApiDto } from '@viewtube/shared';
 
 const UI_TIMEOUT = 3000;
 
@@ -10,7 +10,8 @@ export const useUIState = (
   videoState: VideoState,
   video: Ref<ApiDto<'VTVideoInfoDto'>>,
   flipPlayerUIRef: Ref<HTMLDivElement | null>,
-  captionsState: CaptionsState
+  captionsState: CaptionsState,
+  hidden?: Ref<boolean>
 ) => {
   const popupStore = usePopupStore();
   const settingsStore = useSettingsStore();
@@ -219,6 +220,8 @@ export const useUIState = (
   const doubleTouchPosition = ref({ x: 0, y: 0 });
 
   const onPointerDown = (e: PointerEvent) => {
+    if (hidden?.value) return true;
+
     if (e.pointerType === 'touch') {
       touchEvent.value = true;
       if (e.target instanceof HTMLVideoElement) {
@@ -264,6 +267,8 @@ export const useUIState = (
 
   const pointerMoveTimeout = ref<number | NodeJS.Timeout>();
   const onPointerMove = (e: PointerEvent) => {
+    if (hidden?.value) return true;
+
     clearTimeout(pointerMoveTimeout.value);
     pointerMoveTimeout.value = setTimeout(() => {
       if (e.pointerType === 'mouse' && !touchEvent.value) {
@@ -273,6 +278,8 @@ export const useUIState = (
   };
 
   const onPointerLeave = (e: PointerEvent) => {
+    if (hidden?.value) return true;
+
     clearTimeout(pointerMoveTimeout.value);
     if (e.pointerType === 'mouse' && !touchEvent.value) {
       hideUI();
@@ -286,6 +293,8 @@ export const useUIState = (
   const doubleClickTimeout = ref<number | NodeJS.Timeout>();
 
   const onPointerUp = (e: PointerEvent) => {
+    if (hidden?.value) return true;
+
     if (e.pointerType === 'mouse' && e.target instanceof HTMLVideoElement) {
       if (!doubleClickTimeout.value) {
         doubleClickTimeout.value = setTimeout(() => {

client/app/composables/videoplayer/videoSource.ts

@@ -1,8 +1,11 @@
 import { VideoSourceType } from '#imports';
 import type { ApiDto } from '@viewtube/shared';
+import { isHlsSupportedNatively } from '~/utils/videoplayer/support';
+import { useIsIOS } from './isIOS';
 
 export const useVideoSource = (video: Ref<ApiDto<'VTVideoInfoDto'>>) => {
   const config = useRuntimeConfig();
+  const { isIOSOnIPhone } = useIsIOS();
 
   const videoSource = computed(() => {
     let videoPlaybackProxy = `${window.location.origin}/api`;
@@ -17,8 +20,13 @@ export const useVideoSource = (video: Ref<ApiDto<'VTVideoInfoDto'>>) => {
     let sourceType: VideoSourceType = null;
 
     if (video.value.live && video.value.hlsManifestUrl) {
-      sourceType = VideoSourceType.HLS;
-      source = video.value.hlsManifestUrl;
+      if (isHlsSupportedNatively() && isIOSOnIPhone.value) {
+        sourceType = VideoSourceType.NATIVE;
+        source = video.value.hlsManifestUrl;
+      } else {
+        sourceType = VideoSourceType.HLS;
+        source = video.value.hlsManifestUrl;
+      }
     } else if (video.value.dashManifest) {
       const manifest = video.value.dashManifest.replace(googlevideoRegex, videoPlaybackProxy);
       sourceType = VideoSourceType.DASH;

client/app/composables/videoplayer/videoState.ts

@@ -7,6 +7,7 @@ import { useSettingsStore } from '~/store/settings';
 import { useUserStore } from '~/store/user';
 import { useVideoPlayerStore } from '~/store/videoPlayer';
 import { hlsAdapter } from '~/utils/videoplayer/adapters/hlsAdapter';
+import { nativeAdapter } from '~/utils/videoplayer/adapters/nativeAdapter';
 import { rxPlayerAdapter } from '~/utils/videoplayer/adapters/rxPlayerAdapter';
 import { useMediaSession } from './mediaSession';
 
@@ -71,28 +72,40 @@ export const useVideoState = ({
 
     if (sourceType.value === VideoSourceType.DASH) {
       adapterInstance.value = await rxPlayerAdapter({
-        videoElementRef,
+        autoplay,
+        defaultVolume: volumeStorage,
+        loop: settingsStore.alwaysLoopVideo,
+        maximumQuality: settingsStore.maxVideoQuality,
         source,
         startTime,
+        videoElementRef,
         videoState,
-        defaultVolume: volumeStorage,
-        createMessage: messagesStore.createMessage,
-        autoplay,
         videoEnded,
-        maximumQuality: settingsStore.maxVideoQuality,
-        loop: settingsStore.alwaysLoopVideo
+        createMessage: messagesStore.createMessage
       });
     } else if (sourceType.value === VideoSourceType.HLS) {
       adapterInstance.value = await hlsAdapter({
-        videoElementRef,
+        autoplay,
+        defaultVolume: volumeStorage,
+        maximumQuality: settingsStore.maxVideoQuality,
         source,
         startTime,
+        videoElementRef,
         videoState,
-        defaultVolume: volumeStorage,
-        createMessage: messagesStore.createMessage,
+        videoEnded,
+        createMessage: messagesStore.createMessage
+      });
+    } else if (sourceType.value === VideoSourceType.NATIVE) {
+      adapterInstance.value = await nativeAdapter({
         autoplay,
+        defaultVolume: volumeStorage,
+        loop: settingsStore.alwaysLoopVideo,
+        source,
+        startTime,
+        videoElementRef,
+        videoState,
         videoEnded,
-        maximumQuality: settingsStore.maxVideoQuality
+        createMessage: messagesStore.createMessage
       });
     }
   };

client/app/utils/videoSourceType.ts

@@ -1,4 +1,5 @@
 export enum VideoSourceType {
-  HLS = 'application/x-mpegURL',
-  DASH = 'application/dash+xml'
+  HLS = 'application/vnd.apple.mpegurl',
+  DASH = 'application/dash+xml',
+  NATIVE = 'native'
 }

client/app/utils/videoplayer/adapters/hlsAdapter.ts

@@ -13,7 +13,7 @@ export const hlsAdapter = async ({
   createMessage,
   autoplay
 }: HlsAdapterOptions) => {
-  const { streamProxy } = useProxyUrls();
+  const { applyStreamProxy } = useProxyUrls();
 
   const Hls = await import('hls.js').then(module => module.default);
 
@@ -39,19 +39,6 @@ export const hlsAdapter = async ({
             maxRetryDelayMs: 8000
           }
         }
-      },
-      fetchSetup(context, initParams) {
-        if (!context.url.includes(streamProxy)) {
-          context.url = streamProxy + encodeURI(context.url);
-        }
-        return new Request(context.url, initParams);
-      },
-      xhrSetup(xhr: XMLHttpRequest, url: string) {
-        if (!url.includes(streamProxy)) {
-          xhr.open('GET', streamProxy + encodeURI(url), true);
-        } else {
-          xhr.open('GET', url, true);
-        }
       }
     });
     player?.attachMedia(videoElementRef.value);
@@ -212,7 +199,8 @@ export const hlsAdapter = async ({
   };
 
   const loadVideo = () => {
-    playerInstance?.loadSource(source.value);
+    const proxiedSource = applyStreamProxy(source.value);
+    playerInstance?.loadSource(proxiedSource);
   };
 
   const destroy = () => {