1 files changed, 24 insertions, 5 deletions
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index fa94a06..b762e58 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography, IconButton, Box
@@ -7,6 +7,8 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import PauseIcon from '@material-ui/icons/Pause';
 
 import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
@@ -16,6 +18,7 @@ import { formatPosition, formatSpeed } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import { useTranslation } from '../LocalizationProvider';
 import { useAttributePreference } from '../common/preferences';
+import { useInterval } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -52,6 +55,7 @@ const ReplayPage = () => {
 
   const speedUnit = useAttributePreference('speedUnit');
 
+  const [playback, setPlayback] = useState(false);
   const [expanded, setExpanded] = useState(true);
   const [positions, setPositions] = useState([]);
   const [index, setIndex] = useState(0);
@@ -66,6 +70,13 @@ const ReplayPage = () => {
     }
   };
 
+  useInterval(() => {
+    if (playback && index < positions.length - 1) {
+      console.log(`Index: ${index}`);
+      setIndex(index + 1);
+    }
+  }, 1000);
+
   return (
     <div className={classes.root}>
       <MainToolbar />
@@ -80,8 +91,8 @@ const ReplayPage = () => {
             <Paper className={classes.controlContent}>
                 <Box maxWidth="sm" display="flex">
                     {/* Previous position button */}
-                    <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}>
-                        <SkipPreviousIcon />
+                    <IconButton color="primary" onClick={() => setPlayback(!playback)}>
+                        { playback ? <PauseIcon /> : <PlayArrowIcon /> }
                     </IconButton>
                     
                     <Box flexGrow={1} textAlign="center">
@@ -90,10 +101,18 @@ const ReplayPage = () => {
                         {/* Speed */}
                         {positions[index].speed != undefined &&
                          <>
-                             <br/><Typography variant="secondary">{formatSpeed(positions[index].speed, speedUnit, t)}</Typography>
+                             <br/>
+                             <Typography variant="secondary">
+                                 {formatSpeed(positions[index].speed, speedUnit, t)}
+                             </Typography>
                          </>}
                     </Box>
-                    {/* Speed */}
+
+                    {/* Previous position button */}
+                    <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}>
+                        <SkipPreviousIcon />
+                    </IconButton>
+                    
                     {/* Next position button*/}
                     <IconButton color="primary" disabled={index === positions.length - 1} onClick={() => setIndex(index + 1)}>
                         <SkipNextIcon />