dtourolle/jellyLMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Added sync group page and settings
Some checks failed
Build Plugin / build (push) Failing after 10s
Details

Browse Source
This commit is contained in:
Duncan Tourolle 2025-12-14 11:25:58 +01:00
parent 52120529ff
commit 9723c13bd3
6 changed files with 529 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Jellyfin.Plugin.JellyLMS/Configuration/configPage.html
View File

@ -95,6 +95,19 @@
</div> </div>
</div> </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>
</div>
<div class="fieldDescription" style="margin-top: 10px;">
Users can access this page directly at: <code>/web/configurationpage?name=JellyLMS%20Sync</code>
</div>
</div>
<div> <div>
<button is="emby-button" type="submit" class="raised button-submit block emby-button"> <button is="emby-button" type="submit" class="raised button-submit block emby-button">
<span>Save</span> <span>Save</span>

490
Jellyfin.Plugin.JellyLMS/Configuration/syncPage.html Normal file
View File

@ -0,0 +1,490 @@
<!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>

2
Jellyfin.Plugin.JellyLMS/Jellyfin.Plugin.JellyLMS.csproj
View File

@ -27,7 +27,9 @@
<ItemGroup> <ItemGroup>
<None Remove="Configuration\configPage.html" /> <None Remove="Configuration\configPage.html" />
<None Remove="Configuration\syncPage.html" />
<EmbeddedResource Include="Configuration\configPage.html" /> <EmbeddedResource Include="Configuration\configPage.html" />
<EmbeddedResource Include="Configuration\syncPage.html" />
</ItemGroup> </ItemGroup>
</Project> </Project>

5
Jellyfin.Plugin.JellyLMS/Plugin.cs
View File

@ -49,6 +49,11 @@ public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
{ {
Name = Name, Name = Name,
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Configuration.configPage.html", GetType().Namespace) EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Configuration.configPage.html", GetType().Namespace)
},
new PluginPageInfo
{
Name = "JellyLMS Sync",
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Configuration.syncPage.html", GetType().Namespace)
} }
]; ];
} }

5
Jellyfin.Plugin.JellyLMS/Services/LmsDeviceDiscoveryService.cs
View File

@ -5,6 +5,7 @@ using System.Threading;
using System.Threading.Tasks; using System.Threading.Tasks;
using Jellyfin.Data.Enums; using Jellyfin.Data.Enums;
using Jellyfin.Plugin.JellyLMS.Models; using Jellyfin.Plugin.JellyLMS.Models;
using MediaBrowser.Controller.Library;
using MediaBrowser.Controller.Session; using MediaBrowser.Controller.Session;
using MediaBrowser.Model.Session; using MediaBrowser.Model.Session;
using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.DependencyInjection;
@ -177,13 +178,15 @@ public class LmsDeviceDiscoveryService : IHostedService, IDisposable
var isNew = !_registeredDeviceIds.ContainsKey(player.MacAddress); var isNew = !_registeredDeviceIds.ContainsKey(player.MacAddress);
// Add our controller to the session using EnsureController pattern // Add our controller to the session using EnsureController pattern
var libraryManager = _serviceProvider.GetRequiredService<ILibraryManager>();
var (controller, created) = session.EnsureController<LmsSessionController>( var (controller, created) = session.EnsureController<LmsSessionController>(
s => new LmsSessionController( s => new LmsSessionController(
_logger, _logger,
_lmsClient, _lmsClient,
player, player,
s, s,
sessionManager)); sessionManager,
libraryManager));
if (created) if (created)
{ {

17
Jellyfin.Plugin.JellyLMS/Services/LmsSessionController.cs
View File

@ -3,6 +3,8 @@ using System.Text.Json;
using System.Threading; using System.Threading;
using System.Threading.Tasks; using System.Threading.Tasks;
using Jellyfin.Plugin.JellyLMS.Models; using Jellyfin.Plugin.JellyLMS.Models;
using MediaBrowser.Controller.Entities;
using MediaBrowser.Controller.Library;
using MediaBrowser.Controller.Session; using MediaBrowser.Controller.Session;
using MediaBrowser.Model.Session; using MediaBrowser.Model.Session;
using Microsoft.Extensions.Logging; using Microsoft.Extensions.Logging;
@ -20,8 +22,10 @@ public class LmsSessionController : ISessionController, IDisposable
private readonly LmsPlayer _player; private readonly LmsPlayer _player;
private readonly SessionInfo _session; private readonly SessionInfo _session;
private readonly ISessionManager _sessionManager; private readonly ISessionManager _sessionManager;
private readonly ILibraryManager _libraryManager;
private Timer? _progressTimer; private Timer? _progressTimer;
private bool _disposed; private bool _disposed;
private BaseItem? _currentItem;
/// <summary> /// <summary>
/// Initializes a new instance of the <see cref="LmsSessionController"/> class. /// Initializes a new instance of the <see cref="LmsSessionController"/> class.
@ -31,18 +35,21 @@ public class LmsSessionController : ISessionController, IDisposable
/// <param name="player">The LMS player this controller manages.</param> /// <param name="player">The LMS player this controller manages.</param>
/// <param name="session">The Jellyfin session associated with this controller.</param> /// <param name="session">The Jellyfin session associated with this controller.</param>
/// <param name="sessionManager">The session manager for reporting playback events.</param> /// <param name="sessionManager">The session manager for reporting playback events.</param>
/// <param name="libraryManager">The library manager for item lookups.</param>
public LmsSessionController( public LmsSessionController(
ILogger logger, ILogger logger,
ILmsApiClient lmsClient, ILmsApiClient lmsClient,
LmsPlayer player, LmsPlayer player,
SessionInfo session, SessionInfo session,
ISessionManager sessionManager) ISessionManager sessionManager,
ILibraryManager libraryManager)
{ {
_logger = logger; _logger = logger;
_lmsClient = lmsClient; _lmsClient = lmsClient;
_player = player; _player = player;
_session = session; _session = session;
_sessionManager = sessionManager; _sessionManager = sessionManager;
_libraryManager = libraryManager;
} }
/// <summary> /// <summary>
@ -145,6 +152,9 @@ public class LmsSessionController : ISessionController, IDisposable
IsPlaying = true; IsPlaying = true;
IsPaused = false; IsPaused = false;
// Look up the item for duration info
_currentItem = _libraryManager.GetItemById(itemId);
// Seek to start position if specified // Seek to start position if specified
var startPositionTicks = 0L; var startPositionTicks = 0L;
if (playRequest.StartPositionTicks.HasValue && playRequest.StartPositionTicks.Value > 0) if (playRequest.StartPositionTicks.HasValue && playRequest.StartPositionTicks.Value > 0)
@ -177,7 +187,10 @@ public class LmsSessionController : ISessionController, IDisposable
IsMuted = false IsMuted = false
}; };
_logger.LogInformation("Reporting playback start for item {ItemId}", itemId); _logger.LogInformation(
"Reporting playback start for item {ItemId}, duration: {Duration}",
itemId,
_currentItem?.RunTimeTicks);
await _sessionManager.OnPlaybackStart(startInfo).ConfigureAwait(false); await _sessionManager.OnPlaybackStart(startInfo).ConfigureAwait(false);
} }
catch (Exception ex) catch (Exception ex)