youtube-room

YouTube Room Miro App

This app shows you how you can sync multiple YouTube players across different user sessions on a Miro board.

👨🏻‍💻 App Demo

📒 Table of Contents

• Included Features
• Tools and Technologies
• Prerequisites
• Associated Developer Tutorial
• Run the app locally
• Folder Structure
• Contributing
• License

⚙️ Included Features

• Miro Web SDK
  • icon:click event
  • miro.board.getInfo()
  • miro.board.ui.openModal()
  • miro.board.ui.openPanel()

🛠️ Tools and Technologies

• Express.js
• Socket.io

✅ Prerequisites

• You have a Miro account.
• You're signed in to Miro.
• Your Miro account has a Developer team.
• Your development environment includes Node.js 14.13 or a later version.
• All examples use npm as a package manager and npx as a package runner.

🏃🏽‍♂️ Extra app info

This example contains 2 separate apps that are connected by a WebSocket:

• A facilitator app, and
• A participant app. Each app serves different purposes that enable the functionality of the YouTube room.

Facilitator

This app is meant to be installed by only one user: the facilitator of the Miro board. It contains the functionality to start, update, and change a YouTube video. The video is in turn broadcasted and synced across all participants.

Participant

This app can be installed by multiple users. It contains the functionality that keeps the YouTube player in sync with the facilitator app.

🏃🏽‍♂️ Run the app locally

1. Run npm install to install dependencies.

2. Run npm start to start developing.
   Your URL should be similar to this example:

   http://localhost:3000
   

3. Create a new Miro app for the facilitator app component.

4. Open the app manifest editor by clicking Edit in Manifest.
   In the app manifest editor (see app manifest docs to learn more), configure the the facilitator app as follows:

   appName: YouTube Room Facilitator
   sdkUri: "http://localhost:3000/facilitator"
   scopes:
     - boards:read
     - boards:write

5. Create a new Miro app for the participant app component.

6. Open the app manifest editor by clicking Edit in Manifest.
   In the app manifest editor, configure the the participant app as follows:

   appName: YouTube Room Participant
   sdkUri: "http://localhost:3000/participant"
   scopes:
     - boards:read
     - boards:write

7. From the app settings page, make sure to Install both apps and get both OAuth tokens if you haven't.

8. Open two different Miro boards, one for the facilitator and one for the participant. Make sure each board opens their respective apps. The facilitator app should be opened for the facilitator and the participant app for the participant. Once you have done that, watch the video below to see how to use the app.

Watch the video below to understand how to run the app

🗂️ Folder structure

.
├── src
│  └── assets
│      └── style.css <-- CSS styles for the app.
│  └── facilitator-modal.js <-- Connects to the WebSocket, and syncronizes other participant apps.
│      facilitator.js <-- Initializes the facilitator app in Miro
│      participant-modal.js <-- Connects to the WebSocket, and syncronizes the YouTube player with the facilitator app.
│      participant.js <-- Initializes the participant app in Miro
├── facilitator-modal.html <-- The HTML for the facilitator app modal
├── facilitator.html <-- The HTML for the facilitator app
├── participant-modal.html <-- The HTML for the participant app modal
├── participant.html <-- The HTML for the participant app
└── server.js <-- The main server. This serves the HTML for both apps. It also initiates the WebSocket.

🫱🏻‍🫲🏽 Contributing

If you want to contribute to this example, or any other Miro Open Source project, please review Miro's contributing guide.

🪪 License

MIT License.