fix(panels): consistent LIVE header pattern across news and webcams panels (#1367)

Remove redundant "LIVE" text from count badges (title already says LIVE),
replace the middle "LIVE" text indicator with a compact play/pause icon
button next to mute. Both panels now follow: LIVE TITLE + count + controls.
This commit is contained in:
Elie Habib
2026-03-10 08:21:55 +04:00
committed by GitHub
parent d3dcc53c85
commit 4ddc5bbbe9
2 changed files with 5 additions and 8 deletions

View File

@@ -655,24 +655,20 @@ export class LiveNewsPanel extends Panel {
private createLiveButton(): void {
this.liveBtn = document.createElement('button');
this.liveBtn.className = 'live-indicator-btn';
this.liveBtn.className = 'live-mute-btn';
this.liveBtn.title = 'Toggle playback';
this.updateLiveIndicator();
this.liveBtn.addEventListener('click', (e) => {
e.stopPropagation();
this.togglePlayback();
});
const header = this.element.querySelector('.panel-header');
header?.appendChild(this.liveBtn);
}
private updateLiveIndicator(): void {
if (!this.liveBtn) return;
this.liveBtn.innerHTML = this.isPlaying
? '<span class="live-dot"></span>Live'
: '<span class="live-dot paused"></span>Paused';
this.liveBtn.classList.toggle('paused', !this.isPlaying);
? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>'
: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
}
private togglePlayback(): void {
@@ -698,6 +694,7 @@ export class LiveNewsPanel extends Panel {
});
const header = this.element.querySelector('.panel-header');
if (this.liveBtn) header?.appendChild(this.liveBtn);
header?.appendChild(this.muteBtn);
this.createFullscreenButton();

View File

@@ -638,7 +638,7 @@ export class Panel {
if (!headerLeft) return;
const badge = document.createElement('span');
badge.className = 'panel-live-count';
badge.textContent = `${count} live`;
badge.textContent = `${count}`;
headerLeft.appendChild(badge);
}