feat: Show archive on each session's page when recordingUrl or slideUrl exists (#309)

Author: taigakiyokawa

src/components/molecules/YouTubeEmbedFrame/YouTubeEmbedFrame.stories.tsx

@@ -0,0 +1,14 @@
+import { StoryObj, Meta } from '@storybook/react'
+import { YouTubeEmbedFrame } from '.'
+
+const meta: Meta<typeof YouTubeEmbedFrame> = {
+  component: YouTubeEmbedFrame
+}
+export default meta
+
+export const Default: StoryObj<typeof YouTubeEmbedFrame> = {
+  args: {
+    // A sample video from YouTube's help page.
+    recordingUrl: 'https://www.youtube.com/embed/lJIrF4YjHfQ'
+  }
+}

src/components/molecules/YouTubeEmbedFrame/index.tsx

@@ -0,0 +1,22 @@
+import { Box } from '@mui/material'
+import { FC } from 'react'
+
+type Props = {
+  recordingUrl: string
+}
+
+export const YouTubeEmbedFrame: FC<Props> = ({ recordingUrl }) => {
+  return (
+    <Box sx={{ aspectRatio: '16/9', maxWidth: '680px', width: '100%', height: '100%' }}>
+      <iframe
+        src={recordingUrl}
+        width="100%"
+        height="100%"
+        title="YouTube video player"
+        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen
+        style={{ border: 'none' }}
+      />
+    </Box>
+  )
+}

src/components/molecules/index.ts

@@ -7,3 +7,4 @@ export * from './TrackCard'
 export * from './BoothCard'
 export * from './TweetButton'
 export * from './GoogleCalendarButton'
+export * from './YouTubeEmbedFrame'

src/i18n/en.json

@@ -30,5 +30,6 @@
   "need_connpass_number": "Need your connpass receipt number.",
   "has_been_finished": "Go Conference 2023 Online has been finished",
   "thanks_for_corporate": "Thanks for everyone who talked, participated, sponsored, and operated for the conference!",
-  "archive_will_be_published": "The publishable sessions will soon be published on each session’s page."
+  "archive_will_be_published": "The publishable sessions will soon be published on each session’s page.",
+  "see_slide": "See the slide"
 }

src/i18n/ja.json

@@ -30,5 +30,6 @@
   "need_connpass_number": "connpass の受付番号が必要です。",
   "has_been_finished": "Go Conference 2023 Online は終了いたしました",
   "thanks_for_corporate": "ご登壇、ご参加いただいた皆さん、ご協力いただいたスポンサー、運営の皆さんありがとうございました！",
-  "archive_will_be_published": "公開可能なセッションのアーカイブは、各セッションのページにて順次公開予定です。"
+  "archive_will_be_published": "公開可能なセッションのアーカイブは、各セッションのページにて順次公開予定です。",
+  "see_slide": "スライドを見る"
 }

src/modules/sessionize/schema.ts

@@ -18,7 +18,7 @@ const sessionizeSessionSchema = z.object({
   ),
   roomId: z.number(),
   liveUrl: z.null(),
-  recordingUrl: z.null(),
+  recordingUrl: z.string().nullable(),
   status: z.literal('Accepted')
 })
 
@@ -107,3 +107,7 @@ export const CATEGORY_SESSION_TYPE = 46584
  * ID of the category for the session level.
  */
 export const CATEGORY_SESSION_LEVEL = 53862
+/**
+ * ID of the question for the slide URL.
+ */
+export const QUESTION_SLIDE_URL = 54981

src/modules/sessionize/utils.ts

@@ -3,6 +3,7 @@ import {
   CATEGORY_SESSION_LEVEL,
   CATEGORY_SESSION_TYPE,
   QUESTION_SESSION_NUMBER,
+  QUESTION_SLIDE_URL,
   SessionizeCategorySchemaType,
   SessionizeRoomSchemaType,
   SessionizeSessionSchemaType,
@@ -159,3 +160,16 @@ export const formatSpeakerName = (firstName: string, lastName: string): string =
   }
   return `${firstName} ${lastName}`
 }
