v1

author: Shawn <shawn@qwil.io> 2021-09-17 22:58:39 +0100
committer: Shawn <shawn@qwil.io> 2021-09-17 22:58:39 +0100
commit: a7a7b8212ef97b1d7c3b4960fae417cbcc0058de (patch)
tree: c7e2a6620a14177413e7561e124f99034e28ccb4 /index.html
1 files changed, 398 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..13a5b85
--- /dev/null
+++ b/index.html
@@ -0,0 +1,398 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Jitsi URL Generator</title>
+
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+  <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="roomname_generator.js"></script>
+  <script src="jitsi_url_generator.js"></script>
+  <script>
+    const DEFAULT_DOMAIN = "meet.jit.si";
+    const DEFAULT_ROOM_NAME = randomRoomName();
+
+    $(document).ready(function () {
+
+      const generator = makeUrlGenerator(function (url) {
+        $('#url').attr('href', url).text(url);
+      }, DEFAULT_DOMAIN, DEFAULT_ROOM_NAME);
+
+      // Handle changes to Jitsi Hostname
+      $('#jitsiDomain')
+        .val(DEFAULT_DOMAIN)
+        .on("input", function () {
+          generator.updateDomain(this.value);
+        });
+
+      // Handle changes to room name
+      $('#roomName')
+        .val(DEFAULT_ROOM_NAME)
+        .on("input", function () {
+          generator.updateRoomName(this.value);
+        });
+
+      // Regenerate random room name
+      $('#monster').on('click', function () {
+        $('#roomName').val(randomRoomName()).trigger("input");
+      });
+
+      // Handle user profile changes
+      const $userInfoDisplayName = $("#userInfoDisplayName");
+      const $userInfoEmail = $("#userInfoEmail");
+      const $codeUserInfo = $("#codeUserInfo");
+
+      function userProfileChanged() {
+        let paramGroup = {};
+        let displayName = $userInfoDisplayName.val().trim();
+        let email = $userInfoEmail.val().trim();
+
+        if (displayName) {
+          paramGroup['userInfo.displayName'] = '"' + displayName + '"';
+        }
+
+        if (email) {
+          paramGroup['userInfo.email'] = '"' + email + '"';
+        }
+
+        $codeUserInfo.text(encodeParamGroup(paramGroup).join('&'));
+        generator.updateParamGroup('userInfo', paramGroup);
+      }
+
+      $userInfoDisplayName.on("input", userProfileChanged);
+      $userInfoEmail.on("input", userProfileChanged);
+
+      // Handle feature changes
+      const $disablePrejoinPage = $("#disablePrejoinPage");
+      const $startAudioMuted = $("#startAudioMuted");
+      const $startVideoMuted = $("#startVideoMuted");
+      const $disableNotifications = $("#disableNotifications");
+      const $codeFeatures = $("#codeFeatures");
+
+      function featureChanged() {
+        let paramGroup = {};
+
+        if ($disablePrejoinPage.prop('checked')) {
+          paramGroup['config.prejoinPageEnabled'] = false;
+        }
+
+        if ($startAudioMuted.prop('checked')) {
+          paramGroup['config.startWithAudioMuted'] = true;
+        }
+
+        if ($startVideoMuted.prop('checked')) {
+          paramGroup['config.startWithVideoMuted'] = true;
+        }
+
+        if ($disableNotifications.prop('checked')) {
+          paramGroup['config.notifications'] = '[]';
+        }
+
+        $codeFeatures.text(encodeParamGroup(paramGroup).join('&'));
+        generator.updateParamGroup('features', paramGroup);
+      }
+
+      $disablePrejoinPage.on("input", featureChanged);
+      $startAudioMuted.on("input", featureChanged);
+      $startVideoMuted.on("input", featureChanged);
+      $disableNotifications.on("input", featureChanged);
+
+      // Handle custom toolbars
+      const TOOLBAR_ITEMS = [  // use array instead of object so we can influence display order.
+        ["microphone", "Microphone"],
+        ["camera", "Camera"],
+        ["desktop", "Screenshare"],
+        ["hangup", "Leave Meeting"],
+        ["chat", "Chat"],
+        ["raisehand", "Raise Hand"],
+        ["participants-pane", "Participants"],
+        ["tileview", "Toggle Tile View"],
+        ["toggle-camera", "Toggle Camera"],
+        ["profile", "Profile"],
+        ["invite", "Invite"],
+        ["videoquality", "Manage Video Quality"],
+        ["fullscreen", "View Full Screen"],
+        ["security", "Security Options"],
+        ["recording", "Recording"],
+        ["livestreaming", "Live Streaming"],
+        ["closedcaptions", "Closed Caption"],
+        ["etherpad", "Etherpad"],
+        ["mute-everyone", "Mute Everyone"],
+        ["mute-video-everyone", "Disable Everyone's Camera"],
+        ["sharedvideo", "Share Video"],
+        ["shareaudio", "Share Audio"],
+        ["select-background", "Select Background"],
+        ["stats", "Speaker Stats"],
+        ["settings", "Settings"],
+        ["shortcuts", "View Shortcuts"],
+        ["embedmeeting", "Embed Meeting"],
+        ["feedback", "Leave Feedback"],
+        ["help", "Help"],
+        ["download", "Download App"],
+        ["filmstrip", "Filmstrip"],
+      ];
+
+      let $toolbarCheckboxContainer = $('#toolbarCheckboxContainer');
+      let $codeToolbar = $('#codeToolbar');
+
+
+      function toolbarChanged() {
+        let paramGroup = {};
+        let $checkedFeatures = $('.feature-checkbox:checked');
+        if ($checkedFeatures.length !== $('.feature-checkbox').length) {  // if not all selected
+          let selected = [];
+          $checkedFeatures.each(function () {
+            selected.push($(this).data('key'));
+          });
+
+          paramGroup['config.toolbarButtons'] = (selected.length === 0) ? '[]' : '["' + selected.join('","') + '"]';
+        }
+        $codeToolbar.text(encodeParamGroup(paramGroup).join('&'));
+        generator.updateParamGroup('toolbar', paramGroup);
+      }
+
+      function updateAllToolbarItems(enabled) {
+        $('.feature-checkbox').each(function () {
+          $(this).prop('checked', enabled);
+        });
+        toolbarChanged();
+      }
+
+      TOOLBAR_ITEMS.forEach(function (pair) {
+        let key = pair[0], description = pair[1];
+        let id = 't_' + key;
+
+        let checkbox = $('<input>', {
+          class: 'form-check-input feature-checkbox',
+          type: 'checkbox',
+          id: id
+        })
+          .prop('checked', true)
+          .data('key', key)
+          .on('change', toolbarChanged);
+
+        $('<div>', { class: "form-check form-switch" }).append(checkbox).append(
+          $('<label>', { class: 'form-check-label', for: id }).text(description)
+        ).appendTo($toolbarCheckboxContainer);
+      });
+
+      $('#enableAllToolbarItems').on('click', function () {
+        updateAllToolbarItems(true);
+      });
+
+      $('#disableAllToolbarItems').on('click', function () {
+        updateAllToolbarItems(false);
+      });
+
+    });
+  </script>
+</head>
+<body>
+
+<div class="px-4 py-3 my-3 text-center">
+  <h1 class="display-5 fw-bold">Jitsi URL Generator</h1>
+
+  <div class="col-lg-6 mx-auto mt-5">
+    <div class="mb-3 row">
+      <label for="jitsiDomain" class="col-sm-4 col-form-label">Jitsi Hostname</label>
+      <div class="col-sm-8">
+        <input type="text" class="form-control" id="jitsiDomain">
+      </div>
+    </div>
+    <div class="mb-3 row">
+      <label for="roomName" class="col-sm-4 col-form-label">Room Name</label>
+      <div class="col-sm-8">
+
+        <div class="input-group mb-3">
+
+          <input type="text" class="form-control" id="roomName">
+          <span class="input-group-text" id="monster">
+            <img
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAB00lEQVRIie3UPWtVQRAG4CeawmCpXMH4EQgWIX43gmAKLazEysbO/AALf0BE7CzVWkOKCxe1Ma0plZhCVPAiihAkEhQ1jQYFvddi5ySbw7nHRDvxhWX2zHlnZmdnZvnXsIQuBjPdUdxEG19itXEDRzLeYNgu1QVoBWkKuzCJTuiqVge3wvlU6Fq5w75SgIN4hK2ZbhlNzOFj6LbjGM5jION+xXE87xWAdCX341TzuIzPPTLehivYiwWcxZOcsKmH4c44eZ1z+BScb2HTKROqAoxLmTV/4zwP0gxf4+sJcCrkXMhrscrI9bMl2xX0VxjuDlkUtOiYMnJ9wd1TJpWL3MD72J+pcFqH6ZA78KFQ5lfUwEzs2xt0ntvMhC+sZtDAAxzAK0xIPZ3jttT/pCu5UPo/IHXUKF7iJBY3x4+H2B+nmJBatIyF4CxLT8di6f8PaUhHMYLTmOyLLOalAl2M/SE8rQhSh8N4hiFcx1sM9UudcBeXcE4amGEbL/JVvMG7+L6HblHkOyFPhPM/xTDGYt9idQ4eSyl9x74Kw+kKHdVZvsYWMahFgG6QX0jF+huMSM3QzQOQPbE1KNq6arIL/JSKvcYgR53xegKs8dnruf6PFfwC6NhvLfV5B6cAAAAASUVORK5CYII="/>
+          </span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="col-lg-8 mx-auto mt-3">
+    <div class="fs-4">
+      <code>
+        <a id="url" class="url" href='' target="jitsiUrlGenerator"></a>
+      </code>
+    </div>
+  </div>
+
+</div>
+
+
+<div class="divider"></div>
+
+<div class="container my-5">
+
+  <div class="row">
+    <div class="col">
+
+      <div class="card mb-4">
+        <div class="card-body">
+          <h5 class="card-title mb-4">User Profile</h5>
+
+          <label for="userInfoDisplayName" class="col-sm-4 ol-form-label">Display Name</label>
+          <input type="text" class="form-control" id="userInfoDisplayName" value="">
+
+          <label for="userInfoEmail" class="col-form-label">Email</label>
+          <input type="email" class="form-control" id="userInfoEmail" value="">
+        </div>
+        <div class="card-footer">
+          <div style="width:400px;max-width:400px">
+            <code id="codeUserInfo"></code>
+          </div>
+        </div>
+      </div>
+
+      <div class="card mb-4">
+        <div class="card-body">
+          <h5 class="card-title mb-4">Features</h5>
+          <div class="form-check mb-4">
+            <input class="form-check-input" type="checkbox" value="" id="disablePrejoinPage">
+            <label class="form-check-label" for="disablePrejoinPage">
+              Disable PreJoin page
+            </label>
+            <br/>
+            <small class="text-muted">
+              By default, users start at prejoin page where they enter their display name and update settings
+              before joining a meeting. Select this to skip that page.
+            </small>
+          </div>
+
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" value="" id="startAudioMuted">
+            <label class="form-check-label" for="startAudioMuted">
+              Start with Audio Muted
+            </label>
+          </div>
+
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" value="" id="startVideoMuted">
+            <label class="form-check-label" for="startVideoMuted">
+              Start with Camera off
+            </label>
+          </div>
+
+          <div class="form-check mt-4">
+            <input class="form-check-input" type="checkbox" value="" id="disableNotifications">
+            <label class="form-check-label" for="disableNotifications">
+              Disable all notifications
+            </label>
+          </div>
+
+        </div>
+        <div class="card-footer">
+          <div style="width:400px;max-width:400px">
+            <code id="codeFeatures"></code>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="col">
+
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title mb-4">Customise Toolbar Buttons</h5>
+
+          <div id="toolbarCheckboxContainer"></div>
+
+          <div class="my-3 text-center">
+            <button type="button" class="btn btn-sm btn-outline-primary mx-2" id="enableAllToolbarItems">Enable all
+            </button>
+            <button type="button" class="btn btn-sm btn-outline-secondary mx-2" id="disableAllToolbarItems">Disable
+              all
+            </button>
+          </div>
+
+          <div class="mt-3">
+            <small class="text-muted" style="width:400px;max-width:400px">
+              Things to note:
+              <ul>
+                <li>Not all items are displayed even if selected as some will depend on whether the feature is enabled,
+                  the user role, or even the user device.
+                </li>
+                <li>
+                  It is not possible to change the order of items in the toolbar.
+                </li>
+                <li>
+                  It is not possible to contorl which items end up in the "More actions" menu.
+                </li>
+              </ul>
+            </small>
+          </div>
+        </div>
+        <div class="card-footer">
+          <div style="width:400px;max-width:400px">
+            <code id="codeToolbar"></code>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+</div>
+
+
+<div class="divider"></div>
+
+<div class="bg-dark text-white px-4 py-5">
+  <div class="col-lg-6 mx-auto">
+    <div class="fs-6 mb-4">
+      <p>
+        👋 Hi there. I hope you found this useful.
+      </p>
+      <p>
+        Do note that this page exposes only a small subset of url-based
+        config overrides afforded by Jitsi. It also makes assumptions about default config values as configured on
+        <a href="https://meet.jit.si">meet.jit.si</a>.
+      </p>
+
+      <p>
+        The intent of this page is to simply illustrate how options should be formatted and composed, and offer
+        examples of some of the more common settings.
+      </p>
+
+      <p>
+        For a complete list, see
+        <a href="https://github.com/jitsi/jitsi-meet/blob/master/react/features/base/config/configWhitelist.js">
+          configWhitelist.js</a>
+        and
+        <a href="https://github.com/jitsi/jitsi-meet/blob/master/react/features/base/config/interfaceConfigWhitelist.js">
+          interfaceConfigWhitelist.js</a>
+        for a complete list of whitelisted configs. Also see the
+        <a href="https://github.com/jitsi/jitsi-meet/blob/master/config.js">
+          config.js</a>
+        and
+        <a href="https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js">
+          interface_config.js</a>
+        config templates which will contain description of each option and their defaults.
+
+      </p>
+
+      <p>
+        If you spot any issues or outdated options, do feel free to send a me PR :)
+      </p>
+    </div>
+  </div>
+</div>
+</div>
+
+
+</body>
+</html>
+\ No newline at end of file
author	Shawn <shawn@qwil.io>	2021-09-17 22:58:39 +0100
committer	Shawn <shawn@qwil.io>	2021-09-17 22:58:39 +0100
commit	a7a7b8212ef97b1d7c3b4960fae417cbcc0058de (patch)
tree	c7e2a6620a14177413e7561e124f99034e28ccb4 /index.html