clean up <Video /> props

components/CodeBlock/CodeBlock.module.css

@@ -2,7 +2,6 @@
 .code {
   font-size: 0.925em;
   color: var(--code-text);
-  tab-size: 2;
   page-break-inside: avoid;
   background-color: var(--code-background);
   border: 1px solid var(--kinda-light);
@@ -28,6 +27,7 @@
   display: block;
   overflow-x: auto;
   padding: 1em;
+  tab-size: 2;
 }
 
 .copy_btn {
@@ -56,7 +56,7 @@
   margin-right: 3em;
 }
 
-.highlight > :global(.code-line.line-number::before) {
+.highlight > :global(.line-number::before) {
   display: inline-block;
   width: 1.5em;
   margin-right: 1.5em;

components/Video/Video.tsx

@@ -5,22 +5,25 @@ import type { FilePlayerProps } from "react-player/file";
 import styles from "./Video.module.css";
 
 export type VideoProps = Partial<FilePlayerProps> & {
-  webm?: string;
+  src: {
-  mp4?: string;
+    // at least one is required:
+    webm?: string;
+    mp4?: string;
+  };
   thumbnail?: string;
   subs?: string;
   autoplay?: boolean;
   className?: string;
 };
 
-const Video = ({ webm, mp4, thumbnail, subs, autoplay, className, ...rest }: VideoProps) => {
+const Video = ({ src, thumbnail, subs, autoplay, className, ...rest }: VideoProps) => {
   const url = [
-    webm && {
+    src.webm && {
-      src: webm,
+      src: src.webm,
       type: "video/webm",
     },
-    mp4 && {
+    src.mp4 && {
-      src: mp4,
+      src: src.mp4,
       type: "video/mp4",
     },
   ];

notes/bernie-sanders-bern-app-data.mdx

@@ -47,8 +47,10 @@ Using either feature, a volunteer starts with a search of the database for the v
 Here's one of the instructional videos provided internally to volunteers:
 
 <Video
-  webm="/static/images/notes/bernie-sanders-bern-app-data/friend-to-friend.webm"
+  src={{
-  mp4="/static/images/notes/bernie-sanders-bern-app-data/friend-to-friend.mp4"
+    webm: "/static/images/notes/bernie-sanders-bern-app-data/friend-to-friend.webm",
+    mp4: "/static/images/notes/bernie-sanders-bern-app-data/friend-to-friend.mp4",
+  }}
   thumbnail="/static/images/notes/bernie-sanders-bern-app-data/poster-friend-to-friend.png"
 />
 

notes/coronavirus-open-source.mdx

@@ -142,8 +142,10 @@ You can [download their software here](https://foldingathome.org/start-folding/)
 **Fun fact:** The team behind Folding@home has seen a [**huge** spike in computational power](https://www.reddit.com/r/pcmasterrace/comments/flgm7q/ama_with_the_team_behind_foldinghome_coronavirus/) this month after cryptominers started mining coronavirus proteins instead of boring, old Ethereum with their insanely overpowered GPUs! 👏
 
 <Video
-  webm="/static/images/notes/coronavirus-open-source/folding.webm"
+  src={{
-  mp4="/static/images/notes/coronavirus-open-source/folding.mp4"
+    webm: "/static/images/notes/coronavirus-open-source/folding.webm",
+    mp4: "/static/images/notes/coronavirus-open-source/folding.mp4",
+  }}
   thumbnail="/static/images/notes/coronavirus-open-source/folding-thumb.png"
   autoplay
 />

notes/dropping-dropbox.mdx

@@ -31,8 +31,10 @@ Decisions made by the top folks at Dropbox gave me an increasingly sour taste in
 - ...and as a bonus, making the process of canceling Dropbox Pro incredibly convoluted, annoying, and sketchy. Here's a video demonstration via [Justin Dunham](https://twitter.com/jwyattd):
 
 <Video
-  webm="/static/images/notes/dropping-dropbox/cancel.webm"
+  src={{
-  mp4="/static/images/notes/dropping-dropbox/cancel.mp4"
+    webm: "/static/images/notes/dropping-dropbox/cancel.webm",
+    mp4: "/static/images/notes/dropping-dropbox/cancel.mp4",
+  }}
   thumbnail="/static/images/notes/dropping-dropbox/cancel.png"
 />
 

notes/millenial-with-hillary-clinton.mdx

@@ -59,8 +59,10 @@ As [Bill Maher](https://medium.com/u/cdc04a9799f6) (an avid Bernie supporter) [s
 **Update:** The campaign has included my snowy New Hampshire interaction with her in one of the DNC convention videos! See a few short seconds of my joy at 1:24.
 
 <Video
-  webm="/static/images/hillary/convention-720p.webm"
+  src={{
-  mp4="/static/images/hillary/convention-720p.mp4"
+    webm: "/static/images/hillary/convention-720p.webm",
+    mp4: "/static/images/hillary/convention-720p.mp4",
+  }}
   thumbnail="/static/images/hillary/thumb.png"
   subs="/static/images/hillary/subs.en.vtt"
 />

notes/presidential-candidates-404-pages.mdx

@@ -39,8 +39,10 @@ I'm a _huge_ sucker for Kate McKinnon's spot-on impression of Warren on Saturday
 Although the designer who selected this GIF likely had _thousands_ of choices when searching "[Bernie finger wagging GIF](https://www.google.com/search?q=Bernie+finger+wagging+GIF&tbm=isch&tbs=itp:animated)," the text beside it is well-written and funny — even though we both know putting a page at [berniesanders.com/zxcliaosid](https://berniesanders.com/zxcliaosid/) probably won't be a top priority of a President Sanders.
 
 <Video
-  webm="/static/images/notes/presidential-candidates-404-pages/sanders.webm"
+  src={{
-  mp4="/static/images/notes/presidential-candidates-404-pages/sanders.mp4"
+    webm: "/static/images/notes/presidential-candidates-404-pages/sanders.webm",
+    mp4: "/static/images/notes/presidential-candidates-404-pages/sanders.mp4",
+  }}
   autoplay
 />
 
@@ -60,8 +62,10 @@ Uncle Joe has a nice and simple 404 page. I like it, along with the Ray-Bans and
 A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.com/texas/statements/2019/mar/14/club-growth/beto-orourke-arrested-dwi-flee-scene/) in the '90s — but still a clever ask for a donation and a great use of a GIF, even if it's left over from his Senate campaign.
 
 <Video
-  webm="/static/images/notes/presidential-candidates-404-pages/orourke.webm"
+  src={{
-  mp4="/static/images/notes/presidential-candidates-404-pages/orourke.mp4"
+    webm: "/static/images/notes/presidential-candidates-404-pages/orourke.webm",
+    mp4: "/static/images/notes/presidential-candidates-404-pages/orourke.mp4",
+  }}
   autoplay
 />
 
@@ -70,8 +74,10 @@ A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.c
 Another clean and simple page with a top-notch GIF. It injected some emotion into visiting [kamalaharris.com/alskdjf](https://kamalaharris.com/alskdjf).
 
 <Video
-  webm="/static/images/notes/presidential-candidates-404-pages/harris.webm"
+  src={{
-  mp4="/static/images/notes/presidential-candidates-404-pages/harris.mp4"
+    webm: "/static/images/notes/presidential-candidates-404-pages/harris.webm",
+    mp4: "/static/images/notes/presidential-candidates-404-pages/harris.mp4",
+  }}
   autoplay
 />
 

pages/birthday.tsx

@@ -19,8 +19,10 @@ const Birthday = () => (
 
     <Content>
       <Video
-        webm="/static/images/birthday/birthday.webm"
+        src={{
-        mp4="/static/images/birthday/birthday.mp4"
+          webm: "/static/images/birthday/birthday.webm",
+          mp4: "/static/images/birthday/birthday.mp4",
+        }}
         thumbnail={thumbnail.src}
       />
     </Content>

pages/hillary.tsx

@@ -19,8 +19,10 @@ const Hillary = () => (
     <PageTitle>My Brief Apperance in Hillary Clinton's DNC Video</PageTitle>
     <Content>
       <Video
-        webm="/static/images/hillary/convention-720p.webm"
+        src={{
-        mp4="/static/images/hillary/convention-720p.mp4"
+          webm: "/static/images/hillary/convention-720p.webm",
+          mp4: "/static/images/hillary/convention-720p.mp4",
+        }}
         thumbnail={thumbnail.src}
         subs="/static/images/hillary/subs.en.vtt"
       />

pages/leo.tsx

@@ -20,8 +20,10 @@ const Leo = () => (
 
     <Content>
       <Video
-        webm="/static/images/leo/leo.webm"
+        src={{
-        mp4="/static/images/leo/leo.mp4"
+          webm: "/static/images/leo/leo.webm",
+          mp4: "/static/images/leo/leo.mp4",
+        }}
         thumbnail={thumbnail.src}
         subs="/static/images/leo/subs.en.vtt"
       />