From d48ea90190587a522ee43c5b9ca94adc5057bd7c Mon Sep 17 00:00:00 2001
From: TwistedUmbrellaX <1173913+AbandonedCart@users.noreply.github.com>
Date: Thu, 21 Nov 2024 14:20:53 -0500
Subject: [PATCH] Hide legacy options to avoid confusion (#389)

* Update configPage.html

* Update configPage.html

* Update configPage.html

* Even more covert

* Persistent to avoid accidental flush

* Imply requiring save

* Allow options on checked

* Mention they're not injected by default

* This just doesn't want to work

* Use id whenever poosible

* Helps to do it at the right time

* Add a restart note to flush

* Too many quirks for this way

* Not hidden anymore

* Looks better after the button
---
 .../Configuration/PluginConfiguration.cs      |   5 +
 IntroSkipper/Configuration/configPage.html    | 240 ++++++++++--------
 2 files changed, 139 insertions(+), 106 deletions(-)

diff --git a/IntroSkipper/Configuration/PluginConfiguration.cs b/IntroSkipper/Configuration/PluginConfiguration.cs
index 3189c8e..3bcf221 100644
--- a/IntroSkipper/Configuration/PluginConfiguration.cs
+++ b/IntroSkipper/Configuration/PluginConfiguration.cs
@@ -174,6 +174,11 @@ public class PluginConfiguration : BasePluginConfiguration
     /// </summary>
     public bool SkipButtonWarning { get => WarningManager.HasFlag(PluginWarning.UnableToAddSkipButton); }
 
+    /// <summary>
+    /// Gets or sets a value indicating whether plugin options are presented to the user.
+    /// </summary>
+    public bool PluginSkip { get; set; }
+
     /// <summary>
     /// Gets or sets a value indicating whether introductions should be automatically skipped.
     /// </summary>
diff --git a/IntroSkipper/Configuration/configPage.html b/IntroSkipper/Configuration/configPage.html
index d135265..0956efc 100644
--- a/IntroSkipper/Configuration/configPage.html
+++ b/IntroSkipper/Configuration/configPage.html
@@ -300,123 +300,134 @@
                             <p align="center" style="font-size: 0.75em">EDL file generation has been removed. Please use endrl's <a href="https://github.com/endrl/jellyfin-plugin-edl">EDL plugin</a>.</p>
                         </fieldset>
 
-                        <fieldset class="verticalSection-extrabottompadding">
-                            <legend>Playback</legend>
+                        <p>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label class="emby-checkbox-label">
+                                <input id="PluginSkip" type="checkbox" is="emby-checkbox" />
+                                <span>Enable injected server-side skip <b style="color: red;">Restart required!</b></span>
+                            </label>
+                        </div>
+                        </p>
 
-                            <div class="checkboxContainer checkboxContainer-withDescription">
-                                <label class="emby-checkbox-label">
-                                    <input id="AutoSkip" type="checkbox" is="emby-checkbox" />
-                                    <span>Automatically Skip for All Clients</span>
-                                </label>
-                            </div>
+                        <div id="ServerSkipSettings" style="display: none">
+                            <fieldset class="verticalSection-extrabottompadding">
+                                <legend>Playback</legend>
 
-                            <div class="AutoSkipClientListContainer">
-                                <div class="AutoSkipClientList">
-                                    <h3 class="checkboxListLabel">Limit auto skip to the following clients</h3>
-                                    <div class="checkboxList paperList" style="padding: 0.5em 1em" id="autoSkipCheckboxes"></div>
+                                <div class="checkboxContainer checkboxContainer-withDescription">
+                                    <label class="emby-checkbox-label">
+                                        <input id="AutoSkip" type="checkbox" is="emby-checkbox" />
+                                        <span>Automatically Skip for All Clients</span>
+                                    </label>
                                 </div>
-                                <label class="inputLabel" for="ClientList"></label>
-                                <input id="ClientList" type="hidden" is="emby-input" />
-                            </div>
 
-                            <div class="AutoSkipTypeListContainer">
-                                <div class="AutoSkipTypeList">
-                                    <h3 class="checkboxListLabel">Auto skip the following types</h3>
-                                    <div class="checkboxList paperList" style="padding: 0.5em 1em" id="autoSkipTypeCheckboxes"></div>
+                                <div class="AutoSkipClientListContainer">
+                                    <div class="AutoSkipClientList">
+                                        <h3 class="checkboxListLabel">Limit auto skip to the following clients</h3>
+                                        <div class="checkboxList paperList" style="padding: 0.5em 1em" id="autoSkipCheckboxes"></div>
+                                    </div>
+                                    <label class="inputLabel" for="ClientList"></label>
+                                    <input id="ClientList" type="hidden" is="emby-input" />
                                 </div>
-                                <label class="inputLabel" for="TypeList"></label>
-                                <input id="TypeList" type="hidden" is="emby-input" />
-                            </div>
 
-                            <div id="divSkipFirstEpisode" class="checkboxContainer checkboxContainer-withDescription">
-                                <label class="emby-checkbox-label">
-                                    <input id="SkipFirstEpisode" type="checkbox" is="emby-checkbox" />
-                                    <span>Play Segments for First Episode of a Season</span>
-                                </label>
-
-                                <div class="fieldDescription">If checked, auto skip will play the segments of the first episode in a season.</div>
-                            </div>
-
-                            <div id="divSecondsOfIntroStartToPlay" class="inputContainer">
-                                <label class="inputLabel inputLabelUnfocused" for="SecondsOfIntroStartToPlay"> Segment skip delay (in seconds) </label>
-                                <input id="SecondsOfIntroStartToPlay" type="number" is="emby-input" min="0" />
-                                <div class="fieldDescription">Seconds of segment start that should be played. Defaults to 0.</div>
-                            </div>
-
-                            <div class="inputContainer">
-                                <label class="inputLabel inputLabelUnfocused" for="RemainingSecondsOfIntro"> Segment playback duration (in seconds) </label>
-                                <input id="RemainingSecondsOfIntro" type="number" is="emby-input" min="0" />
-                                <div class="fieldDescription">Seconds of segment ending that should be played. Defaults to 2.</div>
-                            </div>
-
-                            <div id="SkipButtonContainer" class="checkboxContainer checkboxContainer-withDescription">
-                                <label class="emby-checkbox-label">
-                                    <input id="SkipButtonEnabled" type="checkbox" is="emby-checkbox" />
-                                    <span id="SkipButtonVisibleLabel">Show Segment Skip Buttons</span>
-                                </label>
-
-                                <div class="fieldDescription">
-                                     <b style="color: red">Restart required!</b> If checked, a skip button will be added <b>to the server</b> according to the UI settings.<br />
-                                    This button is <b>separate</b> from the Media Segment Actions in Jellyfin 10.10 and compatible clients.<br />
+                                <div class="AutoSkipTypeListContainer">
+                                    <div class="AutoSkipTypeList">
+                                        <h3 class="checkboxListLabel">Auto skip the following types</h3>
+                                        <div class="checkboxList paperList" style="padding: 0.5em 1em" id="autoSkipTypeCheckboxes"></div>
+                                    </div>
+                                    <label class="inputLabel" for="TypeList"></label>
+                                    <input id="TypeList" type="hidden" is="emby-input" />
                                 </div>
-                            </div>
 
-                            <div id="warningMessage" style="color: #721c24; background-color: #f7cf1f; border: 1px solid #f5c6cb; border-radius: 4px; padding: 10px; margin-bottom: 10px">Failed to add skip button to web interface. See <a href="https://github.com/intro-skipper/intro-skipper/wiki/Troubleshooting#skip-button-is-not-visible" target="_blank" rel="noopener noreferrer">troubleshooting guide</a> for the most common issues.</div>
+                                <div id="divSkipFirstEpisode" class="checkboxContainer checkboxContainer-withDescription">
+                                    <label class="emby-checkbox-label">
+                                        <input id="SkipFirstEpisode" type="checkbox" is="emby-checkbox" />
+                                        <span>Play Segments for First Episode of a Season</span>
+                                    </label>
 
-                            <details>
-                                <summary>User Interface Customization</summary>
+                                    <div class="fieldDescription">If checked, auto skip will play the segments of the first episode in a season.</div>
+                                </div>
 
-                                <p>
-                                    <b style="color: orange">These settings do not apply to Media Segment Actions in Jellyfin 10.10 and compatible clients.</b>
-                                </p>
+                                <div id="divSecondsOfIntroStartToPlay" class="inputContainer">
+                                    <label class="inputLabel inputLabelUnfocused" for="SecondsOfIntroStartToPlay"> Segment skip delay (in seconds) </label>
+                                    <input id="SecondsOfIntroStartToPlay" type="number" is="emby-input" min="0" />
+                                    <div class="fieldDescription">Seconds of segment start that should be played. Defaults to 0.</div>
+                                </div>
 
-                                <div id="SkipButtonSettings">
-                                    <div id="PersistContainer" class="checkboxContainer checkboxContainer-withDescription">
-                                        <label class="emby-checkbox-label">
-                                            <input id="PersistSkipButton" type="checkbox" is="emby-checkbox" />
-                                            <span>Display Button for Segment Duration</span>
-                                        </label>
+                                <div class="inputContainer">
+                                    <label class="inputLabel inputLabelUnfocused" for="RemainingSecondsOfIntro"> Segment playback duration (in seconds) </label>
+                                    <input id="RemainingSecondsOfIntro" type="number" is="emby-input" min="0" />
+                                    <div class="fieldDescription">Seconds of segment ending that should be played. Defaults to 2.</div>
+                                </div>
 
-                                        <div class="fieldDescription">
-                                            If checked, skip button will remain visible for the entire intro (offset and timeout are ignored).<br />
-                                            Note: If unchecked, button will only appear in the player controls after the set timeout.
+                                <div id="SkipButtonContainer" class="checkboxContainer checkboxContainer-withDescription">
+                                    <label class="emby-checkbox-label">
+                                        <input id="SkipButtonEnabled" type="checkbox" is="emby-checkbox" />
+                                        <span id="SkipButtonVisibleLabel">Show Segment Skip Buttons</span>
+                                    </label>
+
+                                    <div class="fieldDescription">
+                                        <b style="color: red">Restart required!</b> If checked, a skip button will be added <b>to the server</b> according to the UI settings.<br />
+                                        This button is <b>separate</b> from the Media Segment Actions in Jellyfin 10.10 and compatible clients.<br />
+                                    </div>
+                                </div>
+
+                                <div id="warningMessage" style="color: #721c24; background-color: #f7cf1f; border: 1px solid #f5c6cb; border-radius: 4px; padding: 10px; margin-bottom: 10px">Failed to add skip button to web interface. See <a href="https://github.com/intro-skipper/intro-skipper/wiki/Troubleshooting#skip-button-is-not-visible" target="_blank" rel="noopener noreferrer">troubleshooting guide</a> for the most common issues.</div>
+
+                                <details>
+                                    <summary>User Interface Customization</summary>
+
+                                    <p>
+                                        <b style="color: orange">These settings do not apply to Media Segment Actions in Jellyfin 10.10 and compatible clients.</b>
+                                    </p>
+
+                                    <div id="SkipButtonSettings">
+                                        <div id="PersistContainer" class="checkboxContainer checkboxContainer-withDescription">
+                                            <label class="emby-checkbox-label">
+                                                <input id="PersistSkipButton" type="checkbox" is="emby-checkbox" />
+                                                <span>Display Button for Segment Duration</span>
+                                            </label>
+
+                                            <div class="fieldDescription">
+                                                If checked, skip button will remain visible for the entire intro (offset and timeout are ignored).<br />
+                                                Note: If unchecked, button will only appear in the player controls after the set timeout.
+                                            </div>
+                                        </div>
+
+                                        <div id="divShowPromptAdjustment" class="inputContainer">
+                                            <label class="inputLabel inputLabelUnfocused" for="ShowPromptAdjustment"> Skip prompt offset (in seconds) </label>
+                                            <input id="ShowPromptAdjustment" type="number" is="emby-input" min="0" />
+                                            <div class="fieldDescription">Seconds to display skip prompt before introduction begins.</div>
+                                            <br />
+                                        </div>
+
+                                        <div id="divHidePromptAdjustment" class="inputContainer">
+                                            <label class="inputLabel inputLabelUnfocused" for="HidePromptAdjustment"> Skip prompt timeout (in seconds) </label>
+                                            <input id="HidePromptAdjustment" type="number" is="emby-input" min="2" />
+                                            <div class="fieldDescription">Seconds after introduction before skip prompt is hidden.</div>
+                                            <br />
+                                        </div>
+
+                                        <div class="inputContainer">
+                                            <label class="inputLabel" for="SkipButtonIntroText"> Skip intro button text </label>
+                                            <input id="SkipButtonIntroText" type="text" is="emby-input" />
+                                            <div class="fieldDescription">Text to display in the skip intro button.</div>
+                                        </div>
+
+                                        <div class="inputContainer">
+                                            <label class="inputLabel" for="SkipButtonEndCreditsText"> Skip end credits button text </label>
+                                            <input id="SkipButtonEndCreditsText" type="text" is="emby-input" />
+                                            <div class="fieldDescription">Text to display in the skip end credits button.</div>
                                         </div>
                                     </div>
 
-                                    <div id="divShowPromptAdjustment" class="inputContainer">
-                                        <label class="inputLabel inputLabelUnfocused" for="ShowPromptAdjustment"> Skip prompt offset (in seconds) </label>
-                                        <input id="ShowPromptAdjustment" type="number" is="emby-input" min="0" />
-                                        <div class="fieldDescription">Seconds to display skip prompt before introduction begins.</div>
-                                        <br />
+                                    <div id="divAutoSkipNotificationText" class="inputContainer">
+                                        <label class="inputLabel" for="AutoSkipNotificationText"> Auto skip intro notification message </label>
+                                        <input id="AutoSkipNotificationText" type="text" is="emby-input" />
+                                        <div class="fieldDescription">Message shown after automatically skipping an introduction. Leave blank to disable notification.</div>
                                     </div>
-
-                                    <div id="divHidePromptAdjustment" class="inputContainer">
-                                        <label class="inputLabel inputLabelUnfocused" for="HidePromptAdjustment"> Skip prompt timeout (in seconds) </label>
-                                        <input id="HidePromptAdjustment" type="number" is="emby-input" min="2" />
-                                        <div class="fieldDescription">Seconds after introduction before skip prompt is hidden.</div>
-                                        <br />
-                                    </div>
-
-                                    <div class="inputContainer">
-                                        <label class="inputLabel" for="SkipButtonIntroText"> Skip intro button text </label>
-                                        <input id="SkipButtonIntroText" type="text" is="emby-input" />
-                                        <div class="fieldDescription">Text to display in the skip intro button.</div>
-                                    </div>
-
-                                    <div class="inputContainer">
-                                        <label class="inputLabel" for="SkipButtonEndCreditsText"> Skip end credits button text </label>
-                                        <input id="SkipButtonEndCreditsText" type="text" is="emby-input" />
-                                        <div class="fieldDescription">Text to display in the skip end credits button.</div>
-                                    </div>
-                                </div>
-
-                                <div id="divAutoSkipNotificationText" class="inputContainer">
-                                    <label class="inputLabel" for="AutoSkipNotificationText"> Auto skip intro notification message </label>
-                                    <input id="AutoSkipNotificationText" type="text" is="emby-input" />
-                                    <div class="fieldDescription">Message shown after automatically skipping an introduction. Leave blank to disable notification.</div>
-                                </div>
-                            </details>
-                        </fieldset>
+                                </details>
+                            </fieldset>
+                        </div>
 
                         <div>
                             <button is="emby-button" type="submit" class="raised button-submit block emby-button">
@@ -782,7 +793,7 @@
                     "AutoSkipNotificationText",
                 ];
 
