kamma/xtream-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improved

Browse Source
This commit is contained in:
Radek Davidek 2026-03-04 15:40:58 +01:00
parent c5d5685734
commit 234fea1a71
2 changed files with 116 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/main/resources/web/assets/app.js
View File

@ -896,7 +896,9 @@
el.favoritesList.innerHTML = "";
filtered.forEach((favorite) => {
const li = document.createElement("li");
li.className = "stream-item";
const favoriteTone = favoriteToneClass(favorite);
const favoriteBadge = favoriteBadgeLabel(favorite);
li.className = `stream-item favorite-item ${favoriteTone}`;
const isSeriesItem = favorite?.mode === "series_item";
const isLiveCategory = favorite?.mode === "live_category";
const isVodCategory = favorite?.mode === "vod_category";
@ -914,7 +916,7 @@
? `
<div>
<button type="button" class="stream-title stream-link" data-action="toggle-favorite-series">${isSeriesItemExpanded ? "Hide" : "Show"} ${esc(favorite.title || "Untitled")}</button>
<div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
<div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
</div>
<div class="stream-actions">
<button type="button" data-action="remove-favorite" class="danger">Remove</button>
@ -924,7 +926,7 @@
? `
<div>
<button type="button" class="stream-title stream-link" data-action="toggle-favorite-live-category">${isLiveCategoryExpanded ? "Hide" : "Show"} ${esc(favorite.title || "Untitled")}</button>
<div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
<div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
</div>
<div class="stream-actions">
<button type="button" data-action="remove-favorite" class="danger">Remove</button>
@ -934,7 +936,7 @@
? `
<div>
<button type="button" class="stream-title stream-link" data-action="toggle-favorite-vod-category">${isVodCategoryExpanded ? "Hide" : "Show"} ${esc(favorite.title || "Untitled")}</button>
<div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
<div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
</div>
<div class="stream-actions">
<button type="button" data-action="remove-favorite" class="danger">Remove</button>
@ -944,7 +946,7 @@
? `
<div>
<button type="button" class="stream-title stream-link" data-action="toggle-favorite-series-category">${isSeriesCategoryExpanded ? "Hide" : "Show"} ${esc(favorite.title || "Untitled")}</button>
<div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
<div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
</div>
<div class="stream-actions">
<button type="button" data-action="remove-favorite" class="danger">Remove</button>
@ -953,7 +955,7 @@
: `
<div>
<button type="button" class="stream-title stream-link" data-action="open-favorite">${esc(favorite.title || "Untitled")}</button>
<div class="stream-meta">${esc(favoriteSummary(favorite))}</div>
<div class="stream-meta"><span class="fav-type-badge">${esc(favoriteBadge)}</span>${esc(favoriteSummary(favorite))}</div>
</div>
<div class="stream-actions">
<button type="button" data-action="remove-favorite" class="danger">Remove</button>
@ -1541,6 +1543,52 @@
return mode;
}
function favoriteToneClass(favorite) {
const mode = String(favorite?.mode || "").toLowerCase();
if (mode === "live" || mode === "live_category") {
return "fav-tone-live";
}
if (mode === "vod" || mode === "vod_category") {
return "fav-tone-vod";
}
if (mode === "series_item" || mode === "series_episode" || mode === "series_category") {
return "fav-tone-series";
}
if (mode === "custom") {
return "fav-tone-custom";
}
return "fav-tone-other";
}
function favoriteBadgeLabel(favorite) {
const mode = String(favorite?.mode || "").toLowerCase();
if (mode === "live") {
return "LIVE";
}
if (mode === "live_category") {
return "LIVE CATEGORY";
}
if (mode === "vod") {
return "VOD";
}
if (mode === "vod_category") {
return "VOD CATEGORY";
}
if (mode === "series_item") {
return "SERIES";
}
if (mode === "series_episode") {
return "EPISODE";
}
if (mode === "series_category") {
return "SERIES CATEGORY";
}
if (mode === "custom") {
return "CUSTOM";
}
return "FAVORITE";
}
function makeFavoriteLive(item) {
const streamId = String(item?.stream_id || "");
return {

62
src/main/resources/web/assets/style.css
View File

@ -275,6 +275,68 @@ progress::-moz-progress-bar {
line-height: 1;
}
.favorite-item {
border-left-width: 4px;
}
.fav-type-badge {
display: inline-block;
margin-right: 0.45rem;
padding: 0.05rem 0.38rem;
border-radius: 999px;
font-size: 0.67rem;
letter-spacing: 0.05rem;
font-weight: 700;
color: var(--text);
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.08);
}
.favorite-item.fav-tone-live {
border-left-color: #56d6c8;
}
.favorite-item.fav-tone-live .fav-type-badge {
background: rgba(86, 214, 200, 0.18);
border-color: rgba(86, 214, 200, 0.45);
}
.favorite-item.fav-tone-vod {
border-left-color: #f2b95c;
}
.favorite-item.fav-tone-vod .fav-type-badge {
background: rgba(242, 185, 92, 0.2);
border-color: rgba(242, 185, 92, 0.45);
}
.favorite-item.fav-tone-series {
border-left-color: #9cb7ff;
}
.favorite-item.fav-tone-series .fav-type-badge {
background: rgba(156, 183, 255, 0.2);
border-color: rgba(156, 183, 255, 0.45);
}
.favorite-item.fav-tone-custom {
border-left-color: #f08fd1;
}
.favorite-item.fav-tone-custom .fav-type-badge {
background: rgba(240, 143, 209, 0.2);
border-color: rgba(240, 143, 209, 0.45);
}
.favorite-item.fav-tone-other {
border-left-color: #8da2b3;
}
.favorite-item.fav-tone-other .fav-type-badge {
background: rgba(141, 162, 179, 0.2);
border-color: rgba(141, 162, 179, 0.45);
}
.player-panel {
position: sticky;
top: 0.6rem;