How to Include files with a custom component?

Universal Dashboard UD Development
1

For the UD-Sound, I would like to include sounds builtin, but how ti do this?
I have looked throught some of the other custom components, but I have not been able to find another one that do it :slight_smile:

OK I figures it out :slight_smile:
so the webpack.config define which stuff get copyed to “public”, and it does it by looking for all the “stuff” that are required/imported in the javascript.
So I did this in the javascript file

require.context(“./sounds/”, true, /^./.*.wav/);

The above is relative from the javascript file itself.
So I created a folder under “Components” named Sounds, and i will just dump all wav files in here.
I then add to the webpack file to also include wav files by adding wav to the file.loader

{ test: /.(wav|eot|ttf|woff2?|otf|svg)$/, loader: ‘file-loader’ }

webpack will now add all wav files from the folder.

and the last thing to do it to add the build script:

Copy-Item $BuildFolder\public*.wav $OutputPath

2

BUT… webpack are downloaded in full by clients right?
so if i added alot of wav files, I will end up with a huge webpack file for clients to download right?
so how do I include the files, but dont add it to the webpack?
but still able to “pack” it with the module, and expose it for users to download ondemand?

3

Check your output directory. I bet it doesn’t actually pack the wav files into the main bundle and will load them on demand. It kind of depends on how you are loading the wav files in JSX. You should be able to delay load them so only the ones that are used are downloaded. You will need to make sure to register the wav files with UD in the PSM1 file. You’ll see it’s registering a bunch of other files. Just make sure to register the wav files too.

4

I fixed that :slight_smile: I found the UD-leaflet that contained hints for how to do it :slight_smile:

How do I Reference the files after ?

5

You need to reference them via require. Rather than doing this in your JSX file:

require.context("./sounds/", true, /^./.*.wav/);

You’ll probably want to reference each one individually.

cosnt myWav = require("./sounds/myWav.wav")

And then pass that wav into the react component that plays the wav. The myWav should have the URL to the wav file.

I’ve done this with the UDMap component to reference PNGs.

    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')

That said, you might be able to do it dynamically (without doing each individually) but I’m not 100% sure how to do that.

6

Could be a prebuild powershell script that inject all the lines.

1 Like
7

Writing JavaScript with PowerShell. I love it!