Záznamy přednášek

src/lib/Avatar.svelte

@@ -61,7 +61,7 @@
 </script>
 
 {#if size === "custom"}
-  <div class="customSize} text-center pb-4 m-auto">
+  <div class="{customSize} text-center m-auto">
     <img
       src={currentImg}
       class="{customSize} rounded-full m-auto"

src/lib/Footer.svelte

@@ -5,7 +5,7 @@
   import { page } from "$app/stores";
 </script>
 
-{#if $bundle && !['/kiosk'].includes($page.url.pathname)}
+{#if $bundle && !['/kiosk','/tv-screen'].includes($page.url.pathname)}
   <div class="bg-blue-web-bg text-white print:hidden">
     <div
       class="relative mx-auto px-6 pt-10 pb-2 sm:pb-6 max-w-6xl sm:flex pr-4"

src/lib/header/Header.svelte

@@ -12,7 +12,7 @@
   }
 </script>
 
-{#if !['/kiosk'].includes($page.url.pathname)}
+{#if !['/kiosk', '/tv-screen'].includes($page.url.pathname)}
 <header
   class="relative bg-center bg-cover {$page.url.pathname !== '/tv'
     ? "bg-[url('/img/bg-header.jpg')]"

src/routes/tv-screen.svelte

@@ -0,0 +1,95 @@
+<script context="module">
+  export const prerender = true;
+</script>
+
+<script>
+  import { page } from "$app/stores";
+  import { onDestroy } from "svelte";
+  import { bundle } from "$lib/stores";
+  import { genStatus } from '$lib/schedule.js';
+  import { formatCET } from "$lib/utils.js";
+  import { cs } from "date-fns/locale/index.js";
+  import Avatar from "$lib/Avatar.svelte";
+  import { EventTypes } from "$lib/config.js"
+
+  const screens = [
+    { type: 'main' },
+    { type: 'program' },
+  ]
+
+  let pos = 0
+  let stageStatus = {}
+
+  $: stageId = getParam($page.url.search, 's')
+  $: stage = stageId && $bundle ? $bundle.spec.stages.find(s => s.id === stageId) : null
+  $: ss = stageId ? stageStatus[stageId] : null
+
+  $: eventId = getParam($page.url.search, 'id')
+  $: si = $bundle ? $bundle.spec.schedule.find(i => i.id === eventId) : null
+  $: event = si ? $bundle.spec.events.find(e => e.id === si.event) : null
+ 
+  function getSpeakers (speakers) {
+    return speakers.map(sId => {
+      return $bundle.spec.speakers.find(s => s.id === sId)
+    })
+  }
+  
+  let time = getTime()
+
+  function getTime() {
+    return formatCET(new Date(), 'iiiiii HH:mm:ss', { locale: cs })
+  }
+
+  const intMain = setInterval(() => {
+    if (pos+1 > screens.length-1) {
+      pos = 0
+    } else {
+      pos++
+    }
+    //console.log(pos)
+
+  }, 2000)
+
+  const intTime = setInterval(() => { time = getTime() }, 1000)
+
+  bundle.subscribe((_bundle) => {
+    genStatus(_bundle, stageStatus);
+  });
+
+  onDestroy(() => {
+    clearInterval(intMain)
+    clearInterval(intTime)
+  })
+
+  function getParam(search, param = 's') {
+    return new URLSearchParams(search).get(param)
+  }
+
+</script>
+
+
+{#if $bundle && event}
+  <div style="width: 1920px; height: 1080px;" class="relative bg-[url('/img/tv-bg.png')] text-white/50 text-xl" id="utxo-tv">
+    <div class="absolute bottom-20 left-20">
+      <img src="/img/logo-white.svg" style="width: 520px;" />
+    </div>
+    <div class="flex" style="height: 900px;">
+      <div class="my-auto text-white text-8xl pl-20 pr-20">
+        <div class="text-5xl mb-10 flex">
+          <div class="inline-block px-4 py-3 rounded-xl text-black uppercase {EventTypes[event.type].color} w-auto">{event.type === 'talk' ? 'Přednáška' : (event.type == 'panel' ? 'Panelová debata' : 'Ostatní' )}</div>
+        </div>
+        <div class="font-semibold">{event.name}</div>
+        <div class="text-6xl flex flex-wrap mt-12 gap-6">
+          {#each getSpeakers(event.speakers) as speaker}
+            <div class="flex {event.speakers.length === 1 ? 'text-8xl gap-10' : 'gap-4'}">
+              <div class="m-auto">
+                <Avatar speaker={speaker} size="custom" customSize={event.speakers.length === 1 ? 'w-32' : 'w-20'} />
+              </div>
+              <div class="m-auto">{speaker.name}</div>
+            </div>
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/routes/udalosti.svelte

@@ -16,6 +16,7 @@
   import Link from "$lib/Link.svelte";
   import Paragraph from "$lib/Paragraph.svelte";
   import EventSchedule from "$lib/EventSchedule.svelte";
+  import YouTube from "$lib/YouTube.svelte";
 
   const renderers = { link: Link, paragraph: Paragraph };
 
@@ -116,9 +117,15 @@
         <SvelteMarkdown source={e.description} {renderers} />
       </div>
     {/if}
-    <div>
+    {#if e.video && e.video.youtube}
+      <div class="mb-10 mt-10">
+        <div class="mb-4 text-xl font-semibold">Záznam</div>
+        <YouTube videoId={e.video.youtube} id="player-{e.id}" />
+      </div>
+    {/if}
+    <!--div>
       <a href="https://ptej.se/qa/utxo-{schedule.id}" class="underline hover:no-underline" target="_blank">Otázky na přednášejícího/přednášku</a> (ptej.se)
-    </div>
+    </div-->
     {#if e.parent}
       <div class="mt-6">
         <h2 class="text uppercase mb-4 font-semibold">Součást události:</h2>