Use Video Listing for app benchmarks

src/pages/app/[...appPath].astro

@@ -8,8 +8,9 @@ import { catchRedirectResponse } from '~/helpers/astro/request.js'
 import { ListingDetails } from '~/helpers/listing-page.js'
 import { getPathPartsFromAstroRequest } from '~/helpers/url.js'
 
-import Layout from '../../layouts/default.astro'
+import Layout from '~/src/layouts/default.astro'
-import Listing from '../../components/default-listing.astro'
+import Listing from '~/src/components/default-listing.astro'
+import VideoListing from '~/src/components/video-listing.astro'
 
 
 const redirectResponse = await catchRedirectResponse( Astro )
@@ -22,7 +23,11 @@ if ( redirectResponse !== null ) {
 // Get type and slug from the request path
 // so that we don't have extra parts for
 // urls like /:type/:slug/benchmarks
-const [ pathType, pathSlug ] = getPathPartsFromAstroRequest( Astro.request )
+const [
+    pathType,
+    pathSlug,
+    subSlug = null
+] = getPathPartsFromAstroRequest( Astro.request )
 
 // Create an empty API URL
 const apiUrl = new URL( import.meta.env.PUBLIC_API_DOMAIN )
@@ -51,9 +56,14 @@ const listingDetails = new ListingDetails( appListing )
 <Layout
     headOptions={ listingDetails.headOptions }
 >
-
+    { subSlug === 'benchmarks' ? (
-    <Listing
+        <VideoListing
-        listing={ appListing }
+            listing={ appListing }
-    />
+        />
+    ) : (
+         <Listing
+            listing={ appListing }
+        />
+    )}
 
 </Layout>