From 1d1d3cd4614541121662ddee46c51d382312e033 Mon Sep 17 00:00:00 2001
From: payacom <59262811+payacom@users.noreply.github.com>
Date: Thu, 17 Sep 2026 17:03:16 +0330
Subject: [PATCH] feat(reels): collapsing icons hides the 3-dot menu too; add
 auto-scroll + playback speed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 3-dot menu button previously rendered unconditionally alongside the
  collapse-toggle ("مثل اندروید" per the old comment, mirroring RN's
  pre-fix behavior) — now hidden when collapsed, matching RN's fix.
- Extended ExploreReelsUiContext with autoScrollEnabled (default off) and
  playbackSpeed (0.5x/1x/1.5x/2x), exposed via new rows in the options menu.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/posts/ReelsPostActions.tsx     |  4 +-
 src/components/posts/ReelsPostOptionsMenu.tsx | 57 +++++++++++++++++++
 src/contexts/ExploreReelsUiContext.tsx        | 13 +++++
 src/locales/en/common.json                    |  2 +
 src/locales/fa/common.json                    |  2 +
 5 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/src/components/posts/ReelsPostActions.tsx b/src/components/posts/ReelsPostActions.tsx
index 95b43fc..0fded7a 100644
--- a/src/components/posts/ReelsPostActions.tsx
+++ b/src/components/posts/ReelsPostActions.tsx
@@ -447,7 +447,9 @@ export default function ReelsPostActions({
               className={cn("drop-shadow-lg invert", expanded && "opacity-80")}
             />
           </button>
-          {optionsMenu}
+          {/* طبق خواسته‌ی کاربر: با جمع‌کردن آیکون‌ها فقط خودِ دکمه‌ی جمع‌کردن باقی
+              بمونه، پس منوی سه‌نقطه هم باید مثل بقیه‌ی اکشن‌ها مخفی بشه */}
+          {expanded ? optionsMenu : null}
         </div>
       )}
     </>
diff --git a/src/components/posts/ReelsPostOptionsMenu.tsx b/src/components/posts/ReelsPostOptionsMenu.tsx
index 4bca92b..5902a79 100644
--- a/src/components/posts/ReelsPostOptionsMenu.tsx
+++ b/src/components/posts/ReelsPostOptionsMenu.tsx
@@ -13,6 +13,11 @@ import { useTranslation } from "react-i18next";
 import { useAppLanguage } from "@/contexts/LanguageProvider";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
