Techognito/starter-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Player: Stop making the Terminal object state

Browse source 
It's completely unnecessary and may cause unnecessary renders.
This commit is contained in:
Justin Stephenson 2023-07-27 13:10:21 -04:00
parent 9026069b3c
commit 27ec379aad
1 changed files with 18 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/player.jsx
View file

@ -764,21 +764,20 @@ export class Player extends React.Component {
this.wrapperRef = React.createRef(); this.wrapperRef = React.createRef();
this.termRef = React.createRef(); this.termRef = React.createRef();
this.handleProgressClick = this.handleProgressClick.bind(this); this.handleProgressClick = this.handleProgressClick.bind(this);
this.term = new Term({
cols: 80,
rows: 25,
screenKeys: true,
useStyle: true,
/* Exposes the xterm-accessibility-tree */
screenReaderMode: true,
});
this.state = { this.state = {
cols: 80, cols: 80,
rows: 25, rows: 25,
title: _("Player"), title: _("Player"),
paused: true, paused: true,
/* Terminal */
term: new Term({
cols: 80,
rows: 25,
screenKeys: true,
useStyle: true,
/* Exposes the xterm-accessibility-tree */
screenReaderMode: true,
}),
/* Speed exponent */ /* Speed exponent */
speedExp: 0, speedExp: 0,
scale_initial: 1, scale_initial: 1,
@ -837,7 +836,7 @@ export class Player extends React.Component {
this.clearTimeout(); this.clearTimeout();
/* Reset the terminal */ /* Reset the terminal */
this.state.term.reset(); this.term.reset();
/* Move to beginning of buffer */ /* Move to beginning of buffer */
this.pktIdx = 0; this.pktIdx = 0;
@ -903,8 +902,8 @@ export class Player extends React.Component {
_transform(width, height) { _transform(width, height) {
const relation = Math.min( const relation = Math.min(
this.state.containerWidth / this.state.term.element.offsetWidth, this.state.containerWidth / this.term.element.offsetWidth,
this.containerHeight / this.state.term.element.offsetHeight this.containerHeight / this.term.element.offsetHeight
); );
this.setState({ this.setState({
term_top_style: "50%", term_top_style: "50%",
@ -1006,9 +1005,9 @@ export class Player extends React.Component {
if (this.pkt.is_io && !this.pkt.is_output) { if (this.pkt.is_io && !this.pkt.is_output) {
this.sendInput(this.pkt); this.sendInput(this.pkt);
} else if (this.pkt.is_io) { } else if (this.pkt.is_io) {
this.state.term.write(this.pkt.io); this.term.write(this.pkt.io);
} else { } else {
this.state.term.resize(this.pkt.width, this.pkt.height); this.term.resize(this.pkt.width, this.pkt.height);
if (!this.state.scale_lock) { if (!this.state.scale_lock) {
this._transform(this.pkt.width, this.pkt.height); this._transform(this.pkt.width, this.pkt.height);
} }
@ -1193,7 +1192,7 @@ export class Player extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.state.term.onData((data) => { this.term.onData((data) => {
this.handleTitleChange(); this.handleTitleChange();
}); });
@ -1203,8 +1202,8 @@ export class Player extends React.Component {
this.setState({ containerWidth: this.wrapperRef.offsetWidth }); this.setState({ containerWidth: this.wrapperRef.offsetWidth });
} }
/* Open the terminal */ /* Open the terminal */
this.state.term.open(this.termRef.current); this.term.open(this.termRef.current);
this.state.term.loadAddon(new CanvasAddon()); this.term.loadAddon(new CanvasAddon());
window.setInterval(this.sync, 100); window.setInterval(this.sync, 100);
/* Reset playback */ /* Reset playback */
this.reset(); this.reset();
@ -1489,7 +1488,7 @@ export class Player extends React.Component {
<div <div
ref={this.termRef} ref={this.termRef}
className="console-ct" className="console-ct"
key={this.state.term} key={this.term}
style={style} style={style}
/> />
</div> </div>
@ -1505,6 +1504,6 @@ export class Player extends React.Component {
componentWillUnmount() { componentWillUnmount() {
this.buf.stop(); this.buf.stop();
window.removeEventListener("keydown", this.handleKeyDown, false); window.removeEventListener("keydown", this.handleKeyDown, false);
this.state.term.dispose(); this.term.dispose();
} }
} }