spectatr-player-sdk/dist/collection/components/Quiz/Quiz-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 renderQuizModal(component, onAnswer, onClose) {
    if (!component.currentQuiz)
        return null;
    const answeredQuiz = component.quizAnswered.find(q => q.quizQuestion.id === component.currentQuiz.id);
    const hasAnswered = !!answeredQuiz;
    const isMultiSelect = component.currentQuiz.questionType === 'multi_select';
    const options = component.currentQuiz?.quizOptions;
    const position = component.currentQuiz?.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();
            }, 3000);
        }
    };
    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)`;
    }
    const modalBg = getComputedStyle(document.documentElement).getPropertyValue('--vp-primary-bg').trim();
    const optionBg = getComputedStyle(document.documentElement).getPropertyValue('--vp-controls-bg').trim();
    return (h("div", { class: "quiz-overlay", style: { justifyContent: contentAlignment } }, h("div", { class: "quiz-modal", style: { background: hexToRgb(modalBg) } }, h("div", { class: "quiz-header" }, h("h3", null, "Quiz Question"), h("button", { class: "close-btn", onClick: closeModal }, "\u00D7")), h("div", { class: "quiz-content" }, h("p", { class: "quiz-question" }, component.currentQuiz.question), h("div", { class: "quiz-options" }, options.map(option => {
        const isSelected = hasAnswered ? answeredQuiz.answer.includes(option.id) : selectedOptionIds.includes(option.id);
        const isCorrect = component.currentQuiz.answer.includes(option.option);
        return (h("button", { key: option.id, class: `quiz-option-full ${hasAnswered ? 'voted' : ''} ${isSelected ? (hasAnswered ? (isCorrect ? 'correct-opt' : 'incorrect-opt') : 'selected') : hasAnswered && isCorrect ? 'correct-opt' : ''}`, style: hasAnswered ? {} : { background: optionBg }, onClick: () => !hasAnswered && handleOptionSelect(option.option, option.id), disabled: hasAnswered }, h("span", null, option.option), hasAnswered && isSelected && h("span", { style: { marginLeft: 'auto' } }, isCorrect ? '✔' : 'X')));
    })), !hasAnswered && isMultiSelect ? (!isSubmitting ? (h("button", { class: "submit-btn", onClick: submitAnswer, disabled: selectedOptionIds.length === 0 }, "Submit")) : (h("button", { class: "submit-btn" }, "Submitting..."))) : null))));
}
//# sourceMappingURL=Quiz-render.js.map