Update
This commit is contained in:
rodič
aa870f6cdb
revize
cfb4fe9dbe
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 { 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 {};
|
||||
|
|
|
|||
Načítá se…
Odkázat v novém úkolu