Add 'Reload stream' button in js

このコミットが含まれているのは:
n9k 2022-03-01 02:06:48 +00:00
コミット 6eda20a244
2個のファイルの変更41行の追加0行の削除

ファイルの表示

@ -8,6 +8,7 @@ const jsmarkup_style_tripcode_display = '<style id="style-tripcode-display"></st
const jsmarkup_style_tripcode_colors = '<style id="style-tripcode-colors"></style>' const jsmarkup_style_tripcode_colors = '<style id="style-tripcode-colors"></style>'
const jsmarkup_info = '<div id="info_js" data-js="true"></div>'; const jsmarkup_info = '<div id="info_js" data-js="true"></div>';
const jsmarkup_info_float = '<aside id="info_js__float"></aside>'; const jsmarkup_info_float = '<aside id="info_js__float"></aside>';
const jsmarkup_info_float_button = '<button id="info_js__float__button">Reload stream</button>';
const jsmarkup_info_float_viewership = '<div id="info_js__float__viewership"></div>'; const jsmarkup_info_float_viewership = '<div id="info_js__float__viewership"></div>';
const jsmarkup_info_float_uptime = '<div id="info_js__float__uptime"></div>'; const jsmarkup_info_float_uptime = '<div id="info_js__float__uptime"></div>';
const jsmarkup_info_title = '<header id="info_js__title"></header>'; const jsmarkup_info_title = '<header id="info_js__title"></header>';
@ -55,6 +56,10 @@ const insert_jsmarkup = () => {jsmarkup_info_float_viewership
const parent = document.getElementById("info_js"); const parent = document.getElementById("info_js");
parent.insertAdjacentHTML("beforeend", jsmarkup_info_float); parent.insertAdjacentHTML("beforeend", jsmarkup_info_float);
} }
if (document.getElementById("info_js__float__button") === null) {
const parent = document.getElementById("info_js__float");
parent.insertAdjacentHTML("beforeend", jsmarkup_info_float_button);
}
if (document.getElementById("info_js__float__viewership") === null) { if (document.getElementById("info_js__float__viewership") === null) {
const parent = document.getElementById("info_js__float"); const parent = document.getElementById("info_js__float");
parent.insertAdjacentHTML("beforeend", jsmarkup_info_float_viewership); parent.insertAdjacentHTML("beforeend", jsmarkup_info_float_viewership);
@ -496,6 +501,13 @@ const on_websocket_message = (event) => {
stats_received = new Date(); stats_received = new Date();
update_stats(); update_stats();
// stream reload button
if (stats === null || stream.networkState === stream.NETWORK_LOADING) {
info_button.removeAttribute("data-visible");
} else {
info_button.dataset.visible = "";
}
// chat form nonce // chat form nonce
chat_form_nonce.value = receipt.nonce; chat_form_nonce.value = receipt.nonce;
@ -542,14 +554,26 @@ const on_websocket_message = (event) => {
case "info": case "info":
console.log("ws info", receipt); console.log("ws info", receipt);
// set title
if (receipt.title !== undefined) { if (receipt.title !== undefined) {
set_title(receipt.title); set_title(receipt.title);
} }
// update stats (uptime/viewership)
if (receipt.stats !== undefined) { if (receipt.stats !== undefined) {
stats = receipt.stats; stats = receipt.stats;
stats_received = new Date(); stats_received = new Date();
update_stats(); update_stats();
} }
// stream reload button
if (stats === null || stream.networkState === stream.NETWORK_LOADING) {
info_button.removeAttribute("data-visible");
} else {
info_button.dataset.visible = "";
}
break; break;
case "ack": case "ack":
@ -655,6 +679,19 @@ const connect_websocket = () => {
connect_websocket(); connect_websocket();
/* stream reload button */
const stream = document.getElementById("stream");
const info_button = document.getElementById("info_js__float__button");
info_button.addEventListener("click", (event) => {
stream.load();
info_button.removeAttribute("data-visible");
});
stream.addEventListener("error", (event) => {
if (stats !== null) {
info_button.dataset.visible = "";
}
});
/* override js-only chat form */ /* override js-only chat form */
const chat_form = document.getElementById("chat-form_js"); const chat_form = document.getElementById("chat-form_js");
const chat_form_nonce = document.getElementById("chat-form_js__nonce"); const chat_form_nonce = document.getElementById("chat-form_js__nonce");

ファイルの表示

@ -63,6 +63,7 @@ noscript {
overflow-y: auto; overflow-y: auto;
padding: 0.75ch 1.25ch; padding: 0.75ch 1.25ch;
height: 100%; height: 100%;
box-sizing: border-box;
} }
#info_js__float { #info_js__float {
float: right; float: right;
@ -71,6 +72,9 @@ noscript {
grid-auto-flow: column; grid-auto-flow: column;
grid-gap: 2.5ch; grid-gap: 2.5ch;
} }
#info_js__float__button:not([data-visible]) {
display: none;
}
#info_js__float__uptime { #info_js__float__uptime {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }