diff --git a/src/components/options/CategorySkipOptionsComponent.tsx b/src/components/options/CategorySkipOptionsComponent.tsx index 89ac84ac..20c12309 100644 --- a/src/components/options/CategorySkipOptionsComponent.tsx +++ b/src/components/options/CategorySkipOptionsComponent.tsx @@ -38,10 +38,21 @@ class CategorySkipOptionsComponent extends React.Component { + if (allowed) { + this.setState({ + hideChapter: !allowed + }); + } + }); + } + let defaultOption = "disable"; // Set the default opton properly for (const categorySelection of Config.config.categorySelections) { diff --git a/src/options.ts b/src/options.ts index 8d66834c..c9596abb 100644 --- a/src/options.ts +++ b/src/options.ts @@ -14,9 +14,13 @@ import UnsubmittedVideos from "./render/UnsubmittedVideos"; import KeybindComponent from "./components/options/KeybindComponent"; import { showDonationLink } from "./utils/configUtils"; import { localizeHtmlPage } from "./utils/pageUtils"; +import { StorageChangesObject } from "./types"; const utils = new Utils(); let embed = false; +const categoryChoosers: CategoryChooser[] = []; +const unsubmittedVideos: UnsubmittedVideos[] = []; + window.addEventListener('DOMContentLoaded', init); async function init() { @@ -291,10 +295,10 @@ async function init() { break; } case "react-CategoryChooserComponent": - new CategoryChooser(optionsElements[i]); + categoryChoosers.push(new CategoryChooser(optionsElements[i])); break; case "react-UnsubmittedVideosComponent": - new UnsubmittedVideos(optionsElements[i]) + unsubmittedVideos.push(new UnsubmittedVideos(optionsElements[i])); break; } } @@ -352,10 +356,8 @@ async function shouldHideOption(element: Element): Promise { /** * Called when the config is updated - * - * @param {String} element */ -function optionsConfigUpdateListener() { +function optionsConfigUpdateListener(changes: StorageChangesObject) { const optionsContainer = document.getElementById("options"); const optionsElements = optionsContainer.querySelectorAll("*"); @@ -364,9 +366,16 @@ function optionsConfigUpdateListener() { case "display": updateDisplayElement( optionsElements[i]) break; - case "react-UnsubmittedVideosComponent": - new UnsubmittedVideos(optionsElements[i]) - break; + } + } + + if (changes.categorySelections || changes.payments) { + for (const chooser of categoryChoosers) { + chooser.update(); + } + } else if (changes.unsubmittedSegments) { + for (const chooser of unsubmittedVideos) { + chooser.update(); } } } @@ -662,4 +671,4 @@ function copyDebugOutputToClipboard() { function isIncognitoAllowed(): Promise { return new Promise((resolve) => chrome.extension.isAllowedIncognitoAccess(resolve)); -} +} \ No newline at end of file diff --git a/src/render/CategoryChooser.tsx b/src/render/CategoryChooser.tsx index 97c33cf9..0f5d557f 100644 --- a/src/render/CategoryChooser.tsx +++ b/src/render/CategoryChooser.tsx @@ -4,12 +4,20 @@ import CategoryChooserComponent from "../components/options/CategoryChooserCompo class CategoryChooser { + ref: React.RefObject; + constructor(element: Element) { + this.ref = React.createRef(); + ReactDOM.render( - , + , element ); } + + update(): void { + this.ref.current?.forceUpdate(); + } } export default CategoryChooser; \ No newline at end of file diff --git a/src/render/UnsubmittedVideos.tsx b/src/render/UnsubmittedVideos.tsx index 1ae119e3..26796754 100644 --- a/src/render/UnsubmittedVideos.tsx +++ b/src/render/UnsubmittedVideos.tsx @@ -4,12 +4,21 @@ import UnsubmittedVideosComponent from "../components/options/UnsubmittedVideosC class UnsubmittedVideos { + ref: React.RefObject; + constructor(element: Element) { + this.ref = React.createRef(); + ReactDOM.render( - , + , element ); } + + update(): void { + this.ref.current?.forceUpdate(); + } + } export default UnsubmittedVideos;