Problem using dependence's in a plugin

[VicMoore 754]

My goal is to rewrite the JS in pseudoTV to take advantage of the modular structure of Emby, in particular the use of "define" statements. I want to break up the functionality into modules. To test how to do this I created two JS filles, mytvapps.js and mytvconfig.js. 

First I created the "mytvapps.js" file and filled it with the JS code below.

 

define([],function () {

    return  {
                add: function (a, b) {
                    return a + b;
                },
                sub: function (a, b) {
                    return a - b;
                }
            };
});

Next I created the JS configuration file for the plugin.  The code for "mytvconfig.js" is given below. Notice that I added to the defind statement the mytvapps dependency.

define(['globalize', 'loading', 'appRouter', 'formHelper', 'mytvapps'], function (globalize, loading, appRouter, formHelper, mytvapps) {
    'use strict';

    const pluginId = "1E1DDB42-6D52-41C2-AC8E-6AC98BFB7FB1";

    return function (view, params) {
        view.addEventListener('viewshow', function () {
                let i = mytvapps.add(2, 3);
                console.log("=== i ", i);
            }
        );
    };
});

The myTV.csproj file is included here.

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <Version>1.0.0.29</Version>
    <AssemblyVersion>$(Version)</AssemblyVersion>
    <FileVersion>$(Version)</FileVersion>
    </PropertyGroup>

    <ItemGroup>
        <None Remove="web\mytvconfig.html" />
        <None Remove="web\mytvconfig.js" />
        <None Remove="web\mytvapps.js" />
    </ItemGroup>

    <ItemGroup>
        <EmbeddedResource Include="thumb.jpg" />
        <EmbeddedResource Include="web\mytvconfig.html" />
        <EmbeddedResource Include="web\mytvconfig.js" />
        <EmbeddedResource Include="web\mytvapps.js" />
    </ItemGroup>

    <ItemGroup>
    <PackageReference Include="mediabrowser.server.core" Version="4.7.9" />
    <PackageReference Include="System.Memory" Version="4.5.5" />
    </ItemGroup>

    <Target Name="PostBuild" AfterTargets="PostBuildEvent">
        <!-- <Exec Command="xcopy &quot;$(TargetPath)&quot; &quot;\\192.168.188.32\appdata\emby-48-beta\plugins&quot; /Y" /> -->
        <Exec Command="xcopy &quot;$(TargetPath)&quot; &quot;%25AppData%25\Emby-Server\programdata\plugins&quot; /Y" />
    </Target>
</Project>

When the plugin is executed, the following error occurs (copied from the log) and the server hangs.

Data path: C:\Users\vic\AppData\Roaming\Emby-Server\programdata Application path: C:\Users\vic\AppData\Roaming\Emby-Server\system System.IO.FileNotFoundException: System.IO.FileNotFoundException: Could not find file 'C:\Users\vic\AppData\Roaming\Emby-Server\system\dashboard-ui\mytvapps.js'.

File name: 'C:\Users\vic\AppData\Roaming\Emby-Server\system\dashboard-ui\mytvapps.js' at Microsoft.Win32.SafeHandles.SafeFileHandle.CreateFile(String fullPath, FileMode mode, FileAccess access, FileShare share, FileOptions options)

 

Notice that the log cannot find the "mytvapps.js" file, even though, from the VS picture below the file does exist.

 

I know the solution is simple, I just can't find it.  Somewhere I am not telling Emby where the mytvapps.js file is located.

I would appreciate any Ideas about what I am doing wrong?

Vic

 

[Luke 42077]

HI, auto-organize has good sample code:

https://github.com/MediaBrowser/Emby.AutoOrganize

fileorganizer is a module that gets loaded.

[VicMoore 754]

@Luke I looked at the AutoOrganize to do what I am trying above.  I am doing the same thing, but somewhere I have missed a step.

Vic

[VicMoore 754]

 

Why is Emby looking for the "mytvapps.js" file in the "dashboard-ui" directory? It's in the "web" directory?

 

 

Data path: C:\Users\vic\AppData\Roaming\Emby-Server\programdata Application path: C:\Users\vic\AppData\Roaming\Emby-Server\system System.IO.FileNotFoundException: System.IO.FileNotFoundException: Could not find file 'C:\Users\vic\AppData\Roaming\Emby-Server\system\dashboard-ui\mytvapps.js'.

File name: 'C:\Users\vic\AppData\Roaming\Emby-Server\system\dashboard-ui\mytvapps.js' at Microsoft.Win32.SafeHandles.SafeFileHandle.CreateFile(String fullPath, FileMode mode, FileAccess access, FileShare share, FileOptions options)

 

 

[Luke 42077]

Probably because your code doesn't match the auto-organize example. See here:

https://github.com/search?q=repo%3AMediaBrowser%2FEmby.AutoOrganize fileorganizer&type=code

[VicMoore 754]

@LukeThe AutoOrganize code does not use "define" to load JS code. They use it to load C# code.  It should work for JS but does not. Or better said, my test indicates that it does not. What I can't figure out is what's wrong with my test.

Vic

[Luke 42077]

https://github.com/MediaBrowser/Emby.AutoOrganize/blob/d4505ef029c7031559084ff8cb7722ee80489b99/Emby.AutoOrganize/Configuration/fileorganizer.js#L1

[Luke 42077]

What you should do is refer to my previous link that searches the repo for fileorganizer. You should do all of the same things that you see there to setup a js module in your plugin.

[VicMoore 754]

@LukeI have done everything that you have requested.

In AutoOrganize

1)  fileorganizer.js is not passed to another JS program via a 'define'

2) instead, fileorganize.js and fileorganize.html are loaded as an html page with controlling JS.

3) in addition, JS functions are shared across the various separate JS files by adding shared files to the prototype of ApiClient.

My test of "define' is simple, as the code above suggests. Is it possible that there is a bug in the core plugin code when it involves loading JS? This plugin was built from the standard template in the SDK.

Vic

P.S.  I really like the AutoOrganize code.  I have learned several new tricks.

Edited January 6, 2025 by VicMoore

[Luke 42077]

Quote

3) in addition, JS functions are shared across the various separate JS files by adding shared files to the prototype of ApiClient.

You don't need to do this. This is just a holdover from long ago when many functions of auto-organize were built into core code.

[Luke 42077]

2 minutes ago, VicMoore said:

@LukeI have done everything that you have requested.

In AutoOrganize

1)  fileorganizer.js is not passed to another JS program via a 'define'

 

You can't pull it in with define. Instead: https://github.com/MediaBrowser/Emby.AutoOrganize/blob/d4505ef029c7031559084ff8cb7722ee80489b99/Emby.AutoOrganize/Configuration/autoorganizelog.js#L390

[VicMoore 754]

Thanks @Luke now I know what to do.  I chose a solution similar to one illustrated by the URL above. The code is below.

 

            require([Dashboard.getConfigurationResourceUrl(mytvappsjs')], (t) => {
                addOnApps = t();

                let test = addOnApps.test(1);
            });

[Luke 42077]

Right. You can't do it in define because the url to the js is not known statically. It's not part of the web app code base, and the full url has to be determined at runtime based on the server url.

[VicMoore 754]

@LukeNow I understand. Thanks for the detail.  It's great to learn something new.

Vic