@castlabs/react-native-prestoplay-ios-avplayerviewcontroller 1.0.0

package/ios/AVPlayerViewControllerExtension.swift

@@ -0,0 +1,72 @@
+import AVKit
+import PRESTOplay
+import react_native_prestoplay
+
+class AVPlayerViewControllerExtension: BasePlayerExtension {
+    override init(player: PlayerProtocol, playerEventEmitter: PlayerEventEmitter) {
+        super.init(player: player, playerEventEmitter: playerEventEmitter)
+    }
+
+    override open func onContentLoaded() {
+        // Check if AVPlayerViewController is being used
+        guard let playerViewController = player?.getViewController() else {
+            return
+        }
+        playerViewController.playerDelegate = self;
+    }
+}
+
+@available(tvOS 15.0, *)
+extension AVPlayerViewControllerExtension: PlayerViewControllerProtocol {
+    
+    func didPlayToEnd(_ playerViewController: any PRESTOplay.PlayerViewControllerAPI) {
+        //print ("didPlayToEnd: ", playerViewController.avPlayerInstance?.currentItem)
+    }
+
+    
+    func playerIsClosed(_ playerViewController: any PRESTOplay.PlayerViewControllerAPI) {
+        self.player?.destroy()
+        
+        DispatchQueue.main.async { [weak self] in
+            self?.playerEventEmitter?.emit(
+                consumerId: self?.player?.id ?? "",
+                eventType: "playerClosed",
+                eventDetails: [:],
+                preventDuplicates: false
+            )
+        }
+    }
+
+    func action(_: PlayerViewControllerAPI, ofId id: String, eventName: String, data: String) {
+        
+        // print ("action: id: ", id,"eventName: ", eventName, " data: ", data)
+        
+        emitAction(
+            playerId: player?.id ?? "",
+            actionId: id,
+            eventName: eventName,
+            data: data
+        )
+    }
+    
+    func emitAction(playerId: String,
+                    actionId: String,
+                    eventName: String,
+                    data: String) {
+        
+        DispatchQueue.main.async { [weak self] in
+            self?.playerEventEmitter?.emit(
+                consumerId: playerId,
+                eventType: "appleTvAction",
+                eventDetails: [
+                    "actionId": actionId,
+                    "eventName": eventName,
+                    "data": data
+                ],
+                preventDuplicates: false
+            )
+        }
+    }
+}
+
+

package/ios/ApplePlayerControlsPlugin.swift

@@ -0,0 +1,23 @@
+import PRESTOplay
+import react_native_prestoplay
+
+
+class ApplePlayerControlsPlugin: BasePlugin {
+    override func onSdkWillInitialize() -> [CLPluginProtocol] {
+        // print ("ApplePlayerControlsPlugin - onSdkWillInitialize")
+        #if os(tvOS)
+        return []
+        #else
+        return []
+        #endif
+    }
+
+    override func onPlayerCreated(player: PlayerProtocol, playerEventEmitter: PlayerEventEmitter) {
+        player.addExtension(
+            playerExtension: AVPlayerViewControllerExtension(
+                player: player,
+                playerEventEmitter: playerEventEmitter
+            )
+        )
+    }
+}

package/ios/RNPrestoplayApplePlayerControlsModule.swift

