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

# This file based on example code from Janus which is
# licensed as follows.
#
# 2014-2022  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/jquery-blockui/jquery.blockUI.js" ></script>
    <script type="text/javascript"
            src="/javascript/bootstrap/js/bootstrap.min.js" ></script>
    <script type="text/javascript"
            src="/javascript/bootbox/bootbox.min.js" ></script>
    <script type="text/javascript"
            src="/javascript/spin.js/spin.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/bootswatch/cerulean/bootstrap.min.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"/>
  </head>

  <body data-user-turn-config="{{ user_turn_config }}">
    <div class="container" id="content" role="main">
      <div class="row">
        <div class="col-md-12">
          <h1>Janus Video Room
            <button class="btn btn-default" autocomplete="off"
                    id="start">Start</button>
          </h1>
        </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 hide" id="videojoin">
          <div class="row">
            <span class="label label-info" id="you"></span>
            <div class="col-md-12" id="controls">
              <div class="input-group margin-bottom-md hide" id="registernow">
                <span class="input-group-addon">@</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 hide" id="videos">
          <div class="row">
            <div class="col-md-4">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">
                    Local Video <span class="label label-primary hide"
                                      id="publisher"></span>
                    <div class="btn-group btn-group-xs pull-right hide">
                      <div class="btn-group btn-group-xs">
                        <button id="bitrateset" autocomplete="off"
                                class="btn btn-primary
                                       dropdown-toggle"
                                data-toggle="dropdown">
                          Bandwidth<span class="caret"></span>
                        </button>
                        <ul id="bitrate" class="dropdown-menu" role="menu">
                          <li><a href="#" id="0">No limit</a></li>
                          <li><a href="#" id="128">Cap to 128kbit</a></li>
                          <li><a href="#" id="256">Cap to 256kbit</a></li>
                          <li><a href="#" id="512">Cap to 512kbit</a></li>
                          <li><a href="#" id="1024">Cap to 1mbit</a></li>
                          <li><a href="#" id="1500">Cap to 1.5mbit</a></li>
                          <li><a href="#" id="2000">Cap to 2mbit</a></li>
                        </ul>
                      </div>
                    </div>
                  </h3>
                </div>
                <div class="panel-body" id="videolocal"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">
                    Remote Video #1 <span class="label label-info hide"
                                          id="remote1"></span>
                  </h3>
                </div>
                <div class="panel-body relative" id="videoremote1"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">
                    Remote Video #2 <span class="label label-info hide"
                                          id="remote2"></span>
                  </h3>
                </div>
                <div class="panel-body relative" id="videoremote2"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">
                    Remote Video #3 <span class="label label-info hide"
                                          id="remote3"></span>
                  </h3>
                </div>
                <div class="panel-body relative" id="videoremote3"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">
                    Remote Video #4 <span class="label label-info hide"
                                          id="remote4"></span>
                  </h3>
                </div>
                <div class="panel-body relative" id="videoremote4"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">
                    Remote Video #5 <span class="label label-info hide"
                                          id="remote5"></span>
                  </h3>
                </div>
                <div class="panel-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>
