finish index page

assets/js/custom/core/config.js

@@ -0,0 +1,11 @@
+import * as params from '@params';
+
+// Values injected from Hugo configuration
+window.informationProjectorConfig = new Map();
+window.informationProjectorConfig.set('workerBaseURL', params.workerBaseURL);
+
+window.informationProjectorConfig.set('scheduleURL', params.scheduleURL);
+window.informationProjectorConfig.set('scheduleFetchInterval', params.scheduleFetchInterval);
+
+console.info('Information Projector Configuration: ');
+console.info(window.informationProjectorConfig);

assets/js/custom/core/fetcher.js

@@ -0,0 +1,60 @@
+'use strict';
+
+
+const configure = (configuration, service) => {
+
+    const fetchIt = (storage) => {
+
+        // Setup fetching in web workers
+        if (window.Worker) {
+            const workerBaseURL = window.informationProjectorConfig.get('workerBaseURL');
+            const fetchWorkerCode = workerBaseURL + "/generic_fetch_worker.js";
+
+            // Schedule fetch worker
+            const scheduleWorker = new Worker(fetchWorkerCode);
+            const scheduleType = 'Schedule';
+            const scheduleURL = window.informationProjectorConfig.get('scheduleURL');
+            const scheduleFetchInterval = window.informationProjectorConfig.get('scheduleFetchInterval');
+
+            // Configure schedule worker
+            scheduleWorker.postMessage({fetchType: scheduleType,
+                                        fetchURL: scheduleURL,
+                                        fetchInterval: scheduleFetchInterval
+                                       });
+
+            // Obtain schedule results and call back
+            scheduleWorker.onmessage = function(e) {
+                if (e.data.msgType === scheduleType) {
+                    let jsonData = e.data.json;
+
+                    console.info("Got it");
+                    console.info(jsonData);
+
+                    let scheduleData = service.process_data(jsonData);
+                    //let scheduleData = e.data.json;
+
+                    console.info(scheduleData);
+
+                    storage.scheduleData = scheduleData;
+                    console.info("Got it");
+                    console.info(storage);
+                    // update_screen();
+                }
+            };
+
+
+            // Add more workers here
+        } else {
+            console.error("Your browser doesn't support web workers.");
+        }
+
+    };
+
+
+    return fetchIt;
+};
+
+
+export {
+    configure
+};

assets/js/custom/core/generic_fetch_worker.js

@@ -0,0 +1,36 @@
+let fetchType;
+let fetchInterval;
+let fetchURL;
+
+
+onmessage = function(e) {
+    let msgType = e.data.msgType;
+
+    // console.info("Configuration Message:");
+    // console.info(e.data);
+
+    fetchType = e.data.fetchType;
+    fetchURL = e.data.fetchURL;
+    fetchInterval = 1000 * e.data.fetchInterval;
+};
+
+
+function doFetch() {
+    let now = new Date();
+
+    if (fetchURL) {
+        fetch(fetchURL).then(
+            b => b.json()).then(
+                j => postMessage({msgType: fetchType,
+                                  json: j,
+                                  timestamp: now}))
+            .catch(e => console.warn(e.message));
+    }
+}
+
+
+// Periodic resource fetching
+(function periodicFetch() {
+    doFetch();
+    setTimeout(periodicFetch, fetchInterval);
+})();

assets/js/custom/core/mainLoop.js

@@ -0,0 +1,14 @@
+'use strict';
+
+
+
+
+let configure = () => undefined;
+
+
+
+
+
+export {
+    configure
+}

assets/js/custom/core/screen.js

@@ -0,0 +1,28 @@
+'use strict';
+
+
+function configure(service, view) {
+
+    const update_screen = (storage, time, config) => {
+
+        let now = time.now();
+
+        //console.info('Updating Screen with:');
+        //console.info(storage);
+        //console.info(now);
+        //console.info(config);
+
+        view.update_main_slide(
+            storage,
+            now,
+            config);
+    };
+
+
+    return update_screen;
+};
+
+
+export {
+    configure
+}

assets/js/custom/core/time.js

