initEventListeners()

in demo-website/src/meeting.js [170:335]
148 lines of code
12 McCabe index (conditional complexity)

    initEventListeners() {
        window.addEventListener('resize', () => {
            this.layoutVideoTiles();
        });

        document.getElementById('form-authenticate').addEventListener('submit', e => {
            e.preventDefault();
            this.startConnectChat();
        });

        const audioInput = document.getElementById('audio-input');
        audioInput.addEventListener('change', async (_ev) => {
            this.log('audio input device is changed');
            await this.openAudioInputFromSelection();
        });

        const videoInput = document.getElementById('video-input');
        videoInput.addEventListener('change', async (_ev) => {
            this.log('Video input device is changed');
            await this.openVideoInputFromSelection(videoInput.value, true);
        });

        const videoInputQuality = document.getElementById('video-input-quality');
        videoInputQuality.addEventListener('change', async (_ev) => {
            this.log('Video input quality is changed');
            switch (videoInputQuality.value) {
                case '360p':
                    this.audioVideo.chooseVideoInputQuality(640, 360, 15, 600);
                    break;
                case '540p':
                    this.audioVideo.chooseVideoInputQuality(960, 540, 15, 1400);
                    break;
                case '720p':
                    this.audioVideo.chooseVideoInputQuality(1280, 720, 15, 1400);
                    break;
            }
            await this.openVideoInputFromSelection(videoInput.value, true);
        });

        const audioOutput = document.getElementById('audio-output');
        audioOutput.addEventListener('change', async (_ev) => {
            this.log('audio output device is changed');
            await this.openAudioOutputFromSelection();
        });

        document.getElementById('button-test-sound').addEventListener('click', e => {
            e.preventDefault();
            const audioOutput = document.getElementById('audio-output');
            new TestSound(audioOutput.value);
        });

        document.getElementById('form-devices').addEventListener('submit', e => {
            e.preventDefault();
            new AsyncScheduler().start(async () => {
                try {
                    this.showProgress('progress-join');
                    await this.join();
                    this.audioVideo.stopVideoPreviewForVideoInput(document.getElementById('video-preview'));
                    this.audioVideo.chooseVideoInputDevice(null);
                    this.hideProgress('progress-join');
                    this.displayButtonStates();
                    this.switchToFlow('flow-meeting');

                    document.getElementById('content').style.display = 'none';
                } catch (error) {
                    console.error(error);
                    document.getElementById('failed-join').innerHTML = `Meeting ID: ${this.externalMeetingId}`;
                    document.getElementById('failed-join-error').innerHTML = `Error: ${error.message}`;
                }
            });
        });

        const buttonMute = document.getElementById('button-microphone');
        buttonMute.addEventListener('mousedown', _e => {
            if (this.toggleButton('button-microphone')) {
                this.audioVideo.realtimeUnmuteLocalAudio();
            } else {
                this.audioVideo.realtimeMuteLocalAudio();
            }
        });

        const buttonVideo = document.getElementById('button-camera');
        buttonVideo.addEventListener('click', _e => {
            new AsyncScheduler().start(async () => {
                if (this.toggleButton('button-camera') && this.canStartLocalVideo) {
                    await this.openVideoInputFromSelection(null, false);
                    this.audioVideo.startLocalVideoTile();
                } else {
                    this.audioVideo.stopLocalVideoTile();
                    this.hideTile(16);
                }
            });
        });

        const buttonScreenShare = document.getElementById('button-screen-share');
        buttonScreenShare.addEventListener('click', _e => {
            new AsyncScheduler().start(async () => {
                if (this.toggleButton('button-screen-share')) {
                    this.audioVideo.startContentShareFromScreenCapture();
                } else {
                    this.audioVideo.stopContentShare();
                }
            });
        });

        const buttonSpeaker = document.getElementById('button-speaker');
        buttonSpeaker.addEventListener('click', _e => {
            new AsyncScheduler().start(async () => {
                if (this.toggleButton('button-speaker')) {
                    this.audioVideo.bindAudioElement(document.getElementById('meeting-audio'));
                } else {
                    this.audioVideo.unbindAudioElement();
                }
            });
        });

        const buttonMeetingEnd = document.getElementById('button-meeting-end');
        buttonMeetingEnd.addEventListener('click', _e => {
            new AsyncScheduler().start(async () => {
                buttonMeetingEnd.disabled = true;
                this.leave();
                buttonMeetingEnd.disabled = false;

                window.location = window.location.pathname;
            });
        });

        const buttonMeetingLeave = document.getElementById('button-meeting-leave');
        buttonMeetingLeave.addEventListener('click', _e => {
            new AsyncScheduler().start(async () => {
                buttonMeetingLeave.disabled = true;
                this.leave();
                buttonMeetingLeave.disabled = false;

                window.location = window.location.pathname;
            });
        });

        const buttonStartVideo = document.getElementById('start-video-button');
        buttonStartVideo.addEventListener('click', _e => {
            this.log('buttonStartVideo click');
            if (document.getElementById('content').style.display === 'none') {
                document.getElementById('content').style.display = 'flex';
            }
            else {
                document.getElementById('content').style.display = 'none';
            }
        });

        const buttonExpandReference = document.getElementById('button-expand-reference');
        buttonExpandReference.firstElementChild.nextElementSibling.style.display = 'none'
        buttonExpandReference.addEventListener('click', _e => {
            const divExpandReference = document.getElementById('div-expand-reference')
            if (divExpandReference.style.display === 'none') {
                divExpandReference.style.display = 'block'
                divExpandReference.classList.add('mb-3')
                buttonExpandReference.firstElementChild.style.display = 'none'
                buttonExpandReference.firstElementChild.nextElementSibling.style.display = 'inline'
            }
            else {
                divExpandReference.style.display = 'none'
                buttonExpandReference.firstElementChild.nextElementSibling.style.display = 'none'
                buttonExpandReference.firstElementChild.style.display = 'inline'
            }
        })
    }