35 |
47 | );
48 | };
49 |
50 | const stateToProps = Obstruction({
51 | dongleId: 'dongleId',
52 | primeNav: 'primeNav',
53 | device: 'device',
54 | });
55 |
56 | export default connect(stateToProps)(withStyles(styles)(Dashboard));
57 |
--------------------------------------------------------------------------------
/src/components/Dashboard/DriveList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import Obstruction from 'obstruction';
4 | import { withStyles } from '@material-ui/core';
5 |
6 | import { checkRoutesData } from '../../actions';
7 | import VisibilityHandler from '../VisibilityHandler';
8 |
9 | import DriveListEmpty from './DriveListEmpty';
10 | import DriveListItem from './DriveListItem';
11 |
12 | const styles = () => ({
13 | drivesTable: {
14 | display: 'flex',
15 | flexDirection: 'column',
16 | flexGrow: 1,
17 | },
18 | drives: {
19 | padding: 16,
20 | flex: '1',
21 | },
22 | });
23 |
24 | const DriveList = (props) => {
25 | const { dispatch, classes, device, routes } = props;
26 |
27 | // Filter out drives shorter than 10 seconds
28 | const driveList = (routes || [])
29 | .filter((drive) => drive.end_time_utc_millis - drive.start_time_utc_millis >= 10_000);
30 |
31 | let content;
32 | if (!driveList.length) {
33 | content =
37 | {driveList.map((drive) => (
38 |
41 | );
42 | }
43 |
44 | return (
45 |
46 | dispatch(checkRoutesData())} minInterval={60} />
47 | {content}
48 |
49 | );
50 | };
51 |
52 | const stateToProps = Obstruction({
53 | routes: 'routes',
54 | device: 'device',
55 | });
56 |
57 | export default connect(stateToProps)(withStyles(styles)(DriveList));
58 |
--------------------------------------------------------------------------------
/src/hooks/window.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 |
3 | const RESIZE_DEBOUNCE = 150; // ms
4 |
5 | export const useWindowWidth = () => {
6 | const [width, setWidth] = useState(window.innerWidth);
7 | const resizeTimeout = useRef(null);
8 |
9 | useEffect(() => {
10 | const handleResize = () => {
11 | if (resizeTimeout.current) {
12 | window.clearTimeout(resizeTimeout.current);
13 | }
14 |
15 | resizeTimeout.current = window.setTimeout(() => {
16 | setWidth(window.innerWidth);
17 | resizeTimeout.current = null;
18 | }, RESIZE_DEBOUNCE);
19 | };
20 | window.addEventListener('resize', handleResize);
21 | return () => {
22 | window.removeEventListener('resize', handleResize);
23 | if (resizeTimeout.current) {
24 | window.clearTimeout(resizeTimeout.current);
25 | }
26 | };
27 | }, []);
28 |
29 | return width;
30 | };
31 |
32 | export const useWindowHeight = () => {
33 | const [height, setHeight] = useState(window.innerHeight);
34 | const resizeTimeout = useRef(null);
35 |
36 | useEffect(() => {
37 | const handleResize = () => {
38 | if (resizeTimeout.current) {
39 | window.clearTimeout(resizeTimeout.current);
40 | }
41 |
42 | resizeTimeout.current = window.setTimeout(() => {
43 | setHeight(window.innerHeight);
44 | resizeTimeout.current = null;
45 | }, RESIZE_DEBOUNCE);
46 | };
47 | window.addEventListener('resize', handleResize);
48 | return () => {
49 | window.removeEventListener('resize', handleResize);
50 | if (resizeTimeout.current) {
51 | window.clearTimeout(resizeTimeout.current);
52 | }
53 | };
54 | }, []);
55 |
56 | return height;
57 | };
58 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Explorer Base Styles
4 | ~~~~~~~~~~~~~~~~~~~~
5 |
6 | */
7 |
8 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
9 | @import "~photo-sphere-viewer/dist/photo-sphere-viewer.css";
10 | @import "~photo-sphere-viewer/dist/plugins/video.css";
11 |
12 | @keyframes circular-rotate {
13 | 0% {
14 | transform: rotate(0deg);
15 | /* Fix IE11 wobbly */
16 | transform-origin: 50% 50%;
17 | }
18 | 100% {
19 | transform: rotate(360deg);
20 | }
21 | }
22 |
23 | :root {
24 | color-scheme: dark;
25 | }
26 |
27 | html, body {
28 | overscroll-behavior-y: none;
29 | }
30 |
31 | html {
32 | font-size: 16px;
33 | }
34 |
35 | body {
36 | background: #16181A;
37 | font-family: 'Inter', sans-serif;
38 | scrollbar-gutter: stable;
39 | overflow-y: scroll;
40 | margin: 0;
41 | padding: 0;
42 | }
43 |
44 | a:focus {
45 | outline: none;
46 | box-shadow: none;
47 | }
48 |
49 | /*
50 | Scrollbar
51 | ~~~~~~~~~~
52 | */
53 |
54 | .scrollstyle {
55 | scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
56 | }
57 |
58 | .scrollstyle::-webkit-scrollbar-track {
59 | background-color: transparent;
60 | }
61 |
62 | .scrollstyle::-webkit-scrollbar {
63 | -webkit-appearance: none;
64 | background-color: transparent;
65 | width: 6px;
66 | }
67 |
68 | .scrollstyle::-webkit-scrollbar-thumb {
69 | background-color: transparent;
70 | border-radius: 6px;
71 | }
72 |
73 | .scrollstyle:hover::-webkit-scrollbar-thumb {
74 | background-color: rgba(255, 255, 255, 0.1);
75 | }
76 |
77 | .scrollstyle::-webkit-scrollbar-thumb:hover {
78 | background-color: rgba(255, 255, 255, 0.2);
79 | }
80 |
81 | .scrollstyle::-webkit-scrollbar-thumb:active {
82 | background-color: rgba(255, 255, 255, 0.2);
83 | }
84 |
--------------------------------------------------------------------------------
/src/initialState.js:
--------------------------------------------------------------------------------
1 | import { getDongleID, getZoom, getPrimeNav } from './url';
2 | import * as Demo from './demo';
3 |
4 | export function getDefaultFilter() {
5 | const d = new Date();
6 | d.setHours(d.getHours() + 1, 0, 0, 0);
7 |
8 | if (Demo.isDemo()) {
9 | return {
10 | start: 1632948396703,
11 | end: 1632949028503,
12 | };
13 | }
14 |
15 | return {
16 | start: (new Date(d.getTime() - 1000 * 60 * 60 * 24 * 14)).getTime(),
17 | end: d.getTime(),
18 | };
19 | }
20 |
21 | function getDefaultLoop(pathname) {
22 | // in time instead of offset
23 | // this makes it so that the timespan can change without this changing
24 | // thats helpful to shared links and other things probably...
25 | const zoom = getZoom(pathname);
26 | if (zoom) {
27 | return {
28 | startTime: zoom.start,
29 | duration: zoom.end - zoom.start,
30 | };
31 | }
32 | return null;
33 | }
34 |
35 | export default {
36 | dongleId: getDongleID(window.location.pathname),
37 |
38 | desiredPlaySpeed: 1, // speed set by user
39 | isBufferingVideo: true, // if we're currently buffering for more data
40 | offset: null, // in miliseconds, relative to `state.filter.start`
41 | startTime: Date.now(), // millisecond timestamp in which play began
42 |
43 | routes: null,
44 | routesMeta: {
45 | dongleId: null,
46 | start: null,
47 | end: null,
48 | },
49 | currentRoute: null,
50 |
51 | profile: null,
52 | devices: null,
53 |
54 | primeNav: getPrimeNav(window.location.pathname),
55 | subscription: null,
56 | subscribeInfo: null,
57 |
58 | files: null,
59 | filesUploading: {},
60 | filesUploadingMeta: {
61 | dongleId: null,
62 | fetchedAt: null,
63 | },
64 |
65 | clips: null,
66 |
67 | filter: getDefaultFilter(),
68 | zoom: getZoom(window.location.pathname),
69 | loop: getDefaultLoop(window.location.pathname),
70 | };
71 |
--------------------------------------------------------------------------------
/src/utils/utils.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-env jest */
2 | import { deviceVersionAtLeast, formatDriveDuration } from '.';
3 |
4 | test('formats durations correctly', () => {
5 | // 1 hour, 59 minutes, 59 seconds
6 | const one = 1 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000;
7 | const oneFormatted = formatDriveDuration(one);
8 | expect(oneFormatted).toEqual('1 hr 59 min');
9 |
10 | // 59 minutes, 59 seconds
11 | const two = 59 * 60 * 1000 + 59 * 1000;
12 | const twoFormatted = formatDriveDuration(two);
13 | expect(twoFormatted).toEqual('59 min');
14 |
15 | // 60 seconds
16 | const three = 60 * 1000;
17 | const threeFormatted = formatDriveDuration(three);
18 | expect(threeFormatted).toEqual('1 min');
19 |
20 | // 59 seconds
21 | const four = 59 * 1000;
22 | const fourFormatted = formatDriveDuration(four);
23 | expect(fourFormatted).toEqual('0 min');
24 | });
25 |
26 | test('compares versions correctly', () => {
27 | const device = (version) => ({ openpilot_version: version });
28 | expect(deviceVersionAtLeast(device('0.8.0'), '0.0.1')).toEqual(true);
29 | expect(deviceVersionAtLeast(device('0.8.0'), '0.7.0')).toEqual(true);
30 | expect(deviceVersionAtLeast(device('0.8.0'), '0.7.99')).toEqual(true);
31 | expect(deviceVersionAtLeast(device('0.8.0.1'), '0.8.0')).toEqual(true);
32 | expect(deviceVersionAtLeast(device('0.8.0.1'), '0.8.0.1')).toEqual(true);
33 |
34 | expect(deviceVersionAtLeast(device('0.8.0'), '0.8.1')).toEqual(false);
35 | expect(deviceVersionAtLeast(device('0.8.0'), '0.9.0')).toEqual(false);
36 | expect(deviceVersionAtLeast(device('0.8.0'), '1.0.0')).toEqual(false);
37 | expect(deviceVersionAtLeast(device('0.7.99'), '0.8.0')).toEqual(false);
38 | expect(deviceVersionAtLeast(device('1.0.0'), '2.0.0')).toEqual(false);
39 |
40 | expect(deviceVersionAtLeast(device('0.8.14'), '0.8.14')).toEqual(true);
41 | expect(deviceVersionAtLeast(device('0.8.14'), '0.8.13')).toEqual(true);
42 | expect(deviceVersionAtLeast(device('0.8.13'), '0.8.14')).toEqual(false);
43 | expect(deviceVersionAtLeast(device('0.8.13'), '0.8.13')).toEqual(true);
44 | });
45 |
--------------------------------------------------------------------------------
/src/components/ResizeHandler/ResizeHandler.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-env jest */
2 | import React from 'react';
3 | import { fireEvent, render, waitFor } from '@testing-library/react';
4 |
5 | import ResizeHandler from '.';
6 | import { asyncSleep } from '../../utils';
7 |
8 | describe('resize handler', () => {
9 | it('registers, triggers and unregistered resize listener', async () => {
10 | let aResizeEventListenerWasAddedToWindow = false;
11 | let aResizeEventListenerWasRemovedFromWindow = false;
12 |
13 | const originalAddMethod = window.addEventListener;
14 | const addSpy = jest.spyOn(window, 'addEventListener');
15 |
16 | addSpy.mockImplementation((...args) => {
17 | originalAddMethod(...args);
18 |
19 | const [eventType] = args;
20 | if (eventType === 'resize') {
21 | aResizeEventListenerWasAddedToWindow = true;
22 | }
23 | });
24 |
25 | const originalRemoveMethod = window.removeEventListener;
26 | const removeSpy = jest.spyOn(window, 'removeEventListener');
27 |
28 | removeSpy.mockImplementation((...args) => {
29 | const [eventType] = args;
30 | if (eventType === 'resize') {
31 | aResizeEventListenerWasRemovedFromWindow = true;
32 | }
33 |
34 | originalRemoveMethod(...args);
35 | });
36 |
37 | const container = document.createElement('div');
38 | const callback = jest.fn();
39 | const { unmount } = render(
77 | Pair your device
78 |
79 | Pair your comma device by scanning the QR code on the device
80 |
81 |
85 |
82 |
84 |
86 |
87 | ![comma three]()
90 |
91 |
92 |
93 | );
94 | }
95 | }
96 |
97 | export default withStyles(styles)(NoDeviceUpsell);
98 |
--------------------------------------------------------------------------------
/src/actions/startup.js:
--------------------------------------------------------------------------------
1 | import * as Sentry from '@sentry/react';
2 | import { account as Account, devices as Devices } from '@commaai/api';
3 | import MyCommaAuth from '@commaai/my-comma-auth';
4 |
5 | import * as Demo from '../demo';
6 | import { ACTION_STARTUP_DATA } from './types';
7 | import { primeFetchSubscription, checkRoutesData, selectDevice, fetchSharedDevice } from '.';
8 |
9 | const demoProfile = require('../demo/profile.json');
10 | const demoDevices = require('../demo/devices.json');
11 |
12 | async function initProfile() {
13 | if (MyCommaAuth.isAuthenticated()) {
14 | try {
15 | return await Account.getProfile();
16 | } catch (err) {
17 | if (err.resp && err.resp.status === 401) {
18 | await MyCommaAuth.logOut();
19 | } else {
20 | console.error(err);
21 | Sentry.captureException(err, { fingerprint: 'init_api_get_profile' });
22 | }
23 | }
24 | } else if (Demo.isDemo()) {
25 | return demoProfile;
26 | }
27 | return null;
28 | }
29 |
30 | async function initDevices() {
31 | let devices = [];
32 |
33 | if (Demo.isDemo()) {
34 | devices = devices.concat(demoDevices);
35 | }
36 |
37 | if (MyCommaAuth.isAuthenticated()) {
38 | try {
39 | devices = devices.concat(await Devices.listDevices());
40 | } catch (err) {
41 | if (!err.resp || err.resp.status !== 401) {
42 | console.error(err);
43 | Sentry.captureException(err, { fingerprint: 'init_api_list_devices' });
44 | }
45 | }
46 | }
47 |
48 | return devices;
49 | }
50 |
51 | export default function init() {
52 | return async (dispatch, getState) => {
53 | let state = getState();
54 | if (state.dongleId) {
55 | dispatch(checkRoutesData());
56 | }
57 |
58 | const [profile, devices] = await Promise.all([initProfile(), initDevices()]);
59 | state = getState();
60 |
61 | if (profile) {
62 | Sentry.setUser({ id: profile.id });
63 | }
64 |
65 | if (devices.length > 0) {
66 | if (!state.dongleId) {
67 | const selectedDongleId = window.localStorage.getItem('selectedDongleId');
68 | if (selectedDongleId && devices.find((d) => d.dongle_id === selectedDongleId)) {
69 | dispatch(selectDevice(selectedDongleId));
70 | } else {
71 | dispatch(selectDevice(devices[0].dongle_id));
72 | }
73 | }
74 | const dongleId = state.dongleId || devices[0].dongle_id || null;
75 | const device = devices.find((dev) => dev.dongle_id === dongleId);
76 | if (device) {
77 | dispatch(primeFetchSubscription(dongleId, device, profile));
78 | } else if (dongleId) {
79 | dispatch(fetchSharedDevice(dongleId));
80 | }
81 | }
82 |
83 | dispatch({
84 | type: ACTION_STARTUP_DATA,
85 | profile,
86 | devices,
87 | });
88 | };
89 | }
90 |
--------------------------------------------------------------------------------
/src/icons/original/pin-pinned.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
75 |
--------------------------------------------------------------------------------
/src/icons/original/pin-marker.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
75 |
--------------------------------------------------------------------------------
/src/components/utils/BackgroundImage.js:
--------------------------------------------------------------------------------
1 | import React, { createRef, useEffect } from 'react';
2 | import { withStyles } from '@material-ui/core/styles';
3 |
4 | const styles = () => ({
5 | root: {
6 | position: 'relative',
7 | width: '100%',
8 | height: '100%',
9 | overflow: 'hidden',
10 | },
11 | placeholder: {
12 | position: 'absolute',
13 | zIndex: 1,
14 | top: 0,
15 | right: 0,
16 | bottom: 0,
17 | left: 0,
18 | backgroundPosition: 'center',
19 | backgroundSize: 'cover',
20 | opacity: 0,
21 | transition: 'opacity 0.3s ease',
22 | },
23 | hdImage: {
24 | position: 'absolute',
25 | zIndex: 2,
26 | top: 0,
27 | right: 0,
28 | bottom: 0,
29 | left: 0,
30 | // TODO: add attributes
31 | // backgroundPosition: 'center',
32 | // backgroundSize: 'cover',
33 | backgroundSize: 'contain',
34 | backgroundRepeat: 'no-repeat',
35 | backgroundPosition: 'center',
36 | opacity: 0,
37 | transition: 'opacity 0.3s ease',
38 | },
39 | overlay: {
40 | position: 'absolute',
41 | zIndex: 3,
42 | top: 0,
43 | right: 0,
44 | bottom: 0,
45 | left: 0,
46 | opacity: 0,
47 | transition: 'opacity 0.3s ease',
48 | },
49 | fadeIn: {
50 | opacity: 1,
51 | },
52 | });
53 |
54 | /* eslint-disable react/jsx-props-no-spreading, react-hooks/exhaustive-deps */
55 | const BackgroundImage = (props) => {
56 | const hdImageRef = createRef();
57 | const placeholderRef = createRef();
58 | const overlayRef = createRef();
59 | const { placeholder, classes, className, src, children, overlay, ...rest } = props;
60 |
61 | useEffect(() => {
62 | const newImage = document.createElement('img');
63 | const hdImageEl = hdImageRef.current;
64 | const placeholderEl = placeholderRef.current;
65 | const overlayEl = overlayRef.current;
66 | newImage.src = src;
67 | newImage.onload = () => {
68 | hdImageEl.setAttribute('style', `background-image: url(${src})`);
69 | hdImageEl.classList.add(classes.fadeIn);
70 | overlayEl.classList.add(classes.fadeIn);
71 | };
72 | newImage.onerror = () => {
73 | placeholderEl.classList.add(classes.fadeIn);
74 | overlayEl.classList.add(classes.fadeIn);
75 | };
76 |
77 | return () => {
78 | newImage.remove();
79 | };
80 | }, []);
81 |
82 | return (
83 | 
90 |
87 |
88 |
97 | );
98 | };
99 |
100 | export default withStyles(styles)(BackgroundImage);
101 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "connect",
3 | "version": "0.8.0",
4 | "scripts": {
5 | "start": "craco start",
6 | "build:development": "env-cmd .env.development craco build",
7 | "build:production": "REACT_APP_GIT_SHA=`git rev-parse HEAD` env-cmd .env.production craco build",
8 | "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
9 | "test": "craco test",
10 | "test-ci": "CI=true craco test",
11 | "test-coverage": "CI=true craco test --coverage",
12 | "test-puppeteer": "jest -c src/__puppeteer__/jest.config.js",
13 | "test-puppeteer-build": "JEST_PUPPETEER_CONFIG=jest-puppeteer.build.config.js yarn run test-puppeteer"
14 | },
15 | "repository": "git@github.com:commaai/connect.git",
16 | "author": "Chris Vickery
93 | {children}
94 |
95 | {overlay}
96 |
75 |
90 | );
91 | }
92 | }
93 |
94 | const stateToProps = Obstruction({
95 | currentRoute: 'currentRoute',
96 | dongleId: 'dongleId',
97 | clips: 'clips',
98 | });
99 |
100 | export default connect(stateToProps)(withStyles(styles)(ClipView));
101 |
--------------------------------------------------------------------------------
/src/icons/original/pin-home.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
75 |
--------------------------------------------------------------------------------
/src/components/VisibilityHandler/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import Obstruction from 'obstruction';
4 | import PropTypes from 'prop-types';
5 | import debounce from 'debounce';
6 |
7 | class VisibilityHandler extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.prevVisibleCall = 0;
12 | this.intervalHandle = null;
13 | this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
14 | this.handleFocus = this.handleFocus.bind(this);
15 | this.handleBlur = this.handleBlur.bind(this);
16 | this.onVisibilityEvent = debounce(this.onVisibilityEvent.bind(this), 1000, true);
17 | }
18 |
19 | componentDidMount() {
20 | document.addEventListener('visibilitychange', this.handleVisibilityChange);
21 | document.addEventListener('focus', this.handleFocus);
22 | document.addEventListener('blur', this.handleBlur);
23 | this.prevVisibleCall = Date.now() / 1000;
24 |
25 | const { onInit, onInterval, onVisible } = this.props;
26 | if (onInit) {
27 | onVisible();
28 | }
29 | if (onInterval) {
30 | this.intervalHandle = setInterval(this.handleVisibilityChange, onInterval * 1000);
31 | }
32 | }
33 |
34 | componentDidUpdate(prevProps) {
35 | const { dongleId, onDongleId, onVisible } = this.props;
36 | if (onDongleId && prevProps.dongleId !== dongleId) {
37 | this.prevVisibleCall = Date.now() / 1000;
38 | onVisible();
39 | }
40 | }
41 |
42 | componentWillUnmount() {
43 | document.removeEventListener('visibilitychange', this.handleVisibilityChange);
44 | document.removeEventListener('focus', this.handleFocus);
45 | document.removeEventListener('blur', this.handleBlur);
46 | if (this.intervalHandle) {
47 | clearInterval(this.intervalHandle);
48 | this.intervalHandle = null;
49 | }
50 | }
51 |
52 | handleFocus() {
53 | this.onVisibilityEvent(true);
54 | }
55 |
56 | handleBlur() {
57 | this.onVisibilityEvent(false);
58 | }
59 |
60 | handleVisibilityChange() {
61 | if (document.visibilityState === 'visible') {
62 | this.onVisibilityEvent(true);
63 | } else if (document.visibilityState === 'hidden') {
64 | this.onVisibilityEvent(false);
65 | }
66 | }
67 |
68 | onVisibilityEvent(visible) {
69 | const { minInterval, onVisible, resetOnHidden } = this.props;
70 |
71 | const newDate = Date.now() / 1000;
72 | const dt = newDate - this.prevVisibleCall;
73 | if (visible && (!minInterval || dt > minInterval)) {
74 | this.prevVisibleCall = newDate;
75 | onVisible();
76 | }
77 |
78 | if (!visible && resetOnHidden) {
79 | this.prevVisibleCall = newDate;
80 | }
81 | }
82 |
83 | render() {
84 | return null;
85 | }
86 | }
87 |
88 | const stateToProps = Obstruction({
89 | dongleId: 'dongleId',
90 | });
91 |
92 | VisibilityHandler.propTypes = {
93 | onVisible: PropTypes.func.isRequired,
94 | onInit: PropTypes.bool,
95 | onDongleId: PropTypes.bool,
96 | onInterval: PropTypes.number,
97 | minInterval: PropTypes.number, // in seconds, only for visibility changes
98 | resetOnHidden: PropTypes.bool,
99 | };
100 |
101 | export default connect(stateToProps)(VisibilityHandler);
102 |
--------------------------------------------------------------------------------
/src/components/AppDrawer/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import Obstruction from 'obstruction';
4 | import { Link } from 'react-router-dom';
5 |
6 | import { withStyles } from '@material-ui/core/styles';
7 | import 'mapbox-gl/src/css/mapbox-gl.css';
8 | import Typography from '@material-ui/core/Typography';
9 | import Drawer from '@material-ui/core/Drawer';
10 |
11 | import DeviceList from '../Dashboard/DeviceList';
12 |
13 | import { selectDevice } from '../../actions';
14 |
15 | const styles = () => ({
16 | header: {
17 | display: 'flex',
18 | height: 64,
19 | minHeight: 64,
20 | },
21 | window: {
22 | display: 'flex',
23 | flexGrow: 1,
24 | minHeight: 0,
25 | },
26 | logo: {
27 | alignItems: 'center',
28 | display: 'flex',
29 | textDecoration: 'none',
30 | minHeight: 64,
31 | },
32 | logoImg: {
33 | height: 34,
34 | width: 18.9,
35 | margin: '0px 28px',
36 | },
37 | logoText: {
38 | fontSize: 20,
39 | fontWeight: 800,
40 | },
41 | drawerContent: {
42 | height: '100%',
43 | width: '100%',
44 | display: 'flex',
45 | flexDirection: 'column',
46 | background: 'linear-gradient(180deg, #1B2023 0%, #111516 100%)',
47 | },
48 | sidebarHeader: {
49 | alignItems: 'center',
50 | padding: 14.5,
51 | color: '#fff',
52 | display: 'flex',
53 | width: '100%',
54 | paddingLeft: 0,
55 | backgroundColor: '#1D2225',
56 | borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
57 | },
58 | });
59 |
60 | class AppDrawer extends Component {
61 | constructor(props) {
62 | super(props);
63 |
64 | this.handleDeviceSelected = this.handleDeviceSelected.bind(this);
65 | this.toggleDrawerOff = this.toggleDrawerOff.bind(this);
66 | }
67 |
68 | handleDeviceSelected(dongleId) {
69 | this.props.dispatch(selectDevice(dongleId));
70 | this.toggleDrawerOff();
71 | }
72 |
73 | toggleDrawerOff() {
74 | this.props.handleDrawerStateChanged(false);
75 | }
76 |
77 | render() {
78 | const { classes, isPermanent, drawerIsOpen, selectedDongleId } = this.props;
79 |
80 | return (
81 |
76 | dispatch(clipsExit()) }>
77 |
79 |
84 | { clips.state === 'list' ?
80 | { title }
81 |
82 |
83 | { text }
: null }
89 |
88 | { !isPermanent
89 | && (
90 |
91 | 
92 | connect
93 |
94 | )}
95 | { isPermanent && }
96 |
102 |
92 |
108 |
110 | );
111 | }
112 | }
113 |
114 | export default withStyles(styles)(PullDownReload);
115 |
--------------------------------------------------------------------------------
/src/components/Navigation/utils.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-env jest */
2 | import * as Utils from './utils';
3 |
4 | describe('navigation formatting utils', () => {
5 | describe('formats search results correctly', () => {
6 | const testCases = [
7 | {
8 | // from mapbox api
9 | item: {
10 | title: 'Taco Bell',
11 | distance: 1234,
12 | address: {
13 | label: 'Taco Bell, 2011 Camino del Rio N, San Diego, CA 92108, United States',
14 | countryCode: 'USA',
15 | countryName: 'United States',
16 | stateCode: 'CA',
17 | state: 'California',
18 | county: 'San Diego',
19 | city: 'San Diego',
20 | district: 'Mission Valley East',
21 | street: 'Camino del Rio N',
22 | postalCode: '92108',
23 | houseNumber: '2011',
24 | },
25 | },
26 |
27 | // expected
28 | name: 'Taco Bell',
29 | address: '2011 Camino del Rio N, San Diego, CA 92108, United States',
30 | details: '2011 Camino del Rio N, San Diego',
31 | searchList: ', 2011 Camino del Rio N, San Diego (0.8 mi)',
32 | },
33 | {
34 | // from mapbox api
35 | item: {
36 | title: '1441 State St, San Diego, CA 92101-3421, United States',
37 | distance: 1234,
38 | address: {
39 | label: '1441 State St, San Diego, CA 92101-3421, United States',
40 | countryCode: 'USA',
41 | countryName: 'United States',
42 | stateCode: 'CA',
43 | state: 'California',
44 | county: 'San Diego',
45 | city: 'San Diego',
46 | district: 'Little Italy',
47 | street: 'State St',
48 | postalCode: '92101-3421',
49 | houseNumber: '1441',
50 | },
51 | },
52 |
53 | // expected
54 | name: '1441 State St',
55 | address: '1441 State St, San Diego, CA 92101-3421, United States',
56 | details: 'San Diego',
57 | searchList: ', San Diego (0.8 mi)',
58 | },
59 | ];
60 |
61 | testCases.forEach((testCase) => {
62 | const { item } = testCase;
63 |
64 | expect(Utils.formatSearchName(item)).toBe(testCase.name);
65 | expect(Utils.formatSearchAddress(item)).toBe(testCase.address);
66 | expect(Utils.formatSearchDetails(item)).toBe(testCase.details);
67 | expect(Utils.formatSearchList(item)).toBe(testCase.searchList);
68 | });
69 | });
70 |
71 | it('formats favorites correctly', () => {
72 | const testCases = [
73 | {
74 | // from favorites
75 | item: {
76 | title: '123 San Diego St',
77 | distance: 1234,
78 | address: {
79 | label: '123 San Diego St, San Diego, CA 92123, United States',
80 | },
81 | },
82 |
83 | // expected
84 | name: '123 San Diego St',
85 | address: '123 San Diego St, San Diego, CA 92123, United States',
86 | details: 'San Diego, CA 92123, United States',
87 | searchList: ', San Diego (0.8 mi)',
88 | },
89 | ];
90 |
91 | testCases.forEach((testCase) => {
92 | const { item } = testCase;
93 |
94 | expect(Utils.formatSearchName(item)).toBe(testCase.name);
95 | expect(Utils.formatSearchAddress(item)).toBe(testCase.address);
96 | expect(Utils.formatSearchDetails(item)).toBe(testCase.details);
97 | });
98 | });
99 | });
100 |
--------------------------------------------------------------------------------
/src/components/ServiceWorkerWrapper/index.js:
--------------------------------------------------------------------------------
1 | import { Button, CircularProgress, Snackbar, withStyles } from '@material-ui/core';
2 | import React, { useEffect, useState } from 'react';
3 | import * as Sentry from '@sentry/react';
4 |
5 | import { register, unregister } from '../../serviceWorkerRegistration';
6 |
7 | const styles = () => ({
8 | button: {
9 | textTransform: 'uppercase',
10 | },
11 | });
12 |
13 | const ServiceWorkerWrapper = (props) => {
14 | const { classes } = props;
15 |
16 | const [showUpdate, setShowUpdate] = useState(false);
17 | const [loading, setLoading] = useState(false);
18 |
19 | const [waitingWorker, setWaitingWorker] = useState(null);
20 | const [refreshing, setRefreshing] = useState(false);
21 |
22 | const onSWUpdate = (registration) => {
23 | if (!registration.waiting) {
24 | Sentry.captureMessage('[ServiceWorkerWrapper] Update is available but there is no waiting service worker to install', 'warning');
25 | return;
26 | }
27 | console.log('[ServiceWorkerWrapper] Update is available');
28 | setWaitingWorker(registration.waiting);
29 | setShowUpdate(true);
30 | };
31 |
32 | const onSWSuccess = () => {
33 | console.log('[ServiceWorkerWrapper] Update successful');
34 | };
35 |
36 | /* eslint-disable react-hooks/exhaustive-deps */
37 | useEffect(() => {
38 | if (process.env.NODE_ENV === 'production' && process.env.REACT_APP_SERVICEWORKER) {
39 | console.log('[ServiceWorkerWrapper] Registering service worker...');
40 | register({
41 | // show update found message
42 | onUpdate: onSWUpdate,
43 |
44 | // TODO: show "connect now works offline" message
45 | onSuccess: onSWSuccess,
46 | });
47 | } else {
48 | console.log('[ServiceWorkerWrapper] Unregistering service worker...');
49 | unregister();
50 | }
51 | }, []);
52 | /* eslint-enable react-hooks/exhaustive-deps */
53 |
54 | const onReload = () => {
55 | if (!waitingWorker) {
56 | Sentry.captureMessage('[ServiceWorkerWrapper] No waiting worker found', 'error');
57 | setShowUpdate(false);
58 | return;
59 | }
60 | setLoading(true);
61 | waitingWorker.postMessage({ type: 'SKIP_WAITING' });
62 | setTimeout(() => {
63 | Sentry.captureMessage('[ServiceWorkerWrapper] Timed out waiting for controller change', 'error');
64 | if (refreshing) return;
65 | setRefreshing(true);
66 | window.location.reload();
67 | }, 60_000);
68 | };
69 |
70 | const onDismiss = () => {
71 | setShowUpdate(false);
72 | };
73 |
74 | const action = (
75 | <>
76 |
85 |
94 |
95 | );
96 |
97 | return (
98 |
77 |
101 |
102 | );
103 | }
104 | }
105 |
106 | const stateToProps = Obstruction({
107 | dongleId: 'dongleId',
108 | routes: 'routes',
109 | zoom: 'zoom',
110 | });
111 |
112 | export default connect(stateToProps)(withStyles(styles)(DriveView));
113 |
--------------------------------------------------------------------------------
/src/icons/original/pin-car.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
75 |
--------------------------------------------------------------------------------
/src/timeline/segments.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-env jest */
2 | import { getCurrentRoute } from '.';
3 | import { hasRoutesData, SEGMENT_LENGTH } from './segments';
4 | import { getSegmentNumber } from '../utils';
5 |
6 | const routes = [{
7 | fullname: '99c94dc769b5d96e|2018-04-09--10-10-00',
8 | offset: 36600000,
9 | duration: 2558000,
10 | segment_numbers: Array.from(Array(43).keys()),
11 | segment_offsets: Array.from(Array(43).keys()).map((i) => i * SEGMENT_LENGTH + 36600000),
12 | events: [{
13 | time: 36600123,
14 | type: 'event',
15 | }],
16 | }, {
17 | fullname: '99c94dc769b5d96e|2018-04-09--11-29-08',
18 | offset: 41348000,
19 | duration: 214000,
20 | segment_numbers: Array.from(Array(4).keys()),
21 | segment_offsets: Array.from(Array(4).keys()).map((i) => i * SEGMENT_LENGTH + 41348000),
22 | events: [{
23 | time: 41348123,
24 | type: 'event',
25 | }],
26 | }];
27 |
28 | describe('segments', () => {
29 | it('finds current segment', async () => {
30 | const [route] = routes;
31 | let r = getCurrentRoute({
32 | routes,
33 | offset: route.offset,
34 | desiredPlaySpeed: 1,
35 | startTime: Date.now(),
36 | });
37 | expect(r.fullname).toBe(route.fullname);
38 | expect(getSegmentNumber(r, route.offset)).toBe(0);
39 |
40 | r = getCurrentRoute({
41 | routes,
42 | offset: route.offset + SEGMENT_LENGTH * 1.1,
43 | desiredPlaySpeed: 1,
44 | startTime: Date.now(),
45 | });
46 | expect(getSegmentNumber(r, route.offset + SEGMENT_LENGTH * 1.1)).toBe(1);
47 | });
48 |
49 | it('finds last segment of a route', async () => {
50 | const [route] = routes;
51 | const offset = route.offset + SEGMENT_LENGTH * (route.segment_offsets.length - 1) + 1000;
52 | const r = getCurrentRoute({
53 | routes,
54 | offset,
55 | desiredPlaySpeed: 1,
56 | startTime: Date.now(),
57 | });
58 | expect(r.fullname).toBe(route.fullname);
59 | expect(getSegmentNumber(r, offset)).toBe(route.segment_offsets.length - 1);
60 | });
61 |
62 | it('ends last segment of a route', async () => {
63 | const [route] = routes;
64 | const offset = route.offset + route.duration - 10;
65 | const r = getCurrentRoute({
66 | routes,
67 | offset,
68 | desiredPlaySpeed: 1,
69 | startTime: Date.now() - 50,
70 | });
71 | expect(getSegmentNumber(r, offset)).toBe(null);
72 | });
73 |
74 | it('can check if it has segment metadata', () => {
75 | expect(hasRoutesData()).toBe(false);
76 | expect(hasRoutesData({})).toBe(false);
77 | expect(hasRoutesData({
78 | routesMeta: {},
79 | })).toBe(false);
80 | expect(hasRoutesData({
81 | routes: [],
82 | routesMeta: {
83 | dongleId: 'asdfasdf',
84 | },
85 | })).toBe(false);
86 | expect(hasRoutesData({
87 | routes: [],
88 | routesMeta: {
89 | dongleId: 'asdfasdf',
90 | start: 10,
91 | end: 20,
92 | },
93 | filter: {
94 | start: 0,
95 | end: 30,
96 | },
97 | dongleId: 'asdfasdf',
98 | })).toBe(false);
99 | expect(hasRoutesData({
100 | routes: [],
101 | routesMeta: {
102 | dongleId: 'asdfasdf',
103 | start: 0,
104 | end: 20,
105 | },
106 | filter: {
107 | start: 10,
108 | end: 30,
109 | },
110 | dongleId: 'asdfasdf',
111 | })).toBe(false);
112 | expect(hasRoutesData({
113 | routes: [],
114 | routesMeta: {
115 | dongleId: 'asdfasdf',
116 | start: 10,
117 | end: 30,
118 | },
119 | filter: {
120 | start: 0,
121 | end: 20,
122 | },
123 | dongleId: 'asdfasdf',
124 | })).toBe(false);
125 | expect(hasRoutesData({
126 | routes: [],
127 | routesMeta: {
128 | dongleId: 'asdfasdf',
129 | start: 0,
130 | end: 30,
131 | },
132 | filter: {
133 | start: 10,
134 | end: 20,
135 | },
136 | dongleId: 'asdfasdf',
137 | })).toBe(true);
138 | });
139 | });
140 |
--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
1 | import { createMuiTheme } from '@material-ui/core/styles';
2 | import Colors from './colors';
3 | import { ChevronIcon } from './icons';
4 |
5 | const theme = createMuiTheme({
6 | typography: {
7 | fontFamily: "'Inter', sans-serif",
8 | },
9 | overrides: {
10 | MuiButton: {
11 | root: {
12 | textTransform: 'none',
13 | },
14 | },
15 | MuiPaper: {
16 | root: {
17 | backgroundColor: '#30373B',
18 | },
19 | },
20 | MuiDrawer: {
21 | paper: {
22 | overflowY: null,
23 | },
24 | paperAnchorDockedLeft: {
25 | borderRight: 'none',
26 | },
27 | },
28 | MuiSelect: {
29 | select: {
30 | padding: '12px',
31 | paddingRight: '48px',
32 | margin: '0px',
33 | '&>div': {
34 | margin: '0',
35 | },
36 | '&:focus': {
37 | background: 'inherit',
38 | },
39 | },
40 | selectMenu: {
41 | paddingRight: 54,
42 | },
43 | icon: {
44 | marginRight: 20,
45 | color: Colors.white30,
46 | },
47 | },
48 | MuiInput: {
49 | root: {
50 | position: 'relative',
51 | border: `1px solid ${Colors.grey800}`,
52 | borderRadius: 20,
53 | overflow: 'hidden',
54 | },
55 | input: {
56 | padding: '12px 16px',
57 | '&::placeholder': {
58 | opacity: 1,
59 | color: Colors.white30,
60 | },
61 | '&:focus': {
62 | outline: 'none',
63 | boxShadow: 'none',
64 | },
65 | },
66 | },
67 | MuiInputLabel: {
68 | shrink: {
69 | transform: 'translate(0, -2px) scale(0.75)',
70 | },
71 | },
72 | MuiFormLabel: {
73 | root: {
74 | marginLeft: 16,
75 | marginTop: 4,
76 | },
77 | },
78 | MuiFormHelperText: {
79 | root: {
80 | marginLeft: 8,
81 | marginTop: 4,
82 | },
83 | },
84 | MuiTab: {
85 | root: {
86 | minHeight: 40,
87 | },
88 | },
89 | MuiListItem: {
90 | root: {
91 | '&:focus': {
92 | outline: 'none',
93 | boxShadow: 'none',
94 | },
95 | },
96 | },
97 | MuiSnackbarContent: {
98 | root: {
99 | backgroundColor: Colors.grey700,
100 | color: Colors.white,
101 | },
102 | },
103 | },
104 | props: {
105 | MuiSelect: {
106 | disableUnderline: true,
107 | IconComponent: ChevronIcon,
108 | },
109 | MuiInput: {
110 | disableUnderline: true,
111 | },
112 | },
113 | palette: {
114 | type: 'dark',
115 | placeholder: Colors.white30,
116 | background: {
117 | default: Colors.grey999,
118 | },
119 | primary: {
120 | light: Colors.lightBlue700,
121 | main: Colors.lightBlue900,
122 | dark: Colors.blue100,
123 | },
124 | secondary: {
125 | light: Colors.green100,
126 | main: Colors.green200,
127 | dark: Colors.green500,
128 | },
129 | states: {
130 | drivingBlue: Colors.blue500,
131 | engagedGreen: Colors.green400,
132 | engagedGrey: '#919b95',
133 | alertOrange: Colors.orange50,
134 | alertRed: Colors.red100,
135 | userFlag: Colors.yellow500,
136 | },
137 | grey: {
138 | 50: Colors.grey50,
139 | 100: Colors.grey100,
140 | 200: Colors.grey200,
141 | 300: Colors.grey300,
142 | 400: Colors.grey400,
143 | 500: Colors.grey500,
144 | 600: Colors.grey600,
145 | 700: Colors.grey700,
146 | 800: Colors.grey800,
147 | 900: Colors.grey900,
148 | 950: Colors.grey950,
149 | 999: Colors.grey999,
150 | },
151 | lightGrey: {
152 | 200: Colors.lightGrey200,
153 | },
154 | white: {
155 | 10: Colors.white10,
156 | 12: Colors.white12,
157 | 20: Colors.white20,
158 | 30: Colors.white30,
159 | 40: Colors.white40,
160 | 50: Colors.white50,
161 | },
162 | error: {
163 | main: 'rgba(209, 35, 35, 0.72)',
164 | },
165 | },
166 | });
167 |
168 | export default theme;
169 |
--------------------------------------------------------------------------------
/src/components/utils/SwitchLoading.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { withStyles, Switch, FormControlLabel, Popper, Typography } from '@material-ui/core';
5 | import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
6 |
7 | import Colors from '../../colors';
8 | import InfoTooltip from './InfoTooltip';
9 |
10 | const styles = () => ({
11 | root: {
12 | display: 'flex',
13 | alignItems: 'center',
14 | },
15 | switchThumbLoading: {
16 | '&::before': {
17 | content: '\'\'',
18 | display: 'inline-block',
19 | height: '100%',
20 | width: '100%',
21 | backgroundImage: 'url(\'data:image/svg+xml;utf8,'
22 | + '\')',
25 | strokeDasharray: '80px, 200px',
26 | animation: 'circular-rotate 1s linear infinite',
27 | },
28 | },
29 | errorIcon: {
30 | color: Colors.red300,
31 | },
32 | copiedPopover: {
33 | borderRadius: 16,
34 | padding: '8px 16px',
35 | border: `1px solid ${Colors.white10}`,
36 | backgroundColor: Colors.grey800,
37 | marginTop: 12,
38 | zIndex: 50000,
39 | maxWidth: '95%',
40 | '& p': {
41 | maxWidth: 400,
42 | fontSize: '0.9rem',
43 | color: Colors.white,
44 | margin: 0,
45 | },
46 | },
47 | });
48 |
49 | class SwitchLoading extends Component {
50 | constructor(props) {
51 | super(props);
52 |
53 | this.state = {
54 | loading: false,
55 | checked: null,
56 | error: null,
57 | errorPopper: null,
58 | };
59 |
60 | this.onChange = this.onChange.bind(this);
61 | }
62 |
63 | async onChange(ev) {
64 | if (this.state.loading) {
65 | return;
66 | }
67 |
68 | this.setState({
69 | loading: true,
70 | checked: ev.target.checked,
71 | error: null,
72 | });
73 |
74 | const res = await this.props.onChange(ev);
75 | if (res?.error) {
76 | this.setState({
77 | loading: false,
78 | checked: null,
79 | error: res.error,
80 | });
81 | return;
82 | }
83 |
84 | this.setState({
85 | loading: false,
86 | checked: null,
87 | error: null,
88 | });
89 | }
90 |
91 | render() {
92 | const { classes, checked, label, loading, tooltip } = this.props;
93 |
94 | const isChecked = this.state.checked !== null ? this.state.checked : checked;
95 | const loadingCls = (loading || this.state.loading) ? { icon: classes.switchThumbLoading } : {};
96 |
97 | const switchEl = (
98 |
78 |
95 |
79 | window.history.back() }>
80 |
82 |
90 |
92 |
93 |
83 | { headerText }
84 |
85 |
96 | { (routes && routes.length === 0)
97 | ? Route does not exist.
98 | :
100 |
109 | this.setState({ errorPopper: null }) }
116 | onMouseEnter={ (ev) => this.setState({ errorPopper: ev.target }) }
117 | />
118 |
124 | { this.state.error }
125 |
126 |
127 | )}
128 |
129 | );
130 | }
131 | }
132 |
133 | SwitchLoading.propTypes = {
134 | checked: PropTypes.bool.isRequired,
135 | onChange: PropTypes.func.isRequired,
136 | loading: PropTypes.bool,
137 | label: PropTypes.string,
138 | tooltip: PropTypes.string,
139 | };
140 |
141 | export default withStyles(styles)(SwitchLoading);
142 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component, lazy, Suspense } from 'react';
2 | import { Provider } from 'react-redux';
3 | import { Route, Switch, Redirect } from 'react-router';
4 | import { ConnectedRouter } from 'connected-react-router';
5 | import qs from 'query-string';
6 | import localforage from 'localforage';
7 | import * as Sentry from '@sentry/react';
8 |
9 | import { CircularProgress, Grid } from '@material-ui/core';
10 |
11 | import MyCommaAuth, { config as AuthConfig, storage as AuthStorage } from '@commaai/my-comma-auth';
12 | import { athena as Athena, auth as Auth, billing as Billing, request as Request } from '@commaai/api';
13 |
14 | import { getZoom, getClipsNav } from './url';
15 | import { isDemo } from './demo';
16 | import store, { history } from './store';
17 | import { analyticsEvent } from './actions'
18 |
19 | const Explorer = lazy(() => import('./components/explorer'));
20 | const AnonymousLanding = lazy(() => import('./components/anonymous'));
21 |
22 | class App extends Component {
23 | constructor(props) {
24 | super(props);
25 |
26 | this.state = {
27 | initialized: false,
28 | };
29 |
30 | let pairToken;
31 | if (window.location) {
32 | pairToken = qs.parse(window.location.search).pair;
33 | }
34 |
35 | if (pairToken) {
36 | try {
37 | localforage.setItem('pairToken', pairToken);
38 | } catch (err) {
39 | console.error(err);
40 | }
41 | }
42 | }
43 |
44 | async componentDidMount() {
45 | if (window.location) {
46 | if (window.location.pathname === AuthConfig.AUTH_PATH) {
47 | try {
48 | const { code, provider } = qs.parse(window.location.search);
49 | const token = await Auth.refreshAccessToken(code, provider);
50 | if (token) {
51 | AuthStorage.setCommaAccessToken(token);
52 | }
53 | } catch (err) {
54 | console.error(err);
55 | Sentry.captureException(err, { fingerprint: 'app_auth_refresh_token' });
56 | }
57 | }
58 | }
59 |
60 | const token = await MyCommaAuth.init();
61 | if (token) {
62 | Request.configure(token);
63 | Billing.configure(token);
64 | Athena.configure(token);
65 | }
66 |
67 | this.setState({ initialized: true });
68 |
69 | // set up analytics, low priority, so we do this last
70 | import('./analytics-v2');
71 | }
72 |
73 | redirectLink() {
74 | let url = '/';
75 | if (typeof window.sessionStorage !== 'undefined' && sessionStorage.getItem('redirectURL') !== null) {
76 | url = sessionStorage.getItem('redirectURL');
77 | sessionStorage.removeItem('redirectURL');
78 | }
79 | return url;
80 | }
81 |
82 | authRoutes() {
83 | return (
84 |
95 |
96 |
105 |
106 | );
107 | }
108 |
109 | render() {
110 | const { classes, devices, deviceFilter, onClose, open } = this.props;
111 | if (!devices) {
112 | return null;
113 | }
114 |
115 | return (
116 |
97 |
98 | { alias }
99 |
100 |
101 | { device.dongle_id }
102 |
103 |
104 |
119 | Select device
120 |
121 |
123 | {devices.filter(deviceFilter || (() => true)).map(this.renderDevice)}
124 |
125 |
128 |
132 |
147 |
148 | );
149 | }
150 | }
151 |
152 | const stateToProps = Obstruction({
153 | pathname: 'router.location.pathname',
154 | });
155 |
156 | export default connect(stateToProps)(withStyles(styles)(IosPwaPopup));
157 |
--------------------------------------------------------------------------------
/src/timeline/playback.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-env jest */
2 | import { asyncSleep } from '../utils';
3 | import { currentOffset } from '.';
4 | import { bufferVideo, pause, play, reducer, seek, selectLoop } from './playback';
5 |
6 | const makeDefaultStruct = function makeDefaultStruct() {
7 | return {
8 | filter: {
9 | start: Date.now(),
10 | end: Date.now() + 100000,
11 | },
12 | desiredPlaySpeed: 1, // 0 = stopped, 1 = playing, 2 = 2x speed... multiplier on speed
13 | offset: 0, // in miliseconds from the start
14 | startTime: Date.now(), // millisecond timestamp in which play began
15 |
16 | isBuffering: true,
17 | };
18 | };
19 |
20 | // make Date.now super stable for tests
21 | let mostRecentNow = Date.now();
22 | const oldNow = Date.now;
23 | Date.now = function now() {
24 | return mostRecentNow;
25 | };
26 | function newNow() {
27 | mostRecentNow = oldNow();
28 | return mostRecentNow;
29 | }
30 |
31 | describe('playback', () => {
32 | it('has playback controls', async () => {
33 | newNow();
34 | let state = makeDefaultStruct();
35 |
36 | // should do nothing
37 | state = reducer(state, pause());
38 | expect(state.desiredPlaySpeed).toEqual(0);
39 |
40 | // start playing, should set start time and such
41 | let playTime = newNow();
42 | state = reducer(state, play());
43 | // this is a (usually 1ms) race condition
44 | expect(state.startTime).toEqual(playTime);
45 | expect(state.desiredPlaySpeed).toEqual(1);
46 |
47 | await asyncSleep(100 + Math.random() * 200);
48 | // should update offset
49 | let ellapsed = newNow() - playTime;
50 | state = reducer(state, pause());
51 |
52 | expect(state.offset).toEqual(ellapsed);
53 |
54 | // start playing, should set start time and such
55 | playTime = newNow();
56 | state = reducer(state, play(0.5));
57 | // this is a (usually 1ms) race condition
58 | expect(state.startTime).toEqual(playTime);
59 | expect(state.desiredPlaySpeed).toEqual(0.5);
60 |
61 | await asyncSleep(100 + Math.random() * 200);
62 | // should update offset, playback speed 1/2
63 | ellapsed += (newNow() - playTime) / 2;
64 | expect(currentOffset(state)).toEqual(ellapsed);
65 | state = reducer(state, pause());
66 |
67 | expect(state.offset).toEqual(ellapsed);
68 |
69 | // seek!
70 | newNow();
71 | state = reducer(state, seek(123));
72 | expect(state.offset).toEqual(123);
73 | expect(state.startTime).toEqual(Date.now());
74 | expect(currentOffset(state)).toEqual(123);
75 | });
76 |
77 | it('should clamp loop when seeked after loop end time', () => {
78 | newNow();
79 | let state = makeDefaultStruct();
80 |
81 | // set up loop
82 | state = reducer(state, play());
83 | state = reducer(state, selectLoop(
84 | state.filter.start + 1000,
85 | state.filter.start + 2000,
86 | ));
87 | expect(state.loop.startTime).toEqual(state.filter.start + 1000);
88 |
89 | // seek past loop end boundary a
90 | state = reducer(state, seek(3000));
91 | expect(state.loop.startTime).toEqual(state.filter.start + 1000);
92 | expect(state.offset).toEqual(2000);
93 | });
94 |
95 | it('should clamp loop when seeked before loop start time', () => {
96 | newNow();
97 | let state = makeDefaultStruct();
98 |
99 | // set up loop
100 | state = reducer(state, play());
101 | state = reducer(state, selectLoop(
102 | state.filter.start + 1000,
103 | state.filter.start + 2000,
104 | ));
105 | expect(state.loop.startTime).toEqual(state.filter.start + 1000);
106 |
107 | // seek past loop end boundary a
108 | state = reducer(state, seek(0));
109 | expect(state.loop.startTime).toEqual(state.filter.start + 1000);
110 | expect(state.offset).toEqual(1000);
111 | });
112 |
113 | it('should buffer video and data', async () => {
114 | newNow();
115 | let state = makeDefaultStruct();
116 |
117 | state = reducer(state, play());
118 | expect(state.desiredPlaySpeed).toEqual(1);
119 |
120 | // claim the video is buffering
121 | state = reducer(state, bufferVideo(true));
122 | expect(state.desiredPlaySpeed).toEqual(1);
123 | expect(state.isBufferingVideo).toEqual(true);
124 |
125 | state = reducer(state, play(0.5));
126 | expect(state.desiredPlaySpeed).toEqual(0.5);
127 | expect(state.isBufferingVideo).toEqual(true);
128 |
129 | expect(state.desiredPlaySpeed).toEqual(0.5);
130 |
131 | state = reducer(state, play(2));
132 | state = reducer(state, bufferVideo(false));
133 | expect(state.desiredPlaySpeed).toEqual(2);
134 | expect(state.isBufferingVideo).toEqual(false);
135 |
136 | expect(state.desiredPlaySpeed).toEqual(2);
137 | });
138 | });
139 |
--------------------------------------------------------------------------------
/src/colors.js:
--------------------------------------------------------------------------------
1 | const Colors = {
2 | transparent: 'transparent',
3 | white: '#fff',
4 | darken10: 'rgba(0, 0, 0, 0.1)',
5 | darken20: 'rgba(0, 0, 0, 0.2)',
6 | darken30: 'rgba(0, 0, 0, 0.3)',
7 | darken40: 'rgba(0, 0, 0, 0.4)',
8 | darken50: 'rgba(0, 0, 0, 0.5)',
9 | darken60: 'rgba(0, 0, 0, 0.6)',
10 | darken70: 'rgba(0, 0, 0, 0.7)',
11 | darken80: 'rgba(0, 0, 0, 0.8)',
12 | darken90: 'rgba(0, 0, 0, 0.9)',
13 | white03: 'rgba(255, 255, 255, 0.03)',
14 | white05: 'rgba(255, 255, 255, 0.05)',
15 | white08: 'rgba(255, 255, 255, 0.08)',
16 | white10: 'rgba(255, 255, 255, 0.1)',
17 | white12: 'rgba(255, 255, 255, 0.12)',
18 | white20: 'rgba(255, 255, 255, 0.2)',
19 | white30: 'rgba(255, 255, 255, 0.3)',
20 | white40: 'rgba(255, 255, 255, 0.4)',
21 | white50: 'rgba(255, 255, 255, 0.5)',
22 | white60: 'rgba(255, 255, 255, 0.6)',
23 | white70: 'rgba(255, 255, 255, 0.7)',
24 | white80: 'rgba(255, 255, 255, 0.8)',
25 | white90: 'rgba(255, 255, 255, 0.9)',
26 | black: '#030404',
27 | blue50: '#258FDA',
28 | blue100: '#2284c9',
29 | blue200: '#1f79b8',
30 | blue300: '#1c6ea8',
31 | blue400: '#1a6397',
32 | blue500: '#175886',
33 | blue600: '#144d75',
34 | blue700: '#114265',
35 | blue800: '#0e3754',
36 | blue900: '#0b2c43',
37 | blue950: '#061622',
38 | blue999: '#030b11',
39 | lightBlue50: '#eef6fc',
40 | lightBlue100: '#ddeef9',
41 | lightBlue200: '#cde5f6',
42 | lightBlue300: '#bcddf4',
43 | lightBlue400: '#abd4f1',
44 | lightBlue500: '#9acbee',
45 | lightBlue600: '#8ac3eb',
46 | lightBlue700: '#79bae8',
47 | lightBlue800: '#68b1e5',
48 | lightBlue900: '#57a9e3',
49 | desatBlue800: '#657f92',
50 | primeBlue50: '#5e8bff',
51 | primeBlue100: '#5984F2',
52 | primeBlue200: '#547de6',
53 | primeBlue300: '#4b6fcc',
54 | primeBlue400: '#4261b3',
55 | primeBlue500: '#385399',
56 | primeBlue600: '#2f4680',
57 | primeBlue700: '#263866',
58 | primeBlue800: '#1c2a4d',
59 | primeBlue900: '#131c33',
60 | red50: '#da2535',
61 | red100: '#c92231',
62 | red200: '#b81f2d',
63 | red300: '#971a25',
64 | red400: '#861721',
65 | red500: '#75141d',
66 | red600: '#651118',
67 | red700: '#540e14',
68 | red800: '#430b10',
69 | red900: '#32090c',
70 | lightRed50: '#fceeef',
71 | lightRed100: '#f9dde0',
72 | lightRed200: '#f6cdd0',
73 | lightRed300: '#f4bcc1',
74 | lightRed400: '#f1abb1',
75 | lightRed500: '#ee9aa2',
76 | lightRed600: '#eb8a92',
77 | lightRed700: '#e87983',
78 | lightRed800: '#e56873',
79 | lightRed900: '#e35764',
80 | lightRed950: '#e04754',
81 | lightRed999: '#dd3645',
82 | green50: '#22c967',
83 | green100: '#20b85f',
84 | green200: '#1da756',
85 | green300: '#1a974e',
86 | green400: '#178645',
87 | green500: '#14753c',
88 | green600: '#116534',
89 | green700: '#0e542b',
90 | green800: '#0c4323',
91 | green900: '#09321a',
92 | lightGreen50: '#eefcf4',
93 | lightGreen100: '#def9e9',
94 | lightGreen200: '#cdf6de',
95 | lightGreen300: '#bcf4d3',
96 | lightGreen400: '#abf1c8',
97 | lightGreen500: '#9beebd',
98 | lightGreen600: '#8aebb2',
99 | lightGreen700: '#79e8a7',
100 | lightGreen800: '#68e59c',
101 | lightGreen900: '#25da70',
102 | orange50: '#da6f25',
103 | orange100: '#c96722',
104 | orange200: '#b85e1f',
105 | orange300: '#a7551c',
106 | orange400: '#964d19',
107 | orange500: '#864417',
108 | orange600: '#753c14',
109 | orange700: '#643311',
110 | orange800: '#532b0e',
111 | orange900: '#42220b',
112 | lightOrange50: '#f9e8dd',
113 | lightOrange100: '#f6ddcc',
114 | lightOrange200: '#f4d2bb',
115 | lightOrange300: '#f1c7aa',
116 | lightOrange400: '#eebc9a',
117 | lightOrange500: '#ebb189',
118 | lightOrange600: '#e8a678',
119 | lightOrange700: '#e59b67',
120 | lightOrange800: '#e08546',
121 | lightOrange900: '#dd7a35',
122 | yellow50: '#f1ebaa',
123 | yellow100: '#eee79a',
124 | yellow200: '#ebe389',
125 | yellow300: '#e8df78',
126 | yellow400: '#e5db67',
127 | yellow500: '#e3d756',
128 | yellow600: '#e0d346',
129 | yellow700: '#ddcf35',
130 | yellow800: '#daca25',
131 | yellow900: '#c9bb22',
132 | grey50: '#6e7d84',
133 | grey100: '#65737a',
134 | grey200: '#5c696f',
135 | grey300: '#535f64',
136 | grey400: '#4b5559',
137 | grey500: '#424a4f',
138 | grey600: '#394044',
139 | grey700: '#303639',
140 | grey800: '#272c2f',
141 | grey900: '#1e2224',
142 | grey950: '#151819',
143 | grey999: '#0c0e0f',
144 | lightGrey50: '#f8f9f9',
145 | lightGrey100: '#eeeff0',
146 | lightGrey200: '#e3e6e8',
147 | lightGrey300: '#d8dcdf',
148 | lightGrey400: '#cdd3d6',
149 | lightGrey500: '#c3c9cd',
150 | lightGrey600: '#b8c0c4',
151 | lightGrey700: '#adb6bb',
152 | lightGrey800: '#a3adb2',
153 | lightGrey900: '#98a3a9',
154 | lightGrey950: '#8d9aa1',
155 | lightGrey999: '#77878f',
156 | };
157 |
158 | export default Colors;
159 |
--------------------------------------------------------------------------------
/src/components/Timeline/thumbnails.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-env jest */
2 | import React from 'react';
3 | import { render, screen } from '@testing-library/react';
4 | import Thumbnails from './thumbnails';
5 |
6 | const screenHeight = 1000;
7 | const screenWidth = 1600;
8 | const gutter = 20;
9 | const percentToOffsetMock = jest.fn();
10 | const getCurrentRouteMock = jest.fn();
11 |
12 | const thumbnailBounds = {
13 | top: 100,
14 | bottom: screenHeight - (100 + 100), // top + height
15 | left: gutter,
16 | right: screenWidth - gutter,
17 |
18 | width: screenWidth - (gutter * 2),
19 | height: 100,
20 | };
21 |
22 | const heightWithBlackBorder = 120;
23 |
24 | describe('timeline thumbnails', () => {
25 | beforeEach(() => {
26 | percentToOffsetMock.mockImplementation((percent) => Math.round(percent * 30000));
27 | getCurrentRouteMock.mockImplementation((offset) => {
28 | if (offset < 1600 || offset > 20000) {
29 | return null;
30 | }
31 | return {
32 | offset: 1600,
33 | segment_numbers: Array.from(Array(4).keys()),
34 | segment_offsets: Array.from(Array(4).keys()).map((i) => i * 60),
35 | };
36 | });
37 | });
38 |
39 | it('should check the segment for every image', () => {
40 | render(
41 |
133 | Add to home screen
135 |
136 | Install this webapp on your home screen:
137 | {' '}
138 |
139 | tap 140 | {' '} 141 |
142 | {' '}
143 | and then ‘Add to Home Screen’
144 |
145 |
146 | 139 | tap 140 | {' '} 141 |
141 |
167 | );
168 | }
169 | }
170 |
171 | AnonymousLanding.propTypes = {
172 | pathname: PropTypes.string.isRequired,
173 | classes: PropTypes.object.isRequired,
174 | };
175 |
176 | const stateToProps = Obstruction({
177 | pathname: 'router.location.pathname',
178 | });
179 |
180 | export default connect(stateToProps)(withStyles(styles)(AnonymousLanding));
181 |
--------------------------------------------------------------------------------
/src/components/Dashboard/DriveListItem.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from 'react';
2 | import { connect } from 'react-redux';
3 | import fecha from 'fecha';
4 |
5 | import { withStyles, Grid, Typography } from '@material-ui/core';
6 |
7 | import { selectRange } from '../../actions';
8 | import { fetchEvents, fetchLocations } from '../../actions/cached';
9 | import Colors from '../../colors';
10 | import { useWindowWidth } from '../../hooks/window';
11 | import { RightArrow } from '../../icons';
12 | import { formatDriveDuration, filterRegularClick } from '../../utils';
13 | import { isMetric, KM_PER_MI } from '../../utils/conversions';
14 | import Timeline from '../Timeline';
15 |
16 | const styles = () => ({
17 | drive: {
18 | background: 'linear-gradient(to bottom, #30373B 0%, #1D2225 100%)',
19 | borderTop: '1px solid rgba(255, 255, 255, .05)',
20 | borderRadius: 8,
21 | display: 'flex',
22 | flexDirection: 'column',
23 | marginBottom: 12,
24 | overflow: 'hidden',
25 | padding: 0,
26 | transition: 'background .2s',
27 | textDecoration: 'none',
28 | '&:hover': {},
29 | },
30 | driveHeader: {
31 | alignItems: 'center',
32 | },
33 | driveHeaderIntro: {
34 | display: 'flex',
35 | },
36 | driveGridItem: {
37 | flexGrow: 1,
38 | },
39 | driveGridItemRightAlign: {
40 | textAlign: 'right',
41 | },
42 | driveHeaderIntroSmall: {
43 | justifyContent: 'center',
44 | },
45 | driveArrow: {
46 | color: Colors.grey500,
47 | height: '100%',
48 | marginLeft: '25%',
49 | width: 32,
50 | },
51 | firstLine: {
52 | fontWeight: 600,
53 | },
54 | });
55 |
56 | const DriveListItem = (props) => {
57 | const el = useRef();
58 | const [isVisible, setVisible] = useState(false);
59 | const windowWidth = useWindowWidth();
60 | const { classes, dispatch, drive } = props;
61 |
62 | useEffect(() => {
63 | const onScroll = () => {
64 | if (!isVisible && el.current && window && (!window.visualViewport
65 | || window.visualViewport.height >= el.current.getBoundingClientRect().y - 300)
66 | ) {
67 | setVisible(true);
68 | dispatch(fetchEvents(drive));
69 | dispatch(fetchLocations(drive));
70 |
71 | window.removeEventListener('scroll', onScroll);
72 | window.removeEventListener('resize', onScroll);
73 | }
74 | };
75 |
76 | window.addEventListener('scroll', onScroll);
77 | window.addEventListener('resize', onScroll);
78 | onScroll();
79 |
80 | return () => {
81 | window.removeEventListener('scroll', onScroll);
82 | window.removeEventListener('resize', onScroll);
83 | };
84 | }, [drive, dispatch, isVisible, el]);
85 |
86 | const onClick = filterRegularClick(
87 | () => dispatch(selectRange(drive.start_time_utc_millis, drive.end_time_utc_millis)),
88 | );
89 |
90 | const small = windowWidth < 580;
91 | const startTime = fecha.format(new Date(drive.start_time_utc_millis), 'HH:mm');
92 | const startDate = fecha.format(new Date(drive.start_time_utc_millis), small ? 'ddd, MMM D' : 'dddd, MMM D');
93 | const endTime = fecha.format(new Date(drive.end_time_utc_millis), 'HH:mm');
94 | const duration = formatDriveDuration(drive.duration);
95 |
96 | const distance = isMetric()
97 | ? `${+(drive.length * KM_PER_MI).toFixed(1)} km`
98 | : `${+drive.length.toFixed(1)} mi`;
99 |
100 | /* eslint-disable key-spacing, no-multi-spaces */
101 | const gridStyle = small ? {
102 | date: { order: 1, maxWidth: '72%', flexBasis: '72%', marginBottom: 12 },
103 | dur: { order: 2, maxWidth: '28%', flexBasis: '28%', marginBottom: 12 },
104 | origin: { order: 3, maxWidth: '50%', flexBasis: '50%' },
105 | dest: { order: 4, maxWidth: '50%', flexBasis: '50%' },
106 | } : {
107 | date: { order: 1, maxWidth: '28%', flexBasis: '26%' },
108 | dur: { order: 2, maxWidth: '14%', flexBasis: '14%' },
109 | origin: { order: 3, maxWidth: '26%', flexBasis: '22%' },
110 | dest: { order: 4, maxWidth: '26%', flexBasis: '22%' },
111 | arrow: { order: 5, maxWidth: '6%', flexBasis: '6%' },
112 | };
113 | /* eslint-enable key-spacing, no-multi-spaces */
114 |
115 | return (
116 |
123 |
142 |
146 | comma connect
147 |
148 | Manage your comma device, view your drives, and comma prime features
149 |
150 |
151 | 
152 | Sign in with Google
153 |
154 | AppleID.auth.signIn() } className={classes.logInButton}>
155 |
156 | Sign in with Apple
157 |
158 |
159 |
160 | Sign in with GitHub
161 |
162 |
163 | Try the demo
164 |
165 |
166 |
143 |
144 |
145 |
144 |
124 |
125 |
147 |
148 |
126 | {startDate}
127 | {`${startTime} to ${endTime}`}
128 |
129 |
130 | {duration}
131 | {distance}
132 |
133 |
134 | {drive.startLocation?.place}
135 | {drive.startLocation?.details}
136 |
137 |
138 | {drive.endLocation?.place}
139 | {drive.endLocation?.details}
140 |
141 | {!small && (
142 |
143 |
145 | )}
146 |