@intru/react-components v0.33.1

Voxeet React Components

Installation

npm i @voxeet/voxeet-web-sdk @voxeet/react-components --save
yarn add @voxeet/voxeet-web-sdk @voxet/react-components

Usage

Reducer

A redux reducer needs to be added to your store.

import { reducer as voxeetReducer } from '@voxeet/react-components';

const reducers = combineReducers({
  voxeet: voxeetReducer
});

Widget

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import thunkMidleware from 'redux-thunk'
import { combineReducers, createStore, applyMiddleware } from 'redux'

import { ConferenceRoom, reducer as voxeetReducer } from '@voxeet/react-components'

// Import Style
import '@voxeet/react-components/dist/voxeet-react-components.css'; // Can you be customize, refer to https://github.com/voxeet/voxeet-assets-react-components

const reducers = combineReducers({
  voxeet: voxeetReducer
});

const configureStore = () => createStore(
  reducers,
  applyMiddleware(thunkMidleware)
)

const settings = {
  consumerKey: 'consumerKey',
  consumerSecret: 'consumerSecret',
  conferenceAlias: 'Sample'
}

ReactDOM.render(
  <Provider store={configureStore()}>
    <ConferenceRoom
      isWidget
      consumerKey={settings.consumerKey}
      consumerSecret={settings.consumerSecret}
      conferenceAlias={settings.conferenceAlias}
    />
  </Provider>,
  document.getElementById('app')
)

where consumerKey and consumerSecret or oauthToken (retrieve by backend) are your credentials and conferenceAlias the conference you want to join.

The Widget is translate in english and french. The language will be automatically choose base on your browser language.

Widget Properties

For more documentation on userInfo and constraints you can look at Voxeet Sdk

Actions buttons

The default control buttons component is below, you can customize it for you needs. Just replace

import React, { Component } from "react";
import PropTypes from "prop-types";

import { Buttons } from "@voxeet/react-components";

class ActionsButtons extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { isBottomBar, 
            forceFullscreen, 
            isMuted, 
            isRecording, 
            isWidgetFullScreenOn,
            videoEnabled, 
            displayModal,
            conferencePincode, 
            convertFilePresentation, 
            toggleMicrophone, 
            screenShareEnabled, 
            filePresentationEnabled, 
            toggleRecording, 
            toggleVideo, 
            toggleScreenShare, 
            attendeesSettingsOpened, 
            toggleAttendeesSettings, 
            toggleAttendeesList, 
            attendeesListOpened, 
            attendeesChatOpened, 
            attendeesLiveOpened,
            toggleAttendeesChat, 
            toggleAttendeesLive, 
            recordingLocked, 
            toggleModal, 
            toggleAudio3D, 
            isWebinar, 
            isAdmin, 
            displayActions, 
            shareActions, 
            leave, 
            audio3DEnabled, 
            isElectron, 
            displayExternalLiveModal, 
            isExternalLive, 
            isFilePresentation, 
            isScreenshare, 
            isDemo } = this.props;

    return (
            <div>
                <ul className="controls-left">
                    {!isWidgetFullScreenOn && !forceFullscreen && (!isWebinar || (isWebinar && isAdmin)) && displayActions.indexOf("mute") > -1 && !isDemo &&
                        <ToggleMicrophoneButton
                            isMuted={isMuted}
                            toggle={toggleMicrophone}
                            isBottomBar={isBottomBar}
                            tooltipPlace={isBottomBar ? 'top' : 'right'}
                        />
                    }
                    {!isWidgetFullScreenOn && !forceFullscreen && (!isWebinar || (isWebinar && isAdmin)) && displayActions.indexOf("video") > -1 && !isDemo &&
                        <ToggleVideoButton
                            videoEnabled={videoEnabled}
                            toggle={toggleVideo}
                            isBottomBar={isBottomBar}
                            tooltipPlace={isBottomBar ? 'top' : 'right'}
                        />
                    }
                    {!isWidgetFullScreenOn && !forceFullscreen && isBottomBar && isElectron &&
                        <Toggle3DAudioButton
                            audio3DEnabled={audio3DEnabled}
                            toggleAudio3D={toggleAudio3D}
                            isBottomBar={isBottomBar}
                            tooltipPlace={isBottomBar ? 'top' : 'right'}
                        />
                    }
                </ul>
                <ul className="controls-center">
                    {!isWidgetFullScreenOn && !forceFullscreen && (!isWebinar || (isWebinar && isAdmin)) && displayActions.indexOf("recording") > -1 && !isDemo &&
                        <ToggleRecordingButton
                            isRecording={isRecording}
                            recordingLocked={recordingLocked}
                            toggle={toggleRecording}
                            isBottomBar={isBottomBar}
                            tooltipPlace={isBottomBar ? 'top' : 'right'}
                        />
                    }
                    {!isWidgetFullScreenOn && !forceFullscreen && (!isWebinar || (isWebinar && isAdmin)) && displayActions.indexOf("share") > -1 && !isDemo && shareActions.length > 0 &&
                        <ToggleScreenShareButton
                            screenShareEnabled={screenShareEnabled}
                            filePresentationEnabled={filePresentationEnabled}
                            currentUserScreenShare={isScreenshare}
                            currentUserFilePresentation={isFilePresentation}
                            isElectron={isElectron}
                            toggle={toggleScreenShare}
                            convertFilePresentation={convertFilePresentation}
                            shareActions={shareActions}
                            isBottomBar={isBottomBar}
                            tooltipPlace={isBottomBar ? 'top' : 'right'}
                        />
                    }
                    {isBottomBar && (!isWebinar || isWebinar && isAdmin) && !isDemo &&
                        <li className="separator">
                        </li>
                    }
                    {isBottomBar &&
                        <HangUpButtonBottomBar
                            leave={leave}
                            tooltipPlace='top'
                        />
                    }

                </ul>
                <ul className="controls-right">
                    {!isWidgetFullScreenOn && !forceFullscreen && (!isWebinar || (isWebinar && isAdmin)) && displayActions.indexOf("pstn") > -1 && !isDemo &&
                        <TogglePSTN
                            conferencePincode={conferencePincode}
                            isBottomBar={isBottomBar}
                            tooltipPlace={isBottomBar ? 'top' : 'right'}
                        />
                    }
                    {!isWidgetFullScreenOn && !forceFullscreen && (!isWebinar || (isWebinar && isAdmin)) && displayActions.indexOf("live") > -1 && !isDemo &&
                        <ToggleExternalLiveButton
                            attendeesLiveOpened={attendeesLiveOpened}
                            toggle={toggleAttendeesLive}
                            isExternalLive={isExternalLive}
                            isBottomBar={isBottomBar}
                            tooltipPlace={isBottomBar ? 'top' : 'right'}
                        />
                    }
                    {!isWidgetFullScreenOn && !forceFullscreen && (!isWebinar || isWebinar && isAdmin) &&
                        <ToggleSettingsButton
                            attendeesSettingsOpened={attendeesSettingsOpened}
                            toggle={toggleAttendeesSettings}
                            isBottomBar={isBottomBar}
                            tooltipPlace={isBottomBar ? 'top' : 'right'}
                        />
                    }
                    {displayActions.indexOf("attendees") > -1  &&
                        <ToggleAttendeesListButton tooltipPlace={isBottomBar ? 'top' : 'right'} toggle={toggleAttendeesList} isBottomBar={isBottomBar} isOpen={attendeesListOpened}/>
                    }
                    {displayActions.indexOf("chat") > -1  &&
                        <ToggleAttendeesChatButton tooltipPlace={isBottomBar ? 'top' : 'right'} toggle={toggleAttendeesChat} isBottomBar={isBottomBar} isOpen={attendeesChatOpened}/>
                    }
                </ul>
            </div>
        )
    }
}

