@voxeet/react-components v0.36.6-redux7

Voxeet React Components

Installation

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

Changelog

0.36.3

Features

• New property invitedUsers, add the possibilidy to give an array of users who can be invited during the conference. (externalId mandatory)

0.36.2

Features

• New property pstnNumbers, use http://cdn.voxeet.com/pstn/numbers to get phone numbers for PSTN and give an array of needed numbers in this property

0.36.1

Features

• You can now disable sounds using disableSounds props
• String customisation (See explanations below) with customLocalizedStrings

Bug fixes

• Fix camera truncated in speaker mode if the video is coming from mobile
• Fix video presentation in widget mode

0.35.0

Features

• Implementation of video presentation (If you use shareActions you can add videopresentation), a video can now be shared to other attendees. Only the video presenter can control the video, other attendees will receive actions (Play/Pause/Seek).
• You can now customize "We're waiting for other callers to arrive." with component attendeesWaiting.
• Automatically start a recording when joining a conference with autoRecording (if it's not already start).
• Automatically start HLS when joining a conference with autoHls (if it's not already start).
• When starting HLS in Live Broadcast right panel, a link is displayed to watch the live conference.

Bug fixes

• Pre-configuration screen, error if access denied to your devices (microphone and/or camera)
• UI improvements
• Responsive improvements

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 thunkMidleware from 'redux-thunk'
import { combineReducers, createStore, applyMiddleware } from 'redux'

import { ConferenceRoom, VoxeetProvider, 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(
  <VoxeetProvider store={configureStore()}>
    <ConferenceRoom
      isWidget
      consumerKey={settings.consumerKey}
      consumerSecret={settings.consumerSecret}
      conferenceAlias={settings.conferenceAlias}
    />
  </VoxeetProvider>,
  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 bowser from "bowser";
import { Buttons } from "@voxeet/react-components";

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

  render() {
    const {
      isBottomBar,
      forceFullscreen,
      isMuted,
      isRecording,
      isWidgetFullScreenOn,
      toggleVideoPresentation,
      videoEnabled,
      isVideoPresentation,
      videoPresentationEnabled,
      displayModal,
      conferencePincode,
      convertFilePresentation,
      isHlsLive,
      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,
      currentUser,
      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}
                videoPresentationEnabled={videoPresentationEnabled}
                currentUserScreenShare={isScreenshare}
                currentUserFilePresentation={isFilePresentation}
                currentUserVideoPresentation={isVideoPresentation}
                isElectron={isElectron}
                toggle={toggleScreenShare}
                toggleVideoPresentation={toggleVideoPresentation}
                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}
                isHlsLive={isHlsLive}
                isBottomBar={isBottomBar}
                tooltipPlace={isBottomBar ? "top" : "right"}
              />
            )}
          {!isWidgetFullScreenOn &&
            !forceFullscreen &&
            (!isWebinar || (isWebinar && isAdmin)) &&
            !bowser.msie &&
            !currentUser.isListener && (
              <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,
    currentUser: PropTypes.object.isRequired,
    isWebinar: PropTypes.bool.isRequired,
    isAdmin: PropTypes.bool.isRequired,
    videoEnabled: PropTypes.bool.isRequired,
    screenShareEnabled: PropTypes.bool.isRequired,
    filePresentationEnabled: PropTypes.bool.isRequired,
    videoPresentationEnabled: PropTypes.bool.isRequired,
    displayModal: PropTypes.bool.isRequired,
    isScreenshare: PropTypes.bool.isRequired,
    isVideoPresentation: PropTypes.bool.isRequired,
    isHlsLive: 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,
    toggleVideoPresentation: 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

Localized strings

For english language (Be sure to use this keys to override default strings)

[en :{
    electronloading: "Voxeet is loading, please wait",
    error: "Error",
    errorPermissionDeniedMicrophone:
      "An error occured when joining the conference. Please make sure to allow access to your microphone.",
    errorPermissionDeniedMicrophoneCamera:
      "An error occured when joining the conference. Please make sure to allow access to your microphone and camera.",
    errorIE11:
      "A plugin is mandatory for IE11, please download and install the plugin. When the installation is complete, please refresh this page.",
    browerNotSupported: "This browser is currently not supported.",
    installExtension: "Please install the screen share extension with this ",
    noExtensionAvailable: "No Chrome Web Extension configure for screen share.",
    microphoneOff: "Your microphone is muted.",
    microphoneOn: "Your microphone is on.",
    cameraOn: "Your camera is on.",
    cameraOff: "Your camera is off.",
    recordConferenceStart: "Your conference is being recorded.",
    recordConferenceStop: "Your conference is no longer recorded.",
    screenshareInProgress:
      "You cannot screenshare while another user is screensharing.",
    recordConferenceStartBy: "Your conference is being recorded by ",
    recordConferenceStopBy: "Your conference is no longer recorded by ",
    conferenceAlreadyRecord:
      "Your conference is already being recorded by an other attendee.",
    leave: "End",
    audio: "3D Audio",
    chat: "Chat",
    externalLive: "Live Broadcast",
    fullscreen: "FullScreen",
    minimize: "Minimize",
    mute: "Mute",
    displaymode: "Display mode",
    pincode: "Call-in",
    sendMessage: "Send",
    pinCodeExplanations:
      "Call this number below and provide the conference pin code to join the conference via PSTN.",
    record: "Recording",
    shareAlreadyStarted:
      "Someone is already sharing. Please stop it before start a new one.",
    share: "Share",
    screenshare: "Share Screen",
    screenshareEntireScreen: "Share entire screen",
    screenshareAWindow: "Share a window",
    screenshareOption: "Share options",
    settings: "Settings",
    open: "Open",
    close: "Close",
    video: "Video",
    camera: "Camera",
    liveCall: "Live is running",
    linkHls: "See your live",
    broadcastLive: "Diffusion en cours",
    externalUrl: "Configure your stream",
    externalPassword: "Enter your password from your live",
    launchLive: "Start your stream",
    stopLive: "Stop your live stream",
    geturl: "Get your stream url (on Youtube or Facebook)",
    getpwd: "Get your stream password (on Youtube or Facebook)",
    enterhere: "Enter your informations here :",
    titleSettings: "Set preferred camera and microphone",
    problemSettings: "If you are having problems, try restarting your browser.",
    saveSettings: "Your preferences will automatically save.",
    screensharerunning: "Happy Screen Sharing!",
    tile: "Tile",
    list: "List",
    speaker: "Speaker",
    displaymode: "Display mode",
    changelayout: "Change layout",
    attendees: "Attendees",
    here: "here",
    hangtight: "We're waiting for other callers to arrive.",
    join: "Join",
    incall: "In call with :",
    joincall: "Join Call",
    expand: "Expand",
    activecall: "Active call",
    leavecall: "Leave call",
    output: "Output",
    input: "Input",
    titlePreConfig: "Set up your devices",
    presenter: "Attendees",
    joined: "Joined",
    invited: "Waiting on",
    presenter: "Presenter",
    listener: "Listener",
    left: "Left",
    noAudioDevice:
      "No audio device detected. Please make sure to plug at least one microphone to access this conference.",
    filepresentation: "Share a file",
    prev: "Previous",
    next: "Next",
    errorFilePresentation:
      "An error occured during the file presentation. Please check your file.",
    videopresentation: "Share a video",
    placeholderVideoPresentation: "Video URL",
    startVideoPresentationAutoplay: "Start video",
    invitedUsers: "Waiting for invitation",
    inviteUser: "Invite"
}]

More language can be added. Use an array prefixed with the correct language key. (en, fr, it, ...)