@livetv-app/tvguide
Version:
An Android TV Live Channels-like Electronic Programme Guide for React DOM and React Native applications.
96 lines (95 loc) • 4.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.styles = void 0;
const React = 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 ProgrammeRow(props) {
const colourscheme = react_native_1.useColorScheme();
const now = util_1.useCurrentTime(86400000); // 1 day
const isStartPositionToday = Math.floor(props.programme.start.getTime() / 86400000) ===
Math.floor(now.getTime() / 86400000);
const isStartPositionTomorrow = Math.floor(props.programme.start.getTime() / 86400000) ===
Math.floor(now.getTime() / 86400000) + 1;
const isStartPositionYesterday = Math.floor(props.programme.start.getTime() / 86400000) ===
Math.floor(now.getTime() / 86400000) - 1;
const isEndPositionToday = Math.floor(props.programme.end.getTime() / 86400000) ===
Math.floor(now.getTime() / 86400000);
const name = util_1.useLocalised(props.programme.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.detail },
React.createElement(react_native_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: [
exports.styles.timeText, colourscheme === 'dark' ? exports.styles.timeTextDark : null,
] },
isStartPositionToday || isEndPositionToday ? util_1.formatTimeShort(props.programme.start) :
isStartPositionTomorrow ? 'Tomorrow, ' + util_1.formatTimeShort(props.programme.start) :
isStartPositionYesterday ? 'Yesterday, ' + util_1.formatTimeShort(props.programme.start) :
util_1.formatTime(props.programme.start),
" - ",
util_1.formatTimeShort(props.programme.end)),
React.createElement(react_native_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: [
exports.styles.headerText, colourscheme === 'dark' ? exports.styles.headerTextDark : null,
] }, name),
React.createElement(react_native_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: [
exports.styles.descriptionText, colourscheme === 'dark' ? exports.styles.descriptionTextDark : null,
] }, props.programme.description)),
React.createElement(react_native_1.View, { style: exports.styles.icon },
React.createElement(react_native_1.Image, { source: { uri: props.programme.icon, height: constants_1.SCALE * 65, width: constants_1.SCALE * 100 }, resizeMode: "cover" }))));
}
exports.default = React.memo(ProgrammeRow);
exports.styles = react_native_1.StyleSheet.create({
row: {
borderTopColor: '#eeeeee',
},
rowDark: {
borderTopColor: '#424242',
},
rowNotFirst: {
borderTopWidth: constants_1.SCALE * 1,
},
container: {
flexDirection: 'row',
},
icon: {
width: constants_1.SCALE * 100,
marginLeft: constants_1.SCALE * 15,
justifyContent: 'center',
},
detail: {
flex: 1,
paddingHorizontal: constants_1.SCALE * 15,
paddingVertical: constants_1.SCALE * 8,
minHeight: constants_1.SCALE * 65,
flexDirection: 'column',
justifyContent: 'center',
},
headerText: {
color: '#212121',
marginBottom: constants_1.SCALE * 2,
fontSize: constants_1.SCALE * 14,
},
headerTextDark: {
color: '#f5f5f5',
},
timeText: {
color: '#424242',
fontSize: constants_1.SCALE * 12,
},
timeTextDark: {
color: '#e0e0e0',
},
descriptionText: {
color: '#424242',
fontSize: constants_1.SCALE * 12,
},
descriptionTextDark: {
color: '#e0e0e0',
},
});