fix ui and css

3 files changed, 34 insertions, 41 deletions

diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
index 0550e87..5601c56 100644
--- a/client-web/public/assets/style/master.css
+++ b/client-web/public/assets/style/master.css
@@ -55,7 +55,8 @@ input[type="number"] {
     background-color: var(--bg-dark);
     border: 1px solid var(--ac-light);
 }
-input:disabled {
+input:disabled,
+button:disabled {
     filter: sepia(90%);
 }
 
diff --git a/client-web/source/resource/mod.ts b/client-web/source/resource/mod.ts
index 50bc91c..de44823 100644
--- a/client-web/source/resource/mod.ts
+++ b/client-web/source/resource/mod.ts
@@ -23,14 +23,14 @@ export abstract class Resource {
     private _state: ChannelState = "disconnected"
     get state() { return this._state }
     set state(value: ChannelState) {
-        if (value != this._state) this.update_el()
+        const old_value = this._state
         this._state = value
+        if (value != old_value) this.update_el()
     }
 
     destroy() { this.on_destroy() }
 
     abstract create_element(): HTMLElement
-    abstract create_preview(): HTMLElement
 
     static create(user: User, info: ProvideInfo): Resource | undefined {
         if (info.kind == "audio" || info.kind == "video") return new TrackResource(user, info)
diff --git a/client-web/source/resource/track.ts b/client-web/source/resource/track.ts
index b2f73ab..a14525b 100644
--- a/client-web/source/resource/track.ts
+++ b/client-web/source/resource/track.ts
@@ -31,49 +31,41 @@ export class TrackResource extends Resource {
         super.destroy()
     }
 
-    // TODO --- all the following code could be more generic and prettier in the UI ---
-
-    create_preview(): HTMLElement {
-        return ebutton(`Enable ${this.info.kind}`, {
-            onclick: (e) => {
-                (e as HTMLButtonElement).disabled = true;
-                this.request()
-            }
-        })
-    }
     create_element() {
-        if (!this.track) { return this.create_preview() }
         const el = document.createElement("div")
-        el.append(ebutton(`Enable ${this.info.kind}`, {
-            onclick: (e) => {
-                (e as HTMLButtonElement).disabled = true;
-                this.request_stop()
-            }
-        }))
-
-        const is_video = this.track.kind == "video"
-        const media_el = is_video ? document.createElement("video") : document.createElement("audio")
-        const stream = new MediaStream([this.track.track])
-        media_el.srcObject = stream
-        media_el.classList.add("media")
-        media_el.autoplay = true
-        media_el.controls = true
-        if (this.track.local) media_el.muted = true
-        el.append(media_el)
+        if (!this.track?.local) {
+            el.append(ebutton(`${this.track ? "Disable" : "Enable"} ${this.info.kind}`, {
+                onclick: (e) => {
+                    (e as HTMLButtonElement).disabled = true;
+                    this.track ? this.request_stop() : this.request()
+                }
+            }))
+        }
+        if (this.track) {
+            const is_video = this.track.kind == "video"
+            const media_el = is_video ? document.createElement("video") : document.createElement("audio")
+            const stream = new MediaStream([this.track.track])
+            media_el.srcObject = stream
+            media_el.classList.add("media")
+            media_el.autoplay = true
+            media_el.controls = true
+            if (this.track.local) media_el.muted = true
+            el.append(media_el)
 
-        if (this.track.local) {
-            const end_button = document.createElement("button")
-            end_button.textContent = "End"
-            end_button.addEventListener("click", () => {
-                this.track?.end()
+            if (this.track.local) {
+                const end_button = document.createElement("button")
+                end_button.textContent = "End"
+                end_button.addEventListener("click", () => {
+                    this.track?.end()
+                })
+                el.append(end_button)
+            }
+            this.el.append(el)
+            this.track.addEventListener("ended", () => {
+                media_el.srcObject = null // TODO
+                el.remove()
             })
-            el.append(end_button)
         }
-        this.el.append(el)
-        this.track.addEventListener("ended", () => {
-            media_el.srcObject = null // TODO
-            el.remove()
-        })
         return el
     }
 }
\ No newline at end of file