@whereby.com/browser-sdk 1.7.1 → 2.0.0-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/.eslintrc +4 -2
  2. package/.storybook/main.cjs +13 -2
  3. package/README.md +60 -7
  4. package/jest.config.js +2 -0
  5. package/package.json +38 -12
  6. package/rollup.config.js +37 -13
  7. package/src/lib/RoomConnection.ts +516 -0
  8. package/src/lib/RoomParticipant.ts +77 -0
  9. package/src/lib/__tests__/{index.unit.js → embed.unit.ts} +4 -8
  10. package/src/lib/api/ApiClient.ts +111 -0
  11. package/src/lib/api/Credentials.ts +45 -0
  12. package/src/lib/api/HttpClient.ts +95 -0
  13. package/src/lib/api/MultipartHttpClient.ts +53 -0
  14. package/src/lib/api/OrganizationApiClient.ts +64 -0
  15. package/src/lib/api/Response.ts +34 -0
  16. package/src/lib/api/credentialsService/index.ts +159 -0
  17. package/src/lib/api/credentialsService/test/index.spec.ts +181 -0
  18. package/src/lib/api/deviceService/index.ts +42 -0
  19. package/src/lib/api/deviceService/tests/index.spec.ts +74 -0
  20. package/src/lib/api/extractUtils.ts +160 -0
  21. package/src/lib/api/index.ts +8 -0
  22. package/src/lib/api/localStorageWrapper/index.ts +15 -0
  23. package/src/lib/api/models/Account.ts +48 -0
  24. package/src/lib/api/models/Meeting.ts +42 -0
  25. package/src/lib/api/models/Organization.ts +186 -0
  26. package/src/lib/api/models/Room.ts +44 -0
  27. package/src/lib/api/models/account/EmbeddedFreeTierStatus.ts +34 -0
  28. package/src/lib/api/models/tests/Account.spec.ts +128 -0
  29. package/src/lib/api/models/tests/Organization.spec.ts +161 -0
  30. package/src/lib/api/models/tests/Room.spec.ts +74 -0
  31. package/src/lib/api/modules/AbstractStore.ts +18 -0
  32. package/src/lib/api/modules/ChromeStorageStore.ts +44 -0
  33. package/src/lib/api/modules/LocalStorageStore.ts +57 -0
  34. package/src/lib/api/modules/tests/ChromeStorageStore.spec.ts +67 -0
  35. package/src/lib/api/modules/tests/LocalStorageStore.spec.ts +79 -0
  36. package/src/lib/api/modules/tests/__mocks__/storage.ts +24 -0
  37. package/src/lib/api/organizationService/index.ts +284 -0
  38. package/src/lib/api/organizationService/tests/index.spec.ts +781 -0
  39. package/src/lib/api/organizationServiceCache/index.ts +28 -0
  40. package/src/lib/api/organizationServiceCache/tests/index.spec.ts +101 -0
  41. package/src/lib/api/parameterAssertUtils.ts +166 -0
  42. package/src/lib/api/roomService/index.ts +310 -0
  43. package/src/lib/api/roomService/tests/index.spec.ts +668 -0
  44. package/src/lib/api/test/ApiClient.spec.ts +139 -0
  45. package/src/lib/api/test/HttpClient.spec.ts +120 -0
  46. package/src/lib/api/test/MultipartHttpClient.spec.ts +145 -0
  47. package/src/lib/api/test/OrganizationApiClient.spec.ts +132 -0
  48. package/src/lib/api/test/extractUtils.spec.ts +357 -0
  49. package/src/lib/api/test/helpers.ts +41 -0
  50. package/src/lib/api/test/parameterAssertUtils.spec.ts +265 -0
  51. package/src/lib/api/types.ts +6 -0
  52. package/src/lib/{index.js → embed.ts} +53 -26
  53. package/src/lib/index.ts +3 -0
  54. package/src/lib/react/VideoElement.tsx +16 -0
  55. package/src/lib/react/index.ts +3 -0
  56. package/src/lib/react/useLocalMedia.ts +25 -0
  57. package/src/lib/react/useRoomConnection.ts +92 -0
  58. package/src/lib/reducer.ts +142 -0
  59. package/src/stories/custom-ui.stories.tsx +133 -0
  60. package/src/stories/prebuilt-ui.stories.tsx +131 -0
  61. package/src/stories/styles.css +74 -0
  62. package/src/types.d.ts +175 -0
  63. package/tsconfig.json +30 -0
  64. package/src/index.stories.js +0 -101
