From 61d37c1ed5818e7f5d53f358495e5349ae817702 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 10 Mar 2021 19:27:04 +0100 Subject: Init --- index.html | 71 ++++++++++++++++++++ robots.txt | 2 + script.js | 69 +++++++++++++++++++ style.css | 224 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 366 insertions(+) create mode 100644 index.html create mode 100644 robots.txt create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..01e48f8 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + + + + Livestream IRC + + + + + +
+
+ + + + +
+
+ +
+
+

+ Join #livestream on irc.vulpes.one +

+ +
+ +
+ +
+ +
+ +
+
+ + + + + diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..1f53798 --- /dev/null +++ b/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/script.js b/script.js new file mode 100644 index 0000000..e2c8f36 --- /dev/null +++ b/script.js @@ -0,0 +1,69 @@ +(() => { + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + + const title = urlParams.get("title"); + const streamUrl = urlParams.get("stream"); + const ircUrl = urlParams.get("irc"); + + if (streamUrl === null || ircUrl === null) { + return; + } + + /** @type HTMLInputElement */ + const titleEl = document.querySelector(".c-form-field__input[name=title]"); + /** @type HTMLInputElement */ + const streamEl = document.querySelector(".c-form-field__input[name=stream]"); + /** @type HTMLInputElement */ + const ircEl = document.querySelector(".c-form-field__input[name=irc]"); + + titleEl.value = title; + streamEl.value = streamUrl; + ircEl.value = ircUrl; + + if (streamUrl.trim().length === 0 || ircUrl.trim().length === 0) { + return; + } + + const normalizedircUrl = ircUrl.startsWith("irc://") + ? ircUrl.substring(6) + : ircUrl.startsWith("ircs://") + ? ircUrl.substring(7) + : ircUrl; + const ircUrlComponents = normalizedircUrl.split("/"); + + if (ircUrlComponents.length !== 2) { + return; + } + + if (title !== null && title.trim().length !== 0) { + document.querySelector("title").textContent = title; + } + + const ircChan = ircUrlComponents[0]; + const ircHost = ircUrlComponents[1]; + + document.querySelector(".c-section--create").classList.add("u-hidden"); + document.querySelector(".c-section--main").classList.remove("u-hidden"); + + /** @type HTMLIFrameElement */ + const streamFrameEl = document.querySelector(".c-frame--pt iframe"); + /** @type HTMLIFrameElement */ + const ircFrameEl = document.querySelector(".c-frame--irc iframe"); + + streamFrameEl.src = streamUrl; + ircFrameEl.src = "https://irc.vulpes.one/?uri=" + ircUrl; + + /** @type HTMLAnchorElement */ + const ircLink = document.querySelector(".c-irc-link"); + ircLink.href = ircUrl; + ircLink.textContent = `Join #${ircChan} on ${ircHost}`; + + document.querySelector(".c-msg__close").addEventListener("click", (e) => { + e.preventDefault(); + + /** @type HTMLElement */ + const el = e.currentTarget; + el.parentElement.remove(); + }); +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..6be7ed3 --- /dev/null +++ b/style.css @@ -0,0 +1,224 @@ + + +:root { + --gray0: hsl(270, 0%, 7%); + --gray1: hsl(270, 0%, 10%); + --gray2: hsl(270, 1%, 16%); + --gray3: hsl(270, 1%, 24%); + --gray4: hsl(270, 1%, 35%); + --gray5: hsl(270, 2%, 54%); + --gray6: hsl(270, 2%, 73%); + --gray7: hsl(270, 2%, 100%); + + /* * */ + + --bg-hi: var(--gray0); + --bg: var(--gray1); + + --obj-hi: var(--gray2); + --obj: var(--gray3); + --obj-lo: var(--gray4); + + --fg-hi: var(--gray5); + --fg: var(--gray6); + --fg-lo: var(--gray7); + + /* * */ + + --color--yellow: hsl(38, 100%, 76%); +} + +html { + height: 100%; +} + +body { + height: 100%; + margin: 0; + font-family: IBM Plex Sans, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, Arial; + line-height: 1.5; + background-color: var(--bg); + color: var(--fg); +} + +a { + text-decoration: none; +} + +p { + margin: 0; +} + +iframe { + display: block; + width: 100%; + height: 100%; +} + +input { + padding: .5em .7em; + background: var(--obj); + color: var(--fg-lo); + border: 2px solid transparent; + border-radius: 3px; + transition: border-color .2s; +} + +input:hover, +input:focus { + border-color: var(--color--yellow); + box-shadow: none; + outline: 0; +} + +button { + padding: .6em 1.3em; + font: inherit; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: .2em; + background: transparent; + color: var(--color--yellow); + border: 2px solid var(--color--yellow); + border-radius: 3px; + transition: background-color .2s, color .2s; +} + +button:hover, +button:focus { + background-color: var(--color--yellow); + color: #000; +} + +:link, +:visited { + color: #850000; +} + +.c-section { + height: 100%; +} + +.c-section--main { + display: grid; + grid-template-areas: "video msg" "video chat"; + grid-template-rows: auto 1fr; + grid-template-columns: 1fr 22em; +} + +.c-form { + display: block; + padding: 2rem; + margin: 0 auto; + max-width: 600px; +} + +.c-form-msg:empty { + display: none; +} + +.c-form-field { + display: block; + margin-top: 2rem; +} + +.c-form-field__label { + font-size: 15px; + font-weight: bold; + color: var(--fg-lo); +} + +.c-form-field__help { + display: block; + margin-top: .5rem; + color: var(--fg-hi); + font-size: 15px; +} + +.c-form-field__input { + box-sizing: border-box; + display: block; + width: 100%; + margin-top: .5rem; +} + +.c-frame--pt { + grid-area: video; +} + +.c-frame--irc { + grid-area: chat; +} + +.c-msg { + grid-area: msg; + display: flex; + color: #850000; + background-color: #fcc; + font-size: 14px; + border: 1px solid #ffb8b8; +} + +.c-msg__content { + display: block; + width: 100%; + padding: .75rem 1.25rem; +} + +.c-close-icon { + width: 1.1em; + height: 2px; + position: relative; +} + +.c-close-icon::before, +.c-close-icon::after { + position: absolute; + left: 0; + display: block; + height: 2px; + content: ''; + background-color: currentColor; + transform-origin: 50% 50%; +} + +.c-close-icon::before { + top: 0; + width: 100%; + transform: rotate(45deg); + transition: background-color .3s ease; +} + +.c-close-icon::after { + bottom: 0; + transform: rotate(-45deg); + width: 100%; + transition: background-color .3s ease; +} + +.c-msg__close { + display: block; + padding: .75rem 1.25rem; + margin-left: auto; + background: transparent; + color: currentColor; + border: 0; +} + +.c-msg__close:hover { + background: transparent; + color: currentColor; +} + +.u-hidden { + display: none; +} + +@media (max-width: 1024px) { + .c-section--main { + grid-template-areas: "msg" "video" "chat"; + grid-template-rows: auto 1fr 22em; + grid-template-columns: 1fr; + } +} -- cgit v1.2.3-54-g00ecf