From c108e6177a5ffa465da4f683c4050577e10110f2 Mon Sep 17 00:00:00 2001 From: Luke Berndt Date: Sat, 14 Jan 2023 10:00:15 -0500 Subject: [PATCH] playing and auto play is working --- backend/controllers/calls.js | 2 + frontend/public/index.html | 4 - frontend/src/Call/CallPlayer.js | 69 ++++++++++---- frontend/src/Call/MediaPlayer.js | 157 +++++++++++++++---------------- 4 files changed, 129 insertions(+), 103 deletions(-) diff --git a/backend/controllers/calls.js b/backend/controllers/calls.js index 762c2ad..64c282e 100644 --- a/backend/controllers/calls.js +++ b/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); diff --git a/frontend/public/index.html b/frontend/public/index.html index f8fac76..cd503df 100644 --- a/frontend/public/index.html +++ b/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`. --> - - %REACT_APP_SITE_NAME% diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index ea44de6..09062a1 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/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(""); - setCallId(false); + setCurrentCall(false); dispatch(getCalls({})); @@ -270,8 +305,7 @@ const getFilterDescription = () => { if (didUpdate) { dispatchEvent(setLive(false)); - setCallId(false); - setCallUrl(""); + setCurrentCall(false); //callActions.fetchCalls(); //this.stopSocket(); //this.socket.close(); @@ -286,8 +320,7 @@ const getFilterDescription = () => { setFilterVisible(!filterVisible); if (didUpdate) { - setCallUrl(""); - setCallId(false); + setCurrentCall(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 = () => { )) }*/ + + return (
@@ -638,7 +673,7 @@ const getFilterDescription = () => { style={{ minHeight: '100vh' }} >
- +
@@ -652,8 +687,8 @@ const getFilterDescription = () => { - this.switchAutoPlay()}>Autoplay - { /* */ } + setAutoPlay(!autoPlay)}>Autoplay + Download diff --git a/frontend/src/Call/MediaPlayer.js b/frontend/src/Call/MediaPlayer.js index 0e491f6..0afcfe5 100644 --- a/frontend/src/Call/MediaPlayer.js +++ b/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) { - 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 MediaPlayer = (props) => { + 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 audio = this.audioRef.current.audioEl.current; + const updatePlayProgress = () => { + 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)) { - this.setState({ - sourceIndex: this.state.sourceIndex + 1 - }); + if (call && ((call.srcList.length - 1) >= (sourceIndex + 1)) && (currentTime > call.srcList[sourceIndex + 1].pos)) { + setSourceIndex(sourceIndex + 1); } // updates the play percentage progress and current playing time - this.setState({ - playProgress: currentTime / duration * 100, - playTime: Math.floor(currentTime) - }); + setPlayProgress(currentTime / duration * 100); + setPlayTime(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 = {}; } - - 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 ( - - + return ( + + - + - { - this.state.isPlaying - ? () - : () - } - - - - - + { + isPlaying + ? () + : () + } + + + + + - - - ) - } + + + ) } + export default MediaPlayer;