new resource displays

8 files changed, 64 insertions, 34 deletions

diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts
index c8dfd2b..395b7ff 100644
--- a/client-web/source/menu.ts
+++ b/client-web/source/menu.ts
@@ -37,7 +37,7 @@ export function info_br() {
 export let chat_control: (s?: boolean) => void;
 
 export function control_bar(room: Room, side_ui_container: HTMLElement): HTMLElement {
-    const leave = e("button", { class: "leave", onclick() { window.location.href = "/" } }, "Leave")
+    const leave = e("button", { class: "abort", onclick() { window.location.href = "/" } }, "Leave")
     const chat = side_ui(side_ui_container, room.chat.element, "Chat", room.chat)
     const prefs = side_ui(side_ui_container, ui_preferences(), "Settings")
     const rwatches = side_ui(side_ui_container, ui_room_watches(room.signaling), "Known Rooms")
diff --git a/client-web/source/resource/file.ts b/client-web/source/resource/file.ts
index b882e1e..ad09ad2 100644
--- a/client-web/source/resource/file.ts
+++ b/client-web/source/resource/file.ts
@@ -116,15 +116,18 @@ export function create_file_res(): Promise<LocalResource> {
 function file_res_inner(file: File): LocalResource {
     const transfers_el = e("div", {})
     const transfers_abort = new Set<() => void>()
+    let destroy: () => void;
     return {
         info: { kind: "file", id: Math.random().toString(), label: file.name, size: file.size },
         destroy() {
             transfers_abort.forEach(abort => abort())
         },
         el: e("div", { class: "file" },
+            e("button", { class: "abort", onclick(_) { destroy() } }, "Stop sharing"),
             e("span", {}, `Sharing file: ${JSON.stringify(file.name)}`),
             transfers_el
         ),
+        set_destroy(cb) { destroy = cb },
         on_request(user, create_channel) {
             const channel = create_channel()
             channel.bufferedAmountLowThreshold = 1 << 16 // this appears to be the buffer size in firefox for reading files
diff --git a/client-web/source/resource/mod.ts b/client-web/source/resource/mod.ts
index 0da41ba..57c80d2 100644
--- a/client-web/source/resource/mod.ts
+++ b/client-web/source/resource/mod.ts
@@ -27,7 +27,8 @@ export interface LocalResource {
     el: HTMLElement
     info: ProvideInfo,
     destroy(): void
-    on_request(user: RemoteUser, create_channel: () => RTCDataChannel): TrackHandle | RTCDataChannel
+    on_request(user: RemoteUser, create_channel: () => RTCDataChannel): TrackHandle | RTCDataChannel,
+    set_destroy(cb: () => void): void
 }
 
 const RESOURCE_HANDLERS: ResourceHandlerDecl[] = [resource_file, resource_track]
diff --git a/client-web/source/resource/track.ts b/client-web/source/resource/track.ts
index 9a9a8df..d0c56c7 100644
--- a/client-web/source/resource/track.ts
+++ b/client-web/source/resource/track.ts
@@ -19,6 +19,7 @@ export const resource_track: ResourceHandlerDecl = {
         if (info.label) enable_label += ` "${info.label}"`
 
         const enable_button = e("button", {
+            class: "center",
             onclick: self => {
                 self.disabled = true;
                 self.textContent = "Awaiting track…";
@@ -27,11 +28,13 @@ export const resource_track: ResourceHandlerDecl = {
         }, enable_label)
         return {
             info,
-            el: e("div", {}, enable_button),
+            el: e("div", { class: [`media-${info.track_kind}`] }, enable_button),
             on_statechange() { },
             on_enable(track, disable) {
                 this.el.removeChild(enable_button)
+                if (!(track instanceof TrackHandle)) return console.warn("aservuoivasretuoip");
                 this.el.append(e("button", {
+                    class: ["topright", "abort"],
                     onclick: (self) => {
                         disable()
                         this.el.appendChild(enable_button)
@@ -41,19 +44,25 @@ export const resource_track: ResourceHandlerDecl = {
                         self.remove()
                     }
                 }, "Disable"))
-                if (!(track instanceof TrackHandle)) return console.warn("aservuoivasretuoip");
-                this.el.append(create_track_display(track))
+                create_track_display(this.el, track)
             }
         }
     }
 }
 
 export function new_local_track(info: ProvideInfo, track: TrackHandle, ...extra_controls: HTMLElement[]): LocalResource {
+    let destroy: () => void;
     return {
+        set_destroy(cb) { destroy = cb },
         info,
         el: e("div", {},
-            create_track_display(track),
-            ...extra_controls
+            create_track_display(
+                e("div", { class: `media-${track.kind}` },
+                    e("button", { class: ["abort", "topright"], onclick: () => destroy() }, "Stop sharing"),
+                    ...extra_controls
+                ),
+                track
+            ),
         ),
         destroy() { track.end() },
         on_request(_user, _create_channel) {
@@ -62,40 +71,38 @@ export function new_local_track(info: ProvideInfo, track: TrackHandle, ...extra_
     }
 }
 
-function create_track_display(track: TrackHandle): HTMLElement {
+function create_track_display(target: HTMLElement, track: TrackHandle): HTMLElement {
     const is_video = track.kind == "video"
     const is_audio = track.kind == "audio"
 
     const stream = new MediaStream([track.track])
 
-    const el = document.createElement("div")
 
     const media_el = is_video
         ? document.createElement("video")
         : document.createElement("audio")
 
     media_el.srcObject = stream
-    media_el.classList.add("media")
     media_el.autoplay = true
     media_el.controls = true
     media_el.addEventListener("pause", () => media_el.play())
 
     if (track.local) media_el.muted = true
-    el.append(media_el)
+    target.append(media_el)
     track.addEventListener("ended", () => {
         media_el.srcObject = null // TODO // TODO figure out why i wrote todo here
-        el.remove()
+        media_el.remove()
     })
 
     if (is_audio && PREFS.audio_activity_threshold !== undefined) check_volume(stream, vol => {
         const active = vol > PREFS.audio_activity_threshold
-        if (active != el.classList.contains("audio-active")) {
-            if (active) el.classList.add("audio-active")
-            else el.classList.remove("audio-active")
+        if (active != target.classList.contains("audio-active")) {
+            if (active) target.classList.add("audio-active")
+            else target.classList.remove("audio-active")
         }
     })
 
-    return el
+    return target
 }
 
 function check_volume(track: MediaStream, cb: (vol: number) => void) {
diff --git a/client-web/source/user/local.ts b/client-web/source/user/local.ts
index 1d4968e..dae01b2 100644
--- a/client-web/source/user/local.ts
+++ b/client-web/source/user/local.ts
@@ -13,7 +13,6 @@ import { User } from "./mod.ts";
 import { create_camera_res, create_mic_res, create_screencast_res } from "../resource/track.ts";
 import { LocalResource } from "../resource/mod.ts";
 import { PREFS } from "../preferences/mod.ts";
-import { e } from "../helper.ts";
 
 export class LocalUser extends User {
     resources: Map<string, LocalResource> = new Map()
@@ -64,17 +63,14 @@ export class LocalUser extends User {
         this.el.append(r.el)
         this.room.signaling.send_relay({ provide })
 
+        r.set_destroy(() => {
+            r.destroy()
+            this.el.removeChild(r.el);
+            this.resources.delete(provide.id)
+            this.room.signaling.send_relay({ provide_stop: { id: provide.id } })
+        })
+
         r.el.classList.add("resource")
         r.el.classList.add(`resource-${r.info.kind}`)
-        r.el.append(
-            e("button", {
-                onclick: () => {
-                    r.destroy()
-                    this.el.removeChild(r.el);
-                    this.resources.delete(provide.id)
-                    this.room.signaling.send_relay({ provide_stop: { id: provide.id } })
-                }
-            }, "Stop"),
-        )
     }
 }
diff --git a/client-web/style/logger.sass b/client-web/style/logger.sass
index b2815db..2e16ffa 100644
--- a/client-web/style/logger.sass
+++ b/client-web/style/logger.sass
@@ -4,11 +4,11 @@
  Copyright (C) 2023 metamuffin <metamuffin.org>
 
 .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
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
index f3dd420..c4aa50e 100644
--- a/client-web/style/master.sass
+++ b/client-web/style/master.sass
@@ -81,7 +81,7 @@ input[type="number"]
     background-color: var(--bg-dark)
     border: 1px solid var(--ac-light)
 
-button.leave
+button.abort
     left: 0px
     background-color: #9a2020
 
diff --git a/client-web/style/room.sass b/client-web/style/room.sass
index ff26a77..b5c9f26 100644
--- a/client-web/style/room.sass
+++ b/client-web/style/room.sass
@@ -18,7 +18,7 @@
     margin: 0.5em
     vertical-align: top
     min-width: fit-content
-    height: 13em
+    height: 16em
     display: inline-block
     position: relative
 
@@ -35,10 +35,10 @@
     display: inline-block
     vertical-align: top
 
-.media
-    max-height: 9em
-    border: 0px solid transparent
-    border-radius: 5px
+.resource
+    position: relative
+    margin: 0.5em
+    max-height: 12em
 
 .local-controls
     display: inline
@@ -72,3 +72,26 @@
     color: var(--green)
 .status-fail
     color: var(--red)
+
+.media-video
+    border-radius: 5px
+    background-color: black
+    height: 12em
+    width: calc(12em * 16 / 9)
+    button.center
+        position: absolute
+        top: 50%
+        left: 50%
+        transform: translate(-50%,-50%)
+    button.topright
+        position: absolute
+        top: 0px
+        right: 0px
+
+.media-audio
+    border-radius: 5px
+    height: 5em
+    width: 20em
+
+video
+    height: 12em