fix(lightbox): allow Instagram videos in VideoSlide component

[B-a-l-aj-i]

Summary by CodeRabbit

• Bug Fixes
  • Fixed video playback support in the lightbox viewer to now include Instagram bookmarks in addition to previously supported Twitter bookmarks.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
recollect	Ready	Preview	Jan 7, 2026 9:09am

[coderabbitai]

📝 Walkthrough

Walkthrough

The VideoSlide component in LightboxRenderers.tsx now conditionally renders video URLs for both tweet and Instagram bookmark types. Previously restricted to tweets only, the source logic now accepts Instagram bookmarks with video URLs, expanding video support without altering error handling or other behavior.

Changes

Cohort / File(s)	Summary
VideoSlide Component src/components/lightbox/LightboxRenderers.tsx	Modified the src prop condition from checking only tweetType to accepting both tweetType OR "instagram" when a video URL is present in bookmark metadata.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• PR #627: Directly modifies the VideoSlide renderer that was introduced/modified in this PR, sharing the same component logic area.

Suggested reviewers

• abhishekmg

Poem

🐰 A slide that once sang only tweet-song,
Now welcomes Instagram's glow along,
With video URLs in the frame,
Two platforms now deserve the same acclaim!
✨📹

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(lightbox): allow Instagram videos in VideoSlide component' directly and clearly summarizes the main change—extending video support to Instagram bookmarks in the VideoSlide component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/instagram-bookmark-type

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/components/lightbox/LightboxRenderers.tsx (1)

73-74: Use a constant for the Instagram type instead of a string literal.

The code uses a hardcoded "instagram" string while tweetType is imported as a constant. Create an instagramType constant in src/utils/constants.ts following the pattern of bookmarkType and tweetType:

export const instagramType = "instagram";

Then update the import and usage in src/components/lightbox/LightboxRenderers.tsx:

 import {
 	IMAGE_TYPE_PREFIX,
 	PDF_MIME_TYPE,
 	PDF_VIEWER_PARAMS,
 	PREVIEW_ALT_TEXT,
+	instagramType,
 	tweetType,
 } from "../../utils/constants";

-					(bookmark?.type === tweetType || bookmark?.type === "instagram") &&
+					(bookmark?.type === tweetType || bookmark?.type === instagramType) &&

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1e8042b and b95021c.

📒 Files selected for processing (1)

• src/components/lightbox/LightboxRenderers.tsx

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/supabase-nextjs-rules.mdc)

**/*.{ts,tsx,js,jsx}: Must use @supabase/ssr package for creating browser and server clients in Next.js Supabase Auth implementation
Browser client must use createBrowserClient from @supabase/ssr with NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY
Server client must use createServerClient from @supabase/ssr with proper cookie handling using getAll and setAll methods only
NEVER use individual cookie methods (get, set, remove) for Supabase client configuration
NEVER import from @supabase/auth-helpers-nextjs as it is deprecated
Server client cookie setAll method must include try-catch error handling as it may be called from Server Components

**/*.{ts,tsx,js,jsx}: Keep files to a maximum of 250 lines - split larger files into modules.
Use PascalCase for Components, camelCase for Functions, and UPPER_SNAKE_CASE for Constants.
Use fetch API - never axios or older alternatives in frontend code.
Never use CommonJS, var, eval(), arguments, enums, or namespaces in modern code.
Always use const/let, template literals, optional chaining, and for...of loops in TypeScript/JavaScript.

Files:

• src/components/lightbox/LightboxRenderers.tsx

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/supabase-use-realtime.mdc)

**/*.{js,ts,jsx,tsx}: Use broadcast for all realtime events (database changes via triggers, messaging, notifications, game state)
Use presence sparingly for user state tracking (online status, user counters)
Use topic names that correlate with concepts and tables: scope:entity (e.g., room:123:messages)
Include unsubscribe/cleanup logic in all implementations
Set private: true for channels using database triggers or RLS policies
Give preference to use private channels over public channels (better security and control)
Implement proper error handling and reconnection logic
Do not use postgres_changes for new applications (single-threaded, doesn't scale well); migrate to broadcast from database on existing applications if necessary
Do not create multiple subscriptions without proper cleanup
Do not use database functions (realtime.send, realtime.broadcast_changes) in client code
Use dedicated, granular topics to ensure messages are only sent to relevant listeners and improve scalability
Check if channel state is 'subscribed' before subscribing to prevent multiple subscriptions
Set auth with supabase.realtime.setAuth() before subscribing to private channels
Configure broadcast options: use self: true to receive your own broadcast messages and ack: true for server acknowledgment
Monitor channel states (SUBSCRIBED, TIMED_OUT, CLOSED, CHANNEL_ERROR) and rely on built-in automatic reconnection with exponential backoff
Use one channel per logical scope (e.g., room:123) rather than nested scopes to optimize channel structure
Shard high-volume topics (e.g., chat:shard:1, chat:shard:2) to distribute load and improve scalability
Enable enhanced logging by setting log_level: 'info' in Supabase Realtime client configuration for debugging
Replace postgres_changes with broadcast listeners in migration from postgres_changes to realtime.broadcast_changes
Prefer generating code using broadcast over postgres_changes in all new implementations
Alw...

Files:

• src/components/lightbox/LightboxRenderers.tsx

**/*.{js,ts,jsx,tsx,sql}