@@ -0,0 +1,86 @@
+'use strict';
+
+// Fake 'now' date time for testing
+const fakeNow = null;
+
+// const fakeNow = Date.parse("2022-09-22T07:30:00");
+
+// const fakeNow = Date.parse("2022-09-22T07:53:50");
+// const fakeNow = Date.parse("2022-09-22T07:55:00");
+// const fakeNow = Date.parse("2022-09-22T07:58:50");
+// const fakeNow = Date.parse("2022-09-22T07:59:50");
+// const fakeNow = Date.parse("2022-09-22T08:00:00");
+
+// const fakeNow = Date.parse("2022-09-22T08:48:50");
+// const fakeNow = Date.parse("2022-09-22T08:49:50");
+// const fakeNow = Date.parse("2022-09-22T08:50:50");
+// const fakeNow = Date.parse("2022-09-22T08:51:50");
+// const fakeNow = Date.parse("2022-09-22T08:53:50");
+// const fakeNow = Date.parse("2022-09-22T08:58:50");
+// const fakeNow = Date.parse("2022-09-22T08:59:50");
+// const fakeNow = Date.parse("2022-09-22T09:00:00");
+// const fakeNow = Date.parse("2022-09-22T09:00:50");
+// const fakeNow = Date.parse("2022-09-22T09:01:50");
+
+// const fakeNow = Date.parse("2022-09-22T09:15:00");
+
+// const fakeNow = Date.parse("2022-09-22T10:00:00");
+
+// const fakeNow = Date.parse("2022-09-22T10:38:50");
+// const fakeNow = Date.parse("2022-09-22T10:40:00");
+// const fakeNow = Date.parse("2022-09-22T10:33:00");
+// const fakeNow = Date.parse("2022-09-22T10:37:00");
+// const fakeNow = Date.parse("2022-09-22T10:39:00");
+// const fakeNow = Date.parse("2022-09-22T10:59:50");
+// const fakeNow = Date.parse("2022-09-22T11:03:00");
+// const fakeNow = Date.parse("2022-09-22T11:03:50");
+// const fakeNow = Date.parse("2022-09-22T11:04:50");
+
+// const fakeNow = Date.parse("2022-09-22T11:08:50");
+// const fakeNow = Date.parse("2022-09-22T11:09:50");
+// const fakeNow = Date.parse("2022-09-22T11:10:00");
+
+// const fakeNow = Date.parse("2022-09-22T11:40:00");
+
+// const fakeNow = Date.parse("2022-09-22T12:10:00");
+
+// const fakeNow = Date.parse("2022-09-22T12:38:50");
+// const fakeNow = Date.parse("2022-09-22T12:40:00");
+// const fakeNow = Date.parse("2022-09-22T13:48:50");
+// const fakeNow = Date.parse("2022-09-22T13:53:50");
+// const fakeNow = Date.parse("2022-09-22T14:00:00");
+
+// const fakeNow = Date.parse("2022-09-22T14:30:00");
+
+// const fakeNow = Date.parse("2022-09-22T14:53:50");
+// const fakeNow = Date.parse("2022-09-22T15:00:00");
+
+// const fakeNow = Date.parse("2022-09-22T15:45:00");
+
+// const fakeNow = Date.parse("2022-09-22T16:15:00");
+
+// const fakeNow = Date.parse("2022-09-22T16:45:00");
+
+// const fakeNow = Date.parse("2022-09-22T16:58:50");
+// const fakeNow = Date.parse("2022-09-22T17:00:00");
+// const fakeNow = Date.parse("2022-09-22T17:01:00");
+// const fakeNow = Date.parse("2022-09-22T19:48:50");
+// const fakeNow = Date.parse("2022-09-22T19:49:50");
+// const fakeNow = Date.parse("2022-09-22T19:58:50");
+// const fakeNow = Date.parse("2022-09-22T20:00:00");
+// const fakeNow = Date.parse("2022-09-22T20:02:00");
+
+
+const fakeTimeDelta = fakeNow === null ? 0 : fakeNow - Date.now();
+
+
+// Real 'now' date time for production
+const nowJS = () => Date.now() + fakeTimeDelta;
+
+// Real 'now' date time for production as luxon DateTime object
+const now = () => luxon.DateTime.fromMillis(nowJS());
+
+
+export {
+    now
+}

assets/js/custom/dom/clock.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const html = htm.bind(preact.h);
+
+
+const update_main_slide = (data, time, config) => {
+    const hour = time.toFormat('HH');
+    const minute = time.toFormat('mm');
+    const sep = time.second % 2 === 0 ? ':' : '.';
+
+    const inner = html`<div class="clock">${hour}${sep}${minute}</div>`;
+
+    const anchorElId = "clock";
+    const el = document.getElementById(anchorElId);
+    preact.render(inner, el);
+};
+
+
+export {
+    update_main_slide
+};

assets/js/custom/dom/schedule.js

@@ -0,0 +1,145 @@
+'use strict';
+
+import * as sol from "../../solight/sol.js";
+
+import * as serv from "../services/general.js";
+
+
+const html = htm.bind(preact.h);
+
+const dt = luxon.Duration.fromObject({minutes: 10});
+
+const max_events = 5;
+
+const title_string = 'Program:';
+
+const local_room = 'Here';
+
+const this_room = (config) => sol.optional(config.roomName);
+
+
+const is_stale = (event, time) =>
+      !sol.isFutureEvent(event, time);
+
+const is_lapse = (event, time) =>
+      serv.is_soon(sol.eventStartDate(event).plus(dt), time, 5);
+
+const stale_class = (event, time) => is_stale(event, time) ? 'stale' : '';
+
+const lapse_class = (event, time) => is_lapse(event, time) ? 'lapse' : '';
+
+
+const this_location = (config) => {
+    const here = this_room(config);
+    return sol.defined(here) ? html`@${here}` : html``;
+};
+
+
+const schedule_table_header = () =>
+    html`
+    <div class="schedule">
+      <div class="title">${title_string}</div>
+    </div>`;
+
+
+const event_time = (event, time) => {
+    const esd = sol.eventStartDate(event);
+    const timeString = esd.setLocale('de').toLocaleString(luxon.DateTime.TIME_24_SIMPLE);
+    return html`<div class="event-time ${stale_class(event, time)}">${timeString}</div>`;
+};
+
+
+const event_location = (event, config) => {
+    const here_room = this_room(config);
+    const event_room = sol.eventRoomName(event);
+
+    let inner;
+    if (sol.defined(here_room) && (event_room === here_room)) {
+        inner = html`<div class="event-location this-room">${local_room}</div>`;
+    } else {
+        inner = html`<div class="event-location">${event_room}</div>`;
+    }
+    return inner;
+};
+
+
+const event_title = (event, time) => {
+    const title = serv.fix_dash(sol.eventTitle(event));
+    return html`<div class="event-title ${stale_class(event, time)}">${title}</div>`;
+};
+
+
+const event_speaker = (event, time) => {
+    const speaker = serv.fix_dash(serv.person_names_concat(sol.eventPersons(event)));
+    return html`<div class="event-speaker ${stale_class(event, time)}">${speaker}</div>`;
+};
+
+
+const schedule_table_event = (event, time, config) => {
+    const ti = serv.type_index(sol.eventType(event));
+    return html`
+    <div class="event ${lapse_class(event, time)}">
+      ${event_time(event, time)}
+      <div class="event-info type-${ti}">
+        ${event_title(event, time)}
+        ${event_speaker(event, time)}
+      </div>
+    </div>`;
+};
+
+
+const schedule_table_events = (events, time, config) =>
+    html`
+    <div class="events">
+      ${events.map(e => schedule_table_event(e, time, config))}
+    </div>`;
+
+
+const schedule_table = (events, time, config) =>
+    html`
+    ${schedule_table_header()}
+    ${schedule_table_events(events, time, config)}`;
+
+
+const header = (config) =>
+    html`<div class="room-location">${this_location(config)}</div>`;
+
+
+const update_main_slide = (data, time, config) => {
+    // console.group("Updating Main Slide with:");
+    // console.info(data);
+    // console.info(time);
+    // console.info(config);
+    // console.groupEnd();
+
+    if (sol.defined(data.scheduleData)) {
+        const schedule = data.scheduleData;
+
+        const events = sol.allEvents(schedule);
+
+        const startedEvents = sol.startedEvents(events, time, dt);
+        const futureEvents = sol.futureEvents(events, time);
+
+        const upcomingEvents = sol.distinctEvents(startedEvents.concat(futureEvents));
+        const upcomingEventsSorted = sol.sortEventsByStartDate(upcomingEvents);
+
+        const nextEvents = upcomingEventsSorted.slice(0, max_events);
+
+        // Assemble dom
+        const inner = html`
+        <div class="slide">
+          ${header(config)}
+          ${schedule_table(nextEvents, time, config)}
+        </div>`;
+
+        // Add main slide to frame
+        const anchorElId = "main";
+        const el = document.getElementById(anchorElId);
+        preact.render(inner, el);
+    };
+};
+
+
+export {
+    update_main_slide
+};

