Add tweet button to drives

src/components/DriveView/Media.jsx

@@ -8,6 +8,7 @@ import { withStyles, Divider, Typography, Menu, MenuItem, CircularProgress, Butt
 import WarningIcon from '@material-ui/icons/Warning';
 import ContentCopyIcon from '@material-ui/icons/ContentCopy';
 import ShareIcon from '@material-ui/icons/Share';
+import XIcon from './XIcon';
 
 import { drives as Drives } from '@commaai/api';
 
@@ -239,6 +240,7 @@ class Media extends Component {
     this.copySegmentName = this.copySegmentName.bind(this);
     this.openInUseradmin = this.openInUseradmin.bind(this);
     this.shareCurrentRoute = this.shareCurrentRoute.bind(this);
+    this.tweetRoute = this.tweetRoute.bind(this);
     this.uploadFile = this.uploadFile.bind(this);
     this.uploadFilesAll = this.uploadFilesAll.bind(this);
     this.getUploadStats = this.getUploadStats.bind(this);
@@ -332,6 +334,23 @@ class Media extends Component {
     }
   }
 
+  tweetRoute() {
+    const { currentRoute } = this.props;
+
+    let percentage = 0, engagements = 0;
+    currentRoute.events
+      .filter((event) => event.data && event.data.end_route_offset_millis)
+      .forEach(event => {
+        if(event.type === 'engage') {
+          percentage += parseInt(((event.data.end_route_offset_millis - event.route_offset_millis) / currentRoute.duration) * 100);
+          engagements += 1;
+        }
+      })
+
+    const post = `I went on a pretty chill drive ${currentRoute.startLocation?.place ? `from ${currentRoute.startLocation.place}` : ''}${currentRoute.endLocation?.place ? ` to ${currentRoute.endLocation.place}` : ''} in my ${currentRoute.platform.replace("_", ' ').toLowerCase()} as openpilot drove ~${percentage}% of the route with less than ${engagements+1} disengagements!\nCheck out the full drive on comma connect at ${window.location.href}.`; 
+    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(post)}`, '_blank').focus();
+  }
+
   async uploadFile(type) {
     const { dongleId, currentRoute } = this.props;
     if (!currentRoute) {
@@ -741,6 +760,10 @@ class Media extends Component {
             <ShareIcon />
           </MenuItem>
           )}
+          <MenuItem onClick={ this.tweetRoute } className={ classes.shareButton }>
+            Post on X
+            <XIcon />
+          </MenuItem>
           <Divider />
           <MenuItem onClick={ this.openInUseradmin }>
             View in useradmin

src/components/DriveView/XIcon.jsx

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+class XIcon extends Component {
+    render() {
+        return <SvgIcon {...this.props}>
+            <g>
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+            </g>
+        </SvgIcon>
+    }
+}
+
+export default XIcon;