-
Notifications
You must be signed in to change notification settings - Fork 2.9k
/
VideoRenderer.tsx
48 lines (43 loc) · 1.96 KB
/
VideoRenderer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React from 'react';
import type {CustomRendererProps, TBlock} from 'react-native-render-html';
import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
import VideoPlayerPreview from '@components/VideoPlayerPreview';
import * as FileUtils from '@libs/fileDownload/FileUtils';
import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
import Navigation from '@navigation/Navigation';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
type VideoRendererProps = CustomRendererProps<TBlock> & {
/** Key of the element */
key?: string;
};
function VideoRenderer({tnode, key}: VideoRendererProps) {
const htmlAttribs = tnode.attributes;
const attrHref = htmlAttribs.href || htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || '';
const sourceURL = tryResolveUrlFromApiRoot(attrHref);
const fileName = FileUtils.getFileName(`${sourceURL}`);
const thumbnailUrl = htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_URL_ATTRIBUTE];
const width = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_WIDTH_ATTRIBUTE]);
const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]);
const duration = Number(htmlAttribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]);
return (
<ShowContextMenuContext.Consumer>
{({report}) => (
<VideoPlayerPreview
key={key}
videoUrl={sourceURL}
fileName={fileName}
thumbnailUrl={thumbnailUrl}
videoDimensions={{width, height}}
videoDuration={duration}
onShowModalPress={() => {
const route = ROUTES.REPORT_ATTACHMENTS.getRoute(report?.reportID ?? '', sourceURL);
Navigation.navigate(route);
}}
/>
)}
</ShowContextMenuContext.Consumer>
);
}
VideoRenderer.displayName = 'VideoRenderer';
export default VideoRenderer;