Hi Palantir Community,
I’m working on a React app in Foundry using the OSDK to display MP4 videos stored in a media set. I’m using @osdk/foundry.mediasets to fetch the video content, but I’m running into issues with MediaSets.read failing with a 400 Bad Request error. I’d appreciate any guidance on how to correctly fetch and play an MP4 from a media set in a React app.
Here’s what I’m trying to do:
- I have a media set with the RID ri.mio.main.media-set.12345678-1234-1234-1234-1234567890ab containing several MP4 files, such as:
video1.mp4 with media item RID ri.mio.main.media-item.abcdef12-3456-7890-abcd-ef1234567890
video2.mp4 with media item RID ri.mio.main.media-item.ghijkl34-5678-9012-cdef-gh3456789012 - I’m using MediaSets.read to fetch the content of each media item and create a blob URL to play in a
`import { useState, useEffect } from “react”;
import { MediaSets } from “@osdk/foundry.mediasets”;
import { platformClient } from “./client”; // My OSDK clientinterface Release {
id: number;
title: string;
mediaItemRid: string;
videoUrl?: string;
}const MyComponent: React.FC = () => {
const [releases, setReleases] = useState<Release>([
{ id: 1, title: “Video 1”, mediaItemRid: “ri.mio.main.media-item.abcdef12-3456-7890-abcd-ef1234567890” },
{ id: 2, title: “Video 2”, mediaItemRid: “ri.mio.main.media-item.ghijkl34-5678-9012-cdef-gh3456789012” },
]);
const [playingVideoUrl, setPlayingVideoUrl] = useState<string | null>(null);useEffect(() => {
const fetchMediaItemUrls = async () => {
try {
const mediaSetRid = “ri.mio.main.media-set.12345678-1234-1234-1234-1234567890ab”;
const updatedReleases = await Promise.all(
releases.map(async (release) => {
try {
const response = await MediaSets.read(platformClient, mediaSetRid, release.mediaItemRid, {});
console.log(Response for ${release.title}:, response);
if (!response.ok) {
const errorText = await response.text();
throw new Error(Failed to fetch ${response.status}: ${errorText});
}
const blob = await response.blob();
const videoUrl = URL.createObjectURL(blob);
return { …release, videoUrl };
} catch (error) {
console.error(Failed to fetch video for ${release.title}:, error);
return release;
}
}),
);
setReleases(updatedReleases);
} catch (error) {
console.error(“Failed to fetch media item URLs:”, error);
}
};fetchMediaItemUrls();}, );
return (
{playingVideoUrl && (
)}
{releases.map((release) => (
{release.title}
{release.videoUrl ? (
<button onClick={() => setPlayingVideoUrl(release.videoUrl)}>Play Video
) : (
Video Not Available
)}
))}
);
};export default MyComponent;`
Issues I’m Facing:
- 400 Bad Request Error: When I call MediaSets.read, I get a 400 Bad Request error. The console logs show:
Failed to fetch video for Video 1: Error: Failed to fetch 400
I suspect this might be related to permissions or authentication. The documentation mentions that api:mediasets-read scope is required, but I’m not sure if my platformClient has this scope. How can I confirm or add this scope? Also, the read function accepts a ReadToken in $headerParams. Is this required, and if so, how do I obtain a ReadToken?
Questions:
How can I fix the 400 Bad Request error with MediaSets.read? Do I need a ReadToken, and if so, how do I obtain one?
What’s the recommended way to play an MP4 from a media set in a React app using OSDK?