2 files changed, 20 insertions, 1 deletions
diff --git a/client-web/source/resource/mod.ts b/client-web/source/resource/mod.ts
index d437260..3091a45 100644
--- a/client-web/source/resource/mod.ts
+++ b/client-web/source/resource/mod.ts
@@ -9,6 +9,8 @@ export type ChannelState = "running" | "disconnected"
 
 export abstract class Resource {
     el: HTMLElement = ediv({ class: ["channel"] })
+    on_destroy = () => { }
+
     constructor(
         public user: User,
         public info: ProvideInfo,
@@ -23,6 +25,8 @@ export abstract class Resource {
         this._state = value
     }
 
+    destroy() { this.on_destroy() }
+
     abstract create_element(): HTMLElement
     abstract create_preview(): HTMLElement
 
diff --git a/client-web/source/resource/track.ts b/client-web/source/resource/track.ts
index ee87917..f58e020 100644
--- a/client-web/source/resource/track.ts
+++ b/client-web/source/resource/track.ts
@@ -1,12 +1,27 @@
 import { ProvideInfo } from "../../../common/packets.d.ts";
 import { ebutton } from "../helper.ts";
 import { TrackHandle } from "../track_handle.ts";
+import { LocalUser } from "../user/local.ts";
 import { User } from "../user/mod.ts";
 import { Resource } from "./mod.ts";
 
 export class TrackResource extends Resource {
-    constructor(user: User, info: ProvideInfo, public track?: TrackHandle) {
+    private _track?: TrackHandle
+    constructor(user: User, info: ProvideInfo, track?: TrackHandle) {
         super(user, info)
+        this.track = track
+    }
+
+    get track() { return this._track }
+    set track(value: TrackHandle | undefined) {
+        const handle_end = () => {
+            this.track = undefined
+            if (this.user instanceof LocalUser) this.destroy()
+        }
+        this._track?.removeEventListener("ended", handle_end)
+        this._track = value
+        this._track?.addEventListener("ended", handle_end)
+        this.update_el()
     }
 
     create_preview(): HTMLElement {