spectatr-player-sdk
Version:
A custom video player built with Stencil with Shaka Player integration
96 lines (92 loc) • 6.24 kB
JavaScript
import { p as proxyCustomElement, H, i as fetchSuggestions, h } from './p-Bqc1mM21.js';
import { i as formatTimeAgo } from './p-CjB1Ea9v.js';
const suggestionsCss = ":host{max-width:30%;display:flex;overflow:auto;padding-right:4px}::-webkit-scrollbar{width:4px;height:8px}::-webkit-scrollbar-thumb{background:var(--vp-text);border-radius:4px}::-webkit-scrollbar-track{background:var(--vp-primary-bg)}.suggestions-container{width:100%;display:flex;flex-direction:column;gap:8px;overflow:hidden}.suggestion-title{color:var(--vp-text);font-size:1rem;font-weight:500;margin:0%;font-family:var(--title-font)}@media (max-width: 768px){:host{min-width:100%;max-width:100%;height:100%;display:block;padding-right:0px}.Suggestion-title{font-size:0.7rem}.suggestions-container{padding-right:0px}}.suggestions-list{display:block;flex:1;gap:6px;overflow-y:auto;font-family:var(--description-font)}.suggestion-card{display:flex;gap:12px;height:77px;cursor:pointer;align-items:flex-start;overflow:hidden;border-radius:2px;padding:4px}.suggestions-list .selected{background:rgba(0, 0, 0, 0.2);opacity:0.9}.thumbnail-container{position:relative;flex-shrink:0;width:130px;height:100%;background:black;border-radius:4px;overflow:hidden}.thumbnail-container img{width:100%;height:100%;object-fit:cover;border-radius:4px}.duration{position:absolute;bottom:4px;right:4px;background-color:rgba(0, 0, 0, 0.8);color:#fff;font-size:11px;padding:2px 4px;border-radius:2px}.suggestion-info{display:flex;flex-direction:column;font-size:14px;flex:1;min-width:0}.suggestion-info .title{font-weight:600;margin-bottom:4px;line-height:1.2;word-break:break-word;color:var(--vp-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.suggestion-info .channel{color:var(--vp-text);font-size:13px;font-weight:thin}.suggestion-info .meta{color:#909090;font-size:12px}h4,p{margin:0}.load-more-container{display:flex;justify-content:center;align-items:center}.load-more-btn{padding:0.4rem 0.8rem;font-size:0.8rem;font-weight:600;color:var(--vp-video-text);background-color:var(--vp-accent);border:none;border-radius:0.375rem;cursor:pointer;transition:all 0.2s ease;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}";
const VideoSuggestions = /*@__PURE__*/ proxyCustomElement(class VideoSuggestions extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
}
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 watchers() { return {
"suggestions": ["handleSuggestions"]
}; }
static get style() { return suggestionsCss; }
}, [1, "video-suggestions", {
"handlePlaySuggestion": [16, "handle-play-suggestion"],
"setSuggestions": [16, "set-suggestions"],
"baseUrl": [1, "base-url"],
"clientId": [1, "client-id"],
"videoId": [1, "video-id"],
"height": [2],
"suggestions": [32],
"page": [32],
"limit": [32],
"totalData": [32]
}, undefined, {
"suggestions": ["handleSuggestions"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["video-suggestions"];
components.forEach(tagName => { switch (tagName) {
case "video-suggestions":
if (!customElements.get(tagName)) {
customElements.define(tagName, VideoSuggestions);
}
break;
} });
}
defineCustomElement();
export { VideoSuggestions as V, defineCustomElement as d };
//# sourceMappingURL=p-DTUsBej9.js.map
//# sourceMappingURL=p-DTUsBej9.js.map