package/.eslintrc CHANGED
@@ -13,9 +13,11 @@
13
13
  "experimentalObjectRestSpread": true
14
14
  }
15
15
  },
16
- "extends": ["eslint:recommended"],
16
+ "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
17
17
  "plugins": ["jest"],
18
18
  "rules": {
19
- "no-console": ["error", { "allow": ["warn", "error"] }]
19
+ "no-console": ["error", { "allow": ["warn", "error"] }],
20
+ "@typescript-eslint/ban-ts-comment": 0,
21
+ "@typescript-eslint/no-namespace": "off"
20
22
  }
21
23
  }
package/.storybook/main.cjs CHANGED
@@ -1,5 +1,16 @@
1
1
  module.exports = {
2
- stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
2
+ core: { builder: "webpack5" },
3
+ stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
3
4
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
4
- framework: "@storybook/web-components",
5
+ framewkork: "@storybook/react",
6
+ webpackFinal: async (config) => {
7
+ config.module.rules.push({
8
+ resolve: {
9
+ fullySpecified: false,
10
+ extensions: [".js", ".ts", ".tsx"],
11
+ },
12
+ });
13
+
14
+ return config;
15
+ },
5
16
  };
package/README.md CHANGED
@@ -1,22 +1,75 @@
1
- # @whereby.com/browser-sdk
1
+ # `@whereby.com/browser-sdk`
2
2
 
