Fixes, more info, and segments tool

src/App.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import PlayerNavigator from './PlayerNavigator.js'
 import getPlayers from './window-functions';
 
-const REFRESH_RATE = 0.25 * 1000;
+const REFRESH_RATE = 1 * 1000;
 
 // TODO check colorscheme preferece
 const theme = createMuiTheme({
@@ -20,6 +21,9 @@ export default function App(props) {
       console.error(isException);
       return;
     }
+    if (JSON.stringify(players) === JSON.stringify(updatedPlayers)) {
+      return;
+    }
     setPlayers(updatedPlayers)
   };
 
@@ -41,6 +45,7 @@ export default function App(props) {
 
   return (
     <ThemeProvider theme={theme}>
+      <CssBaseline />
       <PlayerNavigator players={players} />
     </ThemeProvider>
   );

src/PlayerNavigator.js

@@ -2,16 +2,12 @@ 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) => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
   tabs: {
     borderBottom: `1px solid ${theme.palette.divider}`,
-  },
+  }
 }));
 
 export default function PlayerNavigator(props) {
@@ -42,10 +38,10 @@ export default function PlayerNavigator(props) {
   }
 
   return (
-    <AppBar className={classes.root}>
+    <div>
       {renderTabs()}
 
       <PlayerPanel player={players[selectedPlayerId]} />
-    </AppBar>
+    </div>
   );
 };

src/PlaylistPanel.js

@@ -5,32 +5,71 @@ 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';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
 
 export default function PlaylistPanel(props) {
-  const { playlist } = props;
+  const { playlist, playlistType } = props;
+  const width = playlist.resolution && playlist.resolution.width;
+  const height = playlist.resolution && playlist.resolution.ehgith;
 
   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>
+    <div>
+      <Typography variant="h5">
+        <Box pl={1} mt={1}>{playlistType}</Box>
+      </Typography>
+      <TableContainer component={Paper}>
+        <Table size="small">
+          <TableBody>
+            {playlist.bandiwdth &&
+              <TableRow>
+                <TableCell>Bandwidth</TableCell>
+                <TableCell align="right">{playlist.bandwidth}</TableCell>
+              </TableRow>
+            }
+            {playlist.codecs &&
+              <TableRow>
+                <TableCell>Codecs</TableCell>
+                <TableCell align="right">{playlist.codecs}</TableCell>
+              </TableRow>
+            }
+            {width &&
+              <TableRow>
+                <TableCell>Width</TableCell>
+                <TableCell align="right">{width}</TableCell>
+              </TableRow>
+            }
+            {height &&
+              <TableRow>
+                <TableCell>Height</TableCell>
+                <TableCell align="right">{height}</TableCell>
+              </TableRow>
+            }
+            {playlist.targetDuration &&
+              <TableRow>
+                <TableCell>Target Duration</TableCell>
+                <TableCell align="right">{playlist.targetDuration}</TableCell>
+              </TableRow>
+            }
+            <TableRow>
+              <TableCell>Num Segments</TableCell>
+              <TableCell align="right">{playlist.segments.length}</TableCell>
+            </TableRow>
+            {playlist.minDuration &&
+              <TableRow>
+                <TableCell>Min Segment Duration</TableCell>
+                <TableCell align="right">{playlist.minDuration}</TableCell>
+              </TableRow>
+            }
+            {playlist.maxDuration &&
+              <TableRow>
+                <TableCell>Max Segment Duration</TableCell>
+                <TableCell align="right">{playlist.maxDuration}</TableCell>
+              </TableRow>
+            }
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
   );
 }

src/PlaylistsPanel.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import PlaylistPanel from './PlaylistPanel';
+
+export default function PlaylistsPanel(props) {
+  const { mainPlaylist, audioPlaylist } = props;
+
+  return (
+    <Box display="flex" flexDirection="row">
+      <Box>
+        <PlaylistPanel playlist={mainPlaylist} playlistType="Main" />
+      </Box>
+      {audioPlaylist &&
+        <Box>
+          <PlaylistPanel playlist={audioPlaylist} playlistType="Audio" />
+        </Box>
+      }
+    </Box>
+  );
+}

src/SegmentInfo.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+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 Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme) => ({
+  hasTimes: {
+    backgroundColor: theme.palette.success.main
+  }
+}));
+
+export default function SegmentInfo(props) {
+  const classes = useStyles();
+  const { segment } = props;
+
+  const hasTimes = typeof segment.start === 'number' && typeof segment.end == 'number';
+
+  return (
+    <Card variant="outlined" className={`${hasTimes ? classes.hasTimes : ''}`}>
+      <CardContent>
+        <Typography variant="h6">
+          {segment.mediaIndex}
+          {hasTimes && (
+            <span> | {segment.start.toFixed(3)} => {segment.end.toFixed(3)}</span>
+          )}
+        </Typography>
+        <TableContainer>
+          <Table size="small">
+            <TableBody>
+              <TableRow>
+                <TableCell>duration</TableCell>
+                <TableCell align="right">{segment.duration.toFixed(3)}</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>timeline</TableCell>
+                <TableCell align="right">{segment.timeline}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </CardContent>
+    </Card>
+  );
+}

