Ideas for a unique experience when using fairmeeting

• A hat going around and asking for a donation
• A blocking object that gets smaller the more people donate
• Snow that gets faded out the more people pay
• Either play a game or donate

changed the description

https://www.mollie.com/

we could play with this API

We also should check how we could include custom buttons (e.g. "pay now for the next hour" and how we catch the events (e.g. to pop up mollie payment) https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-configuration/#customtoolbarbuttons

We could try to have a generic JS that pops up after 30 minutes in any conference (not just after the conference). Similar to a phone box mint slot. We should check if this is do-able to ingest a JS simply in the custom-plugin.head.html?

Adding a JS is really easy - here I added x-mas stars as a background https://git.fairkom.net/hosting/k8s-deployments/fairmeeting/-/commit/7e6cd5a4d0694ac771970ea5f3934f8909911c10 - you may test it at https://fairmeeting.dev.osalliance.com

Next step is to try to add a coin slot and broadcast to all participants of a conference

ChatGPT coin slot proposal

To implement this, you would need to integrate a Mollie payment gateway with your Jitsi instance and modify the user interface dynamically using JavaScript. Here's how you can approach it:

---

1. Create the Coin Slot Button

You can create a button that appears on the left side of the screen after 1 minute. Here's the JavaScript code to handle this:

document.addEventListener('DOMContentLoaded', function () {
    let coinSlot;
    let heart;

    // Function to show the coin slot
    function showCoinSlot() {
        if (!coinSlot) {
            coinSlot = document.createElement('button');
            coinSlot.innerText = 'Insert Coin 💰';
            coinSlot.style.position = 'fixed';
            coinSlot.style.left = '10px';
            coinSlot.style.top = '50%';
            coinSlot.style.transform = 'translateY(-50%)';
            coinSlot.style.padding = '10px 20px';
            coinSlot.style.fontSize = '16px';
            coinSlot.style.cursor = 'pointer';
            coinSlot.style.backgroundColor = '#ffd700';
            coinSlot.style.border = 'none';
            coinSlot.style.borderRadius = '5px';
            coinSlot.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
            coinSlot.style.zIndex = '9999';
            document.body.appendChild(coinSlot);

            coinSlot.addEventListener('click', initiatePayment);
        }
    }

    // Function to initiate payment
    function initiatePayment() {
        // Redirect to Mollie payment page (replace YOUR_PAYMENT_LINK with Mollie's generated payment link)
        window.location.href = 'YOUR_PAYMENT_LINK';

        // Optionally, you could open the payment in a modal or iframe
    }

    // Function to display the heart animation
    function showHeart() {
        if (!heart) {
            heart = document.createElement('div');
            heart.innerText = '❤️';
            heart.style.position = 'fixed';
            heart.style.top = '50%';
            heart.style.left = '50%';
            heart.style.transform = 'translate(-50%, -50%)';
            heart.style.fontSize = '100px';
            heart.style.color = 'red';
            heart.style.zIndex = '9999';
            heart.style.opacity = '1';
            heart.style.transition = 'opacity 1s linear';
            document.body.appendChild(heart);

            // Remove the heart after 5 seconds
            setTimeout(() => {
                heart.style.opacity = '0';
                setTimeout(() => heart.remove(), 1000);
                heart = null;
            }, 5000);
        }
    }

    // Simulate payment callback
    function simulatePaymentSuccess() {
        // Hide the coin slot and display the heart
        if (coinSlot) {
            coinSlot.style.display = 'none';
        }
        showHeart();

        // Prevent the coin slot from showing for 30 minutes
        setTimeout(() => {
            if (coinSlot) {
                coinSlot.style.display = 'block';
            }
        }, 30 * 60 * 1000); // 30 minutes
    }

    // Show the coin slot after 1 minute
    setTimeout(showCoinSlot, 60 * 1000);

    // Simulate payment callback after a click
    document.addEventListener('paymentSuccess', simulatePaymentSuccess);
});

---

2. Mollie Payment Integration

To process the payment:

1. Set Up Mollie Account: Create an account on Mollie and obtain your API key.

2. Create Payment Links: Use Mollie's API to generate payment links dynamically. You can do this using a backend server that interacts with Mollie's API.

   Example using Node.js:

   const mollieClient = require('@mollie/api-client')({ apiKey: 'YOUR_MOLLIE_API_KEY' });
   
   async function createPayment() {
       const payment = await mollieClient.payments.create({
           amount: {
               currency: 'EUR',
               value: '1.00', // Example: €1.00
           },
           description: 'Support the conference',
           redirectUrl: 'https://your-jitsi-instance.com/payment-success', // Redirect after successful payment
           webhookUrl: 'https://your-backend.com/webhook', // Webhook to confirm payment
       });
   
       return payment.getPaymentUrl();
   }

   Replace YOUR_MOLLIE_API_KEY, redirectUrl, and webhookUrl with your details.

3. Redirect to Payment URL: Replace YOUR_PAYMENT_LINK in the JavaScript above with the URL generated from your backend.

---

3. Handle Payment Callback

On successful payment:

• Mollie will call your webhook URL. Use the webhook to verify the payment status.
• Emit a custom event to notify all participants that the payment was successful and update the UI.

Example webhook handler:

app.post('/webhook', async (req, res) => {
    const payment = await mollieClient.payments.get(req.body.id);

    if (payment.isPaid()) {
        // Notify participants via a signaling mechanism (e.g., WebSocket or Jitsi API)
        // Broadcast an event to trigger `paymentSuccess` on clients
    }

    res.status(200).send('OK');
});

---

4. Broadcast Payment Success to All Participants

Use Jitsi’s built-in external API or a WebSocket server to notify all participants when a payment is successful. For example:

• Call API.executeCommand on all clients to trigger the paymentSuccess event.

---

5. Deploy the Code

1. Add the script to head.html on your Jitsi server.
2. Ensure your backend server is set up for Mollie integration and webhook handling.
3. Test the entire flow to ensure smooth operation.

---

This implementation ensures the button dynamically appears, payment is handled securely, and the coin slot is hidden for all participants after a successful transaction.

And how to distribute the event to all participants of a conference

To broadcast the paymentSuccess event to all participants in a Jitsi video conference, you can use Jitsi's sendEndpointMessage API. This allows you to send messages to all participants in a room or to specific endpoints. Here's how you can implement it:

---

1. Use sendEndpointMessage to Broadcast Events

The sendEndpointMessage method in Jitsi Meet's JitsiMeetExternalAPI can broadcast a custom message (such as paymentSuccess) to all participants in a conference.

Example:

Add the following to your JavaScript in head.html:

document.addEventListener('DOMContentLoaded', function () {
    let api;

    // Initialize Jitsi Meet API
    function initJitsiAPI() {
        api = new JitsiMeetExternalAPI('your-jitsi-domain.com', {
            roomName: 'your-room-name',
            parentNode: document.querySelector('#meet'),
        });

        // Listen for incoming messages
        api.addListener('endpointMessageReceived', function (event) {
            if (event.data.type === 'paymentSuccess') {
                handlePaymentSuccess();
            }
        });
    }

    // Broadcast paymentSuccess event
    function broadcastPaymentSuccess() {
        if (api) {
            api.executeCommand('sendEndpointMessage', '', {
                type: 'paymentSuccess',
                message: 'Payment successful!',
            });
        }
    }

    // Handle payment success event on all clients
    function handlePaymentSuccess() {
        // Display the heart animation for 5 seconds
        const heart = document.createElement('div');
        heart.innerText = '❤️';
        heart.style.position = 'fixed';
        heart.style.top = '50%';
        heart.style.left = '50%';
        heart.style.transform = 'translate(-50%, -50%)';
        heart.style.fontSize = '100px';
        heart.style.color = 'red';
        heart.style.zIndex = '9999';
        document.body.appendChild(heart);

        setTimeout(() => {
            heart.remove();
        }, 5000);
    }

    // Simulate payment success (for testing purposes)
    document.addEventListener('simulatePayment', function () {
        broadcastPaymentSuccess();
    });

    // Initialize the Jitsi Meet API
    initJitsiAPI();
});

---

2. Trigger broadcastPaymentSuccess After Payment

When a payment is confirmed (via Mollie's webhook or any backend logic), emit the paymentSuccess event to all participants by calling the broadcastPaymentSuccess function.

Example:

In your backend, you could use a custom signaling mechanism or Jitsi's HTTP API to trigger this on the client. For simplicity, simulate it using a button:

document.dispatchEvent(new Event('simulatePayment'));

---

3. Broadcast from the Jitsi Server

If you prefer to handle it server-side, use Jitsi's Prosody modules or websocket bridge to send custom messages to all participants.

Example using a custom Prosody module:

1. Write a Lua module for Prosody to listen for a backend event (e.g., via HTTP or WebSocket).
2. Send the message to the Jitsi room using the send_message function.

---

4. Test the Integration

• Load your modified Jitsi instance in a browser.
• Use the simulatePayment event (or an actual Mollie webhook) to trigger the broadcastPaymentSuccess function.
• Confirm all participants see the heart animation for 5 seconds.

---

Notes:

• Ensure you configure roomName dynamically if you have multiple rooms.
• Use secure messaging or validation for payment confirmation to prevent abuse.
• For backend signaling, consider integrating a WebSocket server or a webhook handler to connect Mollie payment success directly to Jitsi events.

PoC for coin slot which is shown after one minute is deployed at https://fairmeeting.dev.osalliance.com
Code see branch https://git.fairkom.net/hosting/k8s-deployments/fairmeeting/-/blob/feat/coinslot/k8s/dev/config/web/custom-plugin.head.html

TO DOs

• fix CORS after mollie payment
• add some thank you message
• distribute a broadcastPaymentSuccess to all participants using some websocket server or LUA (see ChatGPT's ideas)