Trying to fix Source ID display

It looks like I had componentUpdate() defined twice in the mediaplayer.js file, so it wasn't getting called

frontend/src/Call/CallPlayer.js

@@ -61,7 +61,6 @@ class CallPlayer extends React.Component {
       autoPlay: true,
       callId: false,
       playTime: 0,
-      sourceIndex: 0,
       callScroll: false,
       callSelect: false,
       urlOptions: false,
@@ -259,7 +258,7 @@ class CallPlayer extends React.Component {
       const nextCall = this.props.callsById[nextCallId];
       var callUrl = nextCall.url;
 
-      this.setState({ callUrl: callUrl, callId: nextCallId, sourceIndex: 0, isPlaying: true }, () => { audio.playSource(callUrl) }); //scrollToComponent(this.currentCallRef.current);
+      this.setState({ callUrl: callUrl, callId: nextCallId, isPlaying: true }, () => { audio.playSource(callUrl) }); //scrollToComponent(this.currentCallRef.current);
       if (this.currentCallRef.current) {
         this.currentCallRef.current.scrollIntoView({
           behavior: "smooth",
@@ -278,7 +277,6 @@ class CallPlayer extends React.Component {
     this.setState({
       callUrl: callUrl,
       callId: data.call._id,
-      sourceIndex: 0,
       isPlaying: true
     }, () => { audio.playSource(callUrl); }); //scrollToComponent(this.currentCallRef.current);
     this.props.callActions.fetchCallInfo(data.call._id);
@@ -345,7 +343,6 @@ class CallPlayer extends React.Component {
       filter.live = false;
       this.setState({
         callId: _id,
-        sourceIndex: 0,
         urlOptions: true,
         autoPlay: false,
         callScroll: true,
@@ -493,7 +490,6 @@ class CallPlayer extends React.Component {
         var callUrl = call.url;
         this.setState({
           callUrl: callUrl,
-          sourceIndex: 0,
           isPlaying: true,
           callSelect: false
         }, () => { audio.playSource(callUrl); }); //scrollToComponent(this.currentCallRef.current);

frontend/src/Call/MediaPlayer.js

@@ -1,9 +1,9 @@
 import React from "react";
 import {
-Menu,
-Icon,
-Progress,
-Label
+  Menu,
+  Icon,
+  Progress,
+  Label
 } from "semantic-ui-react";
 import ReactAudioPlayer from 'react-audio-player'
 
@@ -23,22 +23,22 @@ class MediaPlayer extends React.Component {
       isPlaying: false
     }
   }
-  handlePause = () => { this.setState({isPlaying: false}); this.props.onPlayPause(false); }
-  handlePlay = () => { this.setState({isPlaying: true}); this.props.onPlayPause(true); }
-  playPause = () => {const audio = this.audioRef.current.audioEl.current; if (this.state.isPlaying) {audio.pause();} else {audio.play();}}
+  handlePause = () => { this.setState({ isPlaying: false }); this.props.onPlayPause(false); }
+  handlePlay = () => { this.setState({ isPlaying: true }); this.props.onPlayPause(true); }
+  playPause = () => { const audio = this.audioRef.current.audioEl.current; if (this.state.isPlaying) { audio.pause(); } else { audio.play(); } }
   playSource(callUrl) {
     const audio = this.audioRef.current.audioEl.current;
     var onEnded = this.props.onEnded;
-    audio.src=callUrl;
+    audio.src = callUrl;
 
     var playPromise = audio.play();
 
     // In browsers that don’t yet support this functionality,
     // playPromise won’t be defined.
     if (playPromise !== undefined) {
-      playPromise.then(function() {
+      playPromise.then(function () {
 
-      }).catch(function(error) {
+      }).catch(function (error) {
         console.log("Automatic playback failed: " + error);
         onEnded();
         // Show a UI element to let the user manually start playback.
@@ -48,7 +48,7 @@ class MediaPlayer extends React.Component {
 
   updatePlayProgress() {
     const audio = this.audioRef.current.audioEl.current;
-    const {currentTime, duration} = audio;
+    const { currentTime, duration } = audio;
     var call = this.props.call;
 
     // this checks to see if it should display the next Source ID
@@ -65,92 +65,60 @@ class MediaPlayer extends React.Component {
     });
   }
 
-componentDidUpdate(prevProps) {
-  if (this.props.call && (prevProps.call !== this.props.call)) {
-    this.setState({
-      sourceIndex: 0
-    });
+  componentDidUpdate(prevProps) {
+    if (this.props.call && (prevProps.call !== this.props.call)) {
+      this.setState({
+        sourceIndex: 0
+      });
 
-  }
-
-}
-  componentDidUpdate() {
-  }
-
-
-render(){
-  var playEnabled = { "disabled": true }
-  var sourceId = "-";
-
-  if (this.props.call) {
-    if (this.props.call.srcList.length > this.state.sourceIndex) {
-      sourceId = this.props.call.srcList[this.state.sourceIndex].src;
     }
-    playEnabled = {};
+
   }
-  return (
-    <Menu.Menu>
-    <ReactAudioPlayer
-      ref={this.audioRef}
-      onPause={this.handlePause}
-      onPlay={this.handlePlay}
-      listenInterval={500}
-      onListen={this.updatePlayProgress}
-      onEnded={this.props.onEnded}
-      autoPlay
-      />
 
+  render() {
+    var playEnabled = { "disabled": true }
+    var sourceId = "-";
 
-      <Menu.Item onClick={this.playPause}  >
-
-            {
-              this.state.isPlaying
-                ? (<Icon name="pause"/>)
-                : (<Icon name="play"/>)
-            }
-            </Menu.Item>
-            <Menu.Item>
-            <Progress inverted percent={this.state.playProgress}/>
-            <Label color="black">
-              {this.state.playTime}
-              Sec
-            </Label>
-            <Label color="black" className="desktop-only">
-              {sourceId}
-            </Label>
-
-            </Menu.Item>
-      </Menu.Menu>
-
-
-    /*  <Media>
-        {
-          mediaProps =>  <Menu.Menu>
-
-          <Menu.Item onClick={() => mediaProps.playPause()} {...playEnabled} >
-              <Player src={callUrl} vendor="audio" onEnded={this.props.onEnded} autoPlay={true} onTimeUpdate={this.updatePlayProgress}/>
-
-                {
-                  mediaProps.isPlaying
-                    ? (<Icon name="pause"/>)
-                    : (<Icon name="play"/>)
-                }
-                </Menu.Item><Menu.Item>
-                <Progress inverted percent={this.state.playProgress}/>
-                <Label color="black">
-                  {this.state.playTime}
-                  Sec
-                </Label>
-                <Label color="black" className="desktop-only">
-                  {sourceId}
-                </Label>
-
-                </Menu.Item>
-                </Menu.Menu>
+    if (this.props.call) {
+      if (this.props.call.srcList.length > this.state.sourceIndex) {
+        sourceId = this.props.call.srcList[this.state.sourceIndex].src;
       }
-      </Media>*/
+      playEnabled = {};
+    }
+    return (
+      <Menu.Menu>
+        <ReactAudioPlayer
+          ref={this.audioRef}
+          onPause={this.handlePause}
+          onPlay={this.handlePlay}
+          listenInterval={500}
+          onListen={this.updatePlayProgress}
+          onEnded={this.props.onEnded}
+          autoPlay
+        />
 
-)
-}
+
+        <Menu.Item onClick={this.playPause}  >
+
+          {
+            this.state.isPlaying
+              ? (<Icon name="pause" />)
+              : (<Icon name="play" />)
+          }
+        </Menu.Item>
+        <Menu.Item>
+          <Progress inverted percent={this.state.playProgress} />
+          <Label color="black">
+            {this.state.playTime}
+            Sec
+          </Label>
+          <Label color="black" className="desktop-only">
+            {sourceId}
+          </Label>
+
+        </Menu.Item>
+      </Menu.Menu>
+    )
+  }
 }
 export default MediaPlayer;

frontend/src/index.js

@@ -22,7 +22,7 @@ import ListSystemsContainer from "./System/ListSystemsContainer"
 import CallPlayerContainer from "./Call/CallPlayerContainer"
 
 ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS);
-console.log(process.env);
+
 const store = configureStore(/* provide initial state if any */)
 
 ReactDOM.render(