Merge pull request starknet-io#1272 from starknet-io/video-player-pre…

…view

Add twitter and video metadata for education videos

workspaces/website/src/components/VideoPlayer/getEducationVideoMeta.tsx

@@ -0,0 +1,12 @@
+// import { Metadata } from "next";
+import { Chapter, VIDEO_SHARE_DOMAIN } from "./constants";
+
+export const getEducationVideoMeta = (chapter: Chapter) => {
+  const fallbackImage =
+    "https://www.starknet.io/assets/illustration-how-it-works.png";
+
+  const imageUrl = `${VIDEO_SHARE_DOMAIN}${chapter.thumbnail}` || fallbackImage;
+  const videoUrl = `${VIDEO_SHARE_DOMAIN}/video-embed?chapter=${chapter.id}`;
+
+  return { imageUrl, videoUrl };
+};

workspaces/website/src/pages/video-embed/index.page.server.ts

@@ -1,13 +1,14 @@
 import { DocumentProps, PageContextServer } from "src/renderer/types";
 import { getDefaultPageContext } from "src/renderer/helpers";
 import { playlist } from "@ui/VideoPlayer/constants";
-import { imageUrl } from "@ui/VideoPlayer/getVideoMetadata";
+import { getEducationVideoMeta } from "@ui/VideoPlayer/getEducationVideoMeta";
 import { Props } from "src/pages/video-embed/VideoEmbedPage";
 
 export async function onBeforeRender(pageContext: PageContextServer) {
   const defaultPageContext = await getDefaultPageContext(pageContext);
   const chapter = pageContext.urlParsed.search.chapter ?? playlist[0].id;
-  const currentChapter = playlist.find((p) => p.id === chapter);
+  const currentChapter = playlist.find((p) => p.id === chapter) || playlist[0];
+  const { imageUrl, videoUrl } = getEducationVideoMeta(currentChapter);
 
   return {
     pageContext: {
@@ -17,6 +18,7 @@ export async function onBeforeRender(pageContext: PageContextServer) {
         title: currentChapter?.title,
         description: currentChapter?.description,
         image: imageUrl,
+        video: videoUrl,
       } satisfies DocumentProps,
 
       hasLayout: false,

workspaces/website/src/pages/video/index.page.server.ts

@@ -1,15 +1,16 @@
 import { DocumentProps, PageContextServer } from "src/renderer/types";
 import { getDefaultPageContext } from "src/renderer/helpers";
 import { playlist } from "@ui/VideoPlayer/constants";
-import { imageUrl } from "@ui/VideoPlayer/getVideoMetadata";
 import { Props } from "src/pages/video/VideoPage";
+import { getEducationVideoMeta } from "@ui/VideoPlayer/getEducationVideoMeta";
 
 export async function onBeforeRender(pageContext: PageContextServer) {
   const defaultPageContext = await getDefaultPageContext(pageContext);
   // @ts-ignore
   const parsedUrl = new URL(pageContext._urlPristine, "https://starknet.io");
   const chapter = parsedUrl.searchParams.get("chapter") || playlist[0].id;
-  const currentChapter = playlist.find((p) => p.id === chapter);
+  const currentChapter = playlist.find((p) => p.id === chapter) || playlist[0];
+  const { imageUrl, videoUrl } = getEducationVideoMeta(currentChapter);
 
   return {
     pageContext: {
@@ -19,6 +20,7 @@ export async function onBeforeRender(pageContext: PageContextServer) {
         title: currentChapter?.title,
         description: currentChapter?.description,
         image: imageUrl,
+        video: videoUrl,
       } satisfies DocumentProps,
       hasLayout: true,
     },

workspaces/website/src/renderer/_default.page.server.tsx

@@ -3,7 +3,7 @@ import { escapeInject } from "vite-plugin-ssr/server";
 import { PageContextServer } from "./types";
 import { PageShell } from "./PageShell";
 import { getDefaultPageContext } from "./helpers";
-import type { InjectFilterEntry } from 'vite-plugin-ssr/types'
+import type { InjectFilterEntry } from "vite-plugin-ssr/types";
 
 // See https://vite-plugin-ssr.com/data-fetching
 export const passToClient = [
@@ -27,7 +27,7 @@ export async function onBeforeRender(pageContext: PageContextServer) {
 export async function render(pageContext: PageContextServer) {
   const { Page, pageProps, redirectTo } = pageContext;
 
-  if (redirectTo) return {}
+  if (redirectTo) return {};
 
   const page = (
     <PageShell pageContext={pageContext}>
@@ -73,14 +73,24 @@ export async function render(pageContext: PageContextServer) {
       <meta property="og:title" content="${title}">
       <meta property="og:description" content="${description}">
       <meta property="og:image" content="${image}">
+      <meta property="og:video" content="${documentProps?.video || ""}">
+      <meta property="og:video:height" content="720">
+      <meta property="og:video:width" content="1280">
 
+      
       <!-- Twitter -->
-      <meta property="twitter:card" content="summary_large_image">
+      <meta property="twitter:card" content=${
+        documentProps?.video ? "player" : "summary_large_image"
+      }>
+      <meta property="twitter:site" content="@Starknet">
       <meta property="twitter:url" content="${pageContext.urlOriginal}">
       <meta property="twitter:title" content="${title}">
       <meta property="twitter:description" content="${description}">
       <meta property="twitter:image" content="${image}">
-
+      <meta property="twitter:player" content="${documentProps?.video || ""}">
+      <meta property="twitter:player:height" content="720">
+      <meta property="twitter:player:width" content="1280">
+      
       <!-- Google tag (gtag.js) -->
       <script async src="https://www.googletagmanager.com/gtag/js?id=${GOOGLE_TAG_ID}"></script>
       <script>
@@ -110,31 +120,30 @@ export async function render(pageContext: PageContextServer) {
   return { documentHtml, injectFilter };
 }
 
-
 const injectFilter = (assets: InjectFilterEntry[]): void => {
-  assets.forEach(asset => {
+  assets.forEach((asset) => {
     if (
       // We don't touch entry assets (recommended)
       asset.isEntry ||
       // We don't touch JavaScript preloading (recommended)
-      asset.assetType === 'script'
+      asset.assetType === "script"
     ) {
-      return
+      return;
     }
 
     // Preload images
-    if (asset.assetType === 'image') {
-      asset.inject = 'HTML_BEGIN'
+    if (asset.assetType === "image") {
+      asset.inject = "HTML_BEGIN";
     }
 
     // Don't preload fonts
-    if (asset.assetType === 'font') {
-      asset.inject = false
+    if (asset.assetType === "font") {
+      asset.inject = false;
     }
 
     // Preload videos
-    if (asset.mediaType?.startsWith('video')) {
-      asset.inject = 'HTML_END'
+    if (asset.mediaType?.startsWith("video")) {
+      asset.inject = "HTML_END";
     }
-  })
-}
+  });
+};

workspaces/website/src/renderer/types.ts

@@ -20,6 +20,7 @@ export interface DocumentProps {
   title?: string;
   description?: string;
   image?: string;
+  video?: string;
 }
 
 export type PageContextCustom = {