@livetv-app/tvguide/dist/grid/header.js

An Android TV Live Channels-like Electronic Programme Guide for React DOM and React Native applications.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.css = exports.CLASS_PREFIX = exports.TimeList = exports.Time = exports.TimeCell = void 0;
const React = require("react");
const react_1 = require("react");
const util_1 = require("../util");
const constants_1 = require("../constants");
const channel_row_js_1 = require("./channel-row.js");
function TimeCell(props) {
    // The current time, to the half-hour
    const now = util_1.useCurrentTime(1800000);
    const isStartPositionToday = Math.floor(props.start.getTime() / 86400000) ===
        Math.floor(now.getTime() / 86400000);
    return React.createElement("div", { className: [channel_row_js_1.CLASS_PREFIX + '-cell', channel_row_js_1.CLASS_PREFIX + '-main', exports.CLASS_PREFIX + '-main'].join(' ') }, isStartPositionToday ?
        React.createElement(Time, { format: util_1.formatTime, className: exports.CLASS_PREFIX + '-mainText' }) :
        React.createElement(Time, { time: props.start, format: util_1.formatDay, className: exports.CLASS_PREFIX + '-mainTextNotToday' }));
}
exports.TimeCell = TimeCell;
function Time(props) {
    var _a;
    const now = util_1.useCurrentTime(props.interval);
    const time = (_a = props.time) !== null && _a !== void 0 ? _a : now;
    return React.createElement("span", { className: props.className }, props.format ? props.format.call(null, time) : time.toString());
}
exports.Time = Time;
function TimeList(props) {
    // Current time, to one minute
    const now = util_1.useCurrentTime(60000);
    const [width, setWidth] = react_1.useState(200);
    const leftPosition = props.start;
    const ref = react_1.useRef(null);
    react_1.useEffect(() => {
        if (!ref.current)
            return;
        const el = ref.current;
        const observer = new ResizeObserver(entries => {
            var _a;
            setWidth(el.clientWidth);
            (_a = props.onResize) === null || _a === void 0 ? void 0 : _a.call(null, el.clientWidth);
        });
        observer.observe(el);
        return () => (observer.unobserve(el), observer.disconnect());
    }, [ref.current]);
    const cell_count = Math.ceil(width / constants_1.CELL_WIDTH);
    const cells = [];
    for (let i = 0; i < cell_count; i++) {
        const time = new Date(leftPosition.getTime() + (constants_1.CELL_LENGTH * i));
        cells.push(React.createElement("div", { key: time.getTime(), className: [
                channel_row_js_1.CLASS_PREFIX + '-cell',
                exports.CLASS_PREFIX + '-time',
            ].join(' ') },
            React.createElement("span", { className: exports.CLASS_PREFIX + '-timeText' }, util_1.formatTimeShort(time))));
    }
    const nowindicator_position = now.getTime() - leftPosition.getTime();
    const nowindicator_cells = nowindicator_position / constants_1.CELL_LENGTH;
    const nowindicator = nowindicator_cells * constants_1.CELL_WIDTH;
    return React.createElement("div", { className: exports.CLASS_PREFIX + '-timeRow', ref: ref },
        React.createElement("div", { className: channel_row_js_1.CLASS_PREFIX + '-scrollContainer' },
            React.createElement("div", { className: [channel_row_js_1.CLASS_PREFIX + '-scroller', exports.CLASS_PREFIX + '-timeHeader'].join(' ') }, cells)),
        nowindicator >= 0 && width >= nowindicator ? React.createElement(React.Fragment, null,
            React.createElement("div", { className: [channel_row_js_1.CLASS_PREFIX + '-nowIndicator', exports.CLASS_PREFIX + '-nowIndicator'].join(' '), style: { left: nowindicator } }),
            React.createElement("div", { className: [channel_row_js_1.CLASS_PREFIX + '-nowIndicator'].join(' '), style: { left: nowindicator } })) : null);
}
exports.TimeList = TimeList;
exports.CLASS_PREFIX = 'tvguide-header';
exports.css = `
    .${exports.CLASS_PREFIX}-timeHeader {
        overflow: hidden;
    }

    .${exports.CLASS_PREFIX}-main {
        /* */

        flex-shrink: 0;
    }
    .${exports.CLASS_PREFIX}-mainText {
        color: #e1f5fe;
    }
    .${exports.CLASS_PREFIX}-mainTextNotToday {
        color: #ffffff;
    }

    .${exports.CLASS_PREFIX}-timeRow {
        flex: 1;

        position: relative;
    }

    .${exports.CLASS_PREFIX}-time {
        width: ${constants_1.CELL_WIDTH}px;
        padding-left: 10px;
        padding-right: 0;
    }
    .${exports.CLASS_PREFIX}-timeText {
        color: #eeeeee;
    }

    .${exports.CLASS_PREFIX}-nowIndicator {
        width: 8px;
        height: 8px;
        margin-top: -4px;
        margin-left: -3px;
        border-radius: 4px;
    }
`;