From f5565f5df0fc55e74e38501239395e0d6a09c443 Mon Sep 17 00:00:00 2001
From: abdussamedulutas <zences-software@hotmail.com>
Date: Wed, 17 Jun 2026 14:03:42 +0300
Subject: [PATCH] =?UTF-8?q?Studio:=20gelen=20ak=C4=B1=C5=9F=20fix=20+=20se?=
 =?UTF-8?q?s=20k=C4=B1sma=20kontrol=C3=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

_watchIncoming: _ensureRTC(peer) çağrısı eklendi
  - Önceden RTC başlatılmıyordu → gelen :rtcpack: sinyalleri receive() içinde
    _neg=null nedeniyle sessizce düşüyordu → track olayı hiç ateşlenmiyordu
  - Şimdi kabul/eşleşme anında RTC başlatılıyor (polite = küçük socketId)
  - Gelen offer'ı Negotiator işleyebiliyor → answer gönderiliyor → track geliyor

_addRemoteTile yeniden yazıldı:
  - streams parametresi eklendi (RTCPeerConnection'ın streams dizisi kullanılır)
  - Video: <video autoplay> (muted=false, gerçek ses çalar)
  - Ses: gizli <audio autoplay> + görsel tile (graphic_eq ikonu)
  - Ses kıs/aç butonu (volume_up ↔ volume_off, Material Icons)
  - Kapatınca audio.srcObject=null + remove() (bellek sızıntısı önlendi)
  - Track ended → tile otomatik kalkar

CSS:
  .mwse-stream-tile__mute (yeşil=açık, kırmızı=sessiz)
  .mwse-stream-tile__close Material Icons 'close' metni

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/studio/Studio.js | 97 ++++++++++++++++++++++++++++++++---------
 public/studio/style.css | 18 +++++++-
 2 files changed, 94 insertions(+), 21 deletions(-)

diff --git a/public/studio/Studio.js b/public/studio/Studio.js
index 9af5359..ba9d66b 100644
--- a/public/studio/Studio.js
+++ b/public/studio/Studio.js
@@ -175,30 +175,83 @@ export default class Studio {
         this._updatePanelVisibility();
     }
 
-    // Uzak (gelen) track tile'ı ekle
-    _addRemoteTile(track, peerLabel) {
+    // Uzak (gelen) track tile'ı → ses kontrollü
+    _addRemoteTile(track, streams, peerLabel) {
         const isVideo = track.kind === 'video';
-        const stream  = new MediaStream([track]);
-        const tile = this._makeTile(
-            isVideo ? 'Video' : 'Ses',
-            `← ${peerLabel}`,
-            stream,
-            isVideo,
-            !isVideo,       // ses tile'ı için muted değil (çalması lazım)
-            () => tile.remove() && this._updatePanelVisibility()
-        );
-        // Ses için görünmez <audio> da ekle
-        if (!isVideo) {
-            const audio = new Audio();
-            audio.autoplay = true;
-            audio.srcObject = stream;
-            document.body.appendChild(audio);
+        const stream  = streams?.[0] ?? new MediaStream([track]);
+
+        const tile = document.createElement('div');
+        tile.className = `mwse-stream-tile${isVideo ? '' : ' mwse-stream-tile--audio'}`;
+
+        // Media element
+        let mediaEl;
+        if (isVideo) {
+            mediaEl = document.createElement('video');
+            mediaEl.autoplay = true;
+            mediaEl.playsInline = true;
+            mediaEl.muted = false;
+            mediaEl.srcObject = stream;
+            mediaEl.className = 'mwse-stream-tile__video';
+            tile.appendChild(mediaEl);
+        } else {
+            // Ses: görünür tile + gizli <audio> elemanı
+            mediaEl = document.createElement('audio');
+            mediaEl.autoplay = true;
+            mediaEl.muted = false;
+            mediaEl.srcObject = stream;
+            document.body.appendChild(mediaEl);
+
+            const icon = document.createElement('div');
+            icon.className = 'mwse-stream-tile__audio-icon';
+            icon.textContent = 'graphic_eq';
+            tile.appendChild(icon);
         }
+
+        // Alt bilgi çubuğu: etiket + ses kıs/aç + kapat
+        const info = document.createElement('div');
+        info.className = 'mwse-stream-tile__info';
+
+        const lbl = document.createElement('span');
+        lbl.className = 'mwse-stream-tile__label';
+        lbl.textContent = isVideo ? 'Video' : 'Ses';
+
+        const peerEl = document.createElement('span');
+        peerEl.className = 'mwse-stream-tile__peer';
+        peerEl.textContent = `← ${peerLabel}`;
+
+        // Ses kısma butonu
+        const muteBtn = document.createElement('span');
+        muteBtn.className = 'mwse-stream-tile__mute';
+        muteBtn.textContent = 'volume_up';
+        muteBtn.title = 'Sesi kıs / aç';
+        let muted = false;
+        muteBtn.addEventListener('click', e => {
+            e.stopPropagation();
+            muted = !muted;
+            mediaEl.muted = muted;
+            muteBtn.textContent = muted ? 'volume_off' : 'volume_up';
+            muteBtn.classList.toggle('mwse-stream-tile__mute--off', muted);
+        });
+
+        const closeBtn = document.createElement('span');
+        closeBtn.className = 'mwse-stream-tile__close';
+        closeBtn.textContent = 'close';
+        closeBtn.title = 'Tile kapat';
+        closeBtn.addEventListener('click', e => {
+            e.stopPropagation();
+            if (!isVideo) { mediaEl.srcObject = null; mediaEl.remove(); }
+            tile.remove();
+            this._updatePanelVisibility();
+        });
+
+        info.append(lbl, peerEl, muteBtn, closeBtn);
+        tile.appendChild(info);
         this._remoteGrid.appendChild(tile);
         this._updatePanelVisibility();
 
-        // Track bitince tile'ı kaldır
+        // Track kapandığında tile'ı kaldır
         track.addEventListener('ended', () => {
+            if (!isVideo) { mediaEl.srcObject = null; mediaEl.remove(); }
             tile.remove();
             this._updatePanelVisibility();
         });
@@ -604,8 +657,12 @@ export default class Studio {
 
     // Gelen track'leri izle → panel'e ekle
     _watchIncoming(peer) {
-        peer.rtc.on('track', track => {
-            this._addRemoteTile(track, this._peerLabel(peer));
+        // RTC başlatılmazsa gelen :rtcpack: sinyalleri receive() içinde _neg=null
+        // nedeniyle sessizce düşer, track olayı hiç ateşlenmez.
+        this._ensureRTC(peer);
+
+        peer.rtc.on('track', (track, streams) => {
+            this._addRemoteTile(track, streams, this._peerLabel(peer));
             this._setStatus('online', `← ${this._peerLabel(peer)} ${track.kind}`);
         });
     }
diff --git a/public/studio/style.css b/public/studio/style.css
index 9529946..4856344 100644
--- a/public/studio/style.css
+++ b/public/studio/style.css
@@ -169,9 +169,25 @@
 
 .mwse-stream-tile__label { color: #ccc; font-weight: 600; flex: 1; }
 .mwse-stream-tile__peer  { color: #555; }
+.mwse-stream-tile__mute {
+    font-family: 'Material Icons Round';
+    font-size: 15px;
+    cursor: pointer;
+    color: #4caf50;
+    padding: 1px 3px;
+    border-radius: 2px;
+    flex-shrink: 0;
+    line-height: 1;
+}
+.mwse-stream-tile__mute:hover { background: #2a2a2a; }
+.mwse-stream-tile__mute--off  { color: #f44336; }
+
 .mwse-stream-tile__close {
-    cursor: pointer; color: #444; font-size: 12px;
+    font-family: 'Material Icons Round';
+    font-size: 14px;
+    cursor: pointer; color: #444;
     padding: 1px 3px; border-radius: 2px;
+    flex-shrink: 0; line-height: 1;
 }
 .mwse-stream-tile__close:hover { background: #333; color: #ccc; }