diff --git a/anonstream/static/anonstream.js b/anonstream/static/anonstream.js index 82ede0a..b549e53 100644 --- a/anonstream/static/anonstream.js +++ b/anonstream/static/anonstream.js @@ -34,6 +34,12 @@ const jsmarkup_chat_form = `\ +
+ +
`; const insert_jsmarkup = () => {jsmarkup_info_float_viewership @@ -96,6 +102,19 @@ const stylesheet_color = document.styleSheets[1]; const stylesheet_tripcode_display = document.styleSheets[2]; const stylesheet_tripcode_colors = document.styleSheets[3]; +/* override chat form notice button */ +const chat_form = document.getElementById("chat-form_js"); +const chat_form_notice_button = document.getElementById("chat-form_js__notice__button"); +const chat_form_notice_header = document.getElementById("chat-form_js__notice__button__header"); +chat_form_notice_button.addEventListener("click", (event) => { + chat_form.removeAttribute("data-notice"); + chat_form_notice_header.innerText = ""; +}); +const show_notice = (text) => { + chat_form_notice_header.innerText = text; + chat_form.dataset.notice = ""; +} + /* create websocket */ const info_title = document.getElementById("info_js__title"); const info_viewership = document.getElementById("info_js__float__viewership"); @@ -594,6 +613,11 @@ const on_websocket_message = (event) => { case "ack": console.log("ws ack", receipt); + + if (receipt.notice !== null) { + show_notice(receipt.notice); + } + const existing_nonce = chat_form_nonce.value; if (receipt.clear && receipt.nonce === existing_nonce) { chat_form_comment.value = ""; @@ -603,6 +627,7 @@ const on_websocket_message = (event) => { chat_form_nonce.value = receipt.next; receipt.digest === null ? disable_captcha() : enable_captcha(receipt.digest); chat_form_submit.disabled = false; + break; case "message": @@ -709,7 +734,6 @@ stream.addEventListener("error", (event) => { }); /* override js-only chat form */ -const chat_form = document.getElementById("chat-form_js"); const chat_form_nonce = document.getElementById("chat-form_js__nonce"); const chat_form_comment = document.getElementById("chat-form_js__comment"); const chat_form_submit = document.getElementById("chat-form_js__submit"); diff --git a/anonstream/static/style.css b/anonstream/static/style.css index c6f722c..519104f 100644 --- a/anonstream/static/style.css +++ b/anonstream/static/style.css @@ -265,7 +265,8 @@ noscript { grid-template-columns: 1fr min-content min-content 5rem; grid-template-rows: auto var(--button-height); grid-gap: 0.375rem; - margin: 0 0.5rem 0.5rem 0.5rem; + padding: 0 0.5rem 0.5rem 0.5rem; + position: relative; } #chat-form_js__submit { grid-column: 2 / span 1; @@ -307,6 +308,33 @@ noscript { #chat-form_js:not([data-captcha]) > #chat-form_js__captcha-answer { display: none; } +#chat-form_js:not([data-notice]) > #chat-form_js__notice { + display: none; +} +#chat-form_js__notice { + position: absolute; + width: 100%; + background: linear-gradient(#2323277f 25%, #232327); + height: 100%; + display: grid; +} +#chat-form_js__notice__button { + color: inherit; + border-color: black; + background-color: #232327; + border-radius: 4px; + text-align: center; + margin: auto; + display: grid; + grid-gap: 0.375rem; + padding: 0.625rem 1.25rem; + box-shadow: 0 0 12px black; + cursor: pointer; +} +#chat-form_js__notice__button__header { + font-size: 14pt; + line-height: 1.5; +} #chat-form_nojs { height: 13ch; }