fix videos for conf 2024 (graphql#1819)

Author: dimaMachina

public/images/next-image-export-optimizer-hashes.json

@@ -25,6 +25,7 @@
     "/8_53229629805_o.290e35be.jpg": "NfsXTg4KKkt1csv79IiZ3FyU3-CW1WTkp4883NgZam4=",
     "/9.4a558c85.jpg": "-iUSFWjVs4vunEea7FxDeNMOOvUs4VOEpScXJAwi0DA=",
     "/annual-report-1.5ebe2b34.png": "HmbFFbaUL79rvnCKQ-2oRSLETM2FFh5v5dZxwWquuVM=",
+    "/audience.f60c1c99.jpg": "pqx3E31xAO87mNEBlZKqCTX+LRiPlOuQThWQZf08A4A=",
     "/banner.10d4d66b.jpg": "9UJqBQ9RQu2sxDdJ5uaQr3crx2ZXrlOKMAmY82R8ZBA=",
     "/business_layer.68bf746f.png": "DwCtOs-q1Y-DgBxEj6NqyVaOAiq5zCB8xPF-rZ5Qe1U=",
     "/coursera.968d6897.png": "FmQxkHPToU9hZQFvKVSRa6+-5xppLy6lJJhqCEIiCzk=",
@@ -133,19 +134,24 @@
     "/graphqlconf-202395_53229430163_o.83d6ce30.jpg": "wGPGuLNhdPy1AKSdem7dB2U3hCnLNt0m7A697OKpMLA=",
     "/graphqlconf-202396_53229628185_o.e02e8158.jpg": "CwcPIFPl3qMN77xrq3PNo3IDu2xdE5t-XAmqMN7vvrA=",
     "/graphqlconf-2023graphqlconf-2023_53228255062_o.29b776c3.jpg": "iXr9Z8xwKZhM1pUZPRRTFEHbvwYlw81k6ZIqW5zh3x4=",
+    "/hero1.2c973c2e.jpg": "jY1RePeWthuOOa5c59Yl4TQD4J731poNxeaqzKDFmfg=",
+    "/hero2.fa425ea9.jpg": "siZR-Q3HPEB5l2gU0DAbheWVVUOCsrOuOv-Ch0xCR7M=",
     "/idit.feda6f62.jpg": "9oybNQ8aiuV++33v8KDL8ZgIL0H2T5UF3EjnhsksM5g=",
     "/intuit.04140a09.png": "m84fUDz2YQxlNNMmbthcNfYr3bWhp23zEPxvP5ruo9Q=",
     "/layers-2x.9859cd12.png": "3D8k4Go-oWvQTcmIDFOwHTfm1eagZIqjwar3vFcoZY8=",
     "/layers.ef6db872.png": "fbR0XaZWR0olI2fUKeOWruBZ6HxRDSEYGXCzktrW4XA=",
+    "/lee.dfa51298.png": "rG86vKMradTmaq1FH-F2-zwDzRkcw-qXK18Slp34VPs=",
     "/leebyron.4adb0a93.jpg": "poBi-hIdozz-Mn2PIKun7ZpX9q200f7m-5SkUt1XU-0=",
     "/marcandre.b8692933.jpg": "mUbreFySTVojHKZTl0VKcMQ9gHdSVCL47mSBnUYITBI=",
     "/marker-icon.d577052a.png": "L15ETF3vWj9pjeLgXar+ibZOYNJYXoQal5lJmpTWTbA=",
     "/pathological-query.2de43465.png": "Xoi58Mnu6FqfvNp4+gXgt-IyMDdMpdbqPUyNzlH5YJQ=",
     "/pinterest.36b58187.png": "TlwGD0W-rRqoDgDND5x+cQrzz09xU+dmW6oP8+qSBug=",
     "/playground-transition-banner.2458871d.png": "ffm4o7utOWkmwaWC2KVVHPOz9zsaD6fG2P269pHT8uQ=",
     "/rest-api-people.c2b56e20.png": "KDbPJA1rAhVT43LeGLckdesx+bISV+6g0q9fJQNl5Tg=",
-    "/sf-city-view.d5d36dff.jpeg": "a-QVXW74jpiDFhmUOc9hZY10pGvmpSLSdM+u0EcuRac=",
     "/shopify.2cb330ea.png": "LRiC9+uEG-gHl-XYi4qrSXMAlpFglZLNZj1kBGF-Cag=",
+    "/speaker.674c5b86.jpg": "ISlnB9At3nuMk70rfRuMAu+k9aEhUNSwp7XgFMx5Bls=",
+    "/unconf.651492c3.jpg": "mlpvU8glWqqsRn2n3-pgwRI+Jnk3sT7VQjsCL01e30c=",
     "/uri.387cb001.jpg": "kSx4huEjQidwIg6bF8UEWLiPACDl0nQ0aqxA2R2LIe0=",
-    "/whiteboard.60eac8e3.jpg": "NodBqUaO+IanhuPaP9o5jCIe+gSrwyZ9TZ3QUdlWbBg="
+    "/whiteboard.60eac8e3.jpg": "NodBqUaO+IanhuPaP9o5jCIe+gSrwyZ9TZ3QUdlWbBg=",
+    "/workshop.e02e3501.jpg": "D9ON1z6-vKcjxv50gOH+5XS9HTEWUpc4UgIPW5OXHxE="
 }

