Skip to content

Commit f384f3b

Browse files
mihhumihhu
authored
Add initial implementation
Implemented a web SDK that exposes the following functionality: - A generic React component encapsulating the iframe API - Another React component that wraps the former, but it's auto configured for JaaS (the domain defaults to 8x8.vc, requires JaaS appId) - A framework agnostic way to dynamically load the external API - TypeScript types for JitsiMeetExternalAPI
1 parent 9348f66 commit f384f3b

40 files changed

+35490
-1
lines changed

‎.eslintrc.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const { rules } = require('eslint-config-jitsi');
2+
3+
module.exports = {
4+
env: {
5+
browser: true,
6+
jest: true,
7+
node: true
8+
},
9+
extends: [
10+
'plugin:@typescript-eslint/eslint-recommended',
11+
'plugin:@typescript-eslint/recommended'
12+
],
13+
parser: '@typescript-eslint/parser',
14+
parserOptions: {
15+
sourceType: 'module'
16+
},
17+
plugins: [
18+
'@typescript-eslint',
19+
'eslint-plugin-import'
20+
],
21+
rules: {
22+
...rules,
23+
semi: 'off',
24+
'no-confusing-arrow': 'off',
25+
'no-unused-vars': 'off',
26+
'@typescript-eslint/no-explicit-any': 'off',
27+
'@typescript-eslint/no-var-requires': 'off'
28+
}
29+
}

‎.github/workflows/ci.yml

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Web SDK CI
2+
on: pull_request
3+
jobs:
4+
run-ci:
5+
runs-on: ubuntu-latest
6+
steps:
7+
- uses: actions/checkout@v2
8+
- uses: actions/setup-node@v1
9+
with:
10+
node-version: '16.x'
11+
- run: npm i
12+
- name: Check git status
13+
run: git status
14+
- name: Check git diff
15+
run: git diff
16+
- name: Check if the git repository is clean
17+
run: exit $( git status --porcelain --untracked-files=no | head -255 | wc -l )
18+
- run: npm run lint
19+
- name: Build project
20+
run: npm run build
21+
- name: Run unit tests
22+
run: npm test
23+
- name: Release to npm
24+
if: github.event_name == 'release' && github.event.action == 'published'
25+
run: npm publish --access public
26+
env:
27+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
/lib
3+
.DS_Store

‎README.md

+38-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,38 @@
1-
# jitsi-meet-web-sdk
1+
# Jitsi Meet Web SDK
2+
The Jitsi Meet Web SDK provides the same user experience as the [Jitsi Meet](https://github.com/jitsi/jitsi-meet) app, in a customizable way which you can embed in your apps.
3+
4+
## Install
5+
```bash
6+
npm install @jitsi/web-sdk
7+
```
8+
### Modules
9+
#### fetchExternalApi
10+
To import the Jitsi Meet External API in a non-React project:
11+
```js
12+
window.onload = () => {
13+
fetchExternalApi().then(JitsiMeetExternalApi => {
14+
const api = new JitsiMeetExternalApi("YOUR_DOMAIN");
15+
});
16+
}
17+
```
18+
#### JitsiMeeting
19+
To be used with custom domains as-it-is in React projects:
20+
```js
21+
<JitsiMeeting
22+
domain="YOUR_DOMAIN"
23+
/>
24+
```
25+
#### JaaSMeeting
26+
To be used with `8x8.vc` domain as-it-is in React projects:
27+
```js
28+
<JaaSMeeting
29+
appId="YOUR_APP_ID"
30+
/>
31+
```
32+
33+
## Samples
34+
Install and run the projects from the `examples` directory to see the modules in action.
35+
```bash
36+
npm run start-fetch-demo
37+
npm run start-component-demo
38+
```

‎babel.config.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
presets: [
3+
[ '@babel/preset-env' ],
4+
'@babel/preset-react',
5+
'@babel/preset-typescript'
6+
],
7+
'plugins': [ 'transform-export-extensions' ],
8+
'only': [
9+
'./**/*.js',
10+
'node_modules/jest-runtime'
11+
]
12+
};

‎examples/fetchExternalApi/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>Fetch External API Demo</title>
7+
</head>
8+
9+
<body>
10+
<h1 style="font-family: sans-serif; text-align: center;">External API Init Demo App</h1>
11+
<div id="jitsi-meeting-container" />
12+
</body>
13+
14+
</html>

‎examples/fetchExternalApi/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { fetchExternalApi } from '@jitsi/web-sdk';
2+
3+
window.onload = () => {
4+
fetchExternalApi('meet.jit.si').then(JitsiMeetExternalApi => {
5+
const api = new JitsiMeetExternalApi('meet.jit.si', {
6+
roomName: 'ExternalAPIInitModuleDemo',
7+
height: 700,
8+
parentNode: document.getElementById('jitsi-meeting-container')
9+
});
10+
});
11+
};

0 commit comments

Comments
 (0)