fix: convert h.264 mp4s to av1 webms

src/components/Map.astro

@@ -4,6 +4,7 @@ type Props = {
   latitude: number
   longitude: number
   zoom: number
+  pitch?: number
   mapStyle: string
   interactive?: boolean
 }
@@ -13,6 +14,7 @@ const {
   latitude,
   longitude,
   zoom,
+  pitch,
   mapStyle,
   interactive = false
 } = Astro.props
@@ -22,28 +24,30 @@ const {
   data-latitude={latitude}
   data-longitude={longitude}
   data-zoom={zoom}
+  data-pitch={pitch}
   data-mapstyle={mapStyle}
   data-interactive={interactive}
+  id='map'
+  class:list={[className]}
 >
-  <div id='map' class:list={[className]}></div>
 </maplibre-map>
 
 <script>
   import maplibregl from 'maplibre-gl'
   class MapLibreMap extends HTMLElement {
     constructor() {
       super()
-      console.log(this.dataset.interactive)
 
       new maplibregl.Map({
         container: 'map',
         interactive: this.dataset.interactive != undefined,
         center: [
-          parseFloat(this.dataset.longitude as string),
-          parseFloat(this.dataset.latitude as string)
+          parseFloat(this.dataset.longitude ?? '0'),
+          parseFloat(this.dataset.latitude ?? '0')
         ],
-        zoom: parseFloat(this.dataset.zoom as string),
-        style: this.dataset.mapstyle as string
+        zoom: parseFloat(this.dataset.zoom ?? '0'),
+        pitch: parseFloat(this.dataset.pitch ?? '0'),
+        style: this.dataset.mapstyle ?? ''
       })
     }
   }

src/components/SearchBox.astro

@@ -6,7 +6,7 @@ import Search from 'astro-pagefind/components/Search'
 const q = Astro.url.searchParams.get('q') ?? ''
 ---
 
-<site-search transition:persist='search' class='ms-2 sm:ms-4'>
+<site-search class='ms-2 sm:ms-4'>
   <button
     data-open-modal
     disabled

src/content/project/bags-for-bryan.md

@@ -17,7 +17,7 @@ This design was made to promote DU's fall 2022 philanthrophy, Bags For Bryan. Th
 
 <div class="w-full">
 <video id="mockup" class="mx-auto" autoplay loop muted playsinline>
-  <source src="https://content.mikepayne.me/videos%2Fbags.mp4" type="video/mp4" />
+  <source src="https://content.mikepayne.me/videos%2Fbags-for-bryan.webm" type="video/mp4" />
   Your browser does not support the video tag.
 </video>
 </div>

src/content/project/delta-scoopsilon/index.mdx

@@ -21,7 +21,7 @@ This design was made to accompany DU's fall 2023 philanthropy event, Delta Scoop
 
 <video class='mx-auto w-full' autoplay loop muted playsinline>
   <source
-    src='https://content.mikepayne.me/videos%2Fscoops.mp4'
+    src='https://content.mikepayne.me/videos%2Fdelta-scoopsilon.webm'
     type='video/mp4'
   />
   Your browser does not support the video tag.

src/content/project/du-donuts.md

@@ -17,7 +17,7 @@ This design was made to promote DU's spring 2023 philanthropy event.
 
 <div class="w-full">
 <video class="mx-auto" autoplay loop muted playsinline>
-  <source src="https://content.mikepayne.me/videos%2Fdu-donuts.mp4" type="video/mp4" />
+  <source src="https://content.mikepayne.me/videos%2Fdu-donuts.webm" type="video/mp4" />
   Your browser does not support the video tag.
 </video>
 </div>

src/content/project/du-open.md

@@ -17,7 +17,7 @@ This design was made to accompany the 2024 DU Open Golf Tournament, held at NuMa
 
 <div class="w-full">
 <video class="mx-auto" autoplay loop muted playsinline>
-  <source src="https://content.mikepayne.me/videos%2Fdu-open.mp4" type="video/mp4" />
+  <source src="https://content.mikepayne.me/videos%2Fdu-open.webm" type="video/mp4" />
   Your browser does not support the video tag.
 </video>
 </div>

src/content/project/formal.md

@@ -13,7 +13,7 @@ ogImage: formal.png
 
 <div class="w-full">
 <video class="mx-auto" autoplay loop muted playsinline>
-  <source src="https://content.mikepayne.me/videos%2Fformal.mp4" type="video/mp4" />
+  <source src="https://content.mikepayne.me/videos%2Fformal.webm" type="video/mp4" />
   Your browser does not support the video tag.
 </video>
 </div>

src/content/project/rush-23/index.mdx

@@ -21,7 +21,7 @@ import out4 from './out4.png'
 <p class='w-full'>
   <video class='mx-auto' autoplay loop muted playsinline>
     <source
-      src='https://content.mikepayne.me/videos%2Frush.mp4'
+      src='https://content.mikepayne.me/videos%2Frush-23.webm'
       type='video/mp4'
     />
   </video>

src/pages/index.astro

@@ -260,6 +260,7 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
       zoom={5.2}
       mapStyle='https://api.maptiler.com/maps/toner-v2/style.json?key=bPyoF5op4HSnAi5Dw0wV'
       className='mx-auto h-56 w-96 overflow-hidden rounded-xl dark:invert'
+      pitch={45}
       interactive={true}
       latitude={39.8807948544334}
       longitude={-95.6983122797664}