new build system

inject controls in homepage

.gitea/workflows/build.yaml

@@ -15,44 +15,51 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: linux/amd64
+    container:
+      image: gitea.tourolle.paris/dtourolle/jellylms-builder:latest
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          path: build-${{ github.run_id }}
 
-      - name: Verify .NET installation
-        run: dotnet --version
+      - name: Cache NuGet packages
+        uses: actions/cache@v3
+        with:
+          path: ~/.nuget/packages
+          key: nuget-${{ hashFiles('**/Jellyfin.Plugin.JellyLMS.csproj') }}
+          restore-keys: nuget-
 
       - name: Restore dependencies
+        working-directory: build-${{ github.run_id }}
         run: dotnet restore Jellyfin.Plugin.JellyLMS.sln
 
       - name: Build solution
-        run: dotnet build Jellyfin.Plugin.JellyLMS.sln --configuration Release --no-restore --no-self-contained
-
-      - name: Install JPRM
-        run: |
-          python3 -m venv /tmp/jprm-venv
-          /tmp/jprm-venv/bin/pip install jprm
+        working-directory: build-${{ github.run_id }}
+        run: dotnet build Jellyfin.Plugin.JellyLMS.sln --configuration Release --no-restore --no-self-contained /m:1
 
       - name: Build Jellyfin Plugin
         id: jprm
+        working-directory: build-${{ github.run_id }}
         run: |
-          # Create artifacts directory for JPRM output
           mkdir -p artifacts
-
-          # Build plugin using JPRM
-          /tmp/jprm-venv/bin/jprm --verbosity=debug plugin build .
-
-          # Find the generated zip file
-          ARTIFACT=$(find . -name "*.zip" -type f -print -quit)
-          echo "artifact=${ARTIFACT}" >> $GITHUB_OUTPUT
-          echo "Found artifact: ${ARTIFACT}"
+          jprm --verbosity=debug plugin build .
+          ARTIFACT=$(find . -name "*.zip" -type f -print -quit | sed 's|^\./||')
+          LATEST="artifacts/jellylms_latest.zip"
+          cp "${ARTIFACT}" "${LATEST}"
+          echo "artifact=${LATEST}" >> $GITHUB_OUTPUT
+          echo "Found artifact: ${ARTIFACT} -> ${LATEST}"
 
       - name: Upload build artifact
         uses: actions/upload-artifact@v3
         with:
           name: jellylms-plugin
-          path: ${{ steps.jprm.outputs.artifact }}
+          path: build-${{ github.run_id }}/${{ steps.jprm.outputs.artifact }}
           retention-days: 30
           if-no-files-found: error
+
+      - name: Cleanup
+        if: always()
+        run: rm -rf build-${{ github.run_id }}

.gitea/workflows/release.yaml

@@ -13,14 +13,15 @@ on:
 
 jobs:
   build-and-release:
-    runs-on: ubuntu-latest
+    runs-on: linux/amd64
+    container:
+      image: gitea.tourolle.paris/dtourolle/jellylms-builder:latest
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-
-      - name: Verify .NET installation
-        run: dotnet --version
+        with:
+          path: release-${{ github.run_id }}
 
       - name: Get version
         id: get_version
@@ -35,39 +36,41 @@ jobs:
           echo "Building version: ${VERSION}"
 
       - name: Update build.yaml with version
+        working-directory: release-${{ github.run_id }}
         run: |
           VERSION="${{ steps.get_version.outputs.version_number }}"
           sed -i "s/^version:.*/version: \"${VERSION}\"/" build.yaml
           cat build.yaml
 
+      - name: Cache NuGet packages
+        uses: actions/cache@v3
+        with:
+          path: ~/.nuget/packages
+          key: nuget-${{ hashFiles('**/Jellyfin.Plugin.JellyLMS.csproj') }}
+          restore-keys: nuget-
+
       - name: Restore dependencies
+        working-directory: release-${{ github.run_id }}
         run: dotnet restore Jellyfin.Plugin.JellyLMS.sln
 
       - name: Build solution
-        run: dotnet build Jellyfin.Plugin.JellyLMS.sln --configuration Release --no-restore --no-self-contained
-
-      - name: Install JPRM
-        run: |
-          python3 -m venv /tmp/jprm-venv
-          /tmp/jprm-venv/bin/pip install jprm
+        working-directory: release-${{ github.run_id }}
+        run: dotnet build Jellyfin.Plugin.JellyLMS.sln --configuration Release --no-restore --no-self-contained /m:1
 
       - name: Build Jellyfin Plugin
         id: jprm
+        working-directory: release-${{ github.run_id }}
         run: |
-          # Create artifacts directory for JPRM output
           mkdir -p artifacts
