made it so it only scrolls for autoplays...

This commit is contained in:
Luke Berndt
2021-02-11 22:10:14 -05:00
parent 25b953d58d
commit a4043c0d0a
3 changed files with 11 additions and 16 deletions

File diff suppressed because one or more lines are too long

View File

@@ -53,6 +53,7 @@ class CallPlayer extends React.Component {
this.endSocket = this.endSocket.bind(this);
this.changeUrl = this.changeUrl.bind(this);
this.audioRef = React.createRef();
this.currentCallRef = React.createRef();
this.state = {
requestMessage: "",
callUrl: "",
@@ -252,6 +253,13 @@ class CallPlayer extends React.Component {
var callUrl = nextCall.url;
this.setState({callUrl: callUrl, callId: nextCallId, sourceIndex: 0, isPlaying: true}, () => { audio.playSource(callUrl)}); //scrollToComponent(this.currentCallRef.current);
if (this.currentCallRef.current) {
this.currentCallRef.current.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
this.props.callActions.fetchCallInfo( nextCallId);
} else {
this.setState({isPlaying: false});
@@ -542,7 +550,7 @@ class CallPlayer extends React.Component {
style={{ minHeight: '100vh' }}
>
<Waypoint onEnter={this.loadNewerCalls}/>
<ListCalls callsAllIds={this.props.callsAllIds} callsById={this.props.callsById} activeCallId={this.state.callId} talkgroups={this.props.talkgroups} playCall={this.playCall} />
<ListCalls callsAllIds={this.props.callsAllIds} currentCallRef={this.currentCallRef} callsById={this.props.callsById} activeCallId={this.state.callId} talkgroups={this.props.talkgroups} playCall={this.playCall} />
</Sidebar.Pusher>
</Sidebar.Pushable>
<Waypoint onEnter={this.loadOlderCalls}/>

View File

@@ -11,23 +11,10 @@ import "./CallPlayer.css";
class ListCalls extends React.Component {
constructor(props) {
super(props);
this.handleCurrentCallRef = this.handleCurrentCallRef.bind(this);
//this.currentCallRef = React.createRef();
}
handleCurrentCallRef(ref) {
this.currentCallRef = ref
console.log("Setting it")
}
componentDidUpdate(prevProps, prevState) {
if (this.currentCallRef && this.props.activeCallId && (this.props.activeCallId != prevProps.activeCallId)) {
this.currentCallRef.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
}
//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
//https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
@@ -47,7 +34,7 @@ class ListCalls extends React.Component {
{this.props.callsAllIds.map((callId, index) => {
if (callId === this.props.activeCallId) {
return (<Ref innerRef={this.handleCurrentCallRef}><CallItem activeCall={true} call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/></Ref>)
return (<Ref innerRef={this.props.currentCallRef}><CallItem activeCall={true} call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/></Ref>)
} else {
return <CallItem activeCall={false} call={this.props.callsById[callId]} talkgroups={this.props.talkgroups} key={index} onClick={this.props.playCall}/>
}