playing and auto play is working

backend/controllers/calls.js

@@ -21,6 +21,7 @@ function get_calls(query, numResults, res) {
         name: true,
         time: true,
         srcList: true,
+        freq: true,
         star: true,
         len: true,
         url: true
@@ -43,6 +44,7 @@ function get_calls(query, numResults, res) {
                         time: item.time,
                         srcList: item.srcList,
                         star: item.star,
+                        freq: item.freq,
                         len: Math.round(item.len)
                     };
                     calls.push(call);

frontend/public/index.html

@@ -27,10 +27,6 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-		<script src="%REACT_APP_BACKEND_SERVER%/socket.io/socket.io.js"></script>
-		<script>
-		  window.socket = io('%REACT_APP_BACKEND_SERVER%');
-		</script>
     <title>%REACT_APP_SITE_NAME%</title>
   </head>
   <body>

frontend/src/Call/CallPlayer.js

@@ -52,9 +52,10 @@ function CallPlayer (props) {
     //console.log(callsData);
     const { data:talkgroupsData, isSuccess:isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
     //const allCalls  = callsData?callsData.ids.map( id => callsData.entities[id] ):[]
-    const [callUrl, setCallUrl] = useState("");
+
     const [autoPlay, setAutoPlay] = useState(true);
-    const [callId, setCallId] = useState(false);
+
+    const [currentCall, setCurrentCall] = useState(false);
     const [playTime, setPlayTime] = useState(0);
     const [callScroll, setCallScroll] = useState(false);
     const [callSelect, setCallSelect] = useState(false);
@@ -79,7 +80,17 @@ function CallPlayer (props) {
     const live = useSelector((state) => state.callPlayer.live);
     const uri = queryString.parse(useLocation().search);
 
-  const switchAutoPlay = () => setAutoPlay(!autoPlay);
+    let currentCallId = false;
+    let currentCallMedia = false;
+
+    if (currentCall) {
+      currentCallId = currentCall._id;
+      currentCallMedia = currentCall.url;
+    }
+
+
+
+
   const handlePlayPause = (playing) => setIsPlaying(playing);
  
  const handlePusherClick = () => {
@@ -91,18 +102,43 @@ function CallPlayer (props) {
   const handleFilterToggle = () => setFilterVisible(!filterVisible);
   const handleCalendarToggle = () => setCalendarVisible(!calendarVisible);
 
-  const audioRef = false;
+
 
   const loadNewerCalls = () => {
 
   }
 
   const playCall = (data) => {
-
+      setCurrentCall(data.call);
-  }
+      setIsPlaying(true);
+      //callActions.fetchCallInfo(data.call._id);
+    }
+  
 
   const callEnded = () => {
+    if (callsData) {
+    const currentIndex = callsData.ids.findIndex(callId => callId === currentCallId);
+    if (autoPlay && (currentIndex > 0)) {
+      const nextCallId = callsData.ids[currentIndex - 1];
+      const nextCall = callsData.entities[nextCallId];
 
+      setCurrentCall(nextCall);
+      setIsPlaying(true);
+      /*
+      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",
+          block: "center",
+        });
+      }
+      callActions.fetchCallInfo(nextCallId);*/
+    } else {
+      setIsPlaying(false);
+    }
+  } else {
+    console.log("Somehow called, callEnded() but callsData was false");
+  }
   }
   /*const changeUrl = url => callActions.changeUrl(url)
 
@@ -211,8 +247,7 @@ const getFilterDescription = () => {
     if (!live) {
       dispatch(setDateFilter(false));
       dispatch(setLive(true));
-      setCallUrl("");
+      setCurrentCall(false);
-      setCallId(false);
 
       dispatch(getCalls({}));
       
@@ -270,8 +305,7 @@ const getFilterDescription = () => {
 
     if (didUpdate) {
       dispatchEvent(setLive(false));
-      setCallId(false);
+      setCurrentCall(false);
-      setCallUrl("");
       //callActions.fetchCalls();
       //this.stopSocket();
       //this.socket.close();
@@ -286,8 +320,7 @@ const getFilterDescription = () => {
     setFilterVisible(!filterVisible);
 
     if (didUpdate) {
-      setCallUrl("");
+      setCurrentCall(false);
-      setCallId(false);
     }
   }
 /*
@@ -414,7 +447,7 @@ const getFilterDescription = () => {
       }
     }
 
-    await dispatch(setFilter(filter));
+    dispatch(setFilter(filter));
   }
 
   useEffect(() => {
@@ -549,7 +582,7 @@ const getFilterDescription = () => {
 
     var callInfoHeader = "Call Info";
 
-    const currentCall = false;//callsById[callId];
+  
 
 
     var callsAllIds = [];
@@ -584,6 +617,8 @@ const getFilterDescription = () => {
         <CallItem call={call} key={call.shortName}/>
       ))
     }*/
+
+
     return (
       <div >
         <FilterModal shortName={shortName} open={filterVisible} onClose={handleFilterClose} />
@@ -638,7 +673,7 @@ const getFilterDescription = () => {
               style={{ minHeight: '100vh' }}
             >
               <div ref={loadNewerRef} />
-              <ListCalls callsData={callsData} currentCallRef={false} activeCallId={callId} talkgroups={talkgroupsData} playCall={playCall} />
+              <ListCalls callsData={callsData} activeCallId={currentCallId} talkgroups={talkgroupsData} playCall={playCall} />
               <div ref={loadOlderRef} style={{height: 50}}/>
 
              
@@ -652,8 +687,8 @@ const getFilterDescription = () => {
         </Container>
 
         <Menu fixed="bottom" compact inverted >
-          <Menu.Item active={autoPlay} onClick={() => this.switchAutoPlay()}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
+          <Menu.Item active={autoPlay} onClick={() => setAutoPlay(!autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
-          { /*<MediaPlayer ref={audioRef} call={currentCall} onEnded={callEnded} onPlayPause={handlePlayPause} /> */ }
+          <MediaPlayer call={currentCall} onEnded={callEnded} onPlayPause={handlePlayPause} />
           <Menu.Menu position="right" className="desktop-only">
             <Menu.Item><SupportModal/></Menu.Item>
             <Menu.Item><a href={callDownload}><Icon name="download" />Download</a></Menu.Item>

frontend/src/Call/MediaPlayer.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {  useEffect, useState } from "react";
 import {
   Menu,
   Icon,
@@ -8,29 +8,29 @@ import {
 import ReactAudioPlayer from 'react-audio-player'
 
 
-class MediaPlayer extends React.Component {
 
-  constructor(props) {
+const MediaPlayer = (props) => {
-    super(props);
-    this.updatePlayProgress = this.updatePlayProgress.bind(this);
-    this.handlePlay = this.handlePlay.bind(this);
-    this.handlePause = this.handlePause.bind(this);
-    this.playPause = this.playPause.bind(this);
-    this.audioRef = React.createRef();
-    this.state = {
-      sourceIndex: 0,
-      playProgress: 0,
-      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(); } }
-  playSource(callUrl) {
-    const audio = this.audioRef.current.audioEl.current;
-    var onEnded = this.props.onEnded;
-    audio.src = callUrl;
 
+  const audioRef = React.createRef();
+  const [sourceIndex, setSourceIndex] = useState(0);
+  const [playProgress, setPlayProgress] = useState(0);
+  const [playTime, setPlayTime] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const parentHandlePlayPause = props.onPlayPause
+
+  const handlePause = () => { setIsPlaying(false); parentHandlePlayPause(false); }
+  const handlePlay = () => { setIsPlaying(true); parentHandlePlayPause(true); }
+  const playPause = () => { const audio = audioRef.current.audioEl.current; if (isPlaying) { audio.pause(); } else { audio.play(); } }
+
+  var call = props.call;
+
+  useEffect(() => {
+
+    const audio = audioRef.current.audioEl.current;
+    var onEnded = props.onEnded;
+    setSourceIndex(0);
+    if (call) {
+    audio.src = call.url;
     var playPromise = audio.play();
 
     // In browsers that don’t yet support this functionality,
@@ -43,82 +43,75 @@ class MediaPlayer extends React.Component {
         onEnded();
         // Show a UI element to let the user manually start playback.
       });
+    } else {
+      audio.src = false;
     }
-  }
+    }
+  }, [call]);
 
-  updatePlayProgress() {
+  const updatePlayProgress = () => {
-    const audio = this.audioRef.current.audioEl.current;
+    const audio = audioRef.current.audioEl.current;
     const { currentTime, duration } = audio;
-    var call = this.props.call;
+
 
     // this checks to see if it should display the next Source ID
-    if (call && ((call.srcList.length - 1) >= (this.state.sourceIndex + 1)) && (currentTime > call.srcList[this.state.sourceIndex + 1].pos)) {
+    if (call && ((call.srcList.length - 1) >= (sourceIndex + 1)) && (currentTime > call.srcList[sourceIndex + 1].pos)) {
-      this.setState({
+      setSourceIndex(sourceIndex + 1);
-        sourceIndex: this.state.sourceIndex + 1
-      });
     }
 
     // updates the play percentage progress and current playing time
-    this.setState({
+    setPlayProgress(currentTime / duration * 100);
-      playProgress: currentTime / duration * 100,
+    setPlayTime(Math.floor(currentTime));
-      playTime: Math.floor(currentTime)
+
-    });
+
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.call && (prevProps.call !== this.props.call)) {
-      this.setState({
-        sourceIndex: 0
-      });
 
+
+
+  let playEnabled = { "disabled": true }
+  let sourceId = "-";
+
+  if (call) {
+    if (call.srcList.length > sourceIndex) {
+      sourceId = call.srcList[sourceIndex].src;
     }
-
+    playEnabled = {};
   }
-
+  return (
-  render() {
+    <Menu.Menu>
-    var playEnabled = { "disabled": true }
+      <ReactAudioPlayer
-    var sourceId = "-";
+        ref={audioRef}
-
+        onPause={handlePause}
-    if (this.props.call) {
+        onPlay={handlePlay}
-      if (this.props.call.srcList.length > this.state.sourceIndex) {
+        listenInterval={100}
-        sourceId = this.props.call.srcList[this.state.sourceIndex].src;
+        onListen={updatePlayProgress}
-      }
+        onEnded={props.onEnded}
-      playEnabled = {};
+        autoPlay
-    }
+      />
-    return (
-      <Menu.Menu>
-        <ReactAudioPlayer
-          ref={this.audioRef}
-          onPause={this.handlePause}
-          onPlay={this.handlePlay}
-          listenInterval={100}
-          onListen={this.updatePlayProgress}
-          onEnded={this.props.onEnded}
-          autoPlay
-        />
 
 
-        <Menu.Item onClick={this.playPause}  >
+      <Menu.Item onClick={playPause}  >
 
-          {
+        {
-            this.state.isPlaying
+          isPlaying
-              ? (<Icon name="pause" />)
+            ? (<Icon name="pause" />)
-              : (<Icon name="play" />)
+            : (<Icon name="play" />)
-          }
+        }
-        </Menu.Item>
+      </Menu.Item>
-        <Menu.Item>
+      <Menu.Item>
-          <Progress inverted percent={this.state.playProgress} />
+        <Progress inverted percent={playProgress} />
-          <Label color="black">
+        <Label color="black">
-            {this.state.playTime}
+          {playTime}
-            Sec
+          Sec
-          </Label>
+        </Label>
-          <Label color="black" className="desktop-only">
+        <Label color="black" className="desktop-only">
-            {sourceId}
+          {sourceId}
-          </Label>
+        </Label>
 
-        </Menu.Item>
+      </Menu.Item>
-      </Menu.Menu>
+    </Menu.Menu>
-    )
+  )
-  }
 }
+
 export default MediaPlayer;