assets/js/custom/dom/speaker-info.js

@@ -0,0 +1,51 @@
+'use strict';
+
+import * as sol from "../../solight/sol.js";
+
+import * as serv from "../services/general.js";
+
+
+const html = htm.bind(preact.h);
+
+
+const event_info = (event) => {
+    const ti = serv.type_index(sol.eventType(event));
+    return html`
+    <div class="speaker-box type-${ti}">
+      <div class="speaker">
+        <div class="names">${serv.fix_dash(serv.person_names_concat(sol.eventPersons(event)))}</div>
+      </div>
+    </div>`;
+};
+
+
+const update_main_slide = (data, time, config) => {
+    // console.group("Updating Main Slide with:");
+    // console.info(data);
+    // console.info(time);
+    // console.info(config);
+    // console.groupEnd();
+
+    if (sol.defined(data.scheduleData)) {
+        const schedule = data.scheduleData;
+
+        const thisRoom = config.roomName;
+
+        const events = sol.allEvents(schedule);
+        const eventsHere = sol.eventsByRoomName(events, thisRoom);
+        const eventsHereNow = sol.currentEvents(eventsHere, time);
+
+        const inner = html`
+        ${eventsHereNow.slice(0,1).map(e => event_info(e))}`;
+
+        // Add main slide to frame
+        const anchorElId = "main";
+        const el = document.getElementById(anchorElId);
+        preact.render(inner, el);
+    };
+};
+
+
+export {
+    update_main_slide
+};

assets/js/custom/dom/talk-info.js

@@ -0,0 +1,54 @@
+'use strict';
+
+import * as sol from "../../solight/sol.js";
+
+import * as serv from "../services/general.js";
+
+
+const html = htm.bind(preact.h);
+
+
+const event_info = (event) => {
+    const title = serv.fix_dash(sol.eventTitle(event));
+    const names = serv.fix_dash(serv.person_names_concat(sol.eventPersons(event)));
+    const ti = serv.type_index(sol.eventType(event));
+    return html`
+    <div class="talk-box type-${ti}">
+      <div class="talk">
+        <div class="title">${title}</div>
+        <div class="names">${names}</div>
+      </div>
+    </div>`;
+};
+
+
+const update_main_slide = (data, time, config) => {
+    // console.group("Updating Main Slide with:");
+    // console.info(data);
+    // console.info(time);
+    // console.info(config);
+    // console.groupEnd();
+
+    if (sol.defined(data.scheduleData)) {
+        const schedule = data.scheduleData;
+
+        const thisRoom = config.roomName;
+
+        const events = sol.allEvents(schedule);
+        const eventsHere = sol.eventsByRoomName(events, thisRoom);
+        const eventsHereNow = sol.currentEvents(eventsHere, time);
+
+        const inner = html`
+        ${eventsHereNow.slice(0,1).map(e => event_info(e))}`;
+
+        // Add main slide to frame
+        const anchorElId = "main";
+        const el = document.getElementById(anchorElId);
+        preact.render(inner, el);
+    };
+};
+
+
+export {
+    update_main_slide
+};

assets/js/custom/dom/upcoming-talk.js