📄 CodeRabbit inference engine (.cursor/rules/supabase-use-realtime.mdc)

**/*.{js,ts,jsx,tsx,sql}: Use snake_case for event names: entity_action (e.g., message_created)
Do not use generic event names like 'update' or 'change'; use specific event names following entity_action pattern

Files:

• src/components/lightbox/LightboxRenderers.tsx

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/supabase-use-realtime.mdc)

**/*.{jsx,tsx}: Do not subscribe directly in render functions without state management
Use React useRef to store channel references and prevent multiple subscriptions in useEffect hooks
Include cleanup logic in React useEffect return to remove channels and prevent memory leaks

Files:

• src/components/lightbox/LightboxRenderers.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: In TypeScript, only create abstractions when actually needed. Prefer clear function/variable names over inline comments.
In TypeScript, avoid helper functions when a simple inline expression suffices. Don't unnecessarily add try/catch blocks.
Use knip to remove unused code when making large changes in TypeScript projects.
Use only Functional Programming, never Class Based Code in TypeScript.
Use only Named exports - Never default exports in TypeScript.
Use type deduction over custom interfaces in TypeScript.
For TypeScript functions with 2+ params: Use interface with props parameter.
Never use any types or @ts-ignore directives in TypeScript code.

Files:

• src/components/lightbox/LightboxRenderers.tsx

**/*.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.tsx: In React, avoid massive JSX blocks - compose smaller components.
In React, colocate code that changes together.
In React, avoid useEffect unless absolutely needed.
In Next.js, for next/image above the fold use sync/eager/priority sparingly.
Use Tailwind CSS v4 with cn() for conditional classes in components.
Use semantic HTML over ARIA roles - use native elements for accessibility.
Ensure all interactive elements are keyboard accessible. Never use tabIndex > 0 or on non-interactive elements.
Provide labels required for all form inputs. Use meaningful alt text for images (avoid generic terms like 'image', 'picture', 'photo').
Use React Hooks at top level with all dependencies declared. Never use array indices as keys.
Implement Error boundaries for graceful failure handling in React.

Files:

• src/components/lightbox/LightboxRenderers.tsx

**/*.{css,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{css,tsx}: In Tailwind CSS, mostly use built-in values, occasionally allow dynamic values, rarely use globals. Always use v4 global CSS file format with shadcn/ui.
Use CSS Grid for layout and modern CSS features (nesting, container queries).

Files:

• src/components/lightbox/LightboxRenderers.tsx

🧠 Learnings (2)

📚 Learning: 2025-12-16T11:52:03.069Z

Learnt from: navin-moorthy
Repo: timelessco/recollect PR: 694
File: src/components/lightbox/AddToCollectionDropdown.tsx:163-167
Timestamp: 2025-12-16T11:52:03.069Z
Learning: When reviewing code for react-aria-components usage, check for nightly build API changes in Select: replace selectedKeys/onSelectionChange with value/onChange. For single-select, value should be a scalar representing the item ID; for multi-select, value should be an array of item IDs and onChange should receive the updated array. Update any references in src/components/...tsx files accordingly (e.g., AddToCollectionDropdown.tsx) to use value and onChange with the appropriate types, and remove any remaining selectedKeys or onSelectionChange usage.

Applied to files:

• src/components/lightbox/LightboxRenderers.tsx

📚 Learning: 2025-12-18T15:51:47.156Z

Learnt from: navin-moorthy
Repo: timelessco/recollect PR: 704
File: src/components/lightbox/category-multi-select.tsx:142-142
Timestamp: 2025-12-18T15:51:47.156Z
Learning: In lightbox-related components, maintain a stacking order where the lightbox uses z-index 9999. Any overlay or popover (e.g., category-multi-select positioner) that must appear above the lightbox should use a z-index of 10000 or higher. Apply this pattern to all TSX files under src/components/lightbox to ensure consistent layering and prevent overlays from appearing behind the lightbox.

Applied to files:

• src/components/lightbox/LightboxRenderers.tsx

🧬 Code graph analysis (1)

src/components/lightbox/LightboxRenderers.tsx (1)

src/utils/constants.ts (1)

• tweetType (232-232)

[B-a-l-aj-i]

instagram imports have the type instagram, if the post has a video it in it will be stored in the video_url in meta data