Display CW switch

h3poteto · Nov 25, 2023 · fcbca21 · fcbca21
1 parent b0603ee
commit fcbca21
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -12,7 +12,9 @@
         "vote": "Vote",
         "people": "{num} people",
         "closed": "Closed"
-      }
+      },
+      "show_more": "Show more",
+      "show_less": "Show less"
     }
   },
   "accounts": {

diff --git a/renderer/components/compose/Compose.tsx b/renderer/components/compose/Compose.tsx
@@ -41,7 +41,7 @@ export default function Compose(props: Props) {
       })
     }
     const sensitive = document.getElementById('sensitive') as HTMLInputElement
-    if (sensitive.checked) {
+    if (sensitive && sensitive.checked) {
       options = Object.assign({}, options, {
         sensitive: sensitive.checked
       })

diff --git a/renderer/components/timelines/status/Body.tsx b/renderer/components/timelines/status/Body.tsx
@@ -1,19 +1,48 @@
 import { Entity } from 'megalodon'
-import { HTMLAttributes } from 'react'
+import { Dispatch, HTMLAttributes, SetStateAction } from 'react'
 import emojify from '@/utils/emojify'
+import { Button } from 'flowbite-react'
+import { FormattedMessage } from 'react-intl'
 
 type Props = {
   status: Entity.Status
+  spoilered: boolean
+  setSpoilered: Dispatch<SetStateAction<boolean>>
 } & HTMLAttributes<HTMLElement>
 
 export default function Body(props: Props) {
+  const { spoilered, setSpoilered } = props
+
+  const spoiler = () => {
+    if (props.status.spoiler_text.length > 0) {
+      return (
+        <div>
+          <div
+            className="spoiler-text"
+            style={Object.assign({ wordWrap: 'break-word' }, props.style)}
+            dangerouslySetInnerHTML={{ __html: emojify(props.status.spoiler_text, props.status.emojis) }}
+            onClick={props.onClick}
+          />
+          <Button size="xs" color="gray" className="focus:ring-0 my-1" onClick={() => setSpoilered(current => !current)}>
+            {spoilered ? <FormattedMessage id="timeline.status.show_more" /> : <FormattedMessage id="timeline.status.show_less" />}
+          </Button>
+        </div>
+      )
+    } else {
+      return null
+    }
+  }
+
   return (
     <>
-      <div
-        className={props.className}
-        style={Object.assign({ wordWrap: 'break-word' }, props.style)}
-        dangerouslySetInnerHTML={{ __html: emojify(props.status.content, props.status.emojis) }}
-      />
+      {spoiler()}
+      {!spoilered && (
+        <div
+          className={props.className}
+          style={Object.assign({ wordWrap: 'break-word' }, props.style)}
+          dangerouslySetInnerHTML={{ __html: emojify(props.status.content, props.status.emojis) }}
+        />
+      )}
     </>
   )
 }
diff --git a/renderer/components/timelines/status/Status.tsx b/renderer/components/timelines/status/Status.tsx
@@ -9,6 +9,7 @@ import Poll from './Poll'
 import { FormattedMessage } from 'react-intl'
 import Actions from './Actions'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 
 type Props = {
   status: Entity.Status
@@ -18,6 +19,7 @@ type Props = {
 
 export default function Status(props: Props) {
   const status = originalStatus(props.status)
+  const [spoilered, setSpoilered] = useState(status.spoiler_text.length > 0)
   const router = useRouter()
 
   const onRefresh = async () => {
@@ -49,10 +51,15 @@ export default function Status(props: Props) {
               <time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
             </div>
           </div>
-          <Body status={status} />
-          {status.poll && <Poll poll={status.poll} onRefresh={onRefresh} client={props.client} />}
-          {status.card && <Card card={status.card} />}
-          <Media media={status.media_attachments} />
+          <Body status={status} spoilered={spoilered} setSpoilered={setSpoilered} />
+          {!spoilered && (
+            <>
+              {status.poll && <Poll poll={status.poll} onRefresh={onRefresh} client={props.client} />}
+              {status.card && <Card card={status.card} />}
+              <Media media={status.media_attachments} />
+            </>
+          )}
+
           <Actions status={status} client={props.client} onRefresh={onRefresh} />
         </div>
       </div>