@@ -0,0 +1,139 @@
+'use strict';
+
+import * as sol from "../../solight/sol.js";
+
+import * as serv from "../services/general.js";
+import * as tiserv from "../services/timeText.js";
+
+
+const html = htm.bind(preact.h);
+
+const minBioLength = 20;
+
+const event_persons = (persons) =>
+    html`<div class="speakers">${serv.fix_dash(serv.person_names_concat(persons))}:</div>`;
+
+
+const event_remaining_time_abs_rel = (event, time) => {
+    const dt = luxon.Duration.fromObject({minutes: 11});
+    return sol.isEndingEvent(event, time, dt) ?
+        tiserv.event_relative_end_time_string(event, time) :
+        tiserv.event_absolute_end_time_string(event, time);
+};
+
+const event_time_abs_rel = (event, time) =>
+      sol.isFutureEvent(event, time) ?
+      tiserv.event_relative_fuzzy_start_time_string(event, time) :
+      event_remaining_time_abs_rel(event, time);
+
+const event_time = (event, time) => {
+    const ti = serv.type_index(sol.eventType(event));
+    const timestr = ti !== 0 ?
+          tiserv.event_relative_fuzzy_start_time_string(event, time) :
+          event_time_abs_rel(event, time);
+    return html`<div class="starttime">${timestr}</div>`;
+};
+
+const event_meta = (event, time) =>
+    html`
+    <div class="event-meta">
+      ${event_persons(sol.eventPersons(event))}
+      <div class="title">${serv.fix_dash(sol.eventTitle(event))}</div>
+      <div class="subtitle">${sol.eventSubtitle(event)}</div>
+      ${event_time(event, time)}
+    </div>`;
+
+const event_description = (event) => {
+    const description = sol.eventAbstract(event);
+    const abstract = sol.eventAbstract(event);
+
+    const atext = sol.defined(abstract) ? abstract : "";
+    const dtext = sol.defined(description) ? description : "";
+
+    const text = atext.length >= dtext.length ? atext : dtext;
+
+    return html`
+    <div class="event-description">
+      <div class="event-description-title">Description:</div>
+      <div class="event-description-text" lang="en">${text}</div>
+    </div>`;
+};
+
+const event_content = (event) =>
+    html`<div class="event-content">${event_description(event)}</div>`;
+
+const speaker_info = (speaker) => {
+    const name = serv.fix_dash(sol.personName(speaker));
+    const bio = sol.personBiography(speaker);
+
+    let inner;
+    if (sol.defined(bio) && bio.length >= minBioLength) {
+        inner = html`
+        <div class="speaker-info">
+          <div class="speaker-name">${name}</div>
+          <div class="speaker-bio" lang="en">${bio}</div>
+        </div>`;
+    } else {
+        inner = html``;
+    }
+    return inner;
+};
+
+const speaker_meta = (event) => {
+    const speakers = sol.eventPersons(event);
+    return html`<div class="speaker-meta">${speakers.map(s => speaker_info(s))}</div>`;
+};
+
+const event_info = (event, time) => {
+    const ti = serv.type_index(sol.eventType(event));
+    return html`
+    <div class="upper type-${ti}">
+      ${event_meta(event, time)}
+    </div>
+    <div class="lower type-${ti}">
+      ${event_content(event)}
+      ${speaker_meta(event)}
+    </div>`;
+};
+
+
+const update_main_slide = (data, time, config) => {
+    // console.group("Updating Main Slide with:");
+    // console.info(data);
+    // console.info(time);
+    // console.info(config);
+    // console.groupEnd();
+
+    if (sol.defined(data.scheduleData)) {
+        const schedule = data.scheduleData;
+
+        const thisRoom = config.roomName;
+
+        const dt = luxon.Duration.fromObject({minutes: 6});
+
+        const events = sol.allEvents(schedule);
+        const eventsSorted = sol.sortEventsByStartDate(events);
+        const eventsHere = sol.eventsByRoomName(eventsSorted, thisRoom);
+        const startingEventsHere = sol.startingEvents(eventsHere, time, dt);
+        const currentEventsHere = sol.currentEvents(eventsHere, time);
+        const endedEventsHere = sol.endedEvents(eventsHere, time, dt);
+
+        const upcomingEventsHere = sol.distinctEvents(startingEventsHere.concat(currentEventsHere, endedEventsHere));
+
+        // Assemble dom
+        const inner = html`
+        <div class="slide">
+        ${upcomingEventsHere.slice(0,1).map(e => event_info(e, time))}
+        </div>`;
+
+        // Add main slide to frame
+        const anchorElId = "main";
+        const el = document.getElementById(anchorElId);
+        preact.render(inner, el);
+    };
+};
+
+
+export {
+    update_main_slide
+};

assets/js/custom/dom/voc-schedule.js

@@ -0,0 +1,97 @@
+'use strict';
+
+import * as sol from "../../solight/sol.js";
+
+import * as serv from "../services/general.js";
+
+const html = htm.bind(preact.h);
+
+
+const schedule_persons = (persons) =>
+    html`${persons.map(p => sol.personName(p)).join(', ')}`;
+
+const schedule_time = (event) =>
+    html`${sol.eventStartDate(event).toFormat('HH:mm')} - ${sol.eventEndDate(event).toFormat('HH:mm')}`;
+
+const schedule_event = (event) => {
+    const dnrString = sol.eventDoNotRecord(event) ? 'True' : '-';
+    return html`
+    <tr>
+      <td>${sol.eventTitle(event).slice(0, 20)}</td>
+      <td>${schedule_persons(sol.eventPersons(event))}</td>
+      <td>${sol.eventPersonCount(event)}</td>
+      <td>${sol.eventType(event)}</td>
+      <td>${schedule_time(event)}</td>
+      <td>${dnrString}</td>
+    </tr>`;
+};
+
+const schedule_room = (events, room) => {
+    const rn = sol.roomName(room);
+    const evs = sol.eventsByRoomName(events, rn);
+    const evss = sol.sortEventsByStartDate(evs);
+
+    return html`
+    <h3>Room: ${rn}</h3>
+    <table>
+      <tr>
+        <th>Title</th>
+        <th>Speakers</th>
+        <th>#Speakers</th>
+        <th>Type</th>
+        <th>Time</th>
+        <th>DNR</th>
+      </tr>
+      ${evss.map(e => schedule_event(e))}
+    </table>`;
+};
+
+const schedule_day = (con, events, rooms, day) => {
+    const dt = sol.dayStartDate(day);
+    const di = sol.dayIndex(day);
+
+    const evs = sol.eventsByDayIndex(events, di);
+    const rms = sol.roomsByDayIndex(con, rooms, di);
+
+    return html`
+    <h2>Day ${di}: ${dt.setLocale('de-DE').toFormat('EEEE')}</h2>
+    ${rms.map(r => schedule_room(evs, r))}`;
+};
+
+const schedule_table = (schedule) => {
+    const con = sol.conference(schedule);
+
+    const days = sol.allDays(schedule);
+    const events = sol.allEvents(schedule);
+    const rooms = sol.allRooms(schedule);
+
+    return html`
+    <h1>Schedule (v ${sol.scheduleVersion(schedule)})</h1>
+    ${days.map(d => schedule_day(con, events, rooms, d))}`;
+};
+
+
+const update_main_slide = (data, time, config) => {
+    // console.group("Updating Main Slide with:");
+    // console.info(data);
+    // console.info(time);
+    // console.info(config);
+    // console.groupEnd();
+
+    if (sol.defined(data.scheduleData)) {
+        const schedule = data.scheduleData;
+
+        const inner = html`
+        ${schedule_table(schedule)}`;
+
+        // Add main slide to frame
+        const anchorElId = "main";
+        const el = document.getElementById(anchorElId);
+        preact.render(inner, el);
+    };
+};
+
+
+export {
+    update_main_slide
+};

