[WIP] Add a new feature media to simplify handling of media in Openhab

[lo92fr]

Add a new feature media to simplify handling of media in Openhab

Description

See this issue for description :
openhab/openhab-core#4710

[lo92fr]

Hello All,

@florian-h05 , @ghys,

I would appreciate if someone that have more experience that me on Vue Framework can give advice about these first version.
More specially on the implementation of the media popup.
I based it on what have been done for the analyzer popup, but I'm not sure it it's the good way two implement this.

Laurent

[florian-h05]

In general I do think a popup is the proper way of displaying the media selection.
Wrt to the implementation, I do think it is a good way to have the Item name and path in the URL as this allows browser navigation and proper reloading of the page, though I would extract the query params in the media-popup component and expect the media component to get that data as props.

[lo92fr]

do think a popup is the proper way of displaying the media selection.
Wrt to the implementation, I do think it is a good way to have the Item name and path in the URL as this allows browser navigation and proper reloading of the page, though I would extract the query params in the media-popup component and expect the media component to get that data as props.

Hello @florian-h05,

I've restart to work on this today, but have to said that currenlty I'm failling to have a proper implementation of this popup.

What happens today is that each time I click on a link, the popup is reload.
That's not good because the state is finally corrutped after the second click, and when the popup is closed, we have inconstistent url.

What I understand is that we need in such case a subroute scenario for the popup, what is implemented in vue v3 with a tag. But If I don't mistake, openhab is using today vue v2, so not tag.

Some hints seems to use a f7-view inside the popup to make a sub view.

Something likes:

But I feel to make it working correctly because it always finish with some infinite rendering loop on the popup component.
So definitivly something wrong in my implementation.

Also make some try with chatgpt to make the fixes, but also failed as well.

Is someone more experiment then me on vue and f7 framework can help me this resolved, it would be great.

Laurent.

[lo92fr]

Hello,

Make some progress on this today.
Of course, it will be not ready for 5.0, perharps for 5.1.
I fix some issues on popup navigations in UI part make things a littles more stables.
Also start to see how I can add a media Renderer popup to select the output device directly from the oh-player-control.

Still a lot of work to be done on it.
I like to have something simple to use for end user, where you have only one way to implement this whatever device you have in your configurations.

Laurent.

[lo92fr]

@florian-h05,

Forget about my last question, it seems I finally find a way to implement it somewhere correctly.
I think it will be also be better and more easy when openhab move to framework7 v7 and vue v3.
But for now, it should work in acceptable way like this.

As said in previous post, still a lot of work to be done to make it more stable and usable for end user.
I will give update as soon as possible.

Laurent.

[lo92fr]

This branch was rebased on main branch as 6/11, and modifications was made to make this compatible vue3/framework7 v7 and pinia store.

[lo92fr]

Hello @florian-h05,

Would appreciate a little help on a stupid thing!
I've previously using $f7route.query to access current query, and getting parameter from query.
But $f7route is note exposed anymore.

I see that when you are inside f7-page, you have f7route and f7router defined.
And that you can passe it into sub component using props and using syntax like this one ":f7route="f7route" :f7router="f7router" when calling the component. It work well when your are inside an f7-page.

But when the component are dynamically created by openhab like in layout, I can't find simple way to access this f7route without modify all the code of web-ui.

Can you help me on solving this.
Perhaps I just miss something obvious.

Thanks,
Laurent.

[florian-h05]

Hi Laurent,

you can get access to the router through the f7 view, for example:

openhab-webui/bundles/org.openhab.ui/web/src/components/navigation/oh-nav-content.vue

Line 83 in e044a8d

const f7router : Router.Router = props.f7router || f7.views.main.router

[lo92fr]

get access to the router through the f7 vie

Thanks @florian-h05, I'm solve all my issue about routing.