From 59e22c576a574d569031c6adaa33aa6098e69b74 Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Fri, 10 Nov 2023 16:09:35 +0100 Subject: [PATCH 01/10] Add peer metadata and draft to bandwidth --- 404.html | 23 ++-- index.html | 54 ++++---- package-lock.json | 120 +++++++++-------- package.json | 3 +- src/components/SimulcastConfig.tsx | 44 +++++++ src/containers/Client.tsx | 131 +++++++++++++++---- src/containers/StreamingSettingsPanel.tsx | 129 +++++++++++------- src/jellyfish.types.ts | 5 +- src/protos/jellyfish/server_notifications.ts | 34 ++--- 9 files changed, 359 insertions(+), 184 deletions(-) create mode 100644 src/components/SimulcastConfig.tsx diff --git a/404.html b/404.html index 47c4a1d..0526458 100644 --- a/404.html +++ b/404.html @@ -1,7 +1,7 @@ - + Single Page Apps for GitHub Pages - - + diff --git a/index.html b/index.html index 8c5607a..d51d7db 100644 --- a/index.html +++ b/index.html @@ -1,37 +1,35 @@ - Jellyfish Demo Dashboard - - - - - - + + +
diff --git a/package-lock.json b/package-lock.json index 349e155..bea6049 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.3", "license": "Apache-2.0", "dependencies": { - "@jellyfish-dev/react-client-sdk": "^0.1.5", + "@jellyfish-dev/react-client-sdk": "file:../react-client-sdk", "@types/chartist": "^1.0.0", "@types/ramda": "^0.29.3", "axios": "^1.3.4", @@ -49,12 +49,39 @@ "prettier": "^2.8.4", "protoc-gen-js": "^3.21.2", "tailwindcss": "^3.2.7", + "ts-proto": "^1.164.0", "typed-emitter": "^2.1.0", "typescript": "^4.9.3", "vite": "^4.1.0", "vite-plugin-checker": "^0.5.6" } }, + "../react-client-sdk": { + "name": "@jellyfish-dev/react-client-sdk", + "version": "0.1.5", + "license": "Apache-2.0", + "dependencies": { + "@jellyfish-dev/ts-client-sdk": "^0.2.1", + "events": "3.3.0", + "lodash.isequal": "4.5.0" + }, + "devDependencies": { + "@types/events": "^3.0.0", + "@types/lodash.isequal": "^4.5.6", + "@types/react": "^18.0.28", + "@typescript-eslint/eslint-plugin": "^5.57.0", + "eslint": "^8.36.0", + "eslint-config-prettier": "^8.6.0", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react-hooks": "^4.6.0", + "prettier": "^2.8.4", + "react": "^18.2.0", + "typed-emitter": "^2.1.0", + "typedoc": "^0.23.28", + "typedoc-plugin-mdn-links": "^3.0.3", + "typescript": "^4.9.5" + } + }, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", @@ -1034,36 +1061,9 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, - "node_modules/@jellyfish-dev/membrane-webrtc-js": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/@jellyfish-dev/membrane-webrtc-js/-/membrane-webrtc-js-0.5.3.tgz", - "integrity": "sha512-XUmSBToRCfxz5qQDNj3Ql7ZLNuTRJ6LyGZOt7pCL6dlXwrghsRH45KuoibPl28QmcVSEU18jyGeuoKP2XGju3Q==", - "dependencies": { - "events": "^3.3.0", - "typed-emitter": "^2.1.0", - "uuid": "^8.3.2" - } - }, "node_modules/@jellyfish-dev/react-client-sdk": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/@jellyfish-dev/react-client-sdk/-/react-client-sdk-0.1.5.tgz", - "integrity": "sha512-cA+BuYzNGFTLFk2NRPuQNoUL5pPqC2xryiyl6xjj65MFAWM2/vhBOOXUdHgdwVbhp2HN582B05vWQKrSPxn53g==", - "dependencies": { - "@jellyfish-dev/ts-client-sdk": "^0.2.1", - "events": "3.3.0", - "lodash.isequal": "4.5.0" - } - }, - "node_modules/@jellyfish-dev/ts-client-sdk": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/@jellyfish-dev/ts-client-sdk/-/ts-client-sdk-0.2.1.tgz", - "integrity": "sha512-/nTvQ+rb51RwVtuC5wuRxWRvtgKXlMpqHMChV9hUVKV3pv0sPmvvsJWsPq+7eXz1djKxfl8jCslJ8EkzIiKFRw==", - "dependencies": { - "@jellyfish-dev/membrane-webrtc-js": "^0.5.3", - "events": "^3.3.0", - "ts-proto": "^1.147.2", - "typed-emitter": "^2.1.0" - } + "resolved": "../react-client-sdk", + "link": true }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", @@ -1477,27 +1477,32 @@ "node_modules/@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", - "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==" + "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==", + "dev": true }, "node_modules/@protobufjs/base64": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz", - "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==" + "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==", + "dev": true }, "node_modules/@protobufjs/codegen": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz", - "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==" + "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==", + "dev": true }, "node_modules/@protobufjs/eventemitter": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz", - "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==" + "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==", + "dev": true }, "node_modules/@protobufjs/fetch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz", "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==", + "dev": true, "dependencies": { "@protobufjs/aspromise": "^1.1.1", "@protobufjs/inquire": "^1.1.0" @@ -1506,27 +1511,32 @@ "node_modules/@protobufjs/float": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz", - "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==" + "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==", + "dev": true }, "node_modules/@protobufjs/inquire": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz", - "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==" + "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==", + "dev": true }, "node_modules/@protobufjs/path": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz", - "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==" + "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==", + "dev": true }, "node_modules/@protobufjs/pool": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz", - "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==" + "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==", + "dev": true }, "node_modules/@protobufjs/utf8": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", - "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==" + "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==", + "dev": true }, "node_modules/@remix-run/router": { "version": "1.8.0", @@ -1584,7 +1594,8 @@ "node_modules/@types/node": { "version": "20.5.7", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.7.tgz", - "integrity": "sha512-dP7f3LdZIysZnmvP3ANJYTSwg+wLLl8p7RqniVlV7j+oXSXAbt9h0WIBFmJy5inWZoX9wZN6eXx+YXd9Rh3RBA==" + "integrity": "sha512-dP7f3LdZIysZnmvP3ANJYTSwg+wLLl8p7RqniVlV7j+oXSXAbt9h0WIBFmJy5inWZoX9wZN6eXx+YXd9Rh3RBA==", + "devOptional": true }, "node_modules/@types/phoenix": { "version": "1.6.1", @@ -2294,6 +2305,7 @@ "version": "2.1.13", "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.13.tgz", "integrity": "sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==", + "dev": true, "engines": { "node": ">=12.13" }, @@ -2890,6 +2902,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "dev": true, "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -2968,6 +2981,7 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/dprint-node/-/dprint-node-1.0.8.tgz", "integrity": "sha512-iVKnUtYfGrYcW1ZAlfR/F59cUVL8QIhWoBJoSjkkdua/dkWIgjZfiLMeTjiB06X0ZLkQ0M2C1VbUj/CxkIf1zg==", + "dev": true, "dependencies": { "detect-libc": "^1.0.3" } @@ -4401,7 +4415,8 @@ "node_modules/long": { "version": "5.2.3", "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz", - "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==" + "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==", + "dev": true }, "node_modules/loose-envify": { "version": "1.4.0", @@ -5149,6 +5164,7 @@ "version": "7.2.5", "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.5.tgz", "integrity": "sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==", + "dev": true, "hasInstallScript": true, "dependencies": { "@protobufjs/aspromise": "^1.1.2", @@ -5527,7 +5543,7 @@ "version": "7.8.0", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz", "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==", - "devOptional": true, + "dev": true, "dependencies": { "tslib": "^2.1.0" } @@ -5536,7 +5552,7 @@ "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "devOptional": true + "dev": true }, "node_modules/safe-buffer": { "version": "5.2.1", @@ -6078,14 +6094,16 @@ "version": "6.6.0", "resolved": "https://registry.npmjs.org/ts-poet/-/ts-poet-6.6.0.tgz", "integrity": "sha512-4vEH/wkhcjRPFOdBwIh9ItO6jOoumVLRF4aABDX5JSNEubSqwOulihxQPqai+OkuygJm3WYMInxXQX4QwVNMuw==", + "dev": true, "dependencies": { "dprint-node": "^1.0.7" } }, "node_modules/ts-proto": { - "version": "1.162.2", - "resolved": "https://registry.npmjs.org/ts-proto/-/ts-proto-1.162.2.tgz", - "integrity": "sha512-iVvoXmelsniHFxh9GAkmz3S7yNuddjgv5iWTDr0VUn67IH3RSvvAd8BjN7Snm0+p1yY/diAQoNHXHuNHe8D3rA==", + "version": "1.164.0", + "resolved": "https://registry.npmjs.org/ts-proto/-/ts-proto-1.164.0.tgz", + "integrity": "sha512-yIyMucjcozS7Vxtyy5mH6C8ltbY4gEBVNW4ymZ0kWiKlyMxsvhyUZ63CbxcF7dCKQVjHR+fLJ3SiorfgyhQ+AQ==", + "dev": true, "dependencies": { "case-anything": "^2.1.13", "protobufjs": "^7.2.4", @@ -6100,6 +6118,7 @@ "version": "1.15.0", "resolved": "https://registry.npmjs.org/ts-proto-descriptors/-/ts-proto-descriptors-1.15.0.tgz", "integrity": "sha512-TYyJ7+H+7Jsqawdv+mfsEpZPTIj9siDHS6EMCzG/z3b/PZiphsX+mWtqFfFVe5/N0Th6V3elK9lQqjnrgTOfrg==", + "dev": true, "dependencies": { "long": "^5.2.3", "protobufjs": "^7.2.4" @@ -6165,6 +6184,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/typed-emitter/-/typed-emitter-2.1.0.tgz", "integrity": "sha512-g/KzbYKbH5C2vPkaXGu8DJlHrGKHLsM25Zg9WuC9pMGfuvT+X25tZQWo5fK1BjBm8+UrVE9LDCvaY0CQk+fXDA==", + "dev": true, "optionalDependencies": { "rxjs": "*" } @@ -6292,14 +6312,6 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, - "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "bin": { - "uuid": "dist/bin/uuid" - } - }, "node_modules/vite": { "version": "4.4.9", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", diff --git a/package.json b/package.json index a3d0d18..21cef03 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "lint": "eslint . --ext .ts,.tsx" }, "dependencies": { - "@jellyfish-dev/react-client-sdk": "^0.1.5", + "@jellyfish-dev/react-client-sdk": "file:../react-client-sdk", "@types/chartist": "^1.0.0", "@types/ramda": "^0.29.3", "axios": "^1.3.4", @@ -56,6 +56,7 @@ "prettier": "^2.8.4", "protoc-gen-js": "^3.21.2", "tailwindcss": "^3.2.7", + "ts-proto": "^1.164.0", "typed-emitter": "^2.1.0", "typescript": "^4.9.3", "vite": "^4.1.0", diff --git a/src/components/SimulcastConfig.tsx b/src/components/SimulcastConfig.tsx new file mode 100644 index 0000000..d0db190 --- /dev/null +++ b/src/components/SimulcastConfig.tsx @@ -0,0 +1,44 @@ +export type SimulcastConfigProps = { + name: string; + layerStatus: boolean; + layerOnChange: () => void; + bandwidthValue: string; + bandwidthOnChange: (value: string) => void; + disableBandwidthInput: boolean; +}; + +export const SimulcastConfig = ({ + name, + layerStatus, + layerOnChange, + bandwidthOnChange, + bandwidthValue, + disableBandwidthInput, +}: SimulcastConfigProps) => { + return ( +
+ +
+ (e.target.value.match(/^[0-9]*$/) ? bandwidthOnChange(e.target.value.trim()) : null)} + placeholder="Max bandwidth (kbps)" + className="input input-sm" + /> +
+
+ ); +}; diff --git a/src/containers/Client.tsx b/src/containers/Client.tsx index b398725..d40e790 100644 --- a/src/containers/Client.tsx +++ b/src/containers/Client.tsx @@ -8,8 +8,7 @@ import { useServerSdk } from "../components/ServerSdkContext"; import { useLogging } from "../components/useLogging"; import { useConnectionToasts } from "../components/useConnectionToasts"; import { showToastError } from "../components/Toasts"; -import { SignalingUrl } from "@jellyfish-dev/react-client-sdk"; -import { TrackEncoding } from "@jellyfish-dev/react-client-sdk"; +import { SignalingUrl, TrackEncoding } from "@jellyfish-dev/react-client-sdk"; import { useStore } from "./RoomsContext"; import { getBooleanValue } from "../utils/localStorageUtils"; import { VscClose } from "react-icons/vsc"; @@ -17,6 +16,7 @@ import { StreamedTrackCard } from "./StreamedTrackCard"; import { ReceivedTrackPanel } from "./ReceivedTrackPanel"; import { GenerateQRCodeButton } from "../components/GenerateQRCodeButton"; import { DeviceInfo, StreamingSettingsCard } from "./StreamingSettingsCard"; +import { checkJSON } from "./StreamingSettingsPanel"; type ClientProps = { roomId: string; @@ -29,7 +29,7 @@ type ClientProps = { removeToken: () => void; }; -export const DEFAULT_TRACK_METADATA = (type: string) => { +export const createDefaultTrackMetadata = (type: string) => { return `{ "name": "track-name", "type": "${type}" @@ -37,6 +37,13 @@ export const DEFAULT_TRACK_METADATA = (type: string) => { `; }; +export const createDefaultClientMetadata = (clientId: string) => { + return `{ + "clientId": "${clientId}" +} +`; +}; + export type LocalTrack = { id: string; isMetadataOpened: boolean; @@ -67,7 +74,12 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem const api = client.useSelector((snapshot) => snapshot.connectivity.api); const jellyfishClient = client.useSelector((snapshot) => snapshot.connectivity.client); const { signalingHost, signalingPath, signalingProtocol } = useServerSdk(); - const [show, setShow] = useLocalStorageState(`show-json-${peerId}`); + const [showClientState, setShowClientState] = useLocalStorageState(`show-client-state-json-${peerId}`); + const [showClientMetadata, setShowClientMetadata] = useLocalStorageState(`show-client-metadata-${peerId}`); + const [attachClientMetadata, setAttachClientMetadata] = useLocalStorageState(`attach-client-metadata-${peerId}`); + const [showMetadataEditor, setShowMetadataEditor] = useLocalStorageState(`show-metadata-editor-${peerId}`); + const [clientMetadata, setClientMetadata] = useState(createDefaultClientMetadata(id)); + const isClientMetadataCorrect = checkJSON(clientMetadata); const [expandedToken, setExpandedToken] = useState(false); const [tokenInput, setTokenInput] = useState(""); const statusRef = useRef(fullState?.status); @@ -155,10 +167,11 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem const addVideoTrack = (trackInfo: DeviceInfo) => { const track: MediaStreamTrack = trackInfo.stream?.getVideoTracks()[0]; if (!trackInfo.stream || !track) return; + const trackId = api?.addTrack( track, trackInfo.stream, - attachMetadata ? JSON.parse(trackMetadata?.trim() || DEFAULT_TRACK_METADATA(trackInfo.type)) : undefined, + attachMetadata ? JSON.parse(trackMetadata?.trim() || createDefaultTrackMetadata(trackInfo.type)) : undefined, { enabled: trackInfo.type === "video" && simulcastTransfer, activeEncodings: currentEncodings }, parseInt(maxBandwidth || "0") || undefined, ); @@ -178,7 +191,7 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem const trackId = api?.addTrack( track, trackInfo.stream, - attachMetadata ? JSON.parse(trackMetadata?.trim() || DEFAULT_TRACK_METADATA(trackInfo.type)) : undefined, + attachMetadata ? JSON.parse(trackMetadata?.trim() || createDefaultTrackMetadata(trackInfo.type)) : undefined, undefined, parseInt(maxBandwidth || "0") || undefined, ); @@ -204,7 +217,7 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem }} />
-
+

Client: {peerId} @@ -215,9 +228,21 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem

+
+ { + setAttachClientMetadata(!attachClientMetadata); + }} + /> +
+ {fullState.status === "joined" ? ( ) : (
)}
- -
-
- - {show && } -
+ /> + Show metadata editor + + +
+
+ {showClientMetadata && } + {showMetadataEditor && ( +
+ +
+ + + +
+
+ )} +
+
+
+
{showClientState && }
{fullState.status === "joined" && @@ -341,7 +426,7 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem peerId={peerId} roomId={roomId} allTracks={fullState?.local?.tracks || {}} - trackMetadata={trackMetadata || DEFAULT_TRACK_METADATA(track.type)} + trackMetadata={trackMetadata || createDefaultTrackMetadata(track.type)} removeTrack={(trackId) => { if (!trackId) return; api?.removeTrack(tracks[trackId].serverId || ""); diff --git a/src/containers/StreamingSettingsPanel.tsx b/src/containers/StreamingSettingsPanel.tsx index 96e9662..d4a9d78 100644 --- a/src/containers/StreamingSettingsPanel.tsx +++ b/src/containers/StreamingSettingsPanel.tsx @@ -1,11 +1,12 @@ import { useState } from "react"; import { useLocalStorageState, useLocalStorageStateString, useLocalStorageStateArray } from "../components/LogSelector"; import { TrackEncoding } from "@jellyfish-dev/react-client-sdk"; -import { DEFAULT_TRACK_METADATA } from "./Client"; +import { createDefaultTrackMetadata } from "./Client"; import { showToastError } from "../components/Toasts"; import { DeviceInfo } from "./StreamingSettingsCard"; import { useStore } from "./RoomsContext"; import { LocalTrack } from "./Client"; +import { SimulcastConfig } from "../components/SimulcastConfig"; type StreamingSettingsPanelProps = { id: string; @@ -24,9 +25,8 @@ type StreamingSettingsPanelProps = { addVideoTrack: (trackInfo: DeviceInfo) => void; }; -const checkJSON = (stringChecked: string) => { +export const checkJSON = (stringChecked: string) => { const trimmedString = stringChecked.trim(); - if (trimmedString == "" || trimmedString === null) return true; try { JSON.parse(trimmedString); } catch (e) { @@ -65,6 +65,13 @@ export const StreamingSettingsPanel = ({ const [encodingLow, setEncodingLow] = useState(currentEncodings.includes("l")); const [encodingMedium, setEncodingMedium] = useState(currentEncodings.includes("m")); const [encodingHigh, setEncodingHigh] = useState(currentEncodings.includes("h")); + + const [encodingValueLow, setEncodingValueLow] = useState(""); + const [encodingValueMedium, setEncodingValueMedium] = useState(""); + const [encodingValueHigh, setEncodingValueHigh] = useState(""); + + const [combinedBandwidth, setCombinedBandwidth] = useState(false); + const [isJsonCorrect, setIsJsonCorrect] = useState(true); const handleEncodingChange = (encoding: TrackEncoding) => { @@ -97,56 +104,90 @@ export const StreamingSettingsPanel = ({ return (
{selectedDeviceId?.type === "video" && ( -
- - {simulcast && ( -
- {"Low"} +
+
+ + {simulcast && ( + + )} +
+ {simulcast && ( +
+ { + setEncodingValueLow(value); + }} + layerOnChange={() => { handleEncodingChange("l"); }} + layerStatus={encodingLow} + disableBandwidthInput={combinedBandwidth} /> - {"Medium"} - { + { + setEncodingValueMedium(value); + }} + layerOnChange={() => { handleEncodingChange("m"); }} + layerStatus={encodingMedium} + disableBandwidthInput={combinedBandwidth} /> - {"High"} - { + { + setEncodingValueHigh(value); + }} + layerOnChange={() => { handleEncodingChange("h"); }} + layerStatus={encodingHigh} + disableBandwidthInput={combinedBandwidth} />
)}
)} -
+
+ {(!simulcast || combinedBandwidth) && ( +
+

Bandwidth:

+ (e.target.value.match(/^[0-9]*$/) ? setMaxBandwidth(e.target.value.trim()) : null)} + placeholder="Max bandwidth (kbps)" + className="input input-sm flex-1" + /> +
+ )} +
-
-

Bandwidth:

- (e.target.value.match(/^[0-9]*$/) ? setMaxBandwidth(e.target.value.trim()) : null)} - placeholder="Max bandwidth" - className="input w-5/6 max-w-xs input-sm" - /> -
-
+
@@ -211,7 +242,7 @@ export const StreamingSettingsPanel = ({ setTrackMetadata(e.target.value); }} className={`textarea textarea-bordered ${!isJsonCorrect ? `border-red-700` : ``} h-60`} - placeholder="Placeholder..." + placeholder="Track metadata (JSON)" >
- )} + +
- {trackInfo.isMetadataOpened && } + {trackInfo.isMetadataOpened && } + {showMetadataEditor && ( +
+ +
+ + + +
+
+ )}
diff --git a/src/containers/StreamingSettingsPanel.tsx b/src/containers/StreamingSettingsPanel.tsx index d4a9d78..47ac594 100644 --- a/src/containers/StreamingSettingsPanel.tsx +++ b/src/containers/StreamingSettingsPanel.tsx @@ -7,6 +7,8 @@ import { DeviceInfo } from "./StreamingSettingsCard"; import { useStore } from "./RoomsContext"; import { LocalTrack } from "./Client"; import { SimulcastConfig } from "../components/SimulcastConfig"; +import { atomFamily, atomWithStorage } from "jotai/utils"; +import { useAtom } from "jotai"; type StreamingSettingsPanelProps = { id: string; From 2d70e17ecf65e62e0c6f8a61a67d6dd3f48d7dc8 Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Mon, 13 Nov 2023 15:52:49 +0100 Subject: [PATCH 03/10] Fix metadata editor default value --- src/containers/StreamedTrackCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/StreamedTrackCard.tsx b/src/containers/StreamedTrackCard.tsx index 2c867d7..3a1a4b8 100644 --- a/src/containers/StreamedTrackCard.tsx +++ b/src/containers/StreamedTrackCard.tsx @@ -45,10 +45,10 @@ export const StreamedTrackCard = ({ const [expandedTrackId, setExpandedTrackId] = useState(false); const [showMetadataEditor, setShowMetadataEditor] = useState(false); const [userTracksMetadata, setUserTracksMetadata] = useAtom(trackMetadataAtomFamily(peerId)); - const [newTrackMetadata, setNewTrackMetadata] = useState(JSON.stringify(userTracksMetadata)); + const trackMetadata: unknown = userTracksMetadata?.[trackInfo.serverId ?? ""]; + const [newTrackMetadata, setNewTrackMetadata] = useState(trackMetadata ? JSON.stringify(trackMetadata) : ""); const isTrackMetadataCorrect = checkJSON(newTrackMetadata); - const trackMetadata = userTracksMetadata?.[trackInfo.serverId ?? ""]; return (
From 29113b9a8ebf84760c13618ac67c3e88ff524cfe Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Thu, 23 Nov 2023 12:28:44 +0100 Subject: [PATCH 04/10] Block button if user not connected --- package-lock.json | 108 ++++++++++++++++----------- package.json | 2 +- src/containers/Client.tsx | 1 + src/containers/StreamedTrackCard.tsx | 4 +- 4 files changed, 68 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index bea6049..8720978 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.3", "license": "Apache-2.0", "dependencies": { - "@jellyfish-dev/react-client-sdk": "file:../react-client-sdk", + "@jellyfish-dev/react-client-sdk": "^0.1.6", "@types/chartist": "^1.0.0", "@types/ramda": "^0.29.3", "axios": "^1.3.4", @@ -58,24 +58,29 @@ }, "../react-client-sdk": { "name": "@jellyfish-dev/react-client-sdk", - "version": "0.1.5", + "version": "0.1.6", + "extraneous": true, "license": "Apache-2.0", "dependencies": { - "@jellyfish-dev/ts-client-sdk": "^0.2.1", + "@jellyfish-dev/ts-client-sdk": "^0.2.2", "events": "3.3.0", "lodash.isequal": "4.5.0" }, "devDependencies": { + "@playwright/test": "^1.39.0", "@types/events": "^3.0.0", "@types/lodash.isequal": "^4.5.6", - "@types/react": "^18.0.28", - "@typescript-eslint/eslint-plugin": "^5.57.0", - "eslint": "^8.36.0", - "eslint-config-prettier": "^8.6.0", - "eslint-plugin-prettier": "^4.2.1", + "@types/node": "^20.9.0", + "@types/react": "18.2.21", + "@typescript-eslint/eslint-plugin": "^6.8.0", + "eslint": "^8.52.0", + "eslint-config-prettier": "^9.0.0", "eslint-plugin-react-hooks": "^4.6.0", - "prettier": "^2.8.4", + "eslint-plugin-react-refresh": "^0.4.4", + "prettier": "3.0.3", + "prettier-plugin-tailwindcss": "^0.5.6", "react": "^18.2.0", + "testcontainers": "^10.2.2", "typed-emitter": "^2.1.0", "typedoc": "^0.23.28", "typedoc-plugin-mdn-links": "^3.0.3", @@ -1061,9 +1066,36 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "node_modules/@jellyfish-dev/membrane-webrtc-js": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@jellyfish-dev/membrane-webrtc-js/-/membrane-webrtc-js-0.5.3.tgz", + "integrity": "sha512-XUmSBToRCfxz5qQDNj3Ql7ZLNuTRJ6LyGZOt7pCL6dlXwrghsRH45KuoibPl28QmcVSEU18jyGeuoKP2XGju3Q==", + "dependencies": { + "events": "^3.3.0", + "typed-emitter": "^2.1.0", + "uuid": "^8.3.2" + } + }, "node_modules/@jellyfish-dev/react-client-sdk": { - "resolved": "../react-client-sdk", - "link": true + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@jellyfish-dev/react-client-sdk/-/react-client-sdk-0.1.6.tgz", + "integrity": "sha512-MGK4Z7x3otbX1IAy4DX7ahko4KZ0i1U98Z24rwGcWnE8BO1n3JvIzhb2Sj0+Eplmye9GQry3ZDWf4x7nozTCTQ==", + "dependencies": { + "@jellyfish-dev/ts-client-sdk": "^0.2.2", + "events": "3.3.0", + "lodash.isequal": "4.5.0" + } + }, + "node_modules/@jellyfish-dev/ts-client-sdk": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@jellyfish-dev/ts-client-sdk/-/ts-client-sdk-0.2.2.tgz", + "integrity": "sha512-zP/9ahyqM8JdwK3+gMKUAkvCNctdq73e3Qj6RF4Q++qPOJY+mJa3p02mJfu/mO3EF3H6HcL+d17gBnQ9MRLE8g==", + "dependencies": { + "@jellyfish-dev/membrane-webrtc-js": "^0.5.3", + "events": "^3.3.0", + "ts-proto": "^1.147.2", + "typed-emitter": "^2.1.0" + } }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", @@ -1477,32 +1509,27 @@ "node_modules/@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", - "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==", - "dev": true + "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==" }, "node_modules/@protobufjs/base64": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz", - "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==", - "dev": true + "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==" }, "node_modules/@protobufjs/codegen": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz", - "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==", - "dev": true + "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==" }, "node_modules/@protobufjs/eventemitter": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz", - "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==", - "dev": true + "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==" }, "node_modules/@protobufjs/fetch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz", "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==", - "dev": true, "dependencies": { "@protobufjs/aspromise": "^1.1.1", "@protobufjs/inquire": "^1.1.0" @@ -1511,32 +1538,27 @@ "node_modules/@protobufjs/float": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz", - "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==", - "dev": true + "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==" }, "node_modules/@protobufjs/inquire": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz", - "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==", - "dev": true + "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==" }, "node_modules/@protobufjs/path": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz", - "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==", - "dev": true + "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==" }, "node_modules/@protobufjs/pool": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz", - "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==", - "dev": true + "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==" }, "node_modules/@protobufjs/utf8": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", - "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==", - "dev": true + "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==" }, "node_modules/@remix-run/router": { "version": "1.8.0", @@ -1594,8 +1616,7 @@ "node_modules/@types/node": { "version": "20.5.7", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.7.tgz", - "integrity": "sha512-dP7f3LdZIysZnmvP3ANJYTSwg+wLLl8p7RqniVlV7j+oXSXAbt9h0WIBFmJy5inWZoX9wZN6eXx+YXd9Rh3RBA==", - "devOptional": true + "integrity": "sha512-dP7f3LdZIysZnmvP3ANJYTSwg+wLLl8p7RqniVlV7j+oXSXAbt9h0WIBFmJy5inWZoX9wZN6eXx+YXd9Rh3RBA==" }, "node_modules/@types/phoenix": { "version": "1.6.1", @@ -2305,7 +2326,6 @@ "version": "2.1.13", "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.13.tgz", "integrity": "sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==", - "dev": true, "engines": { "node": ">=12.13" }, @@ -2902,7 +2922,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", - "dev": true, "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -2981,7 +3000,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/dprint-node/-/dprint-node-1.0.8.tgz", "integrity": "sha512-iVKnUtYfGrYcW1ZAlfR/F59cUVL8QIhWoBJoSjkkdua/dkWIgjZfiLMeTjiB06X0ZLkQ0M2C1VbUj/CxkIf1zg==", - "dev": true, "dependencies": { "detect-libc": "^1.0.3" } @@ -4415,8 +4433,7 @@ "node_modules/long": { "version": "5.2.3", "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz", - "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==", - "dev": true + "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==" }, "node_modules/loose-envify": { "version": "1.4.0", @@ -5164,7 +5181,6 @@ "version": "7.2.5", "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.5.tgz", "integrity": "sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==", - "dev": true, "hasInstallScript": true, "dependencies": { "@protobufjs/aspromise": "^1.1.2", @@ -5543,7 +5559,7 @@ "version": "7.8.0", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz", "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==", - "dev": true, + "devOptional": true, "dependencies": { "tslib": "^2.1.0" } @@ -5552,7 +5568,7 @@ "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "dev": true + "devOptional": true }, "node_modules/safe-buffer": { "version": "5.2.1", @@ -6094,7 +6110,6 @@ "version": "6.6.0", "resolved": "https://registry.npmjs.org/ts-poet/-/ts-poet-6.6.0.tgz", "integrity": "sha512-4vEH/wkhcjRPFOdBwIh9ItO6jOoumVLRF4aABDX5JSNEubSqwOulihxQPqai+OkuygJm3WYMInxXQX4QwVNMuw==", - "dev": true, "dependencies": { "dprint-node": "^1.0.7" } @@ -6103,7 +6118,6 @@ "version": "1.164.0", "resolved": "https://registry.npmjs.org/ts-proto/-/ts-proto-1.164.0.tgz", "integrity": "sha512-yIyMucjcozS7Vxtyy5mH6C8ltbY4gEBVNW4ymZ0kWiKlyMxsvhyUZ63CbxcF7dCKQVjHR+fLJ3SiorfgyhQ+AQ==", - "dev": true, "dependencies": { "case-anything": "^2.1.13", "protobufjs": "^7.2.4", @@ -6118,7 +6132,6 @@ "version": "1.15.0", "resolved": "https://registry.npmjs.org/ts-proto-descriptors/-/ts-proto-descriptors-1.15.0.tgz", "integrity": "sha512-TYyJ7+H+7Jsqawdv+mfsEpZPTIj9siDHS6EMCzG/z3b/PZiphsX+mWtqFfFVe5/N0Th6V3elK9lQqjnrgTOfrg==", - "dev": true, "dependencies": { "long": "^5.2.3", "protobufjs": "^7.2.4" @@ -6184,7 +6197,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/typed-emitter/-/typed-emitter-2.1.0.tgz", "integrity": "sha512-g/KzbYKbH5C2vPkaXGu8DJlHrGKHLsM25Zg9WuC9pMGfuvT+X25tZQWo5fK1BjBm8+UrVE9LDCvaY0CQk+fXDA==", - "dev": true, "optionalDependencies": { "rxjs": "*" } @@ -6312,6 +6324,14 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vite": { "version": "4.4.9", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", diff --git a/package.json b/package.json index 21cef03..d8d52b1 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "lint": "eslint . --ext .ts,.tsx" }, "dependencies": { - "@jellyfish-dev/react-client-sdk": "file:../react-client-sdk", + "@jellyfish-dev/react-client-sdk": "^0.1.6", "@types/chartist": "^1.0.0", "@types/ramda": "^0.29.3", "axios": "^1.3.4", diff --git a/src/containers/Client.tsx b/src/containers/Client.tsx index a05bfbc..e2478bf 100644 --- a/src/containers/Client.tsx +++ b/src/containers/Client.tsx @@ -374,6 +374,7 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem
- {showClientMetadata && } {showMetadataEditor && (
- From 20f5eb38f1ee12ecc01245511862cdad28712beb Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Fri, 1 Dec 2023 16:42:36 +0100 Subject: [PATCH 08/10] Fix PR suggestions --- src/containers/StreamedTrackCard.tsx | 71 ++++++++++------------------ 1 file changed, 26 insertions(+), 45 deletions(-) diff --git a/src/containers/StreamedTrackCard.tsx b/src/containers/StreamedTrackCard.tsx index 9c8530a..59fa8d0 100644 --- a/src/containers/StreamedTrackCard.tsx +++ b/src/containers/StreamedTrackCard.tsx @@ -43,7 +43,6 @@ export const StreamedTrackCard = ({ const simulcast = useState(simulcastTransfer); const [expandedTrackId, setExpandedTrackId] = useState(false); - const [showMetadataEditor, setShowMetadataEditor] = useState(false); const [userTracksMetadata, setUserTracksMetadata] = useAtom(trackMetadataAtomFamily(peerId)); const trackMetadata: unknown = userTracksMetadata?.[trackInfo.serverId ?? ""]; const [newTrackMetadata, setNewTrackMetadata] = useState(trackMetadata ? JSON.stringify(trackMetadata) : ""); @@ -134,48 +133,9 @@ export const StreamedTrackCard = ({
)}
-
-
- - - - -
- {trackInfo.isMetadataOpened && } - {showMetadataEditor && ( +
+
+ Metadata editor
+ />
- )} +
+ +
+ Current metadata + +
+
+ +
From c1deb2a0ab0982ffe609a153182f4baa90f68769 Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Tue, 5 Dec 2023 17:48:49 +0100 Subject: [PATCH 09/10] Fix lint check --- package.json | 5 +++-- src/containers/Client.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d8d52b1..a8536a3 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,10 @@ "build-gh-pages": "tsc && vite build --base=/jellyfish-dashboard", "watch": "tsc --noEmit --watch", "preview": "vite preview", - "format": "prettier --write . --ignore-path ./.eslintignore", + "format:fix": "prettier --write . --ignore-path ./.eslintignore", "format:check": "prettier --check . --ignore-path ./.eslintignore", - "lint": "eslint . --ext .ts,.tsx" + "lint:fix": "eslint . --ext .ts,.tsx --fix", + "lint:check": "eslint . --ext .ts,.tsx" }, "dependencies": { "@jellyfish-dev/react-client-sdk": "^0.1.6", diff --git a/src/containers/Client.tsx b/src/containers/Client.tsx index 14abca9..360e7f8 100644 --- a/src/containers/Client.tsx +++ b/src/containers/Client.tsx @@ -18,7 +18,7 @@ import { GenerateQRCodeButton } from "../components/GenerateQRCodeButton"; import { DeviceInfo, StreamingSettingsCard } from "./StreamingSettingsCard"; import { checkJSON } from "./StreamingSettingsPanel"; import { atomFamily, atomWithStorage } from "jotai/utils"; -import { useAtom, useSetAtom } from "jotai"; +import { useSetAtom } from "jotai"; import { TrackMetadata } from "../jellyfish.types"; type ClientProps = { From 4ce64be73283f3d5d46b3ad04e8e4d765f09a332 Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Tue, 5 Dec 2023 17:51:08 +0100 Subject: [PATCH 10/10] Fix compile_protos scirpt --- compile_proto.sh | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/compile_proto.sh b/compile_proto.sh index 1cf5aeb..d8f0bb2 100755 --- a/compile_proto.sh +++ b/compile_proto.sh @@ -15,4 +15,5 @@ printf "Compiling: file $file\n" protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_out=./src/ $file printf "DONE\n" -npm run format +npm run format:fix +npm run lint:fix