I built Happy Hour with Jitsi Meet -- thank you!

Developers
#1

This is really just a note to say “thank you” to the Jitsi developers for such a cool product!

As a quarantine hobby, I wanted to try to re-create the feel of a happy hour mixer with dozens of people, where you can bounce from table to table and participate in different conversations. I had to learn a bunch of new technologies/libraries to do that, and Jitsi was easy to work with and well documented. The free hosting of meet.jit.si really simplified my life. And I love there’s so little friction – everything happens in the browser, meetings just spring into existence when you access them rather than having to be set up, no authentication step – it was all really easy. A few other (commercial) video conference tools offer APIs, but I don’t think I could have achieved the same effect with any of them. Or if I could, their docs are so bad I can’t tell that. So, thank you to everyone who has put hard work toward Jitsi – I’m so grateful!

The finished project is at https://happyhour.ianwdavis.com/ – I’d be interested to hear what you think!

Best,
Ian

2 Likes
#2

@iwd32900 this is a really nice implementation! Through the mental health charity, I’m the founder of, we deliver regular events to help reduce social isolation for remote workers. I’ve been looking to try and implement something very similar. I would like people to know who’s in a room before they enter, you’ve done a great job with that, congratulations! Do you plan to open-source the code for this?

#3

@danmaby Thanks! I’m happy to open source it. Just pushed the code to Github at https://github.com/iwd32900/happyhour

Of course, you’re also free to use the server I’ve already stood up, but I understand if you’d like to run your own or make modifications!

1 Like
#4

great job

the start in tiled view is pretty easy to do. I just followed what @xranby did but instead of starting in fullscreen mode, i did the opposite

modify react/features/video-layout/reducer.js in the jitsi code

// @flow

import { ReducerRegistry } from '../base/redux';
import { PersistenceRegistry } from '../base/storage';

import {
    SCREEN_SHARE_PARTICIPANTS_UPDATED,
    SET_TILE_VIEW
} from './actionTypes';

const DEFAULT_STATE = {
    screenShares: [],

    /**
     * The indicator which determines whether the video layout should display
     * video thumbnails in a tiled layout.
     *
     * @public
     * @type {boolean}
     */
    tileViewEnabled: true
};

const STORE_NAME = 'features/video-layout';

PersistenceRegistry.register(STORE_NAME, {
    tileViewEnabled: true
});

ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => {
    switch (action.type) {
    case SCREEN_SHARE_PARTICIPANTS_UPDATED: {
        return {
            ...state,
            screenShares: action.participantIds
        };
    }

    case SET_TILE_VIEW:
        return {
            ...state,
            tileViewEnabled: action.enabled
        };
    }

    return state;
});

there are a few other cool things @xranby has done. check it out