@sendbird/uikit-react-native-foundation
Version:
A foundational UI kit for building chat-enabled React Native apps.
112 lines (111 loc) • 4.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VideoThumbnail = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _uikitUtils = require("@sendbird/uikit-utils");
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
var _Box = _interopRequireDefault(require("../Box"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _ImageWithPlaceholder = _interopRequireDefault(require("../ImageWithPlaceholder"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const VideoThumbnail = ({
fetchThumbnailFromVideoSource,
style,
source,
videoSource,
iconSize = 28
}) => {
const {
palette,
select
} = (0, _useUIKitTheme.default)();
const {
thumbnail,
loading
} = useRetry(async () => {
if ((0, _uikitUtils.isImage)(source ?? videoSource)) return {
path: source ?? videoSource
};
return fetchThumbnailFromVideoSource(source ?? videoSource);
});
return /*#__PURE__*/_react.default.createElement(_Box.default, {
style: style
}, loading ? /*#__PURE__*/_react.default.createElement(_Box.default, {
style: _reactNative.StyleSheet.absoluteFill,
backgroundColor: select({
dark: palette.background400,
light: palette.background100
})
}) : /*#__PURE__*/_react.default.createElement(_ImageWithPlaceholder.default, {
source: {
uri: thumbnail ?? 'invalid-image'
},
style: _reactNative.StyleSheet.absoluteFill
}), (loading || thumbnail !== null) && iconSize > 0 && /*#__PURE__*/_react.default.createElement(_Box.default, {
style: _reactNative.StyleSheet.absoluteFill,
alignItems: 'center',
justifyContent: 'center'
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
icon: 'play',
size: iconSize,
color: palette.onBackgroundLight02,
containerStyle: [styles.playIcon, {
backgroundColor: palette.onBackgroundDark01
}]
})));
};
exports.VideoThumbnail = VideoThumbnail;
const useRetry = (fetch, retryCount = 5) => {
const [state, setState] = (0, _react.useState)({
thumbnail: null,
loading: true
});
const retryCountRef = (0, _react.useRef)(0);
const fetchThumbnail = (0, _react.useRef)(fetch);
fetchThumbnail.current = fetch;
(0, _react.useEffect)(() => {
let _timeout;
let _cancelled = false;
if (!state.thumbnail) {
const tryFetchThumbnail = timeout => {
const retry = () => {
retryCountRef.current++;
tryFetchThumbnail(timeout + 5000);
};
const finish = path => {
if (!_cancelled) setState({
loading: false,
thumbnail: path
});
};
if (retryCountRef.current < retryCount) {
_timeout = setTimeout(() => {
fetchThumbnail.current().then(result => {
if (result === null) retry();else finish(result.path);
}).catch(() => retry());
}, timeout);
} else {
finish(null);
}
};
tryFetchThumbnail(0);
}
return () => {
_cancelled = true;
clearTimeout(_timeout);
};
}, [state.thumbnail]);
return state;
};
const styles = (0, _createStyleSheet.default)({
playIcon: {
padding: 10,
borderRadius: 50
}
});
//# sourceMappingURL=index.js.map