src/SegmentRequestInfo.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function SegmentRequestInfo(props) {
+  const { segment } = props;
+
+  // TODO get HAR for segment request if available
+  chrome.devtools.network.getHAR((result) => {
+    console.log(result);
+  });
+
+  return (
+    <div>
+      <p>Index: {segment.mediaIndex}</p>
+    </div>
+  );
+}

src/SegmentsList.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import SegmentInfo from './SegmentInfo';
+
+export default function SegmentsList(props) {
+  const { segments, setSegmentSelection } = props;
+  const [selectedIndex, setSelectedIndex] = useState(null);
+
+  const handleListItemClicked = (index) => {
+    setSelectedIndex(index);
+    setSegmentSelection(index);
+  };
+
+  return (
+    <div>
+      <List>
+        {segments.map((segment) => (
+          <ListItem
+            button
+            selected={selectedIndex === segment.mediaIndex}
+            onClick={handleListItemClicked.bind(null, segment.mediaIndex)}
+            key={segment.mediaIndex}
+          >
+            <SegmentInfo segment={segment} />
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+}

src/SegmentsPanel.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import SegmentsList from './SegmentsList';
+import SegmentRequestInfo from './SegmentRequestInfo';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import InputLabel from '@material-ui/core/InputLabel';
+import Box from '@material-ui/core/Box';
+
+export default function SegmentsPanel(props) {
+  const { player } = props;
+  const [selectedPlaylistType, setSelectedPlaylistType] = useState('Main');
+  const [selectedSegmentIndex, setSelectedSegmentIndex] = useState(null);
+
+  const handlePlaylistSelection = (event) => {
+    setSelectedPlaylistType(event.target.value);
+  };
+
+  const setSegmentSelection = (segmentIndex) => {
+    setSelectedSegmentIndex(segmentIndex);
+  };
+
+  const selectedPlaylist = player[`${selectedPlaylistType.toLowerCase()}Playlist`];
+
+  return (
+    <div>
+      {player.audioPlaylist && (
+        <Box ml={1} mt={1}>
+          <FormControl>
+            <InputLabel>Playlist</InputLabel>
+            <Select
+              value={selectedPlaylistType}
+              onChange={handlePlaylistSelection}
+            >
+              <MenuItem value='Main'>Main</MenuItem>
+              <MenuItem value='Audio'>Audio</MenuItem>
+            </Select>
+          </FormControl>
+        </Box>
+      )}
+      <Box display="flex" flexDirection="row">
+        <Box>
+          <SegmentsList
+            segments={selectedPlaylist.segments}
+            setSegmentSelection={setSegmentSelection}
+          />
+        </Box>
+        {typeof selectedSegmentIndex === 'number' && (
+          <Box>
+            <SegmentRequestInfo
+              segment={selectedPlaylist.segments[selectedSegmentIndex]}
+            />
+          </Box>
+        )}
+      </Box>
+    </div>
+  );
+}

src/ToolNavigator.js

@@ -1,9 +1,9 @@
 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';
+import Box from '@material-ui/core/Box'; import { makeStyles } from '@material-ui/core/styles';
+import SegmentsPanel from './SegmentsPanel';
+import PlaylistsPanel from './PlaylistsPanel';
 
 function TabPanel(props) {
   const { children, selectedIndex, index, ...other } = props;
@@ -47,15 +47,21 @@ export default function ToolNavigator(props) {
         value={selectedToolIndex}
         className={classes.tabs}
       >
-        <Tab label="Segments" key={0} />
-        <Tab label="Playlist" key={1} />
+        <Tab label="Playlists" key={0} />
+        <Tab label="Segments" key={1} />
+        <Tab label="Source Buffers" key={2} />
       </Tabs>
       <div>
         <TabPanel selectedIndex={selectedToolIndex} index={0}>
-          <p>Segments</p>
+          <PlaylistsPanel
+            mainPlaylist={player.mainPlaylist}
+            audioPlaylist={player.audioPlaylist} />
         </TabPanel>
         <TabPanel selectedIndex={selectedToolIndex} index={1}>
-          <PlaylistPanel playlist={player.selectedPlaylist} />
+          <SegmentsPanel player={player} />
+        </TabPanel>
+        <TabPanel selectedIndex={selectedToolIndex} index={2}>
+          Source Buffers
         </TabPanel>
       </div>
     </div>

src/TopLevelInfo.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { timeRangesString } from './ui-utils';
 import Table from '@material-ui/core/Table';
@@ -9,7 +9,6 @@ import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import Box from '@material-ui/core/Box';
 
-// TODO why do we have to change font color
 // TODO width flex
 const useStyles = makeStyles((theme) => ({
   table: {