diff --git a/README.md b/README.md index 93528a9..85f556d 100644 --- a/README.md +++ b/README.md @@ -11,3 +11,4 @@ provides a useful resource from which you can build your own customizations. - [License](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/license_management) management - Retrieve information on seat availability and usage - [Move](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/move_shows) shows - Move a sequence from one show to another - [Panels](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/panels_media_object) media object - Fetch panels with media objects + - [Flix Client Plugins](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/blender) - Example plugins to modify the behaviour of the Flix Client diff --git a/client_plugins/README.md b/client_plugins/README.md new file mode 100644 index 0000000..c1fc7a7 --- /dev/null +++ b/client_plugins/README.md @@ -0,0 +1,33 @@ +# Flix Plugin Examples + +The following folders contain examples of plugins that modify the behaviour of the Flix Client (version 8.0.0 and above). +These plugins leverage the [Chrome Extension Support](https://www.electronjs.org/docs/latest/api/extensions) built into Electron. +The examples here can be taken and added into Flix, either directly or with some modifications. + +## Installation + +To install these plugins, simply add the plugin files to a new folder in the Flix Client Plugins folder, located at: + +- Windows: `%APPDATA%/Flix/plugins` +- MacOS: `~/Library/Application Support/Flix/plugins` + +The Flix Client will automatically load plugins from this folder on start, and will monitor for new plugins being added at run time. +Loaded plugins can be managed via the Plugins & Extensions management window. + +Note: Each extension must be unpacked into its own folder. Flix does not support packaged `.crx` extensions. + +## Plugin Development + +To build your own plugin, start by defining an [extension manifest file](https://developer.chrome.com/docs/extensions/reference/manifest) in `manifest.json`. +(Note: Electron only supports a [subset of the manifest file properties](https://www.electronjs.org/docs/latest/api/extensions#supported-manifest-keys).) + +To modify the Flix Client DOM, you will need to register a content script that runs on paths matching `file://*`, due to the way pages are loaded in Electron. +Since Flix uses the Angular framework, navigation is done via the URL hash. +When determining which page is active, this should be used instead of the URL path name which will not change. + +For more details see the [Chrome Extensions development documentation](https://developer.chrome.com/docs/extensions/get-started). +However, only a [subset of the extension APIs](https://www.electronjs.org/docs/latest/api/extensions#supported-extensions-apis) are available for use within Flix Plugins. + +## Examples + +- [Version Up Away](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/client_plugins/version_up_away) - Removes the version up button from the panel browser \ No newline at end of file diff --git a/client_plugins/version_up_away/main.js b/client_plugins/version_up_away/main.js new file mode 100644 index 0000000..71d995f --- /dev/null +++ b/client_plugins/version_up_away/main.js @@ -0,0 +1,61 @@ +/** + * Copyright (c) 2025 The Foundry Visionmongers Ltd. All Rights Reserved. + */ + +/** + * Handles mutation observer events. Filters events down to DOM modification that impact the version up button, and hides it if it is visible. + */ +const onDomChange = (mutations) => { + for (const mutation of mutations) { + // If not an element added/remove, skip this event. + if (mutation.type !== 'childList') { + continue; + } + + const targetElement = mutation.target; + // If not the version up button, skip this event. + if (targetElement.id !== "versionUp") { + continue; + } + + // If the version up button is already hidden, stop processing events. + if (targetElement.style.display === 'none') { + break; + } + + // Otherwise, hide the version up button and stop processing events. + console.log("Hiding Version Up button in the Panel Browser."); + targetElement.style.display = 'none'; + break; + } +}; + +// Mutation observer is used to monitor changes to DOM elements to hide the version up button when it is added. +const observer = new MutationObserver(onDomChange); + +// Flag to determine whether DOM changes are currently being observed. +let observing = false; + +// Navigation API is used to monitor navigating to the panel browser to start watching DOM modifications. +navigation.addEventListener("navigate", event => { + if (event.destination.url.endsWith("/workspace")) { + // When in the panel browser, start watching DOM changes to hide the version up button + console.log("Detected Flix workspace, listening for DOM changes."); + + observer.observe(document.body, { subtree: true, childList: true }); + observing = true; + + // If the version up button is already present in the DOM, hide it now + const versionUpElement = document.querySelector("#versionUp"); + if (versionUpElement) { + console.log("Hiding Version Up button in the Panel Browser."); + versionUpElement.style.display = 'none'; + } + } else if (observing) { + // When leaving the panel browser, stop monitoring DOM changes so it doesn't impact performance + console.log("Left Flix workspace, stopped listening to DOM changes."); + + observer.disconnect(); + observing = false; + } +}); \ No newline at end of file diff --git a/client_plugins/version_up_away/manifest.json b/client_plugins/version_up_away/manifest.json new file mode 100644 index 0000000..2b63809 --- /dev/null +++ b/client_plugins/version_up_away/manifest.json @@ -0,0 +1,12 @@ +{ + "name": "Version Up Away", + "version": "1.0", + "description": "A simple plugin that removes the 'Version Up' button from the Flix Panel Browser.", + "content_scripts": [ + { + "matches": ["file://*"], + "js": ["main.js"] + } + ], + "manifest_version": 3 + } \ No newline at end of file