spectatr-player-sdk/dist/components/spectatr-player-sdk.js

A custom video player built with Stencil with Shaka Player integration

import { p as proxyCustomElement, H, h } from './p-Bqc1mM21.js';
import { g as getUserUUID, a as applyTheme } from './p-CjB1Ea9v.js';
import { d as defineCustomElement$3 } from './p--KMl3FE8.js';
import { d as defineCustomElement$2 } from './p-DTUsBej9.js';

const spectatrPlayerSdkCss = ":host{display:block;position:relative;float:calc(50%);width:100%;height:100%;background:var(--vp-primary-bg);--title-font:'Inter', -apple-system, sans-serif;--description-font:'SF Pro Text', system-ui, sans-serif;padding:2px;border-radius:4px}.video-wrapper-container{display:flex;justify-content:space-between;height:100%;gap:1.5rem}@media (max-width: 768px){.video-wrapper-container{flex-direction:column;gap:2rem}}";

const VideoWrapper = /*@__PURE__*/ proxyCustomElement(class VideoWrapper extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    clientId;
    baseUrl = 'https://media-ingestion.antino.ca';
    videoId = '';
    userId = '';
    autoPlay = false;
    showSuggestions = true;
    captureReaction = true;
    theme = 'classic-youtube';
    get host() { return this; }
    _videoId;
    _nextVideoId;
    _clientId;
    _userId;
    _baseUrl;
    _autoPlay;
    _showSuggestions;
    _captureReaction;
    _theme;
    isIframe = false;
    suggestions = [];
    suggestionsHeight = 0;
    componentWillLoad() {
        this.isIframe = window.self !== window.top;
        // Extract query parameters from the URL
        const queryParams = new URLSearchParams(window.location.search);
        // Override props with query params if they exist
        this._videoId = queryParams.get('videoId') || this.videoId;
        this._clientId = queryParams.get('clientId') || this.clientId;
        this._userId = getUserUUID(queryParams.get('userId') || this.userId);
        this._baseUrl = queryParams.get('baseUrl') || this.baseUrl;
        this._autoPlay = queryParams.get('autoPlay') ? queryParams.get('autoPlay') === 'true' : this.autoPlay;
        this._showSuggestions = queryParams.get('showSuggestions') ? queryParams.get('showSuggestions') === 'true' : this.showSuggestions;
        this._captureReaction = queryParams.get('captureReaction') ? queryParams.get('captureReaction') === 'true' : this.captureReaction;
        this._theme = queryParams.get('theme') ?? this.theme;
        const root = document.documentElement;
        applyTheme(this._theme, root);
    }
    setPlayerHeight() {
        const videoContainer = this.host.shadowRoot.querySelector('video-player');
        if (!videoContainer) {
            return;
        }
        const videoPlayerShadowRoot = videoContainer.shadowRoot;
        if (!videoContainer)
            return;
        const videoElement = videoPlayerShadowRoot.querySelector('#spectart-video-player')?.clientHeight;
        const videoMetaElement = videoPlayerShadowRoot.querySelector('.video-info')?.clientHeight;
        this.suggestionsHeight = videoElement + (videoMetaElement ?? 10);
    }
    setNextVideoId() {
        if (!this.suggestions.length)
            return;
        let idx = -1;
        idx = this.suggestions.findIndex(suggestion => suggestion.id === this._videoId);
        if (idx >= 0 && idx < this.suggestions.length - 1) {
            this._nextVideoId = this.suggestions[idx + 1].id;
        }
        else if (idx < 0) {
            this._nextVideoId = this.suggestions[0].id;
        }
    }
    setVideoId = (videoId) => {
        if (!videoId)
            return;
        this._videoId = videoId;
        this.setNextVideoId();
        this.setPlayerHeight();
    };
    setSuggestions = (suggestions) => {
        this.suggestions = suggestions;
        this.setPlayerHeight();
        this.setNextVideoId();
    };
    render() {
        if (!this._clientId) {
            console.error('Please provide client id to the player to proceed.');
            return;
        }
        return (h("div", { class: "video-wrapper-container" }, h("video-player", { autoPlay: this._autoPlay, captureReaction: this._captureReaction, videoId: this._videoId, userId: this._userId, clientId: this._clientId, baseUrl: this._baseUrl, setVideoId: this.setVideoId, nextVideoId: this._nextVideoId }), this._showSuggestions && (h("video-suggestions", { baseUrl: this._baseUrl, height: this.suggestionsHeight, clientId: this._clientId, setSuggestions: this.setSuggestions, videoId: this._videoId, handlePlaySuggestion: this.setVideoId }))));
    }
    static get style() { return spectatrPlayerSdkCss; }
}, [1, "spectatr-player-sdk", {
        "clientId": [1, "clientid"],
        "baseUrl": [1, "baseurl"],
        "videoId": [1, "videoid"],
        "userId": [1, "userid"],
        "autoPlay": [4, "autoplay"],
        "showSuggestions": [4, "showsuggestions"],
        "captureReaction": [4, "capturereaction"],
        "theme": [1],
        "_videoId": [32],
        "_nextVideoId": [32],
        "_clientId": [32],
        "_userId": [32],
        "_baseUrl": [32],
        "_autoPlay": [32],
        "_showSuggestions": [32],
        "_captureReaction": [32],
        "_theme": [32],
        "isIframe": [32],
        "suggestions": [32],
        "suggestionsHeight": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["spectatr-player-sdk", "video-player", "video-suggestions"];
    components.forEach(tagName => { switch (tagName) {
        case "spectatr-player-sdk":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VideoWrapper);
            }
            break;
        case "video-player":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "video-suggestions":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const SpectatrPlayerSdk = VideoWrapper;
const defineCustomElement = defineCustomElement$1;

export { SpectatrPlayerSdk, defineCustomElement };
//# sourceMappingURL=spectatr-player-sdk.js.map

//# sourceMappingURL=spectatr-player-sdk.js.map