@whereby.com/browser-sdk 2.1.0-beta4 → 2.2.0-beta.0

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 (12) hide show
  1. package/README.md +48 -43
  2. package/dist/cdn/{v2-embed-beta4.js → v2-embed-beta.js} +2 -2
  3. package/dist/cdn/v2-react-beta.js +3 -0
  4. package/dist/embed/index.esm.js +113 -137
  5. package/dist/react/index.d.ts +10 -726
  6. package/dist/react/index.esm.js +877 -10485
  7. package/package.json +12 -40
  8. package/dist/cdn/v2-react-beta4.js +0 -3
  9. package/dist/core/index.d.ts +0 -2360
  10. package/dist/core/index.js +0 -62963
  11. package/dist/utils/index.d.ts +0 -5
  12. package/dist/utils/index.esm.js +0 -70
package/dist/embed/index.esm.js CHANGED
@@ -1,83 +1,62 @@
1
1
  import { define, ref } from 'heresy';
2
+ import { parseRoomUrlAndSubdomain } from '@whereby.com/core/utils';
2
3
 
3
- function parseRoomUrlAndSubdomain(roomAttribute, subdomainAttribute) {
4
- if (!roomAttribute) {
5
- throw new Error("Missing room attribute");
6
- }
7
- // Get subdomain from room URL, or use it specified
8
- const m = /https:\/\/([^.]+)(\.whereby\.com|-ip-\d+-\d+-\d+-\d+.hereby.dev:4443)\/.+/.exec(roomAttribute);
9
- const subdomain = (m && m[1]) || subdomainAttribute;
10
- if (!subdomain) {
11
- throw new Error("Missing subdomain attribute");
12
- }
13
- if (!m) {
14
- throw new Error("Could not parse room URL");
15
- }
16
- const roomUrl = new URL(roomAttribute);
17
- return {
18
- subdomain,
19
- roomUrl,
20
- };
21
- }
22
-
23
- const sdkVersion = "2.1.0-beta4";
24
-
25
- const boolAttrs = [
26
- "audio",
27
- "background",
28
- "cameraAccess",
29
- "chat",
30
- "people",
31
- "embed",
32
- "emptyRoomInvitation",
33
- "help",
34
- "leaveButton",
35
- "precallReview",
36
- "screenshare",
37
- "video",
38
- "floatSelf",
39
- "recording",
40
- "logo",
41
- "locking",
42
- "participantCount",
43
- "settingsButton",
44
- "pipButton",
45
- "moreButton",
46
- "personality",
47
- "subgridLabels",
48
- "lowData",
49
- "breakout",
50
- ];
51
- define("WherebyEmbed", {
52
- oninit() {
53
- this.iframe = ref();
54
- },
55
- onconnected() {
56
- window.addEventListener("message", this.onmessage.bind(this));
57
- },
58
- ondisconnected() {
59
- window.removeEventListener("message", this.onmessage.bind(this));
60
- },
61
- observedAttributes: [
62
- "displayName",
63
- "minimal",
64
- "room",
65
- "subdomain",
66
- "lang",
67
- "metadata",
68
- "groups",
69
- "virtualBackgroundUrl",
70
- "avatarUrl",
71
- "externalId",
72
- "title",
73
- ...boolAttrs,
74
- ].map((a) => a.toLowerCase()),
75
- onattributechanged({ attributeName, oldValue }) {
76
- if (["room", "subdomain"].includes(attributeName) && oldValue == null)
77
- return;
78
- this.render();
79
- },
80
- style(self) {
4
+ const boolAttrs = [
5
+ "audio",
6
+ "background",
7
+ "cameraAccess",
8
+ "chat",
9
+ "people",
10
+ "embed",
11
+ "emptyRoomInvitation",
12
+ "help",
13
+ "leaveButton",
14
+ "precallReview",
15
+ "screenshare",
16
+ "video",
17
+ "floatSelf",
18
+ "recording",
19
+ "logo",
20
+ "locking",
21
+ "participantCount",
22
+ "settingsButton",
23
+ "pipButton",
24
+ "moreButton",
25
+ "personality",
26
+ "subgridLabels",
27
+ "lowData",
28
+ "breakout",
29
+ ];
30
+ define("WherebyEmbed", {
31
+ oninit() {
32
+ this.iframe = ref();
33
+ },
34
+ onconnected() {
35
+ window.addEventListener("message", this.onmessage.bind(this));
36
+ },
37
+ ondisconnected() {
38
+ window.removeEventListener("message", this.onmessage.bind(this));
39
+ },
40
+ observedAttributes: [
41
+ "displayName",
42
+ "minimal",
43
+ "room",
44
+ "subdomain",
45
+ "lang",
46
+ "metadata",
47
+ "groups",
48
+ "virtualBackgroundUrl",
49
+ "avatarUrl",
50
+ "externalId",
51
+ "title",
52
+ ...boolAttrs,
53
+ ].map((a) => a.toLowerCase()),
54
+ onattributechanged({ attributeName, oldValue }) {
55
+ if (["room", "subdomain"].includes(attributeName) && oldValue == null)
56
+ return;
57
+ this.render();
58
+ },
59
+ style(self) {
81
60
  return `
82
61
  ${self} {
83
62
  display: block;
@@ -87,70 +66,67 @@ define("WherebyEmbed", {
87
66
  height: 100%;
88
67
  width: 100%;
89
68
  }
90
- `;
91
- },
92
- // Commands
93
- _postCommand(command, args = []) {
94
- if (this.iframe.current) {
95
- this.iframe.current.contentWindow.postMessage({ command, args }, this.roomUrl.origin);
96
- }
97
- },
98
- startRecording() {
99
- this._postCommand("start_recording");
100
- },
101
- stopRecording() {
102
- this._postCommand("stop_recording");
103
- },
104
- startStreaming() {
105
- this._postCommand("start_streaming");
106
- },
107
- stopStreaming() {
108
- this._postCommand("stop_streaming");
109
- },
110
- toggleCamera(enabled) {
111
- this._postCommand("toggle_camera", [enabled]);
112
- },
113
- toggleMicrophone(enabled) {
114
- this._postCommand("toggle_microphone", [enabled]);
115
- },
116
- toggleScreenshare(enabled) {
117
- this._postCommand("toggle_screenshare", [enabled]);
118
- },
119
- toggleChat(enabled) {
120
- this._postCommand("toggle_chat", [enabled]);
121
- },
122
- onmessage({ origin, data, }) {
123
- if (!this.roomUrl || origin !== this.roomUrl.origin)
124
- return;
125
- const { type, payload: detail } = data;
126
- this.dispatchEvent(new CustomEvent(type, { detail }));
127
- },
128
- render() {
129
- const { avatarurl: avatarUrl, displayname: displayName, lang, metadata, externalid: externalId, minimal, room, groups, virtualbackgroundurl: virtualBackgroundUrl, title, } = this;
130
- let roomUrl, subdomain;
131
- try {
132
- ({ roomUrl, subdomain } = parseRoomUrlAndSubdomain(room, this.subdomain));
133
- }
134
- catch (error) {
135
- return this.html `Whereby: ${error instanceof Error ? error.message : "unknown error"}`;
136
- }
137
- this.roomUrl = roomUrl;
138
- Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: sdkVersion, iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang: lang })), (metadata && { metadata: metadata })), (externalId && { externalId })), (groups && { groups: groups })), (virtualBackgroundUrl && { virtualBackgroundUrl: virtualBackgroundUrl })), (avatarUrl && { avatarUrl: avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
139
- // add to URL if set in any way
140
- (o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
141
- if (!this.roomUrl.searchParams.has(k)) {
142
- this.roomUrl.searchParams.set(k, v);
143
- }
144
- });
69
+ `;
70
+ },
71
+ _postCommand(command, args = []) {
72
+ if (this.iframe.current) {
73
+ this.iframe.current.contentWindow.postMessage({ command, args }, this.roomUrl.origin);
74
+ }
75
+ },
76
+ startRecording() {
77
+ this._postCommand("start_recording");
78
+ },
79
+ stopRecording() {
80
+ this._postCommand("stop_recording");
81
+ },
82
+ startStreaming() {
83
+ this._postCommand("start_streaming");
84
+ },
85
+ stopStreaming() {
86
+ this._postCommand("stop_streaming");
87
+ },
88
+ toggleCamera(enabled) {
89
+ this._postCommand("toggle_camera", [enabled]);
90
+ },
91
+ toggleMicrophone(enabled) {
92
+ this._postCommand("toggle_microphone", [enabled]);
93
+ },
94
+ toggleScreenshare(enabled) {
95
+ this._postCommand("toggle_screenshare", [enabled]);
96
+ },
97
+ toggleChat(enabled) {
98
+ this._postCommand("toggle_chat", [enabled]);
99
+ },
100
+ onmessage({ origin, data, }) {
101
+ if (!this.roomUrl || origin !== this.roomUrl.origin)
102
+ return;
103
+ const { type, payload: detail } = data;
104
+ this.dispatchEvent(new CustomEvent(type, { detail }));
105
+ },
106
+ render() {
107
+ const { avatarurl: avatarUrl, displayname: displayName, lang, metadata, externalid: externalId, minimal, room, groups, virtualbackgroundurl: virtualBackgroundUrl, title, } = this;
108
+ let roomUrl, subdomain;
109
+ try {
110
+ ({ roomUrl, subdomain } = parseRoomUrlAndSubdomain(room, this.subdomain));
111
+ }
112
+ catch (error) {
113
+ return this.html `Whereby: ${error instanceof Error ? error.message : "unknown error"}`;
114
+ }
115
+ this.roomUrl = roomUrl;
116
+ Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "1", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang: lang })), (metadata && { metadata: metadata })), (externalId && { externalId })), (groups && { groups: groups })), (virtualBackgroundUrl && { virtualBackgroundUrl: virtualBackgroundUrl })), (avatarUrl && { avatarUrl: avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce((o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
117
+ if (!this.roomUrl.searchParams.has(k)) {
118
+ this.roomUrl.searchParams.set(k, v);
119
+ }
120
+ });
145
121
  this.html `
146
122
  <iframe
147
123
  title=${title || "Video calling component"}
148
124
  ref=${this.iframe}
149
125
  src=${this.roomUrl}
150
126
  allow="autoplay; camera; microphone; fullscreen; speaker; display-capture; media-capture" />
151
- `;
152
- },
153
- });
154
- var index = { sdkVersion: sdkVersion };
127
+ `;
128
+ },
129
+ });
130
+ var index = { sdkVersion: "1" };
155
131
 
156
132
  export { index as default };