@livetv-app/tvguide
Version:
An Android TV Live Channels-like Electronic Programme Guide for React DOM and React Native applications.
132 lines (131 loc) • 6.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.styles = exports.ChannelIcon = void 0;
const React = require("react");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_tvfocus_1 = require("react-native-tvfocus");
const constants_1 = require("../constants");
const util_1 = require("../util");
function ChannelRow(props) {
var _a, _b;
const colourscheme = react_native_1.useColorScheme();
const programmes = react_1.useMemo(() => props.programmes.filter(p => p.channel === props.channel.id), [props.programmes, props.channel.id]);
const time = util_1.useCurrentTime();
const now = react_1.useMemo(() => util_1.getProgrammeAtTime(time, programmes), [time, programmes]);
const next = react_1.useMemo(() => {
const next_time = util_1.getNextProgrammeTime(time, programmes);
return next_time ? util_1.getProgrammeAtTime(next_time, programmes) : null;
}, [time, programmes]);
const name = util_1.useLocalised(props.channel.name);
const now_name = util_1.useLocalised(now === null || now === void 0 ? void 0 : now.name);
const next_name = util_1.useLocalised(next === null || next === void 0 ? void 0 : next.name);
return React.createElement(react_native_1.View, { style: [
exports.styles.row,
colourscheme === 'dark' ? exports.styles.rowDark : null,
'first' in props ? props.first ? null : exports.styles.rowNotFirst : null,
] },
React.createElement(react_native_tvfocus_1.TouchableOpacity, { onPress: props.onPress, disabled: !props.onPress, hasTVPreferredFocus: props.tvPreferredFocus, tvParallaxProperties: { shiftDistanceX: 0, tiltAngle: 0 }, style: exports.styles.container },
React.createElement(react_native_1.View, { style: exports.styles.icon },
React.createElement(exports.ChannelIcon, { number: props.channel.number ?
(props.channel.number_group ? props.channel.number_group + '-' : '') + props.channel.number :
'0', icon: ((_a = props.showChannelLogos) !== null && _a !== void 0 ? _a : true) ? props.channel.icon : undefined, renderIcon: ((_b = props.showChannelLogos) !== null && _b !== void 0 ? _b : true) ? props.channel.renderIcon : undefined })),
React.createElement(react_native_1.View, { style: exports.styles.detail },
React.createElement(react_native_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: [
exports.styles.headerText,
colourscheme === 'dark' ? exports.styles.headerTextDark : null,
] }, name),
now ? React.createElement(react_native_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: [
exports.styles.nowNextText, colourscheme === 'dark' ? exports.styles.nowNextTextDark : null,
] }, now_name) : React.createElement(react_native_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: [
exports.styles.nowNextText, colourscheme === 'dark' ? exports.styles.nowNextTextDark : null, exports.styles.noInformation,
] }, "No information"),
next ? React.createElement(react_native_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: [
exports.styles.nowNextText, colourscheme === 'dark' ? exports.styles.nowNextTextDark : null,
] },
util_1.formatTimeShort(next.start),
": ",
next_name) : now ?
React.createElement(react_native_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: [
exports.styles.nowNextText, colourscheme === 'dark' ? exports.styles.nowNextTextDark : null,
] },
util_1.formatTimeShort(now.end),
": ",
React.createElement(react_native_1.Text, { style: exports.styles.noInformation }, "No information"))
: null)));
}
exports.default = React.memo(ChannelRow);
const _ChannelIcon = function ChannelIcon(props) {
const colourscheme = react_native_1.useColorScheme();
const [loaded, setLoaded] = react_1.useState(false);
const [error, setError] = react_1.useState(null);
const hasIcon = props.icon || props.renderIcon;
return React.createElement(React.Fragment, null,
hasIcon && !error ? props.renderIcon ? React.createElement(react_native_1.View, { style: { position: 'absolute', opacity: loaded && !error ? 1 : 0 } }, props.renderIcon.call(null, {
width: constants_1.SCALE * 40,
height: constants_1.SCALE * 40,
onLoad: () => setLoaded(true),
onError: err => (setLoaded(true), setError(err)),
})) : React.createElement(react_native_1.Image, { source: { uri: props.icon, height: constants_1.SCALE * 40, width: constants_1.SCALE * 40 }, style: { position: 'absolute', opacity: loaded && !error ? 1 : 0, resizeMode: 'contain' }, onLoad: () => setLoaded(true), onError: err => (setLoaded(true), setError(err)) }) : null,
!hasIcon || (!loaded || error) ? React.createElement(react_native_1.Text, { style: [
exports.styles.number,
colourscheme === 'dark' ? exports.styles.numberDark : null,
] }, props.number) : null);
};
exports.ChannelIcon = React.memo(_ChannelIcon);
exports.styles = react_native_1.StyleSheet.create({
row: {
borderTopColor: '#eeeeee',
},
rowDark: {
borderTopColor: '#424242',
},
rowNotFirst: {
borderTopWidth: constants_1.SCALE * 1,
},
container: {
flexDirection: 'row',
paddingHorizontal: constants_1.SCALE * 15,
paddingVertical: constants_1.SCALE * 8,
minHeight: constants_1.SCALE * 65,
},
icon: {
width: constants_1.SCALE * 40,
marginRight: constants_1.SCALE * 15,
justifyContent: 'center',
},
number: {
width: constants_1.SCALE * 40,
height: constants_1.SCALE * 40,
lineHeight: constants_1.SCALE * 40,
fontSize: constants_1.SCALE * 18,
textAlign: 'center',
color: '#000000',
},
numberDark: {
color: '#ffffff',
},
detail: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
headerText: {
color: '#212121',
marginBottom: constants_1.SCALE * 2,
fontSize: constants_1.SCALE * 14,
},
headerTextDark: {
color: '#f5f5f5',
},
nowNextText: {
color: '#424242',
fontSize: constants_1.SCALE * 12,
},
nowNextTextDark: {
color: '#e0e0e0',
},
noInformation: {
opacity: 0.6,
},
});