Welcome Page Additional Content

#1

Dear All,

Please be so kind to point out how to manage to change the appearance of the welcome page by adding anything to welcomePageAdditionalContent.html My aim is to add a link to an imprint and a GDPR notice in order to make the website lawful in Europe. Ideally, this should work within the package install version and without building the source code, doin npm install && make or the like.

I am experimenting with a debian package install on debian stretch using just jetty. The website does respond to changes in /usr/share (e.g., renaming the favicon file leads to no favicon thereafter). However, I cannot get the website to respond to welcomePageAdditionalContent.html changes in at all. I suspect changes to index.html might be required, such as an include statement. However, none of my tries did have any impact.

Regards,

Michael Schefczyk

#2

I just tested it and it works. I edited static/welcomePageAdditionalContent.html to be:

<template id = "welcome-page-additional-content-template">
<center>Footer text</center>
</template>
#3

Dear Damian,

Thank you very much for prompt testing!

I have copied the same into /usr/share/jitsi-meet/static/welcomePageAdditionalContent.html and rebooted to be on the very safe side. Owner is root:root and permissions are 0644 as for all other files in the jitsi-meet folder where, for example, favicon and images could be changed effectively, if one wanted to.

However, I see no “Footer text”, unfortunately. In the bowser, the source code of the web page ends with:

<script src="libs/lib-jitsi-meet.min.js?v=3216"></script>
<script src="libs/app.bundle.min.js?v=3216"></script>
<!--#include virtual="title.html" -->
<!--#include virtual="plugin.head.html" -->
<!--#include virtual="static/welcomePageAdditionalContent.html" -->

Do you have any recommendations on terms of how to proceed? Will things behave differently with Apache or Nginx instead of just using Jetty?

Regards,

Michael

#4

You can quickly fix it by editing /etc/jitsi/videobridge/sip-communicator.properties and adding:

org.jitsi.videobridge.rest.jetty.ResourceHandler.alias./static/welcomePageAdditionalContent.html=/usr/share/jitsi-meet/static/welcomePageAdditionalContent.html

restart jvb and it will work.

#5

Dear Damian,

Thank you very much! That does work well for static text. Beyond that, my intention was to add a footer with the following format:

Powered by Jitsi Meet | imprint | GDPR

Unfortunately, href links do not seem to work in this template context. Nevertheless, I hope that this should be seen as a useful approach for many users setting up their own server. Could you please be so kind to provide a clue to implementing that by people with my limited level of skills in terms of html, javascript and the like?

Regards,

Michael

#6

Here is a simple example inspired by https://meet.jit.si current layout of the welcomepage. It has the html template in static/welcomePageAdditionalContent.html and the css in plugin.head.html.

static/welcomePageAdditionalContent.html

<template id = "welcome-page-additional-content-template">
    <div class="welcome-page-content">
        <div class="welcome-footer">
            <div class="welcome-footer-content">
                <div class="welcome-footer-about">
                    <div>
                        <a href="https://jitsi.org/jitsi-meet/" rel="noopener" target="_blank">Powered by Jitsi Meet</a> | <a href="https://abc.net/imprint.html/" rel="noopener" target="_blank">imprint</a> | <a href="https://abc.net/GDPR.html/" rel="noopener" target="_blank">GDPR</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

plugin.head.html

<style>
    .welcome-page-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: space-between;
        position: relative;
        z-index: 1;
        margin-top: 35px;
        width: 100%
    }
    .welcome-page-content .welcome-footer {
        color: #FFF;
        display: flex;
        padding-bottom: 20px;
        padding-top: 20px;
        width: 100%;
        z-index: 1
    }
    .welcome-page-content .welcome-footer-content a {
        color: #fff !important;
        text-decoration: underline
    }

    .welcome-page-content .welcome-footer-content {
        display: flex;
        justify-content: center;
        width: 100%;
        z-index: 2
    }

    .welcome-page-content .welcome-footer-about {
        display: flex;
        flex-direction: column;
        flex: 1;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        justify-content: center
    }

    .welcome-page-content .welcome-footer-about:last-child {
        margin-left: 4px
    }
</style>

Mind that those files can be easily overridden with custom files in nginx so, so basically to add those files in /etc/jitsi/meet and skip editing files in /usr/share/jitsi-meet so upgrades will not touch changes.

1 Like
#7

Dear Damian,

Thank you very much! Unfortunately, I am still wrestling with the issue.

Please consider taking a look at https://meet.schefczyk.net/

My desired footer on blue background is created as suggested. Unfortunately, the links do not function. So far, I did not manage to determine the reason for that.

At the lowest position on white background is the same html-line entered at the bottom of index.html. There, links do work. However, manipulating index.html is certainly not the intended practice and it will potentially be overwritten upon package upgrades.

Do you have any suggestions on determining why the correct method might not work? My setting is an install on Debian stretch with jetty behind haproxy. The result is identical when going directly to jetty within the LAN. Also, installing Nginx does not change the findings.

Regards,

Michael

#8

Your watermark is covering the entire page and eating all the clicks. Don’t set it to 100% height and width.

1 Like
#9

Thank you very much! I did revert to the original watermark. That seems to cause the same issue, though. Even if I rename the watermark.png file in the image folder, the same thing does happen. Hence, it might be an issue with watermark settings, not the particular watermark file. Do you know where to change that?

#10

Okay, the CSS situation there is worse than I thought and I think it’s actually a problem within jitsi-meet. Some of the stylings are taking up more space than they should, causing z-index wars, and the rest of the page looks like it’s working around that problem. Looks like to get around it “welcome-page-content” currently is set to position: relative. So maybe that workaround is okay for now.

#11

Wait, no I think I was less wrong the first time around. Try overriding the style .welcome .welcome-watermark so it uses “auto” or “initial” or event “0” height. Same could be applied to width.

1 Like
#12

Thank you very much! Replacing width and hight under .welcome-watermark by auto (instead of 100%) in all.css does solve the problem. That seems to work positively with any watermark image.

Are you going to initiate a change in the code so that it will work for others out of the box?

#13

Probably.