Skip to content

feat(requests): allow users to view requester on media details page#2866

Open
danielkinahan wants to merge 2 commits intoseerr-team:developfrom
danielkinahan:develop
Open

feat(requests): allow users to view requester on media details page#2866
danielkinahan wants to merge 2 commits intoseerr-team:developfrom
danielkinahan:develop

Conversation

@danielkinahan
Copy link
Copy Markdown

@danielkinahan danielkinahan commented Apr 12, 2026

Description

This change adds the ability for a user with View Requests permission to view the requests of other users on the media details page (both TV and movies). I added it as a seperate card under the media-facts card, but I'd like feedback on the placement. I will include screenshots.

Disclaimer on AI

I used AI to search the codebase and review this code for feedback.

How Has This Been Tested?

I copied my db of my instance and ran tests with it, so I could have data. I have only run this in dev mode. I have tried this with a piece of media that has no requests, one and multiple (creates new cards for each).

Screenshots / Logs (if applicable)

One request
image

Multiple requests
image

No requests (card doesnt show)
image

Mobile view of multiple requests
image

Checklist:

  • I have read and followed the contribution guidelines.
  • Disclosed any use of AI (see our policy)
  • I have updated the documentation accordingly.
  • All new and existing tests passed.
  • Successful build pnpm build
  • Translation keys pnpm i18n:extract
  • Database migration (if required)

Summary by CodeRabbit

  • New Features
    • Introduced media request summary section on movie and TV show details pages, displaying who requested the media, request date, and current status with visual status badges and 4K request tracking.

@danielkinahan danielkinahan requested a review from a team as a code owner April 12, 2026 19:01
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 12, 2026

📝 Walkthrough

Walkthrough

A new React component MediaRequestSummary was added and integrated into MovieDetails and TvDetails, showing requester, date, and status badges. Requests passed to the component are filtered based on MANAGE_REQUESTS / REQUEST_VIEW permissions or limited to the current user's requests.

Changes

Cohort / File(s) Summary
New Component
src/components/MediaRequestSummary/index.tsx
Added a memoized component that renders sorted media requests with requester link/avatar, formatted request date, status badge mapping, and a 4K indicator. Exports default MediaRequestSummary with props requests?: MediaRequest[], currentUserId?: number.
Details Components Integration
src/components/MovieDetails/index.tsx, src/components/TvDetails/index.tsx
Imported and rendered MediaRequestSummary in media-overview-right; passes requests either as full data.mediaInfo?.requests for users with Permission.MANAGE_REQUESTS or Permission.REQUEST_VIEW, or as a filtered list containing only requests by the current user. Also passes currentUserId={user?.id}.
i18n
src/i18n/locale/en.json
Added translation keys components.MediaRequestSummary.requestDate, components.MediaRequestSummary.requester, and components.MediaRequestSummary.status.

Sequence Diagram(s)

sequenceDiagram
    rect rgba(52,152,219,0.5)
    participant Browser
    end
    rect rgba(46,204,113,0.5)
    participant MovieDetails/TvDetails
    end
    rect rgba(155,89,182,0.5)
    participant MediaRequestSummary
    end
    rect rgba(241,196,15,0.5)
    participant Auth/Permissions
    end
    Browser->>MovieDetails/TvDetails: navigate to media page
    MovieDetails/TvDetails->>Auth/Permissions: check user permissions (MANAGE_REQUESTS / REQUEST_VIEW)
    Auth/Permissions-->>MovieDetails/TvDetails: permission scope
    MovieDetails/TvDetails->>MediaRequestSummary: render with `requests` (full or filtered) and `currentUserId`
    MediaRequestSummary->>MediaRequestSummary: sort requests, map status to badges, format dates
    MediaRequestSummary-->>Browser: render requester links, avatars, badges
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • fallenbagel
  • gauthier-th

Poem

