Add popover

nzws · May 28, 2024 · bed67fd · bed67fd
1 parent 4a8a0a0
commit bed67fd
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 31 deletions.
diff --git a/apps/web/organisms/live/admin/live-info-modal/upload-thumbnail.tsx b/apps/web/organisms/live/admin/live-info-modal/upload-thumbnail.tsx
@@ -20,6 +20,7 @@ type Props = {
   tenantId?: number;
   hideButton?: boolean;
   streamerIdForDefaultThumbnail?: number;
+  thumbnailOuterComponent?: FC;
 };
 
 export const UploadThumbnail: FC<Props> = ({
@@ -28,7 +29,8 @@ export const UploadThumbnail: FC<Props> = ({
   onUploading,
   tenantId,
   hideButton,
-  streamerIdForDefaultThumbnail
+  streamerIdForDefaultThumbnail,
+  thumbnailOuterComponent: ThumbnailOuterComponent = Fragment
 }) => {
   const { token } = useAuth();
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -104,27 +106,29 @@ export const UploadThumbnail: FC<Props> = ({
           </Button>
         )}
 
-        <VideoContainer
-          ratio={16 / 9}
-          onClick={isLoading ? undefined : handleOpenFile}
-        >
-          {thumbnailUrl || streamerIdForDefaultThumbnail ? (
-            <Image
-              src={
-                thumbnailUrl ||
-                `/api/default-thumbnail.png?userId=${
-                  streamerIdForDefaultThumbnail || 0
-                }`
-              }
-              style={{
-                objectFit: 'contain'
-              }}
-              alt="image"
-            />
-          ) : (
-            <div />
-          )}
-        </VideoContainer>
+        <ThumbnailOuterComponent>
+          <VideoContainer
+            ratio={16 / 9}
+            onClick={isLoading ? undefined : handleOpenFile}
+          >
+            {thumbnailUrl || streamerIdForDefaultThumbnail ? (
+              <Image
+                src={
+                  thumbnailUrl ||
+                  `/api/default-thumbnail.png?userId=${
+                    streamerIdForDefaultThumbnail || 0
+                  }`
+                }
+                style={{
+                  objectFit: 'contain'
+                }}
+                alt="image"
+              />
+            ) : (
+              <div />
+            )}
+          </VideoContainer>
+        </ThumbnailOuterComponent>
       </Stack>
     </Fragment>
   );

diff --git a/apps/web/organisms/stream/via-browser/live-preview.tsx b/apps/web/organisms/stream/via-browser/live-preview.tsx
@@ -5,7 +5,17 @@ import { useAuth } from '~/utils/hooks/use-auth';
 import { useAPIError } from '~/utils/hooks/api/use-api-error';
 import { ImagePublic } from '~/../../packages/api-types/common/types';
 import { client } from '~/utils/api/client';
-import { useToast } from '@chakra-ui/react';
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  Portal,
+  useDisclosure,
+  useToast
+} from '@chakra-ui/react';
 
 type Props = {
   liveId?: number;
@@ -25,6 +35,9 @@ export const LivePreview: FC<Props> = ({
   const { token } = useAuth();
   const toast = useToast();
   const [isLoading, setIsLoading] = useState(false);
+  const { isOpen: popoverIsOpen, onClose: popoverOnClose } = useDisclosure({
+    defaultIsOpen: true
+  });
   const [error, setError] = useState<unknown>();
   useAPIError(error);
 
@@ -71,17 +84,59 @@ export const LivePreview: FC<Props> = ({
     };
   }, [isLoading, toast]);
 
+  useEffect(() => {
+    if (!isPushing) {
+      return;
+    }
+
+    const handler = () => {
+      popoverOnClose();
+    };
+
+    document.addEventListener('click', handler);
+
+    return () => {
+      document.removeEventListener('click', handler);
+    };
+  }, [isPushing, popoverOnClose]);
+
   return (
     <Fragment>
       {isPushing ? (
-        <UploadThumbnail
-          thumbnailUrl={thumbnailUrl}
-          onThumbnailChange={handleSubmit}
-          onUploading={setIsLoading}
-          tenantId={tenantId}
-          streamerIdForDefaultThumbnail={streamerUserId}
-          hideButton
-        />
+        <Popover
+          isOpen={popoverIsOpen}
+          onClose={popoverOnClose}
+          placement="bottom"
+          closeOnBlur
+          isLazy
+          autoFocus={false}
+          size="2xl"
+          offset={[0, -16]}
+        >
+          <UploadThumbnail
+            thumbnailUrl={thumbnailUrl}
+            onThumbnailChange={handleSubmit}
+            onUploading={setIsLoading}
+            tenantId={tenantId}
+            streamerIdForDefaultThumbnail={streamerUserId}
+            hideButton
+            thumbnailOuterComponent={PopoverAnchor}
+          />
+
+          <Portal>
+            <PopoverContent shadow="2x">
+              <PopoverArrow />
+
+              <PopoverHeader textAlign="center" fontWeight="bold" fontSize="md">
+                👆 ここをタップして画像を変更
+              </PopoverHeader>
+
+              <PopoverBody textAlign="center" fontSize="sm">
+                変更はリアルタイムに視聴者へ同期されます。
+              </PopoverBody>
+            </PopoverContent>
+          </Portal>
+        </Popover>
       ) : (
         <VideoMessageBox
           thumbnailUrl={thumbnailUrl}