spectatr-player-sdk
Version:
A custom video player built with Stencil with Shaka Player integration
316 lines (311 loc) • 10.9 kB
JavaScript
import { h } from "@stencil/core";
import { applyTheme, getUserUUID } from "../utils/control-utils";
export class VideoWrapper {
clientId;
baseUrl = 'https://media-ingestion.antino.ca';
videoId = '';
userId = '';
autoPlay = false;
showSuggestions = true;
captureReaction = true;
theme = 'classic-youtube';
host;
_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 is() { return "spectatr-player-sdk"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["spectatr-player-sdk.css"]
};
}
static get styleUrls() {
return {
"$": ["spectatr-player-sdk.css"]
};
}
static get properties() {
return {
"clientId": {
"type": "string",
"attribute": "clientid",
"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": "baseurl",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'https://media-ingestion.antino.ca'"
},
"videoId": {
"type": "string",
"attribute": "videoid",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"userId": {
"type": "string",
"attribute": "userid",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"autoPlay": {
"type": "boolean",
"attribute": "autoplay",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"showSuggestions": {
"type": "boolean",
"attribute": "showsuggestions",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "true"
},
"captureReaction": {
"type": "boolean",
"attribute": "capturereaction",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "true"
},
"theme": {
"type": "string",
"attribute": "theme",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'classic-youtube'"
}
};
}
static get states() {
return {
"_videoId": {},
"_nextVideoId": {},
"_clientId": {},
"_userId": {},
"_baseUrl": {},
"_autoPlay": {},
"_showSuggestions": {},
"_captureReaction": {},
"_theme": {},
"isIframe": {},
"suggestions": {},
"suggestionsHeight": {}
};
}
static get elementRef() { return "host"; }
}
// listen to an iframe
{
/* <body>
<iframe id="player-iframe" src="player.html"></iframe>
<script>
const iframe = document.getElementById('player-iframe');
// Handle messages from iframe
window.addEventListener('message', (event) => {
// Security check (recommended)
// if (event.origin !== "https://your-player-domain.com") return;
if (event.data.type === 'spectatr-player') {
switch (event.data.event) {
case 'play':
console.log('Playback started');
// Or call your onPlay callback
if (window.onSpectatrPlay) window.onSpectatrPlay();
break;
case 'pause':
console.log('Playback paused');
break;
case 'error':
console.error('Player error:', event.data.data);
break;
}
}
});
// Example of calling methods in iframe
function playVideo() {
const player = iframe.contentWindow.document.querySelector('spectatr-player');
player.play();
}
</script>
</body> */
}
//# sourceMappingURL=spectatr-player-sdk.js.map