Giter Club home page Giter Club logo

connect's Introduction

comma connect

The frontend to the comma connect progressive web app. This a react app using Create React App

Environments

Libraries Used

There's a ton of them, but these are worth mentioning because they sort of affect everything.

  • 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 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

How things works

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...

(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.

Development

pnpm start

Contributing

  • Use best practices
  • Write test cases
  • Keep files small and clean
  • Use branches / pull requests to isolate work. Don't do work that can't be merged quickly, find ways to break it up

connect's People

Contributors

adeebshihadeh avatar andyh2 avatar chrisinajar avatar deftdawg avatar dependabot[bot] avatar fredyshox avatar gregjhogan avatar incognitojam avatar johnhoodjr avatar jwooning avatar macintoshhelper avatar martinl avatar nottgy avatar pd0wm avatar projectbarks avatar qqap avatar robbederks avatar simplemachine92 avatar sshane avatar valish avatar virtuallychris avatar zwx1616 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

connect's Issues

access public routes

I'd like explorer to list public routes given a dongle ID, and allow access to public routes. (Would like this for useradmin too.)

inform user if qlog or rlog is being used for replay

decimated data in qlog files causes a degraded experience especially now that model v2 packets are only 1 per second

we could put something on the screen indicating when this is the case, and tell the user if they put their device on wifi it will upload the rlog files and improve the user experience

Ability to rename / alias shared devices

I am collecting an increasing number of people's devices while trying to help, and while they are generally willing to update the name for me, it seems like they shouldn't have to.

It would be nice if I could setup an alias for shared devices.

Async React preparation

Hi, as you may know, a number of class methods have been deprecated as a preparation for async React rendering in React 17+.

It's probably worth looking at migrating componentWillReceiveProps and componentWillUpdate: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

I could work on this, but would be best to decide on a migration strategy first.

It's worth looking into doing some restructuring and implementing of the new context API and hooks too, they can reduce some of the boilerplate of Redux and help with testability and bundle size/performance in the future. You can use the Redux pattern with core React's useReducer. They've landed in core React and are stable APIs:

https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down

rlog files are not cached in browser

When rlog.bz2 files are fetched they do not return a cache-control header and chrome always downloads them. Perhaps we should fetch through a CDN (like video files) and trim them down to just what we need for explorer on the fly (similar to video down-sampling on the fly)

Extremely long buffer times for drive playback

On the connect app I can start playing back video immediately but on the explorer web app I have seen wait times of up to 2+ minutes before being able to start watching a drive. If I skip ahead/back in the video it restarts the waiting for the buffering again,

Automatically refresh periodically

The PWA doesn't seem to refresh when it's opened and still in memory (device location on map was old). It should refresh when it's opened and periodically after that.

Add Tweet button to drives

Bear with me here...

So @VirtuallyChris just posted in the Discord asking for Tweets about openpilot, which got me thinking...
We have a bunch of stats (and could have more with #77), so we could create a Tweet Button pre-filled with something like:

#openpilot just drove me x miles and I only touched the wheel y times

Could get real fancy and generate a mini infographic image too, and maybe use a screen grab from somewhere in the middle of the trip as the background? ๐Ÿ˜Ž

Support accounts without a device

Explorer currently hangs on loading spinner after logging in with an account that does not have any paired devices. Instead, it should display an appropriate zero-state with pointers on how to buy/pair a device.

God Mode issues

  • No login prompt if you're not logged in (shows up as soon as you click the account button in the top right)
  • Device location is not shown

Use controlsState instead of carState on the timeline

For cars with a comma pedal in them, ACC is never engaged. This makes the timeline blue for the whole drive even though openpilot was engaged during it.

This issue was half fixed when Greg made the border around the video match controlsState here: 6211c2f

Now that same fix needs to be applied to the timeline.

image

Missing frames in the middle of the drive slideshow/preview

It seems as though if the drive isn't long enough to fill up the full width of the screen with frames then there will be blank spots in the middle. None of the video is playing for that section but the overlay of the lane lines is moving in the correct way for that section of the route on a frozen frame.

Add refresh mechanism

pull down to refresh was nice in connect, but might be hard to do with the web app

connect video stream freezing

For a few of my recent drives over the past month connect just freezes on a specific frame and once seeking past it, nothing is shown but that frozen frame. Happens at about f15e3c37c118e841|2021-08-03--10-11-38--19 for one example.

I was looking for a segment to report a model bug taking an exit abruptly, but downloading each video seems like the only workaround when this happens

Redirect after login on mobile is sometimes stuck

Happened multiple times on mobile already (iOS). After logging in with google it redirects through the api to connect. The api is already on connect, but the browser seems still stuck on the google login page. If I refresh I'm instantly logged in.

Don't combine routes

Not sure why this was done, but it's confusing and probably a pre-req for replacing some userdamin functionality

403 errors are not surfaced in the UI

I'm trying to access a (reportedly) public route via explorer. The heading appears with date and time, but no images on the timeline and no video or maps.

JavaScript console shows 403's:

api.commadotai.com/v1.1/devices/00c829b1b7613dea/stats:1 Failed to load resource: the server responded with a status of 403 ()
api.commadotai.com/v1/devices/00c829b1b7613dea/location:1 Failed to load resource: the server responded with a status of 403 ()

Even if it's not intended to access public routes by explorer, the UI should probably surface failed backend requests.

OP enabled state on timeline not correct when using LKAS only

image

I noticed a discrepancy in comma explorer when using my fork that allows LKAS without ACC. The video shows the correct OP engaged state but the timeline appears to be using cruisestate.enabled from the car. I'm using cruise control off with LKAS enabled only (manual gas and brakes). Can the timeline be changed to use the actual OP engaged state like the video does?

Route: f280907e439de88d|2021-05-09--18-54-58

Add (dis)engagement stats to drive(s) page(s)

Would you accept a PR to add a time/miles and percentage engaged vs disengaged to the drives and/or individual drive pages?

This information is sort of available via the blue/green distinction on the time line, but it would be nice to have some actual numbers to compare / brag about.

Unable to download rlog.bz2 files

Device information

dongle_id | e977b6aeb5565611

Segments:
e977b6aeb5565611|2021-06-16--20-07-31
e977b6aeb5565611|2021-06-16--20-03-45
e977b6aeb5565611|2021-06-16--19-25-58
e977b6aeb5565611|2021-06-16--19-09-14

version = "0.8.5-d4ab1f1e2-2021-06-07T22:13:55",
dirty = false,
gitCommit = "145b222f0d45a8087215d5700240f58e654e7393",
gitBranch = "devel-staging",

Context: these are several drives separated by ignition cycles. First ones had openpilot enabled and the rest were done in dashcam mode.

Also, raw log upload was toggle on after the drives were complete to upload them.

Issue: Uploads appear complete, but rlogs are not downloadable.

The first segment from this drive (e977b6aeb5565611|2021-06-16--18-59-08) has rlogs available and CAN data available in Cabana. All others do not.

file upload style/layout issues

  • upload queue popup: replace "cancel" button with an X
  • upload queue popup: only use on of text or progress bar
  • upload queue popup: segment text can overlap type on mobile
  • upload queue popup is too tall when safari address bar is showing (this suggests using window.innerHeight)
    image
  • files popup: button bg width is smaller than text width
    image

Update upsell/setup page

  • looks weird on PC. hide the sidebar and center?
  • looks small on PC and mobile
  • update to comma three
  • less ambiguous pair text

image

Can't view parts of certain drives

2cef8a0b898f331a|2021-11-28--14-32-48, connect can only play about 50% through.

2cef8a0b898f331a|2021-11-28--17-11-56, connect can only play about 70% through.

Happens on both PC/Chrome and mobile, also seems to cause problems for Cabana.

I think the problem here is actually on the back-end, a caching issue of some sort, but there's not a good place for me to file a bug against that. Using the second drive as an example, there are 73 segments uploaded (0-72) but when connect or cabana fetch the qcamera.m3u8 playlist, only qcameras through segment 47 are returned. The drive otherwise appears to be the proper length, thumbnails are generated, etc.

These drives were interesting to me, so I had pulled both of them up in connect while the qlog/qcamera upload was still in progress. I think this may have triggered the problem. It feels like the qcamera playlist might have been generated the first time I looked at the drive, while it was only partially uploaded, and now I can't play past that point.

installable PWA

Basically revert 1de3797

This caused issues because of the scope of the PWA which is set to /, causing links to /useradmin to break.

Unfortunately excluding paths from the scope is not possible, so or explorer has to be moved to /explorer or useradmin has to move to a different subdomain

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.