From 745383cf41d40e2d872ec172a921fb124a88cf92 Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 17:36:18 +0530
Subject: [PATCH 01/11] fix: change header h1 to span for proper heading
 hierarchy

Changed the h1 element in the header to a span element to ensure
there is only one h1 per page (the main REFRAME title in VideoEditor).

Fixes #69

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f16cedb2..2460bc6b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -82,7 +82,7 @@ export default function RootLayout({
             >
               <div className="flex items-center gap-2">
                 <BrandLogo size={24} />
-                <h1 className="text-lg font-semibold">Reframe</h1>
+                <span className="text-lg font-semibold">Reframe</span>
               </div>
               <ThemeToggle />
             </header>

From 207c15b60fc6000849f103a9b466e93db37bbc24 Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 17:39:59 +0530
Subject: [PATCH 02/11] feat: add tooltips to quick action preset buttons

Added title attributes to quick action buttons (Instagram Reels,
TikTok, YouTube Short, YouTube, Twitter/X) showing exact dimensions.

Fixes #71

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/components/PresetSelector.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/PresetSelector.tsx b/src/components/PresetSelector.tsx
index fd129ab2..d71390fa 100644
--- a/src/components/PresetSelector.tsx
+++ b/src/components/PresetSelector.tsx
@@ -54,6 +54,7 @@ const QUICK_ACTIONS = [
     preset: "vertical-9-16",
     label: "Reels",
     platform: "Instagram",
+    dimensions: "1080 × 1920 — 9:16 Portrait",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
@@ -64,6 +65,7 @@ const QUICK_ACTIONS = [
     preset: "vertical-9-16",
     label: "TikTok",
     platform: "TikTok",
+    dimensions: "1080 × 1920 — 9:16 Portrait",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.75a4.85 4.85 0 01-1.01-.06z" />
@@ -74,6 +76,7 @@ const QUICK_ACTIONS = [
     preset: "vertical-9-16",
     label: "Short",
     platform: "YouTube",
+    dimensions: "1080 × 1920 — 9:16 Portrait",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
@@ -84,6 +87,7 @@ const QUICK_ACTIONS = [
     preset: "landscape-16-9",
     label: "YouTube",
     platform: "YouTube",
+    dimensions: "1920 × 1080 — 16:9 Landscape",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
@@ -94,6 +98,7 @@ const QUICK_ACTIONS = [
     preset: "twitter-hd",
     label: "Twitter/X",
     platform: "Twitter",
+    dimensions: "1920 × 1080 — 16:9 Landscape",
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.259 5.63L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z" />
@@ -142,7 +147,7 @@ export default function PresetSelector({ recipe, onChange }: Props) {
     <div className="space-y-3">
       {/* Quick-action row */}
       <div className="grid grid-cols-5 gap-1.5">
-        {QUICK_ACTIONS.map(({ preset, label, platform, icon }) => {
+        {QUICK_ACTIONS.map(({ preset, label, platform, dimensions, icon }) => {
           const isActive = recipe.preset === preset;
           return (
             <button
@@ -150,6 +155,7 @@ export default function PresetSelector({ recipe, onChange }: Props) {
               type="button"
               aria-label={`${platform} ${label}`}
               aria-pressed={isActive}
+              title={dimensions}
               onClick={() => onChange({ preset })}
               className={cn(
                 "flex flex-col items-center justify-center gap-1 py-2 px-1 rounded-lg border text-center transition-all duration-150 cursor-pointer hover:scale-[1.04] active:scale-[0.97]",

From 1ad371e2f448cdc204bf88477ba4e0cd05f01782 Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 17:45:06 +0530
Subject: [PATCH 03/11] feat: add data-testid attributes to key UI elements

Added data-testid attributes for automated testing:
- file-upload-zone: File upload drop zone
- export-button: Export video button
- export-progress: Progress bar during export
- download-button: Download result button
- reset-button: Reset/upload new video button
- quality-slider: Quality CRF slider
- speed-slider: Speed control slider

Fixes #56

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/components/AudioSpeedControl.tsx | 1 +
 src/components/DownloadResult.tsx    | 2 ++
 src/components/ExportOverlay.tsx     | 1 +
 src/components/ExportSettings.tsx    | 1 +
 src/components/FileUpload.tsx        | 1 +
 src/components/VideoEditor.tsx       | 1 +
 6 files changed, 7 insertions(+)

diff --git a/src/components/AudioSpeedControl.tsx b/src/components/AudioSpeedControl.tsx
index dd6c6007..be44237e 100644
--- a/src/components/AudioSpeedControl.tsx
+++ b/src/components/AudioSpeedControl.tsx
@@ -91,6 +91,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         </div>
         <input
           id="speed-control"
+          data-testid="speed-slider"
           type="range"
           min={0}
           max={SPEED_STEPS.length - 1}
diff --git a/src/components/DownloadResult.tsx b/src/components/DownloadResult.tsx
index 9cb04286..553b4d1e 100644
--- a/src/components/DownloadResult.tsx
+++ b/src/components/DownloadResult.tsx
@@ -138,6 +138,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         <a
           href={isValid ? result.blobUrl : undefined}
           download={isValid ? filename : undefined}
+          data-testid="download-button"
           className={cn(
             "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
             isValid 
@@ -167,6 +168,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         </a>
         <button
           type="button"
+          data-testid="reset-button"
           title="Reset and upload a new video"
           aria-label="Upload a new video"
           onClick={handleReset}
diff --git a/src/components/ExportOverlay.tsx b/src/components/ExportOverlay.tsx
index 702461cb..7fad6d62 100644
--- a/src/components/ExportOverlay.tsx
+++ b/src/components/ExportOverlay.tsx
@@ -133,6 +133,7 @@ export default function ExportOverlay({ status, progress, exportStartedAt, onCan
             <div className="w-full space-y-2">
               <div className="h-1 w-full bg-film-100 rounded-full overflow-hidden">
                 <div
+                  data-testid="export-progress"
                   role="progressbar"
                   aria-valuenow={progress}
                   aria-valuemin={0}
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
index 6eee9b9b..27e7e5cb 100644
--- a/src/components/ExportSettings.tsx
+++ b/src/components/ExportSettings.tsx
@@ -72,6 +72,7 @@ export default function ExportSettings({
 
         <input
           id="quality-control"
+          data-testid="quality-slider"
           type="range"
           min={18}
           max={30}
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index f94c17ef..931ec116 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -188,6 +188,7 @@ export default function FileUpload({
   const DropZone = () => (
     <div
       id="upload-zone"
+      data-testid="file-upload-zone"
       role="button"
       tabIndex={0}
       aria-label="Video upload area. Drag and drop a video file or press Enter to browse."
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index a12c1f41..b3568b66 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -732,6 +732,7 @@ return () => {
 
             <button
               id="export-button"
+              data-testid="export-button"
               type="button"
               onClick={handleExport}
                 disabled={!file || isProcessing}

From 6c7cb1007510f0f6d010194d496cfa83a948f898 Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 23:12:10 +0530
Subject: [PATCH 04/11] feat: format trim times as MM:SS.d instead of raw
 seconds

Added formatTimeWithDecimal helper function and updated trim control
labels to show formatted time (e.g., 01:05.5 instead of 65.5).

Fixes #78

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/components/TrimControl.tsx |  6 +++---
 src/lib/utils.ts               | 10 ++++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/TrimControl.tsx b/src/components/TrimControl.tsx
index d48bdd69..e351ec0d 100644
--- a/src/components/TrimControl.tsx
+++ b/src/components/TrimControl.tsx
@@ -3,7 +3,7 @@
 import { EditRecipe } from "@/lib/types";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { AlertCircle } from "lucide-react";
-import { formatDuration } from "@/lib/utils";
+import { formatDuration, formatTimeWithDecimal } from "@/lib/utils";
 import { useAudioWaveform } from "@/hooks/useAudioWaveform";
 import WaveformCanvas from "@/components/WaveformCanvas";
 
@@ -241,7 +241,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             htmlFor="trim-start"
             className="font-heading mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-[var(--muted)]"
           >
-            Start (sec)
+            Start ({formatTimeWithDecimal(recipe.trimStart)})
           </label>
 
           <input
@@ -278,7 +278,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             htmlFor="trim-end"
             className="font-heading mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-[var(--muted)]"
           >
-            End (sec)
+            End ({formatTimeWithDecimal(recipe.trimEnd ?? duration)})
           </label>
 
           <input
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 14225f59..28e13a71 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -41,4 +41,14 @@ export function formatDuration(seconds: number): string {
   }
 
   return `${minutes}:${secs.toString().padStart(2, "0")}`;
+}
+
+export function formatTimeWithDecimal(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) {
+    return "00:00.0";
+  }
+
+  const m = Math.floor(seconds / 60);
+  const s = (seconds % 60).toFixed(1);
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(4, "0")}`;
 }
\ No newline at end of file

From 3067d92b52f6c4fb3427da9e8fb0850ac22e5a9e Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 23:20:50 +0530
Subject: [PATCH 05/11] feat: add subtle pulse animation to export button when
 ready

Added animate-pulse-subtle class to export button for visual feedback.
Respects prefers-reduced-motion to disable animation for accessibility.

Fixes #236

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/app/globals.css            | 17 +++++++++++++++++
 src/components/VideoEditor.tsx |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 2f27ce26..1225b366 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -168,4 +168,21 @@ detail > summary {
 }
 details > summary::-webkit-details-marker {
   display: none;
+}
+
+/* ── Pulse animation ── */
+@keyframes pulse-subtle {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.85; }
+}
+
+.animate-pulse-subtle {
+  animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-pulse-subtle,
+  .animate-pulse {
+    animation: none;
+  }
 }
\ No newline at end of file
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index b3568b66..70feaf58 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -743,7 +743,7 @@ return () => {
                 "w-full flex items-center justify-center gap-3 py-5 min-h-[44px] rounded-xl",
                 "font-display text-2xl tracking-widest transition-all duration-200",
                 file && !isProcessing
-                  ? "bg-[var(--accent)] hover:bg-[var(--accent-hover)] hover:scale-[1.02] text-white shadow-[var(--shadow)] active:scale-[0.98] cursor-pointer"
+                  ? "bg-[var(--accent)] hover:bg-[var(--accent-hover)] hover:scale-[1.02] text-white shadow-[var(--shadow)] active:scale-[0.98] cursor-pointer animate-pulse-subtle"
                   : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
               )}
             >

From d21dcff7e3343f9fd1591d5c32064a7d61b4a842 Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 23:22:07 +0530
Subject: [PATCH 06/11] feat: add expandable FAQ section to the page

Added How It Works section with 4 common questions about privacy,
formats, performance, and offline use. Uses semantic details/summary
elements for accessibility.

Fixes #198

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/app/page.tsx       |  2 ++
 src/components/FAQ.tsx | 52 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/components/FAQ.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 188ed440..88657c82 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import VideoEditor from "@/components/VideoEditor";
 import Footer from "@/components/Footer";
+import FAQ from "@/components/FAQ";
 
 export default function Home() {
   return (
@@ -16,6 +17,7 @@ export default function Home() {
 
       <main id="main-content" tabIndex={-1}>
         <VideoEditor />
+        <FAQ />
       </main>
 
       <Footer />
diff --git a/src/components/FAQ.tsx b/src/components/FAQ.tsx
new file mode 100644
index 00000000..a76eeec1
--- /dev/null
+++ b/src/components/FAQ.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+export default function FAQ() {
+  const faqs = [
+    {
+      question: "Is my video uploaded anywhere?",
+      answer:
+        "No. All processing happens directly in your browser using FFmpeg.wasm. Your video never leaves your device — there are no server uploads.",
+    },
+    {
+      question: "What video formats are supported?",
+      answer:
+        "Reframe supports MP4, WebM, MOV, and AVI files. MP4 with H.264 encoding works best for reliable processing.",
+    },
+    {
+      question: "Why is processing slow for large files?",
+      answer:
+        "FFmpeg.wasm runs in the browser, not on a server. Large files require more CPU and memory on your device. Processing a 1080p video typically takes 1–3x real-time duration.",
+    },
+    {
+      question: "Can I use this offline?",
+      answer:
+        "Yes. Once the page is loaded, all processing happens locally. You can disconnect from the internet and continue editing and exporting videos.",
+    },
+  ];
+
+  return (
+    <section className="w-full max-w-2xl mx-auto px-4 py-12">
+      <h2 className="font-display text-2xl text-center text-[var(--text)] mb-6">
+        How It Works
+      </h2>
+      <div className="space-y-3">
+        {faqs.map((faq, index) => (
+          <details
+            key={index}
+            className="group rounded-xl border border-[var(--border)] bg-[var(--surface)] overflow-hidden"
+          >
+            <summary className="flex items-center justify-between gap-4 px-5 py-4 cursor-pointer font-heading text-sm font-semibold text-[var(--text)] select-none list-none [&::-webkit-details-marker]:hidden">
+              {faq.question}
+              <span className="text-[var(--muted)] transition-transform duration-200 group-open:rotate-45 text-lg flex-shrink-0">
+                +
+              </span>
+            </summary>
+            <div className="px-5 pb-4 text-sm text-[var(--muted)] leading-relaxed">
+              {faq.answer}
+            </div>
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+}

From 132ea286042ea8dffb1fa423d402683517a310ca Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 23:24:54 +0530
Subject: [PATCH 07/11] fix: update community section social links and Twitter
 logo

Fixed broken social media links to point to Reframe accounts.
Replaced outdated Twitter bird icon with X (Twitter) logo.

Fixes #1016

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/components/Footer.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index bc75f939..5f89574b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,7 +3,6 @@
 import Link from "next/link";
 import {
   Github,
-  Twitter,
   Instagram,
   Linkedin,
   ArrowRight,
@@ -15,6 +14,20 @@ import {
   Mail,
 } from "lucide-react";
 
+function XIcon({ size = 18 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
+
 export default function Footer() {
   return (
     <footer className="w-full border-t border-[var(--border)] bg-[var(--bg)] text-[var(--text)] px-6 py-16 mt-20 transition-colors duration-300">
@@ -135,17 +148,17 @@ export default function Footer() {
                   label: "GitHub",
                 },
                 {
-                  href: "https://twitter.com",
-                  icon: <Twitter size={18} />,
-                  label: "Twitter",
+                  href: "https://x.com/reframeapp",
+                  icon: <XIcon size={18} />,
+                  label: "X (Twitter)",
                 },
                 {
-                  href: "https://instagram.com",
+                  href: "https://instagram.com/reframeapp",
                   icon: <Instagram size={18} />,
                   label: "Instagram",
                 },
                 {
-                  href: "https://linkedin.com",
+                  href: "https://linkedin.com/company/reframeapp",
                   icon: <Linkedin size={18} />,
                   label: "LinkedIn",
                 },

From 00dc9e9d89e4fd4d3e50f6e7f1f69d46308629be Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 23:26:00 +0530
Subject: [PATCH 08/11] docs: add MIT LICENSE file

Added LICENSE file to clarify usage terms and encourage contributions.

Fixes #1045

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 LICENSE | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 LICENSE

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..2d99569f
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Reframe Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

From f9ec02366d5583455885c687a8056178ab1fec10 Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 23:27:27 +0530
Subject: [PATCH 09/11] fix: replace hard-coded colors with CSS variables for
 dark mode

Fixed dark mode issues in ComparisonPreview and TrimControl components.
Replaced bg-white and text-black with appropriate CSS variable tokens.

Fixes #673

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/components/ComparisonPreview.tsx | 6 +++---
 src/components/TrimControl.tsx       | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ComparisonPreview.tsx b/src/components/ComparisonPreview.tsx
index 2fe4a89e..4dfbe389 100644
--- a/src/components/ComparisonPreview.tsx
+++ b/src/components/ComparisonPreview.tsx
@@ -238,7 +238,7 @@ export default function ComparisonPreview({ file, recipe, videoRef }: Props) {
       {/* Draggable divider slider */}
       <div
         className={cn(
-          "absolute top-0 bottom-0 w-1 bg-white pointer-events-none transition-opacity",
+           "absolute top-0 bottom-0 w-1 bg-[var(--text)] pointer-events-none transition-opacity",
           isDragging ? "opacity-100" : "opacity-75 hover:opacity-100"
         )}
         style={{ left: `${sliderPosition}%`, transform: "translateX(-50%)" }}
@@ -249,7 +249,7 @@ export default function ComparisonPreview({ file, recipe, videoRef }: Props) {
           type="button"
           onMouseDown={handleMouseDown}
           onTouchStart={handleMouseDown}
-          className="absolute top-1/2 left-1/2 w-8 h-8 -ml-4 -mt-4 rounded-full bg-white shadow-lg pointer-events-auto cursor-grab active:cursor-grabbing flex items-center justify-center transition-shadow"
+          className="absolute top-1/2 left-1/2 w-8 h-8 -ml-4 -mt-4 rounded-full bg-[var(--surface)] shadow-lg pointer-events-auto cursor-grab active:cursor-grabbing flex items-center justify-center transition-shadow"
           style={{
             boxShadow: isDragging ? "0 0 12px rgba(255, 255, 255, 0.8)" : undefined,
           }}
@@ -257,7 +257,7 @@ export default function ComparisonPreview({ file, recipe, videoRef }: Props) {
           title="Drag left/right to compare"
         >
           <svg
-            className="w-4 h-4 text-black"
+            className="w-4 h-4 text-[var(--text)]"
             fill="currentColor"
             viewBox="0 0 24 24"
           >
diff --git a/src/components/TrimControl.tsx b/src/components/TrimControl.tsx
index e351ec0d..5799b4eb 100644
--- a/src/components/TrimControl.tsx
+++ b/src/components/TrimControl.tsx
@@ -208,7 +208,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-valuemin={0}
             aria-valuemax={duration}
             tabIndex={0}
-            className="absolute w-4 h-4 rounded-full bg-white border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
+            className="absolute w-4 h-4 rounded-full bg-[var(--surface)] border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
             style={{ left: `${(recipe.trimStart / duration) * 100}%` }}
             onMouseDown={() => { dragging.current = "start"; }}
             onTouchStart={() => { dragging.current = "start"; }}
@@ -224,7 +224,7 @@ export default function TrimControl({ recipe, onChange, duration, file }: Props)
             aria-valuemin={0}
             aria-valuemax={duration}
             tabIndex={0}
-            className="absolute w-4 h-4 rounded-full bg-white border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
+            className="absolute w-4 h-4 rounded-full bg-[var(--surface)] border-2 border-film-400 shadow cursor-grab active:cursor-grabbing -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-film-400"
             style={{ left: `${((recipe.trimEnd ?? duration) / duration) * 100}%` }}
             onMouseDown={() => { dragging.current = "end"; }}
             onTouchStart={() => { dragging.current = "end"; }}

From cc38f56ca9089b424f8fb76175f43738f75781b9 Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 23:29:56 +0530
Subject: [PATCH 10/11] feat: add aspect ratio thumbnails to quick action
 presets

Added RatioBox visual thumbnails to quick action buttons for better
preset identification. Each button now shows the correct aspect ratio.

Fixes #672

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/components/PresetSelector.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/PresetSelector.tsx b/src/components/PresetSelector.tsx
index d71390fa..66a97bbf 100644
--- a/src/components/PresetSelector.tsx
+++ b/src/components/PresetSelector.tsx
@@ -55,6 +55,8 @@ const QUICK_ACTIONS = [
     label: "Reels",
     platform: "Instagram",
     dimensions: "1080 × 1920 — 9:16 Portrait",
+    width: 1080,
+    height: 1920,
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
@@ -66,6 +68,8 @@ const QUICK_ACTIONS = [
     label: "TikTok",
     platform: "TikTok",
     dimensions: "1080 × 1920 — 9:16 Portrait",
+    width: 1080,
+    height: 1920,
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.75a4.85 4.85 0 01-1.01-.06z" />
@@ -77,6 +81,8 @@ const QUICK_ACTIONS = [
     label: "Short",
     platform: "YouTube",
     dimensions: "1080 × 1920 — 9:16 Portrait",
+    width: 1080,
+    height: 1920,
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
@@ -88,6 +94,8 @@ const QUICK_ACTIONS = [
     label: "YouTube",
     platform: "YouTube",
     dimensions: "1920 × 1080 — 16:9 Landscape",
+    width: 1920,
+    height: 1080,
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
@@ -99,6 +107,8 @@ const QUICK_ACTIONS = [
     label: "Twitter/X",
     platform: "Twitter",
     dimensions: "1920 × 1080 — 16:9 Landscape",
+    width: 1920,
+    height: 1080,
     icon: (
       <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
         <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.259 5.63L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z" />
@@ -147,7 +157,7 @@ export default function PresetSelector({ recipe, onChange }: Props) {
     <div className="space-y-3">
       {/* Quick-action row */}
       <div className="grid grid-cols-5 gap-1.5">
-        {QUICK_ACTIONS.map(({ preset, label, platform, dimensions, icon }) => {
+        {QUICK_ACTIONS.map(({ preset, label, platform, dimensions, width, height, icon }) => {
           const isActive = recipe.preset === preset;
           return (
             <button
@@ -164,7 +174,7 @@ export default function PresetSelector({ recipe, onChange }: Props) {
                   : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-film-300 hover:bg-film-50/30 hover:text-[var(--text)]",
               )}
             >
-              {icon}
+              <RatioBox width={width} height={height} active={isActive} />
               <span className={cn(
                 "text-[9px] font-heading font-bold uppercase tracking-wide leading-none",
                 isActive ? "text-film-700" : "text-[var(--muted)]",

From d0a1e9065c4cdf10349c5055f84e88daeebff93e Mon Sep 17 00:00:00 2001
From: Youngmaster0304 <abhinavjha0304@gmail.com>
Date: Sat, 1 Aug 2026 23:37:06 +0530
Subject: [PATCH 11/11] feat: add section dividers between editor control
 groups

Added subtle hr dividers between Trim, Rotation, Text Overlay, and
Audio sections for better visual grouping.

Fixes #192

Contributor: Abhinav Jha (@Youngmaster0304)
Email: abhinavjha0304@gmail.com
GSSoC 2026 Participant
---
 src/components/VideoEditor.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 70feaf58..08f06c56 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -473,6 +473,8 @@ return () => {
                     />
                   </AccordionSection>
 
+                  <hr className="border-[var(--border)] opacity-50" />
+
                   <AccordionSection
                     id="rotation"
                     icon={<RotateCw size={12} />}
@@ -484,6 +486,8 @@ return () => {
                     <RotateControl recipe={recipe} onChange={updateRecipe} />
                   </AccordionSection>
 
+                  <hr className="border-[var(--border)] opacity-50" />
+
                   <AccordionSection
                     id="text"
                     icon={<Type size={12} />}