@sendbird/uikit-react-native-foundation 3.1.0 → 3.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/VideoThumbnail/index.js +8 -1
- package/lib/commonjs/components/VideoThumbnail/index.js.map +1 -1
- package/lib/commonjs/ui/GroupChannelMessage/Message.file.image.js +1 -1
- package/lib/commonjs/ui/GroupChannelMessage/Message.file.image.js.map +1 -1
- package/lib/commonjs/ui/GroupChannelMessage/Message.file.video.js +2 -2
- package/lib/commonjs/ui/GroupChannelMessage/Message.file.video.js.map +1 -1
- package/lib/commonjs/ui/OpenChannelMessage/Message.file.image.js +1 -1
- package/lib/commonjs/ui/OpenChannelMessage/Message.file.image.js.map +1 -1
- package/lib/commonjs/ui/OpenChannelMessage/Message.file.video.js +2 -2
- package/lib/commonjs/ui/OpenChannelMessage/Message.file.video.js.map +1 -1
- package/lib/module/components/VideoThumbnail/index.js +8 -1
- package/lib/module/components/VideoThumbnail/index.js.map +1 -1
- package/lib/module/ui/GroupChannelMessage/Message.file.image.js +2 -2
- package/lib/module/ui/GroupChannelMessage/Message.file.image.js.map +1 -1
- package/lib/module/ui/GroupChannelMessage/Message.file.video.js +3 -3
- package/lib/module/ui/GroupChannelMessage/Message.file.video.js.map +1 -1
- package/lib/module/ui/OpenChannelMessage/Message.file.image.js +2 -2
- package/lib/module/ui/OpenChannelMessage/Message.file.image.js.map +1 -1
- package/lib/module/ui/OpenChannelMessage/Message.file.video.js +3 -3
- package/lib/module/ui/OpenChannelMessage/Message.file.video.js.map +1 -1
- package/lib/typescript/src/components/VideoThumbnail/index.d.ts +4 -2
- package/package.json +3 -3
- package/src/components/VideoThumbnail/index.tsx +10 -3
- package/src/ui/GroupChannelMessage/Message.file.image.tsx +2 -2
- package/src/ui/GroupChannelMessage/Message.file.video.tsx +3 -3
- package/src/ui/OpenChannelMessage/Message.file.image.tsx +2 -2
- package/src/ui/OpenChannelMessage/Message.file.video.tsx +3 -3
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.VideoThumbnail = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
+
var _uikitUtils = require("@sendbird/uikit-utils");
|
|
9
10
|
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
|
|
10
11
|
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
|
|
11
12
|
var _Box = _interopRequireDefault(require("../Box"));
|
|
@@ -18,6 +19,7 @@ const VideoThumbnail = _ref => {
|
|
|
18
19
|
let {
|
|
19
20
|
fetchThumbnailFromVideoSource,
|
|
20
21
|
style,
|
|
22
|
+
source,
|
|
21
23
|
videoSource,
|
|
22
24
|
iconSize = 28
|
|
23
25
|
} = _ref;
|
|
@@ -28,7 +30,12 @@ const VideoThumbnail = _ref => {
|
|
|
28
30
|
const {
|
|
29
31
|
thumbnail,
|
|
30
32
|
loading
|
|
31
|
-
} = useRetry(() =>
|
|
33
|
+
} = useRetry(async () => {
|
|
34
|
+
if ((0, _uikitUtils.isImage)(source ?? videoSource)) return {
|
|
35
|
+
path: source ?? videoSource
|
|
36
|
+
};
|
|
37
|
+
return fetchThumbnailFromVideoSource(source ?? videoSource);
|
|
38
|
+
});
|
|
32
39
|
return /*#__PURE__*/_react.default.createElement(_Box.default, {
|
|
33
40
|
style: style
|
|
34
41
|
}, loading ? /*#__PURE__*/_react.default.createElement(_Box.default, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyleSheet","_interopRequireDefault","_useUIKitTheme","_Box","_Icon","_ImageWithPlaceholder","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","VideoThumbnail","_ref","fetchThumbnailFromVideoSource","style","videoSource","iconSize","palette","select","useUIKitTheme","thumbnail","loading","useRetry","createElement","StyleSheet","absoluteFill","backgroundColor","dark","background400","light","background100","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitUtils","_createStyleSheet","_interopRequireDefault","_useUIKitTheme","_Box","_Icon","_ImageWithPlaceholder","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","VideoThumbnail","_ref","fetchThumbnailFromVideoSource","style","source","videoSource","iconSize","palette","select","useUIKitTheme","thumbnail","loading","useRetry","isImage","path","createElement","StyleSheet","absoluteFill","backgroundColor","dark","background400","light","background100","uri","alignItems","justifyContent","icon","size","color","onBackgroundLight02","containerStyle","styles","playIcon","onBackgroundDark01","exports","fetch","retryCount","arguments","length","undefined","state","setState","useState","retryCountRef","useRef","fetchThumbnail","current","useEffect","_timeout","_cancelled","tryFetchThumbnail","timeout","retry","finish","setTimeout","then","result","catch","clearTimeout","createStyleSheet","padding","borderRadius"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { isImage } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport ImageWithPlaceholder from '../ImageWithPlaceholder';\n\ntype Props = {\n source: string;\n fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n\n style?: StyleProp<ViewStyle>;\n iconSize?: number;\n /** @deprecated please use `source` prop **/\n videoSource?: string;\n};\n\nexport const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize = 28 }: Props) => {\n const { palette, select } = useUIKitTheme();\n const { thumbnail, loading } = useRetry(async () => {\n if (isImage(source ?? videoSource)) return { path: source ?? videoSource };\n return fetchThumbnailFromVideoSource(source ?? videoSource);\n });\n\n return (\n <Box style={style}>\n {loading ? (\n <Box\n style={StyleSheet.absoluteFill}\n backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n />\n ) : (\n <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />\n )}\n\n {(loading || thumbnail !== null) && iconSize > 0 && (\n <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>\n <Icon\n icon={'play'}\n size={iconSize}\n color={palette.onBackgroundLight02}\n containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}\n />\n </Box>\n )}\n </Box>\n );\n};\n\nconst useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {\n const [state, setState] = useState({ thumbnail: null as null | string, loading: true });\n const retryCountRef = useRef(0);\n const fetchThumbnail = useRef(fetch);\n fetchThumbnail.current = fetch;\n\n useEffect(() => {\n let _timeout: NodeJS.Timeout;\n let _cancelled = false;\n\n if (!state.thumbnail) {\n const tryFetchThumbnail = (timeout: number) => {\n const retry = () => {\n retryCountRef.current++;\n tryFetchThumbnail(timeout + 5000);\n };\n\n const finish = (path: string | null) => {\n if (!_cancelled) setState({ loading: false, thumbnail: path });\n };\n\n if (retryCountRef.current < retryCount) {\n _timeout = setTimeout(() => {\n fetchThumbnail\n .current()\n .then((result) => {\n if (result === null) retry();\n else finish(result.path);\n })\n .catch(() => retry());\n }, timeout);\n } else {\n finish(null);\n }\n };\n\n tryFetchThumbnail(0);\n }\n\n return () => {\n _cancelled = true;\n clearTimeout(_timeout);\n };\n }, [state.thumbnail]);\n\n return state;\n};\n\nconst styles = createStyleSheet({\n playIcon: {\n padding: 10,\n borderRadius: 50,\n },\n});\n"],"mappings":"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"}
|
|
@@ -31,7 +31,7 @@ const ImageFileMessage = props => {
|
|
|
31
31
|
onLongPress: onLongPress
|
|
32
32
|
}, /*#__PURE__*/_react.default.createElement(_ImageWithPlaceholder.default, {
|
|
33
33
|
source: {
|
|
34
|
-
uri: (0, _uikitUtils.
|
|
34
|
+
uri: (0, _uikitUtils.getThumbnailUriFromFileMessage)(props.message)
|
|
35
35
|
},
|
|
36
36
|
style: styles.image
|
|
37
37
|
})), props.children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_uikitUtils","_Box","_ImageWithPlaceholder","_PressBox","_createStyleSheet","_useUIKitTheme","_MessageContainer","obj","__esModule","default","ImageFileMessage","props","onPress","onLongPress","variant","colors","useUIKitTheme","createElement","style","styles","container","backgroundColor","ui","groupChannelMessage","enabled","background","activeOpacity","source","uri","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_uikitUtils","_Box","_ImageWithPlaceholder","_PressBox","_createStyleSheet","_useUIKitTheme","_MessageContainer","obj","__esModule","default","ImageFileMessage","props","onPress","onLongPress","variant","colors","useUIKitTheme","createElement","style","styles","container","backgroundColor","ui","groupChannelMessage","enabled","background","activeOpacity","source","uri","getThumbnailUriFromFileMessage","message","image","children","createStyleSheet","borderRadius","overflow","maxWidth","width","height","_default","exports"],"sources":["Message.file.image.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nconst ImageFileMessage = (props: GroupChannelMessageProps<SendbirdFileMessage>) => {\n const { onPress, onLongPress, variant = 'incoming' } = props;\n\n const { colors } = useUIKitTheme();\n\n return (\n <MessageContainer {...props}>\n <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>\n <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n <ImageWithPlaceholder source={{ uri: getThumbnailUriFromFileMessage(props.message) }} style={styles.image} />\n </PressBox>\n {props.children}\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n borderRadius: 16,\n overflow: 'hidden',\n },\n image: {\n maxWidth: 240,\n width: 240,\n height: 160,\n borderRadius: 16,\n overflow: 'hidden',\n },\n});\n\nexport default ImageFileMessage;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,IAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,qBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,iBAAA,GAAAR,sBAAA,CAAAC,OAAA;AAAkD,SAAAD,uBAAAS,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAGlD,MAAMG,gBAAgB,GAAIC,KAAoD,IAAK;EACjF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGH,KAAK;EAE5D,MAAM;IAAEI;EAAO,CAAC,GAAG,IAAAC,sBAAa,GAAE;EAElC,oBACEnB,MAAA,CAAAY,OAAA,CAAAQ,aAAA,CAACX,iBAAA,CAAAG,OAAgB,EAAKE,KAAK,eACzBd,MAAA,CAAAY,OAAA,CAAAQ,aAAA,CAAChB,IAAA,CAAAQ,OAAG;IAACS,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,eAAe,EAAEN,MAAM,CAACO,EAAE,CAACC,mBAAmB,CAACT,OAAO,CAAC,CAACU,OAAO,CAACC;EAAW,gBACvG5B,MAAA,CAAAY,OAAA,CAAAQ,aAAA,CAACd,SAAA,CAAAM,OAAQ;IAACiB,aAAa,EAAE,GAAI;IAACd,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBACvEhB,MAAA,CAAAY,OAAA,CAAAQ,aAAA,CAACf,qBAAA,CAAAO,OAAoB;IAACkB,MAAM,EAAE;MAAEC,GAAG,EAAE,IAAAC,0CAA8B,EAAClB,KAAK,CAACmB,OAAO;IAAE,CAAE;IAACZ,KAAK,EAAEC,MAAM,CAACY;EAAM,EAAG,CACpG,EACVpB,KAAK,CAACqB,QAAQ,CACX,CACW;AAEvB,CAAC;AAED,MAAMb,MAAM,GAAG,IAAAc,yBAAgB,EAAC;EAC9Bb,SAAS,EAAE;IACTc,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDJ,KAAK,EAAE;IACLK,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXJ,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAAC,IAAAI,QAAA,GAEY7B,gBAAgB;AAAA8B,OAAA,CAAA/B,OAAA,GAAA8B,QAAA"}
|
|
@@ -22,7 +22,7 @@ const VideoFileMessage = props => {
|
|
|
22
22
|
const {
|
|
23
23
|
colors
|
|
24
24
|
} = (0, _useUIKitTheme.default)();
|
|
25
|
-
const uri = (0, _uikitUtils.
|
|
25
|
+
const uri = (0, _uikitUtils.getThumbnailUriFromFileMessage)(props.message);
|
|
26
26
|
return /*#__PURE__*/_react.default.createElement(_MessageContainer.default, props, /*#__PURE__*/_react.default.createElement(_Box.default, {
|
|
27
27
|
style: styles.container,
|
|
28
28
|
backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background
|
|
@@ -32,7 +32,7 @@ const VideoFileMessage = props => {
|
|
|
32
32
|
onLongPress: onLongPress
|
|
33
33
|
}, /*#__PURE__*/_react.default.createElement(_VideoThumbnail.VideoThumbnail, {
|
|
34
34
|
style: styles.image,
|
|
35
|
-
|
|
35
|
+
source: uri,
|
|
36
36
|
fetchThumbnailFromVideoSource: props.fetchThumbnailFromVideoSource
|
|
37
37
|
})), props.children));
|
|
38
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_uikitUtils","_Box","_PressBox","_VideoThumbnail","_createStyleSheet","_useUIKitTheme","_MessageContainer","obj","__esModule","default","VideoFileMessage","props","onPress","onLongPress","variant","colors","useUIKitTheme","uri","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_uikitUtils","_Box","_PressBox","_VideoThumbnail","_createStyleSheet","_useUIKitTheme","_MessageContainer","obj","__esModule","default","VideoFileMessage","props","onPress","onLongPress","variant","colors","useUIKitTheme","uri","getThumbnailUriFromFileMessage","message","createElement","style","styles","container","backgroundColor","ui","groupChannelMessage","enabled","background","activeOpacity","VideoThumbnail","image","source","fetchThumbnailFromVideoSource","children","createStyleSheet","borderRadius","overflow","maxWidth","width","height","playIcon","padding","_default","exports"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport PressBox from '../../components/PressBox';\nimport { VideoThumbnail } from '../../components/VideoThumbnail';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<\n SendbirdFileMessage,\n { fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null> }\n>;\n\nconst VideoFileMessage = (props: Props) => {\n const { onPress, onLongPress, variant = 'incoming' } = props;\n\n const { colors } = useUIKitTheme();\n const uri = getThumbnailUriFromFileMessage(props.message);\n\n return (\n <MessageContainer {...props}>\n <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>\n <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n <VideoThumbnail\n style={styles.image}\n source={uri}\n fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}\n />\n </PressBox>\n {props.children}\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n borderRadius: 16,\n overflow: 'hidden',\n },\n image: {\n maxWidth: 240,\n width: 240,\n height: 160,\n borderRadius: 16,\n overflow: 'hidden',\n },\n playIcon: {\n padding: 10,\n borderRadius: 50,\n },\n});\nexport default VideoFileMessage;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,IAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,SAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,iBAAA,GAAAR,sBAAA,CAAAC,OAAA;AAAkD,SAAAD,uBAAAS,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQlD,MAAMG,gBAAgB,GAAIC,KAAY,IAAK;EACzC,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGH,KAAK;EAE5D,MAAM;IAAEI;EAAO,CAAC,GAAG,IAAAC,sBAAa,GAAE;EAClC,MAAMC,GAAG,GAAG,IAAAC,0CAA8B,EAACP,KAAK,CAACQ,OAAO,CAAC;EAEzD,oBACEtB,MAAA,CAAAY,OAAA,CAAAW,aAAA,CAACd,iBAAA,CAAAG,OAAgB,EAAKE,KAAK,eACzBd,MAAA,CAAAY,OAAA,CAAAW,aAAA,CAACnB,IAAA,CAAAQ,OAAG;IAACY,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,eAAe,EAAET,MAAM,CAACU,EAAE,CAACC,mBAAmB,CAACZ,OAAO,CAAC,CAACa,OAAO,CAACC;EAAW,gBACvG/B,MAAA,CAAAY,OAAA,CAAAW,aAAA,CAAClB,SAAA,CAAAO,OAAQ;IAACoB,aAAa,EAAE,GAAI;IAACjB,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBACvEhB,MAAA,CAAAY,OAAA,CAAAW,aAAA,CAACjB,eAAA,CAAA2B,cAAc;IACbT,KAAK,EAAEC,MAAM,CAACS,KAAM;IACpBC,MAAM,EAAEf,GAAI;IACZgB,6BAA6B,EAAEtB,KAAK,CAACsB;EAA8B,EACnE,CACO,EACVtB,KAAK,CAACuB,QAAQ,CACX,CACW;AAEvB,CAAC;AAED,MAAMZ,MAAM,GAAG,IAAAa,yBAAgB,EAAC;EAC9BZ,SAAS,EAAE;IACTa,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDN,KAAK,EAAE;IACLO,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXJ,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDI,QAAQ,EAAE;IACRC,OAAO,EAAE,EAAE;IACXN,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAAC,IAAAO,QAAA,GACYjC,gBAAgB;AAAAkC,OAAA,CAAAnC,OAAA,GAAAkC,QAAA"}
|
|
@@ -18,7 +18,7 @@ const ImageFileMessage = props => {
|
|
|
18
18
|
onLongPress,
|
|
19
19
|
...rest
|
|
20
20
|
} = props;
|
|
21
|
-
const uri = (0, _uikitUtils.
|
|
21
|
+
const uri = (0, _uikitUtils.getThumbnailUriFromFileMessage)(props.message);
|
|
22
22
|
return /*#__PURE__*/_react.default.createElement(_MessageContainer.default, rest, /*#__PURE__*/_react.default.createElement(_Box.default, {
|
|
23
23
|
borderRadius: 8,
|
|
24
24
|
overflow: 'hidden',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_uikitUtils","_Box","_ImageWithPlaceholder","_PressBox","_createStyleSheet","_MessageContainer","obj","__esModule","default","ImageFileMessage","props","onPress","onLongPress","rest","uri","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_uikitUtils","_Box","_ImageWithPlaceholder","_PressBox","_createStyleSheet","_MessageContainer","obj","__esModule","default","ImageFileMessage","props","onPress","onLongPress","rest","uri","getThumbnailUriFromFileMessage","message","createElement","borderRadius","overflow","style","styles","container","activeOpacity","source","width","height","createStyleSheet","maxWidth","_default","exports"],"sources":["Message.file.image.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\nconst ImageFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage>) => {\n const { onPress, onLongPress, ...rest } = props;\n const uri = getThumbnailUriFromFileMessage(props.message);\n return (\n <MessageContainer {...rest}>\n <Box borderRadius={8} overflow={'hidden'} style={styles.container}>\n <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n <ImageWithPlaceholder source={{ uri }} width={'100%'} height={'100%'} />\n </PressBox>\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n maxWidth: 296,\n height: 196,\n },\n});\n\nexport default ImageFileMessage;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,IAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,qBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,iBAAA,GAAAP,sBAAA,CAAAC,OAAA;AAAkD,SAAAD,uBAAAQ,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAGlD,MAAMG,gBAAgB,GAAIC,KAAmD,IAAK;EAChF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC/C,MAAMI,GAAG,GAAG,IAAAC,0CAA8B,EAACL,KAAK,CAACM,OAAO,CAAC;EACzD,oBACEnB,MAAA,CAAAW,OAAA,CAAAS,aAAA,CAACZ,iBAAA,CAAAG,OAAgB,EAAKK,IAAI,eACxBhB,MAAA,CAAAW,OAAA,CAAAS,aAAA,CAAChB,IAAA,CAAAO,OAAG;IAACU,YAAY,EAAE,CAAE;IAACC,QAAQ,EAAE,QAAS;IAACC,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAChEzB,MAAA,CAAAW,OAAA,CAAAS,aAAA,CAACd,SAAA,CAAAK,OAAQ;IAACY,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,aAAa,EAAE,GAAI;IAACZ,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBAChGf,MAAA,CAAAW,OAAA,CAAAS,aAAA,CAACf,qBAAA,CAAAM,OAAoB;IAACgB,MAAM,EAAE;MAAEV;IAAI,CAAE;IAACW,KAAK,EAAE,MAAO;IAACC,MAAM,EAAE;EAAO,EAAG,CAC/D,CACP,CACW;AAEvB,CAAC;AAED,MAAML,MAAM,GAAG,IAAAM,yBAAgB,EAAC;EAC9BL,SAAS,EAAE;IACTM,QAAQ,EAAE,GAAG;IACbF,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAAC,IAAAG,QAAA,GAEYpB,gBAAgB;AAAAqB,OAAA,CAAAtB,OAAA,GAAAqB,QAAA"}
|
|
@@ -17,7 +17,7 @@ const VideoFileMessage = props => {
|
|
|
17
17
|
onLongPress,
|
|
18
18
|
...rest
|
|
19
19
|
} = props;
|
|
20
|
-
const uri = (0, _uikitUtils.
|
|
20
|
+
const uri = (0, _uikitUtils.getThumbnailUriFromFileMessage)(props.message);
|
|
21
21
|
return /*#__PURE__*/_react.default.createElement(_MessageContainer.default, rest, /*#__PURE__*/_react.default.createElement(_PressBox.default, {
|
|
22
22
|
style: styles.container,
|
|
23
23
|
activeOpacity: 0.8,
|
|
@@ -25,7 +25,7 @@ const VideoFileMessage = props => {
|
|
|
25
25
|
onLongPress: onLongPress
|
|
26
26
|
}, /*#__PURE__*/_react.default.createElement(_VideoThumbnail.VideoThumbnail, {
|
|
27
27
|
style: styles.container,
|
|
28
|
-
|
|
28
|
+
source: uri,
|
|
29
29
|
fetchThumbnailFromVideoSource: props.fetchThumbnailFromVideoSource
|
|
30
30
|
})));
|
|
31
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_uikitUtils","_PressBox","_VideoThumbnail","_createStyleSheet","_MessageContainer","obj","__esModule","default","VideoFileMessage","props","onPress","onLongPress","rest","uri","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_uikitUtils","_PressBox","_VideoThumbnail","_createStyleSheet","_MessageContainer","obj","__esModule","default","VideoFileMessage","props","onPress","onLongPress","rest","uri","getThumbnailUriFromFileMessage","message","createElement","style","styles","container","activeOpacity","VideoThumbnail","source","fetchThumbnailFromVideoSource","createStyleSheet","maxWidth","height","borderRadius","overflow","iconContainer","position","width","playIcon","padding","_default","exports"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport PressBox from '../../components/PressBox';\nimport { VideoThumbnail } from '../../components/VideoThumbnail';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {\n fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n};\n\nconst VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {\n const { onPress, onLongPress, ...rest } = props;\n const uri = getThumbnailUriFromFileMessage(props.message);\n\n return (\n <MessageContainer {...rest}>\n <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n <VideoThumbnail\n style={styles.container}\n source={uri}\n fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}\n />\n </PressBox>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n maxWidth: 296,\n height: 196,\n borderRadius: 8,\n overflow: 'hidden',\n },\n iconContainer: {\n position: 'absolute',\n width: '100%',\n height: '100%',\n },\n playIcon: {\n padding: 10,\n borderRadius: 50,\n },\n});\nexport default VideoFileMessage;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AAAkD,SAAAD,uBAAAO,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAOlD,MAAMG,gBAAgB,GAAIC,KAA0D,IAAK;EACvF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC/C,MAAMI,GAAG,GAAG,IAAAC,0CAA8B,EAACL,KAAK,CAACM,OAAO,CAAC;EAEzD,oBACElB,MAAA,CAAAU,OAAA,CAAAS,aAAA,CAACZ,iBAAA,CAAAG,OAAgB,EAAKK,IAAI,eACxBf,MAAA,CAAAU,OAAA,CAAAS,aAAA,CAACf,SAAA,CAAAM,OAAQ;IAACU,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,aAAa,EAAE,GAAI;IAACV,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBAChGd,MAAA,CAAAU,OAAA,CAAAS,aAAA,CAACd,eAAA,CAAAmB,cAAc;IACbJ,KAAK,EAAEC,MAAM,CAACC,SAAU;IACxBG,MAAM,EAAET,GAAI;IACZU,6BAA6B,EAAEd,KAAK,CAACc;EAA8B,EACnE,CACO,CACM;AAEvB,CAAC;AAED,MAAML,MAAM,GAAG,IAAAM,yBAAgB,EAAC;EAC9BL,SAAS,EAAE;IACTM,QAAQ,EAAE,GAAG;IACbC,MAAM,EAAE,GAAG;IACXC,YAAY,EAAE,CAAC;IACfC,QAAQ,EAAE;EACZ,CAAC;EACDC,aAAa,EAAE;IACbC,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,MAAM;IACbL,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRC,OAAO,EAAE,EAAE;IACXN,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAAC,IAAAO,QAAA,GACY1B,gBAAgB;AAAA2B,OAAA,CAAA5B,OAAA,GAAA2B,QAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { StyleSheet } from 'react-native';
|
|
3
|
+
import { isImage } from '@sendbird/uikit-utils';
|
|
3
4
|
import createStyleSheet from '../../styles/createStyleSheet';
|
|
4
5
|
import useUIKitTheme from '../../theme/useUIKitTheme';
|
|
5
6
|
import Box from '../Box';
|
|
@@ -9,6 +10,7 @@ export const VideoThumbnail = _ref => {
|
|
|
9
10
|
let {
|
|
10
11
|
fetchThumbnailFromVideoSource,
|
|
11
12
|
style,
|
|
13
|
+
source,
|
|
12
14
|
videoSource,
|
|
13
15
|
iconSize = 28
|
|
14
16
|
} = _ref;
|
|
@@ -19,7 +21,12 @@ export const VideoThumbnail = _ref => {
|
|
|
19
21
|
const {
|
|
20
22
|
thumbnail,
|
|
21
23
|
loading
|
|
22
|
-
} = useRetry(() =>
|
|
24
|
+
} = useRetry(async () => {
|
|
25
|
+
if (isImage(source ?? videoSource)) return {
|
|
26
|
+
path: source ?? videoSource
|
|
27
|
+
};
|
|
28
|
+
return fetchThumbnailFromVideoSource(source ?? videoSource);
|
|
29
|
+
});
|
|
23
30
|
return /*#__PURE__*/React.createElement(Box, {
|
|
24
31
|
style: style
|
|
25
32
|
}, loading ? /*#__PURE__*/React.createElement(Box, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useRef","useState","StyleSheet","createStyleSheet","useUIKitTheme","Box","Icon","ImageWithPlaceholder","VideoThumbnail","_ref","fetchThumbnailFromVideoSource","style","videoSource","iconSize","palette","select","thumbnail","loading","useRetry","createElement","absoluteFill","backgroundColor","dark","background400","light","background100","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","useState","StyleSheet","isImage","createStyleSheet","useUIKitTheme","Box","Icon","ImageWithPlaceholder","VideoThumbnail","_ref","fetchThumbnailFromVideoSource","style","source","videoSource","iconSize","palette","select","thumbnail","loading","useRetry","path","createElement","absoluteFill","backgroundColor","dark","background400","light","background100","uri","alignItems","justifyContent","icon","size","color","onBackgroundLight02","containerStyle","styles","playIcon","onBackgroundDark01","fetch","retryCount","arguments","length","undefined","state","setState","retryCountRef","fetchThumbnail","current","_timeout","_cancelled","tryFetchThumbnail","timeout","retry","finish","setTimeout","then","result","catch","clearTimeout","padding","borderRadius"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { isImage } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport ImageWithPlaceholder from '../ImageWithPlaceholder';\n\ntype Props = {\n source: string;\n fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n\n style?: StyleProp<ViewStyle>;\n iconSize?: number;\n /** @deprecated please use `source` prop **/\n videoSource?: string;\n};\n\nexport const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize = 28 }: Props) => {\n const { palette, select } = useUIKitTheme();\n const { thumbnail, loading } = useRetry(async () => {\n if (isImage(source ?? videoSource)) return { path: source ?? videoSource };\n return fetchThumbnailFromVideoSource(source ?? videoSource);\n });\n\n return (\n <Box style={style}>\n {loading ? (\n <Box\n style={StyleSheet.absoluteFill}\n backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n />\n ) : (\n <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />\n )}\n\n {(loading || thumbnail !== null) && iconSize > 0 && (\n <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>\n <Icon\n icon={'play'}\n size={iconSize}\n color={palette.onBackgroundLight02}\n containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}\n />\n </Box>\n )}\n </Box>\n );\n};\n\nconst useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {\n const [state, setState] = useState({ thumbnail: null as null | string, loading: true });\n const retryCountRef = useRef(0);\n const fetchThumbnail = useRef(fetch);\n fetchThumbnail.current = fetch;\n\n useEffect(() => {\n let _timeout: NodeJS.Timeout;\n let _cancelled = false;\n\n if (!state.thumbnail) {\n const tryFetchThumbnail = (timeout: number) => {\n const retry = () => {\n retryCountRef.current++;\n tryFetchThumbnail(timeout + 5000);\n };\n\n const finish = (path: string | null) => {\n if (!_cancelled) setState({ loading: false, thumbnail: path });\n };\n\n if (retryCountRef.current < retryCount) {\n _timeout = setTimeout(() => {\n fetchThumbnail\n .current()\n .then((result) => {\n if (result === null) retry();\n else finish(result.path);\n })\n .catch(() => retry());\n }, timeout);\n } else {\n finish(null);\n }\n };\n\n tryFetchThumbnail(0);\n }\n\n return () => {\n _cancelled = true;\n clearTimeout(_timeout);\n };\n }, [state.thumbnail]);\n\n return state;\n};\n\nconst styles = createStyleSheet({\n playIcon: {\n padding: 10,\n borderRadius: 50,\n },\n});\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
|
|
3
3
|
import Box from '../../components/Box';
|
|
4
4
|
import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
|
|
5
5
|
import PressBox from '../../components/PressBox';
|
|
@@ -24,7 +24,7 @@ const ImageFileMessage = props => {
|
|
|
24
24
|
onLongPress: onLongPress
|
|
25
25
|
}, /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
|
|
26
26
|
source: {
|
|
27
|
-
uri:
|
|
27
|
+
uri: getThumbnailUriFromFileMessage(props.message)
|
|
28
28
|
},
|
|
29
29
|
style: styles.image
|
|
30
30
|
})), props.children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","getThumbnailUriFromFileMessage","Box","ImageWithPlaceholder","PressBox","createStyleSheet","useUIKitTheme","MessageContainer","ImageFileMessage","props","onPress","onLongPress","variant","colors","createElement","style","styles","container","backgroundColor","ui","groupChannelMessage","enabled","background","activeOpacity","source","uri","message","image","children","borderRadius","overflow","maxWidth","width","height"],"sources":["Message.file.image.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nconst ImageFileMessage = (props: GroupChannelMessageProps<SendbirdFileMessage>) => {\n const { onPress, onLongPress, variant = 'incoming' } = props;\n\n const { colors } = useUIKitTheme();\n\n return (\n <MessageContainer {...props}>\n <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>\n <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n <ImageWithPlaceholder source={{ uri: getThumbnailUriFromFileMessage(props.message) }} style={styles.image} />\n </PressBox>\n {props.children}\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n borderRadius: 16,\n overflow: 'hidden',\n },\n image: {\n maxWidth: 240,\n width: 240,\n height: 160,\n borderRadius: 16,\n overflow: 'hidden',\n },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,oBAAoB,MAAM,uCAAuC;AACxE,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,gBAAgB,MAAM,oBAAoB;AAGjD,MAAMC,gBAAgB,GAAIC,KAAoD,IAAK;EACjF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGH,KAAK;EAE5D,MAAM;IAAEI;EAAO,CAAC,GAAGP,aAAa,EAAE;EAElC,oBACEN,KAAA,CAAAc,aAAA,CAACP,gBAAgB,EAAKE,KAAK,eACzBT,KAAA,CAAAc,aAAA,CAACZ,GAAG;IAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,eAAe,EAAEL,MAAM,CAACM,EAAE,CAACC,mBAAmB,CAACR,OAAO,CAAC,CAACS,OAAO,CAACC;EAAW,gBACvGtB,KAAA,CAAAc,aAAA,CAACV,QAAQ;IAACmB,aAAa,EAAE,GAAI;IAACb,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBACvEX,KAAA,CAAAc,aAAA,CAACX,oBAAoB;IAACqB,MAAM,EAAE;MAAEC,GAAG,EAAExB,8BAA8B,CAACQ,KAAK,CAACiB,OAAO;IAAE,CAAE;IAACX,KAAK,EAAEC,MAAM,CAACW;EAAM,EAAG,CACpG,EACVlB,KAAK,CAACmB,QAAQ,CACX,CACW;AAEvB,CAAC;AAED,MAAMZ,MAAM,GAAGX,gBAAgB,CAAC;EAC9BY,SAAS,EAAE;IACTY,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDH,KAAK,EAAE;IACLI,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXJ,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAetB,gBAAgB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
|
|
3
3
|
import Box from '../../components/Box';
|
|
4
4
|
import PressBox from '../../components/PressBox';
|
|
5
5
|
import { VideoThumbnail } from '../../components/VideoThumbnail';
|
|
@@ -15,7 +15,7 @@ const VideoFileMessage = props => {
|
|
|
15
15
|
const {
|
|
16
16
|
colors
|
|
17
17
|
} = useUIKitTheme();
|
|
18
|
-
const uri =
|
|
18
|
+
const uri = getThumbnailUriFromFileMessage(props.message);
|
|
19
19
|
return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(Box, {
|
|
20
20
|
style: styles.container,
|
|
21
21
|
backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background
|
|
@@ -25,7 +25,7 @@ const VideoFileMessage = props => {
|
|
|
25
25
|
onLongPress: onLongPress
|
|
26
26
|
}, /*#__PURE__*/React.createElement(VideoThumbnail, {
|
|
27
27
|
style: styles.image,
|
|
28
|
-
|
|
28
|
+
source: uri,
|
|
29
29
|
fetchThumbnailFromVideoSource: props.fetchThumbnailFromVideoSource
|
|
30
30
|
})), props.children));
|
|
31
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","getThumbnailUriFromFileMessage","Box","PressBox","VideoThumbnail","createStyleSheet","useUIKitTheme","MessageContainer","VideoFileMessage","props","onPress","onLongPress","variant","colors","uri","message","createElement","style","styles","container","backgroundColor","ui","groupChannelMessage","enabled","background","activeOpacity","image","source","fetchThumbnailFromVideoSource","children","borderRadius","overflow","maxWidth","width","height","playIcon","padding"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport PressBox from '../../components/PressBox';\nimport { VideoThumbnail } from '../../components/VideoThumbnail';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<\n SendbirdFileMessage,\n { fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null> }\n>;\n\nconst VideoFileMessage = (props: Props) => {\n const { onPress, onLongPress, variant = 'incoming' } = props;\n\n const { colors } = useUIKitTheme();\n const uri = getThumbnailUriFromFileMessage(props.message);\n\n return (\n <MessageContainer {...props}>\n <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>\n <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n <VideoThumbnail\n style={styles.image}\n source={uri}\n fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}\n />\n </PressBox>\n {props.children}\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n borderRadius: 16,\n overflow: 'hidden',\n },\n image: {\n maxWidth: 240,\n width: 240,\n height: 160,\n borderRadius: 16,\n overflow: 'hidden',\n },\n playIcon: {\n padding: 10,\n borderRadius: 50,\n },\n});\nexport default VideoFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,gBAAgB,MAAM,oBAAoB;AAQjD,MAAMC,gBAAgB,GAAIC,KAAY,IAAK;EACzC,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGH,KAAK;EAE5D,MAAM;IAAEI;EAAO,CAAC,GAAGP,aAAa,EAAE;EAClC,MAAMQ,GAAG,GAAGb,8BAA8B,CAACQ,KAAK,CAACM,OAAO,CAAC;EAEzD,oBACEf,KAAA,CAAAgB,aAAA,CAACT,gBAAgB,EAAKE,KAAK,eACzBT,KAAA,CAAAgB,aAAA,CAACd,GAAG;IAACe,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,eAAe,EAAEP,MAAM,CAACQ,EAAE,CAACC,mBAAmB,CAACV,OAAO,CAAC,CAACW,OAAO,CAACC;EAAW,gBACvGxB,KAAA,CAAAgB,aAAA,CAACb,QAAQ;IAACsB,aAAa,EAAE,GAAI;IAACf,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBACvEX,KAAA,CAAAgB,aAAA,CAACZ,cAAc;IACba,KAAK,EAAEC,MAAM,CAACQ,KAAM;IACpBC,MAAM,EAAEb,GAAI;IACZc,6BAA6B,EAAEnB,KAAK,CAACmB;EAA8B,EACnE,CACO,EACVnB,KAAK,CAACoB,QAAQ,CACX,CACW;AAEvB,CAAC;AAED,MAAMX,MAAM,GAAGb,gBAAgB,CAAC;EAC9Bc,SAAS,EAAE;IACTW,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDL,KAAK,EAAE;IACLM,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXJ,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDI,QAAQ,EAAE;IACRC,OAAO,EAAE,EAAE;IACXN,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AACF,eAAetB,gBAAgB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
|
|
3
3
|
import Box from '../../components/Box';
|
|
4
4
|
import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
|
|
5
5
|
import PressBox from '../../components/PressBox';
|
|
@@ -11,7 +11,7 @@ const ImageFileMessage = props => {
|
|
|
11
11
|
onLongPress,
|
|
12
12
|
...rest
|
|
13
13
|
} = props;
|
|
14
|
-
const uri =
|
|
14
|
+
const uri = getThumbnailUriFromFileMessage(props.message);
|
|
15
15
|
return /*#__PURE__*/React.createElement(MessageContainer, rest, /*#__PURE__*/React.createElement(Box, {
|
|
16
16
|
borderRadius: 8,
|
|
17
17
|
overflow: 'hidden',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","getThumbnailUriFromFileMessage","Box","ImageWithPlaceholder","PressBox","createStyleSheet","MessageContainer","ImageFileMessage","props","onPress","onLongPress","rest","uri","message","createElement","borderRadius","overflow","style","styles","container","activeOpacity","source","width","height","maxWidth"],"sources":["Message.file.image.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\nconst ImageFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage>) => {\n const { onPress, onLongPress, ...rest } = props;\n const uri = getThumbnailUriFromFileMessage(props.message);\n return (\n <MessageContainer {...rest}>\n <Box borderRadius={8} overflow={'hidden'} style={styles.container}>\n <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n <ImageWithPlaceholder source={{ uri }} width={'100%'} height={'100%'} />\n </PressBox>\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n maxWidth: 296,\n height: 196,\n },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,oBAAoB,MAAM,uCAAuC;AACxE,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,gBAAgB,MAAM,oBAAoB;AAGjD,MAAMC,gBAAgB,GAAIC,KAAmD,IAAK;EAChF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC/C,MAAMI,GAAG,GAAGX,8BAA8B,CAACO,KAAK,CAACK,OAAO,CAAC;EACzD,oBACEb,KAAA,CAAAc,aAAA,CAACR,gBAAgB,EAAKK,IAAI,eACxBX,KAAA,CAAAc,aAAA,CAACZ,GAAG;IAACa,YAAY,EAAE,CAAE;IAACC,QAAQ,EAAE,QAAS;IAACC,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAChEnB,KAAA,CAAAc,aAAA,CAACV,QAAQ;IAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,aAAa,EAAE,GAAI;IAACX,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBAChGV,KAAA,CAAAc,aAAA,CAACX,oBAAoB;IAACkB,MAAM,EAAE;MAAET;IAAI,CAAE;IAACU,KAAK,EAAE,MAAO;IAACC,MAAM,EAAE;EAAO,EAAG,CAC/D,CACP,CACW;AAEvB,CAAC;AAED,MAAML,MAAM,GAAGb,gBAAgB,CAAC;EAC9Bc,SAAS,EAAE;IACTK,QAAQ,EAAE,GAAG;IACbD,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAehB,gBAAgB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
|
|
3
3
|
import PressBox from '../../components/PressBox';
|
|
4
4
|
import { VideoThumbnail } from '../../components/VideoThumbnail';
|
|
5
5
|
import createStyleSheet from '../../styles/createStyleSheet';
|
|
@@ -10,7 +10,7 @@ const VideoFileMessage = props => {
|
|
|
10
10
|
onLongPress,
|
|
11
11
|
...rest
|
|
12
12
|
} = props;
|
|
13
|
-
const uri =
|
|
13
|
+
const uri = getThumbnailUriFromFileMessage(props.message);
|
|
14
14
|
return /*#__PURE__*/React.createElement(MessageContainer, rest, /*#__PURE__*/React.createElement(PressBox, {
|
|
15
15
|
style: styles.container,
|
|
16
16
|
activeOpacity: 0.8,
|
|
@@ -18,7 +18,7 @@ const VideoFileMessage = props => {
|
|
|
18
18
|
onLongPress: onLongPress
|
|
19
19
|
}, /*#__PURE__*/React.createElement(VideoThumbnail, {
|
|
20
20
|
style: styles.container,
|
|
21
|
-
|
|
21
|
+
source: uri,
|
|
22
22
|
fetchThumbnailFromVideoSource: props.fetchThumbnailFromVideoSource
|
|
23
23
|
})));
|
|
24
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","getThumbnailUriFromFileMessage","PressBox","VideoThumbnail","createStyleSheet","MessageContainer","VideoFileMessage","props","onPress","onLongPress","rest","uri","message","createElement","style","styles","container","activeOpacity","source","fetchThumbnailFromVideoSource","maxWidth","height","borderRadius","overflow","iconContainer","position","width","playIcon","padding"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport PressBox from '../../components/PressBox';\nimport { VideoThumbnail } from '../../components/VideoThumbnail';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {\n fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n};\n\nconst VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {\n const { onPress, onLongPress, ...rest } = props;\n const uri = getThumbnailUriFromFileMessage(props.message);\n\n return (\n <MessageContainer {...rest}>\n <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n <VideoThumbnail\n style={styles.container}\n source={uri}\n fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}\n />\n </PressBox>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n maxWidth: 296,\n height: 196,\n borderRadius: 8,\n overflow: 'hidden',\n },\n iconContainer: {\n position: 'absolute',\n width: '100%',\n height: '100%',\n },\n playIcon: {\n padding: 10,\n borderRadius: 50,\n },\n});\nexport default VideoFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,gBAAgB,MAAM,oBAAoB;AAOjD,MAAMC,gBAAgB,GAAIC,KAA0D,IAAK;EACvF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC/C,MAAMI,GAAG,GAAGV,8BAA8B,CAACM,KAAK,CAACK,OAAO,CAAC;EAEzD,oBACEZ,KAAA,CAAAa,aAAA,CAACR,gBAAgB,EAAKK,IAAI,eACxBV,KAAA,CAAAa,aAAA,CAACX,QAAQ;IAACY,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,aAAa,EAAE,GAAI;IAACT,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBAChGT,KAAA,CAAAa,aAAA,CAACV,cAAc;IACbW,KAAK,EAAEC,MAAM,CAACC,SAAU;IACxBE,MAAM,EAAEP,GAAI;IACZQ,6BAA6B,EAAEZ,KAAK,CAACY;EAA8B,EACnE,CACO,CACM;AAEvB,CAAC;AAED,MAAMJ,MAAM,GAAGX,gBAAgB,CAAC;EAC9BY,SAAS,EAAE;IACTI,QAAQ,EAAE,GAAG;IACbC,MAAM,EAAE,GAAG;IACXC,YAAY,EAAE,CAAC;IACfC,QAAQ,EAAE;EACZ,CAAC;EACDC,aAAa,EAAE;IACbC,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,MAAM;IACbL,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRC,OAAO,EAAE,EAAE;IACXN,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AACF,eAAehB,gBAAgB"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { StyleProp, ViewStyle } from 'react-native';
|
|
2
2
|
type Props = {
|
|
3
|
-
|
|
3
|
+
source: string;
|
|
4
4
|
fetchThumbnailFromVideoSource: (uri: string) => Promise<{
|
|
5
5
|
path: string;
|
|
6
6
|
} | null>;
|
|
7
7
|
style?: StyleProp<ViewStyle>;
|
|
8
8
|
iconSize?: number;
|
|
9
|
+
/** @deprecated please use `source` prop **/
|
|
10
|
+
videoSource?: string;
|
|
9
11
|
};
|
|
10
|
-
export declare const VideoThumbnail: ({ fetchThumbnailFromVideoSource, style, videoSource, iconSize }: Props) => JSX.Element;
|
|
12
|
+
export declare const VideoThumbnail: ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize }: Props) => JSX.Element;
|
|
11
13
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sendbird/uikit-react-native-foundation",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.2",
|
|
4
4
|
"description": "A foundational UI kit for building chat-enabled React Native apps.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sendbird",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@sendbird/uikit-utils": "3.1.
|
|
50
|
+
"@sendbird/uikit-utils": "3.1.2"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@types/react": "*",
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
"readmeFile": "./README.md",
|
|
90
90
|
"displayName": "@sendbird/uikit-react-native-foundation"
|
|
91
91
|
},
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "49d482105f9e2bc0643916682126935747a84011"
|
|
93
93
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
|
|
3
3
|
|
|
4
|
+
import { isImage } from '@sendbird/uikit-utils';
|
|
5
|
+
|
|
4
6
|
import createStyleSheet from '../../styles/createStyleSheet';
|
|
5
7
|
import useUIKitTheme from '../../theme/useUIKitTheme';
|
|
6
8
|
import Box from '../Box';
|
|
@@ -8,16 +10,21 @@ import Icon from '../Icon';
|
|
|
8
10
|
import ImageWithPlaceholder from '../ImageWithPlaceholder';
|
|
9
11
|
|
|
10
12
|
type Props = {
|
|
11
|
-
|
|
13
|
+
source: string;
|
|
12
14
|
fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
|
|
13
15
|
|
|
14
16
|
style?: StyleProp<ViewStyle>;
|
|
15
17
|
iconSize?: number;
|
|
18
|
+
/** @deprecated please use `source` prop **/
|
|
19
|
+
videoSource?: string;
|
|
16
20
|
};
|
|
17
21
|
|
|
18
|
-
export const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, videoSource, iconSize = 28 }: Props) => {
|
|
22
|
+
export const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize = 28 }: Props) => {
|
|
19
23
|
const { palette, select } = useUIKitTheme();
|
|
20
|
-
const { thumbnail, loading } = useRetry(() =>
|
|
24
|
+
const { thumbnail, loading } = useRetry(async () => {
|
|
25
|
+
if (isImage(source ?? videoSource)) return { path: source ?? videoSource };
|
|
26
|
+
return fetchThumbnailFromVideoSource(source ?? videoSource);
|
|
27
|
+
});
|
|
21
28
|
|
|
22
29
|
return (
|
|
23
30
|
<Box style={style}>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
|
|
4
|
-
import {
|
|
4
|
+
import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
|
|
5
5
|
|
|
6
6
|
import Box from '../../components/Box';
|
|
7
7
|
import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
|
|
@@ -20,7 +20,7 @@ const ImageFileMessage = (props: GroupChannelMessageProps<SendbirdFileMessage>)
|
|
|
20
20
|
<MessageContainer {...props}>
|
|
21
21
|
<Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>
|
|
22
22
|
<PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
|
|
23
|
-
<ImageWithPlaceholder source={{ uri:
|
|
23
|
+
<ImageWithPlaceholder source={{ uri: getThumbnailUriFromFileMessage(props.message) }} style={styles.image} />
|
|
24
24
|
</PressBox>
|
|
25
25
|
{props.children}
|
|
26
26
|
</Box>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
|
|
4
|
-
import {
|
|
4
|
+
import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
|
|
5
5
|
|
|
6
6
|
import Box from '../../components/Box';
|
|
7
7
|
import PressBox from '../../components/PressBox';
|
|
@@ -20,7 +20,7 @@ const VideoFileMessage = (props: Props) => {
|
|
|
20
20
|
const { onPress, onLongPress, variant = 'incoming' } = props;
|
|
21
21
|
|
|
22
22
|
const { colors } = useUIKitTheme();
|
|
23
|
-
const uri =
|
|
23
|
+
const uri = getThumbnailUriFromFileMessage(props.message);
|
|
24
24
|
|
|
25
25
|
return (
|
|
26
26
|
<MessageContainer {...props}>
|
|
@@ -28,7 +28,7 @@ const VideoFileMessage = (props: Props) => {
|
|
|
28
28
|
<PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
|
|
29
29
|
<VideoThumbnail
|
|
30
30
|
style={styles.image}
|
|
31
|
-
|
|
31
|
+
source={uri}
|
|
32
32
|
fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}
|
|
33
33
|
/>
|
|
34
34
|
</PressBox>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
|
|
4
|
-
import {
|
|
4
|
+
import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
|
|
5
5
|
|
|
6
6
|
import Box from '../../components/Box';
|
|
7
7
|
import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
|
|
@@ -12,7 +12,7 @@ import type { OpenChannelMessageProps } from './index';
|
|
|
12
12
|
|
|
13
13
|
const ImageFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage>) => {
|
|
14
14
|
const { onPress, onLongPress, ...rest } = props;
|
|
15
|
-
const uri =
|
|
15
|
+
const uri = getThumbnailUriFromFileMessage(props.message);
|
|
16
16
|
return (
|
|
17
17
|
<MessageContainer {...rest}>
|
|
18
18
|
<Box borderRadius={8} overflow={'hidden'} style={styles.container}>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
|
|
4
|
-
import {
|
|
4
|
+
import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
|
|
5
5
|
|
|
6
6
|
import PressBox from '../../components/PressBox';
|
|
7
7
|
import { VideoThumbnail } from '../../components/VideoThumbnail';
|
|
@@ -15,14 +15,14 @@ type Props = {
|
|
|
15
15
|
|
|
16
16
|
const VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {
|
|
17
17
|
const { onPress, onLongPress, ...rest } = props;
|
|
18
|
-
const uri =
|
|
18
|
+
const uri = getThumbnailUriFromFileMessage(props.message);
|
|
19
19
|
|
|
20
20
|
return (
|
|
21
21
|
<MessageContainer {...rest}>
|
|
22
22
|
<PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
|
|
23
23
|
<VideoThumbnail
|
|
24
24
|
style={styles.container}
|
|
25
|
-
|
|
25
|
+
source={uri}
|
|
26
26
|
fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}
|
|
27
27
|
/>
|
|
28
28
|
</PressBox>
|