<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="bees.ico" type="image/x-icon">
  <link rel="stylesheet" href="videochat.css">
  <!-- Set the ROOM_ID variable to the roomId that is passed in by server.js -->
  <script>
    const ROOM_ID = "<%= roomId %>"
  </script>
  <!-- CDN in the peerJS and socket.io libraries -->
  <script defer src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
  <script src="/socket.io/socket.io.js" defer></script>
  <!-- Load in script2.js, our client-side script -->
  <script src="script2.js" defer></script>
  <title>Calling Portion</title>
  <!-- Make a grid of 300x300 videos  -->
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    #video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 300px);
      grid-auto-rows: 300px;
      justify-content: center;
      gap: 20px;
    }

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #controls {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }

    #muteButton {
      background-color: #f44336;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
    }

    #muteButton.muted {
      background-color: #4CAF50;
    }
  </style>
</head>
<body>
  <div class="sidenav">
    <a href="/home"><b>Home</b></a>
  </div>
  <h4>Video Call</h4>
  <div id="video-grid"></div>
  <div id="controls">
    <div>
      <label>
        <style>
          label2 {
            color: white;
          }
        </style>
        <label2>
          Audio Call
        </label2>       
      </label>
    </div>
    <div>
      <button id="muteButton" onclick="toggleAudio()">Mute</button>
    </div>
  </div>
 <br>
  <p>Audio/Video input and output will be determined by system and browser.</p>
  <p>Selection within Browser is in development.</p>

  <script>
    const muteButton = document.getElementById('muteButton');

    videoToggle.addEventListener('change', () => {
      toggleVideo();
    });

    function toggleAudio() {
      const stream = localStream.getAudioTracks()[0];
      if (stream.enabled) {
        stream.enabled = false;
        muteButton.classList.add('muted');
      } else {
        stream.enabled = true;
        muteButton.classList.remove('muted');
      }
    }
  </script>
