⚗️ [twitter] v2 APIで返信禁止にできるように

Author: ci7lus

src/miraktest-twitter/components/Tweet.tsx

@@ -148,12 +148,18 @@ export const TweetComponent: React.FC<{
           "bg-gray-800",
           "flex",
           "justify-between",
-          "items-center"
+          "items-center",
+          "space-x-2"
         )}
       >
-        <h1 className={clsx("text-lg")}>ツイート</h1>
+        <h1 className={clsx("text-lg", "flex-shrink-0")}>ツイート</h1>
         {failed && (
-          <p className={clsx("text-red-400", "font-semibold")}>{failed}</p>
+          <p
+            className={clsx("text-red-400", "font-semibold", "truncate")}
+            title={failed}
+          >
+            {failed}
+          </p>
         )}
       </div>
       <div className={clsx("w-full", "flex", "overflow-auto")}>
@@ -358,29 +364,62 @@ export const TweetComponent: React.FC<{
                   })
                 )
                   .then((mediaIds) => {
-                    twitter.tweets
-                      .statusesUpdate({
-                        status: tweetText,
-                        media_ids: mediaIds.join(",") || undefined,
-                      })
-                      .then(() => {
-                        setText("")
-                        setSelectedImages([])
-                      })
-                      .catch((e) => {
-                        console.error(e)
-                        if ("data" in e) {
-                          const data = JSON.parse(e.data)
-                          setFailed(
-                            "ツイートに失敗しました: " + data.message || e.data
-                          )
-                        } else {
-                          setFailed("ツイートに失敗しました")
-                        }
-                      })
-                      .finally(() => {
-                        setIsPosting(false)
-                      })
+                    const media_ids = mediaIds.filter((s): s is string => !!s)
+                    setting.isReplyProhibitEnabled
+                      ? twitter.tweetsV2
+                          .createTweet({
+                            text: tweetText,
+                            media:
+                              0 < media_ids.length
+                                ? {
+                                    media_ids,
+                                  }
+                                : undefined,
+                            reply_settings: "mentionedUsers",
+                          })
+                          .then(() => {
+                            setText("")
+                            setSelectedImages([])
+                          })
+                          .catch((e) => {
+                            console.error(e)
+                            if ("data" in e) {
+                              const data = JSON.parse(e.data)
+                              setFailed(
+                                "失敗しました: " +
+                                  (data.detail || data.message || e.data)
+                              )
+                            } else {
+                              setFailed("失敗しました")
+                            }
+                          })
+                          .finally(() => {
+                            setIsPosting(false)
+                          })
+                      : twitter.tweets
+                          .statusesUpdate({
+                            status: tweetText,
+                            media_ids: media_ids.join(",") || undefined,
+                          })
+                          .then(() => {
+                            setText("")
+                            setSelectedImages([])
+                          })
+                          .catch((e) => {
+                            console.error(e)
+                            if ("data" in e) {
+                              const data = JSON.parse(e.data)
+                              setFailed(
+                                "失敗しました: " +
+                                  (data.detail || data.message || e.data)
+                              )
+                            } else {
+                              setFailed("失敗しました")
+                            }
+                          })
+                          .finally(() => {
+                            setIsPosting(false)
+                          })
                   })
                   .catch((e) => {
                     console.error(e)

src/miraktest-twitter/components/TwitterRenderer.tsx

@@ -1,4 +1,5 @@
 import Axios from "axios"
+import clsx from "clsx"
 import React, { useEffect, useState } from "react"
 import { useThrottleFn } from "react-use"
 import { atom, useRecoilValue, useRecoilState, useSetRecoilState } from "recoil"
@@ -21,7 +22,10 @@ export const TwitterRenderer: InitPlugin["renderer"] = ({
 }) => {
   const settingAtom = atom<TwitterSetting>({
     key: `${TWITTER_PLUGIN_PREFIX}.setting`,
-    default: { isContentInfoEmbedInImageEnabled: false },
+    default: {
+      isContentInfoEmbedInImageEnabled: false,
+      isReplyProhibitEnabled: false,
+    },
   })
   const imageUrlAtom = atom<string | null>({
     key: `${TWITTER_PLUGIN_PREFIX}.imageUrl`,
@@ -74,6 +78,9 @@ export const TwitterRenderer: InitPlugin["renderer"] = ({
             isContentInfoEmbedInImageEnabled,
             setIsContentInfoEmbedInImageEnabled,
           ] = useState(setting.isContentInfoEmbedInImageEnabled)
+          const [isReplyProhibitEnabled, setIsReplyProhibitEnabled] = useState(
+            setting.isReplyProhibitEnabled
+          )
           return (
             <>
               <style>{tailwind}</style>
@@ -86,8 +93,8 @@ export const TwitterRenderer: InitPlugin["renderer"] = ({
                     consumerSecret: consumerSecret || undefined,
                     accessToken: accessToken || undefined,
                     accessTokenSecret: accessTokenSecret || undefined,
-                    isContentInfoEmbedInImageEnabled:
-                      isContentInfoEmbedInImageEnabled,
+                    isContentInfoEmbedInImageEnabled,
+                    isReplyProhibitEnabled,
                   })
                 }}
               >
@@ -134,6 +141,23 @@ export const TwitterRenderer: InitPlugin["renderer"] = ({
                       }
                     />
                   </label>
+                  <label className="block mt-4">
+                    <span>ツイートを返信禁止に設定する</span>
+                    <input
+                      type="checkbox"
+                      className="block mt-2 form-checkbox"
+                      checked={isReplyProhibitEnabled || false}
+                      onChange={() =>
+                        setIsReplyProhibitEnabled((enabled) => !enabled)
+                      }
+                    />
+                    <span
+                      className={clsx("block mt-1", "text-sm", "text-gray-400")}
+                    >
+                      設定する認証情報においてTwitter API v2
+                      が有効化されている必要があります
+                    </span>
+                  </label>
                 </label>
                 <button
                   type="submit"

src/miraktest-twitter/constants.ts

@@ -4,7 +4,7 @@ export const TWITTER_META = {
   id: TWITTER_PLUGIN_ID,
   name: "Twitter",
   author: "ci7lus",
-  version: "0.0.8",
+  version: "0.0.9",
   description: "視聴中の番組に関連するツイートを投稿する",
 }
 export const TWITTER_TWEET_WINDOW_ID = `${TWITTER_PLUGIN_ID}.tweet`

src/miraktest-twitter/types.ts

@@ -4,6 +4,7 @@ export type TwitterSetting = {
   accessToken?: string
   accessTokenSecret?: string
   isContentInfoEmbedInImageEnabled: boolean
+  isReplyProhibitEnabled: boolean
 }
 
 export type SayaDefinitionBoard = {