ios VLCKit 4.0 & All platform PiP support

components/video-player/controls/Controls.tsx

@@ -24,7 +24,7 @@ import {
   ticksToMs,
   ticksToSeconds,
 } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
+import {Ionicons, MaterialIcons} from "@expo/vector-icons";
 import {
   BaseItemDto,
   MediaSourceInfo,
@@ -35,7 +35,7 @@ import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useAtom } from "jotai";
 import { debounce } from "lodash";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { TouchableOpacity, useWindowDimensions, View } from "react-native";
+import {Platform, TouchableOpacity, useWindowDimensions, View} from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
   runOnJS,
@@ -75,6 +75,7 @@ interface Props {
   isVideoLoaded?: boolean;
   mediaSource?: MediaSourceInfo | null;
   seek: (ticks: number) => void;
+  startPictureInPicture: () => Promise<void>;
   play: (() => Promise<void>) | (() => void);
   pause: () => void;
   getAudioTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
@@ -91,6 +92,7 @@ const CONTROLS_TIMEOUT = 4000;
 export const Controls: React.FC<Props> = ({
   item,
   seek,
+  startPictureInPicture,
   play,
   pause,
   togglePlay,
@@ -212,6 +214,8 @@ export const Controls: React.FC<Props> = ({
       bitrateValue: bitrateValue.toString(),
     }).toString();
 
+    stop()
+
     if (!bitrateValue) {
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
@@ -250,6 +254,8 @@ export const Controls: React.FC<Props> = ({
       bitrateValue: bitrateValue.toString(),
     }).toString();
 
+    stop()
+
     if (!bitrateValue) {
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
@@ -413,6 +419,8 @@ export const Controls: React.FC<Props> = ({
           bitrateValue: bitrateValue.toString(),
         }).toString();
 
+        stop()
+
         if (!bitrateValue) {
           // @ts-expect-error
           router.replace(`player/direct-player?${queryParams}`);
@@ -499,6 +507,15 @@ export const Controls: React.FC<Props> = ({
     );
   }, [trickPlayUrl, trickplayInfo, time]);
 
+  const onClose = async () => {
+    stop()
+    lightHapticFeedback();
+    await ScreenOrientation.lockAsync(
+      ScreenOrientation.OrientationLock.PORTRAIT_UP
+    );
+    router.back();
+  };
+
   return (
     <ControlProvider
       item={item}
@@ -551,6 +568,19 @@ export const Controls: React.FC<Props> = ({
             </View>
 
             <View className="flex flex-row items-center space-x-2 ">
+              {!Platform.isTV && (
+                <TouchableOpacity
+                  onPress={startPictureInPicture}
+                >
+                  <MaterialIcons
+                    name="picture-in-picture"
+                    size={24}
+                    color="white"
+                    style={{ opacity: showControls ? 1 : 0 }}
+                  />
+                </TouchableOpacity>
+              )}
+
               {item?.Type === "Episode" && !offline && (
                 <TouchableOpacity
                   onPress={() => {
@@ -592,13 +622,7 @@ export const Controls: React.FC<Props> = ({
               </TouchableOpacity>
               {/* )} */}
               <TouchableOpacity
-                onPress={async () => {
-                  lightHapticFeedback();
-                  await ScreenOrientation.lockAsync(
-                    ScreenOrientation.OrientationLock.PORTRAIT_UP
-                  );
-                  router.back();
-                }}
+                onPress={onClose}
                 className="aspect-square flex flex-col rounded-xl items-center justify-center p-2"
               >
                 <Ionicons name="close" size={24} color="white" />