Skip to content

Commit 3ed82b0

Browse files
ardoviniandreaardoviniandrea
authored
Update multiview.js
1 parent f937f13 commit 3ed82b0

1 file changed

Lines changed: 21 additions & 14 deletions

File tree

‎public/js/modules/multiview.js‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import { appState, guideState, UIElements } from './state.js';
88
import { apiFetch } from './api.js';
99
import { showNotification, openModal, closeModal, showConfirm } from './ui.js';
10+
import { ICONS } from './icons.js'; // MODIFIED: Import the new icon library
1011

1112
let grid;
1213
const players = new Map(); // Stores player instances (mpegts) by widget ID
@@ -153,17 +154,17 @@ function addPlayerWidget(channel = null, layout = {}) {
153154
<div class="player-header">
154155
<span class="player-header-title">No Channel</span>
155156
<div class="player-controls">
156-
<button class="select-channel-btn" title="Select Channel"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></button>
157-
<button class="mute-btn" title="Mute"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" id="mute-icon-${widgetId}"><path d="M5.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h3.5a.75.75 0 00.75-.75V3.75A.75.75 0 009.25 3h-3.5zM14.25 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h3.5a.75.75 0 00.75-.75V3.75a.75.75 0 00-.75-.75h-3.5z"></path></svg></button>
157+
<button class="select-channel-btn" title="Select Channel">${ICONS.selectChannel}</button>
158+
<button class="mute-btn" title="Mute">${ICONS.unmute}</button>
158159
<input type="range" min="0" max="1" step="0.05" value="0.5" class="volume-slider">
159-
<button class="fullscreen-btn" title="Fullscreen"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M3 8.75A.75.75 0 013.75 8h4.5a.75.75 0 010 1.5h-3.25v3.25a.75.75 0 01-1.5 0V8.75zM11.25 3a.75.75 0 01.75.75v3.25h3.25a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75V3.75A.75.75 0 0111.25 3zM8.75 17a.75.75 0 01-.75-.75v-3.25H4.75a.75.75 0 010-1.5h4.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75zM17 11.25a.75.75 0 01-.75.75h-3.25v3.25a.75.75 0 01-1.5 0v-4.5a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75z"></path></svg></button>
160-
<button class="stop-btn" title="Stop Channel"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2H5z"></path></svg></button>
161-
<button class="remove-widget-btn" title="Remove Player"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" /></svg></button>
160+
<button class="fullscreen-btn" title="Fullscreen">${ICONS.fullscreen}</button>
161+
<button class="stop-btn" title="Stop Channel">${ICONS.stop}</button>
162+
<button class="remove-widget-btn" title="Remove Player">${ICONS.removeWidget}</button>
162163
</div>
163164
</div>
164165
<div class="player-body">
165166
<div class="player-placeholder" id="${widgetId}" data-channel-id="">
166-
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
167+
${ICONS.placeholderPlay}
167168
<span>Click to Select Channel</span>
168169
</div>
169170
<video class="hidden w-full h-full object-contain" muted></video>
@@ -342,21 +343,21 @@ function attachWidgetEventListeners(widgetContentEl, widgetId) {
342343
}
343344
});
344345

345-
widgetContentEl.querySelector('.mute-btn').addEventListener('click', (e) => {
346+
// MODIFIED: Updated mute button logic to replace the whole icon
347+
const muteBtn = widgetContentEl.querySelector('.mute-btn');
348+
muteBtn.addEventListener('click', (e) => {
346349
e.stopPropagation();
347350
videoEl.muted = !videoEl.muted;
348-
const muteIcon = document.getElementById(`mute-icon-${widgetId}`);
349-
if (muteIcon) {
350-
muteIcon.innerHTML = videoEl.muted
351-
? `<path fill-rule="evenodd" d="M10 1a.75.75 0 00-1.06.04L4.854 5.146A.75.75 0 004.5 5.5v9a.75.75 0 00.22.53l5.43 5.43a.75.75 0 001.28-.53V1.5A.75.75 0 0010 1zM8.5 6.54v6.92L5.25 10.21V5.79L8.5 6.54zM12.5 5a.75.75 0 01.75.75v8.5a.75.75 0 01-1.5 0v-8.5a.75.75 0 01.75-.75zM15.5 5a.75.75 0 01.75.75v8.5a.75.75 0 01-1.5 0v-8.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />`
352-
: `<path d="M5.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h3.5a.75.75 0 00.75-.75V3.75A.75.75 0 009.25 3h-3.5zM14.25 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h3.5a.75.75 0 00.75-.75V3.75a.75.75 0 00-.75-.75h-3.5z"></path>`;
353-
}
351+
muteBtn.innerHTML = videoEl.muted ? ICONS.mute : ICONS.unmute;
354352
});
355353

356354
widgetContentEl.querySelector('.volume-slider').addEventListener('input', (e) => {
357355
e.stopPropagation();
358356
videoEl.volume = parseFloat(e.target.value);
359-
if (videoEl.volume > 0) videoEl.muted = false;
357+
if (videoEl.volume > 0) {
358+
videoEl.muted = false;
359+
muteBtn.innerHTML = ICONS.unmute;
360+
}
360361
});
361362

362363
widgetContentEl.querySelector('.fullscreen-btn').addEventListener('click', (e) => {
@@ -385,6 +386,9 @@ function setActivePlayer(widgetId) {
385386
oldActiveWidgetContent.classList.remove('active-player');
386387
const oldVideo = oldActiveWidgetContent.querySelector('video');
387388
if (oldVideo) oldVideo.muted = true;
389+
// MODIFIED: Update the mute icon in the old player
390+
const oldMuteBtn = oldActiveWidgetContent.querySelector('.mute-btn');
391+
if (oldMuteBtn) oldMuteBtn.innerHTML = ICONS.mute;
388392
}
389393

390394
const newActivePlaceholder = document.getElementById(widgetId);
@@ -395,6 +399,9 @@ function setActivePlayer(widgetId) {
395399
const videoEl = newActiveWidgetContent.querySelector('video');
396400
if (videoEl) {
397401
videoEl.muted = false;
402+
// MODIFIED: Update the mute icon in the new player
403+
const newMuteBtn = newActiveWidgetContent.querySelector('.mute-btn');
404+
if (newMuteBtn) newMuteBtn.innerHTML = ICONS.unmute;
398405
}
399406
}
400407
activePlayerId = widgetId;

0 commit comments

Comments
 (0)