+
+/**
+ * Get URL for the slide of the session.
+ * @param questionAnswers - list of the set of a question and an answer belongs to each session.
+ */
+export const getSlideUrl = (questionAnswers: SessionizeSessionSchemaType['questionAnswers']): string | null => {
+  const questionForSlideUrl = questionAnswers.find(q => q.questionId === QUESTION_SLIDE_URL)
+  if (!questionForSlideUrl) {
+    return null
+  }
+
+  return questionForSlideUrl.answerValue
+}

src/pages/sessions/[id].tsx

@@ -12,17 +12,18 @@ import { replaceUrlWithLink } from 'src/modules/util/text'
 import { fetchSessionize } from 'src/modules/sessionize/fetch-sessionize'
 import {
   formatSpeakerName,
-  getGoogleCalendarEventCreationLink,
   getRoom,
   getSession,
   getSessionLevel,
   getSessionType,
+  getSlideUrl,
   getSpeaker,
   getTwitterUserName
 } from 'src/modules/sessionize/utils'
 import Head from 'next/head'
-import { GoogleCalendarButton, TweetButton } from 'src/components/molecules'
-import { PageHeading } from 'src/components/atoms'
+import { TweetButton, YouTubeEmbedFrame } from 'src/components/molecules'
+import { Button, PageHeading } from 'src/components/atoms'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   title: string
@@ -31,7 +32,8 @@ type Props = {
   description: string
   sessionType: string | null
   sessionLevel: string | null
-  googleCalendarEventCreationLink: string
+  recordingUrl: string | null
+  slideUrl: string | null
   speaker: {
     fullName: string
     profilePicture: string
@@ -97,14 +99,14 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
     roomId,
     categoryItems,
     speakers: speakerIds,
-    startsAt,
-    endsAt
+    questionAnswers,
+    recordingUrl
   } = getSession(sessions, sessionId)
 
   const { name: roomName } = getRoom(rooms, roomId)
   const sessionLevel = getSessionLevel(categories, categoryItems)
   const sessionType = getSessionType(categories, categoryItems)
-  const googleCalendarEventCreationLink = getGoogleCalendarEventCreationLink(startsAt, endsAt, title, description)
+  const slideUrl = getSlideUrl(questionAnswers)
   const { firstName, lastName, profilePicture, bio, tagLine, links } = getSpeaker(speakers, speakerIds[0])
   const fullName = formatSpeakerName(firstName, lastName)
   const twitterUserName = getTwitterUserName(links)
@@ -117,7 +119,8 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
       description,
       sessionLevel,
       sessionType,
-      googleCalendarEventCreationLink,
+      recordingUrl,
+      slideUrl,
       speaker: { fullName, profilePicture, bio, tagLine, twitterUserName }
     }
   }
@@ -130,9 +133,11 @@ const Page: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
   description,
   sessionLevel,
   sessionType,
-  googleCalendarEventCreationLink,
+  recordingUrl,
+  slideUrl,
   speaker: { fullName, profilePicture, bio, tagLine, twitterUserName }
 }) => {
+  const { t } = useTranslation()
   return (
     <Layout>
       <Head>
@@ -150,6 +155,18 @@ const Page: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
       >
         <PageHeading textAlign="left">{title}</PageHeading>
 
+        {/* Archive */}
+        {(recordingUrl || slideUrl) && (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '24px', alignItems: 'center', mb: '40px' }}>
+            {recordingUrl && <YouTubeEmbedFrame recordingUrl={recordingUrl} />}
+            {slideUrl && (
+              <a href={slideUrl} target="_blank">
+                <Button text={t('see_slide')} />
+              </a>
+            )}
+          </Box>
+        )}
+
         {/* Session's info */}
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', mb: '32px' }}>
           <Box sx={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
@@ -209,8 +226,7 @@ const Page: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
         </Box>
 
         {/* Share */}
-        <Box sx={{ display: 'flex', gap: '16px', justifyContent: 'flex-end', mb: '64px' }}>
-          <GoogleCalendarButton googleCalendarEventCreationLink={googleCalendarEventCreationLink} />
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: '64px' }}>
           <TweetButton sessionId={sessionId} title={title} roomName={roomName} />
         </Box>