FInal stuff for first iteration

izpl-steamdeck/src/App.js

@@ -1,6 +1,6 @@
 import logo from './logo.svg';
 import { Component } from 'react';
-import { Container, Row, Col,Button, ListGroup, ProgressBar } from 'react-bootstrap';
+import { Container, Row, Col,Button, ListGroup, ProgressBar, ButtonGroup } from 'react-bootstrap';
 import './App.css';
 import './App.scss';
 
@@ -59,6 +59,7 @@ class App extends Component {
                 hack.send(JSON.stringify(queueSync))
                 break;
               case "TITLE":
+                that.setState({trackTitle:packet.data.VALUE})
                 break;
               case "LENGTH":
                 that.setState({trackLength:packet.data.VALUE})
@@ -146,9 +147,9 @@ class App extends Component {
 
   render() {
     return (
-    <Container fluid>
-      <Row style={ { height: 100 } }>
-        <Col>
+    <Container fluid style={ { height:"100%" } }>
+      <Row style={ { height: "100%" } }>
+        <Col style={ { height: "100%", overflow:"scroll"} }>
           <ListGroup variant="flush">
           {this.state.tracks.filter((e)=> e.title.includes(this.state.filter)).map((track)=>{
             console.log(this.state.highlightedIndex)
@@ -163,21 +164,25 @@ class App extends Component {
         </Col>
         <Col>
           <Row>
-            <Col>
-          <Button onClick={this.playPauseClick} variant="outline-primary">{this.state.playing?"Pause":"Play"}</Button>
-          <Button onClick={this.skipClick} variant="outline-primary">Skip</Button>
-          <Button onClick={this.reloadClick} variant="outline-primary">Reload</Button>
-          <Button onClick={this.enqueueClick} variant="outline-primary">Enqueue</Button>
-          </Col>
+            <ButtonGroup>
+            <Button onClick={this.playPauseClick} variant="primary">{this.state.playing?"Pause":"Play"}</Button>
+            <Button onClick={this.skipClick} variant="danger">Skip</Button>
+            <Button onClick={this.reloadClick} variant="warning">Reload</Button>
+            <Button onClick={this.enqueueClick} variant="success">Enqueue</Button>
+          </ButtonGroup>
           </Row>
           <Row>
+          <Col xs={12} md={10}>
+            {this.state.trackTitle}
+          </Col>
+          <Col xs={12} md={2}>
           {Math.floor(this.state.trackTime/60)+":"+(this.state.trackTime%60).toLocaleString('en-US', {
     minimumIntegerDigits: 2,
     useGrouping: false
   }) + "/" + Math.floor(this.state.trackLength/60)+":"+(this.state.trackLength%60).toLocaleString('en-US', {
     minimumIntegerDigits: 2,
     useGrouping: false
-  })}
+  })}</Col>
           </Row>
           <Row>
             <Col>

izpl-steamdeck/src/index.css

@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+html, body, #root {
+  height: 100%
+}

izpl-steamdeck/src/index.js

@@ -6,8 +6,8 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
+  <React.StrictMode style={ { height:"100%" }}>
+    <App  style={ { height:"100%" }}/>
   </React.StrictMode>
 );