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

src/components/NotificationBell.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router";
+import { t } from "@lingui/core/macro";
 import { useWS } from "../hooks/useWS.ts";
 
 export function NotificationBell() {
@@ -18,12 +19,15 @@ export function NotificationBell() {
 
     if (animatingRef.current) return;
     animatingRef.current = true;
-    setRinging(true);
-    const t = setTimeout(() => {
+    const tStart = setTimeout(() => setRinging(true), 0);
+    const tEnd = setTimeout(() => {
       setRinging(false);
       animatingRef.current = false;
     }, 700);
-    return () => clearTimeout(t);
+    return () => {
+      clearTimeout(tStart);
+      clearTimeout(tEnd);
+    };
   }, [lastNotification]);
 
   return (
@@ -33,11 +37,9 @@ export function NotificationBell() {
         ringing ? " notification-bell--ringing" : ""
       }`}
       onClick={() => navigate("/notifications")}
-      aria-label={`Notifications${
-        unreadNotificationCount > 0
-          ? ` (${unreadNotificationCount} unread)`
-          : ""
-      }`}
+      aria-label={unreadNotificationCount > 0
+        ? t`Notifications (${unreadNotificationCount} unread)`
+        : t`Notifications`}
     >
       <span className="notification-bell-icon">🔔</span>
       {unreadNotificationCount > 0 && (