Some style fixes.

src/widgets/vc-carousel-item.jsx

@@ -1,13 +1,10 @@
 // Video conference carousel item.
 import React from 'react';
-import { injectIntl } from 'react-intl';
-import {
-  Track,
-} from 'livekit-client';
+import Track from 'livekit-client';
 
 import LetterTile from './letter-tile.jsx';
 
-class VCCarouselItem extends React.PureComponent {
+export default class VCCarouselItem extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -54,16 +51,15 @@ class VCCarouselItem extends React.PureComponent {
   }
 
   render() {
-    const name = this.props.name;
-    let classes = "call-party carousel-item";
+    let classes = 'call-party carousel-item';
     if (this.props.isSpeaking) {
-      classes += " call-party-speaking";
+      classes += ' call-party-speaking';
     }
 
     const micPub = this.props.micPub;
     const cameraPub = this.props.cameraPub;
     return (
-      <div className={classes} key={this.props.key}>
+      <div className={classes}>
         <>
           <video ref={this.handleVideoRefChange}></video>
           <audio ref={this.handleAudioRefChange}></audio>
@@ -90,5 +86,3 @@ class VCCarouselItem extends React.PureComponent {
     );
   }
 }
-
-export default injectIntl(VCCarouselItem);

src/widgets/vc-carousel.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
-import {
-  Track,
-} from 'livekit-client';
+
+import { Track } from 'livekit-client';
 
 import LetterTile from './letter-tile.jsx';
 import VCCarouselItem from './vc-carousel-item.jsx';
 
-class VCCarousel extends React.Component {
+import { VC_CAROUSEL_ITEM_GAP } from '../constants.js';
+
+export default class VCCarousel extends React.Component {
   constructor(props) {
     super(props);
     this.handlePrevClick = this.handlePrevClick.bind(this);
@@ -20,26 +20,26 @@ class VCCarousel extends React.Component {
   }
 
   handlePrevClick() {
-    const gap = 16;
+    const gap = VC_CAROUSEL_ITEM_GAP;
     const width = this.carouselRef.current.offsetWidth;
     this.carouselRef.current.scrollBy(-(width + gap), 0);
     if (this.carouselRef.current.scrollLeft - width - gap <= 0) {
-      this.prevRef.current.style.display = "none";
+      this.prevRef.current.style.display = 'none';
     }
     if (!this.contentRef.current.scrollWidth - width - gap <= this.carouselRef.current.scrollLeft + width) {
-      this.nextRef.current.style.display = "flex";
+      this.nextRef.current.style.display = 'flex';
     }
   }
 
   handleNextClick() {
-    const gap = 16;
+    const gap = VC_CAROUSEL_ITEM_GAP;
     const width = this.carouselRef.current.offsetWidth;
     this.carouselRef.current.scrollBy(width + gap, 0);
     if (this.carouselRef.current.scrollWidth !== 0) {
-      this.prevRef.current.style.display = "flex";
+      this.prevRef.current.style.display = 'flex';
     }
     if (this.contentRef.current.scrollWidth - width - gap <= this.carouselRef.current.scrollLeft + width) {
-      this.nextRef.current.style.display = "none";
+      this.nextRef.current.style.display = 'none';
     }
   }
 
@@ -98,5 +98,3 @@ class VCCarousel extends React.Component {
     );
   }
 }
-
-export default injectIntl(VCCarousel);

src/widgets/vc-panel.jsx

@@ -14,7 +14,7 @@ import {
   Room,
   RoomEvent,
   Track,
-  VideoPresets,
+  VideoPresets
 } from 'livekit-client';
 
 import LetterTile from './letter-tile.jsx';
@@ -50,7 +50,6 @@ class VCPanel extends React.PureComponent {
     this.start = this.start.bind(this);
     this.stop = this.stop.bind(this);
 
-
     this.reportError = this.reportError.bind(this);
 
     this.handleCloseClick = this.handleCloseClick.bind(this);
@@ -85,7 +84,6 @@ class VCPanel extends React.PureComponent {
     const topic = this.props.tinode.getTopic(this.props.topic);
     topic.onInfo = this.previousOnInfo;
     this.stop();
-
   }
 
   onInfo(info) {
@@ -362,19 +360,19 @@ class VCPanel extends React.PureComponent {
 
     const peerTitle = this.state.activeSpeaker ? this.state.activeSpeaker : clipStr(this.props.title, MAX_PEER_TITLE_LENGTH);
 
-    const remoteActive = this.remoteRef.current && (this.remoteRef.current.src != '' || this.remoteRef.current.srcObject)
+    const remoteActive = this.remoteRef.current && (this.remoteRef.current.src || this.remoteRef.current.srcObject)
 
     return (
       <>
         <div id="video-container">
-          { !this.isBroadcast && Object.keys(this.state.participants).length > 0 ?
+          {!this.isBroadcast && Object.keys(this.state.participants).length > 0 ?
             <VCCarousel
               tinode={this.props.tinode}
               participants={this.state.participants} /> :
             null
           }
           <div id="video-container-panel">
-            { isPublishing ?
+            {isPublishing ?
               <div className="call-party self" disabled={this.state.audioOnly}>
                 <video ref={this.localRef} autoPlay muted playsInline />
                 <div className="caller-name inactive">