added a few examples for interfaceConfig

1 files changed, 65 insertions, 0 deletions

diff --git a/index.html b/index.html
index 9107e9b..c26d371 100644
--- a/index.html
+++ b/index.html
@@ -6,16 +6,23 @@
 
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.css"
+        integrity="sha512-KuSX+43gVS5MEIJD2ewtrFPOHqC1PJnL8o2f5ciggPC0JUZ8XV0QXlfArO1mSzKkVFdRjsBDfrTU96C5SuRfqQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"/>
   <link href="style.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"
           integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
           integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
           crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.js"
+          integrity="sha512-1aNp9qKP+hKU/VJwCtYqJP9tdZWbMDN5pEEXXoXT0pTAxZq1HHZhNBR/dtTNSrHO4U1FsFGGILbqG1O9nl8Mdg=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="roomname_generator.js"></script>
   <script src="jitsi_url_generator.js"></script>
   <script>
     const DEFAULT_DOMAIN = "meet.jit.si";
+    const DEFAULT_BACKGROUND = "#336699";
     const DEFAULT_ROOM_NAME = randomRoomName();
 
     $(document).ready(function () {
@@ -105,6 +112,37 @@
       $startVideoMuted.on("input", featureChanged);
       $disableNotifications.on("input", featureChanged);
 
+      // Handle interface change
+      const $horizontalFilmstrip = $("#horizontalFilmstrip");
+      const $changeBackground = $("#changeBackground");
+      const $backgroundPicker = $("#backgroundPicker");
+      const $codeInterface = $("#codeInterface");
+
+      $backgroundPicker.val(DEFAULT_BACKGROUND);
+      $backgroundPicker.spectrum({
+        color: DEFAULT_BACKGROUND,
+        preferredFormat: "hex",
+        showInput: true,
+      });
+
+      function interfaceChanged() {
+        let paramGroup = {};
+
+        if ($horizontalFilmstrip.prop('checked')) {
+          paramGroup['interfaceConfig.VERTICAL_FILMSTRIP'] = false;
+        }
+
+        if ($changeBackground.prop('checked')) {
+          paramGroup['interfaceConfig.DEFAULT_BACKGROUND'] = '"' + $backgroundPicker.val() + '"';
+        }
+
+        $codeInterface.text(flattenParamGroup(paramGroup).join('&'));
+        generator.updateParamGroup('interface', paramGroup);
+      }
+      $horizontalFilmstrip.on("input", interfaceChanged);
+      $changeBackground.on("input", interfaceChanged);
+      $backgroundPicker.on("change", interfaceChanged);
+
       // Handle custom toolbars
       const TOOLBAR_ITEMS = [  // use array instead of object so we can influence display order.
         ["microphone", "Microphone"],
@@ -302,6 +340,33 @@
           </div>
         </div>
       </div>
+
+      <div class="card mb-4">
+        <div class="card-body">
+          <h5 class="card-title mb-4">Interface</h5>
+          <div class="form-check mb-4">
+            <input class="form-check-input" type="checkbox" value="" id="horizontalFilmstrip">
+            <label class="form-check-label" for="horizontalFilmstrip">
+              Use Horizontal Filmstrip
+            </label>
+          </div>
+
+          <div class="form-check mb-4">
+            <input class="form-check-input" type="checkbox" value="" id="changeBackground">
+            <label class="form-check-label" for="changeBackground">
+              Custom Background Colour <input type='text' id="backgroundPicker"/>
+            </label>
+          </div>
+
+
+        </div>
+        <div class="card-footer">
+          <div style="width:400px;max-width:400px">
+            <code id="codeInterface"></code>
+          </div>
+        </div>
+      </div>
+
     </div>