customizing jitsi UI -> For IOS : screen sharing not working when added "ScreenShareButton" directly in Toolbox from OverflowMenu.

[testGumar]

2022-09-13 16:04:49.149500+0530 jitsi-meet[11671:99039] [JitsiMeetSDK] Argument 0 (NSNumber) of ScreenCapturePickerViewManager.show must not be null 2022-09-13 16:04:49.156445+0530 jitsi-meet[11671:99039] [JitsiMeetSDK] Argument 0 () of ScreenCapturePickerViewManager.show could not be processed. Aborting method call.

Description:

customizing jitsi UI -> screen sharing not working when added "ScreenShareButton" directly in Toolbox from OverflowMenu.

when clicking Screen Share button getting above error.

Steps to reproduce:

1. git clone jitsimeet project
2. open ios/ jitsi-meet.xcworkspace in xcode 13+
3. run the target app in simulator
4. customize the Toolbox.js
5. add the ScreenShareButton directly to Toolbox (from OverflowMenu.js)
6. run the app and click the button

Expected behavior:

Actual behavior:

Server information:

• Jitsi Meet version: 6.1.0 or latest
• Operating System:

Client information:

• Browser / app version: latest master branch pull
• Operating System: iphone

Additional information:

[saghul]

Did you modify any imports?

[testGumar]

Kindly note its not working only for ios. i just imported these lines first to show "screen sharing button', second to handle its click although it was not required as the OverflowMenu is not visilble but i m still dispatching the hidesheet event to redux. import ScreenSharingButton from './ScreenSharingButton'; import { hideSheet } from '../../../base/dialog';

[testGumar]

Toolbox.js for native Note: i have just added ScreenSharingButton component to Toolbox so that user can directly access it from toolbox. I am getting issue only for screenSharing in iOS not for android.

// @flow

import React from 'react'; import { View } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context';

import { ColorSchemeRegistry } from '../../../base/color-scheme'; import { hideSheet } from '../../../base/dialog'; import { bottomSheetStyles } from '../../../base/dialog/components/native/styles'; import { Platform } from '../../../base/react'; import { connect } from '../../../base/redux'; import { StyleType } from '../../../base/styles'; import { ChatButton } from '../../../chat'; import AudioDeviceToggleButton from '../../../mobile/audio-mode/components/AudioDeviceToggleButton'; import { ParticipantsPaneButton } from '../../../participants-pane/components/native'; import { ReactionsMenuButton } from '../../../reactions/components'; import { isReactionsEnabled } from '../../../reactions/functions.any'; import { TileViewButton } from '../../../video-layout'; import { isToolboxVisible, getMovableButtons } from '../../functions.native'; import AudioMuteButton from '../AudioMuteButton'; import HangupButton from '../HangupButton'; import VideoMuteButton from '../VideoMuteButton';

import HangupMenuButton from './HangupMenuButton'; import HangupMenuButtonNew from './HangupMenuButtonNew'; import OverflowMenuButton from './OverflowMenuButton'; import RaiseHandButton from './RaiseHandButton'; import ScreenSharingButton from './ScreenSharingButton'; import styles from './styles';

/**

• The type of {@link Toolbox}'s React {@code Component} props. */ type Props = {

  /**

  • Whether the end conference feature is supported. */ _endConferenceSupported: boolean,

  /**

  • Whether or not the reactions feature is enabled. */ _reactionsEnabled: boolean,

  /**

  • The color-schemed stylesheet of the feature. */ _styles: StyleType,

  /**

  • The indicator which determines whether the toolbox is visible. */ _visible: boolean,

  /**

  • The width of the screen. */ _width: number,

  /**

  • Invoked to hide screensharing. */ dispatch: Function };

