feat: add assets and recording (#1575)

Author: YassinEldeeb

gatsby-node.ts

@@ -158,7 +158,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
     const schedAccessToken = process.env.SCHED_ACCESS_TOKEN
 
     const schedule: ScheduleSession[] = await fetchData(
-      `https://graphqlconf23.sched.com/api/session/list?api_key=${schedAccessToken}&format=json`
+      `https://graphqlconf23.sched.com/api/session/export?api_key=${schedAccessToken}&format=json`
     )
 
     const usernames: { username: string }[] = await fetchData(
@@ -187,7 +187,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
     // Create schedule events' pages
     schedule.forEach(event => {
       const eventSpeakers = speakers.filter(e =>
-        event.speakers?.includes(e.name)
+        event.speakers?.find(({ username }) => username === e.username)
       )
 
       createPage({
@@ -232,8 +232,9 @@ export const createPages: GatsbyNode["createPages"] = async ({
     // Create a page for each speaker
     speakers.forEach(speaker => {
       const speakerSessions: ScheduleSession[] =
-        schedule.filter(session => session.speakers?.includes(speaker.name)) ||
-        []
+        schedule.filter(session => {
+          return session.speakers?.find(e => e.username === speaker.username)
+        }) || []
 
       createPage({
         path: `/conf/speakers/${speaker.username}`,

generate-videos-mappings.py

@@ -0,0 +1,62 @@
+import os
+import googleapiclient.discovery
+import googleapiclient.errors
+from dotenv import load_dotenv
+
+
+load_dotenv(dotenv_path='.env.development')
+
+api_service_name = "youtube"
+api_version = "v3"
+api_key = os.getenv("YOUTUBE_ACCESS_TOKEN")
+
+youtube = googleapiclient.discovery.build(
+    api_service_name, api_version, developerKey=api_key)
+
+def get_videos(channel_id, max_results=100):
+    request = youtube.search().list(
+        part="snippet",
+        channelId=channel_id,
+        maxResults=max_results,
+        order="date", 
+        type="video" 
+    )
+    response = request.execute()
+    
+    videos = []
+    for item in response.get("items", []):
+        video_id = item["id"]["videoId"]
+        title = item["snippet"]["title"]
+        videos.append({'id': video_id, 'title': title})  
+        
+    return videos
+
+def get_channel_id(channel_name):
+    request = youtube.search().list(
+        part="snippet",
+        q=channel_name,
+        type="channel",
+        maxResults=1
+    )
+    response = request.execute()
+    items = response.get("items", [])
+    if items:
+        return items[0]["snippet"]["channelId"]
+    else:
+        return None
+
+channel_name = "GraphQLFoundation"  
+channel_id = get_channel_id(channel_name)
+
+if channel_id:
+    videos = get_videos(channel_id)
+
+    
+    with open('src/templates/videos.ts', 'w') as f:
+        f.write('export const videos = [\n')
+        for video in videos:
+            f.write(f"  {{ id: '{video['id']}', title: `{video['title']}` }},\n")
+        f.write('];\n')
+    print("JS file has been written with video information!")
+else:
+    print(f"No channel found with name {channel_name}")

package.json

@@ -51,6 +51,7 @@
     "react-markdown": "^8.0.7",
     "react-tooltip": "^5.18.1",
     "rehype-raw": "^6.1.1",
+    "string-similarity": "^4.0.4",
     "timeago.js": "4.0.2"
   },
   "devDependencies": {
@@ -59,6 +60,7 @@
     "@types/codemirror": "5.60.7",
     "@types/prismjs": "1.26.0",
     "@types/react-tooltip": "^4.2.4",
+    "@types/string-similarity": "^4.0.0",
     "@typescript-eslint/parser": "5.59.7",
     "autoprefixer": "10.4.14",
     "eslint": "8.42.0",

src/components/Conf/Schedule/ScheduleList.tsx

@@ -3,6 +3,11 @@ import React, { FC, useEffect, useState } from "react"
 import { eventsColors } from "../../../utils/eventsColors"
 import { getEventTitle } from "../../../utils/eventTitle"
 import Filters from "./Filters"
+import { SchedSpeaker } from "../Speakers/Speaker"
+
+function isString(x: any) {
+  return Object.prototype.toString.call(x) === "[object String]"
+}
 
 export interface ScheduleSession {
   id: string
@@ -14,7 +19,8 @@ export interface ScheduleSession {
   event_type: string
   name: string
   venue: string
-  speakers?: string
+  speakers?: SchedSpeaker[] | string
+  files?: { name: string; path: string }[]
 }
 
 export interface ConcurrentSessions {
@@ -214,8 +220,14 @@ const ScheduleList: FC<Props> = ({
                               ? session.event_type.slice(0, -1)
                               : session.event_type
 
-                            const speakers = session.speakers?.split(",") || []
-                            const eventTitle = getEventTitle(session, speakers)
+                            const speakers = session.speakers
+                            const formattedSpeakers = isString(speakers || [])
+                              ? (speakers as string)?.split(",")
+                              : (speakers as SchedSpeaker[])?.map(e => e.name)
+                            const eventTitle = getEventTitle(
+                              session,
+                              formattedSpeakers
+                            )
 
                             const borderColor = eventsColors[session.event_type]
 
@@ -260,9 +272,9 @@ const ScheduleList: FC<Props> = ({
                                     {showEventType ? eventType + " / " : ""}
                                     {eventTitle}
                                     <div className="flex flex-col">
-                                      {speakers.length > 0 && (
+                                      {(speakers?.length || 0) > 0 && (
                                         <span className="font-light">
-                                          {speakers.join(", ")}
+                                          {formattedSpeakers.join(", ")}
                                         </span>
                                       )}
                                       <span className="font-bold mt-2 flex items-center text-gray-700">

src/templates/event.tsx

@@ -18,6 +18,8 @@ import {
 } from "../components/Conf/Speakers/SocialMedia"
 import { BackLink } from "../components/Conf/Schedule/BackLink"
 import { getEventTitle } from "../utils/eventTitle"
+import { videos } from "./videos"
+import { findBestMatch } from "string-similarity"
 
 const Tag = ({
   text,
@@ -52,6 +54,11 @@ export const EventComponent: FC<{
     speakers.map(s => s.name)
   )
 
+  const recordingTitle = findBestMatch(
+    `${eventTitle} ${speakers.map(e => e.name).join(" ")}`,
+    videos.map(e => e.title)
+  ).bestMatch
+
   return (
     <div className={`bg-white ${!hideBackButton ? "py-10" : ""}`}>
       <section className="text-[#333333] min-h-[80vh] flex-col mx-auto px-2 xs:px-0 lg:justify-between justify-center md:container">
@@ -124,7 +131,6 @@ export const EventComponent: FC<{
               remarkPlugins={[remarkGfm]}
               rehypePlugins={[rehypeRaw]}
             />
-
             <div className="flex lg:flex-row flex-col sm:gap-5">
               {speakers?.map(speaker => (
                 <div className="flex items-center gap-3">
@@ -173,6 +179,49 @@ export const EventComponent: FC<{
                 </div>
               ))}
             </div>
+
+            {recordingTitle.rating > 0.5 && (
+              <div>
+                <span className="block text-3xl font-bold text-[#111827] mt-5 mb-4">
+                  Recording
+                </span>
+
+                <iframe
+                  height="408px"
+                  width="100%"
+                  src={`https://www.youtube.com/embed/${
+                    videos.find(e => e.title === recordingTitle.target)?.id
+                  }`}
+                  title={recordingTitle.target}
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowFullScreen
+                />
+              </div>
+            )}
+
+            {event.files && (
+              <div>
+                <span className="block text-3xl font-bold text-[#111827] mt-5 mb-4">
+                  Assets
+                </span>
+                {event.files?.map(({ name, path }) => (
+                  <>
+                    <a href={path} target="_blank">
+                      {name}
+                    </a>
+                    <iframe
+                      style={{
+                        height: "500px",
+                        width: "100%",
+                        resize: "both",
+                        overflow: "auto",
+                      }}
+                      src={path}
+                    ></iframe>
+                  </>
+                ))}
+              </div>
+            )}
           </div>
         </div>
       </section>