diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 5a4adf486..2ae0e7e6c 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1816,6 +1816,12 @@
"partiallyAvailable": "Partial",
"available": "Available"
},
+ "status": {
+ "pending": "Pending",
+ "approved": "Approved",
+ "declined": "Declined",
+ "failed": "Failed"
+ },
"toBeDetermined": "TBD"
},
"mediaRequests-requestStats": {
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
index 181ce6b53..1e4111fb0 100644
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -150,7 +150,7 @@ export default function MediaServerWidget({
{(mediaRequest.requestedBy?.displayName ?? "") || "unknown"}
- {mediaRequest.status === MediaRequestStatus.PendingApproval && (
+ {mediaRequest.status === MediaRequestStatus.PendingApproval ? (
+ ) : (
+
)}
@@ -197,6 +199,34 @@ export default function MediaServerWidget({
);
}
+const statusMapping = {
+ [MediaRequestStatus.PendingApproval]: { color: "blue", label: (t) => t("pending") },
+ [MediaRequestStatus.Approved]: { color: "green", label: (t) => t("approved") },
+ [MediaRequestStatus.Declined]: { color: "red", label: (t) => t("declined") },
+ [MediaRequestStatus.Failed]: { color: "red", label: (t) => t("failed") },
+} satisfies Record<
+ MediaRequestStatus,
+ {
+ color: string;
+ label: (t: ScopedTranslationFunction<"widget.mediaRequests-requestList.status">) => string;
+ }
+>;
+
+interface StatusBadgeProps {
+ status: MediaRequestStatus;
+}
+
+const StatusBadge = ({ status }: StatusBadgeProps) => {
+ const { color, label } = statusMapping[status];
+ const tStatus = useScopedI18n("widget.mediaRequests-requestList.status");
+
+ return (
+
+ {label(tStatus)}
+
+ );
+};
+
function getAvailabilityProperties(
mediaRequestAvailability: MediaAvailability,
t: ScopedTranslationFunction<"widget.mediaRequests-requestList">,
@@ -206,10 +236,10 @@ function getAvailabilityProperties(
return { color: "green", label: t("availability.available") };
case MediaAvailability.PartiallyAvailable:
return { color: "yellow", label: t("availability.partiallyAvailable") };
- case MediaAvailability.Pending:
- return { color: "violet", label: t("availability.pending") };
case MediaAvailability.Processing:
return { color: "blue", label: t("availability.processing") };
+ case MediaAvailability.Pending:
+ return { color: "violet", label: t("availability.pending") };
default:
return { color: "red", label: t("availability.unknown") };
}