# \[Announce\] node-red-contrib-ui-media

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669>\
**Category:** Share Your Nodes\
**Created:** [6 February 2019 18:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669 "2019-02-06T18:14:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![steuck13](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@steuck13](https://discourse.nodered.org/u/steuck13)\
**Post date:** [6 February 2019 18:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/1 "2019-02-06T18:14:35Z")

</div>

Greetings,

I'm currently developing the first version of [node-red-contrib-ui-media](https://github.com/netsmarttech/node-red-contrib-ui-media). The main idea with this node is to create an easy way to display videos and images on the dashboard.

 ![example_pic](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/16d7e6500c2abd3f405693ca61c99457eb6a6454.jpeg)

All 'constructive' feedback is welcome before I publish it on npm. For now you can install it directly from [GitHub](https://github.com/netsmarttech/node-red-contrib-ui-media)

```
    npm install netsmarttech/node-red-contrib-ui-media

```

This node uses new Dashboard API (it is a Widget) introduced in version 2.10.0  
([announcement](https://discourse.nodered.org/t/announce-dashboard-version-2-10-0/4196/16)). So, use it with latest version of Node-RED dashboard.

Cheers

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 February 2019 18:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/2 "2019-02-06T18:43:19Z")

</div>

Hi @steuck13,

Nice !!!

This is so a coincidence. I started last night on a new [node-red-contrib-ui-camera](https://github.com/bartbutenaers/node-red-contrib-ui-camera) node, to display streaming video from camera's. I had already added the option for playing video file (like your node), but it didn't really fitted into my 'camera' concept. So I'm glad you have published your node, so I can remove the video file part from mine and focus 100% on camera's.

BTW I see you also added already a '_loop_' and '_show controls_' option, so I have nothing further to add. Great contribution ...

Bart

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 February 2019 19:53 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/3 "2019-02-06T19:53:17Z")

</div>

Hi @steuck13,

I have some layout troubles with my own node, and you seem to have solved them in your code...  
I would appreciate very much if you could explain why you have used the following settings:

```auto
<style>
    video{
        width: 100%;
        height: auto;
        max-height: 98%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<video id="${video_name}" src="${path}" ${controls_string}

```

My CSS knowledge is rather limited ...

Thanks a lot !  
Bart

---

<div class="post-metadata">

**Author:** ![steuck13](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@steuck13](https://discourse.nodered.org/u/steuck13)\
**Post date:** [7 February 2019 13:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/4 "2019-02-07T13:16:35Z")

</div>

Sure, no problem, I don't know that much but I'll try

```
width: 100%;
height: auto;

```

Here we define that the video element will fill the whole horizontal space available on the parent element and the height will adjust automatically. You´ll see this a lot when people try to make an element responsive to resizing.

```
max-height: 100%;

```

Since height is automatically set, I defined that the video height can be no bigger than 100% of the parent element size. If I'm not mistaken, this means that if the parent element have the same width as the video but a smaller height, the video will scale down by the height instead of overflowing and showing scroll bars.

```
position: relative;
top: 50%;
transform: translateY(-50%);

```

This is a tricky one. In some cases I found out that the scroll bar still appear, usually because a few pixels overflowed. When you transform an element the sizes are adjusted because of the movement, so I used this trick to eliminate the scroll bar on these rare cases.

Cheers

---

<div class="post-metadata">

**Author:** ![machadotiago](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/machadotiago/32/23776_2.png) [@machadotiago](https://discourse.nodered.org/u/machadotiago)\
**Post date:** [14 February 2019 16:42 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/5 "2019-02-14T16:42:52Z")

</div>

Hello all,  
the node-red-contrib-ui-media was finally published on NPM!

@knolleary, could you please make it available in the flows page? Thanks!

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [14 February 2019 17:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/6 "2019-02-14T17:44:37Z")

</div>

@machadotiago it is a completely automated system - apart from when something breaks.

So as long as you have followed the docs on how to package your node it will appear.

In this case, your node does not have `node-red` listed as a keyword so it will not get listed by the flow library.

---

<div class="post-metadata">

**Author:** ![machadotiago](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/machadotiago/32/23776_2.png) [@machadotiago](https://discourse.nodered.org/u/machadotiago)\
**Post date:** [25 March 2019 18:34 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/7 "2019-03-25T18:34:51Z")

</div>

Version 1.0.3 is available! You can now download it directly from the pallet 🙂

---

<div class="post-metadata">

**Author:** ![Steampunk\_Prof](https://avatars.discourse-cdn.com/v4/letter/s/58956e/32.png) [@Steampunk\_Prof](https://discourse.nodered.org/u/Steampunk_Prof)\
**Post date:** [26 March 2019 13:48 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/8 "2019-03-26T13:48:29Z")

</div>

I'm getting Cannot read property 'projects' of undefined on line 29 from the ui\_media.js file. Might need a bit more eroor trapping.

---

<div class="post-metadata">

**Author:** ![steuck13](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@steuck13](https://discourse.nodered.org/u/steuck13)\
**Post date:** [26 March 2019 14:52 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/9 "2019-03-26T14:52:57Z")

</div>

Greetings

Would you mind listing the steps that lead to that error?

Thank you

---

<div class="post-metadata">

**Author:** ![Steampunk\_Prof](https://avatars.discourse-cdn.com/v4/letter/s/58956e/32.png) [@Steampunk\_Prof](https://discourse.nodered.org/u/Steampunk_Prof)\
**Post date:** [26 March 2019 22:39 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/10 "2019-03-26T22:39:48Z")

</div>

Just installed it as per instruction and wondered why it didn't show up in the node pallete. Ran Node-RED with -v option to debug it and that showed up in the output. I'm running it on a Raspberry Pi with version 0.20.3 of Node-RED.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [26 March 2019 22:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/11 "2019-03-26T22:46:04Z")

</div>

Have you refreshed your browser?

---

<div class="post-metadata">

**Author:** ![machadotiago](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/machadotiago/32/23776_2.png) [@machadotiago](https://discourse.nodered.org/u/machadotiago)\
**Post date:** [27 March 2019 00:28 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/12 "2019-03-27T00:28:24Z")

</div>

We’ve identified where the problem is. It happens if you don’t have a setting.js file, or if your settings file doesn’t have the “editorTheme.projects” property.  
We will fix that in the next days.  
If you want a workaround just use the standard NodeRED settings file and it should work.

---

<div class="post-metadata">

**Author:** ![Steampunk\_Prof](https://avatars.discourse-cdn.com/v4/letter/s/58956e/32.png) [@Steampunk\_Prof](https://discourse.nodered.org/u/Steampunk_Prof)\
**Post date:** [27 March 2019 08:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/13 "2019-03-27T08:55:05Z")

</div>

Thanks, I'll take a look at the next release.  
The settings.js file is always there, however the "editorTheme.projects" property is optional and isn't in the standard settings.js file when Node-RED is installed.

---

<div class="post-metadata">

**Author:** ![tilleul](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tilleul/32/78_2.png) [@tilleul](https://discourse.nodered.org/u/tilleul)\
**Post date:** [27 March 2019 12:49 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/14 "2019-03-27T12:49:11Z")

</div>

@steuck13, hello I'm currently testing your node and I came across a problem: if the `httpAdminRoot` path in the settings file is set to something else than `/` then the upload feature fails with "Error API: Not found" message.

The fix is quite easy, replace line 293 in ui\_media.html with  
`var link = "uimedia/" + category + "/" + filesToUpload[0].name;`  
(this removes the leading `/`)

For the image to display properly in the UI/Dashboard, replace line 446 in ui\_media.js with  
`link = RED.settings.get("httpAdminRoot") + '/uimedia/' + config.category + '/' + config.file;`

I haven't searched if other changes were needed. You know your code better than me and you'll know what to do and where 🙂

---

<div class="post-metadata">

**Author:** ![tilleul](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tilleul/32/78_2.png) [@tilleul](https://discourse.nodered.org/u/tilleul)\
**Post date:** [27 March 2019 14:57 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/15 "2019-03-27T14:57:13Z")

</div>

Some suggestions while playing with your node:

Line 505 in ui\_media.js, `margin: 0, auto` is invalid CSS. You probably want to remove the comma.

Lines 281-282 could be replaced with `res.sendFile(pathImage);` as it would then use an appropriate MIME type instead of `media/*` (except if creating a stream has any advantage over sendFile when serving a video ? then I would check the file extension and set the appropriate MIME type accordingly).

Line 89, add `svg` in your regex and now your node also supports svg files 🙂 (these need to be served with `res.sendFile()` though -- don't know why)

If the CSS of the `div` enclosing the `img` was set to `display:grid` you could use `justify-items` and `align-items` properties and propose to the users of your node the ability to justify/align the image within the `div` (all 9 positions) and even stretch it ! Probably more easily than with the switch/case you used for the adjust/center/expand/side options.

Lines 603-612 of ui\_media.js: find a way to move this style to the `<head>` section of the dashboard to avoid unneeded repetition. Also use another selector than just `video` as this will target all `<video>` tags on the dashboard, including those that would have been added using an ui\_template node for instance.

Line 475 of ui\_media.js: same as above; move the script to the `<head>` section so it appears only once in the source file of the dashboard and use an inline onclick in your HTML like `onclick="getImageXY(event, this)"`

That's all for now ! Great work !

---

<div class="post-metadata">

**Author:** ![tilleul](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tilleul/32/78_2.png) [@tilleul](https://discourse.nodered.org/u/tilleul)\
**Post date:** [27 March 2019 16:02 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/16 "2019-03-27T16:02:47Z")

</div>

Why is the "center" option with a background-size of 200% ?

---

<div class="post-metadata">

**Author:** ![steuck13](https://avatars.discourse-cdn.com/v4/letter/s/9de053/32.png) [@steuck13](https://discourse.nodered.org/u/steuck13)\
**Post date:** [10 April 2019 17:50 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/17 "2019-04-10T17:50:37Z")

</div>

Greetings  
Just released a minor version with some bug fixes.  
If newer bugs appear, please feel free to report here or on github.

Thank you

---

<div class="post-metadata">

**Author:** ![muharremsari](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muharremsari/32/7996_2.png) [@muharremsari](https://discourse.nodered.org/u/muharremsari)\
**Post date:** [7 December 2019 06:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/18 "2019-12-07T06:44:48Z")

</div>

I was try remove the leading /. But i get Error API:Not found.

---

<div class="post-metadata">

**Author:** ![Glake01](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/glake01/32/5950_2.png) [@Glake01](https://discourse.nodered.org/u/Glake01)\
**Post date:** [12 May 2020 21:35 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/19 "2020-05-12T21:35:22Z")

</div>

Thanks for your node! I can get it to work by locating files and uploading them using your Files panel  
in configuration. I can't seem to display a local file using the payload or src properties of the payload.

I've used combinations like:

msg.src = "[http://localhost/home/pi/Pictures/pic\_....jpg](http://localhost/home/pi/Pictures/pic_....jpg)"  
msg.payload = "src/[http://localhost/home/pi/Pictures/pic\_....jpg](http://localhost/home/pi/Pictures/pic_....jpg)"  
msg.src = "/home/pi/Pictures/pic\_....jpg"  
msg.payload = "src/home/pi/Pictures/pic\_....jpg"

I hope you will be able to point me in the right direction.  
Thanks!

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 May 2020 22:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669/20 "2020-05-12T22:05:10Z")

</div>

If they are being served up by Niode-RED you probably need the port 1880 in there

[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669.md?page=2)