Add 'Reload stream' button in js
このコミットが含まれているのは:
コミット
6eda20a244
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
読み込み中…
新しいイシューから参照