@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
65 lines (63 loc) • 3.14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SingleThumbnailView = SingleThumbnailView;
var _reactNative = require("react-native");
var _PlayerContext = require("../../util/PlayerContext");
var _ThumbnailView = require("./ThumbnailView");
var _react = _interopRequireWildcard(require("react"));
var _useThumbnailTrack = require("../../../hooks/useThumbnailTrack");
var _useSeekable = require("../../../hooks/useSeekable");
var _useDuration = require("../../../hooks/useDuration");
var _jsxRuntime = require("react/jsx-runtime");
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); }
/**
* Component for displaying a single preview thumbnail image, sourced from a metadata track containing thumbnail data.
*/
function SingleThumbnailView(props) {
const player = (0, _react.useContext)(_PlayerContext.PlayerContext).player;
const thumbnailTrack = (0, _useThumbnailTrack.useThumbnailTrack)();
const thumbnailSize = (0, _react.useMemo)(() => {
const window = _reactNative.Dimensions.get('window');
return 0.35 * Math.min(window.height, window.width);
}, []);
const seekable = (0, _useSeekable.useSeekable)();
const duration = (0, _useDuration.useDuration)();
if (!thumbnailTrack) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
}
const {
currentTime,
seekBarWidth
} = props;
const marginHorizontal = 8;
const normalizedDuration = isNaN(duration) || !isFinite(duration) ? 0 : Math.max(0, duration);
const seekableRange = {
start: seekable.length > 0 ? seekable[0].start : 0,
end: seekable.length > 0 ? seekable[seekable.length - 1].end : normalizedDuration
};
// Do not let the thumbnail pass left & right borders.
const range = seekableRange.end - seekableRange.start;
const offset = range ? seekBarWidth * (currentTime - seekableRange.start) / range : 0;
let left = -0.5 * thumbnailSize;
if (offset + marginHorizontal < 0.5 * thumbnailSize) {
left = -offset - marginHorizontal;
} else if (offset - marginHorizontal > seekBarWidth - 0.5 * thumbnailSize) {
left = -offset + marginHorizontal + seekBarWidth - thumbnailSize;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
left,
marginHorizontal
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThumbnailView.ThumbnailView, {
thumbnailTrack: thumbnailTrack,
duration: player.duration,
time: currentTime,
size: thumbnailSize,
showTimeLabel: false
})
});
}
//# sourceMappingURL=SingleThumbnailView.js.map