Showing current and ongoing livestreams #4

New Issue

aadil · 2022-01-01T07:18:20Z

aadil commented

2022-01-01 07:18:20 +00:00

copied over from original lumbung-theme repo

ideally with some urgency / on the top of the page
will require additional gluecode

copied over from [original lumbung-theme repo](https://git.vvvvvvaria.org/rra/lumbung-theme/issues/4) > ideally with some urgency / on the top of the page > will require additional gluecode

decentral1se changed title from ~~showing current and ongoing livestreams~~ to Showing current and ongoing livestreams

2022-01-26 08:49:19 +00:00

r commented

2022-02-18 20:34:17 +00:00

Ok, I've done some more research in to this and it looks good & fairly easy to do.

The current backend & front-end already pick up livestreams and display them on the page.

To get this working nicely working we need a few components:

livestream notification on main page

This should be something like a banner or permanent notification above all cards but below the menu.

Something like LIVE NOW: < STREAM XY >

This should be a partial "listing" template like so: https://git.autonomic.zone/ruangrupa/lumbung.space/src/branch/main/themes/lumbung-theme/layouts/partials/video_box.html

Note the is_live on line12 which can be used to detect these livestreams here

This can either link to the original livestream on tv.lumbung.space or link to a dedicated livestream page

livestream page

Each livestream notification then has an associated page, with a large video player and a chatbox!

This should be a custom "page" template, different from the others.

The videoplayer should be part of the template (exact parameters tbd):

<iframe title="Livestream Description" src="https://tv.lumbung.space/videos/embed/{.Params.uuid}" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe>

What is passed to the iframe snippet ist {.Params.uuid}

For the chatbox there can be another iframe, note {.Params.uuid} is again passed:

Now I don't know whether this is actually enough, but it does seem like it. Alternatively, if we really want to go this way the page template could include a little javascript snippet which instantiates the conversejs chatroom.

Ok, I've done some more research in to this and it looks good & fairly easy to do. The current backend & front-end already pick up livestreams and display them on the page. To get this working nicely working we need a few components: # livestream notification on main page This should be something like a banner or permanent notification above all cards but below the menu. Something like LIVE NOW: < STREAM XY > This should be a partial "listing" template like so: https://git.autonomic.zone/ruangrupa/lumbung.space/src/branch/main/themes/lumbung-theme/layouts/partials/video_box.html Note the `is_live` on [line12](https://git.autonomic.zone/ruangrupa/lumbung.space/src/branch/main/themes/lumbung-theme/layouts/partials/video_box.html#L12) which can be used to detect these livestreams [here](https://git.autonomic.zone/ruangrupa/lumbung.space/src/branch/main/themes/lumbung-theme/layouts/index.html#L7) This can either link to the original livestream on tv.lumbung.space or link to a dedicated livestream page # livestream page Each livestream notification then has an associated page, with a large video player and a chatbox! This should be a custom "page" template, different from the others. The videoplayer should be part of the template (exact parameters tbd): `<iframe title="Livestream Description" src="https://tv.lumbung.space/videos/embed/{.Params.uuid}" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe>` What is passed to the iframe snippet ist `{.Params.uuid}` For the chatbox there can be another iframe, note `{.Params.uuid}` is again passed: `<iframe src="https://tv.lumbung.space/plugins/livechat/5.4.0/router/webchat/room/{.Params.uuid}?_ac_mainForeground=%23000&_ac_mainBackground=%23fff&_ac_greyForeground=%23585858&_ac_greyBackground=%23E5E5E5&_ac_menuForeground=%23fff&_ac_menuBackground=%23000&_ac_inputForeground=%23000&_ac_inputBackground=%23fff&_ac_buttonForeground=rgb%28255%2C+255%2C+255%29&_ac_buttonBackground=%23f2690d&_ac_link=%23000&_ac_linkHover=%23000" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" frameborder="0"></iframe>` Now I don't know whether this is actually enough, but it does seem like it. Alternatively, if we really want to go this way the page template could include a little javascript snippet which instantiates the conversejs chatroom.

Sign in to join this conversation.