chore: update screenshots in readme and sso icon

This commit is contained in:
Trevor Mears
2026-01-18 19:49:22 -08:00
parent 475c50b743
commit 100a26fe4e
11 changed files with 182 additions and 18 deletions
+18 -6
View File
@@ -40,7 +40,10 @@ class HomePage {
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
</button>
<div class="horizontal-scroll channel-tiles" id="favorite-channels-list">
<div class="loading-state">Loading favorites...</div>
<div class="loading-state">
<div class="loading"></div>
<span>Loading favorites...</span>
</div>
</div>
<button class="scroll-arrow scroll-right" aria-label="Scroll right">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
@@ -57,7 +60,10 @@ class HomePage {
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
</button>
<div class="horizontal-scroll" id="continue-watching-list">
<div class="loading-state">Loading history...</div>
<div class="loading-state">
<div class="loading"></div>
<span>Loading history...</span>
</div>
</div>
<button class="scroll-arrow scroll-right" aria-label="Scroll right">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
@@ -74,7 +80,10 @@ class HomePage {
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
</button>
<div class="horizontal-scroll" id="recent-movies-list">
<div class="empty-state">Coming soon</div>
<div class="loading-state">
<div class="loading"></div>
<span>Loading recently added...</span>
</div>
</div>
<button class="scroll-arrow scroll-right" aria-label="Scroll right">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
@@ -91,7 +100,10 @@ class HomePage {
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
</button>
<div class="horizontal-scroll" id="recent-series-list">
<div class="empty-state">Coming soon</div>
<div class="loading-state">
<div class="loading"></div>
<span>Loading recently added...</span>
</div>
</div>
<button class="scroll-arrow scroll-right" aria-label="Scroll right">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
@@ -342,7 +354,7 @@ class HomePage {
try {
const movies = await window.API.request('GET', '/channels/recent?type=movie&limit=12');
if (!movies || movies.length === 0) {
list.innerHTML = '<div class="no-data">No recent movies found</div>';
list.innerHTML = '<div class="empty-state hint">No recently added movies found</div>';
return;
}
@@ -371,7 +383,7 @@ class HomePage {
try {
const series = await window.API.request('GET', '/channels/recent?type=series&limit=12');
if (!series || series.length === 0) {
list.innerHTML = '<div class="no-data">No recent series found</div>';
list.innerHTML = '<div class="empty-state hint">No recently added series found</div>';
return;
}
+47 -2
View File
@@ -61,6 +61,7 @@ class WatchPage {
// Transcode Status
this.transcodeStatusEx = document.getElementById('watch-transcode-status');
this.qualityBadgeEl = document.getElementById('watch-quality-badge');
// State
this.hls = null;
@@ -331,6 +332,33 @@ class WatchPage {
this.transcodeStatusEx.classList.remove('hidden');
}
/**
* Get quality label from video height
*/
getQualityLabel(height) {
if (height >= 2160) return '4K';
if (height >= 1440) return '1440p';
if (height >= 1080) return '1080p';
if (height >= 720) return '720p';
if (height >= 480) return '480p';
if (height > 0) return `${height}p`;
return null;
}
/**
* Update quality badge display
*/
updateQualityBadge() {
if (!this.qualityBadgeEl) return;
if (this.currentStreamInfo?.height > 0) {
this.qualityBadgeEl.textContent = this.getQualityLabel(this.currentStreamInfo.height);
this.qualityBadgeEl.classList.remove('hidden');
} else {
this.qualityBadgeEl.classList.add('hidden');
}
}
async loadVideo(url) {
// Store the URL for copy functionality
this.currentUrl = url;
@@ -361,7 +389,11 @@ class WatchPage {
const ua = settings.userAgentPreset === 'custom' ? settings.userAgentCustom : settings.userAgentPreset;
const probeRes = await fetch(`/api/probe?url=${encodeURIComponent(url)}&ua=${encodeURIComponent(ua || '')}`);
const info = await probeRes.json();
console.log(`[WatchPage] Probe result: video=${info.video}, audio=${info.audio}, compatible=${info.compatible}`);
console.log(`[WatchPage] Probe result: video=${info.video}, audio=${info.audio}, ${info.width}x${info.height}, compatible=${info.compatible}`);
// Store early probe info for quality display
this.currentStreamInfo = info;
this.updateQualityBadge();
if (info.needsTranscode) {
console.log('[WatchPage] Auto: Using HLS transcode session (incompatible audio/video)');
@@ -539,6 +571,12 @@ class WatchPage {
this.stopTranscodeSession();
this.updateTranscodeStatus('hidden');
// Hide quality badge
this.currentStreamInfo = null;
if (this.qualityBadgeEl) {
this.qualityBadgeEl.classList.add('hidden');
}
if (this.hls) {
this.hls.destroy();
this.hls = null;
@@ -656,7 +694,14 @@ class WatchPage {
}
onMetadataLoaded() {
// Duration is unreliable for transcoded streams, so we don't display it
// Detect resolution
if (this.video && this.video.videoHeight > 0) {
this.currentStreamInfo = {
width: this.video.videoWidth,
height: this.video.videoHeight
};
this.updateQualityBadge();
}
// Handle resumption
if (this.resumeTime > 0 && this.video) {