-                var booleanConfigurationFields = ["AutoDetectIntros", "AnalyzeMovies", "AnalyzeSeasonZero", "SelectAllLibraries", "UpdateMediaSegments", "RebuildMediaSegments", "ScanIntroduction", "ScanCredits", "ScanRecap", "ScanPreview", "CacheFingerprints", "AutoSkip", "SkipFirstEpisode", "PersistSkipButton", "SkipButtonEnabled"];
+                var booleanConfigurationFields = ["AutoDetectIntros", "AnalyzeMovies", "AnalyzeSeasonZero", "SelectAllLibraries", "UpdateMediaSegments", "RebuildMediaSegments", "ScanIntroduction", "ScanCredits", "ScanRecap", "ScanPreview", "CacheFingerprints", "PluginSkip", "AutoSkip", "SkipFirstEpisode", "PersistSkipButton", "SkipButtonEnabled"];
 
                 // visualizer elements
                 var analyzerActionsSection = document.querySelector("div#analyzerActionsSection");
@@ -814,14 +825,16 @@
                 var windowHashInterval = 0;
 
                 var analyzeMovies = document.getElementById("AnalyzeMovies");
-                var autoSkip = document.querySelector("input#AutoSkip");
+                var pluginSkip = document.getElementById("PluginSkip");
+                var serverSkipSettings = document.getElementById("ServerSkipSettings");
+                var autoSkip = document.getElementById("AutoSkip");
                 var skipButtonVisible = document.getElementById("SkipButtonEnabled");
                 var skipButtonVisibleLabel = document.getElementById("SkipButtonVisibleLabel");
                 var skipButtonSettings = document.getElementById("SkipButtonSettings");
                 var selectAllLibraries = document.querySelector("input#SelectAllLibraries");
                 var librariesContainer = document.querySelector("div.folderAccessListContainer");
