init

react/features/shared-video/components/native/AbstractVideoManager.ts

@@ -0,0 +1,266 @@
+import { throttle } from 'lodash-es';
+import { PureComponent } from 'react';
+
+import { IReduxState, IStore } from '../../../app/types';
+import { getCurrentConference } from '../../../base/conference/functions';
+import { IJitsiConference } from '../../../base/conference/reducer';
+import { getLocalParticipant } from '../../../base/participants/functions';
+import { setSharedVideoStatus } from '../../actions';
+import { PLAYBACK_STATUSES } from '../../constants';
+
+/**
+ * Return true if the difference between the two times is larger than 5.
+ *
+ * @param {number} newTime - The current time.
+ * @param {number} previousTime - The previous time.
+ * @private
+ * @returns {boolean}
+*/
+function shouldSeekToPosition(newTime: number, previousTime: number) {
+    return Math.abs(newTime - previousTime) > 5;
+}
+
+/**
+ * The type of the React {@link Component} props of {@link AbstractVideoManager}.
+ */
+export interface IProps {
+
+    /**
+     * The current conference.
+     */
+    _conference?: IJitsiConference;
+
+    /**
+     * Is the video shared by the local user.
+     *
+     * @private
+     */
+    _isOwner: boolean;
+
+    /**
+     * The shared video owner id.
+     */
+    _ownerId?: string;
+
+    /**
+     * The shared video status.
+     */
+    _status?: string;
+
+    /**
+     * Seek time in seconds.
+     *
+     */
+    _time: number;
+
+    /**
+     * The video url.
+     */
+    _videoUrl?: string;
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+      * The player's height.
+    */
+    height: number;
+
+    /**
+      * The video id.
+    */
+    videoId: string;
+
+    /**
+      * The player's width.
+    */
+    width: number;
+}
+
+/**
+ * Manager of shared video.
+ */
+abstract class AbstractVideoManager<S=void> extends PureComponent<IProps, S> {
+    throttledFireUpdateSharedVideoEvent: Function;
+
+    /**
+     * Initializes a new instance of AbstractVideoManager.
+     *
+     * @param {IProps} props - Component props.
+     * @returns {void}
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.throttledFireUpdateSharedVideoEvent = throttle(this.fireUpdateSharedVideoEvent.bind(this), 5000);
+    }
+
+    /**
+     * Implements React Component's componentDidMount.
+     *
+     * @inheritdoc
+     */
+    override componentDidMount() {
+        this.processUpdatedProps();
+    }
+
+    /**
+     * Implements React Component's componentDidUpdate.
+     *
+     * @inheritdoc
+     */
+    override componentDidUpdate() {
+        this.processUpdatedProps();
+    }
+
+    /**
+     * Implements React Component's componentWillUnmount.
+     *
+     * @inheritdoc
+     */
+    override componentWillUnmount() {
+        if (this.dispose) {
+            this.dispose();
+        }
+    }
+
+    /**
+     * Processes new properties.
+     *
+     * @returns {void}
+     */
+    async processUpdatedProps() {
+        const { _status, _time, _isOwner } = this.props;
+
+        if (_isOwner) {
+            return;
+        }
+
+        const playerTime = await this.getTime();
+
+        if (shouldSeekToPosition(_time, playerTime)) {
+            this.seek(_time);
+        }
+
+        if (this.getPlaybackStatus() !== _status) {
+            if (_status === PLAYBACK_STATUSES.PLAYING) {
+                this.play();
+            } else if (_status === PLAYBACK_STATUSES.PAUSED) {
+                this.pause();
+            }
+        }
+    }
+
+    /**
+     * Handle video playing.
+     *
+     * @returns {void}
+     */
+    onPlay() {
+        this.fireUpdateSharedVideoEvent();
+    }
+
+    /**
+     * Handle video paused.
+     *
+     * @returns {void}
+     */
+    onPause() {
+        this.fireUpdateSharedVideoEvent();
+    }
+
+    /**
+     * Dispatches an update action for the shared video.
+     *
+     * @returns {void}
+     */
+    async fireUpdateSharedVideoEvent() {
+        const { _isOwner } = this.props;
+
+        if (!_isOwner) {
+            return;
+        }
+
+        const status = this.getPlaybackStatus();
+
+        if (!Object.values(PLAYBACK_STATUSES).includes(status)) {
+            return;
+        }
+
+        const time = await this.getTime();
+
+        const {
+            _ownerId,
+            _videoUrl,
+            dispatch
+        } = this.props;
+
+        dispatch(setSharedVideoStatus({
+            videoUrl: _videoUrl ?? '',
+            status,
+            time,
+            ownerId: _ownerId
+        }));
+    }
+
+    /**
+     * Seeks video to provided time.
+     */
+    abstract seek(time: number): void;
+
+    /**
+     * Indicates the playback state of the video.
+     */
+    abstract getPlaybackStatus(): string;
+
+    /**
+     * Plays video.
+     */
+    abstract play(): void;
+
+    /**
+     * Pauses video.
+     *
+     * @returns {void}
+     */
+    abstract pause(): void;
+
+    /**
+     * Retrieves current time.
+     */
+    abstract getTime(): number;
+
+    /**
+     * Disposes current video player.
+     *
+     * @returns {void}
+     */
+    dispose() {
+        // optional abstract method to be implemented by sub-class
+    }
+}
+
+
+export default AbstractVideoManager;
+
+/**
+ * Maps part of the Redux store to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {IProps}
+ */
+export function _mapStateToProps(state: IReduxState) {
+    const { ownerId, status, time, videoUrl } = state['features/shared-video'];
+    const localParticipant = getLocalParticipant(state);
+
+    return {
+        _conference: getCurrentConference(state),
+        _isOwner: ownerId === localParticipant?.id,
+        _ownerId: ownerId,
+        _status: status,
+        _time: Number(time),
+        _videoUrl: videoUrl
+    };
+}

