Update
This commit is contained in:
rodič
aa870f6cdb
revize
cfb4fe9dbe
|
@ -2,9 +2,10 @@
|
||||||
import { bundle } from "$lib/stores";
|
import { bundle } from "$lib/stores";
|
||||||
import SocialButtons from "$lib/SocialButtons.svelte";
|
import SocialButtons from "$lib/SocialButtons.svelte";
|
||||||
import { version } from "$lib/version.js";
|
import { version } from "$lib/version.js";
|
||||||
|
import { page } from "$app/stores";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $bundle}
|
{#if $bundle && !['/kiosk'].includes($page.url.pathname)}
|
||||||
<div class="bg-blue-web-bg text-white print:hidden">
|
<div class="bg-blue-web-bg text-white print:hidden">
|
||||||
<div
|
<div
|
||||||
class="relative mx-auto px-6 pt-10 pb-2 sm:pb-6 max-w-6xl sm:flex pr-4"
|
class="relative mx-auto px-6 pt-10 pb-2 sm:pb-6 max-w-6xl sm:flex pr-4"
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{#if !['/kiosk'].includes($page.url.pathname)}
|
||||||
<header
|
<header
|
||||||
class="relative bg-center bg-cover {$page.url.pathname !== '/tv'
|
class="relative bg-center bg-cover {$page.url.pathname !== '/tv'
|
||||||
? "bg-[url('/img/bg-header.jpg')]"
|
? "bg-[url('/img/bg-header.jpg')]"
|
||||||
|
@ -201,6 +202,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</header>
|
</header>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
|
@ -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}
|
|
@ -7,7 +7,7 @@
|
||||||
import { bundle, userData } from "$lib/stores.js";
|
import { bundle, userData } from "$lib/stores.js";
|
||||||
import { format, formatDistanceToNow } from "date-fns";
|
import { format, formatDistanceToNow } from "date-fns";
|
||||||
import { formatCET } from "$lib/utils.js";
|
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 EventTypeLabel from "$lib/EventTypeLabel.svelte";
|
||||||
import TVScheduleDesc from "$lib/TVScheduleDesc.svelte";
|
import TVScheduleDesc from "$lib/TVScheduleDesc.svelte";
|
||||||
import Avatar from "$lib/Avatar.svelte";
|
import Avatar from "$lib/Avatar.svelte";
|
||||||
|
@ -73,13 +73,13 @@
|
||||||
bundle.subscribe((_bundle) => {
|
bundle.subscribe((_bundle) => {
|
||||||
events = _bundle.spec.schedule;
|
events = _bundle.spec.schedule;
|
||||||
cachedBundle = _bundle;
|
cachedBundle = _bundle;
|
||||||
genStatus(cachedBundle);
|
genStatus(cachedBundle, stageStatus);
|
||||||
});
|
});
|
||||||
|
|
||||||
let interval = null;
|
let interval = null;
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
interval = setInterval(() => {
|
interval = setInterval(() => {
|
||||||
genStatus(cachedBundle);
|
genStatus(cachedBundle, stateStatus);
|
||||||
}, 5000);
|
}, 5000);
|
||||||
});
|
});
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
|
@ -107,85 +107,6 @@
|
||||||
return _bundle.spec.speakers.find((s) => s.id === sp);
|
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) {
|
function makeSpoiler(_e) {
|
||||||
if (!_e.description) {
|
if (!_e.description) {
|
||||||
return {};
|
return {};
|
||||||
|
|
Načítá se…
Odkázat v novém úkolu