暫定対処の実施、これに伴う表示UIの改善

nkte8 · May 7, 2024 · a8b3e7c · a8b3e7c
1 parent 5714141
commit a8b3e7c
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 44 deletions.
diff --git a/astro/CHANGELOG.md b/astro/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Skyshare 更新履歴
 
+## 1.5.4
+
+### Patch Changes
+
+- WebShareAPIが使えなかった場合に備え、本文をクリップボードにコピーする処理を追加しました。
+  - Android環境で画像とテキストが同時に利用できない暫定対処として、共有時に本文をクリップボードへコピーする処理を追加しました。
+  - 原因の特定・問題の対処が終了するまでは、お手数ですがXアプリへテキストの貼り付けをお願いいたします。
+- WebShareAPIをBluesky投稿前に実行するように変更しました。
+  - `共有メニューでアプリ版Xを開いて投稿する`をONにした際、共有が完了してからBlueskyへ投稿するように変更しました。
+  - これにより、共有をキャンセルした場合にBlueskyにのみ投稿される事象が起こらなくなります。
+- メッセージラベルをオーバーレイで表示するようにしました。
+  - 処理ステータスがよりわかりやすいよう、ステータスをオーバーレイして表示するように修正しました。
+  - エラー時のトラブルシュートに役立てるため、従来の位置のラベルも残しています。
+
 ## 1.5.3
 
 ### Patch Changes

