feat: show on stage function

css/_font.scss

@@ -25,6 +25,9 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-enlarge:before {
+  content: "\e90a";
+}
 .icon-signal_cellular_0:before {
   content: "\e901";
 }

fonts/jitsi.svg

@@ -37,6 +37,7 @@
 <glyph unicode="&#xe907;" glyph-name="signal_cellular_2" d="M86 86l852 852v-852h-852z" />
 <glyph unicode="&#xe908;" glyph-name="share-doc" d="M554 640h236l-236 234v-234zM682 426v86h-340v-86h340zM682 256v86h-340v-86h340zM598 938l256-256v-512c0-46-40-84-86-84h-512c-46 0-86 38-86 84l2 684c0 46 38 84 84 84h342z" />
 <glyph unicode="&#xe909;" glyph-name="ninja" d="M330.667 469.333c-0.427 14.933 6.4 29.44 17.92 39.253 32-6.827 61.867-20.053 88.747-39.253 0-29.013-23.893-52.907-53.333-52.907s-52.907 23.467-53.333 52.907zM586.667 469.333c26.88 18.773 56.747 32 88.747 38.827 11.52-9.813 18.347-24.32 17.92-38.827 0-29.867-23.893-53.76-53.333-53.76s-53.333 23.893-53.333 53.76v0zM512 640c-118.187 1.707-234.667-27.733-338.347-85.333l-2.987-42.667c0-52.48 12.373-104.107 35.84-151.040 101.12 15.36 203.093 23.040 305.493 23.040s204.373-7.68 305.493-23.040c23.467 46.933 35.84 98.56 35.84 151.040l-2.987 42.667c-103.68 57.6-220.16 87.040-338.347 85.333zM512 938.667c235.641 0 426.667-191.025 426.667-426.667s-191.025-426.667-426.667-426.667c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667z" />
+<glyph unicode="&#xe90a;" glyph-name="enlarge" d="M896 212v600h-768v-600h768zM896 896q34 0 60-26t26-60v-596q0-34-26-60t-60-26h-768q-34 0-60 26t-26 60v596q0 34 26 60t60 26h768zM598 342l-86-108-86 108h172zM256 598v-172l-106 86zM768 598l106-86-106-86v172zM512 790l86-108h-172z" />
 <glyph unicode="&#xe90b;" glyph-name="full-screen" d="M598 810h212v-212h-84v128h-128v84zM726 298v128h84v-212h-212v84h128zM214 598v212h212v-84h-128v-128h-84zM298 426v-128h128v-84h-212v212h84z" />
 <glyph unicode="&#xe90c;" glyph-name="exit-full-screen" d="M682 682h128v-84h-212v212h84v-128zM598 214v212h212v-84h-128v-128h-84zM342 682v128h84v-212h-212v84h128zM214 342v84h212v-212h-84v128h-128z" />
 <glyph unicode="&#xe90d;" glyph-name="security" d="M768 170v428h-512v-428h512zM768 682c46 0 86-38 86-84v-428c0-46-40-84-86-84h-512c-46 0-86 38-86 84v428c0 46 40 84 86 84h388v86c0 72-60 132-132 132s-132-60-132-132h-82c0 118 96 214 214 214s214-96 214-214v-86h42zM512 298c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />

lang/main.json

@@ -638,6 +638,7 @@
             "shareRoom": "Invite someone",
             "shareYourScreen": "Toggle screenshare",
             "shortcuts": "Toggle shortcuts",
+            "show": "Show on stage",
             "speakerStats": "Toggle speaker statistics",
             "tileView": "Toggle tile view",
             "toggleCamera": "Toggle camera",
@@ -763,6 +764,7 @@
         "mute": "Member is muted",
         "muted": "Muted",
         "remoteControl": "Remote control",