react/features/shared-video/components/native/ShareVideoConfirmDialog.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ConfirmDialog from '../../../base/dialog/components/native/ConfirmDialog';
+import { DialogProps } from '../../../base/dialog/constants';
+
+interface IProps extends DialogProps {
+
+    /**
+     * The name of the remote participant that shared the video.
+     */
+    actorName: string;
+
+    /**
+     * The function to execute when confirmed.
+     */
+    onSubmit: () => void;
+}
+
+/**
+ * Dialog to confirm playing a video shared from a remote participant.
+ *
+ * @returns {JSX.Element}
+ */
+export default function ShareVideoConfirmDialog({ actorName, onSubmit }: IProps): JSX.Element {
+    const { t } = useTranslation();
+
+    return (
+        <ConfirmDialog
+            cancelLabel = 'dialog.Cancel'
+            confirmLabel = 'dialog.Ok'
+            descriptionKey = 'dialog.shareVideoConfirmPlay'
+            onSubmit = { onSubmit }
+            title = { t('dialog.shareVideoConfirmPlayTitle', {
+                name: actorName
+            }) } />
+    );
+}

react/features/shared-video/components/native/SharedVideo.tsx

@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState, IStore } from '../../../app/types';
+import { getLocalParticipant } from '../../../base/participants/functions';
+import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui/constants';
+import { setToolboxVisible } from '../../../toolbox/actions';
+
+import VideoManager from './VideoManager';
+import YoutubeVideoManager from './YoutubeVideoManager';
+import styles from './styles';
+
+interface IProps {
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * Is the video shared by the local user.
+     *
+     * @private
+     */
+    isOwner: boolean;
+
+    /**
+     * True if in landscape mode.
+     *
+     * @private
+     */
+    isWideScreen: boolean;
+
+    /**
+     * The available player width.
+     */
+    playerHeight: number;
+
+    /**
+     * The available player width.
+     */
+    playerWidth: number;
+
+    /**
+     * The shared video url.
+     */
+    videoUrl?: string;
+}
+
+/** .
+ * Implements a React {@link Component} which represents the large video (a.k.a.
+ * The conference participant who is on the local stage) on Web/React.
+ *
+ * @augments Component
+ */
+class SharedVideo extends Component<IProps> {
+    /**
+     * Initializes a new {@code SharedVideo} instance.
+     *
+     * @param {Object} props - The properties.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.setWideScreenMode(props.isWideScreen);
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidUpdate()}.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidUpdate(prevProps: IProps) {
+        const { isWideScreen } = this.props;
+
+        if (isWideScreen !== prevProps.isWideScreen) {
+            this.setWideScreenMode(isWideScreen);
+        }
+    }
+
+    /**
+     * Dispatches action to set the visibility of the toolbox, true if not widescreen, false otherwise.
+     *
+     * @param {isWideScreen} isWideScreen - Whether the screen is wide.
+     * @private
+     * @returns {void}
+    */
+    setWideScreenMode(isWideScreen: boolean) {
+        this.props.dispatch(setToolboxVisible(!isWideScreen));
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {React$Element}
+     */
+    override render() {
+        const {
+            isOwner,
+            playerHeight,
+            playerWidth,
+            videoUrl
+        } = this.props;
+
+        if (!videoUrl) {
+            return null;
+        }
+
+        return (
+            <View
+                pointerEvents = { isOwner ? 'auto' : 'none' }
+                style = { styles.videoContainer as ViewStyle } >
+                {videoUrl.match(/http/)
+                    ? (
+                        <VideoManager
+                            height = { playerHeight }
+                            videoId = { videoUrl }
+                            width = { playerWidth } />
+                    ) : (
+                        <YoutubeVideoManager
+                            height = { playerHeight }
+                            videoId = { videoUrl }
+                            width = { playerWidth } />
+                    )
+                }
+            </View>
+        );
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated LargeVideo props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const { ownerId, videoUrl } = state['features/shared-video'];
+    const { aspectRatio, clientHeight, clientWidth } = state['features/base/responsive-ui'];
+
+    const isWideScreen = aspectRatio === ASPECT_RATIO_WIDE;
+    const localParticipant = getLocalParticipant(state);
+
+    let playerHeight, playerWidth;
+
+    if (isWideScreen) {
+        playerHeight = clientHeight;
+        playerWidth = playerHeight * 16 / 9;
+    } else {
+        playerWidth = clientWidth;
+        playerHeight = playerWidth * 9 / 16;
+    }
+
+    return {
+        isOwner: ownerId === localParticipant?.id,
+        isWideScreen,
+        playerHeight,
+        playerWidth,
+        videoUrl
+    };
+}
+
+export default connect(_mapStateToProps)(SharedVideo);

react/features/shared-video/components/native/SharedVideoButton.ts

@@ -0,0 +1,113 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { VIDEO_SHARE_BUTTON_ENABLED } from '../../../base/flags/constants';
+import { getFeatureFlag } from '../../../base/flags/functions';
+import { translate } from '../../../base/i18n/functions';
+import { IconPlay } from '../../../base/icons/svg';
+import { getLocalParticipant } from '../../../base/participants/functions';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
+import { toggleSharedVideo } from '../../actions';
+import { isSharingStatus } from '../../functions';
+
+/**
+ * The type of the React {@code Component} props of {@link TileViewButton}.
+ */
+interface IProps extends AbstractButtonProps {
+
+    /**
+     * Whether or not the button is disabled.
+     */
+    _isDisabled: boolean;
+
+    /**
+     * Whether or not the local participant is sharing a video.
+     */
+    _sharingVideo: boolean;
+}
+
+/**
+ * Component that renders a toolbar button for toggling the tile layout view.
+ *
+ * @augments AbstractButton
+ */
+class VideoShareButton extends AbstractButton<IProps> {
+    override accessibilityLabel = 'toolbar.accessibilityLabel.sharedvideo';
+    override icon = IconPlay;
+    override label = 'toolbar.sharedvideo';
+    override toggledLabel = 'toolbar.stopSharedVideo';
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    override _handleClick() {
+        this._doToggleSharedVideo();
+    }
+
+    /**
+     * Indicates whether this button is in toggled state or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    override _isToggled() {
+        return this.props._sharingVideo;
+    }
+
+    /**
+     * Indicates whether this button is disabled or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    override _isDisabled() {
+        return this.props._isDisabled;
+    }
+
+    /**
+     * Dispatches an action to toggle video sharing.
+     *
+     * @private
+     * @returns {void}
+     */
+    _doToggleSharedVideo() {
+        this.props.dispatch(toggleSharedVideo());
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The properties explicitly passed to the component instance.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const { ownerId, status: sharedVideoStatus } = state['features/shared-video'];
+    const localParticipantId = getLocalParticipant(state)?.id;
+    const enabled = getFeatureFlag(state, VIDEO_SHARE_BUTTON_ENABLED, true);
+    const { visible = enabled } = ownProps;
+
+    if (ownerId !== localParticipantId) {
+        return {
+            _isDisabled: isSharingStatus(sharedVideoStatus ?? ''),
+            _sharingVideo: false,
+            visible
+        };
+    }
+
+    return {
+        _isDisabled: false,
+        _sharingVideo: isSharingStatus(sharedVideoStatus ?? ''),
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(VideoShareButton));

react/features/shared-video/components/native/SharedVideoDialog.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import InputDialog from '../../../base/dialog/components/native/InputDialog';
+import { translate } from '../../../base/i18n/functions';
+import AbstractSharedVideoDialog, { IProps } from '../AbstractSharedVideoDialog';
+
+interface IState {
+    error: boolean;
+}
+
+/**
+ * Implements a component to render a display name prompt.
+ */
+class SharedVideoDialog extends AbstractSharedVideoDialog<IState> {
+    /**
+     * Instantiates a new component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            error: false
+        };
+
+        this._onSubmitValue = this._onSubmitValue.bind(this);
+    }
+
+    /**
+     * Callback to be invoked when the value of the link input is submitted.
+     *
+     * @param {string} value - The entered video link.
+     * @returns {boolean}
+     */
+    _onSubmitValue(value: string) {
+        const result = super._onSetVideoLink(value);
+
+        if (!result) {
+            this.setState({ error: true });
+        }
+
+        return result;
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { t } = this.props;
+        const { error } = this.state;
+
+        return (
+            <InputDialog
+                messageKey = { error ? 'dialog.sharedVideoDialogError' : undefined }
+                onSubmit = { this._onSubmitValue }
+                textInputProps = {{
+                    autoCapitalize: 'none',
+                    autoCorrect: false,
+                    placeholder: t('dialog.sharedVideoLinkPlaceholder')
+                }}
+                titleKey = 'dialog.shareVideoTitle' />
+        );
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {IProps}
+ */
+function mapStateToProps(state: IReduxState) {
+    const { allowedUrlDomains } = state['features/shared-video'];
+
+    return {
+        _allowedUrlDomains: allowedUrlDomains
+    };
+}
+
+export default translate(connect(mapStateToProps)(SharedVideoDialog));

react/features/shared-video/components/native/VideoManager.tsx

@@ -0,0 +1,196 @@
+import React, { RefObject } from 'react';
+import Video from 'react-native-video';
+import { connect } from 'react-redux';
+
+import { PLAYBACK_STATUSES } from '../../constants';
+import logger from '../../logger';
+
+import AbstractVideoManager, {
+    IProps,
+    _mapStateToProps
+} from './AbstractVideoManager';
+
+interface IState {
+    currentTime: number;
+    paused: boolean;
+}
+
+/**
+ * Manager of shared video.
+ */
+class VideoManager extends AbstractVideoManager<IState> {
+    playerRef: RefObject<typeof Video>;
+
+    /**
+     * Initializes a new VideoManager instance.
+     *
+     * @param {Object} props - This component's props.
+     *
+     * @returns {void}
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            currentTime: 0,
+            paused: false
+        };
+
+        this.playerRef = React.createRef();
+        this.onPlaybackRateChange = this.onPlaybackRateChange.bind(this);
+        this.onProgress = this.onProgress.bind(this);
+    }
+
+    /**
+     * Retrieves the current player ref.
+     */
+    get player() {
+        return this.playerRef.current;
+    }
+
+    /**
+     * Indicates the playback state of the video.
+     *
+     * @returns {string}
+     */
+    getPlaybackStatus() {
+        let status;
+
+        if (this.state.paused) {
+            status = PLAYBACK_STATUSES.PAUSED;
+        } else {
+            status = PLAYBACK_STATUSES.PLAYING;
+        }
+
+        return status;
+    }
+
+    /**
+     * Retrieves current time.
+     *
+     * @returns {number}
+     */
+    getTime() {
+        return this.state.currentTime;
+    }
+
+    /**
+     * Seeks video to provided time.
+     *
+     * @param {number} time - The time to seek to.
+     *
+     * @returns {void}
+     */
+    seek(time: number) {
+        if (this.player) {
+
+            // @ts-ignore
+            this.player.seek(time);
+        }
+    }
+
+    /**
+     * Plays video.
+     *
+     * @returns {void}
+     */
+    play() {
+        this.setState({
+            paused: false
+        });
+    }
+
+    /**
+     * Pauses video.
+     *
+     * @returns {void}
+     */
+    pause() {
+        this.setState({
+            paused: true
+        });
+    }
+
+    /**
+     * Handles playback rate changed event.
+     *
+     * @param {Object} options.playbackRate - Playback rate: 1 - playing, 0 - paused, other - slowed down / sped up.
+     * @returns {void}
+     */
+    onPlaybackRateChange({ playbackRate }: { playbackRate: number; }) {
+        if (playbackRate === 0) {
+            this.setState({
+                paused: true
+            }, () => {
+                this.onPause();
+            });
+        }
+
+        if (playbackRate === 1) {
+            this.setState({
+                paused: false
+            }, () => {
+                this.onPlay();
+            });
+        }
+    }
+
+    /**
+     * Handles progress update event.
+     *
+     * @param {Object} options - Progress event options.
+     * @returns {void}
+     */
+    onProgress(options: { currentTime: number; }) {
+        this.setState({ currentTime: options.currentTime });
+        this.throttledFireUpdateSharedVideoEvent();
+    }
+
+    /**
+     * Retrieves video tag params.
+     *
+     * @returns {void}
+     */
+    getPlayerOptions() {
+        const { _isOwner, videoId, width, height } = this.props;
+        const { paused } = this.state;
+
+        const options: any = {
+            paused,
+            progressUpdateInterval: 5000,
+            resizeMode: 'cover' as const,
+            style: {
+                height,
+                width
+            },
+            source: { uri: videoId },
+            controls: _isOwner,
+            pictureInPicture: false,
+            onProgress: this.onProgress,
+            onError: (event: Error) => {
+                logger.error('Error in the player:', event);
+            }
+        };
+
+        if (_isOwner) {
+            options.onPlaybackRateChange = this.onPlaybackRateChange;
+        }
+
+        return options;
+    }
+
+    /**
+     * Implements React Component's render.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        return (
+            <Video
+                ref = { this.playerRef }
+                { ...this.getPlayerOptions() } />
+        );
+    }
+}
+
+export default connect(_mapStateToProps)(VideoManager);

react/features/shared-video/components/native/YoutubeVideoManager.tsx

@@ -0,0 +1,203 @@
+import React, { RefObject } from 'react';
+import Video from 'react-native-youtube-iframe';
+import { connect } from 'react-redux';
+
+import { PLAYBACK_STATUSES } from '../../constants';
+
+import AbstractVideoManager, {
+    IProps,
+    _mapStateToProps
+} from './AbstractVideoManager';
+
+/**
+ * Passed to the webviewProps in order to avoid the usage of the ios player on which we cannot hide the controls.
+ *
+ * @private
+ */
+const webviewUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36'; // eslint-disable-line max-len
+
+interface IState {
+    paused: boolean;
+}
+
+/**
+ * Manager of youtube shared video.
+ */
+class YoutubeVideoManager extends AbstractVideoManager<IState> {
+    playerRef: RefObject<typeof Video>;
+
+    /**
+     * Initializes a new VideoManager instance.
+     *
+     * @param {Object} props - This component's props.
+     *
+     * @returns {void}
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            paused: false
+        };
+
+        this.playerRef = React.createRef();
+        this._onReady = this._onReady.bind(this);
+        this._onChangeState = this._onChangeState.bind(this);
+    }
+
+    /**
+     * Retrieves the current player ref.
+     */
+    get player() {
+        return this.playerRef.current;
+    }
+
+    /**
+     * Indicates the playback state of the video.
+     *
+     * @returns {string}
+     */
+    getPlaybackStatus() {
+        let status;
+
+        if (this.state.paused) {
+            status = PLAYBACK_STATUSES.PAUSED;
+        } else {
+            status = PLAYBACK_STATUSES.PLAYING;
+        }
+
+        return status;
+    }
+
+    /**
+     * Retrieves current time.
+     *
+     * @returns {number}
+     */
+    getTime() {
+        // @ts-ignore
+        return this.player?.getCurrentTime();
+    }
+
+    /**
+     * Seeks video to provided time.
+     *
+     * @param {number} time - The time to seek to.
+     *
+     * @returns {void}
+     */
+    seek(time: number) {
+        if (this.player) {
+            // @ts-ignore
+            this.player.seekTo(time);
+        }
+    }
+
+    /**
+     * Plays video.
+     *
+     * @returns {void}
+     */
+    play() {
+        this.setState({
+            paused: false
+        });
+    }
+
+    /**
+     * Pauses video.
+     *
+     * @returns {void}
+     */
+    pause() {
+        this.setState({
+            paused: true
+        });
+    }
+
+    /**
+     * Handles state change event.
+     *
+     * @param {string} event - State event.
+     * @returns {void}
+     */
+    _onChangeState(event: string) {
+        if (event === 'paused') {
+            this.setState({
+                paused: true
+            }, () => {
+                this.onPause();
+            });
+        }
+
+        if (event === PLAYBACK_STATUSES.PLAYING) {
+            this.setState({
+                paused: false
+            }, () => {
+                this.onPlay();
+            });
+        }
+    }
+
+    /**
+     * Handles onReady event.
+     *
+     * @returns {void}
+     */
+    _onReady() {
+        this.setState({
+            paused: false
+        });
+    }
+
+    /**
+     * Retrieves video tag params.
+     *
+     * @returns {void}
+     */
+    getPlayerOptions() {
+        const { _isOwner, videoId, width, height } = this.props;
+
+        const options: any = {
+            height,
+            initialPlayerParams: {
+                controls: _isOwner,
+                modestbranding: true,
+                preventFullScreen: true
+            },
+            play: !this.state.paused,
+            ref: this.playerRef,
+            videoId,
+            volume: 50,
+            webViewProps: {
+                bounces: false,
+                mediaPlaybackRequiresUserAction: false,
+                scrollEnabled: false,
+                userAgent: webviewUserAgent
+            },
+            width
+        };
+
+        if (_isOwner) {
+            options.onChangeState = this._onChangeState;
+            options.onReady = this._onReady;
+        }
+
+        return options;
+    }
+
+    /**
+     * Implements React Component's render.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        return (
+            <Video
+                ref = { this.playerRef }
+                { ...this.getPlayerOptions() } />
+        );
+    }
+}
+
+export default connect(_mapStateToProps)(YoutubeVideoManager);

react/features/shared-video/components/native/styles.ts

@@ -0,0 +1,11 @@
+/**
+ * The style of toolbar buttons.
+ */
+export default {
+    videoContainer: {
+        alignItems: 'center',
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center'
+    }
+};