@livetv-app/tvguide
Version:
An Android TV Live Channels-like Electronic Programme Guide for React DOM and React Native applications.
161 lines (160 loc) • 9.62 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.css = exports.CLASS_PREFIX = void 0;
const React = require("react");
const react_1 = require("react");
const util_1 = require("../util");
const constants_1 = require("../constants");
function DebugView(props) {
var _a, _b, _c, _d;
const { setSelectedChannel, setSelectedProgramme, setSelectedTime, leftPosition, setLeftPosition } = props;
const { channel, programme, time } = props.selection;
const rightPosition = react_1.useMemo(() => new Date(leftPosition.getTime() + ((props.width / constants_1.CELL_WIDTH) * constants_1.CELL_LENGTH)), [leftPosition, props.width]);
const [dimensions, setDimensions] = react_1.useState({ x: 0, y: 0, width: 0, height: 0 });
const ref = react_1.useRef(null);
react_1.useEffect(() => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
const newdimensions = {
x: (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientLeft) !== null && _b !== void 0 ? _b : 0,
y: (_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.clientTop) !== null && _d !== void 0 ? _d : 0,
width: (_f = (_e = ref.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 0,
// .clientHeight doesn't include margins
height: ((_h = (_g = ref.current) === null || _g === void 0 ? void 0 : _g.clientHeight) !== null && _h !== void 0 ? _h : 0) + 10,
};
if (dimensions.x !== newdimensions.x ||
dimensions.y !== newdimensions.y ||
dimensions.width !== newdimensions.width ||
dimensions.height !== newdimensions.height) {
setDimensions(newdimensions);
(_j = props.onLayout) === null || _j === void 0 ? void 0 : _j.call(null, newdimensions);
}
});
return React.createElement("div", { className: exports.CLASS_PREFIX + '-debug', ref: ref },
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugText' },
"Selected channel: ", channel === null || channel === void 0 ? void 0 :
channel.id,
" ", channel === null || channel === void 0 ? void 0 :
channel.name),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugText' },
"Selected programme: ", programme === null || programme === void 0 ? void 0 :
programme.id,
" ", programme === null || programme === void 0 ? void 0 :
programme.start.toString(),
" ", programme === null || programme === void 0 ? void 0 :
programme.name),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugText' },
"Selected time: ",
time.toString()),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugText' },
"Left position: ",
leftPosition.toString()),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugText' },
"Right position: ",
rightPosition.toString()),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugText' },
"Top position: ", (_a = props.scrollTop) === null || _a === void 0 ? void 0 :
_a.id,
" ", (_b = props.scrollTop) === null || _b === void 0 ? void 0 :
_b.name),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugText' },
"Bottom position: ", (_c = props.scrollBottom) === null || _c === void 0 ? void 0 :
_c.id,
" ", (_d = props.scrollBottom) === null || _d === void 0 ? void 0 :
_d.name),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButtons' },
props.onKeypress ? React.createElement(React.Fragment, null,
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
var _a;
(_a = props.onKeypress) === null || _a === void 0 ? void 0 : _a.call(props, 'select');
} }, "S")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
var _a;
(_a = props.onKeypress) === null || _a === void 0 ? void 0 : _a.call(props, 'up');
} }, "U")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
var _a;
(_a = props.onKeypress) === null || _a === void 0 ? void 0 : _a.call(props, 'down');
} }, "D")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
var _a;
(_a = props.onKeypress) === null || _a === void 0 ? void 0 : _a.call(props, 'left');
} }, "L")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
var _a;
(_a = props.onKeypress) === null || _a === void 0 ? void 0 : _a.call(props, 'right');
} }, "R"))) : null,
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
setLeftPosition(new Date(leftPosition.getTime() - constants_1.CELL_LENGTH));
} }, "Move Left 1 Cell")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
setLeftPosition(new Date(leftPosition.getTime() + constants_1.CELL_LENGTH));
} }, "Move Right 1 Cell")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
setLeftPosition(new Date(leftPosition.getTime() - (constants_1.CELL_LENGTH * 4)));
} }, "Move Left 4 Cells")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
setLeftPosition(new Date(leftPosition.getTime() + (constants_1.CELL_LENGTH * 4)));
} }, "Move Right 4 Cells")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
const c = util_1.getPreviousChannel(channel, props.channels);
setSelectedChannel(c);
setSelectedProgramme(util_1.getProgrammeAtTime(time, props.programmes, c));
} }, "Channel Up")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
const c = util_1.getNextChannel(channel, props.channels);
setSelectedChannel(c);
setSelectedProgramme(util_1.getProgrammeAtTime(time, props.programmes, c));
} }, "Channel Down")),
channel ? React.createElement(React.Fragment, null,
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
const pt = util_1.getPreviousProgrammeTime(time, props.programmes, channel);
if (!pt)
return;
setSelectedTime(pt);
const programme = util_1.getProgrammeAtTime(pt, props.programmes, channel);
setSelectedProgramme(programme);
} }, "Previous Programme")),
React.createElement("div", { className: exports.CLASS_PREFIX + '-debugButton' },
React.createElement("button", { onClick: () => {
const pt = util_1.getNextProgrammeTime(time, props.programmes, channel);
if (!pt)
return;
setSelectedTime(pt);
const programme = util_1.getProgrammeAtTime(pt, props.programmes, channel);
setSelectedProgramme(programme);
} }, "Next Programme"))) : null));
}
exports.default = DebugView;
exports.CLASS_PREFIX = 'tvguide-debug';
exports.css = `
.${exports.CLASS_PREFIX}-debug {
background-color: #607d8bee;
padding: 10px 20px;
margin-bottom: 10px;
margin-right: 20px;
border-radius: 2px;
}
.${exports.CLASS_PREFIX}-debugText {
color: #eeeeee;
}
.${exports.CLASS_PREFIX}-debugButtons {
display: flex;
flex-direction: row;
margin-top: 10px;
}
.${exports.CLASS_PREFIX}-debugButton {
margin-right: 10px;
}
`;