@@ -0,0 +1,192 @@
+import React
+import AVKit
+import PRESTOplay
+import react_native_prestoplay
+
+extension ActionSubMenuItemInfo {
+    public convenience init?(from dic: NSDictionary) {
+        guard let title = dic["title"] as? String else { return nil }
+        guard let value = dic["value"] as? String else { return nil }
+
+        self.init(title: title, value: value)
+    }
+}
+
+extension ActionSubMenuInfo {
+    public convenience init?(from dic: NSDictionary) {
+        guard let menuItems = dic["menuItems"] as? NSArray else { return nil }
+
+        let defaultValue = dic["defaultValue"] as? String
+        let subMenuItemInfos: [ActionSubMenuItemInfo] = menuItems.compactMap {
+            guard let menuItemDic = $0 as? NSDictionary else { return nil }
+            return ActionSubMenuItemInfo(from: menuItemDic)
+        }
+
+        self.init(defaultValue: defaultValue, menuItems: subMenuItemInfos)
+    }
+}
+
+extension ActionButtonInfo {
+    public convenience init?(from dic: NSDictionary) {
+        guard let id = dic["id"] as? String else { return nil }
+        guard let title = dic["title"] as? String else { return nil }
+
+        var subMenuInfo: ActionSubMenuInfo?
+        if let subMenu = dic["subMenu"] as? NSDictionary {
+            subMenuInfo = ActionSubMenuInfo(from: subMenu)
+        }
+        
+        self.init(
+            id: id,
+            title: title,
+            imageName: dic["imageName"] as? String,
+            subMenu: subMenuInfo
+        )
+    }
+}
+
+extension ActionPopupMenuInfo {
+    public convenience init?(from dic: NSDictionary) {
+        guard let title = dic["title"] as? String else { return nil }
+        guard let imageName = dic["imageName"] as? String else { return nil }
+        guard let actions = dic["actions"] as? NSArray else { return nil }
+
+        let actionInfos: [ActionButtonInfo] = actions.compactMap {
+            guard let actionDic = $0 as? NSDictionary else { return nil }
+            return ActionButtonInfo(from: actionDic)
+        }
+
+        self.init(title: title, imageName: imageName, actionInfos: actionInfos)
+    }
+}
+
+extension ContextualActionButtonInfo {
+    public convenience init?(from dic: NSDictionary) {
+        guard let id = dic["id"] as? String else { return nil }
+        guard let title = dic["title"] as? String else { return nil }
+        guard let startSecond = dic["startSecond"] as? CMTimeValue else { return nil }
+        guard let endSecond = dic["endSecond"] as? CMTimeValue else { return nil }
+
+        self.init(
+            id: id,
+            title: title,
+            imageName: dic["imageName"] as? String,
+            startSecond: startSecond,
+            endSecond: endSecond
+        )
+    }
+}
+
+@objc(RNPrestoplayApplePlayerControlsModule)
+class RNPrestoplayApplePlayerControlsModule: NSObject {
+    
+    var playerId: String?;
+
+    override init() {
+        super.init()
+    }
+    
+    private let PLAYER_EVENT = "onPlayerEvent"
+    private let TRANSPORT_BAR_ACTION_EVENT = "onTransportBarActionEvent"
+    private let INFO_BAR_ACTION_EVENT = "onInfoBarActionEvent"
+    private let CONTEXTUAL_ACTION_EVENT = "onContextualActionEvent"
+    
+    @objc(setAppleTvActions:transportBarActions:infoBarActions:contextualActions:resolver:rejecter:)
+    public func setAppleTvActions(
+        _ playerId: String!,
+        _ actionsInfo: [NSDictionary]?,
+        _ infoBarActionsInfo: [NSDictionary]?,
+        _ contextualActionsInfo: [NSDictionary]?,
+        resolver resolve: @escaping RCTPromiseResolveBlock,
+        rejecter reject: @escaping RCTPromiseRejectBlock
+    ) {
+        
+        self.playerId = playerId
+        
+        guard let player = Repository.shared.players.get(key: playerId) else {
+            Rejecter(reject).reject(PrestoPlayError(.fatal, .playerNotFound))
+            return
+        }
+
+        guard let playerViewController = player.getViewController() else {
+            Rejecter(reject).reject(PrestoPlayError(.fatal, .playerNotFound, message: "invalid player type"))
+            return
+        }
+                
+        #if os(tvOS)
+        DispatchQueue.main.async { [weak self] in
+
+            let transportActions: [AnyObject]? = actionsInfo?.compactMap {
+                if let popupMenu = ActionPopupMenuInfo(from: $0) {
+                    return popupMenu
+                } else if let action = ActionButtonInfo(from: $0) {
+                    return action
+                } else {
+                    return nil
+                }
+            }
+
+            if let transportActions {
+                playerViewController.setTransportBarActions(transportActions, eventName: self!.TRANSPORT_BAR_ACTION_EVENT)
+            }
+
+            let infobarActions: [ActionButtonInfo]? = infoBarActionsInfo?.compactMap {
+                if let action = ActionButtonInfo(from: $0) {
+                    return action
+                } else {
+                    return nil
+                }
+            }
+
+            if let infobarActions {
+                playerViewController.setInfoTabActions(infobarActions, eventName: self!.INFO_BAR_ACTION_EVENT)
+            }
+
+            let contextualActions: [ContextualActionButtonInfo]? = contextualActionsInfo?.compactMap {
+                if let action = ContextualActionButtonInfo(from: $0) {
+                    return action
+                } else {
+                    return nil
+                }
+            }
+            if let contextualActions {
+                playerViewController.setContextualActions(contextualActions, eventName: self!.CONTEXTUAL_ACTION_EVENT)
+            }
+            resolve(nil)
+            
+        }
+        #endif
+    }
+
+    @objc(setActionStateAndUi:actionId:state:uiInfo:resolver:rejecter:)
+    public func setActionStateAndUi(
+        _ playerId: String!,
+        _ actionId: String,
+        state: Bool,
+        uiInfo: NSDictionary,
+        resolver resolve: @escaping RCTPromiseResolveBlock,
+        rejecter reject: @escaping RCTPromiseRejectBlock
+    ) {
+        #if os(tvOS)
+
+        guard let player = Repository.shared.players.get(key: playerId) else {
+            Rejecter(reject).reject(PrestoPlayError(.fatal, .playerNotFound))
+            return
+        }
+        guard let playerViewController = player.getViewController() else {
+            Rejecter(reject).reject(PrestoPlayError(.fatal, .playerNotFound, message: "invalid player type"))
+            return
+        }
+
+        DispatchQueue.main.async { [weak self] in
+            playerViewController.setActionState(
+                ofId: actionId,
+                state: state,
+                title: uiInfo["title"] as? String,
+                imageName: uiInfo["imageName"] as? String
+            )
+            resolve(nil)
+        }
+        #endif
+    }
+}

