feat(gif-player): add frame-by-frame player for GIFs and videos

Introduces a new tool to inspect media frame-by-frame, specifically designed for analyzing QA bug reports. The player supports GIF parsing via Web Workers to maintain UI responsiveness and provides video scrubbing, playback speed controls, and keyboard shortcuts for precise navigation.

Author: lilBunnyRabbit

bun.lock

@@ -22,6 +22,7 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "gifuct-js": "^2.1.2",
     "jsqr": "^1.4.0",
     "jszip": "^3.10.1",
     "lucide-react": "^0.441.0",

package.json

@@ -18,6 +18,7 @@ import { Route as ToolsQrReaderIndexImport } from './routes/tools/qr-reader/inde
 import { Route as ToolsImageSplitIndexImport } from './routes/tools/image-split/index'
 import { Route as ToolsImageCropIndexImport } from './routes/tools/image-crop/index'
 import { Route as ToolsImageConcatIndexImport } from './routes/tools/image-concat/index'
+import { Route as ToolsGifPlayerIndexImport } from './routes/tools/gif-player/index'
 import { Route as ToolsBackgroundRemoveIndexImport } from './routes/tools/background-remove/index'
 import { Route as SysTaskManagerIndexImport } from './routes/sys/task-manager/index'
 
@@ -65,6 +66,13 @@ const ToolsImageConcatIndexRoute = ToolsImageConcatIndexImport.update({
   import('./routes/tools/image-concat/index.lazy').then((d) => d.Route),
 )
 
+const ToolsGifPlayerIndexRoute = ToolsGifPlayerIndexImport.update({
+  path: '/tools/gif-player/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/tools/gif-player/index.lazy').then((d) => d.Route),
+)
+
 const ToolsBackgroundRemoveIndexRoute = ToolsBackgroundRemoveIndexImport.update(
   {
     path: '/tools/background-remove/',
@@ -113,6 +121,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ToolsBackgroundRemoveIndexImport
       parentRoute: typeof rootRoute
     }
+    '/tools/gif-player/': {
+      id: '/tools/gif-player/'
+      path: '/tools/gif-player'
+      fullPath: '/tools/gif-player'
+      preLoaderRoute: typeof ToolsGifPlayerIndexImport
+      parentRoute: typeof rootRoute
+    }
     '/tools/image-concat/': {
       id: '/tools/image-concat/'
       path: '/tools/image-concat'
@@ -151,6 +166,7 @@ export interface FileRoutesByFullPath {
   '/testing': typeof TestingRoute
   '/sys/task-manager': typeof SysTaskManagerIndexRoute
   '/tools/background-remove': typeof ToolsBackgroundRemoveIndexRoute
+  '/tools/gif-player': typeof ToolsGifPlayerIndexRoute
   '/tools/image-concat': typeof ToolsImageConcatIndexRoute
   '/tools/image-crop': typeof ToolsImageCropIndexRoute
   '/tools/image-split': typeof ToolsImageSplitIndexRoute
@@ -162,6 +178,7 @@ export interface FileRoutesByTo {
   '/testing': typeof TestingRoute
   '/sys/task-manager': typeof SysTaskManagerIndexRoute
   '/tools/background-remove': typeof ToolsBackgroundRemoveIndexRoute
+  '/tools/gif-player': typeof ToolsGifPlayerIndexRoute
   '/tools/image-concat': typeof ToolsImageConcatIndexRoute
   '/tools/image-crop': typeof ToolsImageCropIndexRoute
   '/tools/image-split': typeof ToolsImageSplitIndexRoute
@@ -174,6 +191,7 @@ export interface FileRoutesById {
   '/testing': typeof TestingRoute
   '/sys/task-manager/': typeof SysTaskManagerIndexRoute
   '/tools/background-remove/': typeof ToolsBackgroundRemoveIndexRoute
+  '/tools/gif-player/': typeof ToolsGifPlayerIndexRoute
   '/tools/image-concat/': typeof ToolsImageConcatIndexRoute
   '/tools/image-crop/': typeof ToolsImageCropIndexRoute
   '/tools/image-split/': typeof ToolsImageSplitIndexRoute
@@ -187,6 +205,7 @@ export interface FileRouteTypes {
     | '/testing'
     | '/sys/task-manager'
     | '/tools/background-remove'
+    | '/tools/gif-player'
     | '/tools/image-concat'
     | '/tools/image-crop'
     | '/tools/image-split'
@@ -197,6 +216,7 @@ export interface FileRouteTypes {
     | '/testing'
     | '/sys/task-manager'
     | '/tools/background-remove'
+    | '/tools/gif-player'
     | '/tools/image-concat'
     | '/tools/image-crop'
     | '/tools/image-split'
@@ -207,6 +227,7 @@ export interface FileRouteTypes {
     | '/testing'
     | '/sys/task-manager/'
     | '/tools/background-remove/'
+    | '/tools/gif-player/'
     | '/tools/image-concat/'
     | '/tools/image-crop/'
     | '/tools/image-split/'
@@ -219,6 +240,7 @@ export interface RootRouteChildren {
   TestingRoute: typeof TestingRoute
   SysTaskManagerIndexRoute: typeof SysTaskManagerIndexRoute
   ToolsBackgroundRemoveIndexRoute: typeof ToolsBackgroundRemoveIndexRoute
+  ToolsGifPlayerIndexRoute: typeof ToolsGifPlayerIndexRoute
   ToolsImageConcatIndexRoute: typeof ToolsImageConcatIndexRoute
   ToolsImageCropIndexRoute: typeof ToolsImageCropIndexRoute
   ToolsImageSplitIndexRoute: typeof ToolsImageSplitIndexRoute
@@ -230,6 +252,7 @@ const rootRouteChildren: RootRouteChildren = {
   TestingRoute: TestingRoute,
   SysTaskManagerIndexRoute: SysTaskManagerIndexRoute,
   ToolsBackgroundRemoveIndexRoute: ToolsBackgroundRemoveIndexRoute,
+  ToolsGifPlayerIndexRoute: ToolsGifPlayerIndexRoute,
   ToolsImageConcatIndexRoute: ToolsImageConcatIndexRoute,
   ToolsImageCropIndexRoute: ToolsImageCropIndexRoute,
   ToolsImageSplitIndexRoute: ToolsImageSplitIndexRoute,
@@ -252,6 +275,7 @@ export const routeTree = rootRoute
         "/testing",
         "/sys/task-manager/",
         "/tools/background-remove/",
+        "/tools/gif-player/",
         "/tools/image-concat/",
         "/tools/image-crop/",
         "/tools/image-split/",
@@ -270,6 +294,9 @@ export const routeTree = rootRoute
     "/tools/background-remove/": {
       "filePath": "tools/background-remove/index.tsx"
     },
+    "/tools/gif-player/": {
+      "filePath": "tools/gif-player/index.tsx"
+    },
     "/tools/image-concat/": {
       "filePath": "tools/image-concat/index.tsx"
     },

src/routeTree.gen.ts

@@ -32,7 +32,13 @@ function IndexRoute() {
         to="/tools/qr-reader"
       />
 
-      {Array(5 * 6 - 5)
+      <ToolBox
+        name="GIF & Video Player"
+        description="Play, scrub, and step through a GIF or video frame-by-frame — handy for QA bug reports."
+        to="/tools/gif-player"
+      />
+
+      {Array(5 * 6 - 6)
         .fill(0)
         .map((_, i) => (
           <div