vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: added localization, use global player for uploaded audio/video files

Browse Source
This commit is contained in:
khannurien
2026-04-03 15:29:33 +00:00
parent 378b3ffa46
commit 0ce80398a4
64 changed files with 4248 additions and 941 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/CommentThread.tsx
View File

@@ -1,5 +1,7 @@
import React, { useMemo, useRef, useState } from "react";
import { Link } from "react-router";
import { t } from "@lingui/core/macro"
import { Plural, Trans } from "@lingui/react/macro";
import { API_URL } from "../config/api.ts";
import type {
Comment,
@@ -103,7 +105,7 @@ function CommentNode({
setReplyError(data.error.message);
}
} catch {
setReplyError("Could not reach the server. Please try again.");
setReplyError(t`Could not reach the server. Please try again.`);
} finally {
setSubmitting(false);
}
@@ -142,7 +144,7 @@ function CommentNode({
setEditError(data.error.message);
}
} catch {
setEditError("Could not reach the server. Please try again.");
setEditError(t`Could not reach the server. Please try again.`);
} finally {
setEditSubmitting(false);
}
@@ -164,7 +166,9 @@ function CommentNode({
/>
</div>
<div className="comment-content">
<p className="comment-deleted-placeholder">[deleted]</p>
<p className="comment-deleted-placeholder">
<Trans>[deleted]</Trans>
</p>
</div>
</div>
{children.length > 0 && (
@@ -222,9 +226,9 @@ function CommentNode({
</Tooltip>
</Link>
{comment.updatedAt && (
<Tooltip text={`Edited ${comment.updatedAt.toLocaleString()}`}>
<Tooltip text={t`Edited ${comment.updatedAt.toLocaleString()}`}>
<span className="comment-edited">
edited {relativeTime(comment.updatedAt)}
<Trans>edited {relativeTime(comment.updatedAt)}</Trans>
</span>
</Tooltip>
)}
@@ -242,7 +246,7 @@ function CommentNode({
rows={1}
/>
{editError && (
<ErrorCard title="Failed to save edit" message={editError} />
<ErrorCard title={t`Failed to save edit`} message={editError} />
)}
<div className="comment-form-actions">
<button
@@ -250,7 +254,7 @@ function CommentNode({
className="comment-submit-btn"
disabled={editSubmitting || !editBody.trim()}
>
{editSubmitting ? "Saving…" : "Save"}
{editSubmitting ? <Trans>Saving…</Trans> : <Trans>Save</Trans>}
</button>
<button
type="button"
@@ -261,7 +265,7 @@ function CommentNode({
setEditError(null);
}}
>
Cancel
<Trans>Cancel</Trans>
</button>
</div>
</form>
@@ -277,7 +281,7 @@ function CommentNode({
setTimeout(() => replyEditorRef.current?.focus(), 0);
}}
>
Reply
<Trans>Reply</Trans>
</button>
)}
{canEdit && !editOpen && (
@@ -290,7 +294,7 @@ function CommentNode({
setTimeout(() => editEditorRef.current?.focus(), 0);
}}
>
Edit
<Trans>Edit</Trans>
</button>
)}
{canDelete && !editOpen && (
@@ -299,13 +303,13 @@ function CommentNode({
className="comment-action-btn comment-delete-btn"
onClick={() => setConfirmDelete(true)}
>
Delete
<Trans>Delete</Trans>
</button>
)}
{confirmDelete && (
<ConfirmModal
message="Delete this comment?"
confirmLabel="Delete"
message={t`Delete this comment?`}
confirmLabel={t`Delete`}
onConfirm={() => {
setConfirmDelete(false);
handleDelete();
@@ -322,12 +326,12 @@ function CommentNode({
value={replyBody}
onChange={setReplyBody}
onSubmit={handleReply}
placeholder="Write a reply…"
placeholder={t`Write a reply…`}
autoResize
rows={1}
/>
{replyError && (
<ErrorCard title="Failed to post reply" message={replyError} />
<ErrorCard title={t`Failed to post reply`} message={replyError} />
)}
<div className="comment-form-actions">
<button
@@ -335,7 +339,7 @@ function CommentNode({
className="comment-submit-btn"
disabled={submitting || !replyBody.trim()}
>
{submitting ? "Posting…" : "Post reply"}
{submitting ? <Trans>Posting…</Trans> : <Trans>Post reply</Trans>}
</button>
<button
type="button"
@@ -346,7 +350,7 @@ function CommentNode({
setReplyError(null);
}}
>
Cancel
<Trans>Cancel</Trans>
</button>
</div>
</form>
@@ -418,19 +422,18 @@ export function CommentThread({
setTopLevelError(data.error.message);
}
} catch {
setTopLevelError("Could not reach the server. Please try again.");
setTopLevelError(t`Could not reach the server. Please try again.`);
} finally {
setSubmitting(false);
}
}
const visibleCount = comments.filter((c) => !c.deleted).length;
return (
<section className="comment-section">
<h2 className="comment-section-title">
{(() => {
const n = comments.filter((c) => !c.deleted).length;
return n === 1 ? "1 comment" : `${n} comments`;
})()}
<Plural value={visibleCount} one="# comment" other="# comments" />
</h2>
{currentUser && (
@@ -450,13 +453,13 @@ export function CommentThread({
value={topLevelBody}
onChange={setTopLevelBody}
onSubmit={handleTopLevelSubmit}
placeholder="Add a comment…"
placeholder={t`Add a comment…`}
autoResize
rows={1}
/>
{topLevelError && (
<ErrorCard
title="Failed to post comment"
title={t`Failed to post comment`}
message={topLevelError}
/>
)}
@@ -466,7 +469,7 @@ export function CommentThread({
className="comment-submit-btn"
disabled={submitting || !topLevelBody.trim()}
>
{submitting ? "Posting…" : "Post comment"}
{submitting ? <Trans>Posting…</Trans> : <Trans>Post comment</Trans>}
</button>
{topLevelBody.trim() && (
<button
@@ -477,7 +480,7 @@ export function CommentThread({
setTopLevelError(null);
}}
>
Cancel
<Trans>Cancel</Trans>
</button>
)}
</div>