455 lines
15 KiB
JavaScript
455 lines
15 KiB
JavaScript
"use strict";
|
|
(() => {
|
|
// 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 default_profile_image = () => "./nounicorn.png";
|
|
var replace_default_image = (url) => {
|
|
let newUrl;
|
|
if (url === "https://abs.twimg.com/sticky/default_profile_images/default_profile_normal.png" || url === "https://chaos.social/avatars/original/missing.png") {
|
|
newUrl = default_profile_image();
|
|
} else {
|
|
newUrl = url;
|
|
}
|
|
return newUrl;
|
|
};
|
|
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) => {
|
|
let authorId = tweet.author_id;
|
|
let users = data.includes.users;
|
|
let author = users.find((item) => item.id === authorId);
|
|
let profileImageUrl = replace_default_image(author.profile_image_url);
|
|
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) => replace_default_image(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;
|
|
};
|
|
var is_new_music = (musicA, musicB) => {
|
|
let isSame;
|
|
if (musicA.length !== 0 && musicB.length !== 0) {
|
|
isSame = musicA[0].artist === musicB[0].artist && musicA[0].title === musicB[0].title;
|
|
} else if (musicA.length === 0 && musicB.length === 0) {
|
|
isSame = true;
|
|
} else {
|
|
isSame = false;
|
|
}
|
|
return !isSame;
|
|
};
|
|
var music_update = (musicA, musicB) => {
|
|
let isNew = is_new_music(musicA, musicB);
|
|
if (isNew === true) {
|
|
musicB.forEach((m) => m.since = Date.now());
|
|
}
|
|
return musicB;
|
|
};
|
|
|
|
// ns-hugo:/home/raoul-web/rc3_2021/html-infobeamer-content/assets/js/dom.js
|
|
var html = htm.bind(preact.h);
|
|
var here_room = "Chaos-West TV";
|
|
var musicAge = 5 * 1e3;
|
|
var urgency = 5 * 60 * 1e3;
|
|
var is_own_talk = (talk) => talk.room === here_room;
|
|
var is_urgent = (talk, time) => {
|
|
let talkStart = Date.parse(talk.date);
|
|
let timeDelta = talkStart - time;
|
|
return timeDelta <= urgency;
|
|
};
|
|
var urgent_class = (talk, time) => is_urgent(talk, time) ? "urgent" : "";
|
|
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;
|
|
};
|
|
var duration_dom = (duration) => {
|
|
return html`<span class="duration">${to_minutes(duration)} minutes</span>`;
|
|
};
|
|
var meta_here_dom = (schedule, time) => {
|
|
let inner = html`${schedule.map((talk) => html`
|
|
<div class="talk-here-meta-box ${urgent_class(talk, time)}">
|
|
<div class="speaker">${speaker_dom(talk)}</div>
|
|
<div class="title"><span class="titletext">${talk.title}</span></div>
|
|
<div class="start-duration">
|
|
<span class="start">Starting at ${talk.start}</span>
|
|
${duration_dom(talk.duration)}
|
|
</div>
|
|
</div>
|
|
`)}`;
|
|
return inner;
|
|
};
|
|
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) => {
|
|
let inner = html``;
|
|
schedule.forEach((talk) => {
|
|
inner = html`
|
|
${abstract_text_dom(talk)}
|
|
${track_dom(talk)}`;
|
|
});
|
|
return inner;
|
|
};
|
|
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 highlight_class = (talk) => is_own_talk(talk) === true ? "item-highlight" : "";
|
|
var do_not_record_dom = (talk) => {
|
|
let icon = "fa-microphone-slash";
|
|
let inner;
|
|
if (talk.do_not_record === true) {
|
|
inner = html`<span class="do-not-record"><span class="fa ${icon}"></span></span>`;
|
|
} else {
|
|
inner = html``;
|
|
}
|
|
return inner;
|
|
};
|
|
var list_all_dom = (schedule, time) => {
|
|
let inner = html`
|
|
${schedule.map((talk) => html`
|
|
<div class="item ${highlight_class(talk)} ${urgent_class(talk, time)}">
|
|
<div>
|
|
<div class="title">${talk.title}</div>
|
|
</div>
|
|
<div class="details">
|
|
<span class="start">${talk.start}</span>
|
|
${talk_day_dom(talk)}
|
|
${do_not_record_dom(talk)}
|
|
<span class="stage">${talk.room}</span>
|
|
</div>
|
|
</div>`)}`;
|
|
return inner;
|
|
};
|
|
var schedule_dom = (schedule, time) => {
|
|
const here_number_events = 1;
|
|
const all_number_events = 7;
|
|
let allTalks = schedule.slice(0, all_number_events);
|
|
let nextTalkHere = schedule.filter(is_own_talk).slice(0, 1);
|
|
let nextHereMetaDom = meta_here_dom(nextTalkHere, time);
|
|
let nextHereAbstractDom = abstract_here_dom(nextTalkHere);
|
|
let nextAllMetaDom = list_all_dom(allTalks, time);
|
|
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_changed = (current, time) => time - current.since <= musicAge;
|
|
var changed_music_class = (current, time) => music_changed(current, time) ? "changed" : "";
|
|
var music_playing_now_dom = (music, time) => {
|
|
let inner = html`
|
|
<div class="music-box">
|
|
${music.map((current) => html`
|
|
<div class="music ${changed_music_class(current, time)}">
|
|
<div class="line1">
|
|
<span>
|
|
<span class="note">
|
|
<span class="fa fa-music glyph"></span>
|
|
</span>
|
|
<span class="header">Now playing:</span>
|
|
</span>
|
|
<span class="license">(${current.license})</span>
|
|
</div>
|
|
<div class="line2">
|
|
<span class="title">«${current.title}»</span>
|
|
<span class="by">by</span>
|
|
<span class="artist">${current.artist}</span>
|
|
</div>
|
|
</div>`)}
|
|
</div>`;
|
|
return inner;
|
|
};
|
|
var post_time = (date) => moment(date).format("H: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) => {
|
|
let inner = html`
|
|
<div class="post slider">
|
|
<div class="container">
|
|
<img class="profile-image" src="${post.image}"/>
|
|
<div class="content">
|
|
<div class="meta">
|
|
${social_network_dom(post)}
|
|
<span class="username">@${post.author}</span>
|
|
<span class="time">${post_time(post.time)}</span>
|
|
</div>
|
|
<div class="text">${post.text}</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
return inner;
|
|
};
|
|
var social_container_dom = (posts) => {
|
|
let inner = html`
|
|
<div id="bottom-bar" class="visible bottom-bar">
|
|
<div id="ticker-wrap" class="ticker-wrap">
|
|
<div class="ticker switcher">
|
|
${posts.map((p) => single_post_dom(p))}
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
return inner;
|
|
};
|
|
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 Hashtag <span class="hashtag">#rc3cwtv</span> or join our IRC Channel <span class="irc">#rc3-cwtv</span></div>
|
|
</div>
|
|
</div>`;
|
|
return inner;
|
|
};
|
|
function update_main_slide(data, time) {
|
|
let schedule = data.schedule;
|
|
let music = data.music;
|
|
let postings = data.posts;
|
|
let scheduleDom = schedule_dom(schedule, time);
|
|
let hashtagDom = hashtag_dom();
|
|
let musicDom = music_playing_now_dom(music, time);
|
|
let postingsDom = social_container_dom(postings);
|
|
let inner = html`
|
|
${scheduleDom}
|
|
${hashtagDom}
|
|
${musicDom}
|
|
${postingsDom}
|
|
`;
|
|
const anchorElId = "main";
|
|
const el = document.getElementById(anchorElId);
|
|
preact.render(inner, el);
|
|
}
|
|
|
|
// <stdin>
|
|
var scheduleData = [];
|
|
var musicData = [];
|
|
var twitterData = [];
|
|
var mastodonData = [];
|
|
if (window.Worker) {
|
|
const workerBaseURL = window.infoBeamerConfig.get("workerBaseURL");
|
|
const fetchWorkerCode = workerBaseURL + "js/generic_fetch_worker.js";
|
|
const scheduleWorker = new Worker(fetchWorkerCode);
|
|
const scheduleType = "Schedule";
|
|
const scheduleURL = window.infoBeamerConfig.get("scheduleURL");
|
|
const scheduleFetchInterval = window.infoBeamerConfig.get("scheduleFetchInterval");
|
|
scheduleWorker.postMessage({
|
|
fetchType: scheduleType,
|
|
fetchURL: scheduleURL,
|
|
fetchInterval: scheduleFetchInterval
|
|
});
|
|
scheduleWorker.onmessage = function(e) {
|
|
if (e.data.msgType === scheduleType) {
|
|
console.log("Data Message at " + Date());
|
|
console.log(e.data);
|
|
scheduleData = schedule_filter(e.data.json);
|
|
update_screen();
|
|
}
|
|
};
|
|
const musicWorker = new Worker(fetchWorkerCode);
|
|
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) {
|
|
if (e.data.msgType === musicType) {
|
|
console.log("Data Message at " + Date());
|
|
console.log(e.data);
|
|
let musicDataUpdate = [e.data.json];
|
|
musicData = music_update(musicData, musicDataUpdate);
|
|
update_screen();
|
|
}
|
|
};
|
|
const twitterWorker = new Worker(fetchWorkerCode);
|
|
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) {
|
|
if (e.data.msgType === twitterType) {
|
|
console.log("Data Message at " + Date());
|
|
console.log(e.data);
|
|
twitterData = [e.data.json];
|
|
twitterData = twitter_filter(twitterData);
|
|
update_screen();
|
|
}
|
|
};
|
|
const mastodonWorker = new Worker(fetchWorkerCode);
|
|
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) {
|
|
if (e.data.msgType === mastodonType) {
|
|
console.log("Data Message at " + Date());
|
|
console.log(e.data);
|
|
mastodonData = [e.data.json];
|
|
mastodonData = mastodon_filter(mastodonData);
|
|
update_screen();
|
|
}
|
|
};
|
|
} else {
|
|
console.log("Your browser doesn't support web workers.");
|
|
}
|
|
function update_screen() {
|
|
let realTime = new Date();
|
|
console.log("Updating screen at at: " + realTime);
|
|
let now = Date.now();
|
|
console.log("Using 'now': " + now);
|
|
update_main_slide({
|
|
schedule: future_events(scheduleData, now),
|
|
music: musicData,
|
|
posts: social_limiter(twitterData, mastodonData)
|
|
}, now);
|
|
}
|
|
function main_loop() {
|
|
update_screen();
|
|
setTimeout(main_loop, 10 * 1e3);
|
|
}
|
|
main_loop();
|
|
})();
|