Merge branch 'master' into issue-520

.github/workflows/build.yaml

@@ -14,8 +14,15 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup-pnpm
 
+      - name: get build info
+        id: build_info
+        run: echo timestamp=$(git show -s --format=%cI) >> $GITHUB_OUTPUT
+
       - run: pnpm install
       - run: pnpm build:production
+        env:
+          VITE_APP_GIT_SHA: ${{ github.sha }}
+          VITE_APP_GIT_TIMESTAMP: ${{ steps.build_info.outputs.timestamp }}
 
       - name: Upload built project
         uses: actions/upload-artifact@v4

src/actions/index.js

@@ -60,8 +60,7 @@ export function checkRoutesData() {
         // TODO: these will all be relative times soon
         // fix segment boundary times for routes that have the wrong time at the start
         if ((Math.abs(r.start_time_utc_millis - startTime) > 24 * 60 * 60 * 1000)
-          && (Math.abs(r.end_time_utc_millis - endTime) < 10 * 1000)) {
-          console.log('fixing %s', r.fullname);
+            && (Math.abs(r.end_time_utc_millis - endTime) < 10 * 1000)) {
           startTime = r.start_time_utc_millis;
           endTime = r.end_time_utc_millis;
           r.segment_start_times = r.segment_numbers.map((x) => startTime + (x * 60 * 1000));

src/components/AppHeader/AccountMenu.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import dayjs from 'dayjs';
 
 import {
@@ -17,18 +17,29 @@ const logOut = async () => {
   }
 };
 
-const AccountMenu = ({ profile, open, anchorEl, onClose, ...rest }) => {
-  const [buildTimestamp, setBuildTimestamp] = useState('');
-  const [version, setVersion] = useState('');
+const Version = () => {
+  const sha = import.meta.env.VITE_APP_GIT_SHA;
+  const timestamp = import.meta.env.VITE_APP_GIT_TIMESTAMP;
+
+  let content = ['Version: '];
 
-  useEffect(() => {
-    setVersion(import.meta.env.VITE_APP_GIT_SHA?.substring(0, 7) || 'dev');
+  if (sha) {
+    const commitUrl = `https://github.com/commaai/connect/commit/${sha}`;
+    content.push(<a key="0" className="text-blue-400 underline" href={commitUrl} target="_blank" rel="noreferrer">{sha.substring(0, 7)}</a>);
 
-    const buildDate = import.meta.env.VITE_APP_GIT_TIMESTAMP;
-    if (buildDate) {
-      setBuildTimestamp(`, ${dayjs(buildDate).fromNow()}`);
+    if (timestamp) {
+      const buildDate = dayjs(timestamp).fromNow();
+      content.push(`, ${buildDate}`);
     }
-  }, []);
+  } else {
+    content.push('dev');
+  }
+
+  return <span className="text-xs text-[#ffffff66]">{content}</span>
+};
+
+const AccountMenu = ({ profile, open, anchorEl, onClose, ...rest }) => {
+  const version = useMemo(() => <Version />, []);
 
   const onLogOut = useCallback(() => {
     onClose();
@@ -44,10 +55,10 @@ const AccountMenu = ({ profile, open, anchorEl, onClose, ...rest }) => {
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       {...rest}
     >
-      <ListItem className="text-white py-3 px-4 flex-col items-start">
+      <ListItem className="text-white pt-3 pb-4 px-4 flex-col items-start gap-2">
         <span className="font-bold">{profile.email}</span>
-        <span className="text-xs text-[#ffffff66] pt-2">{ profile.user_id }</span>
-        <span className="text-xs text-[#ffffff66] pt-2">{`Version: ${version}${buildTimestamp}`}</span>
+        <span className="text-xs text-[#ffffff66]">{profile.user_id}</span>
+        {version}
       </ListItem>
       <Divider />
       <MenuItem

src/components/Dashboard/DriveListItem.jsx

@@ -88,8 +88,10 @@ const DriveListItem = (props) => {
   );
 
   const small = windowWidth < 580;
-  const startTime = dayjs(drive.start_time_utc_millis).format('HH:mm');
-  const startDate = dayjs(drive.start_time_utc_millis).format(small ? 'ddd, MMM D' : 'dddd, MMM D');
+  const dateFormat = small ? 'ddd, MMM D' : 'dddd, MMM D';
+  const startDateObj = dayjs(drive.start_time_utc_millis);
+  const startTime = startDateObj.format('HH:mm');
+  const startDate = startDateObj.format(dayjs().year() === startDateObj.year() ? dateFormat : `${dateFormat}, YYYY`);
   const endTime = dayjs(drive.end_time_utc_millis).format('HH:mm');
   const duration = formatDriveDuration(drive.duration);
 

src/components/DriveMap/index.jsx

@@ -36,6 +36,7 @@ class DriveMap extends Component {
     this.shouldFlyTo = false;
     this.isInteracting = false;
     this.isInteractingTimeout = null;
+    this.lastMapPos = [0, 0];
   }
 
   componentDidMount() {
@@ -99,7 +100,8 @@ class DriveMap extends Component {
     if (markerSource) {
       if (this.props.currentRoute && this.props.currentRoute.driveCoords) {
         const pos = this.posAtOffset(currentOffset());
-        if (pos) {
+        if (pos && pos.some((coordinate, index) => coordinate != this.lastMapPos[index])) {
+          this.lastMapPos = pos;
           markerSource.setData({
             type: 'Point',
             coordinates: pos,

src/components/DriveVideo/index.jsx

@@ -311,4 +311,4 @@ const stateToProps = Obstruction({
   currentRoute: 'currentRoute',
 });
 
-export default connect(stateToProps)(DriveVideo);
+export default connect(stateToProps)(DriveVideo);

src/components/DriveView/Media.jsx

@@ -371,9 +371,10 @@ class Media extends Component {
     }));
 
     const uploading = {};
+    const adjusted_start_time = currentRoute.start_time_utc_millis + loop.startTime;
     for (let i = 0; i < currentRoute.segment_numbers.length; i++) {
-      if (currentRoute.segment_start_times[i] < loop.startTime + loop.duration
-        && currentRoute.segment_end_times[i] > loop.startTime) {
+      if (currentRoute.segment_start_times[i] < adjusted_start_time + loop.duration
+        && currentRoute.segment_end_times[i] > adjusted_start_time) {
         types.forEach((type) => {
           const fileName = `${currentRoute.fullname}--${currentRoute.segment_numbers[i]}/${type}`;
           if (!files[fileName]) {
@@ -397,9 +398,11 @@ class Media extends Component {
 
   _uploadStats(types, count, uploaded, uploading, paused, requested) {
     const { currentRoute, loop, files } = this.props;
+    const adjusted_start_time = currentRoute.start_time_utc_millis + loop.startTime;
+
     for (let i = 0; i < currentRoute.segment_numbers.length; i++) {
-      if (currentRoute.segment_start_times[i] < loop.startTime + loop.duration
-        && currentRoute.segment_end_times[i] > loop.startTime) {
+      if (currentRoute.segment_start_times[i] < adjusted_start_time + loop.duration
+        && currentRoute.segment_end_times[i] > adjusted_start_time) {
         for (let j = 0; j < types.length; j++) {
           count += 1;
           const log = files[`${currentRoute.fullname}--${currentRoute.segment_numbers[i]}/${types[j]}`];
@@ -421,7 +424,6 @@ class Media extends Component {
     if (!files || !currentRoute) {
       return null;
     }
-
     const [countRlog, uploadedRlog, uploadingRlog, pausedRlog, requestedRlog] = this._uploadStats(['logs'], 0, 0, 0, 0, 0);
 
     const camTypes = ['cameras', 'dcameras', 'ecameras'];

src/components/DriveView/index.jsx

@@ -41,8 +41,9 @@ class DriveView extends Component {
 
     // FIXME: end time not always same day as start time
     const start = currentRoute.start_time_utc_millis + zoom.start;
-    const startDay = dayjs(start).format('dddd');
-    const startTime = dayjs(start).format('MMM D @ HH:mm');
+    const startDateObj = dayjs(start);
+    const startDay = startDateObj.format('dddd');
+    const startTime = startDateObj.format(`MMM D${dayjs().year() === startDateObj.year() ? '' : ', YYYY'} @ HH:mm`);
     const endTime = dayjs(start + (zoom.end - zoom.start)).format('HH:mm');
 
     return (

src/components/TimeDisplay/index.jsx

@@ -118,7 +118,6 @@ class TimeDisplay extends Component {
     this.decreaseSpeed = this.decreaseSpeed.bind(this);
     this.jumpBack = this.jumpBack.bind(this);
     this.jumpForward = this.jumpForward.bind(this);
-    this.onVisibilityChange = this.onVisibilityChange.bind(this);
 
     this.state = {
       desiredPlaySpeed: 1,
@@ -129,23 +128,10 @@ class TimeDisplay extends Component {
   componentDidMount() {
     this.mounted = true;
     raf(this.updateTime);
-    document.addEventListener('visibilitychange', this.onVisibilityChange);
   }
 
   componentWillUnmount() {
     this.mounted = false;
-    document.removeEventListener('visibilitychange', this.onVisibilityChange);
-  }
-
-  onVisibilityChange() {
-    const { dispatch } = this.props;
-    if (document.visibilityState === 'hidden') {
-      dispatch(pause());
-    } else if (document.visibilityState === 'visible') {
-      const { desiredPlaySpeed } = this.state;
-      let curIndex = timerSteps.indexOf(desiredPlaySpeed);
-      dispatch(play(timerSteps[curIndex]));
-    }
   }
 
   getDisplayTime() {

src/reducers/globalState.js

@@ -60,6 +60,7 @@ export default function reducer(_state, action) {
         subscription: null,
         subscribeInfo: null,
         files: null,
+        limit: 0,
       };
       window.localStorage.setItem('selectedDongleId', action.dongleId);
       if (state.devices) {
@@ -75,6 +76,7 @@ export default function reducer(_state, action) {
           end: null,
         };
         state.routes = null;
+        state.lastRoutes = null;
         state.currentRoute = null;
       }
       break;
@@ -290,6 +292,11 @@ export default function reducer(_state, action) {
       if (!state.zoom || !action.start || !action.end || action.start < state.zoom.start || action.end > state.zoom.end) {
         state.files = null;
       }
+
+      if (!action.log_id) {
+        state.segmentRange = null;
+      }
+
       const r = state.routes?.find((route) => route.log_id === action.log_id);
       if (action.log_id && r) {
         state.currentRoute = r;
@@ -412,17 +419,17 @@ export default function reducer(_state, action) {
       }
       break;
     case Types.ACTION_UPDATE_SEGMENT_RANGE: {
-
-        if (!action.log_id) {
-          state.segmentRange = null;
-        }
+      if (!action.log_id) {
+        state.segmentRange = null;
+      } else {
         state.segmentRange = {
           log_id: action.log_id,
           start: action.start,
           end: action.end,
         };
-        break;
       }
+      break;
+    }
     default:
       return state;
   }

src/utils/conversions.js

@@ -5,7 +5,7 @@ let metric = null;
 export const isMetric = () => {
   if (metric === null) {
     // Only a few countries use imperial measurements
-    metric = ['en-us', 'en-gb', 'my'].indexOf(window.navigator.language.toLowerCase()) === -1;
+    metric = ['en-us', 'en-gb'].indexOf(window.navigator.language.toLowerCase()) === -1;
   }
 
   return metric;