spectatr-player-sdk/dist/collection/components/Stats/StatsNotification.js

A custom video player built with Stencil with Shaka Player integration

import { h } from "@stencil/core";
import { findNearbyStat } from "../utils/quiz-handler";
export const StatsNotification = ({ showStats, stats, currentTime, onClick, quizPosition, pollPosition }) => {
    const nearbyStat = findNearbyStat(stats, currentTime);
    if (!nearbyStat || showStats)
        return null;
    const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--vp-video-text').trim();
    const position = nearbyStat.position || nearbyStat.position === 'top-center'
        ? !!quizPosition && quizPosition === 'top-left'
            ? pollPosition === 'top-right'
                ? 'left'
                : 'right'
            : 'left'
        : (nearbyStat.position ?? '').replace('top-', '');
    function triggerStats() {
        const updatedPolls = stats.map(poll => {
            if (poll.id === nearbyStat.id) {
                return { ...poll, autoTrigger: false, triggered: true };
            }
            return poll;
        });
        onClick(nearbyStat, updatedPolls);
    }
    if (nearbyStat.autoTrigger && !nearbyStat?.triggered) {
        triggerStats();
        return null;
    }
    return (h("div", { class: "stats-notification-container", style: { [position]: '16px' }, onClick: triggerStats }, h("div", { class: "stats-info-icon" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: bgColor }, h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }))), !nearbyStat?.triggered && (h("div", { class: "stats-alert-strip", style: { [position]: '40px' } }, "Statistics available!"))));
};
//# sourceMappingURL=StatsNotification.js.map