From 2f5d47d21dfc308c1b930cf45e13b34445d3a8e5 Mon Sep 17 00:00:00 2001 From: metamuffin Date: Sat, 22 Mar 2025 13:02:32 +0100 Subject: Convert sass to css --- Cargo.lock | 106 +----------------------------- client-web/.gitignore | 1 + client-web/makefile | 6 +- client-web/public/app.html | 2 +- client-web/public/start.html | 9 +-- client-web/source/menu.ts | 2 +- client-web/source/user/remote.ts | 11 +++- client-web/style/chat.css | 47 +++++++++++++ client-web/style/chat.sass | 41 ------------ client-web/style/imports | 2 + client-web/style/logger.css | 63 ++++++++++++++++++ client-web/style/logger.sass | 54 --------------- client-web/style/master.css | 120 ++++++++++++++++++++++++++++++++++ client-web/style/master.sass | 112 ------------------------------- client-web/style/menu.css | 35 ++++++++++ client-web/style/menu.sass | 30 --------- client-web/style/room.css | 138 +++++++++++++++++++++++++++++++++++++++ client-web/style/room.sass | 128 ------------------------------------ client-web/style/side.css | 63 ++++++++++++++++++ client-web/style/side.sass | 49 -------------- client-web/style/start.css | 85 ++++++++++++++++++++++++ client-web/style/start.sass | 79 ---------------------- client-web/style/watches.css | 36 ++++++++++ client-web/style/watches.sass | 32 --------- server/Cargo.toml | 1 - server/src/assets.rs | 69 -------------------- server/src/main.rs | 48 +++++++------- 27 files changed, 636 insertions(+), 733 deletions(-) create mode 100644 client-web/style/chat.css delete mode 100644 client-web/style/chat.sass create mode 100644 client-web/style/imports create mode 100644 client-web/style/logger.css delete mode 100644 client-web/style/logger.sass create mode 100644 client-web/style/master.css delete mode 100644 client-web/style/master.sass create mode 100644 client-web/style/menu.css delete mode 100644 client-web/style/menu.sass create mode 100644 client-web/style/room.css delete mode 100644 client-web/style/room.sass create mode 100644 client-web/style/side.css delete mode 100644 client-web/style/side.sass create mode 100644 client-web/style/start.css delete mode 100644 client-web/style/start.sass create mode 100644 client-web/style/watches.css delete mode 100644 client-web/style/watches.sass diff --git a/Cargo.lock b/Cargo.lock index 26b0f59..f1b4192 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1,6 +1,6 @@ # This file is automatically @generated by Cargo. # It is not intended for manual editing. -version = 3 +version = 4 [[package]] name = "ab_glyph" @@ -1048,12 +1048,6 @@ dependencies = [ "error-code", ] -[[package]] -name = "codemap" -version = "0.1.3" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "b9e769b5c8c8283982a987c6e948e540254f1058d5a74b8794914d4ef5fc2a24" - [[package]] name = "codespan-reporting" version = "0.11.1" @@ -1992,10 +1986,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "c4567c8db10ae91089c99af84c68c38da3ec2f087c3f82960bcdbf3656b6f4d7" dependencies = [ "cfg-if", - "js-sys", "libc 0.2.155", "wasi", - "wasm-bindgen", ] [[package]] @@ -2154,7 +2146,7 @@ checksum = "9c08c1f623a8d0b722b8b99f821eb0ba672a1618f0d3b16ddbee1cedd2dd8557" dependencies = [ "bitflags 2.6.0", "gpu-descriptor-types", - "hashbrown 0.14.5", + "hashbrown", ] [[package]] @@ -2166,31 +2158,6 @@ dependencies = [ "bitflags 2.6.0", ] -[[package]] -name = "grass" -version = "0.13.3" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a46def7216d331efa51a6aa796ef777bfdfe9605378382827a553344b7e5eefc" -dependencies = [ - "clap", - "getrandom", - "grass_compiler", -] - -[[package]] -name = "grass_compiler" -version = "0.13.3" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f39216c1843182f78541276fec96f88406861f16aa19cc9f8add70f8e67b7577" -dependencies = [ - "codemap", - "indexmap", - "lasso", - "once_cell", - "phf", - "rand", -] - [[package]] name = "group" version = "0.13.0" @@ -2221,15 +2188,6 @@ dependencies = [ "tracing", ] -[[package]] -name = "hashbrown" -version = "0.13.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "43a3c133739dddd0d2990f9a4bdf8eb4b21ef50e4851ca85ab661199821d510e" -dependencies = [ - "ahash", -] - [[package]] name = "hashbrown" version = "0.14.5" @@ -2501,7 +2459,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "168fb715dda47215e360912c096649d23d58bf392ac62f73919e831745e40f26" dependencies = [ "equivalent", - "hashbrown 0.14.5", + "hashbrown", ] [[package]] @@ -2673,7 +2631,6 @@ dependencies = [ "async-stream", "env_logger 0.11.3", "futures-util", - "grass", "hyper 1.4.1", "include_dir", "listenfd", @@ -2711,15 +2668,6 @@ dependencies = [ "log", ] -[[package]] -name = "lasso" -version = "0.7.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4644821e1c3d7a560fe13d842d13f587c07348a1a05d3a797152d41c90c56df2" -dependencies = [ - "hashbrown 0.13.2", -] - [[package]] name = "lazy_static" version = "1.5.0" @@ -3457,48 +3405,6 @@ version = "2.3.1" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "e3148f5046208a5d56bcfc03053e3ca6334e51da8dfb19b6cdc8b306fae3283e" -[[package]] -name = "phf" -version = "0.11.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "ade2d8b8f33c7333b51bcf0428d37e217e9f32192ae4772156f65063b8ce03dc" -dependencies = [ - "phf_macros", - "phf_shared", -] - -[[package]] -name = "phf_generator" -version = "0.11.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "48e4cc64c2ad9ebe670cb8fd69dd50ae301650392e81c05f9bfcb2d5bdbc24b0" -dependencies = [ - "phf_shared", - "rand", -] - -[[package]] -name = "phf_macros" -version = "0.11.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "3444646e286606587e49f3bcf1679b8cef1dc2c5ecc29ddacaffc305180d464b" -dependencies = [ - "phf_generator", - "phf_shared", - "proc-macro2", - "quote", - "syn 2.0.70", -] - -[[package]] -name = "phf_shared" -version = "0.11.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "90fcb95eef784c2ac79119d1dd819e162b5da872ce6f3c3abe1e8ca1c082f72b" -dependencies = [ - "siphasher", -] - [[package]] name = "pin-project" version = "1.1.5" @@ -4310,12 +4216,6 @@ version = "0.3.7" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "d66dc143e6b11c1eddc06d5c423cfc97062865baf299914ab64caa38182078fe" -[[package]] -name = "siphasher" -version = "0.3.11" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "38b58827f4464d87d377d175e90bf58eb00fd8716ff0a62f80356b5e61555d0d" - [[package]] name = "slab" version = "0.4.9" diff --git a/client-web/.gitignore b/client-web/.gitignore index 99be205..00fa77d 100644 --- a/client-web/.gitignore +++ b/client-web/.gitignore @@ -1,3 +1,4 @@ /public/assets/bundle.js +/public/assets/bundle.css /public/assets/sw.js /public/assets/font diff --git a/client-web/makefile b/client-web/makefile index 2ff29d5..7a9e36b 100644 --- a/client-web/makefile +++ b/client-web/makefile @@ -1,14 +1,16 @@ ESFLAGS = --bundle --target=esnext --format=esm .PHONY: all watch -all: public/assets/bundle.js public/assets/sw.js public/assets/font/include.css -watch: +all: public/assets/bundle.js public/assets/sw.js public/assets/font/include.css public/assets/bundle.css +watch: public/assets/font/include.css # TODO watch css esbuild $(ESFLAGS) source/index.ts --outfile=public/assets/bundle.js --watch=forever & esbuild $(ESFLAGS) source/sw/worker.ts --outfile=public/assets/sw.js --watch=forever public/assets/bundle.js: $(shell find source -type f -name '*.ts') esbuild $(ESFLAGS) source/index.ts --outfile=$@ public/assets/sw.js: $(shell find source/sw -type f -name '*.ts') esbuild $(ESFLAGS) source/sw/worker.ts --outfile=$@ +public/assets/bundle.css: $(shell find style -type f -name '*.css') + cat style/imports $^ >$@ public/assets/font/include.css: mkdir -p public/assets/font curl 'https://s.metamuffin.org/static/font-ubuntu.tar' | tar -xC public/assets/font diff --git a/client-web/public/app.html b/client-web/public/app.html index c2414ce..42c5052 100644 --- a/client-web/public/app.html +++ b/client-web/public/app.html @@ -8,7 +8,7 @@ content="A simple secure web conferencing application using webrtc" /> - + keks-meet diff --git a/client-web/public/start.html b/client-web/public/start.html index 4c90934..67cad7f 100644 --- a/client-web/public/start.html +++ b/client-web/public/start.html @@ -7,7 +7,7 @@ name="description" content="A simple secure web conferencing application using webrtc" /> - + keks-meet @@ -18,8 +18,9 @@


