Merge pull request #6 from maikthomas/bugfixes

Several small bugfixes
opentok · Mar 15, 2017 · dae4aee · dae4aee
2 parents 3f7fdaa + b577933
commit dae4aee
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/src/App.css b/src/App.css
@@ -80,6 +80,12 @@ body {
     background-image: url(https://assets.tokbox.com/solutions/images/icon-no-video.png);
 }
 
+.App-control-container .ots-video-control.end-call {
+    background-image: url(https://assets.tokbox.com/solutions/images/icon-hang-up.png);
+    background-color: red;
+}
+
+
 .App-video-container {
     position: relative;
     width: 100%;
@@ -163,6 +169,10 @@ body {
    width: 100%;
 }
 
+.App-video-container .video-container.active-gt2.hidden {
+   display: none;
+}
+
 .App-video-container .video-container.active-gt2 .OT_subscriber {
   margin: 0;
   padding: 0;

diff --git a/src/App.js b/src/App.js
@@ -31,7 +31,7 @@ const otCoreOptions = {
     }[pubSub][type];
   },
   controlsContainer: '#controls',
-  packages: ['textChat', 'screenSharing', 'annotation', 'archiving'],
+  packages: ['textChat', 'screenSharing', 'annotation'],
   communication: {
     callProperites: null, // Using default
   },
@@ -63,10 +63,6 @@ const otCoreOptions = {
       subscriber: '.App-video-container'
     }
   },
-  archiving: {
-    startURL: 'https://example.com/startArchive',
-    stopURL: 'https://example.com/stopArchive',
-  },
 };
 
 /**
@@ -83,16 +79,17 @@ const containerClasses = (state) => {
   const screenshareActive = viewingSharedScreen || sharingScreen;
   return {
     controlClass: classNames('App-control-container', { hidden: !active }),
-    localAudioClass: classNames('ots-video-control circle audio', { muted: !localAudioEnabled }),
-    localVideoClass: classNames('ots-video-control circle video', { muted: !localVideoEnabled }),
-    cameraPublisherClass: classNames('video-container', { hidden: !active, small: !!activeCameraSubscribers || sharingScreen, left: screenshareActive }),
-    screenPublisherClass: classNames('video-container', { hidden: !sharingScreen }),
-    cameraSubscriberClass: classNames('video-container', { hidden: !activeCameraSubscribers },
+    localAudioClass: classNames('ots-video-control circle audio', { hidden: !active, muted: !localAudioEnabled }),
+    localVideoClass: classNames('ots-video-control circle video', { hidden: !active, muted: !localVideoEnabled }),
+    localCallClass: classNames('ots-video-control circle end-call', { hidden: !active }),
+    cameraPublisherClass: classNames('video-container', { hidden: !active, small: !!activeCameraSubscribers || screenshareActive, left: screenshareActive }),
+    screenPublisherClass: classNames('video-container', { hidden: !active || !sharingScreen }),
+    cameraSubscriberClass: classNames('video-container', { hidden: !active || !activeCameraSubscribers },
       { 'active-gt2': activeCameraSubscribersGt2 && !screenshareActive },
       { 'active-odd': activeCameraSubscribersOdd && !screenshareActive },
       { small: screenshareActive }
     ),
-    screenSubscriberClass: classNames('video-container', { hidden: !viewingSharedScreen }),
+    screenSubscriberClass: classNames('video-container', { hidden: !viewingSharedScreen || !active }),
   };
 };
 
@@ -121,6 +118,7 @@ class App extends Component {
       localVideoEnabled: true,
     };
     this.startCall = this.startCall.bind(this);
+    this.endCall = this.endCall.bind(this);
     this.toggleLocalAudio = this.toggleLocalAudio.bind(this);
     this.toggleLocalVideo = this.toggleLocalVideo.bind(this);
   }
@@ -149,6 +147,11 @@ class App extends Component {
       }).catch(error => console.log(error));
   }
 
+  endCall() {
+    otCore.endCall()
+    this.setState({ active: false });
+  }
+
   toggleLocalAudio() {
     otCore.toggleLocalAudio(!this.state.localAudioEnabled);
     this.setState({ localAudioEnabled: !this.state.localAudioEnabled });
@@ -164,6 +167,7 @@ class App extends Component {
     const {
       localAudioClass,
       localVideoClass,
+      localCallClass,
       controlClass,
       cameraPublisherClass,
       screenPublisherClass,
@@ -189,6 +193,7 @@ class App extends Component {
           <div id="controls" className={controlClass}>
             <div className={localAudioClass} onClick={this.toggleLocalAudio} />
             <div className={localVideoClass} onClick={this.toggleLocalVideo} />
+            <div className={localCallClass} onClick={this.endCall} />
           </div>
           <div id="chat" className="App-chat-container" />
         </div>