only render messagebytes in view
parent
be9060f27e
commit
ca1318cc33
|
@ -22,6 +22,7 @@ export default class MessageBytes extends Component {
|
||||||
this.onVisibilityChange = this.onVisibilityChange.bind(this);
|
this.onVisibilityChange = this.onVisibilityChange.bind(this);
|
||||||
this.onCanvasRefAvailable = this.onCanvasRefAvailable.bind(this);
|
this.onCanvasRefAvailable = this.onCanvasRefAvailable.bind(this);
|
||||||
this.updateCanvas = this.updateCanvas.bind(this);
|
this.updateCanvas = this.updateCanvas.bind(this);
|
||||||
|
this.canvasInView = this.canvasInView.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -48,6 +49,11 @@ export default class MessageBytes extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
canvasInView() {
|
||||||
|
return (!window.visualViewport || !this.canvas || (this.canvas.getBoundingClientRect().y >= 270 &&
|
||||||
|
window.visualViewport.height >= this.canvas.getBoundingClientRect().y));
|
||||||
|
}
|
||||||
|
|
||||||
shouldComponentUpdate(nextProps, nextState) {
|
shouldComponentUpdate(nextProps, nextState) {
|
||||||
if (nextProps.live && nextProps.message.entries.length) {
|
if (nextProps.live && nextProps.message.entries.length) {
|
||||||
const nextLastEntry = nextProps.message.entries[nextProps.message.entries.length - 1];
|
const nextLastEntry = nextProps.message.entries[nextProps.message.entries.length - 1];
|
||||||
|
@ -93,7 +99,9 @@ export default class MessageBytes extends Component {
|
||||||
|
|
||||||
updateCanvas() {
|
updateCanvas() {
|
||||||
const { message, live, seekTime } = this.props;
|
const { message, live, seekTime } = this.props;
|
||||||
if (!this.canvas || message.entries.length === 0) return;
|
if (!this.canvas || message.entries.length === 0 || !this.canvasInView()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
let mostRecentMsg = message.entries[message.entries.length - 1];
|
let mostRecentMsg = message.entries[message.entries.length - 1];
|
||||||
if (!live) {
|
if (!live) {
|
||||||
|
@ -140,6 +148,9 @@ export default class MessageBytes extends Component {
|
||||||
rowCount = Math.ceil(DbcUtils.maxMessageSize(this.props.message, this.state.maxMessageBytes) / 8);
|
rowCount = Math.ceil(DbcUtils.maxMessageSize(this.props.message, this.state.maxMessageBytes) / 8);
|
||||||
}
|
}
|
||||||
this.canvas.height = rowCount * 15;
|
this.canvas.height = rowCount * 15;
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(this.updateCanvas);
|
||||||
|
observer.observe(this.canvas);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
Loading…
Reference in New Issue