+12
src/routes/watch/[actor=did]/[cid=cidRaw]/+page.svelte
+12
src/routes/watch/[actor=did]/[cid=cidRaw]/+page.svelte
···
16
16
const hls = new Hls({
17
17
capLevelToPlayerSize: true,
18
18
startLevel: 1,
19
+
xhrSetup(xhr, urlString) {
20
+
if (!urlString.endsWith('/playlist.m3u8')) {
21
+
urlString = urlString.replace('https://video.bsky.app/watch/', 'https://video.cdn.bsky.app/hls/');
22
+
}
23
+
24
+
const url = new URL(urlString);
25
+
26
+
// Remove `session_id` everywhere
27
+
url.searchParams.delete('session_id');
28
+
29
+
xhr.open('get', url.toString());
30
+
},
19
31
});
20
32
21
33
hls.loadSource(data.playlistUrl);
+7
-5
src/routes/watch/[actor=did]/[cid=cidRaw]/+page.ts
+7
-5
src/routes/watch/[actor=did]/[cid=cidRaw]/+page.ts
···
4
4
export const csr = true;
5
5
6
6
export const load: PageLoad = async ({ params }) => {
7
-
const CDN_URL = `https://video.cdn.bsky.app`;
8
-
const BASE_URL = `${CDN_URL}/hls/${params.actor}/${params.cid}`;
9
-
10
7
return {
11
-
playlistUrl: `${BASE_URL}/playlist.m3u8`,
12
-
thumbnailUrl: `${BASE_URL}/thumbnail.jpg`,
8
+
// Ideally we should just be using `video.cdn.bsky.app` here for the playlist,
9
+
// the problem is that the original M3U8 playlist stored by the CDN doesn't contain
10
+
// the caption definitions, they're added in by the middleware service.
11
+
//
12
+
// We'll replace the subsequent playlist and segment URLs when setting up the player.
13
+
playlistUrl: `https://video.bsky.app/watch/${params.actor}/${params.cid}/playlist.m3u8`,
14
+
thumbnailUrl: `https://video.cdn.bsky.app/hls/${params.actor}/${params.cid}/thumbnail.jpg`,
13
15
};
14
16
};