{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later

# This file based on example code from Janus which is
# licensed as follows.
#
# 2014-2025  Meetecho
#
# GPL-3 with OpenSSL exception
# If you modify this Program, or any covered work,
# by linking or combining it with OpenSSL
# (or a modified version of that library),
# containing parts covered by the terms of OpenSSL License,
# the licensors of this Program grant you
# additional permission to convey the resulting work.
# Corresponding Source for a non-source form of such a combination
# shall include the source code for the parts of openssl used
# as well as that of the covered work.
{% endcomment %}

{% load static %}
{% load i18n %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Janus Video Room</title>

    <script type="text/javascript"
            src="/javascript/webrtc-adapter/adapter.min.js" ></script>
    <script type="text/javascript"
            src="/javascript/jquery/jquery.min.js" ></script>
    <script type="text/javascript"
            src="/javascript/popperjs2/popper.min.js"></script>
    <script type="text/javascript"
            src="/javascript/jquery-blockui/jquery.blockUI.min.js" ></script>
    <script type="text/javascript"
            src="/javascript/bootstrap5/js/bootstrap.min.js" ></script>
    <script type="text/javascript"
            src="/javascript/bootbox/bootbox.min.js" ></script>
    <script type="text/javascript"
            src="/javascript/toastr/toastr.min.js" ></script>
    <script type="text/javascript"
            src="{% static 'janus/janus-freedombox-config.js' %}" ></script>
    <script type="text/javascript"
            src="/javascript/janus-gateway/janus.min.js" ></script>
    <script type="text/javascript"
            src="{% static 'janus/janus-video-room.js' %}" ></script>

    <link rel="stylesheet"
          href="/javascript/bootstrap5/css/bootstrap.css"
          type="text/css"/>
    <link rel="stylesheet" href="/javascript/toastr/toastr.min.css"
          type="text/css"/>
    <link rel="stylesheet"
          href="{% static 'janus/janus-video-room.css' %}" type="text/css"/>
    <link rel="stylesheet"
          href="/javascript/font-awesome/css/font-awesome.min.css" type="text/css"/>
  </head>

  <body data-user-turn-config="{{ user_turn_config }}">
    <div class="container" id="content" role="main">
      <div class="row">
        <div class="col-md-12">
          <div class="pb-2 mt-4 mb-2 border-bottom">
            <h1>Janus Video Room
              <button class="btn btn-default" autocomplete="off"
                      id="start">Start</button>
            </h1>
          </div>
        </div>

        <div class="container" id="details">
          <div class="row">
            <div class="col-md-12">
              <h3>Details</h3>
              <p>To use the video room, just insert a username to join
                the default room that is configured. This will add you
                to the list of participants, and allow you to
                automatically send your audio/video frames and receive
                the other participants' feeds. The other participants
                will appear in separate panels, whose title will be
                the names they chose when registering at the video room.</p>
              <p>Press the <code>Start</code> button above to launch
                the video room.</p>
            </div>
          </div>
        </div>

        <div class="container mt-4 hide" id="videojoin">
          <div class="row">
            <span class="badge bg-info" id="you"></span>
            <div class="col-md-12" id="controls">
              <div class="input-group mt-3 mb-1 hide" id="registernow">
                <span class="input-group-text">👤</span>
                <input autocomplete="off" class="form-control"
                       autocomplete="off" type="text"
                       placeholder="Choose a display name"
                       id="username"
                       onkeypress="return checkEnter(this, event);"></input>
                <span class="input-group-btn">
                  <button class="btn btn-success" autocomplete="off"
                          id="register">Join the room</button>
                </span>
              </div>
            </div>
          </div>
        </div>

        <div class="container mt-4 hide" id="videos">
          <div class="row">
            <div class="col-md-4">
              <div class="card">
                <div class="card-header">
                  <span class="card-title">
                    Local Video <span class="badge bg-primary hide"
                                      id="publisher"></span>
                    <div class="btn-group btn-group-sm top-right hide">
                      <div class="btn-group btn-group-sm">
                        <button id="bitrateset" autocomplete="off"
                                class="btn btn-primary
                                       dropdown-toggle"
                                data-bs-toggle="dropdown">
                          Bandwidth
                        </button>
                        <ul id="bitrate" class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="#" id="0">No limit</a>
                          <a class="dropdown-item" href="#" id="128">Cap to 128kbit</a>
                          <a class="dropdown-item" href="#" id="256">Cap to 256kbit</a>
                          <a class="dropdown-item" href="#" id="512">Cap to 512kbit</a>
                          <a class="dropdown-item" href="#" id="1024">Cap to 1mbit</a>
                          <a class="dropdown-item" href="#" id="1500">Cap to 1.5mbit</a>
                          <a class="dropdown-item" href="#" id="2000">Cap to 2mbit</a>
                        </ul>
                      </div>
                    </div>
                  </span>
                </div>
                <div class="card-body" id="videolocal"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card">
                <div class="card-header">
                  <span class="card-title">
                    Remote Video #1 <span class="badge bg-info hide"
                                          id="remote1"></span></span>
                </div>
                <div class="card-body relative" id="videoremote1"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card">
                <div class="card-header">
                  <span class="card-title">
                    Remote Video #2 <span class="badge bg-info hide"
                                          id="remote2"></span></span>
                </div>
                <div class="card-body relative" id="videoremote2"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="card">
                <div class="card-header">
                  <span class="card-title">
                    Remote Video #3 <span class="badge bg-info hide"
                                          id="remote3"></span></span>
                </div>
                <div class="card-body relative" id="videoremote3"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card">
                <div class="card-header">
                  <span class="card-title">
                    Remote Video #4 <span class="badge bg-info hide"
                                          id="remote4"></span></span>
                </div>
                <div class="card-body relative" id="videoremote4"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card">
                <div class="card-header">
                  <span class="card-title">
                    Remote Video #5 <span class="badge bg-info hide"
                                          id="remote5"></span></span>
                </div>
                <div class="card-body relative" id="videoremote5"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <a href="{% static 'jslicense.html' %}" data-jslicense="1">
        {% trans "JavaScript license information" %}</a>
    </div>

  </body>
</html>