/**

• Implements the conference Toolbox on React Native.

• @param {Object} props - The props of the component.

• @returns {React$Element}. */ function Toolbox(props: Props) { const { _endConferenceSupported, _reactionsEnabled, _styles, _visible, _width } = props;

  if (!_visible) { return null; }

  const bottomEdge = Platform.OS === 'ios' && _visible; const { dispatch, buttonStylesBorderless, buttonStylesBorderlessNew, hangupButtonStyles, hangupButtonStylesNew, hangupMenuButtonStyles, toggledButtonStyles, toggledButtonStylesNew } = _styles; const additionalButtons = getMovableButtons(_width); const backgroundToggledStyle = { ...toggledButtonStyles, style: [ toggledButtonStyles.style, _styles.backgroundToggle ] };

  const buttonProps = { afterClick: () => dispatch(hideSheet()), showLabel: false, styles: bottomSheetStyles.buttons };

  return ( <View pointerEvents = 'box-none' style = { styles.toolboxContainer }> <SafeAreaView accessibilityRole = 'toolbar' edges = { [ bottomEdge && 'bottom' ].filter(Boolean) } pointerEvents = 'box-none' style = { styles.toolbox }> <AudioMuteButton styles = { buttonStylesBorderlessNew } toggledStyles = { toggledButtonStyles } /> {/* speaker icon added */} <AudioDeviceToggleButton styles = { buttonStylesBorderlessNew } toggledStyles = { toggledButtonStyles } /> <VideoMuteButton styles = { buttonStylesBorderlessNew } toggledStyles = { toggledButtonStyles } />

           { additionalButtons.has('raisehand') && (_reactionsEnabled
               ? <ReactionsMenuButton
                   styles = { buttonStylesBorderless }
                   toggledStyles = { backgroundToggledStyle } />
               : <RaiseHandButton
                   styles = { buttonStylesBorderless }
                   toggledStyles = { backgroundToggledStyle } />)}
           {additionalButtons.has('tileview') && <TileViewButton styles = { buttonStylesBorderless } />}
           {
               additionalButtons.has('participantspane')
               && <ParticipantsPaneButton
                   styles = { buttonStylesBorderless } />
           }
           {/* <OverflowMenuButton
               styles = { buttonStylesBorderless }
               toggledStyles = { toggledButtonStyles } /> */}
           <ScreenSharingButton
               { ...buttonProps }
               styles = { buttonStylesBorderlessNew } />
  
           {
               additionalButtons.has('chat')
                 && <ChatButton
                     styles = { buttonStylesBorderlessNew }
                     toggledStyles = { backgroundToggledStyle } />
           }
  
           { _endConferenceSupported
               ? <HangupMenuButtonNew
                   styles = { hangupButtonStylesNew } />
  
               // <HangupMenuButton
               //     styles = { hangupMenuButtonStyles }
               //     toggledStyles = { toggledButtonStyles } />
               : <HangupButton
                   styles = { hangupButtonStylesNew } />
           }
       </SafeAreaView>
   </View>
  

  ); }

/**

• Maps parts of the redux state to {@link Toolbox} (React {@code Component})

• props.

• @param {Object} state - The redux state of which parts are to be mapped to

• {@code Toolbox} props.

• @private

• @returns {Props} */ function _mapStateToProps(state: Object): Object { const { conference } = state['features/base/conference']; const endConferenceSupported = conference?.isEndConferenceSupported();

  return { _endConferenceSupported: Boolean(endConferenceSupported), _styles: ColorSchemeRegistry.get(state, 'Toolbox'), _visible: isToolboxVisible(state), _width: state['features/base/responsive-ui'].clientWidth, _reactionsEnabled: isReactionsEnabled(state) }; }

export default connect(_mapStateToProps)(Toolbox);

[testGumar]

No i havent

_getElementAfter() { console.log('_getElementAfter');

    return (
        <ScreenCapturePickerView
            ref = { this._setNativeComponent } // even this line isnt working, _setNativeComponent() not called
            ref = { node => {
                console.log('Attaching node: ', node); // this code is not executing (same is executing when with overflowmenu)
                this._setNativeComponent(node); // this code is not executing (same is executing when with overflowmenu)
            } }
            style = { styles.screenCapturePickerView } />
    );
}

On Tue, 13 Sept 2022 at 23:33, Saúl Ibarra Corretgé < @.***> wrote:

Did you modify any imports?

— Reply to this email directly, view it on GitHub https://github.com/jitsi/jitsi-meet/issues/12163#issuecomment-1245771497, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABV2UDBSFUOGSFD5FQQPCULV6C6WPANCNFSM6AAAAAAQLJXQHA . You are receiving this because you authored the thread.Message ID: @.***>

-- ---------------- Thanks & Regards -------S. Umar-------

[testGumar]

How many more week months or years you would need to close this minor issue? i know its a very small fix only if you would care to spend some minutes on it.

[damencho]

Any PRs are welcome. Thank you.

[saghul]

This has been fixed in master already.

[testGumar]

send me the fix details so that i can check and verify

[saghul]

It was part of this change: https://github.com/jitsi/jitsi-meet/commit/02f598718731fd01337df542e5e077ba6ba77a05

[vinay-blueehr]

@saghul How can we use this Jitsi Meet inside a custom React-Native project ?