demo routes dongle

src/App.jsx

@@ -17,6 +17,7 @@ import { fetchTurnCredentials } from './utils/turn';
 import store, { history } from './store';
 
 import ErrorFallback from './components/ErrorFallback';
+import { isDemoPath } from './demo';
 
 const Explorer = lazy(() => import('./components/explorer'));
 const AnonymousLanding = lazy(() => import('./components/anonymous'));
@@ -134,7 +135,10 @@ class App extends Component {
       return this.renderLoading();
     }
 
-    const showLogin = !MyCommaAuth.isAuthenticated() && !getZoom(window.location.pathname) && !getSegmentRange(window.location.pathname);
+    const showLogin = !MyCommaAuth.isAuthenticated()
+      && !isDemoPath(window.location.pathname)
+      && !getZoom(window.location.pathname)
+      && !getSegmentRange(window.location.pathname);
     let content = (
       <Suspense fallback={this.renderLoading()}>
         { showLogin ? this.anonymousRoutes() : this.authRoutes() }

src/actions/cached.js

@@ -3,6 +3,7 @@ import * as Sentry from '@sentry/react';
 import * as Types from './types';
 import { reverseLookup } from '../utils/geocode';
 import { toBool } from '../utils';
+import { transformRouteCoords, transformRouteEvents } from '../dataSource';
 
 const USE_LOCAL_COORDS_DATA = toBool(import.meta.env.VITE_APP_LOCAL_COORDS_DATA);
 if (USE_LOCAL_COORDS_DATA) {
@@ -317,7 +318,7 @@ export function fetchEvents(route) {
           return [];
         }
         const events = await resp.json();
-        return events;
+        return transformRouteEvents(route, j, events);
       })(i));
     }
 
@@ -488,13 +489,13 @@ export function fetchDriveCoords(route) {
       return;
     }
 