diff --git a/astro/package.json b/astro/package.json
@@ -1,7 +1,7 @@
 {
   "name": "skyshare",
   "type": "module",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "scripts": {
     "dev": "PUBLIC_VERSION=$npm_package_version astro dev",
     "prod": "PUBLIC_IS_NOT_PRODUCTION=false PUBLIC_VERSION=$npm_package_version astro dev",

diff --git a/astro/src/components/Client/AppForm.tsx b/astro/src/components/Client/AppForm.tsx
@@ -57,7 +57,7 @@ const Component = ({
                 <>
                     {Forms({ mode })}
                     <div
-                        className={["flex", "justify-center", "my-1"].join("")}
+                        className={["flex", "justify-center", "my-1"].join(" ")}
                     >
                         <ModeSelectButton
                             mode={mode}

diff --git a/astro/src/components/Client/bsky/buttons/PostButton.tsx b/astro/src/components/Client/bsky/buttons/PostButton.tsx
@@ -279,6 +279,62 @@ export const Component = ({
                         break
                 }
             }
+            // WebShareAPI対応
+            if (options.useWebAPI) {
+                const url =
+                    mediaData?.type === "external"
+                        ? mediaData.meta.url
+                        : undefined
+                const files =
+                    mediaData?.type === "images" ? mediaData.files : undefined
+
+                const shareData = {
+                    text: callbackPostOptions.externalPostText,
+                    url: url,
+                    files: files,
+                }
+                if (isShareEnable({ setMsgInfo, shareData })) {
+                    try {
+                        // 暫定対処: 本文をクリップボードにコピーする、コピー例外はスルーする
+                        await navigator.clipboard
+                            .writeText(shareData.text)
+                            .then(() =>
+                                setMsgInfo({
+                                    msg: "本文をクリップボードにコピーしました",
+                                    isError: false,
+                                }),
+                            )
+                            .catch(() => {})
+                        await navigator.share(shareData).then(() => {
+                            setMsgInfo({
+                                msg: "共有が完了しました",
+                                isError: false,
+                            })
+                            callbackPostOptions.isNeedChangeMode = false
+                        })
+                    } catch (e: unknown) {
+                        let msg = "Unexpected Unknown Error"
+                        let isError: boolean = false
+                        if (e instanceof Error) {
+                            if (e.name === "AbortError") {
+                                msg =
+                                    "共有が中断されたため、投稿をキャンセルしました。"
+                                // // WebShareAPIをSafariで動かす場合、HTTPSのホストでしか利用できない成約がある
+                                // } else if (e.name === "NotAllowedError") {
+                                //     msg = "On Safari, localhost not allowed to use WebShareAPI with media attached."
+                            } else {
+                                msg = e.name + ": " + e.message
+                                isError = true
+                            }
+                        }
+                        setMsgInfo({
+                            msg: msg,
+                            isError: isError,
+                        })
+                        return
+                    }
+                }
+            }
             setMsgInfo({
                 msg: "Blueskyへポスト中...",
                 isError: false,
@@ -357,46 +413,6 @@ export const Component = ({
                 }
                 callbackPostOptions.previewTitle = mediaData.meta.title
             }
-            // WebShareAPI対応
-            if (options.useWebAPI) {
-                const url =
-                    mediaData?.type === "external"
-                        ? mediaData.meta.url
-                        : undefined
-                const files =
-                    mediaData?.type === "images" ? mediaData.files : undefined
-
-                const shareData = {
-                    text: callbackPostOptions.externalPostText,
-                    url: url,
-                    files: files,
-                }
-                if (isShareEnable({ setMsgInfo, shareData })) {
-                    try {
-                        await navigator.share(shareData)
-                        callbackPostOptions.isNeedChangeMode = false
-                    } catch (e: unknown) {
-                        let msg = "Unexpected Unknown Error"
-                        let isError: boolean = false
-                        if (e instanceof Error) {
-                            if (e.name === "AbortError") {
-                                msg =
-                                    "共有が中断されたため、Blueskyにのみ投稿されました"
-                                // // WebShareAPIをSafariで動かす場合、HTTPSのホストでしか利用できない成約がある
-                                // } else if (e.name === "NotAllowedError") {
-                                //     msg = "On Safari, localhost not allowed to use WebShareAPI with media attached."
-                            } else {
-                                msg = e.name + ": " + e.message
-                                isError = true
-                            }
-                        }
-                        setMsgInfo({
-                            msg: msg,
-                            isError: isError,
-                        })
-                    }
-                }
-            }
             // callbackを起動
             callback(callbackPostOptions)
         } catch (error: unknown) {

diff --git a/astro/src/components/Client/bsky/unique/InfoOverlay.tsx b/astro/src/components/Client/bsky/unique/InfoOverlay.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react"
+import { type msgInfo } from "../../common/types"
+import Circle from "../../common/LoadingCircle"
+// const sleep = (msec: number) =>
+//     new Promise(resolve => setTimeout(resolve, msec))
+
+const Component = ({ msgInfo, hide }: { msgInfo: msgInfo; hide: boolean }) => {
+    const [hidden, setHidden] = useState<boolean>(false)
+    const showOverlay = (willHide: boolean) => {
+        const body = document.getElementById("root")!
+        const overlay = [
+            "after:fixed",
+            "after:w-screen",
+            "after:h-screen",
+            "after:bg-black/25",
+            "after:top-0",
+            "after:left-0",
+        ]
+        if (willHide !== true) {
+            body.classList.add(...overlay)
+            setHidden(willHide)
+        } else {
+            // await sleep(1000)
+            setHidden(willHide)
+            body.classList.remove(...overlay)
+        }
+    }
+    useEffect(() => {
+        showOverlay(hide) //.catch(() => {})
+    }, [hide])
+
+    return (
+        <div className={hidden === true ? "hidden" : undefined}>
+            <div
+                className={[
+                    "absolute",
+                    "m-auto",
+                    "top-24",
+                    "left-0",
+                    "right-0",
+                    "h-32",
+                    "min-h-32",
+                    "min-w-32",
+                    "max-w-96",
+                    "bg-white",
+                    "rounded-xl",
+                    "z-30",
+                    "flex",
+                    "flex-col",
+                    "items-center",
+                ].join(" ")}
+            >
+                <div className="my-auto">
+                    <Circle size="m" />
+                    {msgInfo.msg !== "" && (
+                        <div className="mx-auto w-fit my-1">
+                            <div
+                                className={
+                                    msgInfo.isError
+                                        ? "bg-red-300 px-5 py-1 text-white rounded-xl"
+                                        : "bg-sky-200 px-5 py-1 rounded-xl w-fit"
+                                }
+                            >
+                                {msgInfo.msg}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+export default Component
diff --git a/astro/src/components/Client/common/LoadingCircle.tsx b/astro/src/components/Client/common/LoadingCircle.tsx
@@ -1,5 +1,5 @@
 import { load_circle } from "./tailwindVariants"
-const Component = ({ size }: { size: "s" | "l" }) => {
+const Component = ({ size }: { size: "s" | "l" | "m" }) => {
     return (
         <svg
             className={load_circle({ size: size })}

diff --git a/astro/src/components/Client/common/tailwindVariants.ts b/astro/src/components/Client/common/tailwindVariants.ts
@@ -61,6 +61,7 @@ export const load_circle = tv({
         size: {
             s: "h-[20px] w-[20px]",
             l: "h-24 w-24",
+            m: "h-16 w-16"
         },
     },
 })
diff --git a/astro/src/components/Client/index.tsx b/astro/src/components/Client/index.tsx
@@ -19,6 +19,7 @@ import PageControllerForm from "./pagedb/PageControllerForm"
 import type model_getProfile from "@/utils/atproto_api/models/getProfile.json"
 import { link } from "./common/tailwindVariants"
 import { buttonID } from "./bsky/types"
+import InfoOverlay from "./bsky/unique/InfoOverlay"
 
 const Component = ({ portalonly = false }: { portalonly?: boolean }) => {
     const [isLoaded, setIsLoad] = useState<boolean>(false)
@@ -83,6 +84,10 @@ const Component = ({ portalonly = false }: { portalonly?: boolean }) => {
                                           session={session}
                                           setMsgInfo={setMsgInfo}
                                       />
+                                      <InfoOverlay
+                                          msgInfo={msgInfo}
+                                          hide={!isProcessing}
+                                      />
                                       <InfoLabel msgInfo={msgInfo} />
                                       <div
                                           className={

diff --git a/astro/src/layouts/Blanklayout.astro b/astro/src/layouts/Blanklayout.astro
@@ -18,7 +18,7 @@ const { cardPath, pageTitle, robots, hidePostButton } = Astro.props
     </head>
     <body
         class="relative bg-fixed flex flex-col h-auto bg-gradient-to-b from-transparent to-sky-300 text-gray-700 overflow-x-hidden max-w-dvw mx-auto"
-        style="min-height: 100dvh"
+        style="min-height: 100dvh"  id="root"
     >
         <slot name="header" />
         <div class="flex-grow">