From cfb4fe9dbe26c42ea137ebba9e6d1b702a5163bc Mon Sep 17 00:00:00 2001
From: tree <tree@hidden.cz>
Date: Wed, 1 Jun 2022 20:33:10 +0200
Subject: [PATCH] Update

---
 src/lib/Footer.svelte        |  3 +-
 src/lib/header/Header.svelte |  2 +
 src/lib/schedule.js          | 82 ++++++++++++++++++++++++++++++++
 src/routes/kiosk.svelte      | 90 ++++++++++++++++++++++++++++++++++++
 src/routes/tv.svelte         | 85 ++--------------------------------
 5 files changed, 179 insertions(+), 83 deletions(-)
 create mode 100644 src/lib/schedule.js
 create mode 100644 src/routes/kiosk.svelte

diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
index 7855cf1..d743dba 100644
--- a/src/lib/Footer.svelte
+++ b/src/lib/Footer.svelte
@@ -2,9 +2,10 @@
   import { bundle } from "$lib/stores";
   import SocialButtons from "$lib/SocialButtons.svelte";
   import { version } from "$lib/version.js";
+  import { page } from "$app/stores";
 </script>
 
-{#if $bundle}
+{#if $bundle && !['/kiosk'].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"
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
index edbe5bd..f1db6f7 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -12,6 +12,7 @@
   }
 </script>
 
+{#if !['/kiosk'].includes($page.url.pathname)}
 <header
   class="relative bg-center bg-cover {$page.url.pathname !== '/tv'
     ? "bg-[url('/img/bg-header.jpg')]"
@@ -201,6 +202,7 @@
     </div>
   {/if}
 </header>
+{/if}
 
 <style>
 </style>
diff --git a/src/lib/schedule.js b/src/lib/schedule.js
new file mode 100644
index 0000000..ee64f58
--- /dev/null
+++ b/src/lib/schedule.js
@@ -0,0 +1,82 @@
+import { parsePeriod } from "$lib/periods.js";
+import { formatCET } from "$lib/utils.js";
+
+function extendEvents(arr, _bundle) {
+  for (const ev of arr) {
+    ev._event = _bundle.spec.events.find((e) => e.id === ev.event);
+  }
+  return arr;
+}
+
+export function genStatus(_bundle, stageStatus) {
+  //const now = new Date(`2022-06-05T${format(new Date(), "HH:mm:ss")}`);
+  //const now = new Date();
+  const now = new Date(`2022-06-04T13:25`)
+
+  let globalNextEvents = _bundle.spec.schedule.filter((ev) => {
+    return new Date(ev.period.end).getTime() > now.getTime();
+  });
+
+  const stages = _bundle.spec.stages;
+  for (const stage of stages.filter((s) => s.livestream)) {
+    let allEvents = globalNextEvents.filter((e) => e.stage === stage.id);
+    let nextEvents = [...allEvents];
+    let current = null;
+    if (
+      nextEvents.length > 0 &&
+      new Date(nextEvents[0].period.start).getTime() <= now.getTime()
+    ) {
+      current = nextEvents[0];
+      nextEvents = nextEvents.slice(1);
+    }
+
+    let breakType = "break";
+
+    const allStreams = stage.streams.map((st) => parsePeriod(_bundle, st));
+    const nextStreams = allStreams.filter(
+      (s) => s.period.end.getTime() >= now.getTime()
+    );
+    if (nextStreams.length === 0) {
+      nextStreams.push(allStreams[allStreams.length - 1]);
+    }
+    let currentPercentage = null;
+    if (current) {
+      let duration =
+        (new Date(current.period.end).getTime() -
+          new Date(current.period.start).getTime()) /
+        1000;
+      let elapsed = Math.floor(
+        (now.getTime() - new Date(current.period.start).getTime()) / 1000
+      );
+      currentPercentage = elapsed / (duration / 100);
+    }
+
+    if (!current && nextEvents[0] && allEvents[0].id === nextEvents[0].id) {
+      breakType = "beforeStart";
+    }
+    if (!current && nextEvents.length === 0) {
+      breakType = "afterEnd";
+    }
+
+    const day = formatCET(
+      new Date(nextStreams[0].period.start),
+      "yyyy-MM-dd"
+    );
+    let ctime = 0;
+    if (day === "2022-06-05") {
+      ctime = 2;
+    }
+    const scheduleLink = `/program?time=${ctime}&stage=${stage.id}&desc=true`;
+
+    stageStatus[stage.id] = {
+      current: current ? extendEvents([current], _bundle)[0] : null,
+      currentPercentage,
+      next: extendEvents(nextEvents.slice(0, 2), _bundle),
+      stream: nextStreams[0],
+      scheduleLink,
+      breakType,
+    };
+  }
+  return stageStatus
+}
+
diff --git a/src/routes/kiosk.svelte b/src/routes/kiosk.svelte
new file mode 100644
index 0000000..6bbbfae
--- /dev/null
+++ b/src/routes/kiosk.svelte
@@ -0,0 +1,90 @@
+<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";
+
+  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
+  
+  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 && stage}
+  <div class="relative w-screen h-screen bg-[url('/img/bg-header.jpg')] bg-cover text-white/50 text-xl">
+  {#each screens as sc}
+    <div class="absolute top-0 uppercase text-md py-5 px-5">{stage.name}</div>
+    <div class="absolute top-0 right-0 uppercase text-md py-5 px-5">{time}</div>
+    <div class="absolute top-0 left-0 w-full h-full flex text-white text-xl transition-all duration-1000 {sc.type === screens[pos].type ? 'opacity-100' : 'opacity-0'}">
+      <div class="absolute bottom-0 right-0 uppercase text-md py-5 px-5 w-64 h-36 bg-blue-web">
+        <div></div>
+      </div>
+      {#if sc.type === 'main'}
+        <div class="text-center m-auto">
+          <div class="mb-10">Obrazovka I.</div>
+          <div class="mb-10 text-4xl">{stage.name}</div>
+          <img src="/img/logo-white.svg" class="w-100" />
+          <div class="mt-10">Zde budou sponzoři, partneři, atp...</div>
+        </div>
+      {/if}
+      {#if sc.type === 'program'}
+        <div class="text-center m-auto">
+          <div class="mb-10">Obrazovka II.</div>
+          <img src="/img/utxo-tv.svg" class="w-32" />
+          <div class="mt-10">
+            {#if ss.current}
+              <div>{ss.current.event}</div>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/each}
+  </div>
+{/if}
diff --git a/src/routes/tv.svelte b/src/routes/tv.svelte
index 24c9417..800503e 100644
--- a/src/routes/tv.svelte
+++ b/src/routes/tv.svelte
@@ -7,7 +7,7 @@
   import { bundle, userData } from "$lib/stores.js";
   import { format, formatDistanceToNow } from "date-fns";
   import { formatCET } from "$lib/utils.js";
-  import { parsePeriod } from "$lib/periods.js";
+  import { genStatus } from '$lib/schedule.js';
   import EventTypeLabel from "$lib/EventTypeLabel.svelte";
   import TVScheduleDesc from "$lib/TVScheduleDesc.svelte";
   import Avatar from "$lib/Avatar.svelte";
@@ -73,13 +73,13 @@
   bundle.subscribe((_bundle) => {
     events = _bundle.spec.schedule;
     cachedBundle = _bundle;
-    genStatus(cachedBundle);
+    genStatus(cachedBundle, stageStatus);
   });
 
   let interval = null;
   onMount(() => {
     interval = setInterval(() => {
-      genStatus(cachedBundle);
+      genStatus(cachedBundle, stateStatus);
     }, 5000);
   });
   onDestroy(() => {
@@ -107,85 +107,6 @@
     return _bundle.spec.speakers.find((s) => s.id === sp);
   }
 
-  function extendEvents(arr, _bundle) {
-    for (const ev of arr) {
-      ev._event = _bundle.spec.events.find((e) => e.id === ev.event);
-    }
-    return arr;
-  }
-
-  function genStatus(_bundle) {
-    //const now = new Date(`2022-06-05T${format(new Date(), "HH:mm:ss")}`);
-    const now = new Date();
-    //const now = new Date(`2022-06-04T13:25`)
-
-    let globalNextEvents = events.filter((ev) => {
-      return new Date(ev.period.end).getTime() > now.getTime();
-    });
-
-    const stages = _bundle.spec.stages;
-    for (const stage of stages.filter((s) => s.livestream)) {
-      let allEvents = globalNextEvents.filter((e) => e.stage === stage.id);
-      let nextEvents = [...allEvents];
-      let current = null;
-      if (
-        nextEvents.length > 0 &&
-        new Date(nextEvents[0].period.start).getTime() <= now.getTime()
-      ) {
-        current = nextEvents[0];
-        nextEvents = nextEvents.slice(1);
-      }
-
-      let breakType = "break";
-
-      const allStreams = stage.streams.map((st) => parsePeriod(_bundle, st));
-      const nextStreams = allStreams.filter(
-        (s) => s.period.end.getTime() >= now.getTime()
-      );
-      if (nextStreams.length === 0) {
-        nextStreams.push(allStreams[allStreams.length - 1]);
-      }
-      let currentPercentage = null;
-      if (current) {
-        let duration =
-          (new Date(current.period.end).getTime() -
-            new Date(current.period.start).getTime()) /
-          1000;
-        let elapsed = Math.floor(
-          (now.getTime() - new Date(current.period.start).getTime()) / 1000
-        );
-        currentPercentage = elapsed / (duration / 100);
-      }
-
-      if (!current && nextEvents[0] && allEvents[0].id === nextEvents[0].id) {
-        breakType = "beforeStart";
-      }
-      if (!current && nextEvents.length === 0) {
-        breakType = "afterEnd";
-      }
-
-      const day = formatCET(
-        new Date(nextStreams[0].period.start),
-        "yyyy-MM-dd"
-      );
-      let ctime = 0;
-      if (day === "2022-06-05") {
-        ctime = 2;
-      }
-      const scheduleLink = `/program?time=${ctime}&stage=${stage.id}&desc=true`;
-
-      stageStatus[stage.id] = {
-        current: current ? extendEvents([current], _bundle)[0] : null,
-        currentPercentage,
-        next: extendEvents(nextEvents.slice(0, 2), _bundle),
-        stream: nextStreams[0],
-        scheduleLink,
-        breakType,
-      };
-    }
-    //console.log(stageStatus);
-  }
-
   function makeSpoiler(_e) {
     if (!_e.description) {
       return {};