ActionsButtons.propTypes = {
    isBottomBar: PropTypes.bool.isRequired,
    forceFullscreen: PropTypes.bool.isRequired,
    isMuted: PropTypes.bool.isRequired,
    isWebinar: PropTypes.bool.isRequired,
    isAdmin: PropTypes.bool.isRequired,
    videoEnabled: PropTypes.bool.isRequired,
    screenShareEnabled: PropTypes.bool.isRequired,
    filePresentationEnabled: PropTypes.bool.isRequired,
    displayModal: PropTypes.bool.isRequired,
    isScreenshare: PropTypes.bool.isRequired,
    isFilePresentation: PropTypes.bool.isRequired,
    displayActions: PropTypes.array.isRequired,
    toggleAudio3D: PropTypes.func.isRequired,
    recordingLocked: PropTypes.bool.isRequired,
    isElectron: PropTypes.bool.isRequired,
    isExternalLive: PropTypes.bool.isRequired,
    audio3DEnabled: PropTypes.bool.isRequired,
    isRecording: PropTypes.bool.isRequired,
    isWidgetFullScreenOn: PropTypes.bool.isRequired,
    toggleMicrophone: PropTypes.func.isRequired,
    leave: PropTypes.func.isRequired,
    toggleRecording: PropTypes.func.isRequired,
    toggleVideo: PropTypes.func.isRequired,
    toggleScreenShare: PropTypes.func.isRequired,
    convertFilePresentation: PropTypes.func.isRequired,
    toggleModal: PropTypes.func.isRequired,
    toggleMode: PropTypes.func.isRequired,
    mode: PropTypes.string.isRequired,
    toggleAttendeesList: PropTypes.func.isRequired,
    attendeesListOpened: PropTypes.bool.isRequired,
    toggleAttendeesChat: PropTypes.func.isRequired,
    attendeesChatOpened: PropTypes.bool.isRequired,
    toggleAttendeesSettings: PropTypes.func.isRequired,
    attendeesSettingsOpened: PropTypes.bool.isRequired,
    toggleAttendeesLive: PropTypes.func.isRequired,
    attendeesLiveOpened: PropTypes.bool.isRequired
}

ActionsButtons.defaultProps = {
    isBottomBar: false,
    forceFullscreen: false
}

export default ActionsButtons