-
-          # Build plugin using JPRM
-          /tmp/jprm-venv/bin/jprm --verbosity=debug plugin build ./
-
-          # Find the generated zip file
-          ARTIFACT=$(find . -name "*.zip" -type f -print -quit)
+          jprm --verbosity=debug plugin build ./
+          ARTIFACT=$(find . -name "*.zip" -type f -print -quit | sed 's|^\./||')
           ARTIFACT_NAME=$(basename "${ARTIFACT}")
           echo "artifact=${ARTIFACT}" >> $GITHUB_OUTPUT
           echo "artifact_name=${ARTIFACT_NAME}" >> $GITHUB_OUTPUT
           echo "Found artifact: ${ARTIFACT}"
 
       - name: Create Release
+        working-directory: release-${{ github.run_id }}
         env:
           GITEA_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
@@ -126,13 +129,20 @@ jobs:
 
       - name: Calculate checksum
         id: checksum
+        working-directory: release-${{ github.run_id }}
         run: |
           CHECKSUM=$(md5sum "${{ steps.jprm.outputs.artifact }}" | awk '{print $1}')
           echo "checksum=${CHECKSUM}" >> $GITHUB_OUTPUT
           echo "MD5 checksum: ${CHECKSUM}"
 
       - name: Update manifest.json
+        working-directory: release-${{ github.run_id }}
         run: |
+          git config user.name "Gitea Actions"
+          git config user.email "actions@gitea.tourolle.paris"
+          git fetch origin master
+          git checkout master
+
           VERSION="${{ steps.get_version.outputs.version_number }}"
           CHECKSUM="${{ steps.checksum.outputs.checksum }}"
           TIMESTAMP=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
@@ -163,11 +173,14 @@ jobs:
           cat manifest.json
 
       - name: Commit and push manifest
+        working-directory: release-${{ github.run_id }}
         env:
           GITEA_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          git config user.name "Gitea Actions"
-          git config user.email "actions@gitea.tourolle.paris"
           git add manifest.json
           git commit -m "Update manifest.json for ${{ steps.get_version.outputs.version }}"
-          git push origin HEAD:master
+          git push origin master
+
+      - name: Cleanup
+        if: always()
+        run: rm -rf release-${{ github.run_id }}

Dockerfile.builder

@@ -0,0 +1,19 @@
+# JellyLMS Builder Image
+# Pre-built image with .NET SDK and JPRM for building Jellyfin plugins
+# Build: docker build -f Dockerfile.builder -t gitea.tourolle.paris/dtourolle/jellylms-builder:latest .
+# Push:  docker push gitea.tourolle.paris/dtourolle/jellylms-builder:latest
+
+FROM mcr.microsoft.com/dotnet/sdk:9.0
+
+RUN apt-get update && apt-get install -y \
+    python3 \
+    python3-pip \
+    git \
+    jq \
+    nodejs \
+    npm \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN pip install --break-system-packages jprm
+
+WORKDIR /src

Jellyfin.Plugin.JellyLMS/Api/JellyLmsController.cs

@@ -3,8 +3,10 @@ using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
 using System.Linq;
 using System.Net.Mime;
+using System.Reflection;
 using System.Threading.Tasks;
 using Jellyfin.Data.Enums;
+using Jellyfin.Database.Implementations.Enums;
 using Jellyfin.Plugin.JellyLMS.Models;
 using Jellyfin.Plugin.JellyLMS.Services;
 using MediaBrowser.Controller.Entities;
@@ -29,6 +31,7 @@ public class JellyLmsController : ControllerBase
     private readonly ILmsApiClient _lmsClient;
     private readonly LmsPlayerManager _playerManager;
     private readonly ILibraryManager _libraryManager;
+    private readonly IUserManager _userManager;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="JellyLmsController"/> class.
@@ -36,14 +39,54 @@ public class JellyLmsController : ControllerBase
     /// <param name="lmsClient">The LMS API client.</param>
     /// <param name="playerManager">The player manager.</param>
     /// <param name="libraryManager">The library manager.</param>
+    /// <param name="userManager">The user manager.</param>
     public JellyLmsController(
         ILmsApiClient lmsClient,
         LmsPlayerManager playerManager,
-        ILibraryManager libraryManager)
+        ILibraryManager libraryManager,
+        IUserManager userManager)
     {
         _lmsClient = lmsClient;
         _playerManager = playerManager;
         _libraryManager = libraryManager;
+        _userManager = userManager;
+    }
+
+    /// <summary>
+    /// Determines whether the current user is allowed to use the multi-room remote
+    /// control features (administrators, or users granted the
+    /// "Allow remote control of other users" permission).
+    /// </summary>
+    /// <returns><c>true</c> if the user may use remote control endpoints.</returns>
+    private bool HasRemoteControlAccess()
+    {
+        var username = User.Identity?.Name;
+        if (string.IsNullOrEmpty(username))
+        {
+            return false;
+        }
+
+        var user = _userManager.GetUserByName(username);
+        if (user is null)
+        {
+            return false;
+        }
+
+        return HasPermission(user, PermissionKind.IsAdministrator)
+            || HasPermission(user, PermissionKind.EnableRemoteControlOfOtherUsers);
+    }
+
+    private static bool HasPermission(Jellyfin.Database.Implementations.Entities.User user, PermissionKind kind)
+    {
+        foreach (var permission in user.Permissions)
+        {
+            if (permission.Kind == kind)
+            {
+                return permission.Value;
+            }
+        }
+
+        return false;
     }
 
     /// <summary>
