From ea13f7170c8dd21298e490df46c0df804290d6c9 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Wed, 29 Nov 2023 00:07:21 +0900
Subject: [PATCH] Fix media hidden buttons

---
 .../components/timelines/status/Media.tsx     | 78 +++++++++----------
 1 file changed, 35 insertions(+), 43 deletions(-)

diff --git a/renderer/components/timelines/status/Media.tsx b/renderer/components/timelines/status/Media.tsx
index cc30865e..1cce325e 100644
--- a/renderer/components/timelines/status/Media.tsx
+++ b/renderer/components/timelines/status/Media.tsx
@@ -1,6 +1,6 @@
+import { Button } from 'flowbite-react'
 import { Entity } from 'megalodon'
 import { useState } from 'react'
-import { Blurhash } from 'react-blurhash'
 import { FaEyeSlash } from 'react-icons/fa6'
 import { FormattedMessage } from 'react-intl'
 
@@ -11,54 +11,46 @@ type Props = {
 export default function Media(props: Props) {
   const [sensitive, setSensitive] = useState(props.sensitive)
 
-  return (
-    <div className="relative">
-      {sensitive ? (
-        <button className="absolute bg-gray-600 text-gray-200 top-1 left-1 p-1 rounded z-10" onClick={() => setSensitive(false)}>
-          <FormattedMessage id="timeline.status.cw" />
-        </button>
-      ) : (
-        <button className="absolute bg-gray-600 text-gray-200 top-1 left-1 p-1 rounded z-10" onClick={() => setSensitive(true)}>
-          <FaEyeSlash />
-        </button>
-      )}
-
-      <div className="mt-2 flex flex-wrap gap-2">
-        {props.media.map((media, key) => (
-          <div key={key}>
-            <Attachment attachment={media} sensitive={sensitive} />
-          </div>
-        ))}
+  if (props.media.length > 0) {
+    return (
+      <div className="relative">
+        {sensitive ? (
+          <Button size="xs" color="gray" className="focus:ring-0 my-1" onClick={() => setSensitive(false)}>
+            <FormattedMessage id="timeline.status.cw" />
+          </Button>
+        ) : (
+          <>
+            <button className="absolute bg-gray-600 text-gray-200 top-1 left-1 p-1 rounded z-10" onClick={() => setSensitive(true)}>
+              <FaEyeSlash />
+            </button>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {props.media.map((media, key) => (
+                <div key={key}>
+                  <Attachment attachment={media} />
+                </div>
+              ))}
+            </div>
+          </>
+        )}
       </div>
-    </div>
-  )
+    )
+  } else {
+    return null
+  }
 }
 
 type AttachmentProps = {
   attachment: Entity.Attachment
-  sensitive: boolean
 }
 
 function Attachment(props: AttachmentProps) {
-  if (props.sensitive) {
-    return (
-      <Blurhash
-        hash={props.attachment.blurhash}
-        height={144}
-        width={144}
-        className="max-w-full rounded-md"
-        style={{ marginBottom: '2px' }}
-      />
-    )
-  } else {
-    return (
-      <img
-        src={props.attachment.preview_url}
-        className="mb-2 max-w-full cursor-pointer"
-        style={{ width: '144px', height: '144px' }}
-        alt={props.attachment.description}
-        title={props.attachment.description}
-      />
-    )
-  }
+  return (
+    <img
+      src={props.attachment.preview_url}
+      className="mb-2 max-w-full cursor-pointer"
+      style={{ height: '144px' }}
+      alt={props.attachment.description}
+      title={props.attachment.description}
+    />
+  )
 }