Plugin Pages - please try to move away from inline script & jQuery

[Luke 37095]

You may have noticed a lot of plugin updates recently. I finally went and did this work for all of our core plugins. TuneIn is a great example of how you can separate your html and JavaScript:

https://github.com/MediaBrowser/TuneIn

Notice how it has separate js files and then registers them here: https://github.com/MediaBrowser/TuneIn/blob/master/MediaBrowser.Plugins.TuneIn/Plugin.cs#L25-L40

You can still get away with doing things the older ways, but you may run into some UI quirks here and there.

Additionally, please see if you can drop jQuery from your code altogether, if you are still using it. The web app hasn't been using it for a long time, but we still bundle it for the plugins that need it. At some point later this year I'm plan to remove it and load it from the internet via cdn. That means your page will still work, but it will cause the web app to load jQuery from the internet since it won't be bundled anymore.

Please let me know if you have questions. Thanks.
 

@hackthis02

@chef  @roaku @Cheesegeezer @MikePlanet @ShaneP @mickle026 @rechigo @TeamB @pünktchen @radeon  @VicMoore

[roaku 795]

My plugins are jquery free and I currently load my main js file in the same way as the example (main html loads js with data-controller).

That main js file loads additional JS files structured as modules using require:
 

require([Dashboard.getConfigurationResourceUrl('IconicData'),Dashboard.getConfigurationResourceUrl('IconicLibraries'),Dashboard.getConfigurationResourceUrl('IconicBadges'),Dashboard.getConfigurationResourceUrl('IconicRules'),Dashboard.getConfigurationResourceUrl('IconicForms')],
(IconicData, IconicLibraries, IconicBadges, IconicRules, IconicForms) => {

...

Will this approach to JS remain viable?

Is the premise/useage of 'baseView' documented anywhere? I see how to include it from your example, but I haven't seen it before. How big of a risk am I taking the longer I put off a refactor to include it?

Edited March 24, 2023 by roaku

[Luke 37095]

Yes that should be fine.

Also just keep in mind that using arrow functions will limit your support to browsers that support that (which yes I know has strong support by now). But something to consider anytime you want to use newer language features.

Using BaseView right now is not essential at this point.

[Cheesegeezer 3087]

1 hour ago, Luke said:

You may have noticed a lot of plugin updates recently. I finally went and did this work for all of our core plugins. TuneIn is a great example of how you can separate your html and JavaScript:

https://github.com/MediaBrowser/TuneIn

Notice how it has separate js files and then registers them here: https://github.com/MediaBrowser/TuneIn/blob/master/MediaBrowser.Plugins.TuneIn/Plugin.cs#L25-L40

You can still get away with doing things the older ways, but you may run into some UI quirks here and there.

Additionally, please see if you can drop jQuery from your code altogether, if you are still using it. The web app hasn't been using it for a long time, but we still bundle it for the plugins that need it. At some point later this year I'm plan to remove it and load it from the internet via cdn. That means your page will still work, but it will cause the web app to load jQuery from the internet since it won't be bundled anymore.

Please let me know if you have questions. Thanks.

@chef  @roaku @Cheesegeezer @MikePlanet @ShaneP @mickle026 @rechigo @TeamB

Thanks Luke, I’m already doing this and using pure JS. I know chef does it like this too!
 

public IEnumerable<PluginPageInfo> GetPages() => new[]
        {
            new PluginPageInfo
            {
                Name = "VantagePointGlobalConfigurationPage",
                EmbeddedResourcePath = GetType().Namespace + ".Configuration.VantagePointGlobalConfigurationPage.html",
                EnableInMainMenu = true,
                MenuSection = "server",
                MenuIcon = "theaters"
            },
            new PluginPageInfo
            {
                Name = "VantagePointGlobalConfigurationPageJS",
                EmbeddedResourcePath = GetType().Namespace + ".Configuration.VantagePointGlobalConfigurationPage.js"
            },
            new PluginPageInfo
            {
                Name = "VantagePointMovieConfigurationPage",
                EmbeddedResourcePath = GetType().Namespace + ".Configuration.VantagePointMovieConfigurationPage.html",
                
            },
            new PluginPageInfo
            {
                Name = "VantagePointMovieConfigurationPageJS",
                EmbeddedResourcePath = GetType().Namespace + ".Configuration.VantagePointMovieConfigurationPage.js"
            },
            new PluginPageInfo
            {
                Name = "VantagePointEpisodeConfigurationPage",
                EmbeddedResourcePath = GetType().Namespace + ".Configuration.VantagePointEpisodeConfigurationPage.html",
            },
            new PluginPageInfo
            {
                Name = "VantagePointEpisodeConfigurationPageJS",
                EmbeddedResourcePath = GetType().Namespace + ".Configuration.VantagePointEpisodeConfigurationPage.js"
            }
            /*new PluginPageInfo
            {
                Name = "vantagepoint",
                EmbeddedResourcePath = GetType().Namespace + ".Configuration.vantagepoint.html",
                EnableInMainMenu = true,
                MenuSection = "server",
                MenuIcon = "theaters"
            },
            new PluginPageInfo
            {
                Name = "vantagepointjs",
                EmbeddedResourcePath = GetType().Namespace + ".Configuration.vantagepoint.js"
            }*/
        };

Cheers

@VicMooreprobably worth a note for you as-well chief. 

Edited March 24, 2023 by Cheesegeezer

[Cheesegeezer 3087]

Also you need add a reference to your Html file to reference the JS page.

Top line needs this… but the real important is the very last dependancy on the data-controller… Which references the JS file

<div id="VPGlobalConfigurationPage" data-role="page" class="type-interior pluginConfigurationPage withTabs libraryFileOrganizerLogPage" data-title="Vantage Point" data-helpurl="https://emby.media/community/index.php?/topic/111310-vantage-point-20-complete-rework/" data-require="emby-button,emby-input,emby-select,emby-toggle,emby-collapse" data-controller="__plugin/VantagePointGlobalConfigurationPageJS">

 

if anyone wants help just let me know

[Cheesegeezer 3087]

12 hours ago, roaku said:

My plugins are jquery free and I currently load my main js file in the same way as the example (main html loads js with data-controller).

That main js file loads additional JS files structured as modules using require:
 

require([Dashboard.getConfigurationResourceUrl('IconicData'),Dashboard.getConfigurationResourceUrl('IconicLibraries'),Dashboard.getConfigurationResourceUrl('IconicBadges'),Dashboard.getConfigurationResourceUrl('IconicRules'),Dashboard.getConfigurationResourceUrl('IconicForms')],
(IconicData, IconicLibraries, IconicBadges, IconicRules, IconicForms) => {

...

Will this approach to JS remain viable?

Is the premise/useage of 'baseView' documented anywhere? I see how to include it from your example, but I haven't seen it before. How big of a risk am I taking the longer I put off a refactor to include it?

@VicMoorethis is how you call other JS files to use in your main JS Config UI. They just all need to be registered in the Plugin.cs file. And don’t forget that every .js and .html has to set as an embedded resource in the properties for each one.