Hide right pane completely

hello everyone, first question here is the forum. I might have a project coming up where we must hide the right pane completely (drawer with participants). until now i have managed to hide everything, all thumbnails, button elements, etc etc, but tha pane on the right is still visible on mouse over/mouse move. is there a way to hide it as well?

thanks in advance

Welcome to the forum.

Try explicitly selecting the buttons you want to show up in this array and just leave “filmstrip” commented. I think this should do it.

thank you freddie. this is my current config, apparently i already have tried what you propose (at least i think so) but the empty vertical filmstrip (that one is the one on the right side, correct?) keeps showing up with mouse over:

just to clarify a bit, i am trying to make the most minimalistic call possible, practically only the faces with no interface. and i am using cloudron but i guess that is irrelevant.



// See https://github.com/jitsi/jitsi-meet/blob/master/config.js for available options

exports = module.exports = {
    enableNoAudioDetection: true,
    enableNoisyMicDetection: true,
    enableWelcomePage: true,

    p2p: {
        enabled: true
    },


    // SD changes

    resolution: 720,

    participantsPane: {
        hideModeratorSettingsTab: true,
        hideMoreActionsButton: true,
        hideMuteAllButton: true
    },

    enableWelcomePage: false,
    requireDisplayName: false,
    hideAddRoomButton: true,
    hideDisplayName: true,
    disable1On1Mode: null,
    connectionIndicators: {
        //     autoHide: true,
        //     autoHideTimeout: 5000,
        disabled: true,
        //     disableDetails: false,
        //     inactiveDisabled: false
    },

    // Options related to the participants pane.
    participantsPane: {
        //     // Hides the moderator settings tab.
        hideModeratorSettingsTab: true,
        //     // Hides the more actions button.
        hideMoreActionsButton: true,
        //     // Hides the mute all button.
        hideMuteAllButton: true,
    },

    // Options related to the breakout rooms feature.
    breakoutRooms: {
        //     // Hides the add breakout room button. This replaces `hideAddRoomButton`.
        hideAddRoomButton: true,
        //     // Hides the auto assign participants button.
        hideAutoAssignButton: true,
        //     // Hides the join breakout room button.
        hideJoinRoomButton: true,
    },

    // Hides the conference timer.
    hideConferenceTimer: true,

    // Hides the recording label
    hideRecordingLabel: true,

    // Hides the participants stats
    hideParticipantsStats: true,

    // Disables self-view tile. (hides it from tile view and from filmstrip)
    disableSelfView: true,

    // If true, tile view will not be enabled automatically when the participants count threshold is reached.
    disableTileView: true,

    // Disables self-view settings in UI
    disableSelfViewSettings: true,

    // Tile view related config options.
    tileView: {
        //     // The optimal number of tiles that are going to be shown in tile view. Depending on the screen size it may
        //     // not be possible to show the exact number of participants specified here.
        numberOfVisibleTiles: 0,
    },

    subject: 'Station Name',

    toolbarButtons: [
        //    'camera',
        //    'chat',
        //    'closedcaptions',
        //    'desktop',
        //    'dock-iframe'
        //    'download',
        //    'embedmeeting',
        //    'etherpad',
        //    'feedback',
        //    'filmstrip',
        //    'fullscreen',
        //    'hangup',
        //    'help',
        //    'highlight',
        //    'invite',
        //    'linktosalesforce',
        //    'livestreaming',
        //    'microphone',
        //    'participants-pane',
        //    'profile',
        //    'raisehand',
        //    'recording',
        //    'security',
        //    'select-background',
        //    'settings',
        //    'shareaudio',
        //    'sharedvideo',
        //    'shortcuts',
        //    'stats',
        //    'tileview',
        //    'toggle-camera',
        //    'undock-iframe',
        //    'videoquality',
    ],

    filmstrip: {
        //     // Disables user resizable filmstrip. Also, allows configuration of the filmstrip
        //     // (width, tiles aspect ratios) through the interfaceConfig options.
        disableResizable: true,

        //     // Disables the stage filmstrip
        //     // (displaying multiple participants on stage besides the vertical filmstrip)
        disableStageFilmstrip: true,

        //     // Disables the top panel (only shown when a user is sharing their screen).
        disableTopPanel: true,

        //     // The minimum number of participants that must be in the call for
        //     // the top panel layout to be used.
        //     minParticipantCountForTopPanel: 50,
    },

};

Try uncommenting the functions you need from the array (maybe test with just one to see). If you don’t define the functions, all of them will show up.

ok, i will give it another try later, but right now my toolbar buttons array is already empty, it is uncommented, but all buttons insde are commented, so they are indeed not showing up, just as i wanted. but again, i will make a short GIF later, thank you!

toolbarButtons: []

You’re saying with the array empty, all the buttons don’t show up but that filmstrip still does? I would test it for you, but I’m not near my dev environment right now.

Removing “filmstrip” from toolbarButtons will remove the controls for users to toggle visibility of the filmstrip, but the filmstrip itself will still be visible.

I don’t think there is an option yet to hide it by default, so you’ll need to inject a call to toggle it away on join.

It is trivial if you are using the IFrame API since you can just call the toggleFilmStrip command on videoConferenceJoined. Example: JSFiddle

If you’re not using IFrame API, then I’m guessing it might be possible to inject extra javascript in /usr/share/jitsi-meet/body.html to do something similar, but off the top of my head, I don’t know how. :man_shrugging:

Perhaps try something like this in /usr/share/jitsi-meet/body.html?

<script>
    function waitForAppLoaded(callback) {
        if (APP && APP.store && APP.store.getState()) {
          return callback();
        } else {
          setTimeout(() => waitForAppLoaded(callback), 1000);
        }
    }

    waitForAppLoaded(function () {
      APP.UI.toggleFilmstrip();
    });
</script>

Disclaimers:

  • I have not really tested this so no idea if it will work in all cases
  • APP.* is not an API but an internal implementation, which means that direct access to it is risky and could break without warning as the software evolves.

thank you both. and yes, when i leave the array empty + all other settings i made in the config i posted no controls whatsoever show up, but the filmstrip keeps appearing.

thank you for the injection suggestion. but when you said „iframe“ i rather realised that since it will be a controlled environment (jitsi inside an electron app) i could just put an invisible area on top or something to avoid mouse over/touch interactions to trigger the filmstrip from appearing. i think that is the easiest solution :slight_smile:

1 Like

Actually running in electron is using iframeAPI. You can take a look here GitHub - jitsi/jitsi-meet-electron: Jitsi Meet desktop application powered by

oh i wasnt even aware of this, i meant in a custom electron app i am loading jitsi in a webview, but i will check this out.

See also: GitHub - jitsi/jitsi-meet-electron-sdk: Jitsi Meet SDK for Electron