Open History to see the last commit
1import { createContext, useContext } from "react";
2import { MediaVideoPlayer } from "../../components/MediaVideoPlayer";
3import { useAssetUrlState, useRefreshAssetUrl } from "../../state/assets";
4import {
5 mediaVideoPreviewUri,
6 mediaVideoThumbnailKey,
7 type MediaVideoPreviewSource,
8} from "../../lib/videoPreviewSource";
9
10export const ThreadMediaVisibleContext = createContext(false);
11
12export function ThreadMarkdownVideo(props: {
13 readonly source: MediaVideoPreviewSource;
14 readonly thumbnailVisible?: boolean;
15 readonly onPlaybackStart?: () => void;
16 readonly borderRadius?: number;
17}) {
18 const { source } = props;
19 const feedVisible = useContext(ThreadMediaVisibleContext);
20 const visible = props.thumbnailVisible ?? feedVisible;
21 const thumbnailKey = mediaVideoThumbnailKey(source);
22 const asset = useAssetUrlState(
23 "environmentId" in source ? source.environmentId : null,
24 "resource" in source ? source.resource : null,
25 );
26 const refreshAssetUrl = useRefreshAssetUrl(
27 "environmentId" in source ? source.environmentId : null,
28 "resource" in source ? source.resource : null,
29 );
30 const uri = mediaVideoPreviewUri(source, asset._tag === "Success" ? asset.url : null);
31 return (
32 <MediaVideoPlayer
33 key={thumbnailKey}
34 uri={uri}
35 resolvePlaybackUri={
36 "resource" in source
37 ? async () => mediaVideoPreviewUri(source, await refreshAssetUrl())
38 : undefined
39 }
40 name={source.name}
41 thumbnailKey={thumbnailKey}
42 thumbnailVisible={visible}
43 visible={visible}
44 onPlaybackStart={props.onPlaybackStart}
45 unavailable={"resource" in source && asset._tag === "Failure"}
46 actionsSource={source.actionsSource}
47 borderRadius={props.borderRadius}
48 />
49 );
50}