@livetv-app/tvguide
Version:
An Android TV Live Channels-like Electronic Programme Guide for React DOM and React Native applications.
137 lines (133 loc) • 6.67 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.css = exports.CLASS_PREFIX = exports.EmptyProgrammeRow = exports.ProgrammeAction = void 0;
const React = require("react");
const util_1 = require("../util");
const header_1 = require("./header");
const channel_row_js_1 = require("./channel-row.js");
function ProgrammeRow(props) {
var _a;
// Current time, to one day
const today = util_1.useCurrentTime(86400000);
const name = util_1.useLocalised(props.programme.name);
const desc = util_1.useLocalised(props.programme.description);
const et = util_1.formatEpisodeText(props.programme);
const isStartToday = Math.floor(props.programme.start.getTime() / 86400000) ===
Math.floor(today.getTime() / 86400000);
const isEndSameDay = Math.floor(props.programme.start.getTime() / 86400000) ===
Math.floor(props.programme.end.getTime() / 86400000);
return React.createElement("div", { className: channel_row_js_1.CLASS_PREFIX + '-row' },
React.createElement("div", { className: [channel_row_js_1.CLASS_PREFIX + '-cell', channel_row_js_1.CLASS_PREFIX + '-main'].join(' ') }),
React.createElement("div", { className: [
channel_row_js_1.CLASS_PREFIX + '-rowNotFirst',
channel_row_js_1.CLASS_PREFIX + '-cell',
exports.CLASS_PREFIX + '-programme',
].join(' ') },
React.createElement("div", { className: exports.CLASS_PREFIX + '-programmeDetail' },
React.createElement("div", { className: exports.CLASS_PREFIX + '-programmeDetailTop' },
React.createElement("div", { className: [
channel_row_js_1.CLASS_PREFIX + '-programmeName',
exports.CLASS_PREFIX + '-programmeName',
].join(' ') }, name),
et ?
React.createElement("div", { className: [
channel_row_js_1.CLASS_PREFIX + '-programmeDescriptionText',
channel_row_js_1.CLASS_PREFIX + '-programmeEpisodeText',
exports.CLASS_PREFIX + '-programmeEpisodeText',
].join(' ') }, et)
: null,
desc ?
React.createElement("div", { className: [
channel_row_js_1.CLASS_PREFIX + '-programmeDescriptionText',
exports.CLASS_PREFIX + '-programmeDescriptionText',
].join(' ') }, desc)
: null),
React.createElement("div", { className: exports.CLASS_PREFIX + '-programmeDetailBottom' },
React.createElement("div", { className: exports.CLASS_PREFIX + '-programmeTime' },
React.createElement(header_1.Time, { time: props.programme.start, format: isStartToday ? util_1.formatTimeShort : util_1.formatTime }),
' - ',
React.createElement(header_1.Time, { time: props.programme.end, format: isEndSameDay ? util_1.formatTimeShort : util_1.formatTime })),
((_a = props.programme.actions) === null || _a === void 0 ? void 0 : _a.length) ? React.createElement("div", { className: exports.CLASS_PREFIX + '-programmeActions' }, props.programme.actions.map((a, i) => React.createElement(ProgrammeActionComponent, { key: i, programme: props.programme, action: a }))) : null)),
props.programme.icon ? React.createElement("img", { src: props.programme.icon, style: { height: 120 } }) : null));
}
exports.default = ProgrammeRow;
function ProgrammeActionComponent(props) {
const name = util_1.useLocalised(props.action.name);
return React.createElement("div", { className: exports.CLASS_PREFIX + '-programmeAction' },
React.createElement("a", { onClick: e => util_1.handleProgrammeAction(props.programme, props.action) },
React.createElement("span", { className: exports.CLASS_PREFIX + '-programmeActionText' }, name)));
}
exports.ProgrammeAction = ProgrammeActionComponent;
function EmptyProgrammeRow() {
return React.createElement("div", { className: channel_row_js_1.CLASS_PREFIX + '-row' },
React.createElement("div", { className: [channel_row_js_1.CLASS_PREFIX + '-cell', channel_row_js_1.CLASS_PREFIX + '-main'].join(' ') }),
React.createElement("div", { className: [
channel_row_js_1.CLASS_PREFIX + '-rowNotFirst',
channel_row_js_1.CLASS_PREFIX + '-cell',
exports.CLASS_PREFIX + '-programme',
exports.CLASS_PREFIX + '-emptyProgramme',
].join(' ') },
React.createElement("div", { className: exports.CLASS_PREFIX + '-programmeDetail' },
React.createElement("span", { className: [
channel_row_js_1.CLASS_PREFIX + '-emptyProgrammeText',
exports.CLASS_PREFIX + '-emptyProgrammeText',
].join(' ') }, "No information"))));
}
exports.EmptyProgrammeRow = EmptyProgrammeRow;
exports.CLASS_PREFIX = 'tvguide-programme-row';
exports.css = `
.${exports.CLASS_PREFIX}-programme {
flex: 1;
background-color: #607d8ba0;
height: 111px;
padding: 0;
display: flex;
flex-direction: row;
}
.${exports.CLASS_PREFIX}-programmeDetail {
flex: 1;
padding: 15px 20px;
justify-content: space-between;
display: flex;
flex-direction: column;
}
.${exports.CLASS_PREFIX}-programmeDetailTop {
flex: 1;
}
.${exports.CLASS_PREFIX}-programmeName {
font-size: 16px;
margin-bottom: 2px;
}
.${exports.CLASS_PREFIX}-programmeEpisodeText {
font-size: 14px;
}
.${exports.CLASS_PREFIX}-programmeDescriptionText {
font-size: 14px;
}
.${exports.CLASS_PREFIX}-programmeDetailBottom {
margin-top: 10px;
display: flex;
flex-direction: row;
}
.${exports.CLASS_PREFIX}-programmeTime {
flex: 1;
font-size: 13px;
color: #eeeeee;
}
.${exports.CLASS_PREFIX}-programmeActions {
margin-left: 5px;
}
.${exports.CLASS_PREFIX}-programmeAction {
margin-left: 10px;
}
.${exports.CLASS_PREFIX}-programmeActionText {
color: #eeeeee;
}
.${exports.CLASS_PREFIX}-emptyProgramme {
}
.${exports.CLASS_PREFIX}-emptyProgrammeText {
font-style: normal;
font-size: 16px;
align-self: flex-start;
}
`;