diff --git a/app/custom/VideoConferenceClientImpl.tsx b/app/custom/VideoConferenceClientImpl.tsx index 4cadc5b3..c00a3715 100644 --- a/app/custom/VideoConferenceClientImpl.tsx +++ b/app/custom/VideoConferenceClientImpl.tsx @@ -39,9 +39,9 @@ export function VideoConferenceClientImpl(props: { dynacast: true, e2ee: e2eeEnabled ? { - keyProvider, - worker, - } + keyProvider, + worker, + } : undefined, }; }, [e2eeEnabled, props.codec, keyProvider, worker]); diff --git a/styles/globals.css b/styles/globals.css index ff0c088d..b013f44d 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -25,13 +25,13 @@ body { padding-inline: 2rem; } -.header > img { +.header>img { display: block; margin: auto; max-width: 100%; } -.header > h2 { +.header>h2 { font-family: 'TWK Everett', sans-serif; font-style: normal; font-weight: 400; @@ -65,3 +65,92 @@ h2 a { h2 a { text-decoration: none; } + +/* Override LiveKit video conference layout to fix control bar positioning */ +.lk-video-conference { + position: relative; + display: flex !important; + flex-direction: column !important; + align-items: stretch; + height: 100%; +} + +.lk-video-conference-content { + display: flex; + flex-direction: row; + align-items: stretch; + width: 100%; + flex: 1; + min-height: 0; +} + +.lk-video-conference-inner { + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + flex: 1; + min-height: 0; +} + +.lk-grid-layout-wrapper, +.lk-focus-layout-wrapper { + position: relative; + display: flex; + justify-content: center; + width: 100%; + height: 100% !important; + flex: 1; + min-height: 0; +} + +.lk-grid-layout-wrapper { + flex-direction: column; + align-items: center; +} + +.lk-focus-layout-wrapper { + align-items: stretch; +} + +/* Emoji Reaction Styles */ +.lk-emoji-reactions { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + pointer-events: none; + z-index: 10; +} + +.lk-emoji-reaction { + font-size: 3rem; + animation: emojiReaction 3s ease-out forwards; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +@keyframes emojiReaction { + 0% { + opacity: 0; + transform: scale(0.5) translateY(20px); + } + + 20% { + opacity: 1; + transform: scale(1.2) translateY(0); + } + + 80% { + opacity: 1; + transform: scale(1) translateY(-10px); + } + + 100% { + opacity: 0; + transform: scale(0.8) translateY(-20px); + } +} \ No newline at end of file