+import { cn } from "@/lib/utils";
+import {
+  useExploreReelsUi,
+  type PlaybackSpeed,
+} from "@/contexts/ExploreReelsUiContext";
 
 const REPORT_REASON_IDS = [
   "inappropriate",
@@ -22,6 +27,8 @@ const REPORT_REASON_IDS = [
   "other",
 ] as const;
 
+const SPEED_OPTIONS: PlaybackSpeed[] = [0.5, 1, 1.5, 2];
+
 type Props = {
   postData: Post;
   isOwnPost: boolean;
@@ -42,6 +49,7 @@ export default function ReelsPostOptionsMenu({
   const queryClient = useQueryClient();
   const router = useRouter();
   const canEdit = isOwnPost;
+  const exploreUi = useExploreReelsUi();
   const [open, setOpen] = useState(false);
   const [reportOpen, setReportOpen] = useState(false);
   const [analyticsOpen, setAnalyticsOpen] = useState(false);
@@ -193,6 +201,55 @@ export default function ReelsPostOptionsMenu({
               count: viewCount.toLocaleString(numberLocale),
             })}
           </button>
+          {exploreUi ? (
+            <>
+              <div className="flex items-center justify-between px-5 py-3.5 text-sm">
+                <span>{t("posts.autoScrollLabel")}</span>
+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={exploreUi.autoScrollEnabled}
+                  onClick={() =>
+                    exploreUi.setAutoScrollEnabled(!exploreUi.autoScrollEnabled)
+                  }
+                  className={cn(
+                    "relative h-6 w-11 shrink-0 rounded-full transition-colors",
+                    exploreUi.autoScrollEnabled ? "bg-[#FC8EAC]" : "bg-neutral-300 dark:bg-neutral-700"
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "absolute top-0.5 h-5 w-5 rounded-full bg-white transition-transform",
+                      exploreUi.autoScrollEnabled ? "translate-x-0.5" : "translate-x-[22px]"
+                    )}
+                  />
+                </button>
+              </div>
+              <div className="flex flex-wrap items-center justify-between gap-2 px-5 py-3.5 text-sm">
+                <span>{t("posts.playbackSpeedLabel")}</span>
+                <div className="flex items-center gap-1.5">
+                  {SPEED_OPTIONS.map((option) => {
+                    const active = exploreUi.playbackSpeed === option;
+                    return (
+                      <button
+                        key={option}
+                        type="button"
+                        onClick={() => exploreUi.setPlaybackSpeed(option)}
+                        className={cn(
+                          "flex h-8 min-w-[40px] items-center justify-center rounded-2xl border px-2 text-xs font-semibold",
+                          active
+                            ? "border-[#FC8EAC] bg-[rgba(252,142,172,0.1)] text-[#FC8EAC]"
+                            : "border-[#C3C3C3] text-foreground"
+                        )}
+                      >
+                        {option}x
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </>
+          ) : null}
           {isOwnPost ? (
             <>
               {canEdit ? (
diff --git a/src/contexts/ExploreReelsUiContext.tsx b/src/contexts/ExploreReelsUiContext.tsx
index 304e99a..9bc456f 100644
--- a/src/contexts/ExploreReelsUiContext.tsx
+++ b/src/contexts/ExploreReelsUiContext.tsx
@@ -2,11 +2,18 @@
 
 import React, { createContext, useContext, useState } from "react";
 
+export type PlaybackSpeed = 0.5 | 1 | 1.5 | 2;
+
 type ExploreReelsUiContextValue = {
   chromeHidden: boolean;
   setChromeHidden: (hidden: boolean) => void;
   actionsExpanded: boolean;
   setActionsExpanded: (expanded: boolean) => void;
+  /** پیش‌فرض غیرفعال، طبق خواسته‌ی کاربر */
+  autoScrollEnabled: boolean;
+  setAutoScrollEnabled: (enabled: boolean) => void;
+  playbackSpeed: PlaybackSpeed;
+  setPlaybackSpeed: (speed: PlaybackSpeed) => void;
 };
 
 const ExploreReelsUiContext = createContext<ExploreReelsUiContextValue | null>(
@@ -20,6 +27,8 @@ export function ExploreReelsUiProvider({
 }) {
   const [chromeHidden, setChromeHidden] = useState(false);
   const [actionsExpanded, setActionsExpanded] = useState(true);
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = useState<PlaybackSpeed>(1);
 
   return (
     <ExploreReelsUiContext.Provider
@@ -28,6 +37,10 @@ export function ExploreReelsUiProvider({
         setChromeHidden,
         actionsExpanded,
         setActionsExpanded,
+        autoScrollEnabled,
+        setAutoScrollEnabled,
+        playbackSpeed,
+        setPlaybackSpeed,
       }}
     >
       {children}
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
index 328ed66..05c0a47 100644
--- a/src/locales/en/common.json
+++ b/src/locales/en/common.json
@@ -1182,6 +1182,8 @@
     "commentError": "Could not post comment",
     "reportPost": "Report post",
     "postViews": "Post views — {{count}}",
+    "autoScrollLabel": "Auto-scroll",
+    "playbackSpeedLabel": "Playback speed",
     "viewAnalytics": "View insights",
     "pinPost": "Pin post",
     "unpinPost": "Unpin post",
diff --git a/src/locales/fa/common.json b/src/locales/fa/common.json
index 3380da9..cff59aa 100644
--- a/src/locales/fa/common.json
+++ b/src/locales/fa/common.json
@@ -1182,6 +1182,8 @@
     "commentError": "خطا در ثبت نظر",
     "reportPost": "گزارش پست",
     "postViews": "بازدید پست — {{count}}",
+    "autoScrollLabel": "پیمایش خودکار",
+    "playbackSpeedLabel": "سرعت پخش ویدیو",
     "viewAnalytics": "دیدن اطلاعات آماری",
     "pinPost": "پین کردن پست",
     "unpinPost": "برداشتن پین",