Merge pull request #779 from maramina/feat

Feat:All four features have been implemented

Author: Emmzyemms

app/(dashboard)/projects/page.tsx

@@ -63,6 +63,8 @@ export default function ProjectsPage() {
   const currentPage = filters.page;
   const PAGE_SIZE = 20;
   const [loadingNextPage, setLoadingNextPage] = useState(false);
+  const [isPosting, setIsPosting] = useState(false);
+  const [postError, setPostError] = useState<string | null>(null);
 
   const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
   const [aiRecommendations, setAiRecommendations] = useState(false);
@@ -241,6 +243,33 @@ export default function ProjectsPage() {
     [selectedIds, startTransformBatch, transformSubmitError, showToast, setSelectedIds],
   );
 
+  const handlePost = useCallback(async (clipIds: string[], platforms: string[]) => {
+    setIsPosting(true);
+    setPostError(null);
+    try {
+      const res = await fetch("/api/clips/post", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ clipIds, platforms }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Posting failed");
+      if (Array.isArray(data.failed) && data.failed.length > 0) {
+        setPostError(`${data.failed.length} post${data.failed.length > 1 ? "s" : ""} failed`);
+        data.failed.forEach((f: any) => console.warn(f));
+      }
+      if (Array.isArray(data.posted) && data.posted.length > 0) {
+        showToast(`Posted ${data.posted.length} clip${data.posted.length > 1 ? "s" : ""} successfully`, "success");
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Posting failed";
+      setPostError(msg);
+      showToast(msg, "error");
+    } finally {
+      setIsPosting(false);
+    }
+  }, [showToast]);
+
   return (
     <>
       {/* Mobile Filter Drawer Overlay */}
@@ -327,8 +356,9 @@ export default function ProjectsPage() {
               redo={redo}
               canUndo={canUndo}
               canRedo={canRedo}
-              onTransform={handleOpenTransformModal}
-              isTransforming={isTransformSubmitting}
+              onPost={handlePost}
+              isPosting={isPosting}
+              postError={postError}
             />
           </div>
         </div>

app/api/clips/[id]/download/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server";
+
+// In-memory mock store; in production use an S3/cloud storage client
+const clipsStore = new Map<string, { userId: string; url: string }>();
+
+export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
+  const clipId = params.id;
+
+  // Authenticated — in production, validate session/token
+  const userId = req.headers.get("x-user-id") || "test-user-id";
+
+  if (!clipsStore.has(clipId)) {
+    clipsStore.set(clipId, {
+      userId,
+      url: "https://storage.example.com/clips/sample.mp4",
+    });
+  }
+
+  const clip = clipsStore.get(clipId)!;
+
+  // Authorization — users can only download their own clips
+  if (clip.userId !== userId) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  // Generate a signed pre-signed URL (mock — in production use S3 SDK)
+  const expiresAt = new Date(Date.now() + 15 * 60 * 1000).toISOString();
+  const signedUrl = `${clip.url}?expires=${encodeURIComponent(expiresAt)}&signature=mock-signature`;
+
+  return NextResponse.json({ url: signedUrl, expiresAt });
+}

app/api/clips/post/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const ALLOWED_PLATFORMS = ["youtube", "instagram", "tiktok", "twitter"] as const;
+type Platform = (typeof ALLOWED_PLATFORMS)[number];
+
+interface PostClipRequest {
+  clipIds: string[];
+  platforms: string[];
+}
+
+function mockUpload(platform: string, clipId: string): { ok: boolean; postId?: string; error?: string } {
+  const success = Math.random() > 0.2; // 80% success rate for mock
+  if (success) {
+    return { ok: true, postId: `${platform}-${clipId}-${Date.now()}` };
+  }
+  return { ok: false, error: `Simulated platform error for ${platform}` };
+}
+
+export async function POST(req: NextRequest) {
+  const body: PostClipRequest = await req.json().catch(() => ({ clipIds: [], platforms: [] }));
+
+  if (!Array.isArray(body.clipIds) || body.clipIds.length === 0) {
+    return NextResponse.json({ error: "clipIds must be a non-empty array" }, { status: 400 });
+  }
+  if (!Array.isArray(body.platforms) || body.platforms.length === 0) {
+    return NextResponse.json({ error: "platforms must be a non-empty array" }, { status: 400 });
+  }
+
+  const invalid = body.platforms.filter((p) => !ALLOWED_PLATFORMS.includes(p as Platform));
+  if (invalid.length > 0) {
+    return NextResponse.json({ error: `Invalid platforms: ${invalid.join(", ")}` }, { status: 400 });
+  }
+
+  const posted: { clipId: string; platform: string; postId: string; url: string }[] = [];
+  const failed: { clipId: string; platform: string; error: string }[] = [];
+
+  for (const clipId of body.clipIds) {
+    for (const platform of body.platforms) {
+      const result = mockUpload(platform, clipId);
+      if (result.ok && result.postId) {
+        posted.push({
+          clipId,
+          platform,
+          postId: result.postId,
+          url: `https://${platform}.com/post/${result.postId}`,
+        });
+      } else {
+        failed.push({ clipId, platform, error: result.error || "Unknown error" });
+      }
+    }
+  }
+
+  return NextResponse.json({ posted, failed });
+}

app/api/insights/route.ts

@@ -0,0 +1,72 @@
+import { NextRequest, NextResponse } from "next/server";
+
+/* ---------- types ---------- */
+
+type InsightType = "top_performer" | "best_posting_time" | "trending_style" | "low_performer";
+
+export interface Insight {
+  id: string;
+  text: string;
+  type: InsightType;
+  metric: string;
+  clipId?: string;
+  createdAt: string;
+}
+
+/* ---------- cache (1 hour per user) ---------- */
+
+const cache = new Map<string, { data: Insight[]; expiresAt: number }>();
+
+/* ---------- mock data generation ---------- */
+
+function generateMockInsights(): Insight[] {
+  return [
+    {
+      id: "insight-001",
+      text: 'Your clip "Epic Gaming Montage" has the highest view count this week — consider posting similar content.',
+      type: "top_performer",
+      metric: "12,340 views",
+      clipId: "CLIP-001",
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "insight-002",
+      text: "Your audience is most active between 6-9 PM EST. Schedule posts during this window for maximum reach.",
+      type: "best_posting_time",
+      metric: "6-9 PM EST",
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "insight-003",
+      text: "AI-transformed clips with 'Anime' style are trending 40% higher than other styles this month.",
+      type: "trending_style",
+      metric: "Anime +40%",
+      createdAt: new Date().toISOString(),
+    },
+    {
+      id: "insight-004",
+      text: '"Product Review" clips have lower-than-average engagement. Consider trimming to under 30 seconds.',
+      type: "low_performer",
+      metric: "1.2% engagement",
+      clipId: "CLIP-042",
+      createdAt: new Date().toISOString(),
+    },
+  ];
+}
+
+/* ---------- route ---------- */
+
+export async function GET(req: NextRequest) {
+  const userId = req.headers.get("x-user-id") || "anonymous";
+  const now = Date.now();
+
+  const cached = cache.get(userId);
+  if (cached && cached.expiresAt > now) {
+    return NextResponse.json(cached.data);
+  }
+
+  const insights = generateMockInsights();
+  cache.set(userId, { data: insights, expiresAt: now + 60 * 60 * 1000 });
+
+  return NextResponse.json(insights);
+}

app/lib/i18n/I18nProvider.tsx

@@ -1,27 +1,31 @@
 "use client";
 
 import React, { createContext, useContext, useState, useCallback, useEffect } from "react";
-import type { Locale, I18nContextType } from "./types";
+import type { Locale, I18nContextType, LocaleConfig } from "./types";
 import { translate } from "./translations";
 
 const I18nContext = createContext<I18nContextType | undefined>(undefined);
 I18nContext.displayName = "I18nContext";
 
 const STORAGE_KEY = "clipcash_locale";
 
-const AVAILABLE_LOCALES: { value: Locale; label: string }[] = [
-  { value: "en", label: "English" },
-  { value: "es", label: "Español" },
-  { value: "fr", label: "Français" },
-  { value: "pt", label: "Português" },
+const AVAILABLE_LOCALES: LocaleConfig[] = [
+  { value: "en", label: "English", direction: "ltr" },
+  { value: "es", label: "Español", direction: "ltr" },
+  { value: "fr", label: "Français", direction: "ltr" },
+  { value: "pt", label: "Português", direction: "ltr" },
+  { value: "ar", label: "العربية", direction: "rtl" },
+  { value: "he", label: "עברית", direction: "rtl" },
 ];
 
+const RTL_LOCALES = new Set<Locale>(["ar", "he"]);
+
 export function I18nProvider({ children }: { children: React.ReactNode }) {
   const [locale, setLocaleState] = useState<Locale>("en");
 
   useEffect(() => {
     const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored === "en" || stored === "es" || stored === "fr" || stored === "pt") {
+    if (stored === "en" || stored === "es" || stored === "fr" || stored === "pt" || stored === "ar" || stored === "he") {
       setLocaleState(stored as Locale);
     }
   }, []);
@@ -30,10 +34,12 @@ export function I18nProvider({ children }: { children: React.ReactNode }) {
     setLocaleState(newLocale);
     localStorage.setItem(STORAGE_KEY, newLocale);
     document.documentElement.lang = newLocale;
+    document.documentElement.dir = RTL_LOCALES.has(newLocale) ? "rtl" : "ltr";
   }, []);
 
   useEffect(() => {
     document.documentElement.lang = locale;
+    document.documentElement.dir = RTL_LOCALES.has(locale) ? "rtl" : "ltr";
   }, [locale]);
 
   const t = useCallback(
@@ -43,13 +49,16 @@ export function I18nProvider({ children }: { children: React.ReactNode }) {
     [locale]
   );
 
+  const dir = RTL_LOCALES.has(locale) ? "rtl" : "ltr";
+
   return (
     <I18nContext.Provider
       value={{
         locale,
         setLocale,
         t,
         locales: AVAILABLE_LOCALES,
+        dir,
       }}
     >
       {children}
@@ -63,4 +72,4 @@ export function useI18n(): I18nContextType {
     throw new Error("useI18n must be used within an I18nProvider");
   }
   return context;
-}
+}

app/lib/i18n/types.ts

@@ -1,8 +1,15 @@
-export type Locale = "en" | "es" | "fr" | "pt";
+export type Locale = "en" | "es" | "fr" | "pt" | "ar" | "he";
+
+export interface LocaleConfig {
+  value: Locale;
+  label: string;
+  direction: "ltr" | "rtl";
+}
 
 export interface I18nContextType {
   locale: Locale;
   setLocale: (locale: Locale) => void;
   t: (key: string, params?: Record<string, string | number>) => string;
-  locales: { value: Locale; label: string }[];
-}
+  locales: LocaleConfig[];
+  dir: "ltr" | "rtl";
+}