Add start to playlist panel and some cleanup

src/App.js

@@ -15,7 +15,11 @@ const theme = createMuiTheme({
 export default function App(props) {
   const [players, setPlayers] = useState([]);
 
-  const updatePlayers = (updatedPlayers) => {
+  const updatePlayers = (updatedPlayers, isException) => {
+    if (isException) {
+      console.error(isException);
+      return;
+    }
     setPlayers(updatedPlayers)
   };
 

src/PlayerNavigator.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PlayerPanel from './PlayerPanel';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
+import AppBar from '@material-ui/core/AppBar';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
@@ -41,10 +42,10 @@ export default function PlayerNavigator(props) {
   }
 
   return (
-    <div className={classes.root}>
+    <AppBar className={classes.root}>
       {renderTabs()}
 
       <PlayerPanel player={players[selectedPlayerId]} />
-    </div>
+    </AppBar>
   );
 };

src/PlayerPanel.js

@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import TopLevelInfo from './TopLevelInfo';
+import ToolNavigator from './ToolNavigator';
+import Divider from '@material-ui/core/Divider';
 
 export default function PlayerPanel(props) {
   const { player } = props;
 
   return (
     <div className="player-panel">
       <TopLevelInfo player={player} />
+      <Divider />
+      <ToolNavigator player={player} />
     </div>
   );
 }

src/PlaylistPanel.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+
+export default function PlaylistPanel(props) {
+  const { playlist } = props;
+
+  return (
+    <TableContainer component={Paper}>
+      <Table size="small">
+        <TableBody>
+          <TableRow>
+            <TableCell>Bandwidth</TableCell>
+            <TableCell align="right">{playlist.bandwidth}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Codecs</TableCell>
+            <TableCell align="right">{playlist.codecs}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Width</TableCell>
+            <TableCell align="right">{playlist.resolution.width || ''}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Height</TableCell>
+            <TableCell align="right">{playlist.resolution.height || ''}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

src/ToolNavigator.js

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Box from '@material-ui/core/Box';
+import { makeStyles } from '@material-ui/core/styles';
+import PlaylistPanel from './PlaylistPanel';
+
+function TabPanel(props) {
+  const { children, selectedIndex, index, ...other } = props;
+
+  return (
+    <div
+      hidden={selectedIndex !== index}
+      {...other}
+    >
+      {selectedIndex === index && (
+        <Box>
+          {children}
+        </Box>
+      )}
+    </div>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  tabs: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+}));
+
+export default function ToolNavigator(props) {
+  const { player } = props;
+  const classes = useStyles();
+  const [selectedToolIndex, setSelectedToolIndex] = useState(0);
+
+  const handleChange = (event, toolIndex) => {
+    setSelectedToolIndex(toolIndex);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Tabs
+        onChange={handleChange}
+        value={selectedToolIndex}
+        className={classes.tabs}
+      >
+        <Tab label="Segments" key={0} />
+        <Tab label="Playlist" key={1} />
+      </Tabs>
+      <div>
+        <TabPanel selectedIndex={selectedToolIndex} index={0}>
+          <p>Segments</p>
+        </TabPanel>
+        <TabPanel selectedIndex={selectedToolIndex} index={1}>
+          <PlaylistPanel playlist={player.selectedPlaylist} />
+        </TabPanel>
+      </div>
+    </div>
+  );
+};

src/TopLevelInfo.js

@@ -13,8 +13,6 @@ import Box from '@material-ui/core/Box';
 // TODO width flex
 const useStyles = makeStyles((theme) => ({
   table: {
-    backgroundColor: theme.palette.background.paper,
-    color: 'white',
     maxWidth: 300
   }
 }));
@@ -39,6 +37,7 @@ const renderMediaBufferedRow = (player, mediaType) => {
 export default function TopLevelInfo(props) {
   const classes = useStyles();
   const { player } = props;
+  const durationDisplay = player.duration ? player.duration.toFixed(2) : '';
 
   return (
     <TableContainer component={Paper}>
@@ -54,7 +53,7 @@ export default function TopLevelInfo(props) {
           </TableRow>
           <TableRow>
             <TableCell>Duration</TableCell>
-            <TableCell align="right">{player.duration.toFixed(2)}</TableCell>
+            <TableCell align="right">{durationDisplay}</TableCell>
           </TableRow>
           <TableRow>
             <TableCell>Seekable</TableCell>

src/window-functions.js

@@ -50,6 +50,17 @@ export const getPlayers = () => {
       playerInfo.audioBuffered = timeRangesToArray(sourceUpdater.audioBuffer.buffered);
     }
 
+    const masterPlaylistLoader = mpc.masterPlaylistLoader_;
+    const media = masterPlaylistLoader.media();
+
+    if (media) {
+      playerInfo.selectedPlaylist = {
+        bandwidth: media.attributes.BANDWIDTH,
+        codecs: media.attributes.CODECS,
+        resolution: media.attributes.RESOLUTION
+      };
+    }
+
     return playerInfo;
   });
 };