spectatr-player-sdk
Version:
A custom video player built with Stencil with Shaka Player integration
512 lines (511 loc) • 34.7 kB
JavaScript
import { h, Host } from "@stencil/core";
// @ts-ignore
import shaka from "shaka-player";
import "shaka-player/dist/controls.css";
import { PollNotification } from "../Poll/PollNotification";
import { renderPollModal } from "../Poll/poll-render";
import { renderQuizModal } from "../Quiz/Quiz-render";
import { QuizNotification } from "../Quiz/QuizNotification";
import { cleanupData, formatLikeCount, formatTimeAgo, handleClickOutsideSetting, handleGoLive, seek, setAudioTrack, setQuality, setVolume, shouldShowToggle, skipBackward, skipForward, toggleDescription, toggleDislike, toggleFullscreen, toggleLike, toggleMute, togglePlay, toggleSettings, } from "../utils/control-utils";
import { setupEventListeners } from "../utils/event-handlers";
import { closePoll, closeQuiz, closeStats, handlePollAnswer, handleQuizAnswer } from "../utils/quiz-handler";
import { loadSrc, setupVideo } from "../utils/setup-utils";
import { formatLocalTime, formatTime, formatTimeLive, getSliderBackground, getVolumeSliderBackground, resetControlsTimeout } from "../utils/ui-utils";
import { StatsNotification } from "../Stats/StatsNotification";
import { renderStatsModal } from "../Stats/stats-render";
export class VideoPlayer {
hostElement;
videoId;
nextVideoId;
clientId;
userId;
baseUrl;
autoPlay;
captureReaction;
setVideoId;
tempVideoId;
src;
token = '';
isLive = false;
isDvrEnabled = true;
quizzes;
polls;
statistics = [];
scheduleTime = '';
showStartStream = false;
timelineEvents = [];
videoTitle;
videoDescription;
createdAt;
isLiked = false;
isDisliked = false;
totalLikes = 102000;
totalViews = 0;
poster;
isPlaying = false;
currentTime = 0;
duration = 0;
volume = 1;
isMuted = false;
isFullscreen = false;
showControls = true;
showSettings = false;
showQuiz = false;
showPoll = false;
showStatistics = false;
showFullDescription = false;
currentQuiz = null;
currentPoll = null;
currentStatistics = null;
qualities = [];
currentQuality = -1;
audioTracks = [];
currentAudioTrack = 0;
isLoading = false;
showMainSettings = false;
showQualityOptions = false;
showAudioOptions = false;
hasVideoStarted = false;
quizAnswered = [];
pollAnswered = [];
quizTriggered;
pollTriggered;
playVideo;
pauseVideo;
videoCompleted;
videoError;
player;
videoElement;
videoContainer;
controlsTimeout;
progressUpdateInterval;
livePollingInterval;
reactionPollingInterval;
scheduleTimer;
async componentDidLoad() {
if (this.autoPlay) {
this.videoElement.muted = true;
this.isMuted = true;
}
if (shaka.Player.isBrowserSupported()) {
// Dispose old player if exists
if (this.player) {
this.player.detach();
this.player.destroy();
}
shaka.polyfill.installAll();
this.player = new shaka.Player();
await this.player.attach(this.videoElement);
setupVideo(this);
}
else {
console.error('Browser not supported by Shaka Player');
this.videoError.emit('Browser not supported by Shaka Player');
}
// if (this.videoId) {
// setupQuizPolling(this); // Start polling when component loads
// }
this.videoElement;
setupEventListeners(this);
this.videoContainer.addEventListener('click', (e) => handleClickOutsideSetting(this, e));
}
disconnectedCallback() {
if (this.player) {
this.player.detach();
this.player.destroy();
}
this.videoContainer.removeEventListener('click', (e) => handleClickOutsideSetting(this, e));
clearTimeout(this.controlsTimeout);
clearInterval(this.progressUpdateInterval);
clearInterval(this.livePollingInterval);
clearInterval(this.reactionPollingInterval);
}
handleVideoIdChange(newVideoId) {
if (newVideoId) {
cleanupData(this);
// setupQuizPolling(this); // Restart polling when videoId changes
setupVideo(this);
}
}
render() {
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--vp-accent').trim();
const controlsColor = getComputedStyle(document.documentElement).getPropertyValue('--vp-video-text').trim();
return (h(Host, { key: '7040e26374f5d71983474a5ff92fb5d41c8fac5f' }, h("div", { key: '187496dd6ca0b45623b3f6e29e4df682dd18cdf6', id: "spectart-video-player", class: "video-container", ref: el => (this.videoContainer = el) }, h("video", { key: 'a7c92cb74eda5a53423017eeb6b061e257a203d1', ref: el => (this.videoElement = el), poster: this.poster, autoPlay: this.autoPlay, preload: "metadata" }), h("div", { key: 'e17810b83c695638b93a3e4f3f04eb910960fef2', class: `buffering-loader ${this.isLoading && !this.scheduleTime ? 'active' : ''}` }, h("div", { key: 'fa9ead7027e6d15812dd22312b9e8e38e9d67ef4', class: "spinner" })), this.showStartStream || (this.scheduleTime && new Date(this.scheduleTime) > new Date()) ? (h("div", { class: "scheduled-message" }, this.showStartStream ? (h("button", { class: "big-play-pause", onClick: () => loadSrc(this) }, h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none" }, h("path", { d: "M5.33282 16.0005V11.2538C5.33282 5.36051 9.50616 2.94718 14.6128 5.89384L18.7328 8.26718L22.8528 10.6405C27.9595 13.5872 27.9595 18.4138 22.8528 21.3605L18.7328 23.7338L14.6128 26.1072C9.50616 29.0538 5.33282 26.6405 5.33282 20.7472V16.0005Z", fill: controlsColor })))) : (h("p", null, "Video is scheduled for ", formatLocalTime(this.scheduleTime))))) : (h(h.Fragment, null, h("div", { class: `center-controls ${this.showControls && !this.showQuiz && !this.showPoll && !this.isLoading ? 'visible' : ''}`, onMouseMove: () => resetControlsTimeout(this) }, h("div", { class: "controls-container" }, this.isDvrEnabled && this.hasVideoStarted && (h("button", { class: "skip-btn", onClick: () => skipBackward(this) }, h("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none" }, h("path", { d: "M17.0682 29.0064C16.3654 29.0064 15.7825 28.4235 15.7825 27.7207V21.9093L15.4568 22.2692C14.9768 22.8007 14.1711 22.8349 13.6396 22.3721C13.1082 21.8921 13.0739 21.0864 13.5368 20.555L16.1082 17.6921C16.4682 17.2978 17.0339 17.1607 17.5311 17.3492C18.0282 17.5378 18.3539 18.0178 18.3539 18.5493V27.7207C18.3539 28.4407 17.7882 29.0064 17.0682 29.0064Z", fill: controlsColor }), h("path", { d: "M17.5044 8.59586L17.498 8.59035L17.4915 8.58502C17.2168 8.36185 17.1734 7.95611 17.3849 7.68238L20.7747 3.45377C20.9989 3.17935 21.4056 3.13705 21.6789 3.35051L22.0747 2.84393L21.6789 3.35051C21.9359 3.55131 21.9921 3.96575 21.7758 4.24561L18.3845 8.47616L18.3763 8.48637L18.3686 8.4969C18.2578 8.64724 18.0787 8.73249 17.8918 8.73249C17.7366 8.73249 17.6155 8.69104 17.5044 8.59586Z", fill: controlsColor, stroke: controlsColor, "stroke-width": "1.28571" }), h("path", { d: "M9.64739 14.1831L9.64552 14.1856C7.71364 16.7614 6.68834 19.7758 6.68834 22.9027C6.68834 30.9549 13.2333 37.4999 21.2855 37.4999C29.3377 37.4999 35.8827 30.9549 35.8827 22.9027C35.8827 14.8505 29.3377 8.30552 21.2855 8.30552C20.2385 8.30552 19.1788 8.43207 18.0392 8.69891C17.6884 8.77653 17.3404 8.55097 17.267 8.22447L16.6735 8.358L17.267 8.22447C17.1879 7.87287 17.4137 7.52348 17.7409 7.44986L17.7419 7.44964C18.9901 7.16672 20.159 7.01981 21.2855 7.01981C30.0338 7.01981 37.1684 14.1382 37.1684 22.9027C37.1684 31.6672 30.0338 38.7856 21.2855 38.7856C12.5373 38.7856 5.40262 31.6672 5.40262 22.9027C5.40262 19.497 6.50379 16.221 8.61553 13.416C8.83469 13.1274 9.2383 13.0745 9.51443 13.2837C9.80364 13.5028 9.85668 13.9068 9.64739 14.1831Z", fill: controlsColor, stroke: controlsColor, "stroke-width": "1.28571" }), h("path", { d: "M24.7143 28.3617C22.4636 28.3617 20.6429 26.5409 20.6429 24.2902V21.976C20.6429 19.7253 22.4636 17.9046 24.7143 17.9046C26.965 17.9046 28.7857 19.7253 28.7857 21.976V24.2902C28.7857 26.5409 26.965 28.3617 24.7143 28.3617ZM24.7143 19.2074C23.1764 19.2074 21.9286 20.4553 21.9286 21.9932V24.3074C21.9286 25.8453 23.1764 27.0931 24.7143 27.0931C26.2522 27.0931 27.5 25.8453 27.5 24.3074V21.9932C27.5 20.4553 26.2522 19.2074 24.7143 19.2074Z", fill: controlsColor, stroke: controlsColor, "stroke-width": "1.28571" })))), h("button", { class: "big-play-pause", onClick: () => togglePlay(this) }, this.isPlaying ? (h("svg", { width: "54", height: "54", viewBox: "0 0 54 54", fill: "none" }, h("path", { d: "M31.5003 42.752H40.5003V11.252H31.5003M13.5003 42.752H22.5003V11.252H13.5003V42.752Z", fill: controlsColor }))) : (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none" }, h("path", { d: "M5.33282 16.0005V11.2538C5.33282 5.36051 9.50616 2.94718 14.6128 5.89384L18.7328 8.26718L22.8528 10.6405C27.9595 13.5872 27.9595 18.4138 22.8528 21.3605L18.7328 23.7338L14.6128 26.1072C9.50616 29.0538 5.33282 26.6405 5.33282 20.7472V16.0005Z", fill: controlsColor })))), this.isDvrEnabled && this.hasVideoStarted && (h("button", { class: "skip-btn", onClick: () => skipForward(this) }, h("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none" }, h("path", { d: "M24.1081 9.37667C23.731 9.37667 23.3538 9.2053 23.1138 8.89673L19.7195 4.66239C19.2738 4.11382 19.3595 3.29098 19.9253 2.86241C20.4738 2.4167 21.2795 2.5024 21.7252 3.06812L25.1195 7.30246C25.5652 7.85103 25.4795 8.67386 24.9138 9.10244C24.6738 9.27386 24.3824 9.37667 24.1081 9.37667Z", fill: controlsColor }), h("path", { d: "M24.2516 7.44824L24.2516 7.44828L24.2587 7.44986C24.6006 7.5268 24.8179 7.88249 24.7361 8.20967L24.7343 8.21705L24.7326 8.22447C24.6552 8.56852 24.3138 8.78506 23.9693 8.70103L23.9693 8.701L23.9636 8.69968C22.8224 8.43221 21.7446 8.30552 20.7141 8.30552C12.6619 8.30552 6.1169 14.8505 6.1169 22.9027C6.1169 30.9549 12.6619 37.4999 20.7141 37.4999C28.7663 37.4999 35.3112 30.9549 35.3112 22.9027C35.3112 19.7758 34.2859 16.7614 32.3541 14.1856L32.3522 14.1831C32.1429 13.9068 32.1959 13.5028 32.4851 13.2837C32.7613 13.0745 33.165 13.1274 33.3841 13.4161C35.4958 16.2211 36.597 19.497 36.597 22.9027C36.597 31.6672 29.4623 38.7856 20.7141 38.7856C11.9658 38.7856 4.83119 31.6672 4.83119 22.9027C4.83119 14.1377 11.9491 7.01981 20.7141 7.01981C21.8449 7.01981 22.9952 7.15067 24.2516 7.44824Z", fill: controlsColor, stroke: controlsColor, "stroke-width": "1.28571" }), h("path", { d: "M15.8543 21.9093V20.2408L14.7348 21.478L14.4091 21.8379L14.4087 21.8383C14.171 22.1015 13.7692 22.1257 13.4953 21.8911C13.2357 21.6526 13.2133 21.2528 13.4479 20.9803L16.0134 18.124C16.1977 17.9235 16.4847 17.8565 16.7321 17.9503C16.9752 18.0425 17.1401 18.2803 17.1401 18.5493V27.7207C17.1401 28.0856 16.8622 28.3635 16.4972 28.3635C16.1494 28.3635 15.8543 28.0685 15.8543 27.7207V21.9093Z", fill: controlsColor, stroke: controlsColor, "stroke-width": "1.28571" }), h("path", { d: "M24.1429 28.3617C21.8922 28.3617 20.0714 26.5409 20.0714 24.2902V21.976C20.0714 19.7253 21.8922 17.9046 24.1429 17.9046C26.3935 17.9046 28.2143 19.7253 28.2143 21.976V24.2902C28.2143 26.5409 26.3935 28.3617 24.1429 28.3617ZM24.1429 19.2074C22.605 19.2074 21.3571 20.4553 21.3571 21.9932V24.3074C21.3571 25.8453 22.605 27.0931 24.1429 27.0931C25.6807 27.0931 26.9286 25.8453 26.9286 24.3074V21.9932C26.9286 20.4553 25.6807 19.2074 24.1429 19.2074Z", fill: controlsColor, stroke: controlsColor, "stroke-width": "1.28571" })))))), (this.hasVideoStarted || !this.poster) && (h(h.Fragment, null, this.isLive && !this.showControls && h("div", { class: "live-tag" }, "LIVE"), !!this.quizzes && (h(QuizNotification, { quizzes: this.quizzes, showQuiz: this.showQuiz, currentTime: this.currentTime, answered: this.quizAnswered, onClick: (quiz, quizzes) => {
this.currentQuiz = quiz;
this.showQuiz = true;
this.quizzes = quizzes;
}, pollPosition: this.currentPoll?.position })), !!this.polls && (h(PollNotification, { showPoll: this.showPoll, polls: this.polls, currentTime: this.currentTime, onClick: (poll, polls) => {
this.currentPoll = poll;
this.showPoll = true;
this.polls = polls;
}, quizPosition: this.currentQuiz?.position })), !!this.statistics.length && (h(StatsNotification, { showStats: this.showStatistics, stats: this.statistics, currentTime: this.currentTime, onClick: (stat, stats) => {
this.currentStatistics = stat;
this.showStatistics = true;
this.statistics = stats;
}, quizPosition: this.currentQuiz?.position, pollPosition: this.currentPoll?.position })), h("div", { class: `controls ${this.showControls && !this.showQuiz && !this.showPoll ? 'visible' : ''}` }, h("div", { class: "controls-row" }, h("button", { class: "control-btn", onClick: () => togglePlay(this) }, this.isPlaying ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: controlsColor }, h("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: controlsColor }, h("path", { d: "M8 5v14l11-7z" })))), this.isDvrEnabled &&
(this.isLive ? (h("div", { class: "time-display" }, formatTimeLive(this.currentTime, this.duration))) : (h("div", { class: "time-display" }, formatTime(this.currentTime), " / ", formatTime(this.duration)))), h("div", { class: "spacer" }), h("div", { class: "volume-control" }, h("button", { class: "control-btn", onClick: () => toggleMute(this) }, this.isMuted || this.volume === 0 ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: controlsColor }, h("path", { d: "M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25A7.003 7.003 0 0 1 14 18.7v2.06A8.99 8.99 0 0 0 17.69 19l2.04 2.04L21 19.73 4.27 3zM12 4L9.91 6.09 12 8.18V4z" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: controlsColor }, h("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" })))), h("input", { type: "range", min: "0", max: "1", step: "0.1", value: this.isMuted ? 0 : this.volume, onInput: e => setVolume(this, parseFloat(e.target.value)), class: "volume-slider", style: {
background: getVolumeSliderBackground(this.isMuted, this.volume),
} })), h("button", { class: "control-btn", onClick: e => toggleSettings(this, e) }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12Z", fill: controlsColor }), h("path", { d: "M12.8804 22.002H11.1204C10.0804 22.002 9.22043 21.152 9.22043 20.102C9.22043 18.292 7.94043 17.552 6.37043 18.462C5.47043 18.982 4.30042 18.672 3.78042 17.762L2.79042 16.032C2.32042 15.242 2.60042 14.222 3.39042 13.752L3.58042 13.642C5.15043 12.742 5.15043 11.262 3.58042 10.352L3.39042 10.242C2.60042 9.77195 2.32042 8.75195 2.79042 7.96195L3.78042 6.23195C4.30042 5.32195 5.47043 5.01195 6.37043 5.53195C7.94043 6.44195 9.22043 5.70195 9.22043 3.89195C9.22043 2.85195 10.0704 1.99195 11.1204 1.99195H12.8804C13.9204 1.99195 14.7804 2.84195 14.7804 3.89195C14.7804 5.70195 16.0604 6.44195 17.6304 5.53195C18.5404 5.01195 19.7004 5.32195 20.2204 6.23195L21.2104 7.96195C21.6804 8.75195 21.4004 9.77195 20.6104 10.242L20.4204 10.352C18.8504 11.252 18.8504 12.732 20.4204 13.642L20.6104 13.752C21.4004 14.222 21.6804 15.242 21.2104 16.032L20.2204 17.762C19.7004 18.672 18.5304 18.982 17.6304 18.462C16.0604 17.552 14.7804 18.292 14.7804 20.102C14.7804 21.152 13.9204 22.002 12.8804 22.002Z", stroke: controlsColor, "stroke-width": "1.8", "stroke-miterlimit": "10", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { class: "control-btn", onClick: () => toggleFullscreen(this) }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M0 1.37143C0 0.614011 0.614009 0 1.37143 0H4.57143C5.20261 0 5.71429 0.511675 5.71429 1.14286C5.71429 1.77404 5.20261 2.28571 4.57143 2.28571H2.28571V4.57143C2.28571 5.20261 1.77404 5.71429 1.14286 5.71429C0.511675 5.71429 0 5.20261 0 4.57143V1.37143ZM10.2857 1.14286C10.2857 0.511675 10.7974 0 11.4286 0H14.6286C15.386 0 16 0.614009 16 1.37143V4.57143C16 5.20261 15.4883 5.71429 14.8571 5.71429C14.226 5.71429 13.7143 5.20261 13.7143 4.57143V2.28571H11.4286C10.7974 2.28571 10.2857 1.77404 10.2857 1.14286ZM13.7143 11.4286C13.7143 10.7974 14.226 10.2857 14.8571 10.2857C15.4883 10.2857 16 10.7974 16 11.4286V14.6286C16 15.386 15.386 16 14.6286 16H11.4286C10.7974 16 10.2857 15.4883 10.2857 14.8571C10.2857 14.226 10.7974 13.7143 11.4286 13.7143H13.7143V11.4286ZM4.57143 13.7143C5.20261 13.7143 5.71429 14.226 5.71429 14.8571C5.71429 15.4883 5.20261 16 4.57143 16H1.37143C0.614011 16 0 15.386 0 14.6286V11.4286C0 10.7974 0.511675 10.2857 1.14286 10.2857C1.77404 10.2857 2.28571 10.7974 2.28571 11.4286V13.7143H4.57143Z", fill: controlsColor }))), this.isLive && this.isDvrEnabled && Math.abs(this.duration - this.currentTime) > 5 && (h("button", { class: "control-btn go-live-button", onClick: () => handleGoLive(this) }, "Go Live"))), this.isDvrEnabled && (h("div", { class: "progress-row" }, h("div", { class: "progress-container" }, h("input", { type: "range", min: "0", step: 1, max: this.duration, value: this.currentTime, onInput: e => seek(this, parseFloat(e.target.value)), class: "progress-slider", style: {
background: getSliderBackground(this.currentTime, this.duration),
} }), h("div", { class: "timeline-markers" }, this.timelineEvents.map(event => (h("div", { class: `timeline-marker`, style: {
left: `${(event.timestamp / this.duration) * 100}%`,
}, "data-tooltip": `${event.name}`, onClick: () => seek(this, event.timestamp) }, !!event.image ? (h("img", { src: event.image, width: "14", height: "10", alt: "event" })) : (h("svg", { width: "8", height: "8" }, h("circle", { cx: "4", cy: "4", r: "4", fill: controlsColor }))))))))))), this.showSettings && (h("div", { class: "settings-menu" }, !this.showQualityOptions && !this.showAudioOptions ? (h("div", { class: "main-settings" }, h("button", { class: "settings-item", onClick: e => {
e.stopPropagation();
this.showQualityOptions = true;
this.showMainSettings = false;
} }, h("span", null, "Quality"), h("span", { class: "selected-option" }, this.currentQuality === -1 ? 'Auto' : this.qualities[this.currentQuality]?.name || 'Auto')), this.audioTracks.length > 1 && (h("button", { class: "settings-item", onClick: e => {
e.stopPropagation();
this.showAudioOptions = true;
this.showMainSettings = false;
} }, h("span", null, "Audio Track"), h("span", { class: "selected-option" }, this.audioTracks[this.currentAudioTrack]?.label || 'Default'))))) : null, this.showQualityOptions && (h("div", { class: "options-panel" }, h("button", { class: "back-button", onClick: e => {
e.stopPropagation();
this.showQualityOptions = false;
this.showMainSettings = true;
} }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "white" }, h("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })), "Quality"), h("div", { class: "options-list" }, h("button", { class: `option-item ${this.currentQuality === -1 ? 'active' : ''}`, onClick: () => {
setQuality(this, -1);
this.showSettings = false;
} }, "Auto"), this.qualities.map((quality, index) => (h("button", { class: `option-item ${this.currentQuality === index ? 'active' : ''}`, onClick: () => {
setQuality(this, index);
this.showSettings = false;
} }, quality.name)))))), this.showAudioOptions && (h("div", { class: "options-panel" }, h("button", { class: "back-button", onClick: e => {
e.stopPropagation();
this.showAudioOptions = false;
this.showMainSettings = true;
} }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "white" }, h("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })), "Audio Track"), h("div", { class: "options-list" }, this.audioTracks.map((track, index) => (h("button", { class: `option-item ${this.currentAudioTrack === index ? 'active' : ''}`, onClick: e => {
e.stopPropagation();
setAudioTrack(this, index);
this.showSettings = false;
} }, track.label || `Track ${index + 1}`)))))))), this.showQuiz &&
renderQuizModal(this, optionIds => handleQuizAnswer(this, optionIds), () => closeQuiz(this)), this.showPoll &&
renderPollModal(this, optionIds => handlePollAnswer(this, optionIds), () => closePoll(this)), this.showStatistics && renderStatsModal(this, () => closeStats(this))))))), !!this.videoTitle && (h("div", { key: '44aeff45436a7abae77dc10e65be84bf50f3750b', id: "spectart-player-meta-data", class: "video-info" }, h("div", { key: 'f5e83029b5c1376e16c9c72f06daf442a22dc696', class: "title-like-container" }, h("p", { key: '50f02f827f8eb76d7491c5d95653702fbcca39fc', class: "video-title" }, this.videoTitle), this.captureReaction && (h("div", { key: 'f368063f1c083d3172c50539909ee267d9c27e0f', class: "rating-container" }, h("button", { key: '4bd8d5a162cf419c5ccb2fcc8c88c71627943909', class: `thumb-btn ${this.isLiked ? 'active' : ''}` }, h("svg", { key: 'b25b1c4d52520f0fdfdae5118d36e61945cf7fe2', width: "20", height: "20", viewBox: "0 0 24 24", onClick: () => toggleLike(this) }, h("path", { key: '2697250182c7f2b1cf3928886d1af637923f14f0', fill: this.isLiked ? primaryColor : 'currentColor', d: "M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z" })), h("span", { key: '81caf44c53c6d8e58ad5fc061bb8867879f276f3', class: "count" }, formatLikeCount(this.totalLikes))), h("p", { key: '9a044d74de79a522030779cc0546f08f1ea67b45', class: "divider" }), h("button", { key: '592c056c16d50ed6e0bef19b45c11b4e0ce23f15', class: `thumb-btn ${this.isDisliked ? 'active' : ''}` }, h("svg", { key: '6a7e421d2204def5a950035b8078027d160c870e', width: "20", height: "20", viewBox: "0 0 24 24", onClick: () => toggleDislike(this) }, h("path", { key: 'af073b10a79019e49ccb0619d78c6d30dde0f33f', fill: this.isDisliked ? primaryColor : 'currentColor', d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.58-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z" })))))), this.videoDescription && (h("div", { key: 'ba3a27d4e5408faf71bf3a42582a2832e1bda59d', class: "description-container" }, !this.isLive && (h("div", { key: '399dfe9635c8de31528f10e64d1611790a87cf54', class: "video-metadata" }, h("span", { key: '222f353c980370d1ffc6f25bed50c65fca9c059e', class: "views" }, this.totalViews, " views"), h("span", { key: '7a63b2a10cbb102809b03b933919a3f1e321dab3', class: "divider" }, "\u2022"), h("span", { key: 'bbba3d9912458ac6249a6b120f8b71dd9555f50a', class: "upload-date" }, formatTimeAgo(this.createdAt)))), h("p", { key: 'd7786bddf8b065d5710769a76d68cf4e0ea741b3', class: `video-description ${!this.showFullDescription ? 'truncated' : ''}` }, this.videoDescription), shouldShowToggle(this) && (h("button", { key: '0b593f66557ea7aff4168ec5971445592d40a9ff', class: "show-more-btn", onClick: () => toggleDescription(this) }, this.showFullDescription ? 'Show Less' : 'Show More'))))))));
}
static get is() { return "video-player"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["video-player.css", "../Quiz/quiz.css", "../Poll/poll.css", "../Stats/stats.css"]
};
}
static get styleUrls() {
return {
"$": ["video-player.css", "../Quiz/quiz.css", "../Poll/poll.css", "../Stats/stats.css"]
};
}
static get properties() {
return {
"videoId": {
"type": "string",
"attribute": "video-id",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
},
"nextVideoId": {
"type": "string",
"attribute": "next-video-id",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
},
"clientId": {
"type": "string",
"attribute": "client-id",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
},
"userId": {
"type": "string",
"attribute": "user-id",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
},
"baseUrl": {
"type": "string",
"attribute": "base-url",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
},
"autoPlay": {
"type": "boolean",
"attribute": "auto-play",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
},
"captureReaction": {
"type": "boolean",
"attribute": "capture-reaction",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
},
"setVideoId": {
"type": "unknown",
"attribute": "set-video-id",
"mutable": false,
"complexType": {
"original": "(id: string) => void",
"resolved": "(id: string) => void",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
}
};
}
static get states() {
return {
"tempVideoId": {},
"src": {},
"token": {},
"isLive": {},
"isDvrEnabled": {},
"quizzes": {},
"polls": {},
"statistics": {},
"scheduleTime": {},
"showStartStream": {},
"timelineEvents": {},
"videoTitle": {},
"videoDescription": {},
"createdAt": {},
"isLiked": {},
"isDisliked": {},
"totalLikes": {},
"totalViews": {},
"poster": {},
"isPlaying": {},
"currentTime": {},
"duration": {},
"volume": {},
"isMuted": {},
"isFullscreen": {},
"showControls": {},
"showSettings": {},
"showQuiz": {},
"showPoll": {},
"showStatistics": {},
"showFullDescription": {},
"currentQuiz": {},
"currentPoll": {},
"currentStatistics": {},
"qualities": {},
"currentQuality": {},
"audioTracks": {},
"currentAudioTrack": {},
"isLoading": {},
"showMainSettings": {},
"showQualityOptions": {},
"showAudioOptions": {},
"hasVideoStarted": {},
"quizAnswered": {},
"pollAnswered": {}
};
}
static get events() {
return [{
"method": "quizTriggered",
"name": "quizTriggered",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "Quiz",
"resolved": "Quiz",
"references": {
"Quiz": {
"location": "import",
"path": "../../types/videoPlayer",
"id": "src/types/videoPlayer.d.ts::Quiz"
}
}
}
}, {
"method": "pollTriggered",
"name": "pollTriggered",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "Poll",
"resolved": "Poll",
"references": {
"Poll": {
"location": "import",
"path": "../../types/videoPlayer",
"id": "src/types/videoPlayer.d.ts::Poll"
}
}
}
}, {
"method": "playVideo",
"name": "playVideo",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "pauseVideo",
"name": "pauseVideo",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "videoCompleted",
"name": "videoCompleted",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "videoError",
"name": "videoError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "videoId",
"methodName": "handleVideoIdChange"
}];
}
}
//# sourceMappingURL=video-player.js.map