+        "show": "Show on stage",
         "videomute": "Member has stopped the camera"
     },
     "welcomepage": {

react/features/filmstrip/components/native/Thumbnail.js

@@ -11,7 +11,6 @@ import {
     PARTICIPANT_ROLE,
     ParticipantView,
     isEveryoneModerator,
-    isLocalParticipantModerator,
     pinParticipant
 } from '../../../base/participants';
 import { Container } from '../../../base/react';
@@ -45,11 +44,6 @@ type Props = {
      */
     _isEveryoneModerator: boolean,
 
-    /**
-     * True if the local participant is a moderator.
-     */
-    _isModerator: boolean,
-
     /**
      * The Redux representation of the state "features/large-video".
      */
@@ -124,7 +118,6 @@ class Thumbnail extends Component<Props> {
         const {
             _audioTrack: audioTrack,
             _isEveryoneModerator,
-            _isModerator,
             _largeVideo: largeVideo,
             _onClick,
             _onShowRemoteVideoMenu,
@@ -148,14 +141,11 @@ class Thumbnail extends Component<Props> {
         const participantInLargeVideo
             = participantId === largeVideo.participantId;
         const videoMuted = !videoTrack || videoTrack.muted;
-        const showRemoteVideoMenu = _isModerator && !participant.local;
 
         return (
             <Container
                 onClick = { _onClick }
-                onLongPress = {
-                    showRemoteVideoMenu
-                        ? _onShowRemoteVideoMenu : undefined }
+                onLongPress = { participant.local ? undefined : _onShowRemoteVideoMenu }
                 style = { [
                     styles.thumbnail,
                     participant.pinned && !tileView
@@ -265,7 +255,6 @@ function _mapDispatchToProps(dispatch: Function, ownProps): Object {
  * @param {Props} ownProps - Properties of component.
  * @returns {{
  *      _audioTrack: Track,
- *      _isModerator: boolean,
  *      _largeVideo: Object,
  *      _styles: StyleType,
  *      _videoTrack: Track
@@ -286,7 +275,6 @@ function _mapStateToProps(state, ownProps) {
     return {
         _audioTrack: audioTrack,
         _isEveryoneModerator: isEveryoneModerator(state),
-        _isModerator: isLocalParticipantModerator(state),
         _largeVideo: largeVideo,
         _styles: ColorSchemeRegistry.get(state, 'Thumbnail'),
         _videoTrack: videoTrack

react/features/remote-video-menu/components/native/KickButton.js

@@ -1,14 +1,21 @@
 // @flow
 
 import { translate } from '../../../base/i18n';
+import { isLocalParticipantModerator } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 
 import AbstractKickButton from '../AbstractKickButton';
 
 /**
- * We don't need any further implementation for this on mobile, but we keep it
- * here for clarity and consistency with web. Once web uses the
- * {@code AbstractButton} base class, we can remove all these and just use
- * the {@code AbstractKickButton} as {@KickButton}.
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {Props}
  */
-export default translate(connect()(AbstractKickButton));
+function _mapStateToProps(state) {
+    return {
+        visible: isLocalParticipantModerator(state)
+    };
+}
+
+export default translate(connect(_mapStateToProps)(AbstractKickButton));

react/features/remote-video-menu/components/native/MuteButton.js

@@ -1,14 +1,23 @@
 // @flow
 
 import { translate } from '../../../base/i18n';
+import { isLocalParticipantModerator } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 
-import AbstractMuteButton, { _mapStateToProps } from '../AbstractMuteButton';
+import AbstractMuteButton, { _mapStateToProps as _abstractMapStateToProps } from '../AbstractMuteButton';
 
 /**
- * We don't need any further implementation for this on mobile, but we keep it
- * here for clarity and consistency with web. Once web uses the
- * {@code AbstractButton} base class, we can remove all these and just use
- * the {@code AbstractMuteButton} as {@MuteButton}.
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - Properties of component.
+ * @returns {Props}
  */
+function _mapStateToProps(state, ownProps) {
+    return {
+        ..._abstractMapStateToProps(state, ownProps),
+        visible: isLocalParticipantModerator(state)
+    };
+}
+
 export default translate(connect(_mapStateToProps)(AbstractMuteButton));

react/features/remote-video-menu/components/native/PinButton.js

@@ -0,0 +1,65 @@
+// @flow
+
+import { translate } from '../../../base/i18n';
+import { pinParticipant } from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox';
+
+export type Props = AbstractButtonProps & {
+
+    /**
+     * True if tile view is currently enabled.
+     */
+    _tileViewEnabled: boolean,
+
+    /**
+     * The redux {@code dispatch} function.
+     */
+    dispatch: Function,
+
+    /**
+     * The ID of the participant that this button is supposed to pin.
+     */
+    participantID: string,
+
+    /**
+     * The function to be used to translate i18n labels.
+     */
+    t: Function
+};
+
+/**
+ * A remote video menu button which pins a participant and exist the tile view.
+ */
+class PinButton extends AbstractButton<Props, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.show';
+    iconName = 'icon-enlarge';
+    label = 'videothumbnail.show';
+
+    /**
+     * Handles clicking / pressing the button, and kicks the participant.
+     *
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        const { dispatch } = this.props;
+
+        // Pin participant, it will automatically exit the tile view
+        dispatch(pinParticipant(this.props.participantID));
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {Props}
+ */
+function _mapStateToProps(state) {
+    return {
+        visible: state['features/video-layout'].tileViewEnabled
+    };
+}
+
+export default translate(connect(_mapStateToProps)(PinButton));

react/features/remote-video-menu/components/native/RemoteVideoMenu.js

@@ -19,6 +19,7 @@ import { hideRemoteVideoMenu } from '../../actions';
 
 import KickButton from './KickButton';
 import MuteButton from './MuteButton';
+import PinButton from './PinButton';
 import styles from './styles';
 
 /**
@@ -94,6 +95,7 @@ class RemoteVideoMenu extends Component<Props> {
                 </View>
                 <MuteButton { ...buttonProps } />
                 <KickButton { ...buttonProps } />
+                <PinButton { ...buttonProps } />
             </BottomSheet>
         );
     }