Try adding video images to listings

helpers/listing-page.js

@@ -19,9 +19,33 @@ function makeTitle ( listing ) {
 function makeDescription ( listing ) {
     return `Latest reported support status of ${ listing.name } on Apple Silicon and Apple M1 Pro and M1 Max Processors.`
 }
+
+export function getVideoImages ( video ) {
+    const webpSource = {
+        ...video.thumbnail,
+        srcset: video.thumbnail.srcset.replaceAll('ytimg.com/vi/', 'ytimg.com/vi_webp/').replace(/.png|.jpg|.jpeg/g, '.webp')
+    }
+
+    return {
+        src: video.thumbnail.src,
+        srcset: {
+            webp: webpSource,
+            jpeg: video.thumbnail
+        }
+    }
+}
+
+export function makeApiPathFromEndpoint ( endpoint ) {
+    const [
+        kind,
+        listingSlug
+    ] = getPartPartsFromUrl( endpoint )
+
+    return `/api/${ kind }/${ listingSlug }.json`
+}
 export class ListingDetails {
     constructor ( listing ) {
-        this.listing = listing
+        this.api = listing
 
         this.type = getAppType( listing )
     }
@@ -30,30 +54,34 @@ export class ListingDetails {
 
     get mainHeading () {
         if ( this.type === 'formula' ) {
-            return `Does <code>${ this.listing.name }</code> work on Apple Silicon when installed via Homebrew?`
+            return `Does <code>${ this.api.name }</code> work on Apple Silicon when installed via Homebrew?`
         }
 
-        return `Does ${ this.listing.name } work on Apple Silicon?`
+        return `Does ${ this.api.name } work on Apple Silicon?`
     }
 
     get subtitle () {
-        return this.listing.text
+        return this.api.text
     }
 
     get pageTitle () {
-        return makeTitle( this.listing )
+        return makeTitle( this.api )
     }
 
     get pageDescription () {
-        return makeDescription( this.listing )
+        return makeDescription( this.api )
     }
 
     get endpointParts () {
-        return getPartPartsFromUrl( this.listing.endpoint )
+        return getPartPartsFromUrl( this.api.endpoint )
+    }
+
+    get apiEndpointPath () {
+        return makeApiPathFromEndpoint( this.api.endpoint )
     }
 
     get hasRelatedVideos () {
-        return Array.isArray( this.listing.relatedVideos ) && this.listing.relatedVideos.length > 0
+        return Array.isArray( this.api.relatedVideos ) && this.api.relatedVideos.length > 0
     }
 
     get hasRelatedApps () {
@@ -72,19 +100,25 @@ export class ListingDetails {
 
     get initialVideo () {
         if ( this.type === 'video' ) {
-            return this.listing.video
+            return this.api.video
         }
 
         if ( this.hasRelatedVideos ) {
-            return this.listing.relatedVideos[0]
+            return this.api.relatedVideos[0]
         }
 
         return null
     }
 
+    get videoPosterSources () {
+        if ( this.initialVideo === null ) return null
+
+        return getVideoPosterSources( this.initialVideo )
+    }
+
     get structuredData () {
         if ( this.type === 'video' ) {
-            return buildVideoStructuredData( this.listing, this.listing.featuredApps, { siteUrl: import.meta.site } )
+            return buildVideoStructuredData( this.api, this.api.featuredApps, { siteUrl: import.meta.site } )
         }
 
         return null
@@ -95,11 +129,11 @@ export class ListingDetails {
             title: this.pageTitle,
             description: this.pageDescription,
             // meta,
-            // link,
+            link: [],
             structuredData: this.structuredData,
 
             // domain,
-            pathname: this.listing.endpoint,
+            pathname: this.api.endpoint,
         }
     }
 }