spectatr-player-sdk/dist/collection/components/Poll/poll-render.js

A custom video player built with Stencil with Shaka Player integration

import { h } from "@stencil/core";
// State for selected options (would be local component state in a real component)
let selectedOptionIds = [];
let selectedOption = [];
let isSubmitting = false;
export function renderPollModal(component, onAnswer, onClose) {
    if (!component.currentPoll)
        return null;
    const percentageBg = getComputedStyle(document.documentElement).getPropertyValue('--vp-accent').trim();
    const nonPercentageBg = getComputedStyle(document.documentElement).getPropertyValue('--vp-controls-bg').trim();
    const modalBg = getComputedStyle(document.documentElement).getPropertyValue('--vp-primary-bg').trim();
    let answeredPoll = component.pollAnswered.filter(q => q.poll.id === component.currentPoll.id);
    let hasAnswered = !!answeredPoll.length;
    const totalVotes = component.currentPoll?.pollOptions.reduce((acc, data) => acc + (data?.voteCount ?? 0), 0);
    const isMultiSelect = component.currentPoll.isMultiSelect;
    const options = component.currentPoll?.pollOptions;
    const position = component.currentPoll?.position ?? 'center';
    const contentAlignment = position === 'top-left' ? 'start' : position === 'top-right' ? 'end' : 'center';
    const handleOptionSelect = (option, optionId) => {
        if (isMultiSelect) {
            const optionIndex = selectedOptionIds.indexOf(optionId);
            if (optionIndex === -1) {
                selectedOptionIds.push(optionId);
                selectedOption.push(option);
            }
            else {
                selectedOptionIds.splice(optionIndex, 1);
                selectedOption.splice(optionIndex, 1);
            }
        }
        else {
            selectedOptionIds = [optionId];
            selectedOption = [option];
            // For single select, submit immediately if not multi-select
            if (!isMultiSelect) {
                submitAnswer();
            }
        }
    };
    const submitAnswer = async () => {
        if (selectedOptionIds.length > 0) {
            isSubmitting = true;
            component.isLoading = true;
            await onAnswer(selectedOptionIds);
            component.isLoading = false;
            isSubmitting = false;
            setTimeout(() => {
                closeModal();
            }, 1500);
        }
    };
    const closeModal = () => {
        selectedOptionIds = [];
        selectedOption = [];
        isSubmitting = false;
        onClose();
    };
    function hexToRgb(hex) {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        return `rgba(${r}, ${g}, ${b},0.55)`;
    }
    return (h("div", { class: "poll-overlay", style: { justifyContent: contentAlignment } }, h("div", { class: "poll-modal", style: { background: hexToRgb(modalBg) } }, h("div", { class: "poll-header" }, h("h3", null, "Poll"), h("button", { class: "close-btn", onClick: closeModal }, "\u00D7")), h("div", { class: "poll-content" }, h("p", { class: "poll-question" }, component.currentPoll.question), h("div", { class: "poll-options" }, options.map(option => {
        const isSelected = selectedOptionIds.includes(option.id);
        const voteCount = option?.voteCount + (isSelected ? 1 : 0);
        const percentage = totalVotes === 0 ? (isSelected ? 100 : 0) : ((voteCount / (totalVotes + (isSelected ? 1 : 0))) * 100).toFixed(1);
        return (h("button", { key: option.id, class: `poll-option-full ${hasAnswered ? 'voted' : ''} ${isSelected && !hasAnswered ? 'selected' : ''}`, onClick: () => !hasAnswered && handleOptionSelect(option.option, option.id), disabled: hasAnswered, style: hasAnswered && percentage
                ? {
                    background: `linear-gradient(to right, ${percentageBg} ${percentage}%, ${nonPercentageBg} ${percentage}%)`,
                }
                : { background: nonPercentageBg } }, h("span", null, option.option), hasAnswered && h("span", { class: "percentage-text" }, percentage, "%")));
    })), !hasAnswered && isMultiSelect ? (!isSubmitting ? (h("button", { class: "submit-btn", onClick: submitAnswer, disabled: selectedOptionIds.length === 0 }, "Submit")) : (h("button", { class: "submit-btn" }, "Submitting..."))) : null, isSubmitting && h("p", { class: "submit-text" }, "Submitting..."), hasAnswered && h("p", { class: "submit-text" }, "Thank you for voting!")))));
}
//# sourceMappingURL=poll-render.js.map