3
- Clientside library defining a web component to allow embedding Whereby video rooms in web applications. Only normal iframe under the hood, the web component adds syntactic sugar to make it easier to customize the Whereby experience and hook into powerful features such as listening to room events and sending commands to the room from the host application.
3
+ > This is a pre-release of the v2 version of this library, adding support for more custom integration using React hooks and plain JavaScript classes in addition to the web component for embedding.
4
+
5
+ Whereby browser SDK is a library for seamless integration of Whereby (https://whereby.com) video calls into your web application.
6
+
7
+ ## Installation
8
+
9
+ ```
10
+ npm install @whereby.com/browser-sdk
11
+ ```
12
+ or
13
+ ```
14
+ yarn add @whereby.com/browser-sdk
15
+ ```
4
16
 
5
17
  ## Usage
6
18
 
7
- ### React + a bundler (webpack, rollup, parcel etc)
19
+ > In order to make use of this functionality, you must have a Whereby account from which you can create room urls, either [manually or through our API](https://docs.whereby.com/creating-and-deleting-rooms).
20
+
21
+ ### React hooks
22
+
23
+ The `useRoomConnection` hook provides a way to connect participants in a given room, subscribe to state updates, and perform actions on the connection, like toggling camera or microphone.
24
+
25
+ ```
26
+ import { useRoomConnection } from “@whereby.com/browser-sdk”;
27
+
28
+ function MyCallUX( { roomUrl, localStream }) {
29
+ const [state, actions, components ] = useRoomConnection(
30
+ "<room_url>"
31
+ {
32
+ localMediaConstraints: {
33
+ audio: true,
34
+ video: true,
35
+ },
36
+ }
37
+ );
38
+
39
+ const { connectionState, remoteParticipants } = state;
40
+ const { toggleCamera, toggleMicrophone } = actions;
41
+ const { VideoView } = components;
42
+
43
+ return <div className="videoGrid">
44
+ { /* Render any UI, making use of state */ }
45
+ { remoteParticipants.map((p) => (
46
+ <VideoView key={p.id} stream={p.stream} />
47
+ )) }
48
+ </div>;
49
+ }
50
+
51
+ ```
52
+
53
+ ### Web component for embedding
54
+
55
+ Use the `<whereby-embed />` web component to make use of Whereby's pre-built responsive UI. Refer to our [documentation](https://docs.whereby.com/embedding-rooms/in-a-web-page/using-the-whereby-embed-element) to learn which attributes are supported.
56
+
57
+
58
+ #### React
59
+
8
60
  ```
9
61
  import "@whereby.com/browser-sdk"
10
62
 
11
63
  const MyComponent = ({ roomUrl }) => {
12
- return <whereby-embed room={roomUrl} />
64
+ return <whereby-embed chat="off" room={roomUrl} />
13
65
  }
14
66
 
15
67
  export default MyComponent
16
68
 
17
69
  ```
18
70
 
19
- ### Directly using a script tag
71
+ #### In plain HTML
72
+
20
73
  ```
21
74
  <html>
22
75
  <head>
@@ -24,7 +77,7 @@ export default MyComponent
24
77
  </head>
25
78
  <body>
26
79
  <div class="container">
27
- <whereby-embed room="some-room" />
80
+ <whereby-embed room="<room_url>" />
28
81
  </div>
29
82
  </body>
30
83
  </html>
@@ -32,4 +85,4 @@ export default MyComponent
32
85
 
33
86
  **Note**
34
87
 
35
- Although we have just higlighted two combinations of how to load and use the web component, it should be possible to use this library with all the major frontend frameworks.
88
+ Although we have just higlighted two combinations of how to load and use the web component, it should be possible to use this library with all the major frontend frameworks.
package/jest.config.js CHANGED
@@ -1,4 +1,6 @@
1
1
  export default {
2
+ preset: "ts-jest",
2
3
  testEnvironment: "jest-environment-node",
4
+ testMatch: ["<rootDir>/src/**/__tests__/**/*.[jt]s?(x)", "<rootDir>/src/**/?(*.)+(spec|test).[jt]s?(x)"],
3
5
  transform: {},
4
6
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@whereby.com/browser-sdk",
3
- "version": "1.7.1",
4
- "description": "Configurable web component for embedding Whereby video rooms in web applications",
3
+ "version": "2.0.0-alpha",
4
+ "description": "Modules for integration Whereby video in web apps",
5
5
  "author": "Whereby AS",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -13,6 +13,7 @@
13
13
  "main": "dist/lib.cjs.js",
14
14
  "module": "dist/lib.esm.js",
15
15
  "type": "module",
16
+ "types": "dist/types.d.ts",
16
17
  "scripts": {
17
18
  "prebuild": "rimraf dist",
18
19
  "build": "rollup -c",
@@ -20,32 +21,57 @@
20
21
  "dev": "start-storybook -p 6006",
21
22
  "test": "yarn test:lint && yarn test:unit",
22
23
  "test:lint": "eslint src/",
23
- "test:unit": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
24
+ "test:unit": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
25
+ "test:unit:watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watch",
26
+ "storybook": "start-storybook -p 6006",
27
+ "build-storybook": "build-storybook"
24
28
  },
25
29
  "devDependencies": {
26
30
  "@babel/core": "^7.18.5",
31
+ "@babel/plugin-proposal-optional-chaining": "^7.18.9",
32
+ "@rollup/plugin-commonjs": "^24.0.0",
33
+ "@rollup/plugin-json": "^6.0.0",
27
34
  "@rollup/plugin-node-resolve": "^13.3.0",
28
35
  "@rollup/plugin-replace": "^4.0.0",
29
- "@storybook/addon-actions": "^6.5.9",
30
- "@storybook/addon-essentials": "^6.5.9",
31
- "@storybook/addon-links": "^6.5.9",
32
- "@storybook/builder-webpack4": "^6.5.9",
33
- "@storybook/manager-webpack4": "^6.5.9",
34
- "@storybook/web-components": "^6.5.9",
36
+ "@storybook/addon-actions": "^6.5.14",
37
+ "@storybook/addon-essentials": "^6.5.14",
38
+ "@storybook/addon-links": "^6.5.14",
39
+ "@storybook/builder-webpack5": "^6.5.14",
40
+ "@storybook/manager-webpack5": "^6.5.14",
41
+ "@storybook/react": "^6.5.14",
42
+ "@types/btoa": "^1.2.3",
43
+ "@types/chrome": "^0.0.210",
44
+ "@types/jest": "^29.2.4",
45
+ "@types/react": "^18.0.26",
46
+ "@typescript-eslint/eslint-plugin": "^5.46.1",
47
+ "@typescript-eslint/parser": "^5.46.1",
35
48
  "babel-loader": "^8.2.5",
36
- "eslint": "^8.18.0",
49
+ "eslint": "^8.29.0",
37
50
  "eslint-plugin-jest": "^26.5.3",
38
51
  "jest": "^28.1.1",
39
52
  "jest-environment-jsdom": "^28.1.1",
40
- "lit-html": "^2.2.6",
53
+ "lit-html": "^2.5.0",
41
54
  "prettier": "^2.7.1",
55
+ "react": "^18.2.0",
56
+ "react-dom": "^18.2.0",
42
57
  "rimraf": "^3.0.2",
43
58
  "rollup": "^2.75.6",
59
+ "rollup-plugin-dts": "^5.1.1",
44
60
  "rollup-plugin-terser": "^7.0.2",
45
- "storybook": "^6.5.9"
61
+ "rollup-plugin-typescript2": "^0.34.1",
62
+ "ts-jest": "^29.0.3",
63
+ "tslib": "^2.4.1",
64
+ "typescript": "^4.9.4"
46
65
  },
47
66
  "dependencies": {
48
67
  "@swc/helpers": "^0.3.13",
68
+ "@whereby/jslib-media": "whereby/jslib-media.git",
69
+ "axios": "^1.2.3",
70
+ "btoa": "^1.2.1",
49
71
  "heresy": "^1.0.4"
72
+ },
73
+ "peerDependencies": {
74
+ "react": "^18.2.0",
75
+ "react-dom": "^18.2.0"
50
76
  }
51
77
  }
package/rollup.config.js CHANGED
@@ -1,7 +1,11 @@
1
1
  import nodeResolve from "@rollup/plugin-node-resolve";
2
+ import commonjs from "@rollup/plugin-commonjs";
3
+ import json from "@rollup/plugin-json";
2
4
  import replace from "@rollup/plugin-replace";
3
5
  import { terser } from "rollup-plugin-terser";
4
6
  import pkg from "./package.json";
7
+ import typescript from "rollup-plugin-typescript2";
8
+ import dts from "rollup-plugin-dts";
5
9
 
6
10
  const replaceValues = {
7
11
  preventAssignment: true,
@@ -10,37 +14,57 @@ const replaceValues = {
10
14
  },
11
15
  };
12
16
 
17
+ const peerDependencies = [...Object.keys(pkg.peerDependencies || {})];
18
+
19
+ function makeCdnFilename() {
20
+ const major = pkg.version.split(".")[0];
21
+ const preRelease = pkg.version.split("-")[1];
22
+ let tag = "";
23
+
24
+ if (preRelease) {
25
+ tag = `-${preRelease.split(".")[0]}`;
26
+ }
27
+
28
+ return `v${major}${tag}.js`;
29
+ }
30
+
13
31
  export default [
14
32
  // Commonjs build of lib, to be used with bundlers
15
33
  {
16
- input: "src/lib/index.js",
34
+ input: "src/lib/index.ts",
17
35
  output: {
18
- exports: "default",
36
+ exports: "named",
19
37
  file: "dist/lib.cjs.js",
20
38
  format: "cjs",
21
39
  },
22
- external: ["heresy"],
23
- plugins: [replace(replaceValues)],
40
+ external: ["heresy", ...peerDependencies],
41
+ plugins: [nodeResolve({ resolveOnly: [/jslib-media/] }), replace(replaceValues), typescript()],
24
42
  },
25
43
  // Esm build of lib, to be used with bundlers
26
44
  {
27
- input: "src/lib/index.js",
45
+ input: "src/lib/index.ts",
28
46
  output: {
29
- exports: "default",
47
+ exports: "named",
30
48
  file: "dist/lib.esm.js",
31
49
  format: "esm",
32
50
  },
33
- external: ["heresy"],
34
- plugins: [replace(replaceValues)],
51
+ external: ["heresy", ...peerDependencies],
52
+ plugins: [nodeResolve({ resolveOnly: [/jslib-media/] }), replace(replaceValues), typescript()],
35
53
  },
36
- // Legacy build of lib in ES format, bundling the dependencies
54
+ // Legacy build of lib in ESM format, bundling the dependencies
37
55
  {
38
- input: "src/lib/index.js",
56
+ input: "src/lib/index.ts",
39
57
  output: {
40
- exports: "default",
41
- file: `dist/v${pkg.version.split(".")[0]}.js`,
58
+ exports: "named",
59
+ file: `dist/${makeCdnFilename()}`,
42
60
  format: "esm",
43
61
  },
44
- plugins: [nodeResolve(), terser(), replace(replaceValues)],
62
+ plugins: [nodeResolve(), commonjs(), json(), terser(), replace(replaceValues), typescript()],
63
+ },
64
+ // Roll-up .d.ts definition files
65
+ {
66
+ input: "./dist/lib/index.d.ts",
67
+ output: [{ file: "dist/types.d.ts", format: "es" }],
68
+ plugins: [dts()],
45
69
  },
46
70
  ];