feat: localise the Watch flow and stop the player from auto-playing

Every label badge banner and aria string in the WatchPage CommentRow and SuggestedRail now resolves through the i18n dictionary so the page switches languages with the topbar toggle. The embedded iframe no longer carries the autoplay flag because users expect to press play themselves.

frontend/src/components/CommentRow.tsx

@@ -1,9 +1,11 @@
+import { useI18n } from "../i18n/I18nContext";
 import { formatPct, toxicityColor } from "../utils/toxicity";
 import type { CommentItem } from "../types/api";
 
 type Props = { comment: CommentItem };
 
 export function CommentRow({ comment }: Props) {
+  const { t } = useI18n();
   const color = toxicityColor(comment.probability);
   return (
     <div className={`comment-row ${comment.is_toxic ? "toxic" : "safe"}`}>
@@ -15,14 +17,14 @@ export function CommentRow({ comment }: Props) {
           <span className="comment-user">@{comment.user}</span>
           <span className="comment-time">{comment.time}</span>
           <span className={`badge ${comment.is_toxic ? "badge-toxic" : "badge-safe"}`}>
-            {comment.is_toxic ? "Toxic" : "Safe"}
+            {comment.is_toxic ? t.badges.toxic : t.badges.safe}
           </span>
           <span className="comment-pct" style={{ color }}>
             {formatPct(comment.probability)}
           </span>
         </div>
         <p className="comment-text">{comment.text}</p>
-        {comment.is_toxic && <p className="flagged">Flagged for review</p>}
+        {comment.is_toxic && <p className="flagged">{t.watch.flagged}</p>}
         {comment.labels.length > 0 && (
           <p className="comment-labels">{comment.labels.join(" · ")}</p>
         )}

frontend/src/components/SuggestedRail.tsx

@@ -1,3 +1,4 @@
+import { useI18n } from "../i18n/I18nContext";
 import type { SuggestedVideo } from "../types/api";
 
 type Props = {
@@ -8,9 +9,10 @@ type Props = {
 };
 
 export function SuggestedRail({ videos, activeId, loadingId, onSelect }: Props) {
+  const { t } = useI18n();
   return (
     <aside className="suggested-rail">
-      <p className="rail-title">Up next</p>
+      <p className="rail-title">{t.watch.upNext}</p>
       {videos.map((v) => (
         <button
           key={v.id}
@@ -34,8 +36,8 @@ export function SuggestedRail({ videos, activeId, loadingId, onSelect }: Props)
           <div className="suggested-info">
             <p className="suggested-title">{v.title}</p>
             <p className="suggested-channel">{v.channel_title}</p>
-            {!v.embeddable && <span className="embed-badge">External only</span>}
-            {loadingId === v.id && <span className="loading-tag">Loading comments…</span>}
+            {!v.embeddable && <span className="embed-badge">{t.watch.externalOnly}</span>}
+            {loadingId === v.id && <span className="loading-tag">{t.watch.loadingComments}</span>}
           </div>
         </button>
       ))}

frontend/src/pages/WatchPage.tsx

@@ -9,6 +9,7 @@ import { CommentRow } from "../components/CommentRow";
 import { SuggestedRail } from "../components/SuggestedRail";
 import { useApp } from "../context/AppContext";
 import { useDebouncedPredict } from "../hooks/useDebouncedPredict";
+import { useI18n } from "../i18n/I18nContext";
 import type {
   CommentItem,
   PredictionRecord,
@@ -30,6 +31,7 @@ function isPlaceholderTitle(title: string, id: string): boolean {
 }
 
 export function WatchPage() {
+  const { t } = useI18n();
   const { threshold, addHubEntry } = useApp();
   const [draft, setDraft] = useState("");
   const [sessionComments, setSessionComments] = useState<CommentItem[]>([]);
@@ -74,7 +76,7 @@ export function WatchPage() {
           void loadVideo(r.videos[0]);
         }
       })
-      .catch(() => setFetchError("Could not load suggested videos"));
+      .catch(() => setFetchError(t.watch.couldNotLoadVideos));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -86,9 +88,9 @@ export function WatchPage() {
       const analysis = result ?? (await predict(text, threshold));
       const item: CommentItem = {
         id: newId(),
-        user: "you",
+        user: t.watch.you,
         text,
-        time: "just now",
+        time: t.watch.justNow,
         is_toxic: analysis.is_toxic,
         probability: analysis.probability,
         labels: analysis.labels,
@@ -96,17 +98,19 @@ export function WatchPage() {
       };
       setSessionComments((prev) => [...prev, item]);
       addHubEntry({
-        user: "@you",
+        user: `@${t.watch.you}`,
         snippet: text.slice(0, 45),
         score: analysis.probability,
-        action: analysis.is_toxic ? "Posted (toxic)" : "Approved",
+        action: analysis.is_toxic
+          ? `${t.watch.posted} (${t.badges.toxic.toLowerCase()})`
+          : t.badges.safe,
       });
       setDraft("");
       void refreshRecent(activeVideo?.id);
     } finally {
       setPosting(false);
     }
-  }, [draft, posting, result, threshold, addHubEntry, refreshRecent, activeVideo?.id]);
+  }, [draft, posting, result, threshold, addHubEntry, refreshRecent, activeVideo?.id, t]);
 
   const loadVideo = async (video: SuggestedVideo) => {
     setActiveVideo(video);
@@ -123,7 +127,7 @@ export function WatchPage() {
           id: `yt-${video.id}-${i}`,
           user: randomUsername(`yt-${video.id}-${i}`),
           text: r.text,
-          time: "from YouTube",
+          time: t.watch.fromYoutube,
           is_toxic: r.is_toxic,
           probability: r.probability,
           labels: r.labels,
@@ -131,7 +135,7 @@ export function WatchPage() {
         }))
       );
     } catch (e) {
-      setFetchError(e instanceof Error ? e.message : "Failed to load comments");
+      setFetchError(e instanceof Error ? e.message : t.watch.failedToLoadComments);
       setYoutubeComments([]);
       setDemoBanner(false);
     } finally {
@@ -162,16 +166,16 @@ export function WatchPage() {
                   alt=""
                   className="player-fallback-thumb"
                 />
-                <span className="player-fallback-cta">Watch on YouTube (embedding blocked)</span>
+                <span className="player-fallback-cta">{t.watch.watchOnYoutube}</span>
               </a>
             ) : (
               <iframe
                 className="player-iframe"
                 src={`https://www.youtube.com/embed/${
                   activeVideo?.id ?? DEFAULT_EMBED_VIDEO_ID
-                }?rel=0${activeVideo ? "&autoplay=1" : ""}`}
+                }?rel=0`}
                 title={activeVideo?.title ?? "YouTube video player"}
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 referrerPolicy="strict-origin-when-cross-origin"
                 allowFullScreen
                 loading="lazy"
@@ -180,33 +184,31 @@ export function WatchPage() {
           </div>
 
           <h1 className="video-title">
-            {activeVideo?.title ?? "Watch and moderate comments"}
+            {activeVideo?.title ?? t.watch.defaultTitle}
           </h1>
           <p className="video-meta">
             {activeVideo
               ? activeVideo.channel_title
-              : "Choose a video from Up next to load and score its comments"}
+              : t.watch.defaultMeta}
           </p>
 
           {activeVideo && isPlaceholderTitle(activeVideo.title, activeVideo.id) && (
-            <p className="info-banner">
-              Demo metadata — add <code>YOUTUBE_API_KEY</code> to <code>.env</code> for real titles.
-            </p>
+            <p className="info-banner">{t.watch.placeholderTitleBanner}</p>
           )}
 
           <div className="channel-row">
             <div className="channel-avatar">{channelInitial}</div>
             <div>
-              <p className="channel-name">{activeVideo?.channel_title ?? "YouTube"}</p>
-              {activeVideo && <p className="video-meta">Suggested video</p>}
+              <p className="channel-name">{activeVideo?.channel_title ?? t.watch.channelFallback}</p>
+              {activeVideo && <p className="video-meta">{t.watch.suggestedVideo}</p>}
             </div>
           </div>
 
           <div className="comments-header">
             <span>
-              {totalComments} comments
+              {t.watch.commentsCount(totalComments)}
               {toxicManual + toxicYt > 0 && (
-                <span className="toxic-count"> · {toxicManual + toxicYt} toxic detected</span>
+                <span className="toxic-count">{t.watch.toxicDetected(toxicManual + toxicYt)}</span>
               )}
             </span>
           </div>
@@ -221,20 +223,20 @@ export function WatchPage() {
                   void handlePost();
                 }
               }}
-              placeholder="Add a comment…"
+              placeholder={t.watch.composePlaceholder}
               rows={3}
-              aria-label="Write a comment"
+              aria-label={t.watch.composeAriaLabel}
             />
             {draft.trim() && (
               <div className="live-analysis">
-                <span>{loading ? "Analyzing…" : "Live score"}</span>
+                <span>{loading ? t.watch.analyzing : t.watch.liveScore}</span>
                 {result && (
                   <>
                     <span className={`badge ${result.is_toxic ? "badge-toxic" : "badge-safe"}`}>
-                      {result.status}
+                      {result.is_toxic ? t.badges.toxic : t.badges.safe}
                     </span>
                     <span style={{ color: toxicityColor(result.probability) }}>
-                      Toxicity: {formatPct(result.probability)}
+                      {`${t.watch.toxicity}: ${formatPct(result.probability)}`}
                     </span>
                   </>
                 )}
@@ -248,7 +250,7 @@ export function WatchPage() {
                 onClick={() => setDraft("")}
                 disabled={posting}
               >
-                Cancel
+                {t.watch.cancel}
               </button>
               <button
                 type="button"
@@ -256,7 +258,7 @@ export function WatchPage() {
                 onClick={() => void handlePost()}
                 disabled={posting || !draft.trim()}
               >
-                {posting ? "Analyzing…" : "Comment"}
+                {posting ? t.watch.analyzing : t.watch.comment}
               </button>
             </div>
           </div>
@@ -265,15 +267,12 @@ export function WatchPage() {
 
           {demoBanner && !dismissDemoBanner && (
             <div className="info-banner dismissible">
-              <span>
-                Using demo comments — add <code>YOUTUBE_API_KEY</code> to <code>.env</code> for real
-                YouTube threads.
-              </span>
+              <span>{t.watch.demoBanner}</span>
               <button
                 type="button"
                 className="btn-dismiss"
                 onClick={() => setDismissDemoBanner(true)}
-                aria-label="Dismiss"
+                aria-label={t.watch.dismiss}
               >
                 ×
               </button>
@@ -281,7 +280,7 @@ export function WatchPage() {
           )}
 
           {loadingVideoId && youtubeComments.length === 0 && (
-            <p className="loading-comments">Loading comments…</p>
+            <p className="loading-comments">{t.watch.loadingComments}</p>
           )}
 
           <div className="comment-list">
@@ -312,7 +311,7 @@ export function WatchPage() {
           </div>
 
           {recentLoading && recentActivity.length === 0 && youtubeComments.length === 0 && (
-            <p className="loading-comments">Loading recent comments…</p>
+            <p className="loading-comments">{t.watch.loadingRecent}</p>
           )}
         </section>