FCE-1661 / improve examples readme

examples/react-client/README.md

@@ -0,0 +1,27 @@
+# Examples for Fishjam client
+
+- [Minimal React](./minimal-react/) - minimal example
+
+  - streaming the shared screen
+  - receiving media from other peers
+  - almost no UI
+
+- [Fishjam Chat](./fishjam-chat) - example video chat app
+
+  - streaming camera, microphone and screen sharing
+  - displaying other peers video and audio
+  - applying blur middleware
+
+- [Livestream viewer](./livestream-viewer) - example of viewing a live stream
+  - viewing a stream using a viewer token
+  - you can test your livestream with this example
+
+- [Audio only](./audio-only) - example audio-only app
+
+  - streaming microphone only
+  - playing other peers' audio
+
+- [Minimal Smelter](./minimal-smelter/) - example of integrating Fishjam with Smelter
+
+  - applying an example overlay on the camera stream with Smelter
+  - streaming the result to Fishjam

examples/react-client/broadcast/package.json → examples/react-client/livestream-viewer/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@fishjam-example/broadcast-example",
+  "name": "@fishjam-example/livestream-viewer",
   "private": true,
   "version": "0.0.1",
   "type": "module",

examples/react-client/minimal-react/src/components/App.tsx

@@ -32,6 +32,7 @@ export const App = () => {
         onChange={(e) => setToken(() => e?.target?.value)}
         placeholder="token"
       />
+
       <div style={{ display: "flex", flexDirection: "row", gap: "8px" }}>
         <button
           disabled={token === "" || peerStatus === "connected"}
@@ -45,6 +46,7 @@ export const App = () => {
         >
           Connect
         </button>
+
         <button
           disabled={peerStatus !== "connected"}
           onClick={() => {
@@ -53,6 +55,7 @@ export const App = () => {
         >
           Disconnect
         </button>
+
         <button
           disabled={peerStatus !== "connected"}
           onClick={async () => {
@@ -62,6 +65,7 @@ export const App = () => {
         >
           Start screen share
         </button>
+
         <span>Status: {peerStatus}</span>
       </div>