@sendbird/uikit-react-native-foundation
Version:
A foundational UI kit for building chat-enabled React Native apps.
113 lines (112 loc) • 4.29 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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