public/nextImageExportOptimizer/audience.f60c1c99-opt-10.WEBP

@@ -68,7 +68,7 @@ const Tag = ({
     <span
       className={clsx(
         "border border-solid border-[#333333] font-semibold text-sm px-3 py-1 h-max rounded-full whitespace-nowrap",
-        featured ? "bg-[#F8779D] border-[#F8779D] border-2 text-white" : "",
+        featured && "bg-[#F8779D] border-[#F8779D] border-2 text-white",
       )}
     >
       {text}
@@ -100,111 +100,106 @@ export default function SessionPage({ params }: SessionProps) {
     videos.map(e => e.title),
   ).bestMatch
 
+  const videoId = videos.find(e => e.title === recordingTitle.target)?.id
+
+  if (!videoId) {
+    throw new Error(`Video "${recordingTitle.target}" not found`)
+  }
+
   return (
     <div className="bg-[#f4f6f8]">
       <div className="container">
         <div className="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">
-            <div className="flex flex-col lg:px-0">
-              <BackLink year="2024" kind="schedule" />
-
-              {recordingTitle.rating > 0.5 && (
-                <iframe
-                  className="aspect-video max-w-[1000px] mx-auto size-full rounded-md"
-                  src={`https://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 className="mt-10 flex flex-col self-center prose lg:prose-lg sm:space-y-4">
-                <div className="space-y-5">
-                  <div className="flex gap-3 flex-wrap">
-                    <Tag text={eventType} featured />
-                    <Tag text={event.audience} />
-                    <Tag text={event.event_subtype} />
-                  </div>
-                  <h1 className="mt-0 text-2xl lg:text-3xl font-medium">
-                    {eventTitle}
-                  </h1>
-                  <span className="text-[#333333]">
-                    {format(
-                      parseISO(event.event_start),
-                      "EEEE, MMMM d / hh:mmaaaa 'PDT'",
-                    )}{" "}
-                    - {format(parseISO(event.event_end), "hh:mmaaaa 'PDT'")}
-                  </span>
-                </div>
-                <div className="flex flex-wrap lg:flex-row flex-col gap-5 mt-8">
-                  {event.speakers!.map(speaker => (
-                    <div
-                      className={`flex items-center gap-3 w-full ${event?.speakers?.length || 0 > 1 ? "max-w-[320px]" : ""}`}
-                      key={speaker.username}
-                    >
-                      <Avatar
-                        className="lg:size-[120px] size-[100px] rounded-full"
-                        avatar={speaker.avatar}
-                        name={speaker.name}
-                      />
-
-                      <div className="flex flex-col lg:gap-1 gap-1.5">
-                        <a
-                          href={`/conf/2024/speakers/${speaker.username}`}
-                          className="text-xl mt-0 font-bold text-[#333333] underline"
-                        >
-                          {speaker.name}
-                        </a>
-
-                        <span className="font-normal">
-                          <span className="font-semibold">
-                            {speaker.company}
-                          </span>
-                          {speaker.company && ", "}
-                          {speaker.position}
-                        </span>
-                        {speaker.socialurls?.length ? (
-                          <div className="mt-0 text-[#333333]">
-                            <div className="flex space-x-2">
-                              {speaker.socialurls.map(social => (
-                                <a
-                                  key={social.url}
-                                  href={social.url}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                  className="flex items-center text-black"
-                                >
-                                  <SocialMediaIcon
-                                    service={
-                                      social.service.toLowerCase() as SocialMediaIconServiceType
-                                    }
-                                  />
-                                </a>
-                              ))}
-                            </div>
-                          </div>
-                        ) : null}
-                      </div>
-                    </div>
-                  ))}
+            <BackLink year="2024" kind="schedule" />
+            <iframe
+              className="aspect-video w-full max-w-4xl mx-auto rounded-md mt-6"
+              src={`https://youtube.com/embed/${videoId}`}
+              title={recordingTitle.target}
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowFullScreen
+            />
+
+            <div className="mt-10 flex flex-col self-center prose lg:prose-lg sm:space-y-4 mx-auto">
+              <div className="space-y-5">
+                <div className="flex gap-3 flex-wrap">
+                  <Tag text={eventType} featured />
+                  <Tag text={event.audience} />
+                  <Tag text={event.event_subtype} />
                 </div>
-                <p>{event.description}</p>
-
-                <div className="py-8">
-                  {event.files?.map(({ path }) => (
-                    <div key={path}>
-                      <a href={path} target="_blank" rel="noreferrer">
-                        View Full PDF{" "}
-                        <span className="font-sans font-light text-2xl">
-                          ↗
-                        </span>
+                <h1 className="mt-0 text-2xl lg:text-3xl font-medium">
+                  {eventTitle}
+                </h1>
+                <span className="text-[#333333]">
+                  {format(
+                    parseISO(event.event_start),
+                    "EEEE, MMMM d / hh:mmaaaa 'PDT'",
+                  )}{" "}
+                  - {format(parseISO(event.event_end), "hh:mmaaaa 'PDT'")}
+                </span>
+              </div>
+              <div className="flex flex-wrap lg:flex-row flex-col gap-5 mt-8">
+                {event.speakers!.map(speaker => (
+                  <div
+                    className={`flex items-center gap-3 w-full ${event?.speakers?.length || 0 > 1 ? "max-w-[320px]" : ""}`}
+                    key={speaker.username}
+                  >
+                    <Avatar
+                      className="lg:size-[120px] size-[100px] rounded-full"
+                      avatar={speaker.avatar}
+                      name={speaker.name}
+                    />
+
+                    <div className="flex flex-col lg:gap-1 gap-1.5">
+                      <a
+                        href={`/conf/2024/speakers/${speaker.username}`}
+                        className="text-xl mt-0 font-bold text-[#333333] underline"
+                      >
+                        {speaker.name}
                       </a>
-                      <iframe src={path} className="aspect-video size-full" />
+
+                      <span className="font-normal">
+                        <span className="font-semibold">{speaker.company}</span>
+                        {speaker.company && ", "}
+                        {speaker.position}
+                      </span>
+                      {speaker.socialurls?.length ? (
+                        <div className="mt-0 text-[#333333]">
+                          <div className="flex space-x-2">
+                            {speaker.socialurls.map(social => (
+                              <a
+                                key={social.url}
+                                href={social.url}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="flex items-center text-black"
+                              >
+                                <SocialMediaIcon
+                                  service={
+                                    social.service.toLowerCase() as SocialMediaIconServiceType
+                                  }
+                                />
+                              </a>
+                            ))}
+                          </div>
+                        </div>
+                      ) : null}
                     </div>
-                  ))}
-                </div>
+                  </div>
+                ))}
+              </div>
+              <p>{event.description}</p>
+
+              <div className="py-8">
+                {event.files?.map(({ path }) => (
+                  <div key={path}>
+                    <a href={path} target="_blank" rel="noreferrer">
+                      View Full PDF{" "}
+                      <span className="font-sans font-light text-2xl">↗</span>
+                    </a>
+                    <iframe src={path} className="aspect-video size-full" />
+                  </div>
+                ))}
               </div>
             </div>
           </section>