Merge pull request #194 from whereby/havard/pan-726-clean-up-docs-and…

…-remove-beta-references-for-v2 Update example apps to use browser-sdk@2.0.0
whereby · Jan 19, 2024 · e34f003 · e34f003
2 parents 697da2a + 50c5dda
commit e34f003
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 297 deletions.
diff --git a/README.md b/README.md
@@ -158,3 +158,18 @@ export default MyComponent;
 > 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.
+
+## Migrating from v1 to v2
+
+Migration from v1 to v2 is only relevant for users of the `<whereby-embed />`
+web component. The following changes are necessary when upgrading to v2:
+
+- If you import the web component in your app, you need to add `/embed` to the
+  import path, like so `import "whereby.com/browser-sdk/embed"`
+- If you load the web component using a `<script>` tag, the src needs to be 
+  changed to `https://cdn.srv.whereby.com/embed/v2-embed.js`. In addition, the
+  `type="module"` attribute is no longer required and can be removed.
+
+The functionality of the web component should be exactly as the latest version
+on the v1 branch, but a TypeScript definition is now available for projects
+using this language.
diff --git a/examples/embed-element-app/package.json b/examples/embed-element-app/package.json
@@ -8,7 +8,7 @@
         "@types/node": "^16.18.61",
         "@types/react": "^18.2.37",
         "@types/react-dom": "^18.2.15",
-        "@whereby.com/browser-sdk": "2.0.0-beta3",
+        "@whereby.com/browser-sdk": "^2.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",

diff --git a/examples/embed-element-app/src/App.tsx b/examples/embed-element-app/src/App.tsx
@@ -77,6 +77,7 @@ function App() {
                     minimal="on"
                     room={roomUrl}
                     style={{ width: "100%", height: "100vh" }}
+                    // @ts-ignore
                     ref={elmRef}
                 />
             </div>

diff --git a/examples/embed-element-app/yarn.lock b/examples/embed-element-app/yarn.lock
@@ -1633,6 +1633,16 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@reduxjs/toolkit@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.0.1.tgz#0a5233c1e35c1941b03aece39cceade3467a1062"
+  integrity sha512-fxIjrR9934cmS8YXIGd9e7s1XRsEU++aFc9DVNMFMRTM5Vtsg2DCRMj21eslGtDt43IUf9bJL3h5bwUlZleibA==
+  dependencies:
+    immer "^10.0.3"
+    redux "^5.0.0"
+    redux-thunk "^3.1.0"
+    reselect "^5.0.1"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -2414,11 +2424,12 @@
     "@webassemblyjs/ast" "1.11.6"
     "@xtuc/long" "4.2.2"
 
-"@whereby.com/browser-sdk@2.0.0-beta3":
-  version "2.0.0-beta3"
-  resolved "https://registry.yarnpkg.com/@whereby.com/browser-sdk/-/browser-sdk-2.0.0-beta3.tgz#d3c2275adfd969db14cfb6b7a481be2c4140bd3b"
-  integrity sha512-L9n/lRS2eoAd33jXslQ/DN7BV/FScjukG12xH6wT9OyRs4T64zWQPNi1h1gH1F2bmiUcZ7oOEagbvsoXw+vAzg==
+"@whereby.com/browser-sdk@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@whereby.com/browser-sdk/-/browser-sdk-2.0.0.tgz#3751a3ea5c7b64c4626cc03cddd0042a588415ba"
+  integrity sha512-8Vh14T+jzpkqM9waiZapyD0rasXyLoEQH9rmXq4jNXDcYU/LbJMig/ohLORHZVTg6ONvtEqSQxMnzGu8xYPANg==
   dependencies:
+    "@reduxjs/toolkit" "^2.0.1"
     "@swc/helpers" "^0.3.13"
     "@whereby/jslib-media" whereby/jslib-media.git#1.4.1
     axios "^1.2.3"
@@ -5197,6 +5208,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immer@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.3.tgz#a8de42065e964aa3edf6afc282dfc7f7f34ae3c9"
+  integrity sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==
+
 immer@^9.0.7:
   version "9.0.21"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
@@ -7865,6 +7881,16 @@ recursive-readdir@^2.2.2:
   dependencies:
     minimatch "^3.0.5"
 
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-3.1.0.tgz#94aa6e04977c30e14e892eae84978c1af6058ff3"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
+
+redux@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.1.tgz#97fa26881ce5746500125585d5642c77b6e9447b"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
@@ -7975,6 +8001,11 @@ reraf@^1.1.1:
   resolved "https://registry.yarnpkg.com/reraf/-/reraf-1.1.1.tgz#c75584660edd9b6ee3c31eeb694d938f529b7042"
   integrity sha512-uwOsqdTxJAQCxqvJF4Kiz4orwO9B8OBJkGeW7/NWNirapPutgig/3xU3emruvfwUbb+t51V0zHtNw6d83RDlJQ==
 
+reselect@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.0.tgz#c479139ab9dd91be4d9c764a7f3868210ef8cd21"
+  integrity sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"

diff --git a/examples/quiz-app/package.json b/examples/quiz-app/package.json
@@ -11,7 +11,7 @@
         "@types/node": "^17.0.45",
         "@types/react": "^18.0.38",
         "@types/react-dom": "^18.0.11",
-        "@whereby.com/browser-sdk": "2.0.0-beta3",
+        "@whereby.com/browser-sdk": "^2.0.0",
         "framer-motion": "^10.12.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

diff --git a/examples/quiz-app/src/components/Participants/index.tsx b/examples/quiz-app/src/components/Participants/index.tsx
@@ -137,14 +137,18 @@ const Participants = ({ roomConnection, quizState, variant = "default", screen =
 
                         return (
                             <motion.div {...animationProps} key={id}>
-                                <VideoTile
-                                    muted={localParticipant?.id === id}
-                                    stream={stream}
-                                    name={`${displayName} - ${scores[id] || 0} points`}
-                                    hasAnswered={hasParticipantAnswered}
-                                    roundResult={roundResults[id]}
-                                    variant={tileSizeVariant}
-                                />
+                                {stream ? (
+                                    <VideoTile
+                                        muted={localParticipant?.id === id}
+                                        stream={stream}
+                                        name={`${displayName} - ${scores[id] || 0} points`}
+                                        hasAnswered={hasParticipantAnswered}
+                                        roundResult={roundResults[id]}
+                                        variant={tileSizeVariant}
+                                    />
+                                ) : (
+                                    <div>No media</div>
+                                )}
                             </motion.div>
                         );
                     })}