-    driveCoords = driveCoords.reduce((prev, curr) => ({
+    driveCoords = transformRouteCoords(route, driveCoords.reduce((prev, curr) => ({
       ...prev,
       ...curr.reduce((p, cs) => {
         p[cs.t] = [cs.lng, cs.lat];
         return p;
       }, {}),
-    }), {});
+    }), {}));
 
     dispatch({
       type: Types.ACTION_UPDATE_ROUTE,

src/actions/files.js

@@ -4,6 +4,7 @@ import { athena as Athena, devices as Devices, raw as Raw } from '../api';
 import { updateDeviceOnline, fetchDeviceNetworkStatus } from '.';
 import * as Types from './types';
 import { deviceOnCellular, getDeviceFromState, deviceVersionAtLeast, asyncSleep } from '../utils';
+import { getRouteFiles } from '../dataSource';
 
 export const FILE_NAMES = {
   qcameras: ['qcamera.ts'],
@@ -97,17 +98,18 @@ export function updateFiles(files) {
 
 export function fetchFiles(routeName, nocache = false) {
   return async (dispatch) => {
-    let files;
+    let routeFiles;
     try {
-      files = await Raw.getRouteFiles(routeName, nocache);
+      routeFiles = await getRouteFiles(routeName, nocache);
     } catch (err) {
       console.error(err);
       Sentry.captureException(err, { fingerprint: 'action_files_fetch_files' });
       return;
     }
 
     const dongleId = routeName.split('|')[0];
-    const urlName = routeName.replace('|', '/');
+    const urlName = routeFiles.sourceRouteName.replace('|', '/');
+    const { files } = routeFiles;
     const urls = Object
       .keys(FILE_NAMES)
       .filter((type) => files[type])

src/actions/index.js

@@ -1,14 +1,15 @@
 import { push } from 'connected-react-router';
 import * as Sentry from '@sentry/react';
 import document from 'global/document';
-import { athena as Athena, billing as Billing, devices as Devices, drives as Drives } from '../api';
+import { athena as Athena, billing as Billing, devices as Devices } from '../api';
 import MyCommaAuth from '@commaai/my-comma-auth';
 
 import * as Types from './types';
-import { resetPlayback, selectLoop } from '../timeline/playback';
+import { selectLoop } from '../timeline/playback';
 import {hasRoutesData } from '../timeline/segments';
 import { getDeviceFromState, deviceVersionAtLeast, deviceIsOnline } from '../utils';
 import { webrtcConnectionManager } from '../utils/webrtc';
+import { getRoutesSegments } from '../dataSource';
 
 let routesRequest = null;
 let routesRequestPromise = null;
@@ -36,12 +37,12 @@ export function checkRoutesData() {
     // if requested segment range not in loaded routes, fetch it explicitly
     if (state.segmentRange) {
       routesRequest = {
-        req: Drives.getRoutesSegments(dongleId, undefined, undefined, undefined, `${dongleId}|${state.segmentRange.log_id}`),
+        req: getRoutesSegments(dongleId, undefined, undefined, undefined, `${dongleId}|${state.segmentRange.log_id}`),
         dongleId,
       };
     } else {
       routesRequest = {
-        req: Drives.getRoutesSegments(dongleId, fetchRange.start, fetchRange.end, state.limit),
+        req: getRoutesSegments(dongleId, fetchRange.start, fetchRange.end, state.limit),
         dongleId,
       };
     }
@@ -163,7 +164,6 @@ export function urlForState(dongleId, log_id, start, end, prime) {
 function updateTimeline(state, dispatch, log_id, start, end, allowPathChange) {
   if (!state.loop || !state.loop.startTime || !state.loop.duration || state.loop.startTime < start
     || state.loop.startTime + state.loop.duration > end || state.loop.duration < end - start) {
-    dispatch(resetPlayback());
     dispatch(selectLoop(start, end));
   }
 

src/actions/startup.js

@@ -4,6 +4,7 @@ import MyCommaAuth from '@commaai/my-comma-auth';
 
 import { ACTION_STARTUP_DATA } from './types';
 import { primeFetchSubscription, checkLastRoutesData, selectDevice, fetchSharedDevice } from '.';
+import { getDemoStartupData } from '../demo';
 
 async function initProfile() {
   if (MyCommaAuth.isAuthenticated()) {
@@ -45,7 +46,10 @@ export default function init() {
       dispatch(checkLastRoutesData());
     }
 
-    const [profile, devices] = await Promise.all([initProfile(), initDevices()]);
+    const demoStartupData = getDemoStartupData(state.dongleId);
+    const [profile, devices] = demoStartupData
+      ? [demoStartupData.profile, demoStartupData.devices]
+      : await Promise.all([initProfile(), initDevices()]);
     state = getState();
 
     if (profile) {
@@ -63,10 +67,12 @@ export default function init() {
       }
       const dongleId = getState().dongleId;
       const device = devices.find((dev) => dev.dongle_id === dongleId);
-      if (device) {
-        dispatch(primeFetchSubscription(dongleId, device, profile));
-      } else if (dongleId) {
-        dispatch(fetchSharedDevice(dongleId));
+      if (!demoStartupData) {
+        if (device) {
+          dispatch(primeFetchSubscription(dongleId, device, profile));
+        } else if (dongleId) {
+          dispatch(fetchSharedDevice(dongleId));
+        }
       }
     }
 

src/actions/types.js

@@ -7,7 +7,7 @@ export const ACTION_STARTUP_DATA = 'ACTION_STARTUP_DATA';
 // global state management
 export const ACTION_SELECT_DEVICE = 'ACTION_SELECT_DEVICE';
 export const ACTION_SELECT_TIME_FILTER = 'ACTION_SELECT_TIME_FILTER';
-export const ACTION_UPDATE_ROUTE_LIMIT = 'ACTION_UPDATE_ROUTE_LIMIT'
+export const ACTION_UPDATE_ROUTE_LIMIT = 'ACTION_UPDATE_ROUTE_LIMIT';
 export const ACTION_UPDATE_DEVICES = 'ACTION_UPDATE_DEVICES';
 export const ACTION_UPDATE_DEVICE = 'ACTION_UPDATE_DEVICE';
 export const ACTION_UPDATE_ROUTE = 'ACTION_UPDATE_ROUTE';
@@ -26,9 +26,11 @@ export const ACTION_PRIME_SUBSCRIBE_INFO = 'ACTION_PRIME_SUBSCRIBE_INFO';
 export const ACTION_SEEK = 'action_seek';
 export const ACTION_PAUSE = 'action_pause';
 export const ACTION_PLAY = 'action_play';
+export const ACTION_PLAYBACK_SPEED = 'action_playback_speed';
 export const ACTION_LOOP = 'action_loop';
 export const ACTION_BUFFER_VIDEO = 'action_buffer_video';
 export const ACTION_RESET = 'action_reset';
+export const ACTION_HAS_AUDIO = 'action_has_audio';
 
 // segments
 export const ACTION_UPDATE_SEGMENT_RANGE = 'update_segment_range';

src/components/Dashboard/DriveListItem.jsx

@@ -125,7 +125,7 @@ const DriveListItem = (props) => {
       <div className={classes.driveHeader} style={!small ? { padding: '18px 32px' } : { padding: 18 }}>
         <Grid container>
           <div className={classes.driveGridItem} style={gridStyle.date}>
-            <Typography className={classes.firstLine}>{startDate}</Typography>
+            <Typography className={classes.firstLine}>{drive.display_name || startDate}</Typography>
             <Typography>{`${startTime} to ${endTime}`}</Typography>
           </div>
           <div className={`${classes.driveGridItem} ${small && classes.driveGridItemRightAlign}`} style={gridStyle.dur}>

src/components/DriveMap/index.jsx

@@ -6,7 +6,6 @@ import raf from 'raf';
 import ReactMapGL, { LinearInterpolator } from 'react-map-gl';
 
 import { fetchDriveCoords } from '../../actions/cached';
-import { currentOffset } from '../../timeline';
 import { DEFAULT_LOCATION, MAPBOX_STYLE, MAPBOX_TOKEN } from '../../utils/geocode';
 
 const INTERACTION_TIMEOUT = 5000;
@@ -46,7 +45,7 @@ class DriveMap extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { dispatch, currentRoute, startTime } = this.props;
+    const { dispatch, currentRoute } = this.props;
 
     const prevRoute = prevProps.currentRoute?.fullname || null;
     const route = currentRoute?.fullname || null;
@@ -57,10 +56,6 @@ class DriveMap extends Component {
       }
     }
 
-    if (prevProps.startTime && prevProps.startTime !== startTime) {
-      this.shouldFlyTo = true;
-    }
-
     if (currentRoute && prevProps.currentRoute && currentRoute.driveCoords
       && prevProps.currentRoute.driveCoords !== currentRoute.driveCoords) {
       this.shouldFlyTo = false;
@@ -99,7 +94,7 @@ class DriveMap extends Component {
     const markerSource = this.map && this.map.getMap().getSource('seekPoint');
     if (markerSource) {
       if (this.props.currentRoute && this.props.currentRoute.driveCoords) {
-        const pos = this.posAtOffset(currentOffset());
+        const pos = this.posAtOffset(this.props.offset);
         if (pos && pos.some((coordinate, index) => coordinate != this.lastMapPos[index])) {
           this.lastMapPos = pos;
           markerSource.setData({
@@ -310,7 +305,6 @@ class DriveMap extends Component {
 const stateToProps = Obstruction({
   offset: 'offset',
   currentRoute: 'currentRoute',
-  startTime: 'startTime',
 });
 
 export default connect(stateToProps)(DriveMap);