feat: MPV player for both Android and iOS with added HW decoding PiP (with subtitles) (#1332)

Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local>
Co-authored-by: Alex <111128610+Alexk2309@users.noreply.github.com>
Co-authored-by: Simon-Eklundh <simon.eklundh@proton.me>

modules/mpv-player/src/MpvPlayer.types.ts

@@ -86,6 +86,9 @@ export interface MpvPlayerViewRef {
   getAudioTracks: () => Promise<AudioTrack[]>;
   setAudioTrack: (trackId: number) => Promise<void>;
   getCurrentAudioTrack: () => Promise<number>;
+  // Video scaling
+  setZoomedToFill: (zoomed: boolean) => Promise<void>;
+  isZoomedToFill: () => Promise<boolean>;
 }
 
 export type SubtitleTrack = {

modules/mpv-player/src/MpvPlayerView.tsx

@@ -94,6 +94,13 @@ export default React.forwardRef<MpvPlayerViewRef, MpvPlayerViewProps>(
       getCurrentAudioTrack: async () => {
         return await nativeRef.current?.getCurrentAudioTrack();
       },
+      // Video scaling
+      setZoomedToFill: async (zoomed: boolean) => {
+        await nativeRef.current?.setZoomedToFill(zoomed);
+      },
+      isZoomedToFill: async () => {
+        return await nativeRef.current?.isZoomedToFill();
+      },
     }));
 
     return <NativeView ref={nativeRef} {...props} />;

modules/mpv-player/src/MpvPlayerView.web.tsx

@@ -1,14 +1,14 @@
 import { MpvPlayerViewProps } from "./MpvPlayer.types";
 
 export default function MpvPlayerView(props: MpvPlayerViewProps) {
-  const url = props.source?.url;
+  const url = props.source?.url ?? "";
   return (
     <div>
       <iframe
         title='MPV Player'
         style={{ flex: 1 }}
         src={url}
-        onLoad={() => props.onLoad?.({ nativeEvent: { url: url ?? "" } })}
+        onLoad={() => props.onLoad?.({ nativeEvent: { url } })}
       />
     </div>
   );