#8: Add highlighting of current timing point in TP list

lehnerpat · May 28, 2022 · d10a392 · d10a392
1 parent 85293cb
commit d10a392
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/src/track-player/TimingPointsList.tsx b/src/track-player/TimingPointsList.tsx
@@ -17,13 +17,14 @@ import { HasUuid } from "../common/utils/uuid";
 import { FixedSizeList, ListChildComponentProps } from "react-window";
 import PopupState, { bindTrigger, bindMenu } from "material-ui-popup-state";
 import { formatDistanceMeters, formatTimeSec } from "./track-info-formatting";
+import { Theme, lighten } from "@mui/material/styles";
 
 interface TimingPointsListProps {
   timingPoints: ReadonlyArray<TimingPoint & HasUuid>;
   onDeleteTimingPoint: (uuid: string) => void;
+  precedingIndex: number;
 }
 
-// TODO: highlight current timing points
 // TODO: autoscroll when option is on
 export const TimingPointsList: FC<TimingPointsListProps> = (props) => {
   return (
@@ -47,11 +48,26 @@ export const TimingPointsList: FC<TimingPointsListProps> = (props) => {
 
 class ItemRenderer extends PureComponent<ListChildComponentProps<TimingPointsListProps>> {
   render() {
-    const { timingPoints, onDeleteTimingPoint } = this.props.data;
+    const { timingPoints, onDeleteTimingPoint, precedingIndex } = this.props.data;
     const timingPoint = timingPoints[this.props.index];
+    const isCurrent = this.props.index === precedingIndex || this.props.index === precedingIndex + 1;
 
     return (
-      <ListItem style={this.props.style} key={timingPoint.uuid} component="div" disablePadding dense sx={{ px: 1 }}>
+      <ListItem
+        style={this.props.style}
+        key={timingPoint.uuid}
+        component="div"
+        disablePadding
+        dense
+        sx={[
+          { px: 1 },
+          isCurrent &&
+            ((theme: Theme) => ({
+              backgroundColor: lighten(theme.palette.background.paper, 0.2),
+              fontWeight: "bold",
+            })),
+        ]}
+      >
         <TimingPointData timingPoint={timingPoint} />
         <DeleteMenu timingPoint={timingPoint} onDeleteTimingPoint={onDeleteTimingPoint} />
       </ListItem>

diff --git a/src/track-player/index.tsx b/src/track-player/index.tsx
@@ -40,6 +40,7 @@ import { augmentUuid, HasUuid } from "../common/utils/uuid";
 import { formatDistanceMeters, formatTimeSec } from "./track-info-formatting";
 import { TimingPointsList } from "./TimingPointsList";
 
+//eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Placeholder: FC<{ width?: number | string; height?: number | string; text?: string }> = ({
   width,
   height,
@@ -178,9 +179,6 @@ export const TrackPlayer: FC<TrackPlayerProps> = ({ initialTrack }) => {
   const showMapAsOverlay = !isEditingModeOn;
 
   const straightRailOptionsState = usePickedState(viewOptionsState, "straightRailsOverlay");
-  // TODO: show total path length & video duration in editing mode
-  // TODO: allow editing of title editing mode
-  // TODO: show track UUID & video URL in editing mode
 
   return (
     <div>
@@ -262,7 +260,11 @@ export const TrackPlayer: FC<TrackPlayerProps> = ({ initialTrack }) => {
           </Box>
           <Box width={300}>
             <>
-              <TimingPointsListMemo timingPoints={timingPoints} onDeleteTimingPoint={deleteTimingPointById} />
+              <TimingPointsListMemo
+                timingPoints={timingPoints}
+                onDeleteTimingPoint={deleteTimingPointById}
+                precedingIndex={precedingTrackPointIndex}
+              />
               {/* <Placeholder width={300} height={350} text="TP List" /> */}
             </>
           </Box>
@@ -286,6 +288,8 @@ const VideoInfoArea: FC<VideoInfoAreaProps> = ({
   onPathUploaded,
   onReversePathClicked,
 }) => (
+  // TODO: show UUID & video duration in editing mode
+  // TODO: allow editing of title editing mode
   <Card raised sx={{ p: 2 }}>
     <Stack direction="row" spacing={1}>
       <Box flexGrow={1}>