@agilemotion/oui-react-js 1.3.8 → 1.4.0

package/dist/components/media/VCRoomParticipant.js

@@ -0,0 +1,808 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VIDEO_ENCODINGS = exports.VIDEO_CONSTRAINTS = exports.VIDEO_CODEC_OPTIONS = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./VCRoomParticipant.css");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _VCEventType = require("./VCEventType");
+
+var _VCEventManager = _interopRequireDefault(require("./VCEventManager"));
+
+var _Recorder = _interopRequireDefault(require("./Recorder"));
+
+var _MediaSoupHelper = _interopRequireDefault(require("./MediaSoupHelper"));
+
+var _Tracks = _interopRequireDefault(require("./Tracks"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _icons = require("@material-ui/icons");
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _core = require("@material-ui/core");
+
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const VIDEO_CODEC_OPTIONS = {
+  videoGoogleStartBitrate: 1000
+};
+exports.VIDEO_CODEC_OPTIONS = VIDEO_CODEC_OPTIONS;
+const VIDEO_CONSTRAINTS = {
+  audio: false,
+  video: {
+    width: {
+      min: 640,
+      ideal: 1920
+    },
+    height: {
+      min: 400,
+      ideal: 1080
+    }
+  }
+};
+exports.VIDEO_CONSTRAINTS = VIDEO_CONSTRAINTS;
+const VIDEO_ENCODINGS = [{
+  rid: 'r0',
+  maxBitrate: 20000,
+  //scaleResolutionDownBy: 10.0,
+  scalabilityMode: 'S1T3'
+}, {
+  rid: 'r1',
+  maxBitrate: 150000,
+  scalabilityMode: 'S1T3'
+}, {
+  rid: 'r2',
+  maxBitrate: 450000,
+  scalabilityMode: 'S1T3'
+}];
+exports.VIDEO_ENCODINGS = VIDEO_ENCODINGS;
+const location = window.location.protocol + '//' + window.location.hostname;
+
+const VCRoomParticipant = props => {
+  const [handRaised, setHandRaised] = _react.default.useState(false);
+
+  const [videoMuted, setVideoMuted] = _react.default.useState(props.videoMuted);
+
+  const [audioMuted, setAudioMuted] = _react.default.useState(props.audioMuted);
+
+  const [producerTransport, setProducerTransport] = _react.default.useState(props.producerTransport);
+
+  const [videoRefresher, setVideoRefresher] = _react.default.useState(false);
+
+  const [producers] = _react.default.useState(new Map());
+
+  const [failedProducersDueToNullTransport] = _react.default.useState([]);
+
+  const [audioDevices, setAudioDevices] = _react.default.useState([]);
+
+  const [selectedAudioDevice, setSelectedAudioDevice] = _react.default.useState(null);
+
+  const [consumers] = _react.default.useState(new Map());
+
+  const [soundLevel, setSoundLevel] = _react.default.useState(0);
+
+  const [eventHandler] = (0, _react.useState)({});
+  const videoRef = (0, _react.useRef)();
+  const videoStream = (0, _react.useRef)();
+  const audioRef = (0, _react.useRef)();
+  const tracks = (0, _react.useRef)(new _Tracks.default());
+  const soundLevelCounter = (0, _react.useRef)(0);
+  const showVideo = true;
+  const {
+    consumerTransport,
+    device
+  } = props;
+  const {
+    numberOfInViewParticipants
+  } = props;
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const openMoreActions = Boolean(anchorEl);
+  const [downloadUrl, setDownloadUrl] = (0, _react.useState)(null);
+
+  const handler = () => {
+    return {
+      get id() {
+        return 'meeting-participant-' + props.data.userId;
+      },
+
+      on: (eventType, be) => {
+        switch (eventType) {
+          case _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED:
+            onAVSettingsChange(be.payload ? be.payload : be);
+            break;
+
+          case _VCEventType.VCEventType.RAISE_HAND:
+            onRaiseHand(be.payload);
+            break;
+
+          case _VCEventType.VCEventType.LOWER_HAND:
+            onLowerHand(be.payload);
+            break;
+
+          case _VCEventType.VCEventType.NEW_PRODUCERS:
+            onNewProducers(be.payload);
+            break;
+
+          case _VCEventType.VCEventType.CONSUMER_CLOSED:
+            if (consumers.has(be.payload.consumerId)) {
+              removeConsumer(be.payload.consumerId, be.payload.kind);
+            }
+
+            break;
+        }
+      }
+    };
+  };
+
+  const handleClickDevicesIcon = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const changeAudioDevice = device => {
+    setSelectedAudioDevice(device);
+  };
+
+  const onRaiseHand = payload => {
+    if (payload && payload.userId === props.data.userId) {
+      setHandRaised(true);
+      props.data.handRaised = true;
+    }
+  };
+
+  const onLowerHand = payload => {
+    if (payload && payload.userId === props.data.userId) {
+      setHandRaised(false);
+      props.data.handRaised = false;
+    }
+  };
+
+  (0, _react.useEffect)(() => {
+    eventHandler.api = handler();
+  });
+  (0, _react.useEffect)(() => {
+    if (videoRef.current && videoStream.current) {
+      videoRef.current.srcObject = videoStream.current;
+    }
+  }, [videoRef.current]);
+  (0, _react.useEffect)(() => {
+    if (props.soundMonitor && !props.inView) {
+      if (soundLevel > 3) {
+        soundLevelCounter.current = 10;
+      } else if (soundLevelCounter.current > 0) {
+        soundLevelCounter.current--;
+      }
+
+      props.soundMonitor(props.data.userId, soundLevelCounter.current === 0 || audioMuted);
+    }
+  }, [soundLevel]);
+  (0, _react.useEffect)(() => {
+    if (audioMuted) {
+      setSoundLevel(0);
+
+      if (props.soundMonitor && !props.inView) {
+        props.soundMonitor(props.data.userId, true);
+      }
+    }
+  }, [audioMuted]);
+
+  const handleCloseDeviceMenu = () => {
+    setAnchorEl(null);
+  };
+
+  const onAVSettingsChange = payload => {
+    if (props.data.userId === payload.userId) {
+      if (props.isCurrentUser) {
+        if (payload.audioMuted) {
+          stopProducing('audio');
+        } else {
+          if (device) {
+            produce('audio');
+          }
+        }
+
+        if (payload.videoMuted) {
+          stopProducing('video');
+        } else {
+          if (device) {
+            produce('video');
+          }
+        }
+      }
+
+      setAudioMuted(payload.audioMuted);
+      setVideoMuted(payload.videoMuted);
+    } else if (props.isCurrentUser) {}
+  };
+
+  (0, _react.useEffect)(() => {
+    if (props.data && !_Utils.default.isNull(props.data.avatarId) && props.data.avatarId !== 'undefined' && props.data.avatarId !== 'null') {
+      setDownloadUrl(location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/download/' + props.data.avatarId + '?access_token=' + sessionStorage.getItem('accessToken') + '&idToken=' + sessionStorage.getItem('idToken'));
+    }
+  }, [props.data]);
+  (0, _react.useEffect)(() => {
+    setAudioMuted(props.audioMuted);
+  }, [props.audioMuted]);
+  (0, _react.useEffect)(() => {
+    setVideoMuted(props.videoMuted);
+  }, [props.videoMuted]);
+  (0, _react.useEffect)(() => {
+    if (producerTransport) {
+      if (props.videoMuted) {
+        stopProducing('video');
+      } else {
+        produce('video');
+      }
+
+      if (props.audioMuted) {
+        stopProducing('audio');
+      } else {
+        produce('audio');
+      }
+    }
+  }, [producerTransport]);
+  (0, _react.useEffect)(() => {
+    setProducerTransport(props.producerTransport);
+  }, [props.producerTransport]);
+  (0, _react.useEffect)(() => {
+    if (props.isCurrentUser) {
+      props.onAudioDeviceChange(selectedAudioDevice);
+      stopProducing('audio', () => {
+        if (selectedAudioDevice) {
+          if (!producerTransport) {
+            createProducerTransport();
+          } else if (!audioMuted) {
+            produce('audio');
+          }
+        }
+      });
+    }
+  }, [selectedAudioDevice]);
+  (0, _react.useEffect)(() => {
+    if (consumerTransport) {
+      console.log('TRANSI ARRIVED WITH PRODUCERS : ', props.data.producers);
+
+      if (props.data.producers) {
+        onNewProducers(props.data.producers, true);
+      }
+
+      onNewProducers(failedProducersDueToNullTransport, true);
+      failedProducersDueToNullTransport.splice(0, failedProducersDueToNullTransport.length);
+
+      if (producers) {
+        console.log('RE-INSTATING CONSUMERS');
+
+        for (let [key, value] of producers) {
+          console.log('PROCESSING PRODUCER OF TYPE : ' + key + ' : ' + value.id);
+
+          if (!(props.data.producers && (void 0).props.data.producers.find(p => p.producerId === value.id))) {
+            consume(value.id, key, true, value.userId);
+          } else {
+            console.log('PRODUCER ALREADY PROCESSED');
+          }
+        }
+      }
+    }
+  }, [consumerTransport]);
+
+  const createProducerTransport = async () => {
+    setProducerTransport(await _MediaSoupHelper.default.initProducerTransport(props.device, props.meetingId, sessionStorage.getItem('username')));
+  };
+
+  const handleDevicesChanged = devices => {
+    let audioDeviceList = [];
+    devices.forEach(device => {
+      if ('audioinput' === device.kind) {
+        audioDeviceList.push({
+          id: device.deviceId,
+          label: device.label
+        });
+      }
+    });
+    setAudioDevices(audioDeviceList);
+
+    if (audioDeviceList.length > 0) {
+      setSelectedAudioDevice(audioDeviceList[0]);
+    } else {
+      setSelectedAudioDevice(null);
+    }
+  };
+
+  (0, _react.useEffect)(() => {
+    _VCEventManager.default.removeSubscriptions(eventHandler);
+
+    _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED, _VCEventType.VCEventType.RAISE_HAND, _VCEventType.VCEventType.LOWER_HAND, _VCEventType.VCEventType.NEW_PRODUCERS, _VCEventType.VCEventType.CONSUMER_CLOSED);
+
+    if (props.isCurrentUser) {
+      navigator.mediaDevices.ondevicechange = () => {
+        navigator.mediaDevices.enumerateDevices().then(devices => {
+          handleDevicesChanged(devices);
+        });
+      };
+
+      navigator.mediaDevices.enumerateDevices().then(devices => {
+        handleDevicesChanged(devices);
+      });
+    }
+
+    return () => {
+      console.log('======================DESTROYING PARTICIPANT========================= : ' + props.data.userId);
+
+      if (props.isCurrentUser) {
+        stopProducing('audio');
+        stopProducing('video');
+      }
+
+      for (let [key, value] of consumers) {
+        removeConsumer(key, 'video');
+      }
+
+      _VCEventManager.default.removeSubscriptions(eventHandler);
+    };
+  }, []);
+
+  const produce = async type => {
+    if (!device) {
+      console.error('No available device');
+      return;
+    }
+
+    if (!device.canProduce('video') && type === 'video') {
+      console.error('Cannot produce video');
+      return;
+    }
+
+    if (!selectedAudioDevice && type === 'audio') {
+      console.error('No audio device selected');
+      return;
+    }
+
+    if (producers.has(type)) {
+      console.log('Producer already exists for this type ' + type);
+      return;
+    }
+
+    let mediaConstraints;
+
+    switch (type) {
+      case 'audio':
+        mediaConstraints = {
+          deviceId: selectedAudioDevice.id,
+          audio: true,
+          video: false
+        };
+        break;
+
+      case 'video':
+        mediaConstraints = VIDEO_CONSTRAINTS;
+        break;
+
+      default:
+        return;
+    }
+
+    let stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
+    const track = type === 'audio' ? stream.getAudioTracks()[0] : stream.getVideoTracks()[0];
+    const params = {
+      track
+    };
+    audioRef.current = stream;
+
+    if (props.isHost && type === 'audio') {
+      _Recorder.default.addTrack(props.data.userId, track);
+
+      tracks.current.setAudioTrack(track);
+    }
+
+    if (type === 'video') {
+      params.encodings = VIDEO_ENCODINGS;
+      params.codecOptions = VIDEO_CODEC_OPTIONS;
+      tracks.current.setVideoTrack(track);
+    }
+
+    let producer = await producerTransport.produce(params);
+    producerTransport.getStats().then(data => console.log(data));
+    producers.set(type, producer);
+
+    if (type === 'video') {
+      videoRef.current.srcObject = stream;
+      videoStream.current = stream;
+      setVideoRefresher(!videoRefresher);
+      console.log(stream);
+    }
+
+    producer.on('transportclose', () => {
+      stream.srcObject.getTracks().forEach(function (track) {
+        track.stop();
+      });
+      producers.delete(type);
+    });
+    producer.on('close', () => {
+      stream.srcObject.getTracks().forEach(function (track) {
+        track.stop();
+      });
+      producers.delete(type);
+    });
+  };
+
+  const stopProducing = (type, callback) => {
+    if (!producers.has(type)) {
+      console.log('There is no producer for this type ' + type);
+      return;
+    }
+
+    let producerId = producers.get(type).id;
+    console.log('Close producer', producerId);
+    producers.get(type).close();
+    producers.delete(type);
+
+    if (type === 'video') {
+      tracks.current.stopVideoTrack();
+    }
+
+    if (type === 'audio') {
+      tracks.current.stopAudioTrack();
+    }
+
+    if (callback) {
+      callback();
+    }
+
+    console.log('CLOSING PRODUCER OF ID : ' + producerId);
+
+    _SocketManager.default.emitEvent(_VCEventType.VCEventType.PRODUCER_CLOSED, {
+      userId: props.data.userId,
+      producerId,
+      roomId: props.meetingId
+    }).then(data => {}).catch(e => console.log('PRODUCER_CLOSED ERROR : ', e));
+  };
+
+  const onNewProducers = (producers, loading = false) => {
+    for (const producer of producers) {
+      if (consumerTransport) {
+        if (producer.userId === props.data.userId) {
+          if (producer.kind === 'video' && !producer.screenSharing) {
+            console.log('CALLING CONSUME FROM ON NEW PRODUCERS FOR : ' + props.data.userId + ' - ' + producer.producerId);
+            consume(producer.producerId, producer.kind, loading, producer.userId);
+          }
+        }
+
+        if (props.isCurrentUser || loading) {
+          // The small participant box at the bottom belonging to the current user must consume all audio
+          // This is because we do not want to disturb the audio due to any rendering such as Bring to view
+          if (producer.kind === 'audio') {
+            consume(producer.producerId, producer.kind, loading, producer.userId);
+          }
+        }
+      } else {
+        failedProducersDueToNullTransport.push(producer);
+      }
+    }
+  };
+
+  const removeConsumer = (consumerId, kind, userId) => {
+    if (kind === 'video') {
+      if (videoStream.current) {
+        if (videoStream.current) {
+          videoStream.current.getTracks().forEach(function (track) {
+            track.stop();
+          });
+        }
+      }
+    } else if (kind === 'audio') {
+      let audioElement = document.getElementById(consumerId);
+
+      if (audioElement && audioElement.srcObject) {
+        audioElement.srcObject.getTracks().forEach(function (track) {
+          track.stop();
+        });
+
+        if (userId && _Recorder.default) {
+          _Recorder.default.removeTrack(userId);
+        }
+
+        let elementById = document.getElementById(props.data.userId + '-audio-el-container');
+
+        if (elementById) {
+          elementById.removeChild(audioElement);
+        }
+      }
+    }
+
+    consumers.delete(consumerId);
+  };
+
+  const consume = async (producerId, kind, loading, userId) => {
+    _MediaSoupHelper.default.getConsumeStream(producerId, device.rtpCapabilities, consumerTransport, props.meetingId, sessionStorage.getItem('username'), kind).then(({
+      consumer,
+      stream,
+      kind
+    }) => {
+      if (consumer) {
+        consumers.set(consumer.id, consumer);
+        console.log('=====================================CONSUME===================================== : ' + kind + ' FOR : ' + userId);
+
+        if (kind === 'video') {
+          if (videoRef.current) {
+            videoRef.current.srcObject = stream;
+          }
+
+          videoStream.current = stream;
+          setVideoMuted(false);
+          setVideoRefresher(!videoRefresher);
+          tracks.current.setVideoTrack(stream.getVideoTracks()[0]);
+        } else {
+          if (props.isCurrentUser || loading) {
+            let audioElement = document.createElement('audio');
+            audioElement.srcObject = stream;
+            audioElement.id = consumer.id;
+            audioElement.playsinline = false;
+            audioElement.autoplay = true;
+            document.getElementById('meeting-audio-el-container').appendChild(audioElement);
+
+            if (props.isHost) {
+              _Recorder.default.addTrack(userId, stream.getAudioTracks()[0]);
+            }
+          }
+        }
+
+        consumer.on('trackended', () => {
+          removeConsumer(consumer.id, kind, userId);
+        });
+        consumer.on('transportclose', () => {
+          removeConsumer(consumer.id, kind, userId);
+        });
+      }
+    });
+  };
+
+  const getParticipantName = () => {
+    let name = props.data.name;
+
+    if (_Utils.default.isNull(props.data.userId)) {
+      name = "".concat(name, " (Guest)");
+    }
+
+    return name;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-* meeting-participant-container',
+    style: {
+      padding: props.padding ? props.padding : null,
+      height: props.height ? props.height : null,
+      position: 'relative',
+      minWidth: '150px',
+      minHeight: '150px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (videoMuted || !videoRef.current || !videoRef.current.srcObject) && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'centered-flex-box',
+    style: {
+      width: '100%',
+      height: '100%',
+      marginBottom: props.sizing === 'sm' ? '8px' : 0
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: props.sizing === 'sm' ? 'avatar-wrapper-sm' : 'avatar-wrapper',
+    style: {
+      width: (props.sizing === 'sm' ? 72 : 112) + soundLevel / 10 + 'px',
+      height: (props.sizing === 'sm' ? 72 : 112) + soundLevel / 10 + 'px',
+      border: !audioMuted && soundLevel > 3 ? (props.sizing === 'sm' ? 2 : 4) + 'px solid #00476a' : 'none',
+      backgroundColor: '#e9e9e9'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: props.sizing === 'md' ? 'avatar avatar-md' : props.sizing === 'sm' ? 'avatar avatar-sm' : 'avatar',
+    style: {
+      fontSize: props.sizing === 'sm' ? '20px' : null
+    }
+  }), downloadUrl ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      borderRadius: '50%',
+      backgroundColor: 'transparent',
+      backgroundImage: "url(".concat(downloadUrl, ")")
+    }
+  }) : _Utils.default.getInitials(props.data.name))), /*#__PURE__*/_react.default.createElement("video", {
+    id: props.data.userId + '-video',
+    width: 640,
+    height: 320,
+    autoPlay: true,
+    ref: videoRef,
+    muted: true,
+    style: {
+      width: '100%',
+      height: '100%',
+      zIndex: '0',
+      display: videoMuted || !videoRef.current || !videoRef.current.srcObject ? 'none' : null
+    }
+  }),
+  /*We need this element to capture recording sound*/
+  props.isHost && /*#__PURE__*/_react.default.createElement("audio", {
+    id: props.data.userId + '-audio',
+    autoPlay: true,
+    ref: audioRef,
+    muted: true,
+    style: {
+      display: 'none'
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: props.sizing === 'sm' ? 'name-label-sm' : 'name-label',
+    style: {
+      position: 'absolute',
+      bottom: '0',
+      padding: props.isCurrentUser ? '4px 16px' : props.sizing !== 'sm' ? '16px' : '4px'
+    }
+  }, !props.isCurrentUser && getParticipantName(), !props.isCurrentUser && /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginLeft: '4px'
+    }
+  }, props.isHost && !audioMuted ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: e => {
+      props.onHostAudioMute(props.data);
+    },
+    style: {
+      marginRight: '4px',
+      width: '16px',
+      height: '16px',
+      color: 'rgb(40, 40, 43)'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC'
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, audioMuted ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC_OFF'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC'
+  })), props.data.inView && numberOfInViewParticipants > 1 && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "Remove from view"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: e => {
+      stopProducing('video');
+      props.onRemoveFromView(props.data);
+    },
+    style: {
+      marginRight: '4px',
+      width: '16px',
+      height: '16px',
+      color: 'white'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CLOSE'
+  }))), props.isHost && !videoMuted && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: e => {
+      props.onHostVideoMute(props.data);
+    },
+    style: {
+      marginRight: '4px',
+      width: '16px',
+      height: '16px',
+      color: 'white'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CAMERA'
+  }))), props.isCurrentUser && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row',
+    style: {
+      width: '216px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col no-margin no-padding',
+    style: {
+      textAlign: 'left'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginLeft: '4px'
+    }
+  }, "You")), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col no-margin no-padding',
+    style: {
+      display: 'flex',
+      justifyContent: 'flex-end'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: "My devices"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: handleClickDevicesIcon,
+    sx: {
+      ml: 1
+    },
+    "aria-controls": openMoreActions ? 'device-menu' : undefined,
+    "aria-haspopup": "true",
+    "aria-expanded": openMoreActions ? 'true' : undefined,
+    style: {
+      color: '#198754',
+      height: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'MIC'
+  }))))))), !props.isCurrentUser && /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginLeft: '4px'
+    }
+  }, handRaised && /*#__PURE__*/_react.default.createElement(_icons.PanTool, {
+    fontSize: 'small',
+    style: {
+      color: '#e2b030'
+    }
+  }))), props.isCurrentUser && /*#__PURE__*/_react.default.createElement("div", {
+    id: 'meeting-audio-el-container'
+  }))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+    anchorEl: anchorEl,
+    id: "devices-menu",
+    open: openMoreActions,
+    onClose: handleCloseDeviceMenu,
+    onClick: handleCloseDeviceMenu,
+    PaperProps: {
+      elevation: 0,
+      sx: {
+        overflow: 'visible',
+        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+        mt: 1.5,
+        '& .MuiList-root': {
+          border: '1px solid red'
+        },
+        '& .MuiAvatar-root': {
+          width: 32,
+          height: 32,
+          ml: -0.5,
+          mr: 1
+        },
+        '&:before': {
+          content: '""',
+          display: 'block',
+          position: 'absolute',
+          top: 0,
+          right: 14,
+          width: 10,
+          height: 10,
+          bgcolor: 'primary',
+          transform: 'translateY(-50%) rotate(45deg)',
+          zIndex: 0
+        }
+      }
+    },
+    transformOrigin: {
+      horizontal: 20,
+      vertical: 136
+    },
+    anchorOrigin: {
+      horizontal: 'right',
+      vertical: 'top'
+    }
+  }, audioDevices.map((device, index) => {
+    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+      onClick: () => changeAudioDevice(device)
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        color: selectedAudioDevice && selectedAudioDevice.id === device.id ? '#198754' : null
+      }
+    }, device.label));
+  })));
+};
+
+var _default = VCRoomParticipant;
+exports.default = _default;