diff --git a/src/components/messageStream/MessageStream.tsx b/src/components/messageStream/MessageStream.tsx
index 2462c39..5a58b06 100644
--- a/src/components/messageStream/MessageStream.tsx
+++ b/src/components/messageStream/MessageStream.tsx
@@ -18,10 +18,12 @@ export function MessageStream({ scope }: MessageStreamProps) {
const type = sp.get("type") || "all";
const q = (sp.get("q") || "").trim();
+ const sort = sp.get("sort") || "";
+ const tag = sp.get("tag") || "";
const params = useMemo(
- () => ({ scope, type, q, lang }),
- [scope, type, q, lang],
+ () => ({ scope, type, q, sort, tag, lang }),
+ [scope, type, q, sort, tag, lang],
);
const { items, isLoading, error, hasMore, loadMore, reset } =
diff --git a/src/components/messageStream/bubbles/VideoBubble.tsx b/src/components/messageStream/bubbles/VideoBubble.tsx
index c553eee..6ec6fb3 100644
--- a/src/components/messageStream/bubbles/VideoBubble.tsx
+++ b/src/components/messageStream/bubbles/VideoBubble.tsx
@@ -77,15 +77,23 @@ function VideoAttachmentCard({
}}
>
{playing && !compact ? (
-
+ <>
+
+
+ >
) : (
<>
{posterUrl ? (
diff --git a/src/components/messageStream/hooks/usePostStream.ts b/src/components/messageStream/hooks/usePostStream.ts
index 3bfcf6a..c144b5e 100644
--- a/src/components/messageStream/hooks/usePostStream.ts
+++ b/src/components/messageStream/hooks/usePostStream.ts
@@ -16,6 +16,7 @@ export type PostStreamParams = {
language?: string;
q?: string;
sort?: string;
+ tag?: string;
lang: Lang;
};
@@ -60,6 +61,9 @@ function filterMock(params: PostStreamParams): Post[] {
return false;
const q = params.q?.trim().toLowerCase();
if (params.language && p.language !== params.language) return false;
+ const tag = params.tag?.trim().toLowerCase();
+ if (tag && !(p.tags ?? []).some((t) => t.toLowerCase() === tag))
+ return false;
if (q) {
const haystack = [
p.text ?? "",
@@ -89,6 +93,7 @@ function buildRealUrl(params: PostStreamParams, cursor?: string): string {
if (params.scope.kind === "category") sp.set("category", params.scope.slug);
if (params.type && params.type !== "all") sp.set("type", params.type);
if (params.sort) sp.set("sort", params.sort);
+ if (params.tag) sp.set("tag", params.tag);
if (params.language) sp.set("language", sourceLanguageQuery(params.language));
if (cursor) sp.set("cursor", cursor);
return `${q ? "/api/posts/search" : "/api/posts"}?${sp.toString()}`;
@@ -166,6 +171,7 @@ export function usePostStream(params: PostStreamParams): PostStreamResult {
params.language,
params.q,
params.sort,
+ params.tag,
params.lang,
]);
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 088dd89..07bd0b5 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -4,6 +4,7 @@ import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
import { ArkLogoMark } from "../components/ArkLogoMark";
import { useI18n, type Lang } from "../i18n";
import { LANG_OPTIONS } from "../i18nLanguages";
+import { isPopularTag, popularTagParam } from "../utils/popularTag";
type PublicNavWhich =
| "home"
@@ -20,6 +21,7 @@ function navIsActive(
search: string,
hash: string,
which: PublicNavWhich,
+ currentLang: Lang,
): boolean {
const sp = new URLSearchParams(search);
switch (which) {
@@ -37,7 +39,9 @@ function navIsActive(
case "browseRecommended":
return pathname === "/official-recommendations";
case "browsePopular":
- return pathname === "/browse" && sp.get("sort") === "popular";
+ return (
+ pathname === "/browse" && isPopularTag(sp.get("tag") || "", currentLang)
+ );
case "favorites":
return (
pathname === "/favorites" || (pathname === "/" && hash === "#favorites")
@@ -273,9 +277,10 @@ export function PublicLayout() {
const nav = useNavigate();
const na = (which: PublicNavWhich) =>
- navIsActive(pathname, search, hash, which);
+ navIsActive(pathname, search, hash, which, lang);
const isHome = pathname === "/";
const footerInContentFlow = pathname === "/browse";
+ const popularHref = `/browse?tag=${popularTagParam(lang)}`;
const goSearch = () => {
const s = q.trim();
@@ -416,7 +421,7 @@ export function PublicLayout() {
{t("latest")}
@@ -518,7 +523,7 @@ export function PublicLayout() {
{t("latest")}
setOpen(false)}
@@ -593,12 +598,12 @@ export function PublicLayout() {
active={na("favorites")}
/>
diff --git a/src/pages/Browse/index.tsx b/src/pages/Browse/index.tsx
index 11136e3..8806927 100644
--- a/src/pages/Browse/index.tsx
+++ b/src/pages/Browse/index.tsx
@@ -2,18 +2,20 @@ import { useSearchParams } from "react-router-dom";
import { MessageStream } from "../../components/messageStream/MessageStream";
import { SectionHeader } from "../../components/SectionHeader";
import { useI18n } from "../../i18n";
+import { isPopularTag } from "../../utils/popularTag";
export function Browse() {
- const { t } = useI18n();
+ const { t, lang } = useI18n();
const [sp] = useSearchParams();
const q = sp.get("q") || "";
const sort = sp.get("sort") || "";
+ const tag = sp.get("tag") || "";
const title = q
? `${t("search")}: ${q}`
- : sort === "latest"
- ? t("latest")
- : sort === "popular"
- ? t("popular")
+ : isPopularTag(tag, lang)
+ ? t("popular")
+ : sort === "latest"
+ ? t("latest")
: sort === "recommended"
? t("official")
: t("all");
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index fe1a9cb..8d7b08f 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -13,6 +13,7 @@ import { SectionHeader } from "../../components/SectionHeader";
import { MessageBubble } from "../../components/messageStream/MessageBubble";
import { langQuery, useI18n } from "../../i18n";
import { sourceLanguageQuery } from "../../i18nLanguages";
+import { popularTagParam } from "../../utils/popularTag";
import { cleanCategoryDisplayName } from "../../utils/categoryDisplay";
import {
postToResource,
@@ -69,7 +70,7 @@ export function Home() {
getJSON<{ items: Post[] }>(`/api/posts/recommended${postQ}&limit=12`),
getJSON<{ items: Post[] }>(`/api/posts/latest${postQ}&limit=5`),
getJSON<{ items: Post[] }>(
- `/api/posts${postQ}&sort=popular&limit=5`,
+ `/api/posts${postQ}&tag=${popularTagParam(lang)}&limit=5`,
).catch((): { items: Post[] } => ({ items: [] })),
])
.then(([c, r, l, p]) => {
@@ -392,7 +393,7 @@ export function Home() {