- To start a meeting, click 'Create room' and share the URL with all - participants. You can also optionally set the room name below. + To start a meeting, click 'Create room' and share the URL with + all participants. You can also optionally set the room name + below.

keks-meet is free software! It is licenced under the terms of @@ -81,7 +82,7 @@ ], ]; return frags - .map(f => f[Math.floor(Math.random() * f.length)]) + .map((f) => f[Math.floor(Math.random() * f.length)]) .join("") .trim(); } diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts index dd9e4d4..93deef1 100644 --- a/client-web/source/menu.ts +++ b/client-web/source/menu.ts @@ -38,7 +38,7 @@ export function info_br() { export let chat_control: (s?: boolean) => void; export function control_bar(state: AppState, side_ui_container: HTMLElement): HTMLElement { - const leave = e("button", { icon: "leave", class: "abort", onclick() { window.location.href = "/" } },PO.leave) + const leave = e("button", { icon: "leave", class: "abort", onclick() { globalThis.location.href = "/" } }, PO.leave) const chat = side_ui(side_ui_container, state.chat.element, "chat", PO.chat, state.chat) const prefs = side_ui(side_ui_container, ui_preferences(), "settings", PO.settings) const rwatches = side_ui(side_ui_container, ui_room_watches(state.conn), "room", PO.known_rooms) diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts index 4cb31a2..aa5b1b4 100644 --- a/client-web/source/user/remote.ts +++ b/client-web/source/user/remote.ts @@ -157,6 +157,7 @@ export class RemoteUser extends User { async offer() { this.negotiation_busy = true const offer_description = await this.pc.createOffer() + // if (offer_description.sdp) offer_description.sdp = filter_sdp(offer_description.sdp) await this.pc.setLocalDescription(offer_description) log("webrtc", `sent offer: ${this.display_name}`, { offer: offer_description.sdp }) this.send_to({ offer: offer_description.sdp }) @@ -170,6 +171,7 @@ export class RemoteUser extends User { } async answer() { const answer_description = await this.pc.createAnswer() + // if (answer_description.sdp) answer_description.sdp = filter_sdp(answer_description.sdp) await this.pc.setLocalDescription(answer_description) log("webrtc", `sent answer: ${this.display_name}`, { answer: answer_description.sdp }) this.send_to({ answer: answer_description.sdp }) @@ -219,4 +221,11 @@ export class RemoteUser extends User { console.warn(e); } } -} \ No newline at end of file +} + +// function filter_sdp(s: string): string { +// return s.split("\n") +// .filter(l => l.search("VP8") == -1) +// .filter(l => l.search("VP9") == -1) +// .join("\n") +// } diff --git a/client-web/style/chat.css b/client-web/style/chat.css new file mode 100644 index 0000000..0cd8441 --- /dev/null +++ b/client-web/style/chat.css @@ -0,0 +1,47 @@ +/* + This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) + which is licensed under the GNU Affero General Public License (version 3); see /COPYING. + Copyright (C) 2023 metamuffin +*/ + +.chat { + display: flex; + flex-direction: column; + height: 100%; +} +.chat .message { + margin: 0.2em; +} +.chat .control-message { + font-style: italic; + color: var(--ac-light); + filter: brightness(160%); /* TODO filter is a bad approach here. */ +} +.chat .author { + font-weight: bold; +} +.chat .text { + color: white; +} +.chat .image { + width: min(20em, 30vw); + max-height: 50em; /* TODO squishes the image if too high */ +} +.chat .messages { + flex: 1; + width: 100%; + overflow: auto; +} +.chat .controls { + flex: 0; +} +.chat input[type="text"] { + font-size: medium; + width: 100%; + border-radius: 5px; + padding: 0.5em; + box-sizing: border-box; +} +.chat .chat-link { + color: var(--ac-light); +} diff --git a/client-web/style/chat.sass b/client-web/style/chat.sass deleted file mode 100644 index 1e0c1d6..0000000 --- a/client-web/style/chat.sass +++ /dev/null @@ -1,41 +0,0 @@ -/* - This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) - which is licensed under the GNU Affero General Public License (version 3); see /COPYING. - Copyright (C) 2023 metamuffin - -.chat - display: flex - flex-direction: column - height: 100% - - .message - margin: 0.2em - .control-message - font-style: italic - color: var(--ac-light) - filter: brightness(160%) // TODO filter is a bad approach here. - .author - font-weight: bold - .text - color: white - .image - width: min(20em, 30vw) - max-height: 50em // TODO squishes the image if too high - - .messages - flex: 1 - width: 100% - overflow: auto - - .controls - flex: 0 - - input[type="text"] - font-size: medium - width: 100% - border-radius: 5px - padding: 0.5em - box-sizing: border-box - - .chat-link - color: var(--ac-light) \ No newline at end of file diff --git a/client-web/style/imports b/client-web/style/imports new file mode 100644 index 0000000..11f19b7 --- /dev/null +++ b/client-web/style/imports @@ -0,0 +1,2 @@ +@import url("/assets/font/include.css"); +@import url("/overrides.css"); diff --git a/client-web/style/logger.css b/client-web/style/logger.css new file mode 100644 index 0000000..7f3d1fd --- /dev/null +++ b/client-web/style/logger.css @@ -0,0 +1,63 @@ +/* + This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) + which is licensed under the GNU Affero General Public License (version 3); see /COPYING. + Copyright (C) 2023 metamuffin +*/ + +.logger-container { + z-index: 9999; + position: absolute; + top: 0px; + right: 0px; + transition: width 1s; + background-color: rgba(0, 0, 0, 0.376); + border-radius: 0.2em; + border: 0px solid transparent; + padding: 0.2em; +} + +.logger-error { + font-size: 1.5em !important; + color: red; +} + +.logger-warn { + font-size: 1.5em !important; + color: yellow; +} + +.logger-line { + font-size: 1em; + height: 1.2em; + font-family: monospace; + animation-name: appear; + animation-timing-function: linear; + animation-duration: 0.3s; + animation-fill-mode: forwards; +} + +.logger-line-disappear { + animation-name: disappear; + animation-timing-function: linear; + animation-duration: 1s; + animation-fill-mode: forwards; +} + +@keyframes appear { + from { + margin-top: -1.2em; + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes disappear { + from { + opacity: 1; + } + to { + margin-top: -1.2em; + opacity: 0; + } +} diff --git a/client-web/style/logger.sass b/client-web/style/logger.sass deleted file mode 100644 index 2e16ffa..0000000 --- a/client-web/style/logger.sass +++ /dev/null @@ -1,54 +0,0 @@ -/* - This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) - which is licensed under the GNU Affero General Public License (version 3); see /COPYING. - Copyright (C) 2023 metamuffin - -.logger-container - z-index: 9999 - position: absolute - top: 0px - right: 0px - transition: width 1s - background-color: rgba(0, 0, 0, 0.376) - border-radius: 0.2em - border: 0px solid transparent - padding: 0.2em - -.logger-error - font-size: 1.5em !important - color: red - -.logger-warn - font-size: 1.5em !important - color: yellow - -.logger-line - font-size: 1em - height: 1.2em - font-family: monospace - animation-name: appear - animation-timing-function: linear - animation-duration: 0.3s - animation-fill-mode: forwards - -.logger-line-disappear - animation-name: disappear - animation-timing-function: linear - animation-duration: 1s - animation-fill-mode: forwards - -@keyframes appear - from - margin-top: -1.2em - opacity: 0 - - to - opacity: 1 - -@keyframes disappear - from - opacity: 1 - - to - margin-top: -1.2em - opacity: 0 diff --git a/client-web/style/master.css b/client-web/style/master.css new file mode 100644 index 0000000..15c3d82 --- /dev/null +++ b/client-web/style/master.css @@ -0,0 +1,120 @@ +/* + This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) + which is licensed under the GNU Affero General Public License (version 3); see /COPYING. + Copyright (C) 2023 metamuffin +*/ + +:root { + --green: rgb(146, 243, 73); + --red: #cf3f3f; + --textgrey: #bbbbbb; + font-weight: 300; + color: white; +} + +* { + font-family: "Ubuntu", sans-serif; + margin: 0px; + padding: 0px; +} + +body.start { + background-image: + linear-gradient(var(--ac-dark-transparent), black 150%), + url("/assets/tile-backdrop.svg"); + background-attachment: fixed; + background-size: cover, 750px; + background-color: var(--ac-dark); + position: absolute; + inset: 0; + display: flex; + place-content: center; + align-items: center; + overflow: hidden; +} + +@media (max-width: 1000px) or (max-height: 700px) { + body.start { + background-size: cover, 500px; + } +} + +body { + height: 100dvh; + width: 100dvw; + overflow: hidden; + background-color: var(--bg-dark); + display: flex; + flex-direction: column; +} + +h1 { + text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75); + font-size: 5em; + font-weight: 700; + text-align: center; + margin-bottom: 0.1em; +} + +input[type="button"], +button, +.side-ui-control { + color: white; + padding: 0.5em; + margin: 0.25em; + background-color: var(--ac); + border: 0px solid transparent; + user-select: none; + border-radius: 3px; + font-size: small; + font-weight: 400; + cursor: pointer; + transition: filter 0.1s; +} + +input[type="button"]:hover, +button:hover, +.side-ui-control:hover { + filter: brightness(130%); +} + +input:disabled, +button:disabled, +.side-ui-control:disabled { + filter: saturate(30%); +} + +input[type="button"].active, +button.active, +.side-ui-control.checked { + filter: brightness(80%); +} + +input[type="text"], +select, +input[type="number"] { + color: white; + background-color: var(--bg-dark); + border: 1.5px solid grey; + border-radius: 3px; +} + +input:focus { + border-color: var(--ac-light); + outline: none; +} + +button.abort { + background-color: #9a2020; +} + +.side-ui-control input { + display: none; +} + +.icon { + height: 15px; + width: 15px; + vertical-align: sub; + margin-right: 0.25em; +} diff --git a/client-web/style/master.sass b/client-web/style/master.sass deleted file mode 100644 index d6caab8..0000000 --- a/client-web/style/master.sass +++ /dev/null @@ -1,112 +0,0 @@ -/* - This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) - which is licensed under the GNU Affero General Public License (version 3); see /COPYING. - Copyright (C) 2023 metamuffin - -@use 'chat' -@use 'logger' -@use 'room' -@use 'side' -@use 'menu' -@use 'start' -@use 'watches' - -@import url("/assets/font/include.css") -@import url("/overrides.css") - -:root - --green: rgb(146, 243, 73) - --red: #cf3f3f - --textgrey: #bbbbbb - font-weight: 300 - color: white - -* - font-family: "Ubuntu", sans-serif - margin: 0px - padding: 0px - -body.start - background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("/assets/tile-backdrop.svg") - background-attachment: fixed - background-size: cover, 750px - background-color: var(--ac-dark) - position: absolute - inset: 0 - display: flex - place-content: center - align-items: center - overflow: hidden - -@media (max-width: 1000px) or (max-height: 700px) - body.start - background-size: cover, 500px - -body - height: 100dvh - width: 100dvw - overflow: hidden - background-color: var(--bg-dark) - display: flex - flex-direction: column - -h1 - text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75) - font-size: 5em - font-weight: 700 - text-align: center - margin-bottom: 0.1em - -input[type="button"], -button, -.side-ui-control - color: white - padding: 0.5em - margin: 0.25em - background-color: var(--ac) - border: 0px solid transparent - user-select: none - border-radius: 3px - font-size: small - font-weight: 400 - cursor: pointer - transition: filter 0.1s - -input[type="button"]:hover, -button:hover, -.side-ui-control:hover - filter: brightness(130%) - -input:disabled, -button:disabled, -.side-ui-control:disabled - filter: saturate(30%) - -input[type="button"].active, -button.active, -.side-ui-control.checked - filter: brightness(80%) - -input[type="text"], -select, -input[type="number"] - color: white - background-color: var(--bg-dark) - border: 1.5px solid grey - border-radius: 3px - -input:focus - border-color: var(--ac-light) - outline: none - -button.abort - background-color: #9a2020 - -.side-ui-control input - display: none - -.icon - height: 15px - width: 15px - vertical-align: sub - margin-right: 0.25em \ No newline at end of file diff --git a/client-web/style/menu.css b/client-web/style/menu.css new file mode 100644 index 0000000..cc7a2e9 --- /dev/null +++ b/client-web/style/menu.css @@ -0,0 +1,35 @@ +/* + This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) + which is licensed under the GNU Affero General Public License (version 3); see /COPYING. + Copyright (C) 2023 metamuffin +*/ + +.control-bar { + background-color: var(--bg); + padding: 0.75em; + width: auto; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} +.main { + position: relative; +} +.info-br { + position: absolute; + bottom: 0px; + right: 0px; + display: block; + text-align: right; +} +.info-br a { + color: lightgrey; +} + +.info-br .version { + font-size: medium; + font-weight: bold; + color: white; + padding: 0.5em; +} diff --git a/client-web/style/menu.sass b/client-web/style/menu.sass deleted file mode 100644 index 3c06680..0000000 --- a/client-web/style/menu.sass +++ /dev/null @@ -1,30 +0,0 @@ -/* - This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) - which is licensed under the GNU Affero General Public License (version 3); see /COPYING. - Copyright (C) 2023 metamuffin - -.control-bar - background-color: var(--bg) - padding: 0.75em - width: auto - display: flex - flex-wrap: wrap - align-items: center - justify-content: center - -.main - position: relative -.info-br - position: absolute - bottom: 0px - right: 0px - display: block - text-align: right - a - color: lightgrey - -.info-br .version - font-size: medium - font-weight: bold - color: white - padding: 0.5em diff --git a/client-web/style/room.css b/client-web/style/room.css new file mode 100644 index 0000000..70e73c4 --- /dev/null +++ b/client-web/style/room.css @@ -0,0 +1,138 @@ +/* + This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) + which is licensed under the GNU Affero General Public License (version 3); see /COPYING. + Copyright (C) 2023 metamuffin +*/ + +.room { + overflow-y: auto; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-content: stretch; + padding: 0.5em; +} +.user { + background-color: var(--bg); + border: 0px solid transparent; + border-radius: 5px; + padding: 1em; + margin: 0.5em; + vertical-align: top; + min-width: 15em; + position: relative; + flex: 1 1; + display: flex; + flex-direction: column; +} +.user .info .name { + font-weight: 400; +} +.user.local .info .name { + text-decoration: underline; +} +.user .info { + margin-bottom: 1em; +} +.user .resource { + display: inline-block; +} +.resource { + position: relative; + margin: 0.5em; +} +.local-controls { + display: inline; +} +.local-controls::before { + content: "|"; +} +.transfer-status { + background-color: #00000040; +} +.progress-bar { + z-index: -1; + padding: 0px; + margin: 0px; + height: 6px; + border-radius: 3px; + background-color: var(--ac-light); +} +.resource-track { + border-radius: 4px; + border: 2px solid transparent; + box-sizing: border-box; + transition: border 0.15s; +} +.resource-track.audio-active { + border: 2px solid var(--ac-light); +} +.resource-track.audio-mute { + border: 2px solid rgb(255, 86, 86); +} +.connection-status { + font-size: small; +} +.status-neutral { + color: var(--textgrey); +} +.status-good { + color: var(--green); +} +.status-fail { + color: var(--red); +} +.media-video { + border-radius: 5px; + transition: filter 0.5s; + flex: 1 1 auto; + background-color: black; +} +.media-video button.center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-shadow: 0px 0px 50px 0px rgb(0, 0, 0); +} +.media-video button.topleft { + position: absolute; + top: 0px; + left: 0px; +} +.media-video button.topright { + position: absolute; + top: 0px; + right: 0px; +} + +.fullscreen { + background-color: rgb(48, 48, 48); + z-index: 1; +} +.media-audio { + border-radius: 5px; + height: 5em; + width: 20em; +} +.media-freeze { + filter: saturate(0%); +} + +video, .preview { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +video { + max-width: 100%; + max-height: 100%; +} +.preview { + width: 100%; + height: 100%; + object-fit: contain; + filter: blur(5px); +} diff --git a/client-web/style/room.sass b/client-web/style/room.sass deleted file mode 100644 index 7c530ee..0000000 --- a/client-web/style/room.sass +++ /dev/null @@ -1,128 +0,0 @@ -/* - This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) - which is licensed under the GNU Affero General Public License (version 3); see /COPYING. - Copyright (C) 2023 metamuffin - -.room - overflow-y: auto - width: 100% - display: flex - flex-wrap: wrap - justify-content: space-around - align-content: stretch - padding: 0.5em - -.user - background-color: var(--bg) - border: 0px solid transparent - border-radius: 5px - padding: 1em - margin: 0.5em - vertical-align: top - min-width: 15em - position: relative - flex: 1 1 - display: flex - flex-direction: column - -.user .info .name - font-weight: 400 - -.user.local .info .name - text-decoration: underline - -.user .info - margin-bottom: 1em - -.user .resource - display: inline-block - -.resource - position: relative - margin: 0.5em - -.local-controls - display: inline - -.local-controls::before - content: "|" - -.transfer-status - background-color: #00000040 - -.progress-bar - z-index: -1 - padding: 0px - margin: 0px - height: 6px - border-radius: 3px - background-color: var(--ac-light) - -.resource-track - border-radius: 4px - border: 2px solid transparent - box-sizing: border-box - transition: border 0.15s - -.resource-track.audio-active - border: 2px solid var(--ac-light) - -.resource-track.audio-mute - border: 2px solid rgb(255, 86, 86) - -.connection-status - font-size: small -.status-neutral - color: var(--textgrey) -.status-good - color: var(--green) -.status-fail - color: var(--red) - -.media-video - border-radius: 5px - button.center - position: absolute - top: 50% - left: 50% - transform: translate(-50%,-50%) - box-shadow: 0px 0px 50px 0px rgb(0,0,0) - button.topleft - position: absolute - top: 0px - left: 0px - button.topright - position: absolute - top: 0px - right: 0px - transition: filter 0.5s - flex: 1 1 auto - background-color: black - -.fullscreen - background-color: rgb(48,48,48) - z-index: 1 - -.media-audio - border-radius: 5px - height: 5em - width: 20em - -.media-freeze - filter: saturate(0%) - - -video, .preview - position: absolute - left: 50% - top: 50% - transform: translate(-50%, -50%) - -video - max-width: 100% - max-height: 100% -.preview - width: 100% - height: 100% - object-fit: contain - filter: blur(5px) diff --git a/client-web/style/side.css b/client-web/style/side.css new file mode 100644 index 0000000..a0c8514 --- /dev/null +++ b/client-web/style/side.css @@ -0,0 +1,63 @@ +/* + This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) + which is licensed under the GNU Affero General Public License (version 3); see /COPYING. + Copyright (C) 2023 metamuffin +*/ + +.side-ui { + flex: 0; + z-index: 99; +} +.side-ui .side-tray { + height: 100%; + padding: 1em; + box-sizing: border-box; + overflow-y: auto; + background-color: var(--bg); +} +.side-ui > .animate-in { + animation-name: side-slide-in; + animation-duration: 0.2s; +} +.side-ui > .animate-out { + animation-name: side-slide-out; + animation-duration: 0.2s; + transform: translateX(100%); +} + +@keyframes side-slide-in { + from { + transform: translateX(100%); + } + to { + transform: translateX(0%); + } +} +@keyframes side-slide-out { + from { + transform: translateX(0%); + } + to { + transform: translateX(100%); + } +} + +.main { + flex: 1; + display: flex; + flex-flow: row; + overflow: hidden; +} +.control-bar { + flex: 0; +} +.preferences { + width: min(50em, 100vw); + height: 100%; +} +.chat { + width: min(30em, 100vw); +} +.room-watches { + width: min(30em, 100vw); +} diff --git a/client-web/style/side.sass b/client-web/style/side.sass deleted file mode 100644 index ba00d49..0000000 --- a/client-web/style/side.sass +++ /dev/null @@ -1,49 +0,0 @@ -/* - This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) - which is licensed under the GNU Affero General Public License (version 3); see /COPYING. - Copyright (C) 2023 metamuffin - -.side-ui - flex: 0 - z-index: 99 - .side-tray - height: 100% - padding: 1em - box-sizing: border-box - overflow-y: auto - background-color: var(--bg) - - >.animate-in - animation-name: side-slide-in - animation-duration: 0.2s - >.animate-out - animation-name: side-slide-out - animation-duration: 0.2s - transform: translateX(100%) - -@keyframes side-slide-in - from - transform: translateX(100%) - to - transform: translateX(0%) -@keyframes side-slide-out - from - transform: translateX(0%) - to - transform: translateX(100%) - -.main - flex: 1 - display: flex - flex-flow: row - overflow: hidden - -.control-bar - flex: 0 -.preferences - width: min(50em, 100vw) - height: 100% -.chat - width: min(30em, 100vw) -.room-watches - width: min(30em, 100vw) diff --git a/client-web/style/start.css b/client-web/style/start.css new file mode 100644 index 0000000..ab60e6b --- /dev/null +++ b/client-web/style/start.css @@ -0,0 +1,85 @@ +/* + This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) + which is licensed under the GNU Affero General Public License (version 3); see /COPYING. + Copyright (C) 2023 metamuffin +*/ + +.start-box { + text-align: center; + position: absolute; + max-width: 64em; +} +.start-box .instructions { + margin-bottom: 0.5em; + font-size: x-large; + color: #c5c5c5; + text-align: left; +} +.start-box input[type="text"] { + margin: 2em 0 1em 0; + width: 25em; + font-weight: 500; + color: whitesmoke; + border: 0.15em solid var(--ac); + background-color: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(5px); + border-radius: 0.5em; + outline: none; +} +.start-box input[type="text"]:focus { + transition: 0.1s ease-out; + background-color: rgba(0, 0, 0, 0.5); + border-color: lightgray !important; +} +.start-box input[type="button"] { + margin: 1em 0 1em 0; + border-radius: 0.5em; + font-size: x-large; + width: 12em; + padding: 0.5em; + font-weight: 500; + color: white; + background-color: var(--ac); + backdrop-filter: blur(5px); + border: 0; + cursor: pointer; + border: 0.15em solid var(--ac); +} +.start-box .description { + margin-bottom: 1.5em; + font-size: x-large; + font-weight: bold; + text-align: center; +} +.start-box #room-id-input { + padding: 0.5em; + font-size: x-large; +} +@media (max-width: 1100px) { + .start-box { + max-width: 90%; + } + .start-box input[type="text"] { + width: 90%; + } +} +@media (max-width: 1000px) or (max-height: 700px) { + .start-box h1 { + font-size: 3em; + font-weight: 700; + text-align: center; + } + .start-box .instructions { + font-size: large; + } + .start-box .description { + font-size: large; + } + .start-box #room-id-input { + padding: 0.5em; + font-size: large; + } + .start-box input[type="button"] { + font-size: large; + } +} diff --git a/client-web/style/start.sass b/client-web/style/start.sass deleted file mode 100644 index 0afb07e..0000000 --- a/client-web/style/start.sass +++ /dev/null @@ -1,79 +0,0 @@ -/* - This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) - which is licensed under the GNU Affero General Public License (version 3); see /COPYING. - Copyright (C) 2023 metamuffin - -.start-box - text-align: center - position: absolute - max-width: 64em - - .instructions - margin-bottom: 0.5em - font-size: x-large - color: #c5c5c5 - text-align: left - - input[type="text"] - margin: 2em 0 1em 0 - width: 25em - font-weight: 500 - color: whitesmoke - border: 0.15em solid var(--ac) - background-color: rgba(0, 0, 0, 0.3) - backdrop-filter: blur(5px) - border-radius: 0.5em - outline: none - - input[type="text"]:focus - transition: 0.1s ease-out - background-color: rgba(0, 0, 0, 0.5) - border-color: lightgray !important - - input[type="button"] - margin: 1em 0 1em 0 - border-radius: 0.5em - font-size: x-large - width: 12em - padding: 0.5em - font-weight: 500 - color: white - background-color: var(--ac) - backdrop-filter: blur(5px) - border: 0 - cursor: pointer - border: 0.15em solid var(--ac) - - .description - margin-bottom: 1.5em - font-size: x-large - font-weight: bold - text-align: center - - #room-id-input - padding: 0.5em - font-size: x-large - - @media (max-width: 1100px) - max-width: 90% - input[type="text"] - width: 90% - - @media (max-width: 1000px) or (max-height: 700px) - h1 - font-size: 3em - font-weight: 700 - text-align: center - - .instructions - font-size: large - - .description - font-size: large - - #room-id-input - padding: 0.5em - font-size: large - - input[type="button"] - font-size: large \ No newline at end of file diff --git a/client-web/style/watches.css b/client-web/style/watches.css new file mode 100644 index 0000000..3d7db19 --- /dev/null +++ b/client-web/style/watches.css @@ -0,0 +1,36 @@ +/* + This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) + which is licensed under the GNU Affero General Public License (version 3); see /COPYING. + Copyright (C) 2023 metamuffin +*/ + +.room-watches-listing { + list-style: none; +} +.room-watches-listing a { + color: white; + display: inline-block; + width: 100%; + margin: 0.5em; + border-radius: 4px; + padding: 0.5em; + background-color: var(--bg-light); +} +.room-watches-listing .current-room { + background-color: var(--ac-dark); +} +.room-watches-listing .users { + float: right; +} +.room-watches-listing .users div { + margin: 0.25em; + display: inline-block; + width: 1em; + height: 1em; + border-radius: 3px; + background-color: var(--green); +} +.room-watches-listing .users span { + display: inline-block; + color: var(--textgrey); +} diff --git a/client-web/style/watches.sass b/client-web/style/watches.sass deleted file mode 100644 index 1816b91..0000000 --- a/client-web/style/watches.sass +++ /dev/null @@ -1,32 +0,0 @@ -/* - This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet) - which is licensed under the GNU Affero General Public License (version 3); see /COPYING. - Copyright (C) 2023 metamuffin - -.room-watches-listing - list-style: none - a - color: white - display: inline-block - width: 100% - margin: 0.5em - border-radius: 4px - padding: 0.5em - background-color: var(--bg-light) - - .current-room - background-color: var(--ac-dark) - - .users - float: right - display: inline-block - div - margin: 0.25em - display: inline-block - width: 1em - height: 1em - border-radius: 3px - background-color: var(--green) - span - display: inline-block - color: var(--textgrey) diff --git a/server/Cargo.toml b/server/Cargo.toml index 9172145..5f98b4a 100644 --- a/server/Cargo.toml +++ b/server/Cargo.toml @@ -15,7 +15,6 @@ serde = { version = "1.0.204", features = ["derive"] } serde_json = "1.0.120" include_dir = "0.7.4" toml = "0.8.14" -grass = "0.13.3" async-stream = "0.3.5" [features] diff --git a/server/src/assets.rs b/server/src/assets.rs index 4ddb3a5..cf6ccb1 100644 --- a/server/src/assets.rs +++ b/server/src/assets.rs @@ -3,8 +3,6 @@ which is licensed under the GNU Affero General Public License (version 3); see /COPYING. Copyright (C) 2023 metamuffin */ -use log::error; -use std::sync::LazyLock; #[cfg(debug_assertions)] #[macro_export] @@ -57,70 +55,3 @@ macro_rules! s_asset_dir { }) }}; } - -#[derive(Debug)] -struct GrassFs; -#[cfg(debug_assertions)] -impl GrassFs { - pub fn map(p: &std::path::Path) -> std::path::PathBuf { - std::path::PathBuf::from("../client-web/style").join(p.file_name().unwrap()) - } -} -#[cfg(debug_assertions)] -impl grass::Fs for GrassFs { - fn is_dir(&self, path: &std::path::Path) -> bool { - Self::map(path).is_dir() - } - fn is_file(&self, path: &std::path::Path) -> bool { - Self::map(path).is_file() - } - fn read(&self, path: &std::path::Path) -> std::io::Result> { - std::fs::read(Self::map(path)) - } -} - -#[cfg(not(debug_assertions))] -const STYLE_DIR: include_dir::Dir = - include_dir::include_dir!("$CARGO_MANIFEST_DIR/../client-web/style"); -#[cfg(not(debug_assertions))] -impl grass::Fs for GrassFs { - fn is_dir(&self, _path: &std::path::Path) -> bool { - false - } - fn is_file(&self, path: &std::path::Path) -> bool { - STYLE_DIR.get_file(path.file_name().unwrap()).is_some() - } - fn read(&self, path: &std::path::Path) -> std::io::Result> { - Ok(STYLE_DIR - .get_file(path.file_name().unwrap()) - .ok_or(std::io::Error::new( - std::io::ErrorKind::NotFound, - "not found", - ))? - .contents() - .to_vec()) - } -} - -static CSS_BUNDLE: LazyLock = LazyLock::new(css_bundle); - -pub fn css() -> String { - if cfg!(debug_assertions) { - css_bundle() - } else { - CSS_BUNDLE.clone() - } -} -fn css_bundle() -> String { - grass::from_path( - "/master.sass", - &grass::Options::default() - .input_syntax(grass::InputSyntax::Sass) - .load_path("/") - .fs(&GrassFs), - ) - .unwrap_or_else(|err| { - error!("sass compile failed: {err}"); - String::from("/* sass compile failed */") - }) -} diff --git a/server/src/main.rs b/server/src/main.rs index e7a3674..92f9451 100644 --- a/server/src/main.rs +++ b/server/src/main.rs @@ -11,7 +11,6 @@ pub mod logic; pub mod protocol; use crate::protocol::ClientboundPacket; -use assets::css; use config::{AppearanceConfig, Config}; use futures_util::{SinkExt, StreamExt, TryFutureExt}; use listenfd::ListenFd; @@ -62,8 +61,8 @@ async fn run() { let index: _ = warp::path!().and(s_file!("client-web/public/start.html", "text/html")); let favicon: _ = - warp::path!("favicon.ico").and(s_file!("client-web/public/favicon.ico", "image/avif")); - let room: _ = warp::path!("room").and(s_file!("client-web/public/app.html", "text/html")); + warp::path("favicon.ico").and(s_file!("client-web/public/favicon.ico", "image/avif")); + let room: _ = warp::path("room").and(s_file!("client-web/public/app.html", "text/html")); let assets: _ = warp::path("assets").and(s_asset_dir!()); let sw_script: _ = warp::path("sw.js").and(s_file!( "client-web/public/assets/sw.js", @@ -79,8 +78,6 @@ async fn run() { let client_config_css: _ = warp::path!("overrides.css").map(move || { warp::reply::with_header(client_config_css.clone(), "content-type", "text/css") }); - let css: _ = warp::path!("style.css") - .map(move || warp::reply::with_header(css(), "content-type", "text/css")); let old_format_redirect: _ = warp::path!("room" / String).map(|rsecret| { reply::with_header( StatusCode::MOVED_PERMANENTLY, @@ -92,27 +89,26 @@ async fn run() { let version: _ = warp::path!("version").map(|| env!("CARGO_PKG_VERSION")); let routes: _ = signaling - .or(assets - .or(room) - .or(index) - .or(client_config) - .or(version) - .or(css) - .or(favicon) - .or(sw_script) - .or(old_format_redirect) - .or(client_config_css) - .map(|r| { - warp::reply::with_header( - r, - "cache-control", - if cfg!(debug_assertions) { - "no-cache" - } else { - "max-age=1000000" - }, - ) - })) + .or(room) + .or(index) + .or(client_config) + .or(version) + .or(assets) + .or(favicon) + .or(sw_script) + .or(old_format_redirect) + .or(client_config_css) + .map(|r| { + warp::reply::with_header( + r, + "cache-control", + if cfg!(debug_assertions) { + "no-cache" + } else { + "max-age=1000000" + }, + ) + }) .recover(handle_rejection) .with(warp::log("keks-meet")) .map(|r| warp::reply::with_header(r, "server", "keks-meet")); -- cgit v1.2.3-70-g09d2