diff options
| -rw-r--r-- | index.html | 65 |
1 files changed, 65 insertions, 0 deletions
@@ -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> |