From 3c94cfbbef4c930954b13e3c416be10e722a105c Mon Sep 17 00:00:00 2001
From: ci7lus <7887955+ci7lus@users.noreply.github.com>
Date: Thu, 13 Jan 2022 02:38:01 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20[twitter]=20=E7=94=BB=E5=83=8F?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8B=E3=81=AB=E7=95=AA=E7=B5=84=E6=83=85=E5=A0=B1?=
 =?UTF-8?q?=E3=82=92=E5=9F=8B=E3=82=81=E8=BE=BC=E3=82=81=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/miraktest-twitter/components/Tweet.tsx    | 51 +++++++++++++++----
 .../components/TwitterRenderer.tsx            |  6 +--
 src/miraktest-twitter/embedInfo.ts            | 29 +++++++++++
 src/miraktest-twitter/imageToCanvas.ts        | 19 +++++++
 src/miraktest-twitter/utils.ts                | 10 ----
 5 files changed, 93 insertions(+), 22 deletions(-)
 create mode 100644 src/miraktest-twitter/embedInfo.ts
 create mode 100644 src/miraktest-twitter/imageToCanvas.ts
 delete mode 100644 src/miraktest-twitter/utils.ts

diff --git a/src/miraktest-twitter/components/Tweet.tsx b/src/miraktest-twitter/components/Tweet.tsx
index 476362a..ba2a295 100644
--- a/src/miraktest-twitter/components/Tweet.tsx
+++ b/src/miraktest-twitter/components/Tweet.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx"
+import dayjs from "dayjs"
 import React, { useEffect, useRef, useState } from "react"
 import { RotateCw } from "react-feather"
 import {
@@ -9,11 +10,17 @@ import {
 import type { Status } from "twitter-d"
 import twitterText from "twitter-text"
 import { ContentPlayerPlayingContent } from "../../@types/plugin"
+import { embedInfoInImage } from "../embedInfo"
+import { imageToCanvas } from "../imageToCanvas"
 import { SayaDefinition, TwitterSetting } from "../types"
-import { blobToBase64Uri } from "../utils"
+
+type ImageDatum = {
+  imageUrl: string
+  uri: string
+}
 
 export const TweetComponent: React.FC<{
-  setting: Required<Omit<TwitterSetting, "isContentInfoEmbedInImageEnabled">>
+  setting: Required<TwitterSetting>
   playingContent: ContentPlayerPlayingContent | null
   sayaDefinition: SayaDefinition
   imageUrl: string | null
@@ -31,7 +38,7 @@ export const TweetComponent: React.FC<{
     setRemaining(280 - weightedLength)
   }, [text, hashtag])
   const [isPosting, setIsPosting] = useState(false)
-  const [images, setImages] = useState<string[]>([])
+  const [images, setImages] = useState<ImageDatum[]>([])
   const [selectedImages, setSelectedImages] = useState<string[]>([])
   const [failed, setFailed] = useState("")
   const [serviceTags, setServiceTags] = useState<string[]>([])
@@ -79,7 +86,29 @@ export const TweetComponent: React.FC<{
     if (!imageUrl) {
       return
     }
-    setImages((images) => [imageUrl, ...images.slice(0, 30)])
+    imageToCanvas(imageUrl)
+      .then((canvas) => {
+        if (setting.isContentInfoEmbedInImageEnabled === false) {
+          const image = canvas.toDataURL("image/jpeg", 0.9).split(",")[1]
+          setImages((images) => [
+            { imageUrl, uri: image },
+            ...images.slice(0, 30),
+          ])
+        } else {
+          const label = [
+            playingContent?.service?.name,
+            playingContent?.program?.name,
+            dayjs().format("HH:mm"),
+          ]
+            .filter((s) => s)
+            .join(" - ")
+          setImages((images) => [
+            { imageUrl, uri: embedInfoInImage(canvas, label).split(",")[1] },
+            ...images.slice(0, 30),
+          ])
+        }
+      })
+      .catch(console.error)
   }, [imageUrl])
   const formRef = useRef<HTMLFormElement>(null)
 
@@ -235,11 +264,15 @@ export const TweetComponent: React.FC<{
                 setIsPosting(true)
                 setFailed("")
                 Promise.all(
-                  selectedImages.map(async (image) => {
-                    const response = await fetch(image)
-                    const uri = await blobToBase64Uri(await response.blob())
+                  selectedImages.map(async (targetImageUrl) => {
+                    const media = images.find(
+                      ({ imageUrl }) => imageUrl === targetImageUrl
+                    )?.uri
+                    if (!media) {
+                      return
+                    }
                     const uploadResult = await twitter.media.mediaUpload({
-                      media: uri.split(",")[1],
+                      media,
                     })
                     return uploadResult.media_id_string
                   })
@@ -388,7 +421,7 @@ export const TweetComponent: React.FC<{
               "gap-2"
             )}
           >
-            {images.map((imageUrl) => (
+            {images.map(({ imageUrl }) => (
               <div
                 onClick={() => {
                   setSelectedImages((selectedImages) =>
diff --git a/src/miraktest-twitter/components/TwitterRenderer.tsx b/src/miraktest-twitter/components/TwitterRenderer.tsx
index d7d80b2..2c733b7 100644
--- a/src/miraktest-twitter/components/TwitterRenderer.tsx
+++ b/src/miraktest-twitter/components/TwitterRenderer.tsx
@@ -65,7 +65,7 @@ export const TwitterRenderer: InitPlugin["renderer"] = ({
           )
           const [
             isContentInfoEmbedInImageEnabled,
-            // TODO: setIsContentInfoEmbedInImageEnabled,
+            setIsContentInfoEmbedInImageEnabled,
           ] = useState(setting.isContentInfoEmbedInImageEnabled)
           return (
             <>
@@ -114,7 +114,7 @@ export const TwitterRenderer: InitPlugin["renderer"] = ({
                     value={accessTokenSecret || ""}
                     onChange={(e) => setAccessTokenSecret(e.target.value)}
                   />
-                  {/*<label className="block mt-4">
+                  <label className="block mt-4">
                     <span>画像に番組情報を埋め込む</span>
                     <input
                       type="checkbox"
@@ -126,7 +126,7 @@ export const TwitterRenderer: InitPlugin["renderer"] = ({
                         )
                       }
                     />
-                    </label>*/}
+                  </label>
                 </label>
                 <button
                   type="submit"
diff --git a/src/miraktest-twitter/embedInfo.ts b/src/miraktest-twitter/embedInfo.ts
new file mode 100644
index 0000000..6a29618
--- /dev/null
+++ b/src/miraktest-twitter/embedInfo.ts
@@ -0,0 +1,29 @@
+export const embedInfoInImage = (
+  imageCanvas: HTMLCanvasElement,
+  info: string
+) => {
+  const infoCanvas = document.createElement("canvas")
+  infoCanvas.width = imageCanvas.width * 2
+  infoCanvas.height = imageCanvas.height * 2
+  const ctx = infoCanvas.getContext("2d")
+  if (!ctx) {
+    throw new Error("info ctx context error")
+  }
+  ctx.scale(2, 2)
+  ctx.font = `24px "Hiragino Maru Gothic ProN"`
+  ctx.fillStyle = "rgba(255, 255, 255, 0.5)"
+  ctx.textAlign = "right"
+  ctx.textBaseline = "middle"
+  ctx.shadowBlur = 5
+  ctx.shadowColor = "rgba(0, 0, 0, .5)"
+  ctx.shadowOffsetX = 5
+  ctx.shadowOffsetY = 5
+  ctx.fillText(info, imageCanvas.width - 10, imageCanvas.height - 20)
+  const imCtx = imageCanvas.getContext("2d")
+  if (!imCtx) {
+    throw new Error("info ctx context error")
+  }
+  imCtx.drawImage(infoCanvas, 0, 0, imageCanvas.width, imageCanvas.height)
+  const datauri = imageCanvas.toDataURL("image/jpeg", 0.9)
+  return datauri
+}
diff --git a/src/miraktest-twitter/imageToCanvas.ts b/src/miraktest-twitter/imageToCanvas.ts
new file mode 100644
index 0000000..eb976c9
--- /dev/null
+++ b/src/miraktest-twitter/imageToCanvas.ts
@@ -0,0 +1,19 @@
+export const imageToCanvas = async (url: string) => {
+  const canvas = document.createElement("canvas")
+  const imCtx = canvas.getContext("2d")
+  if (!imCtx) {
+    throw new Error("ctx context error")
+  }
+  await new Promise<void>((res, rej) => {
+    const image = new Image()
+    image.onload = () => {
+      canvas.width = image.width
+      canvas.height = image.height
+      imCtx.drawImage(image, 0, 0)
+      res()
+    }
+    image.onerror = rej
+    image.src = url
+  })
+  return canvas
+}
diff --git a/src/miraktest-twitter/utils.ts b/src/miraktest-twitter/utils.ts
deleted file mode 100644
index fb5806e..0000000
--- a/src/miraktest-twitter/utils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const blobToBase64Uri = (blob: Blob) => {
-  return new Promise<string>((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => {
-      resolve(reader.result as never)
-    }
-    reader.onerror = reject
-    reader.readAsDataURL(blob)
-  })
-}