v3.1.0

src/app/page.tsx

@@ -8,11 +8,13 @@ import { SponsorSection } from '@/components/sponsors/sponsor-section';
 import CountdownTile from '@/components/tiles/countdown-tile/countdown-tile';
 import { GiveawayTile } from '@/components/tiles/giveaway-tile';
 import MapTile from '@/components/tiles/map-tile/map-tile';
-import { PromoVideoTile } from '@/components/tiles/promo-video-tile';
 import { RegisterTile } from '@/components/tiles/register-tile';
 import { StatTile } from '@/components/tiles/stat-tile';
 import { WorkshopTile } from '@/components/tiles/workshop-tile';
+import { YoutubeVideoTile } from '@/components/tiles/youtube-video-tile';
 import { getIndexData } from '@/models/get-index-data';
+import { getInterviews, getStreams } from '@/models/get-youtube-video-data';
+import { InterviewData, StreamData } from '@/models/models';
 import { kotlinPresentation, tresoritPresentation } from '@/models/staticPresentationData';
 
 import konfLogo from '../../public/img/konf.svg';
@@ -24,6 +26,8 @@ export default async function Landing() {
   if (!data) {
     redirect('/error');
   }
+  const streams: StreamData[] | undefined = await getStreams();
+  const interviews: InterviewData[] | undefined = await getInterviews();
   return (
     <div className='flex-grow relative flex flex-col justify-center items-center self-stretch overflow-hidden'>
       <div className='md:mt-0 p-10 relative '>
@@ -41,15 +45,27 @@ export default async function Landing() {
       <div className='relative'>
         <div className='relative'>
           <div className='grid grid-cols-1 sm:grid-cols-6 max-w-6xl w-full mt-40 gap-6 px-4 sm:px-6 xl:px-0'>
+            {streams &&
+              streams.map((stream) => (
+                <YoutubeVideoTile key={stream.title} title={stream.title} youtubeUrl={stream.youtubeUrl} />
+              ))}
+
             {data.registration.cooltixEventId && <RegisterTile data={data.registration} />}
 
             <StatTile desc='előadás' number='21' />
             <StatTile desc='kiállító az expón' number='21+' />
             <StatTile desc='év tapasztalat' number='21' />
-
             <Presentation presentation={kotlinPresentation} isFrontPage />
 
-            {data.promoVideo.youtubeUrl && <PromoVideoTile data={data.promoVideo} />}
+            {interviews &&
+              interviews.map((interview) => (
+                <YoutubeVideoTile
+                  key={interview.title}
+                  title={interview.title}
+                  youtubeUrl={interview.youtubeUrl}
+                  link={interview.link}
+                />
+              ))}
 
             <Presentation presentation={tresoritPresentation} isFrontPage />
 

src/components/presentation/Presentation.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { FaArrowLeft } from 'react-icons/fa';
 
+import { YoutubeVideo } from '@/components/youtube-video';
 import { Presentation } from '@/models/models';
 import { dateToHourAndMinuteString } from '@/utils/dateHelper';
 import slugify from '@/utils/slugify';
@@ -101,6 +102,11 @@ export default async function Presentation({ presentation, isFrontPage }: Presen
               )}
             </div>
           </div>
+          <div className='sm:w-full md:w-6/7 lg:w-5/6 mx-auto mt-8'>
+            {presentation.questionsUrl && !isFrontPage && (
+              <YoutubeVideo title={presentation.title} url={presentation.questionsUrl} />
+            )}
+          </div>
         </div>
         {isFrontPage && (
           <div className='flex flex-col md:flex-row gap-6 md:gap-16 items-center pt-6 justify-center'>

src/components/tiles/youtube-video-tile.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+
+import { Tile } from '@/components/tiles/tile';
+import { YoutubeVideo } from '@/components/youtube-video';
+
+type Props = {
+  title: string;
+  youtubeUrl: string;
+  link?: string;
+};
+export function YoutubeVideoTile({ title, youtubeUrl, link }: Props) {
+  return (
+    <Tile className='sm:col-span-6 lg:col-span-3'>
+      <Tile.Body>
+        <h2 className='sm:text-2xl md:text-3xl text-center mb-5 capitalize'>{title}</h2>
+        <div className='sm:w-full md:w-6/7 mx-auto mt-2'>
+          <YoutubeVideo title={title} url={youtubeUrl} />
+        </div>
+        {link && (
+          <div className='flex justify-center pt-8'>
+            <Link href={link} className='inline-flex items-center font-semibold text-xl text-white brand-link'>
+              Részletek
+              <svg
+                className=' w-2.5 h-2.5 ms-2 rtl:rotate-180'
+                aria-hidden='true'
+                xmlns='http://www.w3.org/2000/svg'
+                fill='none'
+                viewBox='0 0 6 10'
+              >
+                <path
+                  stroke='currentColor'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth='2'
+                  d='m1 9 4-4-4-4'
+                />
+              </svg>
+            </Link>
+          </div>
+        )}
+      </Tile.Body>
+    </Tile>
+  );
+}

src/components/youtube-video.tsx

@@ -0,0 +1,15 @@
+type Props = {
+  title: string;
+  url: string;
+};
+export function YoutubeVideo({ title, url }: Props) {
+  return (
+    <iframe
+      className='aspect-video rounded w-full'
+      src={url}
+      title={'XXI. Simonyi Konferencia - ' + title}
+      allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+      allowFullScreen
+    ></iframe>
+  );
+}

src/models/get-youtube-video-data.ts

@@ -0,0 +1,17 @@
+import { InterviewData, StreamData } from './models';
+
+export async function getVideoData(endpoint: string) {
+  const response = await fetch(`${process.env.BACKEND_URL}/proto/${endpoint}`, { next: { revalidate: 30 * 60 } });
+  if (!response.ok) {
+    console.error(response);
+    return;
+  }
+  return await response.json();
+}
+
+export async function getStreams(): Promise<StreamData[] | undefined> {
+  return getVideoData('streams');
+}
+export async function getInterviews(): Promise<InterviewData[] | undefined> {
+  return getVideoData('interviews');
+}

src/models/models.ts

@@ -98,3 +98,12 @@ export interface IndexPageData {
   };
   presentations: Presentation[];
 }
+
+export interface StreamData {
+  title: string;
+  youtubeUrl: string;
+}
+
+export interface InterviewData extends StreamData {
+  link: string;
+}