assets/js/custom/dom/voc-speaker.js

@@ -0,0 +1,63 @@
+'use strict';
+
+import * as sol from "../../solight/sol.js";
+
+import * as serv from "../services/general.js";
+
+
+const html = htm.bind(preact.h);
+
+
+const person_row = (events, person) =>
+    html`
+    <tr>
+      <td>${sol.personName(person)}</td>
+    </tr>`;
+
+
+const persons_table = (events, persons) => {
+    const ps = sol.sortPersonsByName(persons);
+    return html`
+    <h2>Speakers</h2>
+    <table>
+      <tr>
+        <th>Name</th>
+      </tr>
+      ${ps.map(p => person_row(events, p))}
+    </table>`;
+};
+
+
+const persons_overview = (schedule) => {
+    const persons = sol.allPersons(schedule);
+    const events = sol.allEvents(schedule);
+    return html`
+    <h1>Schedule (v ${sol.scheduleVersion(schedule)})</h1>
+    ${persons_table(events, persons)}`;
+};
+
+
+const update_main_slide = (data, time, config) => {
+    // console.group("Updating Main Slide with:");
+    // console.info(data);
+    // console.info(time);
+    // console.info(config);
+    // console.groupEnd();
+
+    if (sol.defined(data.scheduleData)) {
+        const schedule = data.scheduleData;
+
+        const inner = html`
+        ${persons_overview(schedule)}`;
+
+        // Add main slide to frame
+        const anchorElId = "main";
+        const el = document.getElementById(anchorElId);
+        preact.render(inner, el);
+    };
+};
+
+
+export {
+    update_main_slide
+};

assets/js/custom/dom/voc-talks.js

@@ -0,0 +1,71 @@
+'use strict';
+
+import * as sol from "../../solight/sol.js";
+
+import * as serv from "../services/general.js";
+
+
+const html = htm.bind(preact.h);
+
+
+const speaker = (event) => {
+    const speaker = sol.eventPersons(event);
+    const names = speaker.map(s => sol.personName(s)).join(", ");
+    return html`${names}`;
+};
+
+
+const event_row = (event) =>
+    html`
+    <tr>
+      <td>${sol.eventTitle(event)}</td>
+      <td>${speaker(event)}</td>
+    </tr>`;
+
+
+const talks_table = (events) => {
+    const evs = sol.sortEventsByStartDate(events);
+    return html`
+    <h2>Talks</h2>
+    <table>
+      <tr>
+        <th>Title</th>
+        <th>Speakers</th>
+      </tr>
+      ${evs.map(e => event_row(e))}
+    </table>`;
+};
+
+
+const talks_overview = (schedule) => {
+    const events = sol.allEvents(schedule);
+    return html`
+    <h1>Schedule (v ${sol.scheduleVersion(schedule)})</h1>
+    ${talks_table(events)}`;
+};
+
+
+const update_main_slide = (data, time, config) => {
+    // console.group("Updating Main Slide with:");
+    // console.info(data);
+    // console.info(time);
+    // console.info(config);
+    // console.groupEnd();
+
+    if (sol.defined(data.scheduleData)) {
+        const schedule = data.scheduleData;
+
+        const inner = html`
+        ${talks_overview(schedule)}`;
+
+        // Add main slide to frame
+        const anchorElId = "main";
+        const el = document.getElementById(anchorElId);
+        preact.render(inner, el);
+    };
+};
+
+
+export {
+    update_main_slide
+};

assets/js/custom/nodes/schedule-aula.js

@@ -0,0 +1,49 @@
+'use strict';
+
+
+import * as fe from "../core/fetcher.js";
+
+import * as ti from "../core/time.js";
+
+import * as sc from "../core/screen.js";
+
+// Import services
+import * as serv from "../services/general.js";
+
+// Import views
+import * as dom from "../dom/schedule.js";
+import * as clk from "../dom/clock.js";
+
+
+// Empty JSON lists for data
+let storage = {
+    scheduleData: undefined
+};
+
+
+let do_fetch = fe.configure({}, serv);
+
+do_fetch(storage);
+
+
+
+// Main Loop
+let screen_update = sc.configure(serv, dom);
+let clock_update = sc.configure(serv, clk);
+
+
+let cfg = {
+    "roomName": "Aula",
+};
+
+
+// Just do it
+function main_loop() {
+    screen_update(storage, ti, cfg);
+    clock_update(storage, ti, cfg);
+    // update_screen();
+    // setTimeout(main_loop, 1 * 1000);
+    setTimeout(main_loop, 1 * 50);
+};
+
+main_loop();

assets/js/custom/nodes/schedule.js

