rc3-html-infobeamer/public/main.a208ae05cac995d43ca314...

399 lines
13 KiB
JavaScript
Raw Normal View History

2021-12-24 02:16:26 +01:00
"use strict";
(() => {
2021-12-25 22:19:20 +01:00
// ns-hugo:/home/raoul-web/rc3_2021/html-infobeamer-content/assets/js/services.js
var social_limiter = (tweets, toots) => {
const numberTweets = 20;
let posts = tweets.concat(toots);
let byDate = (fst, snd) => Date.parse(fst.time) - Date.parse(snd.time);
let postsSorted = posts.sort(byDate);
if (postsSorted.length > 0) {
while (postsSorted.length < numberTweets) {
postsSorted = postsSorted.concat(postsSorted);
}
}
postsSorted = postsSorted.reverse().slice(0, numberTweets);
return postsSorted;
};
var tweet_author = (data, tweet) => {
let authorId = tweet.author_id;
let users = data.includes.users;
let author = users.find((item) => item.id === authorId);
let userName = author !== void 0 ? author.username : "NoOne";
return userName;
};
var tweet_profile_image = (data, tweet) => {
const defaultProfileImageUrl = "https://abs.twimg.com/sticky/default_profile_images/default_profile_normal.png";
let authorId = tweet.author_id;
let users = data.includes.users;
let author = users.find((item) => item.id === authorId);
let profileImageUrl = author !== void 0 ? author.profile_image_url : defaultProfileImageUrl;
return profileImageUrl;
};
var tweet_text = (tweet) => tweet.text;
var tweet_time = (tweet) => tweet.created_at;
var twitter_filter = (inputData) => {
let tweets;
inputData.forEach((d) => tweets = d.data.map((t) => {
return {
author: tweet_author(d, t),
image: tweet_profile_image(d, t),
text: tweet_text(t),
time: tweet_time(t),
source: "twitter"
};
}));
return tweets;
};
var toot_author = (toot) => toot.account.username;
var toot_profile_image = (toot) => toot.account.avatar_static;
var toot_text = (toot) => toot.content;
var toot_time = (toot) => toot.created_at;
var html_plainify = (html2) => {
let span = document.createElement("span");
span.innerHTML = html2;
let children = span.querySelectorAll("*");
children.forEach((child) => {
child.textContent += " ";
});
return span.textContent.toString().replace(/ +/g, " ");
};
var mastodon_filter = (idata) => {
let toots;
idata.forEach((d) => {
toots = d.map((t) => {
return {
author: toot_author(t),
image: toot_profile_image(t),
text: html_plainify(toot_text(t)),
time: toot_time(t),
source: "mastodon"
};
});
});
return toots;
};
var schedule_filter = (data) => {
let dataDays = data.schedule.conference.days;
let talksData = dataDays.map((d) => {
let rooms = Object.values(d.rooms);
rooms.flat().forEach((t) => {
t.day = d.index;
});
return rooms;
}).flat(2);
let byDate = (fst, snd) => Date.parse(fst.date) - Date.parse(snd.date);
let talksDataSorted = talksData.sort(byDate);
return talksDataSorted;
};
var future_events = (schedule, datetime) => {
let scheduleFiltered = schedule.filter((e) => Date.parse(e.date) > datetime);
return scheduleFiltered;
};
2021-12-24 23:18:02 +01:00
// ns-hugo:/home/raoul-web/rc3_2021/html-infobeamer-content/assets/js/dom.js
2021-12-24 02:16:26 +01:00
var html = htm.bind(preact.h);
2021-12-25 22:19:20 +01:00
var speaker_names = (talk) => talk.persons.map((p) => p.public_name);
var speaker_dom = (talk) => {
const separator = ", ";
let names = speaker_names(talk);
let inner;
if (names.length > 0) {
let string = names.join(separator);
inner = html`<div class="speaker">${string}:</div>`;
} else {
inner = html``;
}
return inner;
};
var to_minutes = (duration) => {
const timeFormat = "hh:mm";
let dt = moment(duration, timeFormat);
let minutes = 60 * dt.hours() + dt.minutes();
return minutes;
2021-12-25 07:28:56 +01:00
};
2021-12-25 22:19:20 +01:00
var duration_dom = (duration) => {
return html`<span class="duration">${to_minutes(duration)} minutes</span>`;
};
var meta_here_dom = (schedule) => {
2021-12-24 02:16:26 +01:00
let inner = html`${schedule.map((talk) => html`
<div class="talk-here-meta-box">
2021-12-25 22:19:20 +01:00
<div class="speaker">${speaker_dom(talk)}</div>
2021-12-24 02:16:26 +01:00
<div class="title">${talk.title}</div>
<div class="start-duration">
<span class="start">Starting at ${talk.start}</span>
2021-12-25 22:19:20 +01:00
${duration_dom(talk.duration)}
2021-12-24 02:16:26 +01:00
</div>
</div>
`)}`;
return inner;
};
2021-12-25 22:19:20 +01:00
var abstract_text_dom = (talk) => {
const placeHolder = "\xAF_(\u30C4)_/\xAF";
let inner;
if (talk.abstract !== null) {
let lang = talk.language !== void 0 ? talk.language : "en";
inner = html`<div class="text" lang="${lang}">${talk.abstract}</div>`;
} else {
inner = html``;
}
return inner;
};
var track_dom = (talk) => {
let inner;
if (talk.track !== null) {
inner = html`<div class="track">Track: ${talk.track}</div>`;
} else {
inner = html``;
}
return inner;
};
var abstract_here_dom = (schedule) => {
2021-12-24 02:16:26 +01:00
let inner = html``;
schedule.forEach((talk) => {
2021-12-25 07:28:56 +01:00
inner = html`
2021-12-25 22:19:20 +01:00
${abstract_text_dom(talk)}
${track_dom(talk)}`;
2021-12-24 02:16:26 +01:00
});
return inner;
};
2021-12-25 22:19:20 +01:00
var talk_day = (talk) => {
const lut = {
1: "I",
2: "II",
3: "III",
4: "IV"
};
return lut[talk.day];
};
var talk_day_dom = (talk) => html`<span class="day">Day ${talk_day(talk)}</span>`;
var list_all_dom = (schedule) => {
2021-12-24 02:16:26 +01:00
let inner = html`
${schedule.map((talk) => html`
<div class="item">
<div>
<div class="title">${talk.title}</div>
</div>
<div class="details">
<span class="start">${talk.start}</span>
2021-12-25 22:19:20 +01:00
${talk_day_dom(talk)}
2021-12-24 02:16:26 +01:00
<span class="stage">${talk.room}</span>
</div>
</div>`)}`;
return inner;
};
2021-12-25 22:19:20 +01:00
var schedule_dom = (schedule) => {
2021-12-24 02:16:26 +01:00
const here_room = "Chaos-West TV";
const here_number_events = 1;
2021-12-25 22:19:20 +01:00
const all_number_events = 7;
let allTalks = schedule.slice(0, all_number_events);
let nextTalkHere = schedule.filter((i) => i.room === here_room).slice(0, 1);
let nextHereMetaDom = meta_here_dom(nextTalkHere);
let nextHereAbstractDom = abstract_here_dom(nextTalkHere);
let nextAllMetaDom = list_all_dom(allTalks);
2021-12-24 02:16:26 +01:00
let inner = html`
<div class="slide">
<div class="schedule">
<div class="left">
<div class="panel meta">
<div class="header">Next Up Here</div>
<div class="content">${nextHereMetaDom}</div>
</div>
<div class="panel abstract">
<div class="header">Abstract</div>
<div class="content">${nextHereAbstractDom}</div>
</div>
</div>
<div class="right">
<div class="panel list">
<div class="header">Next Up at rC3</div>
<div class="content">${nextAllMetaDom}</div>
</div>
</div>
</div>
</div>`;
return inner;
};
var music_playing_now_dom = (music) => {
let inner = html`
2021-12-25 07:28:56 +01:00
<div class="music-box">
<div class="music">
2021-12-24 02:16:26 +01:00
${music.map((current) => html`
<div class="line1">
<span class="header">Now playing:</span>
<span class="license">(${current.license})</span>
</div>
<div class="line2">
2021-12-24 23:18:02 +01:00
<span class="title">«${current.title}»</span>
<span class="by">by</span>
2021-12-24 02:16:26 +01:00
<span class="artist">${current.artist}</span>
</div>`)}
2021-12-25 07:28:56 +01:00
</div>
2021-12-24 02:16:26 +01:00
</div>`;
return inner;
};
2021-12-25 22:19:20 +01:00
var post_time = (date) => moment(date).format("hh:mm, D. MMMM YYYY");
var social_network_dom = (post) => {
let icon = "";
if (post.source === "twitter") {
icon = "fa-twitter";
} else if (post.source === "mastodon") {
icon = "fa-mastodon";
}
return html`<span class="source fa ${icon}"></span>`;
};
var single_post_dom = (post) => {
2021-12-24 23:18:02 +01:00
let inner = html`
2021-12-25 22:19:20 +01:00
<div class="post slider">
2021-12-24 23:18:02 +01:00
<div class="container">
2021-12-25 22:19:20 +01:00
<img class="profile-image" src="${post.image}"/>
2021-12-24 23:18:02 +01:00
<div class="content">
2021-12-25 22:19:20 +01:00
<div class="meta">
${social_network_dom(post)}
<span class="username">@${post.author}</span>
<span class="time">${post_time(post.time)}</span>
2021-12-25 07:28:56 +01:00
</div>
2021-12-25 22:19:20 +01:00
<div class="text">${post.text}</div>
2021-12-24 23:18:02 +01:00
</div>
</div>
</div>`;
return inner;
};
2021-12-25 22:19:20 +01:00
var social_container_dom = (posts) => {
2021-12-25 07:28:56 +01:00
let inner = html`
2021-12-24 23:18:02 +01:00
<div id="bottom-bar" class="visible bottom-bar">
<div id="ticker-wrap" class="ticker-wrap">
<div class="ticker switcher">
2021-12-25 22:19:20 +01:00
${posts.map((p) => single_post_dom(p))}
2021-12-24 23:18:02 +01:00
</div>
</div>
</div>`;
return inner;
};
2021-12-25 22:19:20 +01:00
var hashtag_dom = () => {
let inner = html`
<div id="hashtags" class="visible hashtags">
<div class="box">
<div class="header">For Questions:</div>
<div class="text">Please use the Hastag <span class="hashtag">#rc3cwtv</span> or join the IRC Channel <span class="irc">#rc3-cwtv</span></div>
</div>
</div>`;
return inner;
};
2021-12-24 02:16:26 +01:00
function update_main_slide(data) {
let schedule = data.schedule;
let music = data.music;
2021-12-25 22:19:20 +01:00
let postings = data.posts;
let scheduleDom = schedule_dom(schedule);
let hashtagDom = hashtag_dom();
2021-12-24 02:16:26 +01:00
let musicDom = music_playing_now_dom(music);
2021-12-25 22:19:20 +01:00
let postingsDom = social_container_dom(postings);
2021-12-24 02:16:26 +01:00
let inner = html`
2021-12-25 22:19:20 +01:00
${scheduleDom}
${hashtagDom}
${musicDom}
${postingsDom}
`;
2021-12-24 02:16:26 +01:00
const anchorElId = "main";
const el = document.getElementById(anchorElId);
preact.render(inner, el);
}
// <stdin>
2021-12-24 23:18:02 +01:00
var scheduleData = [];
var musicData = [];
var twitterData = [];
2021-12-25 07:28:56 +01:00
var mastodonData = [];
2021-12-24 02:16:26 +01:00
if (window.Worker) {
const workerBaseURL = window.infoBeamerConfig.get("workerBaseURL");
2021-12-25 22:19:20 +01:00
const fetchWorkerCode = workerBaseURL + "js/generic_fetch_worker.js";
const scheduleWorker = new Worker(fetchWorkerCode);
const scheduleType = "Schedule";
2021-12-24 02:16:26 +01:00
const scheduleURL = window.infoBeamerConfig.get("scheduleURL");
const scheduleFetchInterval = window.infoBeamerConfig.get("scheduleFetchInterval");
scheduleWorker.postMessage({
2021-12-25 22:19:20 +01:00
fetchType: scheduleType,
fetchURL: scheduleURL,
fetchInterval: scheduleFetchInterval
2021-12-24 02:16:26 +01:00
});
scheduleWorker.onmessage = function(e) {
2021-12-25 22:19:20 +01:00
if (e.data.msgType === scheduleType) {
console.log("Data Message at " + Date());
console.log(e.data);
scheduleData = schedule_filter(e.data.json);
2021-12-24 02:16:26 +01:00
update_screen();
}
};
2021-12-25 22:19:20 +01:00
const musicWorker = new Worker(fetchWorkerCode);
2021-12-24 02:16:26 +01:00
const musicType = "Music";
const musicURL = window.infoBeamerConfig.get("musicURL");
const musicFetchInterval = window.infoBeamerConfig.get("musicFetchInterval");
musicWorker.postMessage({
fetchType: musicType,
fetchURL: musicURL,
fetchInterval: musicFetchInterval
});
musicWorker.onmessage = function(e) {
2021-12-25 22:19:20 +01:00
if (e.data.msgType === musicType) {
console.log("Data Message at " + Date());
console.log(e.data);
2021-12-24 23:18:02 +01:00
musicData = [e.data.json];
2021-12-24 02:16:26 +01:00
update_screen();
}
};
2021-12-25 22:19:20 +01:00
const twitterWorker = new Worker(fetchWorkerCode);
2021-12-24 02:16:26 +01:00
const twitterType = "Twitter";
const twitterURL = window.infoBeamerConfig.get("twitterURL");
const twitterFetchInterval = window.infoBeamerConfig.get("twitterFetchInterval");
twitterWorker.postMessage({
fetchType: twitterType,
fetchURL: twitterURL,
fetchInterval: twitterFetchInterval
});
twitterWorker.onmessage = function(e) {
2021-12-25 22:19:20 +01:00
if (e.data.msgType === twitterType) {
console.log("Data Message at " + Date());
console.log(e.data);
2021-12-24 23:18:02 +01:00
twitterData = [e.data.json];
2021-12-25 07:28:56 +01:00
twitterData = twitter_filter(twitterData);
2021-12-24 02:16:26 +01:00
update_screen();
}
};
2021-12-25 22:19:20 +01:00
const mastodonWorker = new Worker(fetchWorkerCode);
2021-12-25 07:28:56 +01:00
const mastodonType = "Mastodon";
const mastodonURL = window.infoBeamerConfig.get("mastodonURL");
const mastodonFetchInterval = window.infoBeamerConfig.get("mastodonFetchInterval");
mastodonWorker.postMessage({
fetchType: mastodonType,
fetchURL: mastodonURL,
fetchInterval: mastodonFetchInterval
});
mastodonWorker.onmessage = function(e) {
2021-12-25 22:19:20 +01:00
if (e.data.msgType === mastodonType) {
console.log("Data Message at " + Date());
console.log(e.data);
2021-12-25 07:28:56 +01:00
mastodonData = [e.data.json];
mastodonData = mastodon_filter(mastodonData);
update_screen();
}
};
2021-12-24 02:16:26 +01:00
} else {
console.log("Your browser doesn't support web workers.");
}
function update_screen() {
2021-12-25 22:19:20 +01:00
let realTime = new Date();
console.log("Updating screen at at: " + realTime);
let now = Date.now();
console.log("Using 'now': " + now);
2021-12-25 07:28:56 +01:00
update_main_slide({
2021-12-25 22:19:20 +01:00
schedule: future_events(scheduleData, now),
2021-12-25 07:28:56 +01:00
music: musicData,
2021-12-25 22:19:20 +01:00
posts: social_limiter(twitterData, mastodonData)
2021-12-25 07:28:56 +01:00
});
2021-12-24 02:16:26 +01:00
}
function main_loop() {
update_screen();
setTimeout(main_loop, 10 * 1e3);
}
main_loop();
})();