polyglot/app/views/chat_rooms/show.html.erb

<button onclick="handleJoinSession()" data-room="<%= @chat_room.id %>">Join Room</button>
<!-- <div id="join-session" data-room="<%= @chat_room.id %>"> -->
<!-- <h1 style="color: white;">This is chatroom #<%= @chat_room.id %></h1> -->
<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>

<!-- <button id="test-btn">Test Connection</button> -->
<div class="call-container">
  <div id="remote-video-container">
    <div id="video_overlays">
      <video id="local-video" autoplay></video>
    </div>
  </div>
</div>

<div>
  <span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span>
</div>

<!-- <script>
  const joinSession = document.getElementById("join-session")
  joinSession.addEventListener('load', event => {
    handleJoinSession()
  })
</script> -->


<%= javascript_pack_tag 'chatrooms' %>