@@ -0,0 +1,48 @@
+'use strict';
+
+
+import * as fe from "../core/fetcher.js";
+
+import * as ti from "../core/time.js";
+
+import * as sc from "../core/screen.js";
+
+// Import services
+import * as serv from "../services/general.js";
+
+// Import views
+import * as dom from "../dom/schedule.js";
+import * as clk from "../dom/clock.js";
+
+
+// Empty JSON lists for data
+let storage = {
+    scheduleData: undefined
+};
+
+
+let do_fetch = fe.configure({}, serv);
+
+do_fetch(storage);
+
+
+
+// Main Loop
+let screen_update = sc.configure(serv, dom);
+let clock_update = sc.configure(serv, clk);
+
+
+let cfg = {
+};
+
+
+// Just do it
+function main_loop() {
+    screen_update(storage, ti, cfg);
+    clock_update(storage, ti, cfg);
+    // update_screen();
+    // setTimeout(main_loop, 1 * 1000);
+    setTimeout(main_loop, 1 * 50);
+};
+
+main_loop();

assets/js/custom/nodes/speaker-info-aula.js

@@ -0,0 +1,42 @@
+'use strict';
+
+
+import * as fe from "../core/fetcher.js";
+
+import * as ti from "../core/time.js";
+
+import * as sc from "../core/screen.js";
+
+// Import services
+import * as serv from "../services/general.js";
+
+// Import views
+import * as dom from "../dom/speaker-info.js";
+
+
+// Empty JSON lists for data
+let storage = {
+    scheduleData: undefined
+};
+
+let cfg = {
+    "roomName": "Aula"
+};
+
+
+
+let do_fetch = fe.configure({}, serv);
+
+do_fetch(storage);
+
+
+// Main Loop
+let screen_update = sc.configure(serv, dom);
+
+// Just do it
+function main_loop() {
+    screen_update(storage, ti, cfg);
+    setTimeout(main_loop, 1 * 1000);
+};
+
+main_loop();

assets/js/custom/nodes/talk-info-aula.js

@@ -0,0 +1,42 @@
+'use strict';
+
+
+import * as fe from "../core/fetcher.js";
+
+import * as ti from "../core/time.js";
+
+import * as sc from "../core/screen.js";
+
+// Import services
+import * as serv from "../services/general.js";
+
+// Import views
+import * as dom from "../dom/talk-info.js";
+
+
+// Empty JSON lists for data
+let storage = {
+    scheduleData: undefined
+};
+
+let cfg = {
+    "roomName": "Aula"
+};
+
+
+
+let do_fetch = fe.configure({}, serv);
+
+do_fetch(storage);
+
+
+// Main Loop
+let screen_update = sc.configure(serv, dom);
+
+// Just do it
+function main_loop() {
+    screen_update(storage, ti, cfg);
+    setTimeout(main_loop, 1 * 1000);
+};
+
+main_loop();

assets/js/custom/nodes/upcoming-talk-aula.js

@@ -0,0 +1,42 @@
+'use strict';
+
+
+import * as fe from "../core/fetcher.js";
+
+import * as ti from "../core/time.js";
+
+import * as sc from "../core/screen.js";
+
+// Import services
+import * as serv from "../services/general.js";
+
+// Import views
+import * as dom from "../dom/upcoming-talk.js";
+
+
+// Empty JSON lists for data
+let storage = {
+    scheduleData: undefined
+};
+
+let cfg = {
+    "roomName": "Aula",
+};
+
+
+
+let do_fetch = fe.configure({}, serv);
+
+do_fetch(storage);
+
+
+// Main Loop
+let screen_update = sc.configure(serv, dom);
+
+// Just do it
+function main_loop() {
+    screen_update(storage, ti, cfg);
+    setTimeout(main_loop, 1 * 500);
+};
+
+main_loop();

assets/js/custom/nodes/voc-schedule.js

@@ -0,0 +1,43 @@
+'use strict';
+
+
+import * as fe from "../core/fetcher.js";
+
+import * as ti from "../core/time.js";
+
+import * as sc from "../core/screen.js";
+
+// Import services
+import * as serv from "../services/general.js";
+
+// Import views
+import * as domman from "../dom/voc-schedule.js";
+
+
+// Empty JSON lists for data
+let storage = {
+    scheduleData: undefined
+};
+
+
+let do_fetch = fe.configure({}, serv);
+
+do_fetch(storage);
+
+
+// Main Loop
+let screen_update = sc.configure(serv ,domman);
+
+
+let cfg = {
+};
+
+
+// Just do it
+function main_loop() {
+    screen_update(storage, ti, cfg);
+    // update_screen();
+    setTimeout(main_loop, 10 * 100);
+};
+
+main_loop();

assets/js/custom/nodes/voc-speaker.js

@@ -0,0 +1,43 @@
+'use strict';
+
+
+import * as fe from "../core/fetcher.js";
+
+import * as ti from "../core/time.js";
+
+import * as sc from "../core/screen.js";
+
+// Import services
+import * as serv from "../services/general.js";
+
+// Import views
+import * as domman from "../dom/voc-speaker.js";
+
+
+// Empty JSON lists for data
+let storage = {
+    scheduleData: undefined
+};
+
+
+let do_fetch = fe.configure({}, serv);
+
+do_fetch(storage);
+
+
+// Main Loop
+let screen_update = sc.configure(serv ,domman);
+
+
+let cfg = {
+};
+
+
+// Just do it
+function main_loop() {
+    screen_update(storage, ti, cfg);
+    // update_screen();
+    setTimeout(main_loop, 10 * 100);
+};
+
+main_loop();

assets/js/custom/nodes/voc-talks.js

@@ -0,0 +1,43 @@
+'use strict';
+
+
+import * as fe from "../core/fetcher.js";
+
+import * as ti from "../core/time.js";
+
+import * as sc from "../core/screen.js";
+
+// Import services
+import * as serv from "../services/general.js";
+
+// Import views
+import * as domman from "../dom/voc-talks.js";
+
+
+// Empty JSON lists for data
+let storage = {
+    scheduleData: undefined
+};
+
+
+let do_fetch = fe.configure({}, serv);
+
+do_fetch(storage);
+
+
+// Main Loop
+let screen_update = sc.configure(serv ,domman);
+
+
+let cfg = {
+};
+
+
+// Just do it
+function main_loop() {
+    screen_update(storage, ti, cfg);
+    // update_screen();
+    setTimeout(main_loop, 10 * 100);
+};
+
+main_loop();

