++

client/public/call-view-controller.js

@@ -0,0 +1,138 @@
+export function createCallViewController({ store, chatMessage, notify }) {
+    let isBound = false;
+
+    function toggleSidebar() {
+        chatMessage.toggleSidebar();
+    }
+
+    function toggleMute() {
+        const state = store.getState();
+        const currentState = state.session.localUser.mediaState.audio;
+        store.updateLocalMedia('audio', !currentState);
+    }
+
+    function toggleVideo() {
+        const state = store.getState();
+        const currentState = state.session.localUser.mediaState.video;
+        store.updateLocalMedia('video', !currentState);
+    }
+
+    function toggleLocalVideo() {
+        toggleVideo();
+    }
+
+    function toggleRecording() {
+        const state = store.getState();
+        const currentState = state.session.localUser.mediaState.recording || false;
+        store.updateLocalMedia('recording', !currentState);
+
+        if (!currentState) {
+            notify('\u5f00\u59cb\u5f55\u5236');
+        } else {
+            notify('\u505c\u6b62\u5f55\u5236');
+        }
+    }
+
+    function toggleMoreOptions() {
+        const menu = document.getElementById('moreOptionsMenu');
+        if (menu) {
+            menu.classList.toggle('hidden');
+        }
+    }
+
+    function changeResolution(width, height) {
+        store.changeResolution(width, height);
+        const menu = document.getElementById('moreOptionsMenu');
+        if (menu) {
+            menu.classList.add('hidden');
+        }
+    }
+
+    function endCall() {
+        const dialog = document.getElementById('endCallDialog');
+        if (dialog) {
+            dialog.classList.remove('hidden');
+        }
+    }
+
+    function cancelEndCall() {
+        const dialog = document.getElementById('endCallDialog');
+        if (dialog) {
+            dialog.classList.add('hidden');
+        }
+    }
+
+    function confirmEndCall() {
+        cancelEndCall();
+        store.endCall();
+        notify('\u901a\u8bdd\u5df2\u7ed3\u675f');
+    }
+
+    function handleKeydown(event) {
+        if (event.code === 'Space' && !event.target.matches('input, textarea')) {
+            event.preventDefault();
+            toggleMute();
+        }
+
+        if (event.ctrlKey && event.key === 'v') {
+            event.preventDefault();
+            toggleVideo();
+        }
+    }
+
+    function handleDocumentClick(event) {
+        const moreOptionsMenu = document.getElementById('moreOptionsMenu');
+        const moreOptionsButton = document.getElementById('moreOptionsBtn');
+
+        if (
+            moreOptionsMenu &&
+            moreOptionsButton &&
+            !moreOptionsMenu.contains(event.target) &&
+            !moreOptionsButton.contains(event.target)
+        ) {
+            moreOptionsMenu.classList.add('hidden');
+        }
+    }
+
+    function bindButton(buttonId, handler) {
+        const button = document.getElementById(buttonId);
+        if (button && !button.dataset.bound) {
+            button.addEventListener('click', handler);
+            button.dataset.bound = 'true';
+        }
+    }
+
+    function exposeWindowHandlers() {
+        window.toggleSidebar = toggleSidebar;
+        window.toggleMute = toggleMute;
+        window.toggleVideo = toggleVideo;
+        window.toggleLocalVideo = toggleLocalVideo;
+        window.toggleRecording = toggleRecording;
+        window.toggleMoreOptions = toggleMoreOptions;
+        window.changeResolution = changeResolution;
+        window.endCall = endCall;
+        window.cancelEndCall = cancelEndCall;
+        window.confirmEndCall = confirmEndCall;
+    }
+
+    function bindDomEvents() {
+        exposeWindowHandlers();
+
+        if (isBound) {
+            return;
+        }
+
+        chatMessage.bindMessageEvents();
+        document.addEventListener('keydown', handleKeydown);
+        document.addEventListener('click', handleDocumentClick);
+        bindButton('cancelEndCall', cancelEndCall);
+        bindButton('confirmEndCall', confirmEndCall);
+        bindButton('moreOptionsBtn', toggleMoreOptions);
+
+        isBound = true;
+    }
+
+    return {
+        bindDomEvents
+    };
+}