diff --git a/examples/quiz-app/src/views/Game/index.tsx b/examples/quiz-app/src/views/Game/index.tsx
@@ -22,7 +22,6 @@ const Game = ({ localMedia, displayName, roomUrl }: GameProps) => {
     const roomConnection = useRoomConnection(roomUrl, {
         localMedia,
         displayName,
-        logger: console,
     });
 
     const { state: roomState } = roomConnection;

diff --git a/examples/quiz-app/yarn.lock b/examples/quiz-app/yarn.lock
@@ -2561,6 +2561,16 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@reduxjs/toolkit@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.0.1.tgz#0a5233c1e35c1941b03aece39cceade3467a1062"
+  integrity sha512-fxIjrR9934cmS8YXIGd9e7s1XRsEU++aFc9DVNMFMRTM5Vtsg2DCRMj21eslGtDt43IUf9bJL3h5bwUlZleibA==
+  dependencies:
+    immer "^10.0.3"
+    redux "^5.0.0"
+    redux-thunk "^3.1.0"
+    reselect "^5.0.1"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -3362,19 +3372,20 @@
     "@webassemblyjs/ast" "1.11.6"
     "@xtuc/long" "4.2.2"
 
-"@whereby.com/browser-sdk@2.0.0-beta3":
-  version "2.0.0-beta3"
-  resolved "https://registry.yarnpkg.com/@whereby.com/browser-sdk/-/browser-sdk-2.0.0-beta3.tgz#d3c2275adfd969db14cfb6b7a481be2c4140bd3b"
-  integrity sha512-L9n/lRS2eoAd33jXslQ/DN7BV/FScjukG12xH6wT9OyRs4T64zWQPNi1h1gH1F2bmiUcZ7oOEagbvsoXw+vAzg==
+"@whereby.com/browser-sdk@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@whereby.com/browser-sdk/-/browser-sdk-2.0.0.tgz#3751a3ea5c7b64c4626cc03cddd0042a588415ba"
+  integrity sha512-8Vh14T+jzpkqM9waiZapyD0rasXyLoEQH9rmXq4jNXDcYU/LbJMig/ohLORHZVTg6ONvtEqSQxMnzGu8xYPANg==
   dependencies:
+    "@reduxjs/toolkit" "^2.0.1"
     "@swc/helpers" "^0.3.13"
     "@whereby/jslib-media" whereby/jslib-media.git#1.4.1
     axios "^1.2.3"
     btoa "^1.2.1"
     events "^3.3.0"
     heresy "^1.0.4"
 
-"@whereby/jslib-media@whereby/jslib-media.git#1.4.1":
+"@whereby/jslib-media@github:whereby/jslib-media#1.4.1":
   version "1.4.1"
   resolved "https://codeload.github.com/whereby/jslib-media/tar.gz/abc55b7e2d3af9c71cb3f3a2953291bb79725064"
   dependencies:
@@ -6238,6 +6249,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immer@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.3.tgz#a8de42065e964aa3edf6afc282dfc7f7f34ae3c9"
+  integrity sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==
+
 immer@^9.0.7:
   version "9.0.21"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
@@ -8988,6 +9004,16 @@ recursive-readdir@^2.2.2:
   dependencies:
     minimatch "^3.0.5"
 
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-3.1.0.tgz#94aa6e04977c30e14e892eae84978c1af6058ff3"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
+
+redux@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.1.tgz#97fa26881ce5746500125585d5642c77b6e9447b"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
@@ -9098,6 +9124,11 @@ reraf@^1.1.1:
   resolved "https://registry.yarnpkg.com/reraf/-/reraf-1.1.1.tgz#c75584660edd9b6ee3c31eeb694d938f529b7042"
   integrity sha512-uwOsqdTxJAQCxqvJF4Kiz4orwO9B8OBJkGeW7/NWNirapPutgig/3xU3emruvfwUbb+t51V0zHtNw6d83RDlJQ==
 
+reselect@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.0.tgz#c479139ab9dd91be4d9c764a7f3868210ef8cd21"
+  integrity sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"

diff --git a/examples/telehealth-tutorial-app/package.json b/examples/telehealth-tutorial-app/package.json
@@ -10,7 +10,7 @@
     "@types/node": "^16.18.58",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.11",
-    "@whereby.com/browser-sdk": "2.0.0-beta1",
+    "@whereby.com/browser-sdk": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/examples/telehealth-tutorial-app/src/App.tsx b/examples/telehealth-tutorial-app/src/App.tsx
@@ -14,7 +14,7 @@ function App() {
     const chatMessageBottomRef = React.useRef<HTMLDivElement>(null);
 
     const roomConnection = useRoomConnection(ROOM_URL, {
-        localMediaConstraints: {
+        localMediaOptions: {
             audio: true,
             video: true,
         },