assets/js/custom/services/general.js

@@ -0,0 +1,57 @@
+'use strict';
+
+import * as sol from "../../solight/sol.js";
+
+
+const process_data = (scheduleFile) =>
+      sol.processScheduleFile(scheduleFile);
+
+
+const trackIndexMap = new Map([
+    ['Main', 0]]);
+
+const track_index = (track) =>
+      trackIndexMap.get(track);
+
+
+const typeIndexMap = new Map([
+    ["Organization", 0],
+    ["Moderation", 1],
+    ["Talk", 2]]);
+
+const type_index = (type) =>
+      typeIndexMap.get(type);
+
+
+const person_names_concat = (persons) =>
+      // persons.map(p => sol.personName(p)).join(', ');
+      // persons.map(p => sol.personName(p)).join(' & ');
+      persons.map(p => sol.personName(p)).join(' · ');
+
+
+const ndash_fix_regexp = RegExp('\\s+-\\s+');
+const ndash_fix_replacement = ' – ';
+
+const fix_dash = (string) =>
+      string.replace(ndash_fix_regexp, ndash_fix_replacement);
+
+
+const is_soon = (then, now, dt) => {
+    const delta = then.toMillis() - now.toMillis();
+    return delta >= 0 && delta <= dt * 1000;
+};
+
+const is_recent = (then, now, dt) => {
+    const delta = now.toMillis() - then.toMillis();
+    return delta >= 0 && delta <= dt * 1000;
+};
+
+export {
+    process_data,
+    track_index,
+    type_index,
+    person_names_concat,
+    fix_dash,
+    is_soon,
+    is_recent
+}

assets/js/custom/services/timeText.js

@@ -0,0 +1,108 @@
+'use strict';
+
+import * as sol from "../../solight/sol.js";
+
+
+const nowString = 'Now';
+
+const absStartingString = 'Starting ';
+const absStartedString = 'Since ';
+const absEndingString = 'Until ';
+const absEndedString = 'Ended ';
+
+const relStartingString = 'Starts ';
+const relStartedString = 'Started ';
+const relEndingString = 'Ends ';
+const relEndedString = 'Ended ';
+
+const fuzzyMinutes = 1;
+
+const nowish_interval = (time) =>
+      luxon.Interval.fromDateTimes(time.minus({minutes: fuzzyMinutes}), time.plus({minutes: fuzzyMinutes}));
+
+const time_relative_string = (then, now) =>
+      then.setLocale('en').toRelative({base: now, unit: 'minutes'});
+
+const start_relative_praefix_string = (event, time) =>
+      sol.isFutureEvent(event, time) ? relStartingString : relStartedString;
+
+const end_relative_praefix_string = (event, time) =>
+      sol.isPastEvent(event, time) ? relEndedString : relEndingString;
+
+const event_relative_start_time_string = (event, time) => {
+    const esd = sol.eventStartDate(event);
+    const startString = start_relative_praefix_string(event, time);
+    return startString.concat(time_relative_string(esd, time));
+};
+
+const event_relative_end_time_string = (event, time) => {
+    const eed = sol.eventEndDate(event);
+    const endString = end_relative_praefix_string(event, time);
+    return endString.concat(time_relative_string(eed, time));
+};
+
+const event_relative_fuzzy_start_time_string = (event, time) => {
+    const esd = sol.eventStartDate(event);
+    const startString = start_relative_praefix_string(event, time);
+    return nowish_interval(esd).contains(time) ?
+        nowString :
+        startString.concat(time_relative_string(esd, time));
+};
+
+const event_relative_fuzzy_end_time_string = (event, time) => {
+    const eed = sol.eventEndDate(event);
+    const endString = end_relative_praefix_string(event, time);
+    return nowish_interval(eed).contains(time) ?
+        nowString :
+        endString.concat(time_relative_string(eed, time));
+};
+
+
+const time_absolute_string = (time) =>
+      time.setLocale('en').toLocaleString({hour: '2-digit', minute: '2-digit', hourCycle: 'h23'});
+
+const start_absolute_praefix_string = (event, time) =>
+      sol.isFutureEvent(event, time) ? absStartingString : absStartedString;
+
+const end_absolute_praefix_string = (event, time) =>
+      sol.isPastEvent(event, time) ? absEndedString : absEndingString;
+
+const event_absolute_start_time_string = (event, time) => {
+    const esd = sol.eventStartDate(event);
+    const startString = start_absolute_praefix_string(event, time);
+    return startString.concat(time_absolute_string(esd));
+};
+
+const event_absolute_end_time_string = (event, time) => {
+    const eed = sol.eventEndDate(event);
+    const endString = end_absolute_praefix_string(event, time);
+    return endString.concat(time_absolute_string(eed));
+};
+
+const event_absolute_fuzzy_start_time_string = (event, time) => {
+    const esd = sol.eventStartDate(event);
+    const startString = start_absolute_praefix_string(event, time);
+    return nowish_interval(esd).contains(time) ?
+        nowString :
+        startString.concat(time_absolute_string(esd));
+};
+
+const event_absolute_fuzzy_end_time_string = (event, time) => {
+    const eed = sol.eventEndDate(event);
+    const endString = end_absolute_praefix_string(event, time);
+    return nowish_interval(eed).contains(time) ?
+        nowString :
+        endString.concat(time_absolute_string(eed));
+};
+
+
+export {
+    event_relative_start_time_string,
+    event_relative_end_time_string,
+    event_relative_fuzzy_start_time_string,
+    event_relative_fuzzy_end_time_string,
+    event_absolute_start_time_string,
+    event_absolute_end_time_string,
+    event_absolute_fuzzy_start_time_string,
+    event_absolute_fuzzy_end_time_string
+}

