From 2543523f3dde0b5c9ee214ab0cca836be39d018a Mon Sep 17 00:00:00 2001
From: Yuzuki Aida <dev@nzws.me>
Date: Wed, 22 May 2024 22:45:24 +0900
Subject: [PATCH] Tweak styling

---
 apps/web/organisms/footer/index.tsx           |  9 +++--
 .../web/organisms/live/comment-post/index.tsx | 37 ++++++++++++++++---
 .../live/comment-post/public-post-switch.tsx  | 17 +++++++++
 apps/web/organisms/live/live-app.tsx          |  3 ++
 apps/web/organisms/live/video/live-player.tsx | 16 ++++----
 .../live/video/video-message-box.tsx          |  5 +++
 apps/web/organisms/navbar/index.tsx           | 13 +++++--
 .../[id]/broadcast-via-browser.page.tsx       |  2 +-
 docker-compose.yml                            |  2 -
 package.json                                  |  2 +-
 10 files changed, 82 insertions(+), 24 deletions(-)

diff --git a/apps/web/organisms/footer/index.tsx b/apps/web/organisms/footer/index.tsx
index 77a29f17..8b86bacc 100644
--- a/apps/web/organisms/footer/index.tsx
+++ b/apps/web/organisms/footer/index.tsx
@@ -10,7 +10,8 @@ import {
   MenuItem,
   Icon,
   LinkOverlay,
-  LinkBox
+  LinkBox,
+  HStack
 } from '@chakra-ui/react';
 import Link from 'next/link';
 import { FC } from 'react';
@@ -25,10 +26,10 @@ export const Footer: FC = () => {
 
   return (
     <Box marginTop="auto">
-      <Container as={Stack} maxW="container.xl" py={8}>
+      <Container as={Stack} maxW="full" py={8}>
         <Divider mb={2} />
 
-        <Stack as={Stack} direction={{ base: 'column', lg: 'row' }} spacing={6}>
+        <HStack flexWrap="wrap" spacing={6}>
           <Box color="gray.400">
             <ChakraLink href="https://github.com/nzws/knzklive2" isExternal>
               <Icon as={FiGithub} mr={2} />
@@ -85,7 +86,7 @@ export const Footer: FC = () => {
               </MenuList>
             </Menu>
           </Box>
-        </Stack>
+        </HStack>
       </Container>
     </Box>
   );
diff --git a/apps/web/organisms/live/comment-post/index.tsx b/apps/web/organisms/live/comment-post/index.tsx
index 539fdeec..2c1416ed 100644
--- a/apps/web/organisms/live/comment-post/index.tsx
+++ b/apps/web/organisms/live/comment-post/index.tsx
@@ -35,7 +35,11 @@ export const CommentPost: FC<Props> = ({ liveId, hashtag }) => {
   );
   const [comment, setComment] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const fediverseSyncPopoverDisclosure = useDisclosure();
+  const {
+    isOpen: fediSyncPopoverIsOpen,
+    onOpen: fediSyncPopoverOnOpen,
+    onClose: fediSyncPopoverOnClose
+  } = useDisclosure();
   const { handlePublish } = useCommentPublish(liveId, hashtag);
   const [error, setError] = useState<unknown>();
   useAPIError(error);
@@ -72,27 +76,43 @@ export const CommentPost: FC<Props> = ({ liveId, hashtag }) => {
     [comment, token, enablePublish, handlePublish, hashtag]
   );
 
-  const onOpen = fediverseSyncPopoverDisclosure.onOpen;
   useEffect(() => {
     if (!isSignedIn && hashtag) {
       const timeoutId = setTimeout(() => {
-        onOpen();
+        fediSyncPopoverOnOpen();
       }, 1000 * 3);
 
       return () => {
         clearTimeout(timeoutId);
       };
     }
-  }, [isSignedIn, onOpen, hashtag]);
+  }, [isSignedIn, fediSyncPopoverOnOpen, hashtag]);
+
+  useEffect(() => {
+    if (!fediSyncPopoverIsOpen) {
+      return;
+    }
+
+    const handler = () => {
+      fediSyncPopoverOnClose();
+    };
+
+    document.addEventListener('click', handler);
+
+    return () => {
+      document.removeEventListener('click', handler);
+    };
+  }, [fediSyncPopoverOnClose, fediSyncPopoverIsOpen]);
 
   return (
     <form onSubmit={handleSubmit}>
       <Popover
-        isOpen={fediverseSyncPopoverDisclosure.isOpen}
-        onClose={fediverseSyncPopoverDisclosure.onClose}
+        isOpen={fediSyncPopoverIsOpen}
+        onClose={fediSyncPopoverOnClose}
         placement="bottom"
         closeOnBlur
         isLazy
+        autoFocus={false}
       >
         <PopoverAnchor>
           <InputGroup>
@@ -115,6 +135,11 @@ export const CommentPost: FC<Props> = ({ liveId, hashtag }) => {
               )}
               isDisabled={!isSignedIn}
               maxLength={100}
+              borderTopRadius={0}
+              borderBottomRadius={{
+                base: 8,
+                md: 15
+              }}
             />
 
             <InputRightElement width="6rem">