@@ -65,8 +108,14 @@ public class JellyLmsController : ControllerBase
     /// <returns>List of players.</returns>
     [HttpGet("Players")]
     [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
     public async Task<ActionResult<List<LmsPlayer>>> GetPlayers([FromQuery] bool refresh = false)
     {
+        if (!HasRemoteControlAccess())
+        {
+            return Forbid();
+        }
+
         var players = await _playerManager.GetPlayersAsync(refresh).ConfigureAwait(false);
         return Ok(players);
     }
@@ -78,9 +127,15 @@ public class JellyLmsController : ControllerBase
     /// <returns>The player details.</returns>
     [HttpGet("Players/{mac}")]
     [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
     [ProducesResponseType(StatusCodes.Status404NotFound)]
     public async Task<ActionResult<LmsPlayer>> GetPlayer(string mac)
     {
+        if (!HasRemoteControlAccess())
+        {
+            return Forbid();
+        }
+
         var player = await _playerManager.GetPlayerAsync(mac).ConfigureAwait(false);
         if (player == null)
         {
@@ -98,8 +153,14 @@ public class JellyLmsController : ControllerBase
     [HttpPost("Players/{mac}/PowerOn")]
     [ProducesResponseType(StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
     public async Task<ActionResult> PowerOn(string mac)
     {
+        if (!HasRemoteControlAccess())
+        {
+            return Forbid();
+        }
+
         var success = await _lmsClient.PowerOnAsync(mac).ConfigureAwait(false);
         return success ? Ok() : BadRequest("Failed to power on player");
     }
@@ -112,8 +173,14 @@ public class JellyLmsController : ControllerBase
     [HttpPost("Players/{mac}/PowerOff")]
     [ProducesResponseType(StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
     public async Task<ActionResult> PowerOff(string mac)
     {
+        if (!HasRemoteControlAccess())
+        {
+            return Forbid();
+        }
+
         var success = await _lmsClient.PowerOffAsync(mac).ConfigureAwait(false);
         return success ? Ok() : BadRequest("Failed to power off player");
     }
@@ -127,8 +194,14 @@ public class JellyLmsController : ControllerBase
     [HttpPost("Players/{mac}/Volume")]
     [ProducesResponseType(StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
     public async Task<ActionResult> SetVolume(string mac, [FromBody] VolumeRequest request)
     {
+        if (!HasRemoteControlAccess())
+        {
+            return Forbid();
+        }
+
         var success = await _lmsClient.SetVolumeAsync(mac, request.Volume).ConfigureAwait(false);
         return success ? Ok() : BadRequest("Failed to set volume");
     }
@@ -139,8 +212,14 @@ public class JellyLmsController : ControllerBase
     /// <returns>List of sync groups.</returns>
     [HttpGet("SyncGroups")]
     [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
     public async Task<ActionResult<List<SyncGroup>>> GetSyncGroups()
     {
+        if (!HasRemoteControlAccess())
+        {
+            return Forbid();
+        }
+
         var groups = await _playerManager.GetSyncGroupsAsync().ConfigureAwait(false);
         return Ok(groups);
     }
@@ -153,8 +232,14 @@ public class JellyLmsController : ControllerBase
     [HttpPost("SyncGroups")]
     [ProducesResponseType(StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
     public async Task<ActionResult> CreateSyncGroup([FromBody] CreateSyncGroupRequest request)
     {
+        if (!HasRemoteControlAccess())
+        {
+            return Forbid();
+        }
+
         var success = await _playerManager.CreateSyncGroupAsync(request.MasterMac, request.SlaveMacs)
             .ConfigureAwait(false);
         return success ? Ok() : BadRequest("Failed to create sync group");
@@ -168,8 +253,14 @@ public class JellyLmsController : ControllerBase
     [HttpDelete("SyncGroups/Players/{mac}")]
     [ProducesResponseType(StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
     public async Task<ActionResult> UnsyncPlayer(string mac)
     {
+        if (!HasRemoteControlAccess())
+        {
+            return Forbid();
+        }
+
         var success = await _playerManager.UnsyncPlayerAsync(mac).ConfigureAwait(false);
         return success ? Ok() : BadRequest("Failed to unsync player");
     }
@@ -182,12 +273,67 @@ public class JellyLmsController : ControllerBase
     [HttpDelete("SyncGroups/{masterMac}")]
     [ProducesResponseType(StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
     public async Task<ActionResult> DissolveSyncGroup(string masterMac)
     {
+        if (!HasRemoteControlAccess())
+        {
+            return Forbid();
+        }
+
         var success = await _playerManager.DissolveSyncGroupAsync(masterMac).ConfigureAwait(false);
         return success ? Ok() : BadRequest("Failed to dissolve sync group");
     }
 
+    /// <summary>
+    /// Checks whether the current user is allowed to use the multi-room remote control.
+    /// Used by the remote control page and the injected web client button to decide
+    /// whether to show themselves.
+    /// </summary>
+    /// <returns>200 OK if allowed, otherwise 403 Forbidden.</returns>
+    [HttpGet("RemoteControl/Access")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status403Forbidden)]
+    public ActionResult CheckRemoteControlAccess()
+    {
+        return HasRemoteControlAccess() ? Ok() : Forbid();
+    }
+
+    /// <summary>
+    /// Serves the standalone multi-room remote control page. The page itself contains
+    /// no sensitive data; it authenticates API calls using the Jellyfin access token
+    /// stored by the web client, so it is reachable without a prior Jellyfin auth header.
+    /// </summary>
+    /// <returns>The remote control HTML page.</returns>
+    [HttpGet("RemoteControl")]
+    [AllowAnonymous]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    public ActionResult GetRemoteControlPage()
+    {
+        return ServeEmbeddedResource("Jellyfin.Plugin.JellyLMS.Web.RemoteControl.html", "text/html");
+    }
+
+    /// <summary>
+    /// Serves the client script that is injected into the Jellyfin web client to add a
+    /// floating button linking to the remote control page.
+    /// </summary>
+    /// <returns>The client script.</returns>
+    [HttpGet("RemoteControl/ClientScript")]
+    [AllowAnonymous]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    public ActionResult GetRemoteControlClientScript()
+    {
+        return ServeEmbeddedResource("Jellyfin.Plugin.JellyLMS.Web.remote-button.js", "application/javascript");
+    }
+
+    private FileStreamResult ServeEmbeddedResource(string resourceName, string contentType)
+    {
+        var stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(resourceName)
+            ?? throw new InvalidOperationException($"Embedded resource '{resourceName}' not found.");
+
+        return File(stream, contentType);
+    }
+
     /// <summary>
     /// Discovers file paths used by Jellyfin's music libraries.
     /// Helps users configure path mappings for direct file access.

Jellyfin.Plugin.JellyLMS/Configuration/PluginConfiguration.cs

@@ -36,6 +36,7 @@ public class PluginConfiguration : BasePluginConfiguration
         ConnectionTimeoutSeconds = 10;
         EnableAutoSync = true;
         DefaultPlayerMac = string.Empty;
+        EnableHomeScreenButton = true;
     }
 
     /// <summary>
@@ -75,6 +76,12 @@ public class PluginConfiguration : BasePluginConfiguration
     /// </summary>
     public string DefaultPlayerMac { get; set; }
 
+    /// <summary>
+    /// Gets or sets a value indicating whether a floating "Remote" button linking to the
+    /// multi-room remote control page should be injected into the Jellyfin web client.
+    /// </summary>
+    public bool EnableHomeScreenButton { get; set; }
+
     /// <summary>
     /// Gets or sets the Jellyfin API key for authenticating stream requests from LMS.
     /// </summary>

Jellyfin.Plugin.JellyLMS/Configuration/configPage.html

@@ -182,6 +182,19 @@
                         </div>
                     </div>
 
+                    <div class="verticalSection">
+                        <h3>Multi-Room Remote</h3>
+                        <p class="fieldDescription">A standalone remote control page is available at <code>/JellyLms/RemoteControl</code> for any user granted the "Allow remote control of other users" permission (Dashboard &gt; Users).</p>
+
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label class="emby-checkbox-label">
+                                <input id="EnableHomeScreenButton" name="EnableHomeScreenButton" type="checkbox" is="emby-checkbox" />
+                                <span>Show floating Remote button in web client</span>
+                            </label>
+                            <div class="fieldDescription checkboxFieldDescription">Adds a floating button to the Jellyfin web client that links to the remote control page (for authorized users only). Requires write access to the Jellyfin web root and a page reload to take effect.</div>
+                        </div>
+                    </div>
+
                     <div class="verticalSection">
                         <h3>Player Sync</h3>
                         <p class="fieldDescription">Select players to sync together for multi-room audio. Synced players play in perfect sync.</p>
@@ -567,6 +580,7 @@
                         document.querySelector('#EnableAutoSync').checked = config.EnableAutoSync !== false;
                         document.querySelector('#DefaultPlayerMac').value = config.DefaultPlayerMac || '';
                         document.querySelector('#UseDirectFilePath').checked = config.UseDirectFilePath || false;
+                        document.querySelector('#EnableHomeScreenButton').checked = config.EnableHomeScreenButton !== false;
 
                         // Load path mappings (new list format, with fallback to legacy single mapping)
                         JellyLmsConfig.pathMappings = config.PathMappings || [];
@@ -622,6 +636,7 @@
                         config.EnableAutoSync = document.querySelector('#EnableAutoSync').checked;
                         config.DefaultPlayerMac = document.querySelector('#DefaultPlayerMac').value;
                         config.UseDirectFilePath = document.querySelector('#UseDirectFilePath').checked;
+                        config.EnableHomeScreenButton = document.querySelector('#EnableHomeScreenButton').checked;
                         // Save path mappings (clear legacy single mapping when using list)
                         config.PathMappings = getPathMappingsFromUI();
                         config.JellyfinMediaPath = '';

Jellyfin.Plugin.JellyLMS/Jellyfin.Plugin.JellyLMS.csproj

@@ -28,6 +28,10 @@
   <ItemGroup>
     <None Remove="Configuration\configPage.html" />
     <EmbeddedResource Include="Configuration\configPage.html" />
+    <None Remove="Web\RemoteControl.html" />
+    <EmbeddedResource Include="Web\RemoteControl.html" />
+    <None Remove="Web\remote-button.js" />
+    <EmbeddedResource Include="Web\remote-button.js" />
   </ItemGroup>
 
 </Project>

Jellyfin.Plugin.JellyLMS/Plugin.cs

@@ -2,10 +2,12 @@ using System;
 using System.Collections.Generic;
 using System.Globalization;
 using Jellyfin.Plugin.JellyLMS.Configuration;
+using Jellyfin.Plugin.JellyLMS.Services;
 using MediaBrowser.Common.Configuration;
 using MediaBrowser.Common.Plugins;
 using MediaBrowser.Model.Plugins;
 using MediaBrowser.Model.Serialization;
+using Microsoft.Extensions.Logging;
 
 namespace Jellyfin.Plugin.JellyLMS;
 
@@ -15,15 +17,22 @@ namespace Jellyfin.Plugin.JellyLMS;
 /// </summary>
 public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
 {
+    private readonly ILogger<Plugin> _logger;
+
     /// <summary>
     /// Initializes a new instance of the <see cref="Plugin"/> class.
     /// </summary>
     /// <param name="applicationPaths">Instance of the <see cref="IApplicationPaths"/> interface.</param>
     /// <param name="xmlSerializer">Instance of the <see cref="IXmlSerializer"/> interface.</param>
-    public Plugin(IApplicationPaths applicationPaths, IXmlSerializer xmlSerializer)
+    /// <param name="logger">The logger.</param>
+    public Plugin(IApplicationPaths applicationPaths, IXmlSerializer xmlSerializer, ILogger<Plugin> logger)
         : base(applicationPaths, xmlSerializer)
     {
         Instance = this;
+        _logger = logger;
+
+        WebClientPatchService.Apply(ApplicationPaths, Configuration.EnableHomeScreenButton, _logger);
+        ConfigurationChanged += (_, _) => WebClientPatchService.Apply(ApplicationPaths, Configuration.EnableHomeScreenButton, _logger);
     }
 
     /// <inheritdoc />

Jellyfin.Plugin.JellyLMS/Services/WebClientPatchService.cs

@@ -0,0 +1,72 @@
+using System;
+using System.IO;
+using MediaBrowser.Common.Configuration;
+using Microsoft.Extensions.Logging;
+
+namespace Jellyfin.Plugin.JellyLMS.Services;
+
+/// <summary>
+/// Injects (or removes) a script tag in the web client's <c>index.html</c>
+/// that adds a floating button linking to the JellyLMS remote control page.
+/// This follows the pattern used by other Jellyfin plugins (e.g. Intro Skipper)
+/// since there is no official plugin hook for adding buttons to the web client.
+/// </summary>
+public static class WebClientPatchService
+{
+    private const string Marker = "<!-- jellylms-remote-button -->";
+    private const string ScriptTag = "<script defer src=\"/JellyLms/RemoteControl/ClientScript\"></script>";
+    private const string Injected = ScriptTag + Marker + "\n</body>";
+
+    /// <summary>
+    /// Ensures the web client's index.html either has or does not have the
+    /// JellyLMS remote button script injected, matching <paramref name="enableButton"/>.
+    /// </summary>
+    /// <param name="applicationPaths">The Jellyfin application paths.</param>
+    /// <param name="enableButton">Whether the remote button script should be present.</param>
+    /// <param name="logger">The logger.</param>
+    public static void Apply(IApplicationPaths applicationPaths, bool enableButton, ILogger logger)
+    {
+        var indexPath = Path.Combine(applicationPaths.WebPath, "index.html");
+
+        try
+        {
+            if (!File.Exists(indexPath))
+            {
+                logger.LogDebug("JellyLMS: web client index.html not found at {Path}", indexPath);
+                return;
+            }
+
+            var html = File.ReadAllText(indexPath);
+            var hasMarker = html.Contains(Marker, StringComparison.Ordinal);
+
+            if (enableButton && !hasMarker)
+            {
+                var patched = ReplaceLast(html, "</body>", Injected);
+                File.WriteAllText(indexPath, patched);
+                logger.LogInformation("JellyLMS: injected remote control button into {Path}", indexPath);
+            }
+            else if (!enableButton && hasMarker)
+            {
+                var patched = html.Replace(ScriptTag + Marker + "\n", string.Empty, StringComparison.Ordinal)
+                    .Replace(ScriptTag + Marker, string.Empty, StringComparison.Ordinal);
+                File.WriteAllText(indexPath, patched);
+                logger.LogInformation("JellyLMS: removed remote control button from {Path}", indexPath);
+            }
+        }
+        catch (Exception ex) when (ex is IOException or UnauthorizedAccessException)
+        {
+            logger.LogWarning(ex, "JellyLMS: failed to patch web client index.html at {Path}", indexPath);
+        }
+    }
+
+    private static string ReplaceLast(string source, string find, string replace)
+    {
+        var index = source.LastIndexOf(find, StringComparison.Ordinal);
+        if (index < 0)
+        {
+            return source;
+        }
+
+        return source[..index] + replace + source[(index + find.Length)..];
+    }
+}

Jellyfin.Plugin.JellyLMS/Web/RemoteControl.html

@@ -0,0 +1,393 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>JellyLMS Remote</title>
+    <style>
+        :root {
+            color-scheme: dark;
+        }
+        * { box-sizing: border-box; }
+        body {
+            margin: 0;
+            font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: #101010;
+            color: #fff;
+            padding: 16px;
+            padding-bottom: 60px;
+        }
+        h1 {
+            font-size: 1.4em;
+            font-weight: 500;
+            margin: 8px 0 16px;
+        }
+        h2 {
+            font-size: 1.05em;
+            font-weight: 500;
+            color: #ccc;
+            margin: 24px 0 8px;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        .card {
+            background: #1c1c1c;
+            border-radius: 10px;
+            padding: 14px;
+            margin-bottom: 10px;
+        }
+        .player-row {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .player-info {
+            flex: 1;
+            min-width: 0;
+        }
+        .player-name {
+            font-weight: 500;
+            font-size: 1.05em;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .player-status {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: #888;
+            font-size: 0.85em;
+            margin-top: 2px;
+        }
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            display: inline-block;
+        }
+        .status-dot.on { background: #52b54b; }
+        .status-dot.standby { background: #f9a825; }
+        .status-dot.off { background: #f44336; }
+        .power-btn {
+            border: none;
+            border-radius: 50%;
+            width: 44px;
+            height: 44px;
+            font-size: 1.2em;
+            background: #2a2a2a;
+            color: #aaa;
+            cursor: pointer;
+            flex-shrink: 0;
+        }
+        .power-btn.on {
+            background: #00a4dc;
+            color: #fff;
+        }
+        .volume-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        .volume-row input[type="range"] {
+            flex: 1;
+        }
+        .volume-value {
+            width: 2.5em;
+            text-align: right;
+            color: #ccc;
+            font-size: 0.9em;
+        }
+        .sync-group-players {
+            color: #ccc;
+            flex: 1;
+        }
+        .sync-checkbox-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 6px 0;
+        }
+        button.action {
+            background: #00a4dc;
+            color: #fff;
+            border: none;
+            border-radius: 6px;
+            padding: 8px 14px;
+            font-size: 0.95em;
+            cursor: pointer;
+        }
+        button.action:disabled {
+            background: #333;
+            color: #777;
+            cursor: default;
+        }
+        button.action.alt {
+            background: #333;
+            color: #ccc;
+        }
+        .empty, .message {
+            color: #888;
+            padding: 8px 0;
+        }
+        .message.error { color: #f44336; }
+        .message a { color: #00a4dc; }
+        #refreshBtn {
+            position: fixed;
+            bottom: 16px;
+            right: 16px;
+        }
+    </style>
+</head>
+<body>
+    <h1>🔊 JellyLMS Remote</h1>
+    <div id="app">
+        <p class="message">Loading…</p>
+    </div>
+
+    <script>
+        var API_BASE = '/JellyLms';
+        var state = { players: [], syncGroups: [] };
+
+        function getAuthToken() {
+            try {
+                var creds = JSON.parse(localStorage.getItem('jellyfin_credentials'));
+                var server = creds && creds.Servers && creds.Servers[0];
+                return (server && server.AccessToken) || null;
+            } catch (e) {
+                return null;
+            }
+        }
+
+        function api(path, options) {
+            options = options || {};
+            var headers = options.headers || {};
+            var token = getAuthToken();
+            if (token) {
+                headers['X-Emby-Token'] = token;
+            }
+
+            if (options.body) {
+                headers['Content-Type'] = 'application/json';
+            }
+
+            return fetch(API_BASE + path, {
+                method: options.method || 'GET',
+                headers: headers,
+                body: options.body
+            }).then(function (resp) {
+                if (!resp.ok) {
+                    var err = new Error('Request failed: ' + resp.status);
+                    err.status = resp.status;
+                    throw err;
+                }
+
+                if (resp.status === 204) {
+                    return null;
+                }
+
+                var contentType = resp.headers.get('content-type') || '';
+                return contentType.indexOf('application/json') !== -1 ? resp.json() : null;
+            });
+        }
+
+        function renderMessage(text, isError) {
+            document.getElementById('app').innerHTML =
+                '<p class="message' + (isError ? ' error' : '') + '">' + text + '</p>';
+        }
+
+        function getStatusClass(player) {
+            if (!player.IsConnected) return 'off';
+            return player.IsPoweredOn ? 'on' : 'standby';
+        }
+
+        function getStatusText(player) {
+            if (!player.IsConnected) return 'Disconnected';
+            return player.IsPoweredOn ? 'Playing' : 'Standby';
+        }
+
+        function syncedMacs() {
+            var macs = new Set();
+            state.syncGroups.forEach(function (group) {
+                macs.add(group.MasterMac);
+                group.SlaveMacs.forEach(function (mac) { macs.add(mac); });
+            });
+            return macs;
+        }
+
+        function findPlayer(mac) {
+            return state.players.find(function (p) { return p.MacAddress === mac; });
+        }
+
+        function render() {
+            var app = document.getElementById('app');
+            var html = '';
+
+            html += '<h2>Players</h2>';
+            if (state.players.length === 0) {
+                html += '<p class="empty">No players found.</p>';
+            } else {
+                state.players.forEach(function (player) {
+                    var mac = player.MacAddress;
+                    html += '<div class="card">';
+                    html += '<div class="player-row">';
+                    html += '<div class="player-info">';
+                    html += '<div class="player-name">' + player.Name + '</div>';
+                    html += '<div class="player-status"><span class="status-dot ' + getStatusClass(player) + '"></span>' +
+                        '<span>' + getStatusText(player) + '</span></div>';
+                    html += '</div>';
+                    html += '<button class="power-btn' + (player.IsPoweredOn ? ' on' : '') + '" data-action="power" data-mac="' + mac + '" data-on="' + player.IsPoweredOn + '" title="Power">⏻</button>';
+                    html += '</div>';
+                    html += '<div class="volume-row">';
+                    html += '<span>🔈</span>';
+                    html += '<input type="range" min="0" max="100" value="' + player.Volume + '" data-action="volume" data-mac="' + mac + '">';
+                    html += '<span class="volume-value">' + player.Volume + '</span>';
+                    html += '</div>';
+                    html += '</div>';
+                });
+            }
+
+            html += '<h2>Multi-Room Sync</h2>';
+            if (state.syncGroups.length > 0) {
+                state.syncGroups.forEach(function (group) {
+                    var names = [];
+                    var master = findPlayer(group.MasterMac);
+                    if (master) names.push(master.Name);
+                    group.SlaveMacs.forEach(function (mac) {
+                        var p = findPlayer(mac);
+                        if (p) names.push(p.Name);
+                    });
+
+                    html += '<div class="card">';
+                    html += '<div class="player-row">';
+                    html += '<span class="sync-group-players">' + names.join(' + ') + '</span>';
+                    html += '<button class="action alt" data-action="unsync" data-master="' + group.MasterMac + '">Unsync</button>';
+                    html += '</div>';
+                    html += '</div>';
+                });
+            }
+
+            var unsynced = state.players.filter(function (p) { return !syncedMacs().has(p.MacAddress); });
+            if (unsynced.length > 1) {
+                html += '<div class="card">';
+                html += '<p class="empty" style="margin-top:0;">Select players to sync together:</p>';
+                unsynced.forEach(function (player) {
+                    html += '<label class="sync-checkbox-row">';
+                    html += '<input type="checkbox" data-action="sync-select" data-mac="' + player.MacAddress + '">';
+                    html += '<span>' + player.Name + '</span>';
+                    html += '</label>';
+                });
+                html += '<div style="margin-top:10px;">';
+                html += '<button class="action" id="syncSelectedBtn" disabled>Sync Selected</button>';
+                html += '</div>';
+                html += '</div>';
+            } else if (state.syncGroups.length === 0) {
+                html += '<p class="empty">No players synced yet.</p>';
+            }
+
+            app.innerHTML = html;
+            attachHandlers();
+        }
+
+        function attachHandlers() {
+            document.querySelectorAll('[data-action="power"]').forEach(function (btn) {
+                btn.addEventListener('click', function () {
+                    var mac = btn.getAttribute('data-mac');
+                    var isOn = btn.getAttribute('data-on') === 'true';
+                    var endpoint = isOn ? '/Players/' + encodeURIComponent(mac) + '/PowerOff' : '/Players/' + encodeURIComponent(mac) + '/PowerOn';
+                    btn.disabled = true;
+                    api(endpoint, { method: 'POST' }).then(loadPlayers).catch(function () {
+                        btn.disabled = false;
+                    });
+                });
+            });
+
+            document.querySelectorAll('[data-action="volume"]').forEach(function (input) {
+                input.addEventListener('change', function () {
+                    var mac = input.getAttribute('data-mac');
+                    var volume = parseInt(input.value, 10);
+                    input.nextElementSibling.textContent = volume;
+                    api('/Players/' + encodeURIComponent(mac) + '/Volume', {
+                        method: 'POST',
+                        body: JSON.stringify({ Volume: volume })
+                    }).catch(function () {});
+                });
+                input.addEventListener('input', function () {
+                    input.nextElementSibling.textContent = input.value;
+                });
+            });
+
+            document.querySelectorAll('[data-action="unsync"]').forEach(function (btn) {
+                btn.addEventListener('click', function () {
+                    var masterMac = btn.getAttribute('data-master');
+                    btn.disabled = true;
+                    api('/SyncGroups/' + encodeURIComponent(masterMac), { method: 'DELETE' })
+                        .then(loadAll)
+                        .catch(function () { btn.disabled = false; });
+                });
+            });
+
+            var syncBtn = document.getElementById('syncSelectedBtn');
+            if (syncBtn) {
+                var checkboxes = document.querySelectorAll('[data-action="sync-select"]');
+                var updateSyncBtn = function () {
+                    var checked = Array.from(checkboxes).filter(function (cb) { return cb.checked; });
+                    syncBtn.disabled = checked.length < 2;
+                };
+                checkboxes.forEach(function (cb) { cb.addEventListener('change', updateSyncBtn); });
+
+                syncBtn.addEventListener('click', function () {
+                    var macs = Array.from(checkboxes).filter(function (cb) { return cb.checked; })
+                        .map(function (cb) { return cb.getAttribute('data-mac'); });
+                    if (macs.length < 2) return;
+
+                    syncBtn.disabled = true;
+                    api('/SyncGroups', {
+                        method: 'POST',
+                        body: JSON.stringify({ MasterMac: macs[0], SlaveMacs: macs.slice(1) })
+                    }).then(loadAll).catch(function () { syncBtn.disabled = false; });
+                });
+            }
+        }
+
+        function loadPlayers() {
+            return api('/Players?refresh=true').then(function (players) {
+                state.players = players || [];
+                render();
+            });
+        }
+
+        function loadSyncGroups() {
+            return api('/SyncGroups').then(function (groups) {
+                state.syncGroups = groups || [];
+            });
+        }
+
+        function loadAll() {
+            return Promise.all([loadPlayers(), loadSyncGroups()]).then(render);
+        }
+
+        function init() {
+            if (!getAuthToken()) {
+                renderMessage('Please <a href="/web/">log in to Jellyfin</a> first, then reload this page.', true);
+                return;
+            }
+
+            api('/RemoteControl/Access').then(function () {
+                loadAll().catch(function () {
+                    renderMessage('Failed to load players. Check the JellyLMS plugin configuration.', true);
+                });
+            }).catch(function (err) {
+                if (err.status === 403) {
+                    renderMessage('Your account does not have permission to use the multi-room remote. Ask an admin to grant "Allow remote control of other users".', true);
+                } else {
+                    renderMessage('Could not reach JellyLMS. <a href="/web/">Return to Jellyfin</a>.', true);
+                }
+            });
+        }
+
+        init();
+    </script>
+</body>
+</html>

Jellyfin.Plugin.JellyLMS/Web/remote-button.js

@@ -0,0 +1,49 @@
+(function () {
+    function getAuthToken() {
+        try {
+            var creds = JSON.parse(localStorage.getItem('jellyfin_credentials'));
+            var server = creds && creds.Servers && creds.Servers[0];
+            return (server && server.AccessToken) || null;
+        } catch (e) {
+            return null;
+        }
+    }
+
+    function addButton() {
+        if (document.getElementById('jellylms-remote-btn')) {
+            return;
+        }
+
+        var btn = document.createElement('a');
+        btn.id = 'jellylms-remote-btn';
+        btn.href = '/JellyLms/RemoteControl';
+        btn.title = 'Multi-room Remote';
+        btn.textContent = '🔊';
+        btn.style.cssText = 'position:fixed;bottom:20px;right:20px;width:48px;height:48px;' +
+            'border-radius:50%;background:#00a4dc;color:#fff;display:flex;' +
+            'align-items:center;justify-content:center;font-size:22px;' +
+            'text-decoration:none;z-index:99999;box-shadow:0 2px 8px rgba(0,0,0,0.5);';
+        document.body.appendChild(btn);
+    }
+
+    function init() {
+        var token = getAuthToken();
+        if (!token) {
+            return;
+        }
+
+        fetch('/JellyLms/RemoteControl/Access', { headers: { 'X-Emby-Token': token } })
+            .then(function (resp) {
+                if (resp.ok) {
+                    addButton();
+                }
+            })
+            .catch(function () {});
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();