Added speed to replay page slider

1 files changed, 12 insertions, 1 deletions

diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index afb7d04..fa94a06 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -12,9 +12,10 @@ import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
 import ReplayPathMap from '../map/ReplayPathMap';
 import PositionsMap from '../map/PositionsMap';
-import { formatPosition } from '../common/formatter';
+import { formatPosition, formatSpeed } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import { useTranslation } from '../LocalizationProvider';
+import { useAttributePreference } from '../common/preferences';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -49,6 +50,8 @@ const ReplayPage = () => {
   const { id } = useParams();
   const t = useTranslation();
 
+  const speedUnit = useAttributePreference('speedUnit');
+
   const [expanded, setExpanded] = useState(true);
   const [positions, setPositions] = useState([]);
   const [index, setIndex] = useState(0);
@@ -80,9 +83,17 @@ const ReplayPage = () => {
                     <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}>
                         <SkipPreviousIcon />
                     </IconButton>
+                    
                     <Box flexGrow={1} textAlign="center">
+                        {/* Date time */}
                         <Typography variant="button">{formatPosition(positions[index], 'fixTime', t)}</Typography>
+                        {/* Speed */}
+                        {positions[index].speed != undefined &&
+                         <>
+                             <br/><Typography variant="secondary">{formatSpeed(positions[index].speed, speedUnit, t)}</Typography>
+                         </>}
                     </Box>
+                    {/* Speed */}
                     {/* Next position button*/}
                     <IconButton color="primary" disabled={index === positions.length - 1} onClick={() => setIndex(index + 1)}>
                         <SkipNextIcon />