assets/js/htm/htm.d.ts

@@ -0,0 +1,6 @@
+declare const htm: {
+  bind<HResult>(
+    h: (type: any, props: Record<string, any>, ...children: any[]) => HResult
+  ): (strings: TemplateStringsArray, ...values: any[]) => HResult | HResult[];
+};
+export default htm;

assets/js/htm/htm.js

@@ -0,0 +1 @@
+!function(){var n=function(t,e,s,u){var r;e[0]=0;for(var h=1;h<e.length;h++){var p=e[h++],a=e[h]?(e[0]|=p?1:2,s[e[h++]]):e[++h];3===p?u[0]=a:4===p?u[1]=Object.assign(u[1]||{},a):5===p?(u[1]=u[1]||{})[e[++h]]=a:6===p?u[1][e[++h]]+=a+"":p?(r=t.apply(a,n(t,a,s,["",null])),u.push(r),a[0]?e[0]|=2:(e[h-2]=0,e[h]=r)):u.push(a)}return u},t=new Map,e=function(e){var s=t.get(this);return s||(s=new Map,t.set(this,s)),(s=n(this,s.get(e)||(s.set(e,s=function(n){for(var t,e,s=1,u="",r="",h=[0],p=function(n){1===s&&(n||(u=u.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,u):3===s&&(n||u)?(h.push(3,n,u),s=2):2===s&&"..."===u&&n?h.push(4,n,0):2===s&&u&&!n?h.push(5,0,!0,u):s>=5&&((u||!n&&5===s)&&(h.push(s,0,u,e),s=6),n&&(h.push(s,n,0,e),s=6)),u=""},a=0;a<n.length;a++){a&&(1===s&&p(),p(a));for(var o=0;o<n[a].length;o++)t=n[a][o],1===s?"<"===t?(p(),h=[h],s=3):u+=t:4===s?"--"===u&&">"===t?(s=1,u=""):u=t+u[0]:r?t===r?r="":u+=t:'"'===t||"'"===t?r=t:">"===t?(p(),s=1):s&&("="===t?(s=5,e=u,u=""):"/"===t&&(s<5||">"===n[a][o+1])?(p(),3===s&&(h=h[0]),s=h,(h=h[0]).push(2,0,s),s=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),s=2):u+=t),3===s&&"!--"===u&&(s=4,h=h[0])}return p(),h}(e)),s),arguments,[])).length>1?s:s[0]};"undefined"!=typeof module?module.exports=e:self.htm=e}();

assets/js/htm/htm.mjs

@@ -0,0 +1 @@
+var n=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a)}return e},t=new Map;export default function(s){var r=t.get(this);return r||(r=new Map,t.set(this,r)),(r=n(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e=""},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0])}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}

assets/js/htm/htm.module.js

@@ -0,0 +1 @@
+var n=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a)}return e},t=new Map;export default function(s){var r=t.get(this);return r||(r=new Map,t.set(this,r)),(r=n(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e=""},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0])}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}

assets/js/htm/htm.umd.js

@@ -0,0 +1 @@
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.htm=e()}(this,function(){var n=function(e,t,u,s){var r;t[0]=0;for(var p=1;p<t.length;p++){var h=t[p++],o=t[p]?(t[0]|=h?1:2,u[t[p++]]):t[++p];3===h?s[0]=o:4===h?s[1]=Object.assign(s[1]||{},o):5===h?(s[1]=s[1]||{})[t[++p]]=o:6===h?s[1][t[++p]]+=o+"":h?(r=e.apply(o,n(e,o,u,["",null])),s.push(r),o[0]?t[0]|=2:(t[p-2]=0,t[p]=r)):s.push(o)}return s},e=new Map;return function(t){var u=e.get(this);return u||(u=new Map,e.set(this,u)),(u=n(this,u.get(t)||(u.set(t,u=function(n){for(var e,t,u=1,s="",r="",p=[0],h=function(n){1===u&&(n||(s=s.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?p.push(0,n,s):3===u&&(n||s)?(p.push(3,n,s),u=2):2===u&&"..."===s&&n?p.push(4,n,0):2===u&&s&&!n?p.push(5,0,!0,s):u>=5&&((s||!n&&5===u)&&(p.push(u,0,s,t),u=6),n&&(p.push(u,n,0,t),u=6)),s=""},o=0;o<n.length;o++){o&&(1===u&&h(),h(o));for(var f=0;f<n[o].length;f++)e=n[o][f],1===u?"<"===e?(h(),p=[p],u=3):s+=e:4===u?"--"===s&&">"===e?(u=1,s=""):s=e+s[0]:r?e===r?r="":s+=e:'"'===e||"'"===e?r=e:">"===e?(h(),u=1):u&&("="===e?(u=5,t=s,s=""):"/"===e&&(u<5||">"===n[o][f+1])?(h(),3===u&&(p=p[0]),u=p,(p=p[0]).push(2,0,u),u=0):" "===e||"\t"===e||"\n"===e||"\r"===e?(h(),u=2):s+=e),3===u&&"!--"===s&&(u=4,p=p[0])}return h(),p}(t)),u),arguments,[])).length>1?u:u[0]}});

assets/scss/css/custom/core/root_index.scss

@@ -9,7 +9,7 @@ body {
     margin: 0px;
     padding: 0px;
     color: white;
-    background: rgb(80,80,80);
+    background: rgb(16,16,23);
 }
 
 .header {

assets/scss/css/custom/styles/_variables.scss

@@ -2,8 +2,8 @@ $full-width: 1920px;
 $full-height: 1080px;
 
 
-// $color-bg: rgb(54, 54, 54);
-$color-bg: rgb(20, 29, 36);
+$color-bg: rgb(54, 54, 54);
+// $color-bg: rgb(20, 29, 36);
 $color-bg-medium: rgb(74, 74, 74);
 $color-bg-light: rgb(153, 153, 153);