-                var skipFirstEpisode = document.querySelector("div#divSkipFirstEpisode");
-                var secondsOfIntroStartToPlay = document.querySelector("div#divSecondsOfIntroStartToPlay");
+                var skipFirstEpisode = document.getElementById("divSkipFirstEpisode");
+                var secondsOfIntroStartToPlay = document.getElementById("divSecondsOfIntroStartToPlay");
                 var autoSkipClientList = document.querySelector("div.AutoSkipClientListContainer");
                 var movieCreditsDuration = document.getElementById("movieCreditsDuration");
 
@@ -906,7 +919,7 @@
                     generateCheckboxList(libraryNames, "libraryCheckboxes", "SelectedLibraries");
                 }
 
-                var persistSkip = document.querySelector("input#PersistSkipButton");
+                var persistSkip = document.getElementById("PersistSkipButton");
                 var showAdjustment = document.querySelector("div#divShowPromptAdjustment");
                 var hideAdjustment = document.querySelector("div#divHidePromptAdjustment");
 
@@ -923,6 +936,20 @@
 
                 persistSkip.addEventListener("change", persistSkipChanged);
 
+                async function pluginSkipSettingChanged() {
+                    if (pluginSkip.checked) {
+                        serverSkipSettings.style.display = "unset";
+                    } else {
+                        serverSkipSettings.style.display = "none";
+                        // TODO: Reset everything to default
+                        autoSkip.checked = false;
+                        skipButtonVisible.checked = false;
+                        persistSkip.checked = false;
+                    }
+                }
+
+                pluginSkip.addEventListener("change", pluginSkipSettingChanged);
+
                 async function analyzeMoviesChanged() {
                     if (analyzeMovies.checked) {
                         movieCreditsDuration.style.display = "unset";
@@ -1423,6 +1450,7 @@
                         persistSkipChanged();
                         generateAutoSkipTypeList();
                         generateAutoSkipClientList();
+                        pluginSkipSettingChanged();
 
                         Dashboard.hideLoadingMsg();
                     });