spectatr-player-sdk
Version:
A custom video player built with Stencil with Shaka Player integration
203 lines (202 loc) • 7.52 kB
JavaScript
import { h } from "@stencil/core";
import { fetchSuggestions } from "../../services/videoService";
import { formatTimeAgo } from "../utils/control-utils";
export class VideoSuggestions {
handlePlaySuggestion;
setSuggestions;
baseUrl;
clientId;
videoId;
height;
suggestions = [];
page = 1;
limit = 5;
totalData = 0;
async componentWillLoad() {
const data = await fetchSuggestions(this, this.page, this.limit);
this.suggestions = data.suggestions;
this.totalData = data.totalCount;
this.setSuggestions(data.suggestions);
}
handleSuggestions() {
this.setSuggestions(this.suggestions);
}
formatDuration(durationString) {
const totalSeconds = parseInt(durationString);
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = Math.floor(totalSeconds % 60);
const milliseconds = Math.round((totalSeconds % 1) * 100);
const pad = (num) => num.toString().padStart(2, '0');
if (hours > 0) {
return `${hours}:${pad(minutes)}:${pad(seconds)}`;
}
else {
return `${minutes}:${pad(seconds)}${milliseconds ? `.${milliseconds}` : ''}`;
}
}
async loadMoreSuggestions() {
try {
this.page = this.page + 1;
const data = await fetchSuggestions(this, this.page, this.limit);
this.suggestions = [...this.suggestions, ...data.suggestions];
this.totalData = data.totalCount;
this.setSuggestions(this.suggestions);
}
catch (error) {
this.page -= 1;
}
}
render() {
return (h(h.Fragment, null, !!this.suggestions.length ? (h("div", { class: "suggestions-container", style: this.height ? { height: `${this.height}px` } : { height: '100%' } }, h("p", { class: "suggestion-title" }, "Suggestions"), h("div", { class: "suggestions-list" }, this.suggestions.map(video => (h("div", { class: `suggestion-card ${this.videoId === video.id ? 'selected' : ''}`, onClick: () => this.handlePlaySuggestion(video.id) }, h("div", { class: "thumbnail-container" }, !!video.thumbnailPath ? (h("img", { src: video.thumbnailPath, alt: video.title })) : (h("video", { src: video.outputFilePath, controls: false, autoPlay: false, preload: "metadata" })), h("span", { class: "duration" }, this.formatDuration(video.duration))), h("div", { class: "suggestion-info" }, h("h4", { class: "title" }, video.title, " "), h("p", { class: "meta" }, formatTimeAgo(video.createdAt)))))), this.suggestions.length < this.totalData && (h("div", { class: "load-more-container" }, h("button", { onClick: () => this.loadMoreSuggestions(), class: "load-more-btn" }, "Load More")))))) : (h(h.Fragment, null))));
}
static get is() { return "video-suggestions"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["Suggestions.css"]
};
}
static get styleUrls() {
return {
"$": ["Suggestions.css"]
};
}
static get properties() {
return {
"handlePlaySuggestion": {
"type": "unknown",
"attribute": "handle-play-suggestion",
"mutable": false,
"complexType": {
"original": "(id: string) => void",
"resolved": "(id: string) => void",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
},
"setSuggestions": {
"type": "unknown",
"attribute": "set-suggestions",
"mutable": false,
"complexType": {
"original": "(suggestions: Suggestion[]) => void",
"resolved": "(suggestions: Suggestion[]) => void",
"references": {
"Suggestion": {
"location": "import",
"path": "../../types/videoPlayer",
"id": "src/types/videoPlayer.d.ts::Suggestion"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": 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
},
"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
},
"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
},
"height": {
"type": "number",
"attribute": "height",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get states() {
return {
"suggestions": {},
"page": {},
"limit": {},
"totalData": {}
};
}
static get watchers() {
return [{
"propName": "suggestions",
"methodName": "handleSuggestions"
}];
}
}
//# sourceMappingURL=Suggestions.js.map