package/ios/RNPrestoplayApplePlayerControlsPluginFactory.swift

@@ -0,0 +1,19 @@
+import React
+import react_native_prestoplay
+
+@objc(RNPrestoplayAVPlayerViewControllerPluginFactory)
+class RNPrestoplayAVPlayerViewControllerPluginFactory: NSObject, RCTBridgeModule, PluginFactoryProtocol {
+
+    static func moduleName() -> String! {
+      return "RNPrestoplayAVPlayerViewControllerPluginFactory"
+    }
+
+    @objc(requiresMainQueueSetup)
+    static func requiresMainQueueSetup() -> Bool {
+        return false
+    }
+
+    public func getPlugin() -> PluginProtocol {
+        return ApplePlayerControlsPlugin()
+    }
+}

package/ios/RNPrestroplay-Bridging-Header.h

@@ -0,0 +1,9 @@
+//
+//  Use this file to import your target's public headers that you would like to expose to Swift.
+//
+
+#import <React/RCTViewManager.h>
+#import <React/RCTUIManager.h>
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+#import <React/RCTRootContentView.h>

package/ios/RNPrestroplayBridge.m

@@ -0,0 +1,26 @@
+#import <Foundation/Foundation.h>
+#import <React/RCTViewManager.h>
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+
+
+@interface RCT_EXTERN_MODULE(RNPrestoplayApplePlayerControlsModule, NSObject)
+
+RCT_EXTERN_METHOD(
+    setAppleTvActions:(nonnull NSString*) playerId
+    transportBarActions:(NSArray *)transportBarActions
+    infoBarActions:(NSArray *)infoBarActions
+    contextualActions:(NSArray *)contextualActions
+    resolver:(RCTPromiseResolveBlock)resolve
+    rejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(
+    setActionStateAndUi:(nonnull NSString*) playerId
+    actionId:(NSString *)id
+    state:(BOOL)state
+    uiInfo:(NSDictionary *)uiInfo
+    resolver:(RCTPromiseResolveBlock)resolve
+    rejecter:(RCTPromiseRejectBlock)reject)
+@end
+
+

package/lib/AVPlayerViewControllerExtension.d.ts

@@ -0,0 +1,28 @@
+import { AppleTvTransportBarActionProps } from './components/AppleTvTransportBarAction.ios';
+import { AppleTvInfoBarActionProps } from './components/AppleTvInfoBarAction.ios';
+import { Player, PlayerExtension, BaseEventEmitter } from '@castlabs/react-native-prestoplay';
+import { AppleTvContextualActionProps } from './components/AppleTvContextualAction.ios';
+import { ActionType } from './types/ActionType';
+import { PopupMenuInternal } from './types/PopupMenuInternal';
+export declare class AVPlayerViewControllerExtension extends PlayerExtension {
+    readonly id: string;
+    private readyToSubmit;
+    private readonly logger;
+    private transportBarActions;
+    private infoBarActions;
+    private contextualActions;
+    private popUpMenus;
+    readonly eventEmitter: BaseEventEmitter;
+    constructor(player: Player);
+    destroy(): void;
+    private onAppleTvAction;
+    private registerTransportBarActions;
+    private registerTransportBarSubMenu;
+    addAction(type: ActionType, actionId: string, props: AppleTvTransportBarActionProps | AppleTvInfoBarActionProps | AppleTvContextualActionProps): void;
+    removeAction(type: ActionType, actionId: string): void;
+    setPopupMenu(menuId: string, popUpMenu: PopupMenuInternal): void;
+    removePopupMenu(menuId: string): void;
+    updateAction(actionId: string, state: boolean, title: string, icon: string): Promise<void>;
+    onContentLoaded(): void;
+    private submitActions;
+}

package/lib/AVPlayerViewControllerExtension.js

@@ -0,0 +1,148 @@
+import { PlayerExtension, rethrowAsPrestoPlayErrorIfPossible, Logger, BaseEventEmitter, } from '@castlabs/react-native-prestoplay';
+import { NativeModules } from 'react-native';
+import { ActionType } from './types/ActionType';
+import { EventType as LocalEventType } from './events/EventType';
+export class AVPlayerViewControllerExtension extends PlayerExtension {
+    id;
+    readyToSubmit = false;
+    logger = new Logger('AVPlayerViewControllerExtension');
+    transportBarActions = [];
+    infoBarActions = [];
+    contextualActions = [];
+    popUpMenus = new Map();
+    eventEmitter;
+    constructor(player) {
+        super(player);
+        this.id = player.id;
+        this.eventEmitter = new BaseEventEmitter();
+        player.addEventListener(LocalEventType.AppleTvAction, this.onAppleTvAction.bind(this));
+    }
+    destroy() {
+        this.player.removeEventListener(LocalEventType.AppleTvAction, this.onAppleTvAction.bind(this));
+    }
+    onAppleTvAction(event) {
+        const details = event.details;
+        this.eventEmitter.emit(details.actionId, event);
+    }
+    registerTransportBarActions(actions) {
+        const actionsResult = [];
+        actions.forEach(action => {
+            actionsResult.push({
+                id: action.id,
+                title: action.title,
+                state: action.state,
+                imageName: action.imageName,
+            });
+        });
+        return actionsResult;
+    }
+    registerTransportBarSubMenu(submenus) {
+        const actions = [];
+        submenus.forEach(menu => {
+            actions.push({
+                id: menu.id,
+                title: menu.title,
+                subMenu: menu,
+            });
+        });
+        return actions;
+    }
+    addAction(type, actionId, props) {
+        if (type === ActionType.InfoBar) {
+            const infoBarProps = props;
+            this.infoBarActions.push({
+                id: actionId,
+                title: props.title,
+                state: infoBarProps.state,
+                imageName: props.icon,
+            });
+        }
+        else if (type === ActionType.Contextual) {
+            const contextualProps = props;
+            this.contextualActions.push({
+                id: actionId,
+                title: props.title,
+                imageName: props.icon,
+                startSecond: contextualProps.startAt,
+                endSecond: contextualProps.endAt,
+            });
+        }
+        else if (type === ActionType.TransportBar) {
+            const transportBarProps = props;
+            this.transportBarActions.push({
+                id: actionId,
+                title: props.title,
+                state: transportBarProps.state,
+                imageName: props.icon,
+            });
+        }
+        if (this.readyToSubmit) {
+            this.submitActions();
+        }
+    }
+    removeAction(type, actionId) {
+        if (type === ActionType.InfoBar) {
+            this.infoBarActions = this.infoBarActions.filter(item => item.id !== actionId);
+        }
+        else if (type === ActionType.Contextual) {
+            this.contextualActions = this.contextualActions.filter(item => item.id !== actionId);
+        }
+        else if (type === ActionType.TransportBar) {
+            this.transportBarActions = this.transportBarActions.filter(item => item.id !== actionId);
+        }
+        if (this.readyToSubmit) {
+            this.submitActions();
+        }
+    }
+    setPopupMenu(menuId, popUpMenu) {
+        const newPopupMenu = {
+            id: menuId,
+            title: popUpMenu.title,
+            imageName: popUpMenu.icon,
+            actions: [],
+        };
+        newPopupMenu.actions.push(...this.registerTransportBarActions(popUpMenu.transportBarActions));
+        newPopupMenu.actions.push(...this.registerTransportBarSubMenu(popUpMenu.subMenus));
+        this.popUpMenus.set(menuId, newPopupMenu);
+        if (this.readyToSubmit) {
+            this.submitActions();
+        }
+    }
+    removePopupMenu(menuId) {
+        this.popUpMenus.delete(menuId);
+        if (this.readyToSubmit) {
+            this.submitActions();
+        }
+    }
+    async updateAction(actionId, state, title, icon) {
+        const update = {
+            title: title,
+            imageName: icon,
+        };
+        await NativeModules.RNPrestoplayApplePlayerControlsModule.setActionStateAndUi(this.player.id, actionId, state, update);
+    }
+    onContentLoaded() {
+        /**
+         * setAppleTvActions must be called after AVPlayerViewController is available
+         * which is after content is loaded due API restrinction on prestroplay-apple
+         */
+        this.readyToSubmit = true;
+        this.submitActions();
+    }
+    async submitActions() {
+        if (!this.player.isApplePlayer) {
+            return;
+        }
+        const transportBarActions = [...this.transportBarActions];
+        this.popUpMenus.forEach((menu, _id) => {
+            transportBarActions.push(menu);
+        });
+        NativeModules.RNPrestoplayApplePlayerControlsModule.setAppleTvActions(this.player.id, transportBarActions, this.infoBarActions, this.contextualActions)
+            .then(() => {
+            this.logger.debug('AVPlayerViewControllerExtension: submitActions done');
+        })
+            .catch((error) => {
+            rethrowAsPrestoPlayErrorIfPossible(error);
+        });
+    }
+}

package/lib/AVPlayerViewControllerPlugin.d.ts

@@ -0,0 +1,15 @@
+import { Player, Plugin } from '@castlabs/react-native-prestoplay';
+/**
+ * Provides {@link AVPlayerViewControllerProvider} integration for iOS and tvOS.
+ *
+ * In case of tvOS, it also enables the use of custom Apple TV player controls
+ * by using the {@link AppleTvPlayerControls} component.
+ *
+ * @group Classes
+ */
+export default class AVPlayerViewControllerPlugin extends Plugin {
+    /** @hidden */
+    getNativePluginFactoryModuleName(): string | null;
+    /** @hidden */
+    onPlayerCreated(player: Player): void;
+}

package/lib/AVPlayerViewControllerPlugin.js

@@ -0,0 +1,20 @@
+import { Plugin } from '@castlabs/react-native-prestoplay';
+import { AVPlayerViewControllerExtension } from './AVPlayerViewControllerExtension';
+/**
+ * Provides {@link AVPlayerViewControllerProvider} integration for iOS and tvOS.
+ *
+ * In case of tvOS, it also enables the use of custom Apple TV player controls
+ * by using the {@link AppleTvPlayerControls} component.
+ *
+ * @group Classes
+ */
+export default class AVPlayerViewControllerPlugin extends Plugin {
+    /** @hidden */
+    getNativePluginFactoryModuleName() {
+        return 'RNPrestoplayAVPlayerViewControllerPluginFactory';
+    }
+    /** @hidden */
+    onPlayerCreated(player) {
+        player.addExtension(new AVPlayerViewControllerExtension(player));
+    }
+}

package/lib/components/AVPlayerViewControllerProvider.ios.d.ts

@@ -0,0 +1,38 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { PlayerConfiguration } from '@castlabs/react-native-prestoplay';
+import AppleTvPlayerControls from './AppleTvPlayerControls.ios';
+/**
+ * Props for the {@link AVPlayerViewControllerProvider} component.
+ *
+ * @group Type Aliases
+ */
+export type AVPlayerViewControllerProviderProps = {
+    /**
+     * The configuration used to initialize the player instance.
+     *
+     * For detailed options, see {@link PlayerConfiguration}.
+     *
+     */
+    playerConfig?: PlayerConfiguration;
+    /**
+     * Callback invoked when the underlying `AVPlayerViewController` is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Child component are not rendered visually, but they can
+     * interact with the player instance.
+     *
+     * This may include {@link AppleTvPlayerControls} for custom tvOS player controls.
+     */
+    children: ReactNode | ReactElement<typeof AppleTvPlayerControls>;
+};
+/**
+ * An alternative to the `PlayerProvider` component, which uses an
+ * AVPlayerViewController to present the player UI on iOS and tvOS.
+ *
+ * You can use the {@link AppleTvPlayerControls} component as a child to
+ * present custom tvOS player controls.
+ *
+ * @group Components
+ */
+export declare const AVPlayerViewControllerProvider: React.NamedExoticComponent<AVPlayerViewControllerProviderProps>;

package/lib/components/AVPlayerViewControllerProvider.ios.js

@@ -0,0 +1,41 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { EventType, PlayerContext, } from '@castlabs/react-native-prestoplay';
+import { Player } from '@castlabs/react-native-prestoplay';
+/**
+ * An alternative to the `PlayerProvider` component, which uses an
+ * AVPlayerViewController to present the player UI on iOS and tvOS.
+ *
+ * You can use the {@link AppleTvPlayerControls} component as a child to
+ * present custom tvOS player controls.
+ *
+ * @group Components
+ */
+export const AVPlayerViewControllerProvider = memo(function ({ playerConfig, onClose, children, }) {
+    const player = useMemo(() => {
+        return new Player(true);
+    }, []);
+    useEffect(() => {
+        const onEvent = (_event) => {
+            onClose && onClose();
+        };
+        player.addEventListener(EventType.PlayerClosed, onEvent);
+        return () => {
+            player.removeEventListener(EventType.PlayerClosed, onEvent);
+            player.destroy();
+        };
+    }, [player, onClose]);
+    // The children might be a new value, while config remains the same.
+    // Avoid creating the new player instance by comparing the hash of the config.
+    const playerConfigHash = JSON.stringify(playerConfig);
+    useEffect(() => {
+        if (playerConfig) {
+            console.info('Opening player with config:', playerConfig);
+            player.open(playerConfig).catch(error => {
+                console.error('Error opening player:', error);
+            });
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [playerConfigHash]);
+    return (<PlayerContext.Provider value={{ player }}>{children}</PlayerContext.Provider>);
+});

package/lib/components/AppleTvContextualAction.ios.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+/**
+ * When you set a value for the {@link AppleTvContextualAction} properties,
+ * the player presents the controls immediately. To present them only during a
+ * relevant section of the content, set the {@link startAt} and {@link endAt}
+ * properties to define the presentation range.
+ *
+ * @group Type Aliases
+ */
+export type AppleTvContextualActionProps = {
+    /** The text of the contextual action button. */
+    title: string;
+    /** The name of the image resource in the Xcode app project. */
+    icon: string;
+    /** The time in seconds when the contextual action becomes visible. */
+    startAt: number;
+    /** The time in seconds when the contextual action stops being visible. */
+    endAt: number;
+    /** Action to be executed when the button is pressed. */
+    onPress: () => void;
+};
+/**
+ * **⚠️ This component is only supported on tvOS.**
+ *
+ * You can use the tvOS player UI to present controls contextually, which you
+ * display for a specific range of time in the content and then dismiss.
+ *
+ * For more details, see Apple documentation: {@link https://developer.apple.com/documentation/avkit/customizing-the-tvos-playback-experience#Present-Actions-Contextually | Present Actions Contextually}.
+ *
+ * @group Components
+ */
+export declare const AppleTvContextualAction: React.FC<AppleTvContextualActionProps>;