From 277a5314ccd5f48f608a128c76e066099b9a4412 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Sat, 30 Aug 2025 23:49:28 +0300
Subject: [PATCH] Classroom video ve audio foreach

---
 ui/src/services/classroom/webrtc.ts   | 35 +++++------
 ui/src/views/classroom/RoomDetail.tsx | 87 +++++++--------------------
 2 files changed, 36 insertions(+), 86 deletions(-)

diff --git a/ui/src/services/classroom/webrtc.ts b/ui/src/services/classroom/webrtc.ts
index cf2862ef..8c204e74 100644
--- a/ui/src/services/classroom/webrtc.ts
+++ b/ui/src/services/classroom/webrtc.ts
@@ -16,29 +16,24 @@ export class WebRTCService {
    */
   async initializeLocalStream(enableAudio: boolean, enableVideo: boolean): Promise<MediaStream> {
     try {
-      // Eğer kamera ve mikrofon kapalıysa, getUserMedia çağrısı yapmaya gerek yok
-      if (!enableAudio && !enableVideo) {
-        this.localStream = new MediaStream()
-        return this.localStream
-      }
-
+      // her zaman hem ses hem video al
       this.localStream = await navigator.mediaDevices.getUserMedia({
-        video: enableVideo
-          ? {
-              width: { ideal: 1280 },
-              height: { ideal: 720 },
-              frameRate: { ideal: 30 },
-            }
-          : false,
-        audio: enableAudio
-          ? {
-              echoCancellation: true,
-              noiseSuppression: true,
-              autoGainControl: true,
-            }
-          : false,
+        video: {
+          width: { ideal: 1280 },
+          height: { ideal: 720 },
+          frameRate: { ideal: 30 },
+        },
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true,
+        },
       })
 
+      // başlangıç ayarlarını uygula
+      this.localStream.getAudioTracks().forEach((track) => (track.enabled = enableAudio))
+      this.localStream.getVideoTracks().forEach((track) => (track.enabled = enableVideo))
+
       return this.localStream
     } catch (error) {
       console.error('Error accessing media devices:', error)
diff --git a/ui/src/views/classroom/RoomDetail.tsx b/ui/src/views/classroom/RoomDetail.tsx
index 94bdf2a5..2e67f134 100644
--- a/ui/src/views/classroom/RoomDetail.tsx
+++ b/ui/src/views/classroom/RoomDetail.tsx
@@ -674,29 +674,6 @@ const RoomDetail: React.FC = () => {
     setActiveSidePanel(activeSidePanel === panelType ? null : panelType)
   }
 
-  // Demo: Simulate student joining
-  const simulateStudentJoin = async () => {
-    const studentNames = ['Ahmet Yılmaz', 'Fatma Demir', 'Mehmet Kaya', 'Ayşe Özkan', 'Ali Çelik']
-    const availableNames = studentNames.filter((name) => !participants.some((p) => p.name === name))
-
-    if (availableNames.length === 0) {
-      alert('Tüm demo öğrenciler zaten sınıfta!')
-      return
-    }
-
-    const randomName = availableNames[Math.floor(Math.random() * availableNames.length)]
-    const studentId = crypto.randomUUID() // Guid formatında id üretiliyor
-
-    // SignalR üzerinden joinClass çağrılıyor
-    await signalRServiceRef.current?.joinClass(
-      classSession.id,
-      studentId,
-      randomName,
-      false, // öğrenci
-      true, // aktif
-    )
-  }
-
   const handleSettingsChange = (newSettings: Partial<ClassroomSettingsDto>) => {
     setClassSettings((prev) => ({ ...prev, ...newSettings }))
   }
@@ -1040,15 +1017,17 @@ const RoomDetail: React.FC = () => {
                           setMobileMenuOpen(false)
                           setTimeout(() => toggleSidePanel('participants'), 200)
                         }}
-                        className={`flex items-center space-x-2 p-3 rounded-lg transition-all text-base ${activeSidePanel === 'participants' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}`}
+                        className={`flex items-center space-x-2 p-3 rounded-lg transition-all text-base relative ${activeSidePanel === 'participants' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}`}
                       >
                         <FaUserFriends />
                         <span>Katılımcılar</span>
-                        <span className="absolute -top-1 -right-1 bg-blue-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
-                          {participants.length}
+                        {/* Katılımcı adedi badge */}
+                        <span className="absolute top-2 right-3 bg-blue-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
+                          {participants.length + 1}
                         </span>
+                        {/* El kaldıran badge */}
                         {raisedHandsCount > 0 && (
-                          <span className="absolute -top-1 -right-6 bg-yellow-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
+                          <span className="absolute top-2 right-8 bg-yellow-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
                             {raisedHandsCount > 9 ? '9+' : raisedHandsCount}
                           </span>
                         )}
@@ -1081,27 +1060,16 @@ const RoomDetail: React.FC = () => {
                         <FaWrench /> <span>Ayarlar</span>
                       </button>
                       {user.role === 'teacher' && (
-                        <>
-                          <button
-                            onClick={() => {
-                              setMobileMenuOpen(false)
-                              setTimeout(() => simulateStudentJoin(), 200)
-                            }}
-                            className="flex items-center space-x-2 p-3 rounded-lg transition-all hover:bg-gray-100 text-gray-700 text-base"
-                          >
-                            <FaUserPlus /> <span>Öğrenci Ekle (Demo)</span>
-                          </button>
-                          <button
-                            onClick={() => {
-                              setMobileMenuOpen(false)
-                              setTimeout(() => handleMuteAll(), 200)
-                            }}
-                            className="flex items-center space-x-2 p-3 rounded-lg transition-all hover:bg-gray-100 text-gray-700 text-base"
-                          >
-                            {isAllMuted ? <FaVolumeUp /> : <FaVolumeMute />}{' '}
-                            <span>{isAllMuted ? 'Hepsinin Sesini Aç' : 'Hepsini Sustur'}</span>
-                          </button>
-                        </>
+                        <button
+                          onClick={() => {
+                            setMobileMenuOpen(false)
+                            setTimeout(() => handleMuteAll(), 200)
+                          }}
+                          className="flex items-center space-x-2 p-3 rounded-lg transition-all hover:bg-gray-100 text-gray-700 text-base"
+                        >
+                          {isAllMuted ? <FaVolumeUp /> : <FaVolumeMute />}{' '}
+                          <span>{isAllMuted ? 'Hepsinin Sesini Aç' : 'Hepsini Sustur'}</span>
+                        </button>
                       )}
                       <button
                         onClick={() => {
@@ -1205,14 +1173,8 @@ const RoomDetail: React.FC = () => {
                 </button>
               </div>
 
-              {/* Right Side - Panel Controls & Participant Count */}
+              {/* Right Side - Panel Controls */}
               <div className="flex items-center space-x-2 absolute right-0">
-                {/* Participant Count */}
-                <div className="text-white text-sm mr-2">
-                  <FaUsers size={14} className="inline mr-1" />
-                  {participants.length + 1}
-                </div>
-
                 {/* Fullscreen Toggle */}
                 <button
                   onClick={toggleFullscreen}
@@ -1262,7 +1224,7 @@ const RoomDetail: React.FC = () => {
                 {/* Participants */}
                 <button
                   onClick={() => toggleSidePanel('participants')}
-                  className={`p-2 rounded-lg transition-all ${
+                  className={`p-2 rounded-lg transition-all relative ${
                     activeSidePanel === 'participants'
                       ? 'bg-blue-600 text-white'
                       : 'bg-gray-700 hover:bg-gray-600 text-white'
@@ -1270,9 +1232,11 @@ const RoomDetail: React.FC = () => {
                   title="Katılımcılar"
                 >
                   <FaUserFriends size={14} />
+                  {/* Katılımcı adedi badge */}
                   <span className="absolute -top-1 -right-1 bg-blue-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
-                    {participants.length}
+                    {participants.length + 1}
                   </span>
+                  {/* El kaldıran badge */}
                   {raisedHandsCount > 0 && (
                     <span className="absolute -top-1 -right-6 bg-yellow-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
                       {raisedHandsCount > 9 ? '9+' : raisedHandsCount}
@@ -1304,15 +1268,6 @@ const RoomDetail: React.FC = () => {
                     >
                       {isAllMuted ? <FaVolumeUp size={14} /> : <FaVolumeMute size={14} />}
                     </button>
-
-                    {/* Add Student Demo Button */}
-                    <button
-                      onClick={simulateStudentJoin}
-                      className="p-2 rounded-lg transition-all bg-gray-700 hover:bg-gray-600 text-white"
-                      title="Öğrenci Ekle (Demo)"
-                    >
-                      <FaUserPlus size={14} />
-                    </button>
                   </>
                 )}