From 190125f0d28ebd85553a0c976a7095cfa2953cca Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 28 Apr 2024 17:30:39 +0200 Subject: [PATCH 01/12] chore(translations): image, video, audio, webpage, iframe --- public/translations/ar/default.json | 7 ++++++- public/translations/bn/default.json | 7 ++++++- public/translations/cs/default.json | 7 ++++++- public/translations/da/default.json | 7 ++++++- public/translations/de/default.json | 7 ++++++- public/translations/el/default.json | 7 ++++++- public/translations/en/default.json | 7 ++++++- public/translations/es/default.json | 7 ++++++- public/translations/fa/default.json | 7 ++++++- public/translations/fi/default.json | 7 ++++++- public/translations/fil/default.json | 7 ++++++- public/translations/fr/default.json | 7 ++++++- public/translations/he/default.json | 7 ++++++- public/translations/hi/default.json | 7 ++++++- public/translations/hu/default.json | 7 ++++++- public/translations/id/default.json | 7 ++++++- public/translations/it/default.json | 7 ++++++- public/translations/ja/default.json | 7 ++++++- public/translations/ko/default.json | 7 ++++++- public/translations/mr/default.json | 7 ++++++- public/translations/nl/default.json | 7 ++++++- public/translations/no/default.json | 7 ++++++- public/translations/pl/default.json | 7 ++++++- public/translations/pt/default.json | 7 ++++++- public/translations/ro/default.json | 7 ++++++- public/translations/ru/default.json | 7 ++++++- public/translations/sq/default.json | 7 ++++++- public/translations/sv/default.json | 7 ++++++- public/translations/te/default.json | 7 ++++++- public/translations/th/default.json | 7 ++++++- public/translations/tr/default.json | 7 ++++++- public/translations/uk/default.json | 7 ++++++- public/translations/ur/default.json | 7 ++++++- public/translations/vi/default.json | 7 ++++++- public/translations/zh/default.json | 7 ++++++- 35 files changed, 210 insertions(+), 35 deletions(-) diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json index c17ccfef..12790b13 100644 --- a/public/translations/ar/default.json +++ b/public/translations/ar/default.json @@ -48,5 +48,10 @@ "name": "الاسم", "comment": "تعليق", "subject": "الموضوع", - "anonymous": "مجهول" + "anonymous": "مجهول", + "image": "صورة", + "video": "فيديو", + "audio": "صوت", + "webpage": "صفحة ويب", + "iframe": "إطار" } \ No newline at end of file diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json index 545ae876..15bf450a 100644 --- a/public/translations/bn/default.json +++ b/public/translations/bn/default.json @@ -48,5 +48,10 @@ "name": "নাম", "comment": "মন্তব্য", "subject": "বিষয়", - "anonymous": "অজানা" + "anonymous": "অজানা", + "image": "ছবি", + "video": "ভিডিও", + "audio": "অডিও", + "webpage": "ওয়েবপেজ", + "iframe": "আইফ্রেম" } \ No newline at end of file diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json index 83f58984..80a09d59 100644 --- a/public/translations/cs/default.json +++ b/public/translations/cs/default.json @@ -48,5 +48,10 @@ "name": "název", "comment": "komentář", "subject": "předmět", - "anonymous": "anonymní" + "anonymous": "anonymní", + "image": "obrázek", + "video": "video", + "audio": "audio", + "webpage": "webová stránka", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/da/default.json b/public/translations/da/default.json index 35209c74..1ffcc41b 100644 --- a/public/translations/da/default.json +++ b/public/translations/da/default.json @@ -48,5 +48,10 @@ "name": "navn", "comment": "kommentar", "subject": "emne", - "anonymous": "anonym" + "anonymous": "anonym", + "image": "billede", + "video": "video", + "audio": "lyd", + "webpage": "websted", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/de/default.json b/public/translations/de/default.json index b82a3c06..1b771cb2 100644 --- a/public/translations/de/default.json +++ b/public/translations/de/default.json @@ -48,5 +48,10 @@ "name": "Name", "comment": "Kommentar", "subject": "Betreff", - "anonymous": "anonym" + "anonymous": "anonym", + "image": "Bild", + "video": "Video", + "audio": "Audio", + "webpage": "Webseite", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/el/default.json b/public/translations/el/default.json index 13a822a3..cee4a4a0 100644 --- a/public/translations/el/default.json +++ b/public/translations/el/default.json @@ -48,5 +48,10 @@ "name": "όνομα", "comment": "σχόλιο", "subject": "θέμα", - "anonymous": "ανώνυμος" + "anonymous": "ανώνυμος", + "image": "εικόνα", + "video": "βίντεο", + "audio": "ήχος", + "webpage": "ιστοσελίδα", + "iframe": "πλαίσιο" } \ No newline at end of file diff --git a/public/translations/en/default.json b/public/translations/en/default.json index 41965aca..6130152c 100644 --- a/public/translations/en/default.json +++ b/public/translations/en/default.json @@ -48,5 +48,10 @@ "name": "name", "comment": "comment", "subject": "subject", - "anonymous": "anonymous" + "anonymous": "anonymous", + "image": "image", + "video": "video", + "audio": "audio", + "webpage": "webpage", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/es/default.json b/public/translations/es/default.json index 2e94b23e..04741f13 100644 --- a/public/translations/es/default.json +++ b/public/translations/es/default.json @@ -48,5 +48,10 @@ "name": "nombre", "comment": "comentario", "subject": "asunto", - "anonymous": "anónimo" + "anonymous": "anónimo", + "image": "imagen", + "video": "video", + "audio": "audio", + "webpage": "página web", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json index 21c97e7b..f332dfcd 100644 --- a/public/translations/fa/default.json +++ b/public/translations/fa/default.json @@ -48,5 +48,10 @@ "name": "نام", "comment": "نظر", "subject": "موضوع", - "anonymous": "ناشناس" + "anonymous": "ناشناس", + "image": "تصویر", + "video": "ویدیو", + "audio": "صدا", + "webpage": "صفحه وب", + "iframe": "فریم" } \ No newline at end of file diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json index d5bd89de..9c4edb0d 100644 --- a/public/translations/fi/default.json +++ b/public/translations/fi/default.json @@ -48,5 +48,10 @@ "name": "nimi", "comment": "kommentti", "subject": "aihe", - "anonymous": "anonyymi" + "anonymous": "anonyymi", + "image": "kuva", + "video": "video", + "audio": "audio", + "webpage": "verkkosivu", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json index f1a0f020..f3a61060 100644 --- a/public/translations/fil/default.json +++ b/public/translations/fil/default.json @@ -48,5 +48,10 @@ "name": "pangalan", "comment": "komento", "subject": "paksa", - "anonymous": "anonimo" + "anonymous": "anonimo", + "image": "larawan", + "video": "video", + "audio": "audio", + "webpage": "pahinahon", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json index fc611b16..330a16ee 100644 --- a/public/translations/fr/default.json +++ b/public/translations/fr/default.json @@ -48,5 +48,10 @@ "name": "nom", "comment": "commentaire", "subject": "sujet", - "anonymous": "anonyme" + "anonymous": "anonyme", + "image": "image", + "video": "vidéo", + "audio": "audio", + "webpage": "page web", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/he/default.json b/public/translations/he/default.json index 803ad4f2..eb62ac00 100644 --- a/public/translations/he/default.json +++ b/public/translations/he/default.json @@ -48,5 +48,10 @@ "name": "שם", "comment": "תגובה", "subject": "נושא", - "anonymous": "אנונימי" + "anonymous": "אנונימי", + "image": "תמונה", + "video": "וידאו", + "audio": "שמע", + "webpage": "דף אינטרנט", + "iframe": "מסגרת" } \ No newline at end of file diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json index 3c779dc1..c9b87e8f 100644 --- a/public/translations/hi/default.json +++ b/public/translations/hi/default.json @@ -48,5 +48,10 @@ "name": "नाम", "comment": "टिप्पणी", "subject": "विषय", - "anonymous": "अनाम" + "anonymous": "अनाम", + "image": "चित्र", + "video": "वीडियो", + "audio": "ऑडियो", + "webpage": "वेबपेज", + "iframe": "आइफ्रेम" } \ No newline at end of file diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json index 34d6ab3e..831c8aed 100644 --- a/public/translations/hu/default.json +++ b/public/translations/hu/default.json @@ -48,5 +48,10 @@ "name": "név", "comment": "megjegyzés", "subject": "tárgy", - "anonymous": "névtelen" + "anonymous": "névtelen", + "image": "kép", + "video": "videó", + "audio": "hang", + "webpage": "weboldal", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/id/default.json b/public/translations/id/default.json index 92283072..7da8c5b6 100644 --- a/public/translations/id/default.json +++ b/public/translations/id/default.json @@ -48,5 +48,10 @@ "name": "nama", "comment": "komentar", "subject": "subjek", - "anonymous": "anonim" + "anonymous": "anonim", + "image": "gambar", + "video": "video", + "audio": "audio", + "webpage": "halaman web", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/it/default.json b/public/translations/it/default.json index 597daf9a..828b3b45 100644 --- a/public/translations/it/default.json +++ b/public/translations/it/default.json @@ -48,5 +48,10 @@ "name": "nome", "comment": "commento", "subject": "oggetto", - "anonymous": "anonimo" + "anonymous": "anonimo", + "image": "immagine", + "video": "video", + "audio": "audio", + "webpage": "pagina web", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json index 55e490a2..84e85634 100644 --- a/public/translations/ja/default.json +++ b/public/translations/ja/default.json @@ -48,5 +48,10 @@ "name": "名前", "comment": "コメント", "subject": "件名", - "anonymous": "匿名" + "anonymous": "匿名", + "image": "画像", + "video": "ビデオ", + "audio": "音声", + "webpage": "ウェブページ", + "iframe": "アイフレーム" } \ No newline at end of file diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json index 83956a99..e06d9cc8 100644 --- a/public/translations/ko/default.json +++ b/public/translations/ko/default.json @@ -48,5 +48,10 @@ "name": "이름", "comment": "댓글", "subject": "제목", - "anonymous": "익명" + "anonymous": "익명", + "image": "이미지", + "video": "비디오", + "audio": "오디오", + "webpage": "웹 페이지", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json index 4350e851..277db5df 100644 --- a/public/translations/mr/default.json +++ b/public/translations/mr/default.json @@ -48,5 +48,10 @@ "name": "नाव", "comment": "टिप्पणी", "subject": "विषय", - "anonymous": "अनाम" + "anonymous": "अनाम", + "image": "चित्र", + "video": "व्हिडिओ", + "audio": "ऑडिओ", + "webpage": "वेबपेज", + "iframe": "आयफ्रेम" } \ No newline at end of file diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json index a37f56d4..b3c15338 100644 --- a/public/translations/nl/default.json +++ b/public/translations/nl/default.json @@ -48,5 +48,10 @@ "name": "naam", "comment": "opmerking", "subject": "onderwerp", - "anonymous": "anoniem" + "anonymous": "anoniem", + "image": "afbeelding", + "video": "video", + "audio": "audio", + "webpage": "webpagina", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/no/default.json b/public/translations/no/default.json index 0a895739..d54c3df8 100644 --- a/public/translations/no/default.json +++ b/public/translations/no/default.json @@ -48,5 +48,10 @@ "name": "navn", "comment": "kommentar", "subject": "emne", - "anonymous": "anonym" + "anonymous": "anonym", + "image": "bilde", + "video": "video", + "audio": "lyd", + "webpage": "nettside", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json index 72149964..d4461b1b 100644 --- a/public/translations/pl/default.json +++ b/public/translations/pl/default.json @@ -48,5 +48,10 @@ "name": "nazwa", "comment": "komentarz", "subject": "temat", - "anonymous": "anonimowy" + "anonymous": "anonimowy", + "image": "obraz", + "video": "wideo", + "audio": "audio", + "webpage": "strona internetowa", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json index f6ab14ae..bcc96a95 100644 --- a/public/translations/pt/default.json +++ b/public/translations/pt/default.json @@ -48,5 +48,10 @@ "name": "nome", "comment": "comentário", "subject": "assunto", - "anonymous": "anônimo" + "anonymous": "anônimo", + "image": "imagem", + "video": "vídeo", + "audio": "áudio", + "webpage": "página da web", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json index 7d13dd9f..dfc630f0 100644 --- a/public/translations/ro/default.json +++ b/public/translations/ro/default.json @@ -48,5 +48,10 @@ "name": "nume", "comment": "comentariu", "subject": "subiect", - "anonymous": "anonim" + "anonymous": "anonim", + "image": "imagine", + "video": "video", + "audio": "audio", + "webpage": "pagină web", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json index 7bec8b63..9d1e5817 100644 --- a/public/translations/ru/default.json +++ b/public/translations/ru/default.json @@ -48,5 +48,10 @@ "name": "имя", "comment": "комментарий", "subject": "тема", - "anonymous": "анонимный" + "anonymous": "анонимный", + "image": "изображение", + "video": "видео", + "audio": "аудио", + "webpage": "веб-страница", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json index 2ac55e2f..e1b61844 100644 --- a/public/translations/sq/default.json +++ b/public/translations/sq/default.json @@ -48,5 +48,10 @@ "name": "emri", "comment": "koment", "subject": "subjekt", - "anonymous": "anonim" + "anonymous": "anonim", + "image": "imazh", + "video": "video", + "audio": "audio", + "webpage": "faqja web", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json index d8878260..ef169c93 100644 --- a/public/translations/sv/default.json +++ b/public/translations/sv/default.json @@ -48,5 +48,10 @@ "name": "namn", "comment": "kommentar", "subject": "ämne", - "anonymous": "anonym" + "anonymous": "anonym", + "image": "bild", + "video": "video", + "audio": "ljud", + "webpage": "webbsida", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/te/default.json b/public/translations/te/default.json index 389768f2..5fc270d4 100644 --- a/public/translations/te/default.json +++ b/public/translations/te/default.json @@ -48,5 +48,10 @@ "name": "పేరు", "comment": "వ్యాఖ్య", "subject": "విషయం", - "anonymous": "అనామధుడు" + "anonymous": "అనామధుడు", + "image": "చిత్రం", + "video": "వీడియో", + "audio": "ఆడియో", + "webpage": "వెబ్ పేజీ", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/th/default.json b/public/translations/th/default.json index ef2450b0..e5ab0833 100644 --- a/public/translations/th/default.json +++ b/public/translations/th/default.json @@ -48,5 +48,10 @@ "name": "ชื่อ", "comment": "ความคิดเห็น", "subject": "หัวข้อ", - "anonymous": "นิรนาม" + "anonymous": "นิรนาม", + "image": "ภาพ", + "video": "วิดีโอ", + "audio": "เสียง", + "webpage": "หน้าเว็บ", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json index 181c8c48..82634564 100644 --- a/public/translations/tr/default.json +++ b/public/translations/tr/default.json @@ -48,5 +48,10 @@ "name": "isim", "comment": "yorum", "subject": "konu", - "anonymous": "anonim" + "anonymous": "anonim", + "image": "görüntü", + "video": "video", + "audio": "ses", + "webpage": "web sayfası", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json index a4d628d3..09cbaa8f 100644 --- a/public/translations/uk/default.json +++ b/public/translations/uk/default.json @@ -48,5 +48,10 @@ "name": "ім'я", "comment": "коментар", "subject": "тема", - "anonymous": "анонім" + "anonymous": "анонім", + "image": "зображення", + "video": "відео", + "audio": "аудіо", + "webpage": "веб-сторінка", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json index 83c35fd3..5187a463 100644 --- a/public/translations/ur/default.json +++ b/public/translations/ur/default.json @@ -48,5 +48,10 @@ "name": "نام", "comment": "تبصرہ", "subject": "موضوع", - "anonymous": "ناشناس" + "anonymous": "ناشناس", + "image": "تصویر", + "video": "ویڈیو", + "audio": "آڈیو", + "webpage": "ویب پیج", + "iframe": "آئی فریم" } \ No newline at end of file diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json index 43b2ede6..84db87b2 100644 --- a/public/translations/vi/default.json +++ b/public/translations/vi/default.json @@ -48,5 +48,10 @@ "name": "tên", "comment": "bình luận", "subject": "chủ đề", - "anonymous": "ẩn danh" + "anonymous": "ẩn danh", + "image": "hình ảnh", + "video": "video", + "audio": "âm thanh", + "webpage": "trang web", + "iframe": "iframe" } \ No newline at end of file diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json index 0d1f1349..cd9e55eb 100644 --- a/public/translations/zh/default.json +++ b/public/translations/zh/default.json @@ -48,5 +48,10 @@ "name": "名字", "comment": "评论", "subject": "主题", - "anonymous": "匿名" + "anonymous": "匿名", + "image": "图片", + "video": "视频", + "audio": "音频", + "webpage": "网页", + "iframe": "框架" } \ No newline at end of file From a949b5096a51ef0e1fe143732e224719bf3a472d Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 28 Apr 2024 17:40:05 +0200 Subject: [PATCH 02/12] style(post): translate link types, anonymous displayName --- src/components/comment-media/comment-media.tsx | 16 +++++++++------- src/components/post/post.tsx | 18 ++++++++++-------- src/lib/utils/media-utils.ts | 15 +++++++++++++++ 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx index 899ca88f..55ec8e76 100644 --- a/src/components/comment-media/comment-media.tsx +++ b/src/components/comment-media/comment-media.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import styles from './comment-media.module.css'; -import { CommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; -import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; -import Embed, { canEmbed } from '../embed'; import { useTranslation } from 'react-i18next'; -import useWindowWidth from '../../hooks/use-window-width'; +import styles from './comment-media.module.css'; +import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils'; import { getHostname } from '../../lib/utils/url-utils'; +import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; +import useWindowWidth from '../../hooks/use-window-width'; +import Embed, { canEmbed } from '../embed'; interface MediaProps { commentMediaInfo?: CommentMediaInfo; @@ -129,7 +129,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => { {url && url.length > 30 ? url.slice(0, 30) + '...' : url} {' '} - ({type}) + ({getDisplayMediaInfoType(type, t)}) )} {isMobile && (type === 'iframe' || type === 'video' || type === 'audio') && ( @@ -144,8 +144,10 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => { }; const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => { + const { t } = useTranslation(); const isMobile = useWindowWidth() < 640; const { type, url } = commentMediaInfo || {}; + return ( @@ -160,7 +162,7 @@ const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, link setShowThumbnail={setShowThumbnail} /> )} - {isMobile && type &&
{type}
} + {isMobile && type &&
{getDisplayMediaInfoType(type, t)}
} {!showThumbnail && } diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index ff426650..09a34523 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -70,7 +70,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { {url.length > 30 ? url.slice(0, 30) + '...' : url} {' '} - ({type}) + ({type && getDisplayMediaInfoType(type, t)}) {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( {' '} @@ -112,7 +112,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { {title && {displayTitle} } - {displayName || 'Anonymous'} + {displayName || _.capitalize(t('anonymous'))} {authorRole && ` ## Board ${authorRole}`}{' '} {!(isDescription || isRules) && (u/{shortAddress}) } @@ -226,7 +226,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { - {displayName || 'Anonymous'} + {displayName || _.capitalize(t('anonymous'))} {authorRole && ` ## Board ${authorRole}`}{' '} (u/{shortAddress}) @@ -268,7 +268,8 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { {t('link')}:{' '} {link.length > 30 ? link?.slice(0, 30) + '...' : link} - + {' '} + ({type && getDisplayMediaInfoType(type, t)}) {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && ( {' '} @@ -362,7 +363,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { - {displayName || 'Anonymous'} + {displayName || _.capitalize(t('anonymous'))} {authorRole && ` ## Board ${authorRole}`}{' '} {!(isDescription || isRules) && (u/{shortAddress || address?.slice(0, 12) + '...'})} @@ -468,7 +469,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => { ... - {displayName || 'Anonymous'} + {displayName || _.capitalize(t('anonymous'))} {authorRole && ` ## Board ${authorRole}`}{' '} (u/{shortAddress}) @@ -528,11 +529,12 @@ const Post = ({ post, showAllReplies = false }: PostProps) => { const isMobile = useWindowWidth() < 640; return (
+ {showReplyModal && }
{isMobile ? ( - + ) : ( - + )}
diff --git a/src/lib/utils/media-utils.ts b/src/lib/utils/media-utils.ts index 86c6f3b4..2fd0a2f0 100644 --- a/src/lib/utils/media-utils.ts +++ b/src/lib/utils/media-utils.ts @@ -11,6 +11,21 @@ export interface CommentMediaInfo { patternThumbnailUrl?: string; } +export const getDisplayMediaInfoType = (type: string, t: any) => { + switch (type) { + case 'image': + return t('image'); + case 'iframe': + return t('iframe'); + case 'video': + return t('video'); + case 'audio': + return t('audio'); + default: + return t('webpage'); + } +}; + export const getHasThumbnail = (commentMediaInfo: CommentMediaInfo | undefined, link: string | undefined): boolean => { const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail; return link && From ff70533e449182bbc57d8285e6a82e0b19e9c3a4 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 28 Apr 2024 17:44:21 +0200 Subject: [PATCH 03/12] Update board-buttons.tsx --- src/components/board-buttons/board-buttons.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 4ff050ce..04aac440 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -58,6 +58,7 @@ export const MobileBoardButtons = () => { const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; const isInPostPage = isPostPageView(location.pathname, params); + const isInCatalogView = isCatalogView(location.pathname, params); const isInPendingPostPage = isPendingPostView(location.pathname, params); return ( @@ -75,7 +76,7 @@ export const MobileBoardButtons = () => { ) : ( <> - + )} @@ -97,7 +98,7 @@ export const DesktopBoardButtons = () => {
{isInPostPage || isInPendingPostPage ? ( <> - [] [] [] [ + [] [] [] [ ] [] From 75774e5a38d02f957a03bf80b947c5bdc1f7ed3c Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 28 Apr 2024 18:01:23 +0200 Subject: [PATCH 04/12] Update package.json --- package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index b1f06938..f4ccafd8 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "prettier": "3.0.3", "react": "18.2.0", "react-dom": "18.2.0", - "react-draggable": "^4.4.6", + "react-draggable": "4.4.6", "react-i18next": "13.2.2", "react-markdown": "8.0.6", "react-router-dom": "6.16.0", @@ -136,9 +136,6 @@ "category": "Network" } }, - "resolutions": { - "styled-components": "^5" - }, "lint-staged": { "{src,electron}/**/*.{js,ts,tsx}": [ "prettier --write" From ef1580e8c0c269363f52fc23013359637bf134f7 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 28 Apr 2024 19:01:53 +0200 Subject: [PATCH 05/12] fix(challenge modal): react-draggable requires nodeRef in React StrictMode --- src/components/challenge-modal/challenge-modal.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/challenge-modal/challenge-modal.tsx b/src/components/challenge-modal/challenge-modal.tsx index 569647be..d9b8c1d0 100644 --- a/src/components/challenge-modal/challenge-modal.tsx +++ b/src/components/challenge-modal/challenge-modal.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useRef, useState } from 'react'; import Draggable from 'react-draggable'; import { useTranslation } from 'react-i18next'; import { Challenge as ChallengeType } from '@plebbit/plebbit-react-hooks'; @@ -50,9 +50,12 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => { } }; + // react-draggable requires a ref to the modal node + const nodeRef = useRef(null); + return ( - -
+ +
Challenge for {publicationType}
- +
{title && (
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 09a34523..5cf7dc01 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { Link, useLocation, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { Role, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; import { getFormattedDate } from '../../lib/utils/time-utils'; @@ -11,10 +11,13 @@ import useReplies from '../../hooks/use-replies'; import useStateString from '../../hooks/use-state-string'; import useWindowWidth from '../../hooks/use-window-width'; import styles from './post.module.css'; -import LoadingEllipsis from '../loading-ellipsis'; -import Markdown from '../markdown'; import CommentMedia from '../comment-media'; import { canEmbed } from '../embed'; +import LoadingEllipsis from '../loading-ellipsis'; +import Markdown from '../markdown'; +import ReplyModal from '../reply-modal'; +import _ from 'lodash'; +import { getDisplayMediaInfoType } from '../../lib/utils/media-utils'; interface PostProps { index?: number; @@ -22,9 +25,10 @@ interface PostProps { reply?: any; roles?: Role[]; showAllReplies?: boolean; + openReplyModal?: (cid: string) => void; } -const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { +const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; @@ -53,6 +57,10 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { const [menuBtnRotated, setMenuBtnRotated] = useState(false); + // pending reply by account is not yet published + const account = useAccount(); + const accountShortAddress = account?.author?.shortAddress; + return (
@@ -115,7 +123,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { {displayName || _.capitalize(t('anonymous'))} {authorRole && ` ## Board ${authorRole}`}{' '} - {!(isDescription || isRules) && (u/{shortAddress}) } + {!(isDescription || isRules) && (u/{shortAddress || accountShortAddress}) } {getFormattedDate(timestamp)} @@ -124,13 +132,13 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { {!(isDescription || isRules) && ( - !cid && e.preventDefault()}> + !cid && e.preventDefault()}> c/ {!cid ? ( {state === 'failed' ? 'Failed' : 'Pending'} ) : ( - + openReplyModal && openReplyModal(cid)}> {shortCid} )} @@ -187,15 +195,15 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { {!(pinned && !isInPostPage) && replies && (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => ( -
- +
+
))}
); }; -const ReplyDesktop = ({ reply, roles }: PostProps) => { +const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = reply || {}; const { address, displayName, shortAddress } = author || {}; @@ -216,6 +224,10 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
{stateString !== 'Failed' ? : stateString}
); + // pending reply by account is not yet published + const account = useAccount(); + const accountShortAddress = account?.author?.shortAddress; + return (
{'>>'}
@@ -229,18 +241,18 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { {displayName || _.capitalize(t('anonymous'))} {authorRole && ` ## Board ${authorRole}`}{' '} - (u/{shortAddress}) + (u/{shortAddress || accountShortAddress}) {getFormattedDate(timestamp)} - !cid && e.preventDefault()}> + !cid && e.preventDefault()}> c/ {!cid ? ( {state === 'failed' ? 'Failed' : 'Pending'} ) : ( - + openReplyModal && openReplyModal(cid)}> {shortCid} )} @@ -314,7 +326,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { )} - {!cid && ( + {!cid && state === 'pending' && ( <>
{loadingString} @@ -327,7 +339,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => { ); }; -const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { +const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; @@ -349,6 +361,10 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { const replies = useReplies(post); + // pending reply by account is not yet published + const account = useAccount(); + const accountShortAddress = account?.author?.shortAddress; + return (
@@ -366,7 +382,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { {displayName || _.capitalize(t('anonymous'))} {authorRole && ` ## Board ${authorRole}`}{' '} - {!(isDescription || isRules) && (u/{shortAddress || address?.slice(0, 12) + '...'})} + {!(isDescription || isRules) && (u/{shortAddress || accountShortAddress})} {pinned && ( @@ -394,7 +410,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { {!cid ? ( {state === 'failed' ? 'Failed' : 'Pending'} ) : ( - + openReplyModal && openReplyModal(cid)}> {shortCid} )} @@ -441,7 +457,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { replies && (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
- +
))}
@@ -449,7 +465,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { ); }; -const ReplyMobile = ({ reply, roles }: PostProps) => { +const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => { const { t } = useTranslation(); const { author, content, cid, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = reply || {}; const { address, displayName, shortAddress } = author || {}; @@ -461,6 +477,15 @@ const ReplyMobile = ({ reply, roles }: PostProps) => { const isReplyingToReply = postCid !== parentCid; + // pending reply by account is not yet published + const account = useAccount(); + const accountShortAddress = account?.author?.shortAddress; + + const stateString = useStateString(reply); + const loadingString = stateString && ( +
{stateString !== 'Failed' ? : stateString}
+ ); + return (
@@ -472,7 +497,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => { {displayName || _.capitalize(t('anonymous'))} {authorRole && ` ## Board ${authorRole}`}{' '} - (u/{shortAddress}) + (u/{shortAddress || accountShortAddress}) {pinned && ( @@ -489,7 +514,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => { {!cid ? ( {state === 'failed' ? 'Failed' : 'Pending'} ) : ( - + openReplyModal && openReplyModal(cid)}> {shortCid} )} @@ -516,6 +541,12 @@ const ReplyMobile = ({ reply, roles }: PostProps) => { )} + {!cid && state === 'pending' && ( + <> +
+ {loadingString} + + )} )}
@@ -527,14 +558,36 @@ const ReplyMobile = ({ reply, roles }: PostProps) => { const Post = ({ post, showAllReplies = false }: PostProps) => { const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress }); const isMobile = useWindowWidth() < 640; + + const [showReplyModal, setShowReplyModal] = useState(false); + const [activeCid, setActiveCid] = useState(null); + + const openReplyModal = (cid: string) => { + if (activeCid && activeCid !== cid) { + closeModal(); + setActiveCid(cid); + setShowReplyModal(true); + } else if (!activeCid) { + setActiveCid(cid); + setShowReplyModal(true); + } else { + return; + } + }; + + const closeModal = () => { + setActiveCid(null); + setShowReplyModal(false); + }; + return (
- {showReplyModal && } + {showReplyModal && activeCid && }
{isMobile ? ( - + ) : ( - + )}
diff --git a/src/components/reply-modal/index.ts b/src/components/reply-modal/index.ts new file mode 100644 index 00000000..b6861856 --- /dev/null +++ b/src/components/reply-modal/index.ts @@ -0,0 +1 @@ +export { default } from './reply-modal'; diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css new file mode 100644 index 00000000..5acd55f6 --- /dev/null +++ b/src/components/reply-modal/reply-modal.module.css @@ -0,0 +1,60 @@ +.container { + position: fixed; + top: calc(50% - 150px); + left: calc(50% - 150px); + display: block; + padding: 2px; + font-size: 10pt; + border-left: none; + border-top: none; + z-index: 1000; + background-color: var(--challenge-modal-background-color); + border: var(--challenge-modal-border); +} + +.title { + font-size: var(--challenge-modal-title-font-size); + text-align: center; + margin-bottom: 1px; + padding: 0; + height: 18px; + line-height: 18px; + cursor: move; + font-weight: var(--challenge-modal-title-font-weight); + background-color: var(--challenge-modal-title-background-color); + color: var(--challenge-modal-title-text-color); + border: var(--challenge-modal-title-border); +} + +.closeIcon { + all: unset; + float: right; + cursor: pointer; + margin-bottom: -4px; + width: 18px; + height: 18px; + border: none; + image-rendering: pixelated; + background-image: var(--close-button-background-image); +} + +.container input, .container textarea { + border: 1px solid #aaa; + font-family: Arial, Helvetica, sans-serif; + font-size: 10pt; + outline: medium none; + width: 298px; + filter: var(--filter80); + padding: 2px; + margin-bottom: 1px; +} + +.content textarea { + vertical-align: top; +} + +.footer button { + text-transform: capitalize; + float: right; + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx new file mode 100644 index 00000000..eda69f8d --- /dev/null +++ b/src/components/reply-modal/reply-modal.tsx @@ -0,0 +1,80 @@ +import { useEffect, useRef } from 'react'; +import { useParams } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import Draggable from 'react-draggable'; +import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; +import { useAccount } from '@plebbit/plebbit-react-hooks'; +import { isValidURL } from '../../lib/utils/url-utils'; +import useReply from '../../hooks/use-reply'; +import styles from './reply-modal.module.css'; +import _ from 'lodash'; + +interface ReplyModalProps { + closeModal: () => void; + parentCid: string; +} + +const ReplyModal = ({ closeModal, parentCid }: ReplyModalProps) => { + const { t } = useTranslation(); + const { subplebbitAddress } = useParams() as { subplebbitAddress: string }; + const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid: parentCid, subplebbitAddress }); + + const account = useAccount(); + const { displayName } = account?.author || {}; + + const textRef = useRef(null); + const urlRef = useRef(null); + + const onPublishReply = () => { + const currentContent = textRef.current?.value || ''; + const currentUrl = urlRef.current?.value || ''; + + if (!currentContent.trim() && !currentUrl) { + alert(`Cannot post empty comment`); + return; + } + + if (currentUrl && !isValidURL(currentUrl)) { + alert('The provided link is not a valid URL.'); + return; + } + publishReply(); + }; + + useEffect(() => { + if (typeof replyIndex === 'number') { + closeModal(); + resetContent(); + } + }, [replyIndex, resetContent, closeModal]); + + // react-draggable requires a ref to the modal node + const nodeRef = useRef(null); + + return ( + +
+
+ Reply to c/{parentCid && Plebbit.getShortCid(parentCid)} +
+
+
+ +
+
+ setContent.link(e.target.value)} /> +
+
+