Merge upstream.

README.md

@@ -9,7 +9,7 @@ The frontend to the comma connect progressive web app. This a react app using [C
 
 ## Contributing
 
-If you don't have a comma device, connect has a demo mode with an example drive. This should allow for testing most functionality except for interactions with the device, such as getting the car battery voltage.
+If you don't have a comma device, connect has a demo mode with some example drives. This should allow for testing most functionality except for interactions with the device, such as getting the car battery voltage.
 
 * Use best practices
 * Write test cases
@@ -22,4 +22,18 @@ There's a ton of them, but these are worth mentioning because they sort of affec
  * `React` - Object oriented components with basic lifecycle callbacks rendered by state and prop changes.
  * `Redux` - Sane formal *global* scope. This is not a replacement for component state, which is the best way to store local component level variables and trigger re-renders. Redux state is for global state that many unrelated components care about. No free-form editing, only specific pre-defined actions. [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) can be very helpful.
  * `@material-ui` - Lots of fully featured highly customizable components for building the UIs with. Theming system with global and per-component overrides of any CSS values.
- * `react-router-redux` - the newer one, 5.x.... Mindlessly simple routing with convenient global access due to redux
+<<<<<<< HEAD
+ * `react-router-redux` - the newer one, 5.x.... Mindlessly simple routing with convenient global access due to redux
+=======
+ * `react-router-redux` - the newer one, 5.x.... Mindlessly simple routing with convenient global access due to redux
+
+## How things work
+The current playback is tracked not by storing the current offset, but instead storing the local time that the player began, the offset it began at, and the playback rate. Any time any of these values change, it rebases them all back to the current time. It means that at any arbitrary moment you can calculate the current offset with...
+```js
+(Date.now() - state.startTime) * state.playSpeed + state.offset
+```
+
+With this central authority on current offset time, it becomes much easier to have each data source keep themselves in sync instead of trying to manage synchronizing all of them.
+
+
+>>>>>>> upstream/master

src/App.jsx

@@ -12,7 +12,6 @@ import MyCommaAuth, { config as AuthConfig, storage as AuthStorage } from '@comm
 import { athena as Athena, auth as Auth, billing as Billing, request as Request } from '@commaai/api';
 
 import { getZoom } from './url';
-import { isDemo } from './demo';
 import store, { history } from './store';
 
 import ErrorFallback from './components/ErrorFallback';
@@ -123,7 +122,7 @@ class App extends Component {
       return this.renderLoading();
     }
 
-    const showLogin = !MyCommaAuth.isAuthenticated() && !isDemo() && !getZoom(window.location.pathname);
+    const showLogin = !MyCommaAuth.isAuthenticated() && !getZoom(window.location.pathname);
     let content = (
       <Suspense fallback={this.renderLoading()}>
         { showLogin ? this.anonymousRoutes() : this.authRoutes() }

src/__puppeteer__/demo.test.js

@@ -9,7 +9,8 @@ describe('demo mode', () => {
   });
 
   it('should load demo route', async () => {
-    await goto('/a2a0ccea32023010', { waitUntil: 'networkidle2' });
+    await goto('/');
+    await page.click('xpath=//a[contains(string(), "Try the demo")]');
 
     await page.waitForSelector('.DriveList');
     await page.waitForSelector('.DriveEntry');

src/__puppeteer__/drive.test.js

@@ -1,15 +1,19 @@
 /* eslint-env jest */
 import { configureViewport, goto } from './utils';
 
-const DEMO_DEVICE_URL = '/4cf7a6ad03080c90';
-const DEMO_ROUTE_URL = '/4cf7a6ad03080c90/1632948396703/1632949028503';
-const ZOOMED_DEMO_URL = '/4cf7a6ad03080c90/1632948397703/1632949027503';
+const DEMO_DEVICE_URL = '/1d3dc3e03047b0c7';
+const DEMO_ROUTE_URL = '/1d3dc3e03047b0c7/1716484475499/1716485004466';
+const ZOOMED_DEMO_URL = '/1d3dc3e03047b0c7/1716484476499/1716485003466';
 
 jest.setTimeout(60000);
 
 describe('drive view', () => {
   beforeAll(async () => {
     await configureViewport();
+
+    // Log in to demo account
+    await goto('/');
+    await page.click('xpath=//a[contains(string(), "Try the demo")]');
   });
 
   it('back button disabled when in route bounds', async () => {

src/__puppeteer__/routing.test.js

@@ -6,26 +6,25 @@ jest.setTimeout(30000);
 describe('routing', () => {
   beforeAll(async () => {
     await configureViewport();
-  });
 
-  it('login page', async () => {
+    // Log in to demo account
     await goto('/');
-    await page.waitForXPath('//*[contains(string(), "Try the demo")]');
+    await page.click('xpath=//a[contains(string(), "Try the demo")]');
   });
 
   it('load route list', async () => {
-    await goto('/a2a0ccea32023010');
+    await goto('/1d3dc3e03047b0c7');
 
     await page.waitForSelector('.DriveList');
     await page.waitForSelector('.DriveEntry');
 
-    // Page should have one ".DriveEntry" element
+    // Page should have at least one ".DriveEntry" element
     const driveEntries = await page.$$('.DriveEntry');
-    expect(driveEntries.length).toBe(1);
+    expect(driveEntries.length).toBeGreaterThanOrEqual(1);
   });
 
   it('load route from URL', async () => {
-    await goto('/a2a0ccea32023010/1690488081496/1690488851596', { timeout: 50000 });
+    await goto('/1d3dc3e03047b0c7/1716484475499/1716485004466', { timeout: 50000 });
 
     // Wait for video src to be set
     await page.waitForFunction(

src/actions/startup.js

@@ -2,13 +2,9 @@ import * as Sentry from '@sentry/react';
 import { account as Account, devices as Devices } from '@commaai/api';
 import MyCommaAuth from '@commaai/my-comma-auth';
 
-import * as Demo from '../demo';
 import { ACTION_STARTUP_DATA } from './types';
 import { primeFetchSubscription, checkRoutesData, selectDevice, fetchSharedDevice } from '.';
 
-import demoProfile from '../demo/profile.json';
-import demoDevices from '../demo/devices.json';
-
 async function initProfile() {
   if (MyCommaAuth.isAuthenticated()) {
     try {
@@ -21,19 +17,13 @@ async function initProfile() {
         Sentry.captureException(err, { fingerprint: 'init_api_get_profile' });
       }
     }
-  } else if (Demo.isDemo()) {
-    return demoProfile;
   }
   return null;
 }
 
 async function initDevices() {
   let devices = [];
 
-  if (Demo.isDemo()) {
-    devices = devices.concat(demoDevices);
-  }
-
   if (MyCommaAuth.isAuthenticated()) {
     try {
       devices = devices.concat(await Devices.listDevices());

src/analytics.js

@@ -7,7 +7,6 @@ import * as Types from './actions/types';
 import { sendEvent } from './analytics-v2';
 import { getDongleID, getZoom } from './url';
 import { deviceIsOnline } from './utils';
-import { isDemoDevice } from './demo';
 
 function getPageViewEventLocation(pathname) {
   let pageLocation = pathname;
@@ -130,7 +129,6 @@ function logAction(action, prevState, state) {
           superuser: state.profile?.superuser,
           has_prime: state.profile?.prime,
           devices_count: state.devices?.length,
-          device_is_demo: isDemoDevice(state.device?.dongle_id),
           device_prime_type: state.device?.prime_type,
           device_type: state.device?.device_type,
           device_version: state.device?.openpilot_version,
@@ -155,7 +153,6 @@ function logAction(action, prevState, state) {
     case Types.ACTION_SELECT_DEVICE:
       gtag('event', 'select_device', {
         ...params,
-        device_is_demo: isDemoDevice(state.device?.dongle_id),
         device_prime_type: state.device?.prime_type,
         device_type: state.device?.device_type,
         device_version: state.device?.openpilot_version,
@@ -172,7 +169,6 @@ function logAction(action, prevState, state) {
 
       gtag('set', {
         user_properties: {
-          device_is_demo: isDemoDevice(state.device?.dongle_id),
           device_prime_type: state.device?.prime_type,
           device_type: state.device?.device_type,
           device_version: state.device?.openpilot_version,

src/components/Navigation/index.jsx

@@ -13,7 +13,6 @@ import { athena as Athena, devices as Devices, navigation as NavigationApi } fro
 import { primeNav, analyticsEvent } from '../../actions';
 import { DEFAULT_LOCATION, forwardLookup, getDirections, MAPBOX_STYLE, MAPBOX_TOKEN, networkPositioning, reverseLookup } from '../../utils/geocode';
 import Colors from '../../colors';
-import * as Demo from '../../demo';
 import { PinCarIcon, PinMarkerIcon, PinHomeIcon, PinWorkIcon, PinPinnedIcon } from '../../icons';
 import { timeFromNow } from '../../utils';
 import ResizeHandler from '../ResizeHandler';
@@ -395,10 +394,6 @@ class Navigation extends Component {
   }
 
   updateDevice() {
-    if (Demo.isDemo()) {
-      return;
-    }
-
     this.getDeviceLastLocation();
     this.getDeviceNetworkLocation();
     this.updateFavoriteLocations();
@@ -480,7 +475,7 @@ class Navigation extends Component {
 
   updateFavoriteLocations() {
     const { dongleId, hasNav } = this.props;
-    if (!hasNav || Demo.isDemo()) {
+    if (!hasNav) {
       return;
     }
 

src/components/anonymous.jsx

@@ -9,15 +9,13 @@ import qs from 'query-string';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
-import { config as AuthConfig } from '@commaai/my-comma-auth';
+import {config as AuthConfig, storage as AuthStorage} from '@commaai/my-comma-auth';
 
 import Colors from '../colors';
 import { AuthAppleIcon, AuthGithubIcon, AuthGoogleIcon, RightArrow } from '../icons';
 
 import PWAIcon from './PWAIcon';
 
-import demoDevices from '../demo/devices.json';
-
 const styles = () => ({
   baseContainer: {
     width: '100%',
@@ -130,6 +128,11 @@ class AnonymousLanding extends Component {
   render() {
     const { classes } = this.props;
 
+    const loginAsDemoUser = function() {
+      AuthStorage.setCommaAccessToken('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDg1ODI0NjUsIm5iZiI6MTcxNzA0NjQ2NSwiaWF0IjoxNzE3MDQ2NDY1LCJpZGVudGl0eSI6IjBkZWNkZGNmZGYyNDFhNjAifQ.g3khyJgOkNvZny6Vh579cuQj1HLLGSDeauZbfZri9jw');
+      window.location = window.location.origin;
+    };
+
     return (
       <div className={classes.baseContainer}>
         <div className={classes.base}>
@@ -159,9 +162,8 @@ class AnonymousLanding extends Component {
             paired your comma device.
           </span>
 
-          <a
+          <a onClick={loginAsDemoUser}
             className="flex items-center pl-4 pr-3 py-2 font-medium border border-white rounded-full hover:bg-[rgba(255,255,255,0.1)] active:bg-[rgba(255,255,255,0.2)] transition-colors"
-            href={`${window.location.origin}/${demoDevices[0].dongle_id}`}
           >
             Try the demo
             <RightArrow className="ml-1 h-4" />

src/initialState.js

@@ -1,17 +1,9 @@
 import { getDongleID, getPrimeNav, getSegmentRange } from './url';
-import * as Demo from './demo';
 
 export function getDefaultFilter() {
   const d = new Date();
   d.setHours(d.getHours() + 1, 0, 0, 0);
 
-  if (Demo.isDemo()) {
-    return {
-      start: 1690488081496,
-      end: 1690488851596,
-    };
-  }
-
   return {
     start: (new Date(d.getTime() - 1000 * 60 * 60 * 24 * 14)).getTime(),
     end: d.getTime(),