This is a proof of concept to see if I could grasp vuejs, using uibuilder. While it did take some time to get my head around it, to my surprise it works quite efficiently, so here I present a small project that allows you to watch IPTV channels (coming from the iptv repo; 8000+ channels).
Organised by country, category and an instant search.
node-red is used to parse the raw m3u8 file and convert it to json and listens for actions from uibuilder. Obviously nothing that could not have been done without node-red, but as said, proof of concept 
The gif was cropped, the modal will be centered.
The flow:
If you're interested, I have uploaded everything to a github repo.
Note that this won't work on Chrome as it does not support HLS streams.
7 Likes
Very nice! Thanks for sharing.
Is that just Chrome or Chromium based browsers in general?
1 Like
I think it is all chromium based browsers. There are plugins/extensions available.
A quick search in the Chrome "web store" on HLS finds three "extensions"
Play HLS M3u8
Native HLS Playback
Native MPEG-Dash + HLS Playback
Any suggestions on which to try first? Or just view in Firefox to start?
Does this IPTV stuff work inside the US? A quick re-watch of the animated gif I did see United States flash by in the country list.
Might be fun to try this and maybe learn something about UI builder, which I've not yet tried. Dashboard has so far met my limited needs for a "web UI".
The streams work world-wide. I would try any that works 
Hi, @bakman2!
First of all, thank you for your project IPTV! I'm currently trying to deploy it following your instructions, but I'm having some problems with it. In particular, in "uibuilder" :
Could you maybe help me with it? Would be really grateful!
Thanks.
Add a uibuilder node to a flow, change the url to "tv", deploy. Delete the uibuilder node, deploy again.
A "tv" directory was created: ~/.node-red/uibuilder/tv.
Add the files from the repository into that folder.
Import the flow, deploy. Open your browser: http://yourip/tv
1 Like
Hi, @bakman2!
Thank you for your quick answer.
I've deleted my previous flow and have tried the way you suggested. But still, no success.
Also, i wonder, why did you write this link "http://yourip/tv"? Because the link on my page is this: "http://192.168.1.30:1880/endpoint/tv/".
i wonder, why did you write this link "http://yourip/tv"? Because the link on my page is this: "http://192.168.1.30:1880/endpoint/tv/".
if you follow the steps, you should end up on
http://192.168.1.30:1880/tv
When I've tried this link: "http://192.168.1.30:1880/tv"
I received such message: "Cannot GET /tv"
My built-in Dashboard has link: "http://192.168.1.30:1880/endpoint/ui/#!/0"
Could it be because my Node-red is set up in Docker?
where are the files? (path)
You have set httpNodeRoot to 'endpoint' in your settings.js file. You need to remember to mentally adjust the URL's when you do that since nobody else will know and will assume that you haven't done it.
Okay then,
'endopint/tv'
is not a problem.
When i click on "Increment" button, i get a following problem in "debug messages":
"ReferenceError: topic is not defined (line 11, col 37)"
Can you maybe suggest in which file there is a problem? Or how can I fix it?
Thanks a lot!
The point is: your screenshot shows the default uibuilder index. Did you download the files from the repository?
Yes, i downloaded the files:
Thank you for a hint, I've just found it out myself too
Currently I'm testing this amazing component, thanks for sharing!
I'm seeing an error in the debug node caused by the function in the Load single Country or Category leg of the flow:
"ReferenceError: topic is not defined (line 11, col 37)"
the code is:
filename = flow.get("all")
if(msg.payload.hasOwnProperty("country")){
topic = msg.payload.country
}
if(msg.payload.hasOwnProperty("category")){
topic = msg.payload.category
}
if(!msg.payload.hasOwnProperty("search")){
return {filename:filename,topic:topic};
}
but needs to define the variable topic before referencing it like this:
filename = flow.get("all")
var topic ='';
if(msg.payload.hasOwnProperty("country")){
topic = msg.payload.country
}
if(msg.payload.hasOwnProperty("category")){
topic = msg.payload.category
}
if(!msg.payload.hasOwnProperty("search")){
return {filename:filename,topic:topic};
}
It is defined if you set it up correctly. It is the first thing it sets upon deploy.
