Add popover, fix mastodon domain processing, tweak styling

nzws · May 16, 2024 · 4fa26cf · 4fa26cf
1 parent f534116
commit 4fa26cf
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 69 deletions.
diff --git a/apps/server/src/streaming/mastodon.ts b/apps/server/src/streaming/mastodon.ts
@@ -4,7 +4,8 @@ import { comments, lives, users } from '../models';
 import { pubsub } from '../services/redis/pubsub/client';
 
 const token = process.env.MASTODON_ACCESS_TOKEN || '';
-const domain = process.env.MASTODON_DOMAIN || '';
+const mastodonDomain = process.env.MASTODON_DOMAIN || '';
+const streamingDomain = process.env.MASTODON_STREAMING_DOMAIN || mastodonDomain;
 
 type Hashtag = {
   hashtag: string;
@@ -26,7 +27,7 @@ export class MastodonStreaming {
 
     try {
       const ws = new WebSocket(
-        `wss://${domain}/api/v1/streaming/?access_token=${token}`
+        `wss://${streamingDomain}/api/v1/streaming/?access_token=${token}`
       );
       this.ws = ws;
 
@@ -200,7 +201,7 @@ export class MastodonStreaming {
       if (liveIds.length > 0) {
         const acct =
           payload.account.acct === payload.account.username
-            ? `${payload.account.acct}@${domain}`
+            ? `${payload.account.acct}@${mastodonDomain}`
             : payload.account.acct;
 
         const user = await users.getOrCreateForRemote(

diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
@@ -72,11 +72,15 @@
   "live.comment-post.require-login.with-hashtag": "To post a comment, please sign in or post as publicly with #{hashtag}",
   "live.comment-post.placeholder": "Enter to comment",
   "live.comment-post.placeholder.with-hashtag": "Enter to post a comment (or post as publicly with #{hashtag})",
-  "live.comment-post.publish.tooltip.enabled": "Publish to ActivityPub: Enabled",
-  "live.comment-post.publish.tooltip.disabled": "Publish to ActivityPub: Disabled",
-  "live.comment-post.publish.tooltip.disabled-in-live": "Publish to ActivityPub: Disabled (by streamer)",
-  "live.comment-post.publish.popover.title": "Publish to ActivityPub",
-  "live.comment-post.publish.popover.description": "If enabled, your comment will be posted as unlisted/home on your account {acct} with the hashtag #{hashtag}. Your comment will only be posted on KnzkLive if the streamer disables it or with this switch.",
+  "live.comment-post.fediverse-sync.title": "Comment via Fediverse with #{hashtag} 💬",
+  "live.comment-post.fediverse-sync.description": "If you have a Mastodon or Misskey account, you can comment directly on the live feed by posting a post with #{hashtag}!",
+  "live.comment-post.fediverse-sync.notice": "* There are certain conditions for syncing comments from Fediverse, you can also log in to KnzkLive and comment directly.",
+  "live.comment-post.publish.tooltip.enabled": "Sync comments with ActivityPub: Enabled",
+  "live.comment-post.publish.tooltip.disabled": "Sync comments with ActivityPub: Disabled",
+  "live.comment-post.publish.tooltip.disabled-in-live": "Sync comments with ActivityPub: Disabled (by streamer)",
+  "live.comment-post.publish.popover.title": "Sync comments with ActivityPub",
+  "live.comment-post.publish.popover.description": "If enabled, your comment will be posted as unlisted/home on your account {acct} with the hashtag #{hashtag}.",
+  "live.comment-post.publish.popover.description2": "Your comment will only be posted on KnzkLive if the streamer disables it or with this switch.",
   "live.comment-post.permission-denied": "Please re-login to KnzkLive with the same account because you do not have the required permission.",
   "live.not-started": "Not started",
   "live.viewers-count": "{sum} viewed in live",

diff --git a/apps/web/locales/ja.json b/apps/web/locales/ja.json
@@ -68,15 +68,19 @@
   "live.comment.title.with-hashtag": "コメント #{hashtag}",
   "video.comment.title": "コメント (リプレイ)",
   "video.comment.title.with-hashtag": "コメント (リプレイ) #{hashtag}",
+  "live.comment-post.fediverse-sync.title": "Fediverse から #{hashtag} でコメントできます 💬",
+  "live.comment-post.fediverse-sync.description": "Mastodon や Misskey などの Fediverse アカウントをお持ちの場合、 #{hashtag} を付けてポストを投稿することでライブ配信上にそのままコメントできます！",
+  "live.comment-post.fediverse-sync.notice": "* Fediverse からのコメントの同期には一定の条件があります。KnzkLive にログインして直接ここからコメントすることもできます。",
   "live.comment-post.require-login": "コメントを投稿するにはログインが必要です",
   "live.comment-post.require-login.with-hashtag": "コメントを投稿するにはログインするか、#{hashtag} で公開投稿してください",
   "live.comment-post.placeholder": "Enter でコメントを投稿",
   "live.comment-post.placeholder.with-hashtag": "Enter でコメントを投稿 (もしくは #{hashtag} で公開投稿)",
-  "live.comment-post.publish.tooltip.enabled": "コメントの公開投稿: 有効",
-  "live.comment-post.publish.tooltip.disabled": "コメントの公開投稿: 無効",
-  "live.comment-post.publish.tooltip.disabled-in-live": "コメントの公開投稿: 無効（配信者が無効化）",
-  "live.comment-post.publish.popover.title": "コメントの公開投稿",
-  "live.comment-post.publish.popover.description": "有効にすると、ハッシュタグ #{hashtag} を付けてあなたのアカウント {acct} でコメントを未収載/ホームで投稿します。配信者が配信設定で無効にするか、このスイッチで無効にするとあなたのコメントは KnzkLive 上にのみ投稿されます。",
+  "live.comment-post.publish.tooltip.enabled": "コメントの同期: 有効",
+  "live.comment-post.publish.tooltip.disabled": "コメントの同期: 無効",
+  "live.comment-post.publish.tooltip.disabled-in-live": "コメントの同期: 無効（配信者が無効化）",
+  "live.comment-post.publish.popover.title": "コメントの同期",
+  "live.comment-post.publish.popover.description": "有効にすると、ハッシュタグ #{hashtag} を付けてあなたのアカウント {acct} でコメントを未収載/ホームで投稿します。",
+  "live.comment-post.publish.popover.description2": "配信者が配信設定で無効にするか、このスイッチで無効にするとあなたのコメントは KnzkLive 上にのみ投稿されます。",
   "live.comment-post.permission-denied": "お手数ですが必要な権限が取得できていないため、同じアカウントで KnzkLive へ再ログインしてください。",
   "live.not-started": "未開始",
   "live.viewers-count": "{sum} 人が生配信で視聴",

diff --git a/apps/web/organisms/live/comment-post/fediverse-sync-popover.tsx b/apps/web/organisms/live/comment-post/fediverse-sync-popover.tsx
@@ -0,0 +1,53 @@
+import {
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  Portal,
+  Text,
+  VStack
+} from '@chakra-ui/react';
+import { FC } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+type Props = {
+  hashtag: string;
+};
+
+export const FediverseSyncPopover: FC<Props> = ({ hashtag }) => {
+  return (
+    <Portal>
+      <PopoverContent width="700px" maxWidth="100dvw">
+        <PopoverArrow />
+
+        <PopoverHeader textAlign="center" fontWeight="bold">
+          <FormattedMessage
+            id="live.comment-post.fediverse-sync.title"
+            values={{ hashtag }}
+          />
+        </PopoverHeader>
+
+        <PopoverCloseButton />
+
+        <PopoverBody>
+          <VStack gap={2}>
+            <Text textAlign="center" fontSize="sm">
+              <FormattedMessage
+                id="live.comment-post.fediverse-sync.description"
+                values={{ hashtag }}
+              />
+            </Text>
+
+            <Text fontSize="xs" w="full">
+              <FormattedMessage
+                id="live.comment-post.fediverse-sync.notice"
+                values={{ hashtag }}
+              />
+            </Text>
+          </VStack>
+        </PopoverBody>
+      </PopoverContent>
+    </Portal>
+  );
+};
diff --git a/apps/web/organisms/live/comment-post/index.tsx b/apps/web/organisms/live/comment-post/index.tsx
@@ -4,9 +4,12 @@ import {
   Icon,
   Input,
   InputGroup,
-  InputRightElement
+  InputRightElement,
+  Popover,
+  PopoverAnchor,
+  useDisclosure
 } from '@chakra-ui/react';
-import { FC, FormEvent, useCallback, useState } from 'react';
+import { FC, FormEvent, useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { FiSend } from 'react-icons/fi';
 import { useAPIError } from '~/utils/hooks/api/use-api-error';
@@ -15,6 +18,7 @@ import { useUsersMe } from '~/utils/hooks/api/use-users-me';
 import { useLocalStorage } from 'react-use';
 import { useCommentPublish } from '~/utils/hooks/api/use-comment-publish';
 import { PublicPostSwitch } from './public-post-switch';
+import { FediverseSyncPopover } from './fediverse-sync-popover';
 
 type Props = {
   liveId: number;
@@ -31,6 +35,7 @@ export const CommentPost: FC<Props> = ({ liveId, hashtag }) => {
   );
   const [comment, setComment] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const fediverseSyncPopoverDisclosure = useDisclosure();
   const { handlePublish } = useCommentPublish(liveId, hashtag);
   const [error, setError] = useState<unknown>();
   useAPIError(error);
@@ -67,53 +72,78 @@ export const CommentPost: FC<Props> = ({ liveId, hashtag }) => {
     [comment, token, enablePublish, handlePublish, hashtag]
   );
 
+  const onOpen = fediverseSyncPopoverDisclosure.onOpen;
+  useEffect(() => {
+    if (!isSignedIn && hashtag) {
+      const timeoutId = setTimeout(() => {
+        onOpen();
+      }, 1000 * 3);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [isSignedIn, onOpen, hashtag]);
+
   return (
     <form onSubmit={handleSubmit}>
-      <InputGroup>
-        <Input
-          pr="3.5rem"
-          type="text"
-          value={comment}
-          onChange={e => setComment(e.target.value)}
-          placeholder={intl.formatMessage(
-            {
-              id: !isSignedIn
-                ? hashtag
-                  ? 'live.comment-post.require-login.with-hashtag'
-                  : 'live.comment-post.require-login'
-                : hashtag
-                  ? 'live.comment-post.placeholder.with-hashtag'
-                  : 'live.comment-post.placeholder'
-            },
-            { hashtag }
-          )}
-          isDisabled={!isSignedIn}
-          maxLength={100}
-        />
-
-        <InputRightElement width="6rem">
-          <HStack gap={2}>
-            <PublicPostSwitch
-              acct={me?.account}
-              hashtag={hashtag}
-              isSignedIn={isSignedIn}
-              enablePublish={enablePublish}
-              toggleEnablePublish={toggleEnablePublish}
+      <Popover
+        isOpen={fediverseSyncPopoverDisclosure.isOpen}
+        onClose={fediverseSyncPopoverDisclosure.onClose}
+        placement="bottom"
+        closeOnBlur
+        isLazy
+      >
+        <PopoverAnchor>
+          <InputGroup>
+            <Input
+              pr="3.5rem"
+              type="text"
+              value={comment}
+              onChange={e => setComment(e.target.value)}
+              placeholder={intl.formatMessage(
+                {
+                  id: !isSignedIn
+                    ? hashtag
+                      ? 'live.comment-post.require-login.with-hashtag'
+                      : 'live.comment-post.require-login'
+                    : hashtag
+                      ? 'live.comment-post.placeholder.with-hashtag'
+                      : 'live.comment-post.placeholder'
+                },
+                { hashtag }
+              )}
+              isDisabled={!isSignedIn}
+              maxLength={100}
             />
 
-            <Button
-              h="1.75rem"
-              size="sm"
-              type="submit"
-              colorScheme="blue"
-              isLoading={isLoading}
-              isDisabled={!isSignedIn}
-            >
-              <Icon as={FiSend} />
-            </Button>
-          </HStack>
-        </InputRightElement>
-      </InputGroup>
+            <InputRightElement width="6rem">
+              <HStack gap={2}>
+                <PublicPostSwitch
+                  acct={me?.account}
+                  hashtag={hashtag}
+                  isSignedIn={isSignedIn}
+                  enablePublish={enablePublish ?? false}
+                  toggleEnablePublish={toggleEnablePublish}
+                />
+
+                <Button
+                  h="1.75rem"
+                  size="sm"
+                  type="submit"
+                  colorScheme="blue"
+                  isLoading={isLoading}
+                  isDisabled={!isSignedIn}
+                >
+                  <Icon as={FiSend} />
+                </Button>
+              </HStack>
+            </InputRightElement>
+          </InputGroup>
+        </PopoverAnchor>
+
+        {!isSignedIn && !!hashtag && <FediverseSyncPopover hashtag={hashtag} />}
+      </Popover>
     </form>
   );
 };
diff --git a/apps/web/organisms/live/comment-post/public-post-switch.tsx b/apps/web/organisms/live/comment-post/public-post-switch.tsx
@@ -13,14 +13,14 @@ import {
   useDisclosure,
   VStack
 } from '@chakra-ui/react';
-import { FC, Fragment, useCallback, useRef } from 'react';
+import { FC, Fragment, useEffect, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 type Props = {
   acct?: string;
   hashtag?: string;
   isSignedIn: boolean;
-  enablePublish?: boolean;
+  enablePublish: boolean;
   toggleEnablePublish: () => void;
 };
 
@@ -41,14 +41,18 @@ export const PublicPostSwitch: FC<Props> = ({
       : 'live.comment-post.publish.tooltip.disabled'
     : 'live.comment-post.publish.tooltip.disabled-in-live';
 
-  const handleSwitch = useCallback(() => {
-    toggleEnablePublish();
+  useEffect(() => {
+    if (!isFirstOpenedRef.current && hashtag && enablePublish && isSignedIn) {
+      const timeoutId = setTimeout(() => {
+        isFirstOpenedRef.current = true;
+        onOpen();
+      }, 1000);
 
-    if (!isFirstOpenedRef.current) {
-      isFirstOpenedRef.current = true;
-      onOpen();
+      return () => {
+        clearTimeout(timeoutId);
+      };
     }
-  }, [toggleEnablePublish, onOpen]);
+  }, [onOpen, hashtag, enablePublish, isSignedIn]);
 
   return (
     <Fragment>
@@ -71,8 +75,8 @@ export const PublicPostSwitch: FC<Props> = ({
               <Switch
                 size="sm"
                 disabled={!isSignedIn || !hashtag}
-                isChecked={hashtag ? enablePublish ?? false : false}
-                onChange={handleSwitch}
+                isChecked={hashtag ? enablePublish : false}
+                onChange={toggleEnablePublish}
               />
             </PopoverAnchor>
           </VStack>
@@ -89,7 +93,7 @@ export const PublicPostSwitch: FC<Props> = ({
             <PopoverCloseButton />
 
             <PopoverBody>
-              <VStack gap="4px">
+              <VStack gap={2}>
                 <Text fontWeight="bold">
                   <FormattedMessage id={statusIntlId} />
                 </Text>
@@ -100,6 +104,10 @@ export const PublicPostSwitch: FC<Props> = ({
                     values={{ acct: acct || '', hashtag }}
                   />
                 </Text>
+
+                <Text fontSize="xs">
+                  <FormattedMessage id="live.comment-post.publish.popover.description2" />
+                </Text>
               </VStack>
             </PopoverBody>
           </PopoverContent>