update readme
improve scrubbing improve syncing gui
This commit is contained in:
@@ -3,6 +3,64 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>JellyLMS</title>
|
||||
<style>
|
||||
.sync-group {
|
||||
border: 2px solid #00a4dc;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
background: rgba(0, 164, 220, 0.05);
|
||||
}
|
||||
.sync-group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sync-group-players {
|
||||
color: #ccc;
|
||||
}
|
||||
.player-sync-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
.player-sync-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.player-sync-checkbox {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.player-sync-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
.player-sync-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #888;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.status-dot.on { background: #52b54b; }
|
||||
.status-dot.standby { background: #f9a825; }
|
||||
.status-dot.off { background: #f44336; }
|
||||
.sync-actions {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
#syncStatus {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="JellyLmsConfigPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox">
|
||||
@@ -73,18 +131,6 @@
|
||||
</label>
|
||||
<div class="fieldDescription checkboxFieldDescription">Automatically sync players when playing to multiple devices</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verticalSection">
|
||||
<h3>LMS Players</h3>
|
||||
<div id="playersList">
|
||||
<p>Click "Refresh Players" to discover LMS players.</p>
|
||||
</div>
|
||||
<div>
|
||||
<button is="emby-button" type="button" id="btnRefreshPlayers" class="raised button-alt block emby-button">
|
||||
<span>Refresh Players</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="inputContainer" style="margin-top: 15px;">
|
||||
<label class="inputLabel inputLabelUnfocused" for="DefaultPlayerMac">Default Player</label>
|
||||
@@ -96,15 +142,25 @@
|
||||
</div>
|
||||
|
||||
<div class="verticalSection">
|
||||
<h3>Player Sync Management</h3>
|
||||
<p>Manage synchronized playback groups for multi-room audio.</p>
|
||||
<div>
|
||||
<a is="emby-button" href="configurationpage?name=JellyLMS%20Sync" class="raised button-alt block emby-button" style="display: inline-block; text-decoration: none;">
|
||||
<span>Open Sync Manager</span>
|
||||
</a>
|
||||
<h3>Player Sync</h3>
|
||||
<p class="fieldDescription">Select players to sync together for multi-room audio. Synced players play in perfect sync.</p>
|
||||
|
||||
<div id="currentSyncGroups">
|
||||
<!-- Existing sync groups shown here -->
|
||||
</div>
|
||||
<div class="fieldDescription" style="margin-top: 10px;">
|
||||
Users can access this page directly at: <code>/web/configurationpage?name=JellyLMS%20Sync</code>
|
||||
|
||||
<div id="playerSyncList">
|
||||
<p>Loading players...</p>
|
||||
</div>
|
||||
|
||||
<div class="sync-actions">
|
||||
<button is="emby-button" type="button" id="btnSyncSelected" class="raised button-submit emby-button" disabled>
|
||||
<span>Sync Selected</span>
|
||||
</button>
|
||||
<button is="emby-button" type="button" id="btnRefreshPlayers" class="raised button-alt emby-button">
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
<span id="syncStatus"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -118,45 +174,34 @@
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var JellyLmsConfig = {
|
||||
pluginUniqueId: 'a5b8c9d0-1e2f-3a4b-5c6d-7e8f9a0b1c2d'
|
||||
pluginUniqueId: 'a5b8c9d0-1e2f-3a4b-5c6d-7e8f9a0b1c2d',
|
||||
players: [],
|
||||
syncGroups: []
|
||||
};
|
||||
|
||||
function getStatusClass(player) {
|
||||
if (!player.IsConnected) return 'off';
|
||||
return player.IsPoweredOn ? 'on' : 'standby';
|
||||
}
|
||||
|
||||
function getStatusText(player) {
|
||||
if (!player.IsConnected) return 'Disconnected';
|
||||
return player.IsPoweredOn ? 'On' : 'Standby';
|
||||
}
|
||||
|
||||
function loadPlayers() {
|
||||
var playersList = document.querySelector('#playersList');
|
||||
var defaultSelect = document.querySelector('#DefaultPlayerMac');
|
||||
var currentDefault = defaultSelect.value;
|
||||
|
||||
playersList.innerHTML = '<p>Loading players...</p>';
|
||||
|
||||
ApiClient.ajax({
|
||||
url: ApiClient.getUrl('JellyLms/Players', { refresh: true }),
|
||||
type: 'GET',
|
||||
dataType: 'json'
|
||||
}).then(function(players) {
|
||||
JellyLmsConfig.players = players || [];
|
||||
defaultSelect.innerHTML = '<option value="">None</option>';
|
||||
|
||||
if (!players || players.length === 0) {
|
||||
playersList.innerHTML = '<p>No players found. Make sure LMS is running and has connected players.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '<table class="tblGenres detailTable" style="width: 100%;">';
|
||||
html += '<thead><tr><th>Name</th><th>Model</th><th>Status</th><th>Volume</th><th>Synced</th></tr></thead>';
|
||||
html += '<tbody>';
|
||||
|
||||
players.forEach(function(player) {
|
||||
var status = player.IsConnected ? (player.IsPoweredOn ? 'On' : 'Standby') : 'Disconnected';
|
||||
var statusColor = player.IsConnected ? (player.IsPoweredOn ? 'green' : 'orange') : 'red';
|
||||
var syncStatus = player.IsSynced ? 'Yes' : 'No';
|
||||
|
||||
html += '<tr>';
|
||||
html += '<td>' + player.Name + '</td>';
|
||||
html += '<td>' + player.Model + '</td>';
|
||||
html += '<td style="color: ' + statusColor + ';">' + status + '</td>';
|
||||
html += '<td>' + player.Volume + '%</td>';
|
||||
html += '<td>' + syncStatus + '</td>';
|
||||
html += '</tr>';
|
||||
|
||||
var option = document.createElement('option');
|
||||
option.value = player.MacAddress;
|
||||
option.text = player.Name;
|
||||
@@ -166,14 +211,179 @@
|
||||
defaultSelect.appendChild(option);
|
||||
});
|
||||
|
||||
html += '</tbody></table>';
|
||||
playersList.innerHTML = html;
|
||||
renderPlayerList();
|
||||
}).catch(function(err) {
|
||||
playersList.innerHTML = '<p style="color: red;">Error loading players. Check LMS connection.</p>';
|
||||
document.querySelector('#playerSyncList').innerHTML = '<p style="color: red;">Error loading players. Check LMS connection.</p>';
|
||||
console.error('Error loading players:', err);
|
||||
});
|
||||
}
|
||||
|
||||
function loadSyncGroups() {
|
||||
ApiClient.ajax({
|
||||
url: ApiClient.getUrl('JellyLms/SyncGroups'),
|
||||
type: 'GET',
|
||||
dataType: 'json'
|
||||
}).then(function(groups) {
|
||||
JellyLmsConfig.syncGroups = groups || [];
|
||||
renderSyncGroups();
|
||||
renderPlayerList();
|
||||
}).catch(function(err) {
|
||||
console.error('Error loading sync groups:', err);
|
||||
});
|
||||
}
|
||||
|
||||
function renderSyncGroups() {
|
||||
var container = document.querySelector('#currentSyncGroups');
|
||||
var groups = JellyLmsConfig.syncGroups;
|
||||
|
||||
if (!groups || groups.length === 0) {
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '';
|
||||
groups.forEach(function(group) {
|
||||
var playerNames = [];
|
||||
var masterPlayer = JellyLmsConfig.players.find(function(p) { return p.MacAddress === group.MasterMac; });
|
||||
if (masterPlayer) playerNames.push(masterPlayer.Name);
|
||||
|
||||
group.SlaveMacs.forEach(function(mac) {
|
||||
var player = JellyLmsConfig.players.find(function(p) { return p.MacAddress === mac; });
|
||||
if (player) playerNames.push(player.Name);
|
||||
});
|
||||
|
||||
html += '<div class="sync-group">';
|
||||
html += '<div class="sync-group-header">';
|
||||
html += '<span class="sync-group-players">' + playerNames.join(' + ') + '</span>';
|
||||
html += '<button is="emby-button" type="button" class="raised button-alt emby-button btnUnsyncGroup" data-master="' + group.MasterMac + '">';
|
||||
html += '<span>Unsync</span>';
|
||||
html += '</button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
|
||||
container.querySelectorAll('.btnUnsyncGroup').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
unsyncGroup(this.getAttribute('data-master'));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderPlayerList() {
|
||||
var container = document.querySelector('#playerSyncList');
|
||||
var players = JellyLmsConfig.players;
|
||||
|
||||
if (!players || players.length === 0) {
|
||||
container.innerHTML = '<p>No players found. Make sure LMS is running.</p>';
|
||||
updateSyncButton();
|
||||
return;
|
||||
}
|
||||
|
||||
// Get MACs of already synced players
|
||||
var syncedMacs = new Set();
|
||||
JellyLmsConfig.syncGroups.forEach(function(group) {
|
||||
syncedMacs.add(group.MasterMac);
|
||||
group.SlaveMacs.forEach(function(mac) { syncedMacs.add(mac); });
|
||||
});
|
||||
|
||||
// Only show unsynced players
|
||||
var unsyncedPlayers = players.filter(function(p) {
|
||||
return !syncedMacs.has(p.MacAddress);
|
||||
});
|
||||
|
||||
if (unsyncedPlayers.length === 0) {
|
||||
container.innerHTML = '<p>All players are synced.</p>';
|
||||
updateSyncButton();
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '';
|
||||
unsyncedPlayers.forEach(function(player) {
|
||||
var statusClass = getStatusClass(player);
|
||||
html += '<div class="player-sync-row">';
|
||||
html += '<input type="checkbox" class="player-sync-checkbox" data-mac="' + player.MacAddress + '" id="sync-' + player.MacAddress + '">';
|
||||
html += '<label class="player-sync-name" for="sync-' + player.MacAddress + '">' + player.Name + '</label>';
|
||||
html += '<div class="player-sync-status">';
|
||||
html += '<span class="status-dot ' + statusClass + '"></span>';
|
||||
html += '<span>' + getStatusText(player) + '</span>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
|
||||
// Add change listeners
|
||||
container.querySelectorAll('.player-sync-checkbox').forEach(function(cb) {
|
||||
cb.addEventListener('change', updateSyncButton);
|
||||
});
|
||||
|
||||
updateSyncButton();
|
||||
}
|
||||
|
||||
function getSelectedMacs() {
|
||||
var checkboxes = document.querySelectorAll('.player-sync-checkbox:checked');
|
||||
var macs = [];
|
||||
checkboxes.forEach(function(cb) {
|
||||
macs.push(cb.getAttribute('data-mac'));
|
||||
});
|
||||
return macs;
|
||||
}
|
||||
|
||||
function updateSyncButton() {
|
||||
var btn = document.querySelector('#btnSyncSelected');
|
||||
var selected = getSelectedMacs();
|
||||
btn.disabled = selected.length < 2;
|
||||
}
|
||||
|
||||
function syncSelected() {
|
||||
var macs = getSelectedMacs();
|
||||
if (macs.length < 2) return;
|
||||
|
||||
var statusDiv = document.querySelector('#syncStatus');
|
||||
statusDiv.innerHTML = '<span style="color: orange;">Syncing...</span>';
|
||||
|
||||
// First MAC becomes master (arbitrary, user doesn't need to know)
|
||||
var masterMac = macs[0];
|
||||
var slaveMacs = macs.slice(1);
|
||||
|
||||
ApiClient.ajax({
|
||||
url: ApiClient.getUrl('JellyLms/SyncGroups'),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({
|
||||
MasterMac: masterMac,
|
||||
SlaveMacs: slaveMacs
|
||||
})
|
||||
}).then(function() {
|
||||
statusDiv.innerHTML = '<span style="color: green;">Synced!</span>';
|
||||
setTimeout(function() {
|
||||
statusDiv.innerHTML = '';
|
||||
loadSyncGroups();
|
||||
}, 1500);
|
||||
}).catch(function(err) {
|
||||
statusDiv.innerHTML = '<span style="color: red;">Failed to sync.</span>';
|
||||
console.error('Error syncing:', err);
|
||||
});
|
||||
}
|
||||
|
||||
function unsyncGroup(masterMac) {
|
||||
var statusDiv = document.querySelector('#syncStatus');
|
||||
statusDiv.innerHTML = '<span style="color: orange;">Unsyncing...</span>';
|
||||
|
||||
ApiClient.ajax({
|
||||
url: ApiClient.getUrl('JellyLms/SyncGroups/' + encodeURIComponent(masterMac)),
|
||||
type: 'DELETE'
|
||||
}).then(function() {
|
||||
statusDiv.innerHTML = '';
|
||||
loadSyncGroups();
|
||||
}).catch(function(err) {
|
||||
statusDiv.innerHTML = '<span style="color: red;">Failed to unsync.</span>';
|
||||
console.error('Error unsyncing:', err);
|
||||
});
|
||||
}
|
||||
|
||||
function testConnection() {
|
||||
var statusDiv = document.querySelector('#connectionStatus');
|
||||
statusDiv.innerHTML = '<span style="color: orange;">Testing connection...</span>';
|
||||
@@ -186,6 +396,7 @@
|
||||
if (result.IsConnected) {
|
||||
statusDiv.innerHTML = '<span style="color: green;">Connected! Found ' + result.PlayerCount + ' player(s).</span>';
|
||||
loadPlayers();
|
||||
loadSyncGroups();
|
||||
} else {
|
||||
statusDiv.innerHTML = '<span style="color: red;">Connection failed: ' + (result.LastError || 'Unknown error') + '</span>';
|
||||
}
|
||||
@@ -208,6 +419,9 @@
|
||||
document.querySelector('#EnableAutoSync').checked = config.EnableAutoSync !== false;
|
||||
document.querySelector('#DefaultPlayerMac').value = config.DefaultPlayerMac || '';
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
loadPlayers();
|
||||
loadSyncGroups();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -226,6 +440,12 @@
|
||||
document.querySelector('#btnRefreshPlayers')
|
||||
.addEventListener('click', function() {
|
||||
loadPlayers();
|
||||
loadSyncGroups();
|
||||
});
|
||||
|
||||
document.querySelector('#btnSyncSelected')
|
||||
.addEventListener('click', function() {
|
||||
syncSelected();
|
||||
});
|
||||
|
||||
document.querySelector('#JellyLmsConfigForm')
|
||||
|
||||
@@ -1,490 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>LMS Player Sync</title>
|
||||
<style>
|
||||
.sync-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.player-card {
|
||||
border: 1px solid #444;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
min-width: 200px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.player-card.synced {
|
||||
border-color: #00a4dc;
|
||||
}
|
||||
.player-card.master {
|
||||
border-color: #52b54b;
|
||||
border-width: 2px;
|
||||
}
|
||||
.player-name {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.player-info {
|
||||
color: #888;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.player-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.status-dot.on { background: #52b54b; }
|
||||
.status-dot.standby { background: #f9a825; }
|
||||
.status-dot.off { background: #f44336; }
|
||||
.sync-group {
|
||||
border: 2px dashed #00a4dc;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
background: rgba(0, 164, 220, 0.05);
|
||||
}
|
||||
.sync-group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.sync-group-title {
|
||||
font-weight: bold;
|
||||
color: #00a4dc;
|
||||
}
|
||||
.sync-group-players {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.sync-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.sync-badge.master {
|
||||
background: #52b54b;
|
||||
color: white;
|
||||
}
|
||||
.sync-badge.slave {
|
||||
background: #00a4dc;
|
||||
color: white;
|
||||
}
|
||||
.unsynced-section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.create-sync-section {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 8px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.player-checkbox-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.player-checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.player-checkbox-item:hover {
|
||||
border-color: #00a4dc;
|
||||
}
|
||||
.player-checkbox-item.selected {
|
||||
border-color: #52b54b;
|
||||
background: rgba(82, 181, 75, 0.1);
|
||||
}
|
||||
.player-checkbox-item.master-selected {
|
||||
border-color: #52b54b;
|
||||
border-width: 2px;
|
||||
}
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.volume-slider {
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.help-text {
|
||||
color: #888;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="JellyLmsSyncPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox">
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
<h2>LMS Player Sync Management</h2>
|
||||
<p>Manage synchronized playback groups for your LMS players. Synced players will play audio in perfect sync.</p>
|
||||
|
||||
<div>
|
||||
<button is="emby-button" type="button" id="btnRefresh" class="raised button-alt emby-button">
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="syncGroupsSection" style="margin-top: 20px;">
|
||||
<h3>Current Sync Groups</h3>
|
||||
<div id="syncGroupsList">
|
||||
<p>Loading sync groups...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="unsyncedPlayersSection" class="unsynced-section">
|
||||
<h3>Available Players</h3>
|
||||
<div id="unsyncedPlayersList">
|
||||
<p>Loading players...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="create-sync-section">
|
||||
<h3>Create Sync Group</h3>
|
||||
<p class="help-text">Select players to sync together. The first selected player will be the master (controls playback).</p>
|
||||
|
||||
<div id="playerSelectionList" class="player-checkbox-list">
|
||||
<!-- Players will be populated here -->
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button is="emby-button" type="button" id="btnCreateSync" class="raised button-submit emby-button" disabled>
|
||||
<span>Create Sync Group</span>
|
||||
</button>
|
||||
<button is="emby-button" type="button" id="btnClearSelection" class="raised button-alt emby-button">
|
||||
<span>Clear Selection</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="syncStatus" style="margin-top: 10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var JellyLmsSync = {
|
||||
pluginUniqueId: 'a5b8c9d0-1e2f-3a4b-5c6d-7e8f9a0b1c2d',
|
||||
players: [],
|
||||
syncGroups: [],
|
||||
selectedPlayers: []
|
||||
};
|
||||
|
||||
function getStatusClass(player) {
|
||||
if (!player.IsConnected) return 'off';
|
||||
return player.IsPoweredOn ? 'on' : 'standby';
|
||||
}
|
||||
|
||||
function getStatusText(player) {
|
||||
if (!player.IsConnected) return 'Disconnected';
|
||||
return player.IsPoweredOn ? 'On' : 'Standby';
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
Promise.all([
|
||||
ApiClient.ajax({
|
||||
url: ApiClient.getUrl('JellyLms/Players', { refresh: true }),
|
||||
type: 'GET',
|
||||
dataType: 'json'
|
||||
}),
|
||||
ApiClient.ajax({
|
||||
url: ApiClient.getUrl('JellyLms/SyncGroups'),
|
||||
type: 'GET',
|
||||
dataType: 'json'
|
||||
})
|
||||
]).then(function(results) {
|
||||
JellyLmsSync.players = results[0] || [];
|
||||
JellyLmsSync.syncGroups = results[1] || [];
|
||||
renderSyncGroups();
|
||||
renderUnsyncedPlayers();
|
||||
renderPlayerSelection();
|
||||
}).catch(function(err) {
|
||||
console.error('Error loading data:', err);
|
||||
document.querySelector('#syncGroupsList').innerHTML = '<p style="color: red;">Error loading data. Check LMS connection.</p>';
|
||||
});
|
||||
}
|
||||
|
||||
function renderSyncGroups() {
|
||||
var container = document.querySelector('#syncGroupsList');
|
||||
var groups = JellyLmsSync.syncGroups;
|
||||
|
||||
if (!groups || groups.length === 0) {
|
||||
container.innerHTML = '<p>No sync groups configured. Create one below!</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '';
|
||||
groups.forEach(function(group) {
|
||||
html += '<div class="sync-group">';
|
||||
html += '<div class="sync-group-header">';
|
||||
html += '<span class="sync-group-title">Sync Group (' + group.PlayerCount + ' players)</span>';
|
||||
html += '<button is="emby-button" type="button" class="raised button-alt emby-button btnDissolveGroup" data-master="' + group.MasterMac + '">';
|
||||
html += '<span>Dissolve Group</span>';
|
||||
html += '</button>';
|
||||
html += '</div>';
|
||||
html += '<div class="sync-group-players">';
|
||||
|
||||
// Master player
|
||||
var masterPlayer = JellyLmsSync.players.find(function(p) { return p.MacAddress === group.MasterMac; });
|
||||
if (masterPlayer) {
|
||||
html += renderPlayerCard(masterPlayer, true, false);
|
||||
}
|
||||
|
||||
// Slave players
|
||||
group.SlaveMacs.forEach(function(slaveMac, index) {
|
||||
var slavePlayer = JellyLmsSync.players.find(function(p) { return p.MacAddress === slaveMac; });
|
||||
if (slavePlayer) {
|
||||
html += renderPlayerCard(slavePlayer, false, true, group.SlaveNames[index]);
|
||||
}
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
|
||||
// Attach event listeners for dissolve buttons
|
||||
container.querySelectorAll('.btnDissolveGroup').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
dissolveGroup(this.getAttribute('data-master'));
|
||||
});
|
||||
});
|
||||
|
||||
// Attach event listeners for unsync buttons
|
||||
container.querySelectorAll('.btnUnsyncPlayer').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
unsyncPlayer(this.getAttribute('data-mac'));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderPlayerCard(player, isMaster, isSlave, slaveName) {
|
||||
var statusClass = getStatusClass(player);
|
||||
var cardClass = 'player-card';
|
||||
if (isMaster) cardClass += ' master';
|
||||
else if (isSlave) cardClass += ' synced';
|
||||
|
||||
var html = '<div class="' + cardClass + '">';
|
||||
html += '<div class="player-name">' + player.Name;
|
||||
if (isMaster) html += '<span class="sync-badge master">Master</span>';
|
||||
else if (isSlave) html += '<span class="sync-badge slave">Synced</span>';
|
||||
html += '</div>';
|
||||
html += '<div class="player-info">' + player.Model + '</div>';
|
||||
html += '<div class="player-status">';
|
||||
html += '<span class="status-dot ' + statusClass + '"></span>';
|
||||
html += '<span>' + getStatusText(player) + '</span>';
|
||||
html += '<span style="margin-left: auto;">Vol: ' + player.Volume + '%</span>';
|
||||
html += '</div>';
|
||||
|
||||
if (isSlave) {
|
||||
html += '<button is="emby-button" type="button" class="raised button-alt emby-button btnUnsyncPlayer" data-mac="' + player.MacAddress + '" style="width: 100%; margin-top: 5px;">';
|
||||
html += '<span>Unsync</span>';
|
||||
html += '</button>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderUnsyncedPlayers() {
|
||||
var container = document.querySelector('#unsyncedPlayersList');
|
||||
var syncedMacs = new Set();
|
||||
|
||||
JellyLmsSync.syncGroups.forEach(function(group) {
|
||||
syncedMacs.add(group.MasterMac);
|
||||
group.SlaveMacs.forEach(function(mac) { syncedMacs.add(mac); });
|
||||
});
|
||||
|
||||
var unsyncedPlayers = JellyLmsSync.players.filter(function(p) {
|
||||
return !syncedMacs.has(p.MacAddress);
|
||||
});
|
||||
|
||||
if (unsyncedPlayers.length === 0) {
|
||||
container.innerHTML = '<p>All players are in sync groups.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '<div class="sync-container">';
|
||||
unsyncedPlayers.forEach(function(player) {
|
||||
html += renderPlayerCard(player, false, false);
|
||||
});
|
||||
html += '</div>';
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function renderPlayerSelection() {
|
||||
var container = document.querySelector('#playerSelectionList');
|
||||
var players = JellyLmsSync.players;
|
||||
|
||||
if (!players || players.length === 0) {
|
||||
container.innerHTML = '<p>No players available.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Only show unsynced players for selection
|
||||
var syncedMacs = new Set();
|
||||
JellyLmsSync.syncGroups.forEach(function(group) {
|
||||
syncedMacs.add(group.MasterMac);
|
||||
group.SlaveMacs.forEach(function(mac) { syncedMacs.add(mac); });
|
||||
});
|
||||
|
||||
var availablePlayers = players.filter(function(p) {
|
||||
return !syncedMacs.has(p.MacAddress);
|
||||
});
|
||||
|
||||
if (availablePlayers.length < 2) {
|
||||
container.innerHTML = '<p>Need at least 2 unsynced players to create a sync group.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '';
|
||||
availablePlayers.forEach(function(player) {
|
||||
var isSelected = JellyLmsSync.selectedPlayers.indexOf(player.MacAddress) !== -1;
|
||||
var isMaster = JellyLmsSync.selectedPlayers.length > 0 && JellyLmsSync.selectedPlayers[0] === player.MacAddress;
|
||||
var statusClass = getStatusClass(player);
|
||||
|
||||
var itemClass = 'player-checkbox-item';
|
||||
if (isSelected) itemClass += ' selected';
|
||||
if (isMaster) itemClass += ' master-selected';
|
||||
|
||||
html += '<div class="' + itemClass + '" data-mac="' + player.MacAddress + '">';
|
||||
html += '<span class="status-dot ' + statusClass + '"></span>';
|
||||
html += '<span>' + player.Name + '</span>';
|
||||
if (isMaster) html += '<span class="sync-badge master">Master</span>';
|
||||
else if (isSelected) html += '<span class="sync-badge slave">Slave</span>';
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
|
||||
// Attach click listeners
|
||||
container.querySelectorAll('.player-checkbox-item').forEach(function(item) {
|
||||
item.addEventListener('click', function() {
|
||||
togglePlayerSelection(this.getAttribute('data-mac'));
|
||||
});
|
||||
});
|
||||
|
||||
updateCreateButton();
|
||||
}
|
||||
|
||||
function togglePlayerSelection(mac) {
|
||||
var index = JellyLmsSync.selectedPlayers.indexOf(mac);
|
||||
if (index === -1) {
|
||||
JellyLmsSync.selectedPlayers.push(mac);
|
||||
} else {
|
||||
JellyLmsSync.selectedPlayers.splice(index, 1);
|
||||
}
|
||||
renderPlayerSelection();
|
||||
}
|
||||
|
||||
function updateCreateButton() {
|
||||
var btn = document.querySelector('#btnCreateSync');
|
||||
btn.disabled = JellyLmsSync.selectedPlayers.length < 2;
|
||||
}
|
||||
|
||||
function createSyncGroup() {
|
||||
if (JellyLmsSync.selectedPlayers.length < 2) return;
|
||||
|
||||
var statusDiv = document.querySelector('#syncStatus');
|
||||
statusDiv.innerHTML = '<span style="color: orange;">Creating sync group...</span>';
|
||||
|
||||
var masterMac = JellyLmsSync.selectedPlayers[0];
|
||||
var slaveMacs = JellyLmsSync.selectedPlayers.slice(1);
|
||||
|
||||
ApiClient.ajax({
|
||||
url: ApiClient.getUrl('JellyLms/SyncGroups'),
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({
|
||||
MasterMac: masterMac,
|
||||
SlaveMacs: slaveMacs
|
||||
})
|
||||
}).then(function() {
|
||||
statusDiv.innerHTML = '<span style="color: green;">Sync group created successfully!</span>';
|
||||
JellyLmsSync.selectedPlayers = [];
|
||||
setTimeout(function() {
|
||||
statusDiv.innerHTML = '';
|
||||
loadData();
|
||||
}, 1500);
|
||||
}).catch(function(err) {
|
||||
statusDiv.innerHTML = '<span style="color: red;">Failed to create sync group.</span>';
|
||||
console.error('Error creating sync group:', err);
|
||||
});
|
||||
}
|
||||
|
||||
function dissolveGroup(masterMac) {
|
||||
if (!confirm('Dissolve this sync group? All players will be unsynced.')) return;
|
||||
|
||||
ApiClient.ajax({
|
||||
url: ApiClient.getUrl('JellyLms/SyncGroups/' + encodeURIComponent(masterMac)),
|
||||
type: 'DELETE'
|
||||
}).then(function() {
|
||||
loadData();
|
||||
}).catch(function(err) {
|
||||
alert('Failed to dissolve sync group.');
|
||||
console.error('Error dissolving sync group:', err);
|
||||
});
|
||||
}
|
||||
|
||||
function unsyncPlayer(mac) {
|
||||
ApiClient.ajax({
|
||||
url: ApiClient.getUrl('JellyLms/SyncGroups/Players/' + encodeURIComponent(mac)),
|
||||
type: 'DELETE'
|
||||
}).then(function() {
|
||||
loadData();
|
||||
}).catch(function(err) {
|
||||
alert('Failed to unsync player.');
|
||||
console.error('Error unsyncing player:', err);
|
||||
});
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
JellyLmsSync.selectedPlayers = [];
|
||||
renderPlayerSelection();
|
||||
}
|
||||
|
||||
document.querySelector('#JellyLmsSyncPage')
|
||||
.addEventListener('pageshow', function() {
|
||||
loadData();
|
||||
});
|
||||
|
||||
document.querySelector('#btnRefresh')
|
||||
.addEventListener('click', function() {
|
||||
loadData();
|
||||
});
|
||||
|
||||
document.querySelector('#btnCreateSync')
|
||||
.addEventListener('click', function() {
|
||||
createSyncGroup();
|
||||
});
|
||||
|
||||
document.querySelector('#btnClearSelection')
|
||||
.addEventListener('click', function() {
|
||||
clearSelection();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user