init

react/features/mobile/picture-in-picture/actionTypes.ts

@@ -0,0 +1,11 @@
+/**
+ * The type of redux action to enter (or rather initiate entering)
+ * picture-in-picture.
+ *
+ * {
+ *      type: ENTER_PICTURE_IN_PICTURE
+ * }
+ *
+ * @public
+ */
+export const ENTER_PICTURE_IN_PICTURE = 'ENTER_PICTURE_IN_PICTURE';

react/features/mobile/picture-in-picture/actions.ts

@@ -0,0 +1,42 @@
+import { NativeModules } from 'react-native';
+
+import { IStore } from '../../app/types';
+import Platform from '../../base/react/Platform.native';
+
+import { ENTER_PICTURE_IN_PICTURE } from './actionTypes';
+import { isPipEnabled } from './functions';
+import logger from './logger';
+
+/**
+ * Enters (or rather initiates entering) picture-in-picture.
+ * Helper function to enter PiP mode. This is triggered by user request
+ * (either pressing the button in the toolbox or the home button on Android)
+ * and this triggers the PiP mode, iff it's available and we are in a
+ * conference.
+ *
+ * @public
+ * @returns {Function}
+ */
+export function enterPictureInPicture() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        // XXX At the time of this writing this action can only be dispatched by
+        // the button which is on the conference view, which means that it's
+        // fine to enter PiP mode.
+        if (isPipEnabled(getState())) {
+            const { PictureInPicture } = NativeModules;
+            const p
+                = Platform.OS === 'android'
+                    ? PictureInPicture
+                        ? PictureInPicture.enterPictureInPicture()
+                        : Promise.reject(
+                            new Error('Picture-in-Picture not supported'))
+                    : Promise.resolve();
+
+            p.catch((e: string) => logger.warn(`Error entering PiP mode: ${e}`));
+
+            // We should still dispatch ENTER_PICTURE_IN_PICTURE for cases where
+            // the external app needs to handle the event (ie. react-native-sdk)
+            p.finally(() => dispatch({ type: ENTER_PICTURE_IN_PICTURE }));
+        }
+    };
+}

react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts

@@ -0,0 +1,65 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions';
+import { IconArrowDown } from '../../../base/icons/svg';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
+import { enterPictureInPicture } from '../actions';
+import { isPipEnabled } from '../functions';
+
+interface IProps extends AbstractButtonProps {
+
+    /**
+     * Whether Picture-in-Picture is enabled or not.
+     */
+    _enabled: boolean;
+}
+
+/**
+ * An implementation of a button for entering Picture-in-Picture mode.
+ */
+class PictureInPictureButton extends AbstractButton<IProps> {
+    override accessibilityLabel = 'toolbar.accessibilityLabel.pip';
+    override icon = IconArrowDown;
+    override label = 'toolbar.pip';
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @protected
+     * @returns {void}
+     */
+    override _handleClick() {
+        this.props.dispatch(enterPictureInPicture());
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {React$Node}
+     */
+    override render() {
+        return this.props._enabled ? super.render() : null;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code PictureInPictureButton} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _enabled: boolean
+ * }}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const enabled = isPipEnabled(state);
+
+    return {
+        _enabled: enabled
+    };
+}
+
+export default translate(connect(_mapStateToProps)(PictureInPictureButton));

react/features/mobile/picture-in-picture/functions.ts

@@ -0,0 +1,36 @@
+import { NativeModules, Platform } from 'react-native';
+
+import { IReduxState } from '../../app/types';
+import { PIP_ENABLED } from '../../base/flags/constants';
+import { getFeatureFlag } from '../../base/flags/functions';
+
+/**
+ * Checks whether Picture-in-Picture is enabled.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {boolean} Whether PiP is enabled or not.
+ */
+export function isPipEnabled(state: IReduxState) {
+    let enabled = getFeatureFlag(state, PIP_ENABLED);
+
+    // Override flag for Android, since it might be unsupported.
+    if (Platform.OS === 'android' && (typeof enabled === 'undefined' || enabled)) {
+        enabled = NativeModules.PictureInPicture.SUPPORTED;
+    }
+
+    return Boolean(enabled);
+}
+
+/**
+ * Enabled/Disables the PictureInPicture mode in PiP native module.
+ *
+ * @param {boolean} enabled - Whether the PiP mode should be enabled.
+ * @returns {void}
+ */
+export function setPictureInPictureEnabled(enabled: boolean) {
+    const { PictureInPicture } = NativeModules;
+
+    if (PictureInPicture) {
+        PictureInPicture.setPictureInPictureEnabled(enabled);
+    }
+}

react/features/mobile/picture-in-picture/logger.ts

@@ -0,0 +1,3 @@
+import { getLogger } from '../../base/logging/functions';
+
+export default getLogger('features/mobile/pip');