diff --git a/apps/web/organisms/live/comment-post/public-post-switch.tsx b/apps/web/organisms/live/comment-post/public-post-switch.tsx
index 4d826d5e..09cccaf5 100644
--- a/apps/web/organisms/live/comment-post/public-post-switch.tsx
+++ b/apps/web/organisms/live/comment-post/public-post-switch.tsx
@@ -54,6 +54,22 @@ export const PublicPostSwitch: FC<Props> = ({
     }
   }, [onOpen, hashtag, enablePublish, isSignedIn]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handler = () => {
+      onClose();
+    };
+
+    document.addEventListener('click', handler);
+
+    return () => {
+      document.removeEventListener('click', handler);
+    };
+  }, [isOpen, onClose]);
+
   return (
     <Fragment>
       <Popover
@@ -63,6 +79,7 @@ export const PublicPostSwitch: FC<Props> = ({
         closeOnBlur
         isLazy
         offset={[28, 24]}
+        autoFocus={false}
       >
         <Tooltip
           label={intl.formatMessage({
diff --git a/apps/web/organisms/live/live-app.tsx b/apps/web/organisms/live/live-app.tsx
index 68c9f7c9..5e676bb1 100644
--- a/apps/web/organisms/live/live-app.tsx
+++ b/apps/web/organisms/live/live-app.tsx
@@ -87,6 +87,9 @@ export const LiveApp: FC<Props> = ({ live, streamer }) => {
           overflowY="auto"
           width={{ lg: 'calc(100% - 400px)' }}
           flexShrink={0}
+          sx={{
+            scrollbarWidth: 'none'
+          }}
         >
           {url ? (
             <LivePlayer
diff --git a/apps/web/organisms/live/video/live-player.tsx b/apps/web/organisms/live/video/live-player.tsx
index 2fcbda5c..d1663443 100644
--- a/apps/web/organisms/live/video/live-player.tsx
+++ b/apps/web/organisms/live/video/live-player.tsx
@@ -1,4 +1,4 @@
-import { AspectRatio, Center, Spinner } from '@chakra-ui/react';
+import { AspectRatio, Box, Center, Spinner } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { useAPIError } from '~/utils/hooks/api/use-api-error';
@@ -154,12 +154,18 @@ export const LivePlayer: FC<Props> = ({
   }, [canPlay, autoSeek]);
 
   return (
-    <Container
+    <Box
       {...events}
       ref={containerRef}
       style={{
         cursor: show ? 'auto' : 'none'
       }}
+      position="relative"
+      borderTopRadius={{
+        base: 8,
+        md: 15
+      }}
+      overflow="hidden"
     >
       <VideoContainer
         ratio={16 / 9}
@@ -191,14 +197,10 @@ export const LivePlayer: FC<Props> = ({
         playType={playType}
         onChangePlayType={setPlayType}
       />
-    </Container>
+    </Box>
   );
 };
 
-const Container = styled.div`
-  position: relative;
-`;
-
 const VideoContainer = styled(AspectRatio)`
   background-color: #000;
   background-position: center;
diff --git a/apps/web/organisms/live/video/video-message-box.tsx b/apps/web/organisms/live/video/video-message-box.tsx
index 75f6ef3e..9e9533e9 100644
--- a/apps/web/organisms/live/video/video-message-box.tsx
+++ b/apps/web/organisms/live/video/video-message-box.tsx
@@ -21,6 +21,11 @@ export const VideoMessageBox: FC<Props> = ({
         thumbnailUrl || `/api/default-thumbnail.png?userId=${streamerUserId}`
       })`
     }}
+    borderTopRadius={{
+      base: 8,
+      md: 15
+    }}
+    overflow="hidden"
   >
     <Inner>
       <Flex>
diff --git a/apps/web/organisms/navbar/index.tsx b/apps/web/organisms/navbar/index.tsx
index 2b758d50..bce2f9f9 100644
--- a/apps/web/organisms/navbar/index.tsx
+++ b/apps/web/organisms/navbar/index.tsx
@@ -86,9 +86,16 @@ export const Navbar: FC = () => {
         />
       )}
 
-      <Box as="nav" bg="gray.900">
-        <Container py={{ base: '3' }} maxW="container.xl">
-          <HStack spacing="10" justify="space-between">
+      <Box as="nav">
+        <Container py={{ base: 3 }} maxW="full">
+          <HStack
+            gap={4}
+            px={{
+              base: 0,
+              md: 4
+            }}
+            justify="space-between"
+          >
             <Link href="/">
               <Heading size="md">KnzkLive</Heading>
             </Link>
diff --git a/apps/web/pages/app/[locale]/tenants/[slug]/[id]/broadcast-via-browser.page.tsx b/apps/web/pages/app/[locale]/tenants/[slug]/[id]/broadcast-via-browser.page.tsx
index bd4d48a4..7f2eef4a 100644
--- a/apps/web/pages/app/[locale]/tenants/[slug]/[id]/broadcast-via-browser.page.tsx
+++ b/apps/web/pages/app/[locale]/tenants/[slug]/[id]/broadcast-via-browser.page.tsx
@@ -238,7 +238,7 @@ const Page: NextPage<PageProps<Props, Params & PathProps>> = ({
       <Grid
         gridTemplateRows="auto 1fr auto"
         gridTemplateColumns="1fr"
-        height="100vh"
+        height="100dvh"
       >
         <GridItem>
           {live && (
diff --git a/docker-compose.yml b/docker-compose.yml
index 71a4083e..5ca24926 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   # db:
   #   image: postgres:16
diff --git a/package.json b/package.json
index e6e0c092..f239c936 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "scripts": {
     "lint": "prettier --check --cache .",
     "format": "prettier --write --cache .",
-    "dev-all": "docker compose up -d redis && yarn dev:migrate && yarn workspaces foreach --verbose --parallel -j unlimited --interlaced run dev",
+    "dev-all": "docker compose up -d redis && yarn dev:migrate && yarn workspaces foreach --worktree --verbose --parallel -j unlimited --interlaced run dev",
     "dev": "docker compose up --build",
     "dev:migrate": "yarn workspace server prisma migrate dev",
     "dev:sql": "yarn workspace server prisma studio",