🐇 I hopped through requests both near and far,
I sorted dates and stuck on a star,
A badge for status, an avatar too,
Now who asked for what is clear to view—🐰✨

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: allowing users to view requester information on media details pages.
Linked Issues check ✅ Passed The PR implements the core requirement from issue #2865: displaying requester information to users with View Requests permission on media details pages.
Out of Scope Changes check ✅ Passed All changes are directly related to implementing requester visibility on media details pages; no unrelated modifications detected.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/components/MediaRequestSummary/index.tsx (1)

44-70: Consolidate status mapping to prevent future drift.

statusMessage and statusBadgeType are derived from duplicate switch logic on the same enum. Centralizing this in one map/helper will keep status text and badge color in sync as statuses evolve.

♻️ Suggested refactor
+const requestStatusMeta = {
+  [MediaRequestStatus.APPROVED]: {
+    message: globalMessages.approved,
+    badgeType: 'success',
+  },
+  [MediaRequestStatus.DECLINED]: {
+    message: globalMessages.declined,
+    badgeType: 'danger',
+  },
+  [MediaRequestStatus.FAILED]: {
+    message: globalMessages.failed,
+    badgeType: 'danger',
+  },
+  [MediaRequestStatus.COMPLETED]: {
+    message: globalMessages.completed,
+    badgeType: 'success',
+  },
+  [MediaRequestStatus.PENDING]: {
+    message: globalMessages.pending,
+    badgeType: 'warning',
+  },
+} as const;
...
-        const statusMessage = (() => {
-          switch (request.status) {
-            case MediaRequestStatus.APPROVED:
-              return intl.formatMessage(globalMessages.approved);
-            case MediaRequestStatus.DECLINED:
-              return intl.formatMessage(globalMessages.declined);
-            case MediaRequestStatus.FAILED:
-              return intl.formatMessage(globalMessages.failed);
-            case MediaRequestStatus.COMPLETED:
-              return intl.formatMessage(globalMessages.completed);
-            default:
-              return intl.formatMessage(globalMessages.pending);
-          }
-        })();
-
-        const statusBadgeType = (() => {
-          switch (request.status) {
-            case MediaRequestStatus.APPROVED:
-            case MediaRequestStatus.COMPLETED:
-              return 'success';
-            case MediaRequestStatus.DECLINED:
-            case MediaRequestStatus.FAILED:
-              return 'danger';
-            default:
-              return 'warning';
-          }
-        })();
+        const statusMeta =
+          requestStatusMeta[request.status] ?? requestStatusMeta[MediaRequestStatus.PENDING];
+        const statusMessage = intl.formatMessage(statusMeta.message);
+        const statusBadgeType = statusMeta.badgeType;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/MediaRequestSummary/index.tsx` around lines 44 - 70, The
duplicate switch logic for computing statusMessage and statusBadgeType from
MediaRequestStatus should be centralized: create a single helper (e.g.,
getMediaRequestStatusInfo or STATUS_MAP) that accepts a MediaRequestStatus and
returns both the localized message (using intl + globalMessages) and the badge
type string; replace the current statusMessage and statusBadgeType computed
blocks with calls to that helper (use its .message and .badgeType), ensuring you
reference MediaRequestStatus, intl, and globalMessages inside the helper so both
values stay in sync as statuses change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/MediaRequestSummary/index.tsx`:
- Around line 44-70: The duplicate switch logic for computing statusMessage and
statusBadgeType from MediaRequestStatus should be centralized: create a single
helper (e.g., getMediaRequestStatusInfo or STATUS_MAP) that accepts a
MediaRequestStatus and returns both the localized message (using intl +
globalMessages) and the badge type string; replace the current statusMessage and
statusBadgeType computed blocks with calls to that helper (use its .message and
.badgeType), ensuring you reference MediaRequestStatus, intl, and globalMessages
inside the helper so both values stay in sync as statuses change.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5f10119d-f175-4952-a1a5-27805527278f

📥 Commits

Reviewing files that changed from the base of the PR and between 43eff25 and d1076e6.

📒 Files selected for processing (3)
  • src/components/MediaRequestSummary/index.tsx
  • src/components/MovieDetails/index.tsx
  • src/components/TvDetails/index.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add the ability to view requester on media page if user has "View Requests" permission

1 participant