@100mslive/roomkit-react 0.1.4-alpha.0 → 0.1.4

package/dist/index.cjs.css

@@ -1,11 +0,0 @@
-/* ../../../../../../../tmp/tmp-2816-JyOlfNaVDnYG/189ed5e7d730/Whiteboard.css */
-.c-bUEyht-jvfJsl-side-right > button:nth-child(1) {
-  display: none;
-}
-.c-bUEyht-jvfJsl-side-right > button:nth-child(2) {
-  display: none;
-}
-#TD-PrimaryTools-Image {
-  display: none;
-}
-/*# sourceMappingURL=index.cjs.css.map */

package/dist/index.cjs.css.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../../tmp/tmp-2816-JyOlfNaVDnYG/189ed5e7d730/Whiteboard.css"],
-  "sourcesContent": ["/* Hide undo and redo buttons */\n.c-bUEyht-jvfJsl-side-right > button:nth-child(1) {\n  display: none;\n}\n\n.c-bUEyht-jvfJsl-side-right > button:nth-child(2) {\n  display: none;\n}\n\n#TD-PrimaryTools-Image {\n  display: none;\n}\n"],
-  "mappings": ";AACA,CAAC,2BAA2B,EAAE,MAAM;AAClC,WAAS;AACX;AAEA,CAJC,2BAI2B,EAAE,MAAM;AAClC,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACX;",
-  "names": []
-}

package/dist/index.css

@@ -1,11 +0,0 @@
-/* ../../../../../../../tmp/tmp-2816-dyPVrOHMsbyG/189ed5e7dc41/Whiteboard.css */
-.c-bUEyht-jvfJsl-side-right > button:nth-child(1) {
-  display: none;
-}
-.c-bUEyht-jvfJsl-side-right > button:nth-child(2) {
-  display: none;
-}
-#TD-PrimaryTools-Image {
-  display: none;
-}
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../../tmp/tmp-2816-dyPVrOHMsbyG/189ed5e7dc41/Whiteboard.css"],
-  "sourcesContent": ["/* Hide undo and redo buttons */\n.c-bUEyht-jvfJsl-side-right > button:nth-child(1) {\n  display: none;\n}\n\n.c-bUEyht-jvfJsl-side-right > button:nth-child(2) {\n  display: none;\n}\n\n#TD-PrimaryTools-Image {\n  display: none;\n}\n"],
-  "mappings": ";AACA,CAAC,2BAA2B,EAAE,MAAM;AAClC,WAAS;AACX;AAEA,CAJC,2BAI2B,EAAE,MAAM;AAClC,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACX;",
-  "names": []
-}

package/dist/transcription-JJQ4UAIK.js

@@ -1,356 +0,0 @@
-import {
-  Box,
-  Text
-} from "./chunk-6GXDYWD5.js";
-import {
-  IconButton_default,
-  SESSION_STORE_KEY,
-  Tooltip,
-  __async,
-  __publicField,
-  __spreadProps,
-  __spreadValues,
-  define_process_env_default,
-  init_define_process_env
-} from "./chunk-YE4RPJYG.js";
-
-// src/Prebuilt/plugins/transcription/index.jsx
-init_define_process_env();
-
-// src/Prebuilt/plugins/transcription/TranscriptionButton.jsx
-init_define_process_env();
-import React, { useCallback, useEffect, useRef } from "react";
-import {
-  selectIsAllowedToPublish,
-  selectSessionStore,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore
-} from "@100mslive/react-sdk";
-import { ClosedCaptionIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/plugins/transcription/Transcriber.js
-init_define_process_env();
-import RecordRTC, { StereoAudioRecorder } from "recordrtc";
-import { selectIsLocalAudioEnabled, selectLocalPeerName } from "@100mslive/react-sdk";
-var Transcriber = class {
-  constructor({ hmsStore, setTranscriptAndSpeakingPeer, setIsTranscriptionEnabled }) {
-    /**
-     * This method is used to get the local peer's stream and observe it for changes.
-     * @returns {Promise<void>}
-     */
-    __publicField(this, "getAndObserveStream", () => __async(this, null, function* () {
-      const localPeer = window.__hms.sdk.getLocalPeer();
-      const mediaTrack = localPeer.audioTrack.nativeTrack;
-      if (!mediaTrack || mediaTrack.id === this.trackIdBeingObserved) {
-        return;
-      }
-      this.trackIdBeingObserved = mediaTrack.id;
-      console.log("transcription - observing local peer track", mediaTrack.id);
-      try {
-        if (this.recordRTCInstance) {
-          console.log("transcription - destroying earlier instance");
-          this.recordRTCInstance.destroy();
-        }
-        this.recordRTCInstance = null;
-      } catch (err) {
-        console.error("transcription - in destroying earlier instance", err);
-      }
-      const stream = new MediaStream([mediaTrack]);
-      yield this.observeStream(stream);
-    }));
-    this.hmsStore = hmsStore;
-    this.enabled = false;
-    this.audioSocket = null;
-    this.setTranscriptAndSpeakingPeer = setTranscriptAndSpeakingPeer;
-    this.setIsTranscriptionEnabled = setIsTranscriptionEnabled;
-    this.sttTuningConfig = {
-      timeSlice: 250,
-      desiredSampRate: 8e3,
-      numberOfAudioChannels: 1,
-      bufferSize: 256
-    };
-    this.resetTextTimer = null;
-    this.localPeerName = hmsStore.getState(selectLocalPeerName);
-    this.observingLocalPeerTrack = false;
-    this.trackIdBeingObserved = null;
-    this.recordRTCInstance = null;
-    this.unsubscribes = [];
-  }
-  toggleTranscriptionState() {
-    return __async(this, null, function* () {
-      yield this.enableTranscription(!this.enabled);
-    });
-  }
-  enableTranscription(enable) {
-    return __async(this, null, function* () {
-      if (enable === this.enabled) {
-        return;
-      }
-      console.log("transcription enabled", enable);
-      if (enable) {
-        this.enabled = true;
-        yield this.setIsTranscriptionEnabled(true);
-        yield this.listen();
-      } else {
-        this.enabled = false;
-        yield this.setIsTranscriptionEnabled(false);
-        this.cleanup();
-      }
-    });
-  }
-  setTranscriptAndPeerWithExpiry(transcript, peerName) {
-    if (!transcript) {
-      return;
-    }
-    this.setTranscriptAndSpeakingPeer(transcript, `[${peerName}]`);
-    clearTimeout(this.resetTextTimer);
-    this.resetTextTimer = setTimeout(() => {
-      this.resetTranscriptAndPeer();
-    }, 5e3);
-  }
-  resetTranscriptAndPeer() {
-    this.setTranscriptAndSpeakingPeer("", "");
-    clearTimeout(this.resetTextTimer);
-  }
-  listen(retryCount = 0) {
-    return __async(this, null, function* () {
-      if (retryCount > 5) {
-        console.error("transcription", "Max retry count reached!!", retryCount);
-        this.cleanup();
-        return;
-      }
-      try {
-        let url = define_process_env_default.REACT_APP_DYNAMIC_STT_TOKEN_GENERATION_ENDPOINT;
-        let res = yield fetch(url);
-        let body = yield res.json();
-        const authToken = body.token;
-        if (authToken) {
-          this.audioSocket = yield new WebSocket(
-            `wss://api.assemblyai.com/v2/realtime/ws?sample_rate=${this.sttTuningConfig.desiredSampRate}&token=${authToken}`
-          );
-          this.resetTranscriptAndPeer();
-          this.audioSocket.onmessage = (message) => {
-            try {
-              const res2 = JSON.parse(message.data);
-              if (res2.text && this.enabled) {
-                let messageText = res2.text.length >= 80 ? res2.text.split(" ").slice(Math.max(res2.text.split(" ").length - 10, 1)).join(" ") : res2.text;
-                if (messageText) {
-                  this.setTranscriptAndPeerWithExpiry(messageText, this.localPeerName);
-                }
-              }
-            } catch (err) {
-              console.error("transcription", err);
-            }
-          };
-          this.audioSocket.onerror = (event) => {
-            console.error("transcription", event);
-            this.audioSocket.close();
-          };
-          this.audioSocket.onclose = (event) => {
-            try {
-              console.log(event);
-              this.audioSocket = null;
-              if (this.enabled && event.code !== 4001) {
-                this.listen(retryCount++);
-              }
-            } catch (err) {
-              console.error("transcription", err);
-            }
-          };
-          this.audioSocket.onopen = () => {
-            this.observeLocalPeerTrack();
-          };
-        } else {
-          console.error("Unable to fetch dynamic token!!");
-        }
-      } catch (err) {
-        console.error("transcription", err);
-      }
-    });
-  }
-  observeLocalPeerTrack() {
-    return __async(this, null, function* () {
-      try {
-        if (this.observingLocalPeerTrack) {
-          return;
-        }
-        this.observingLocalPeerTrack = true;
-        console.log("transcription - observing local peer track");
-        let unsub = this.hmsStore.subscribe(this.getAndObserveStream, selectIsLocalAudioEnabled);
-        this.unsubscribes.push(unsub);
-        this.getAndObserveStream();
-      } catch (err) {
-        console.error("transcription - observing local peer track", err);
-      }
-    });
-  }
-  observeStream(stream) {
-    return __async(this, null, function* () {
-      this.recordRTCInstance = new RecordRTC(stream, __spreadProps(__spreadValues({}, this.sttTuningConfig), {
-        type: "audio",
-        mimeType: "audio/webm;codecs=pcm",
-        recorderType: StereoAudioRecorder,
-        ondataavailable: (blob) => {
-          const reader = new FileReader();
-          reader.onload = () => {
-            const base64data = reader.result;
-            if (this.audioSocket && this.enabled && this.audioSocket.readyState && this.audioSocket.readyState === 1) {
-              try {
-                this.audioSocket.send(JSON.stringify({ audio_data: base64data.split("base64,")[1] }));
-              } catch (err) {
-                console.error("transcription", err);
-              }
-            }
-          };
-          reader.readAsDataURL(blob);
-        }
-      }));
-      this.recordRTCInstance.startRecording();
-    });
-  }
-  cleanup() {
-    console.log("transcription - cleanup");
-    if (this.audioSocket) {
-      try {
-        this.audioSocket.close();
-        this.audioSocket = null;
-      } catch (err) {
-        console.error("transcription cleanup - couldn't close socket", err);
-      }
-    }
-    if (this.recordRTCInstance) {
-      try {
-        this.recordRTCInstance.destroy();
-        this.recordRTCInstance = null;
-      } catch (err) {
-        console.error("transcription cleanup - couldn't stop recording", err);
-      }
-    }
-    for (const unsub of this.unsubscribes) {
-      unsub();
-    }
-    this.resetTranscriptAndPeer();
-  }
-};
-
-// src/Prebuilt/plugins/transcription/TranscriptionButton.jsx
-function TranscriptionButton() {
-  const transcriptionState = useHMSStore(selectSessionStore(SESSION_STORE_KEY.TRANSCRIPTION_STATE));
-  const rawStore = useHMSVanillaStore();
-  const isTranscriptionEnabled = !!(transcriptionState == null ? void 0 : transcriptionState.enabled);
-  let transcript = "", speakingPeer = "";
-  if (isTranscriptionEnabled) {
-    transcript = transcriptionState.transcript || "";
-    speakingPeer = transcriptionState.speakingPeer || "";
-  }
-  const transcriber = useRef(null);
-  const hmsActions = useHMSActions();
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  useEffect(() => {
-    hmsActions.sessionStore.observe(SESSION_STORE_KEY.TRANSCRIPTION_STATE);
-  }, [hmsActions]);
-  useEffect(() => {
-    if (!transcriber.current) {
-      transcriber.current = new Transcriber({
-        hmsStore: rawStore,
-        setTranscriptAndSpeakingPeer: (transcript2, peerName) => __async(this, null, function* () {
-          var _a;
-          const transcriptionCurrentEnabledState = !!((_a = rawStore.getState(
-            selectSessionStore(SESSION_STORE_KEY.TRANSCRIPTION_STATE)
-          )) == null ? void 0 : _a.enabled);
-          yield hmsActions.sessionStore.set(SESSION_STORE_KEY.TRANSCRIPTION_STATE, {
-            enabled: transcriptionCurrentEnabledState,
-            transcript: transcript2,
-            speakingPeer: peerName
-          });
-        }),
-        setIsTranscriptionEnabled: (newEnabledState) => __async(this, null, function* () {
-          yield hmsActions.sessionStore.set(SESSION_STORE_KEY.TRANSCRIPTION_STATE, {
-            enabled: newEnabledState
-          });
-        })
-      });
-    }
-    return () => {
-      if (transcriber.current) {
-        transcriber.current.cleanup();
-      }
-    };
-  }, [hmsActions, rawStore]);
-  useEffect(() => {
-    if (isTranscriptionEnabled) {
-      transcriber.current.enableTranscription(true);
-    }
-  }, [isTranscriptionEnabled]);
-  const toggleTranscriptionState = useCallback(() => {
-    transcriber.current.toggleTranscriptionState();
-  }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      css: {
-        textAlign: "left",
-        fontWeight: "$medium",
-        bottom: "120px",
-        position: "fixed",
-        width: "100%",
-        fontSize: "$20px",
-        zIndex: "1000000",
-        color: "white",
-        textShadow: "0px 0px 6px #000",
-        whiteSpace: "pre-line",
-        paddingLeft: "40px"
-      }
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      css: {
-        textAlign: "center",
-        fontWeight: "$medium",
-        bottom: "90px",
-        position: "fixed",
-        width: "100%",
-        fontSize: "$20px",
-        zIndex: "1000000",
-        color: "white",
-        textShadow: "0px 0px 6px #000",
-        whiteSpace: "pre-line"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        css: {
-          color: "white",
-          textShadow: "0px 0px 6px #000"
-        }
-      },
-      transcript
-    ),
-    /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        css: {
-          color: "#c0bbbb",
-          textShadow: "0px 0px 6px #000",
-          textTransform: "capitalize"
-        }
-      },
-      speakingPeer
-    )
-  ), isAllowedToPublish.audio && /* @__PURE__ */ React.createElement(Tooltip, { title: `Turn ${!isTranscriptionEnabled ? "on" : "off"} transcription` }, /* @__PURE__ */ React.createElement(
-    IconButton_default,
-    {
-      active: !isTranscriptionEnabled,
-      onClick: toggleTranscriptionState,
-      "data-testid": "transcription_btn"
-    },
-    /* @__PURE__ */ React.createElement(ClosedCaptionIcon, null)
-  )));
-}
-export {
-  TranscriptionButton as default
-};
-//# sourceMappingURL=transcription-JJQ4UAIK.js.map

package/dist/transcription-JJQ4UAIK.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/plugins/transcription/index.jsx", "../src/Prebuilt/plugins/transcription/TranscriptionButton.jsx", "../src/Prebuilt/plugins/transcription/Transcriber.js"],
-  "sourcesContent": ["export { TranscriptionButton as default } from './TranscriptionButton';\n", "import React, { useCallback, useEffect, useRef } from 'react';\nimport {\n  selectIsAllowedToPublish,\n  selectSessionStore,\n  useHMSActions,\n  useHMSStore,\n  useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { ClosedCaptionIcon } from '@100mslive/react-icons';\nimport { Box } from '../../../Layout';\nimport { Text } from '../../../Text';\nimport { Tooltip } from '../../../Tooltip';\nimport IconButton from '../../IconButton';\nimport { Transcriber } from './Transcriber';\nimport { SESSION_STORE_KEY } from '../../common/constants';\n\nexport function TranscriptionButton() {\n  const transcriptionState = useHMSStore(selectSessionStore(SESSION_STORE_KEY.TRANSCRIPTION_STATE));\n  const rawStore = useHMSVanillaStore();\n  const isTranscriptionEnabled = !!transcriptionState?.enabled;\n  let transcript = '',\n    speakingPeer = '';\n  if (isTranscriptionEnabled) {\n    transcript = transcriptionState.transcript || '';\n    speakingPeer = transcriptionState.speakingPeer || '';\n  }\n\n  const transcriber = useRef(null);\n  const hmsActions = useHMSActions();\n  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);\n\n  useEffect(() => {\n    hmsActions.sessionStore.observe(SESSION_STORE_KEY.TRANSCRIPTION_STATE);\n  }, [hmsActions]);\n\n  useEffect(() => {\n    if (!transcriber.current) {\n      // create transcriber with the current room state for transcription\n      transcriber.current = new Transcriber({\n        hmsStore: rawStore,\n        setTranscriptAndSpeakingPeer: async (transcript, peerName) => {\n          const transcriptionCurrentEnabledState = !!rawStore.getState(\n            selectSessionStore(SESSION_STORE_KEY.TRANSCRIPTION_STATE),\n          )?.enabled;\n          await hmsActions.sessionStore.set(SESSION_STORE_KEY.TRANSCRIPTION_STATE, {\n            enabled: transcriptionCurrentEnabledState,\n            transcript,\n            speakingPeer: peerName,\n          });\n        },\n        setIsTranscriptionEnabled: async newEnabledState => {\n          await hmsActions.sessionStore.set(SESSION_STORE_KEY.TRANSCRIPTION_STATE, {\n            enabled: newEnabledState,\n          });\n        },\n      });\n    }\n    return () => {\n      if (transcriber.current) {\n        transcriber.current.cleanup();\n      }\n    };\n  }, [hmsActions, rawStore]);\n\n  useEffect(() => {\n    // remote enabled transcript\n    if (isTranscriptionEnabled) {\n      transcriber.current.enableTranscription(true);\n    }\n  }, [isTranscriptionEnabled]);\n\n  const toggleTranscriptionState = useCallback(() => {\n    transcriber.current.toggleTranscriptionState();\n  }, []);\n\n  return (\n    <>\n      <Box\n        css={{\n          textAlign: 'left',\n          fontWeight: '$medium',\n          bottom: '120px',\n          position: 'fixed',\n          width: '100%',\n          fontSize: '$20px',\n          zIndex: '1000000',\n          color: 'white',\n          textShadow: '0px 0px 6px #000',\n          whiteSpace: 'pre-line',\n          paddingLeft: '40px',\n        }}\n      />\n      <Box\n        css={{\n          textAlign: 'center',\n          fontWeight: '$medium',\n          bottom: '90px',\n          position: 'fixed',\n          width: '100%',\n          fontSize: '$20px',\n          zIndex: '1000000',\n          color: 'white',\n          textShadow: '0px 0px 6px #000',\n          whiteSpace: 'pre-line',\n        }}\n      >\n        <Text\n          css={{\n            color: 'white',\n            textShadow: '0px 0px 6px #000',\n          }}\n        >\n          {transcript}\n        </Text>\n        <Text\n          css={{\n            color: '#c0bbbb',\n            textShadow: '0px 0px 6px #000',\n            textTransform: 'capitalize',\n          }}\n        >\n          {speakingPeer}\n        </Text>\n      </Box>\n      {isAllowedToPublish.audio && (\n        <Tooltip title={`Turn ${!isTranscriptionEnabled ? 'on' : 'off'} transcription`}>\n          <IconButton\n            active={!isTranscriptionEnabled}\n            onClick={toggleTranscriptionState}\n            data-testid=\"transcription_btn\"\n          >\n            <ClosedCaptionIcon />\n          </IconButton>\n        </Tooltip>\n      )}\n    </>\n  );\n}\n", "import RecordRTC, { StereoAudioRecorder } from 'recordrtc';\nimport { selectIsLocalAudioEnabled, selectLocalPeerName } from '@100mslive/react-sdk';\n\nexport class Transcriber {\n  constructor({ hmsStore, setTranscriptAndSpeakingPeer, setIsTranscriptionEnabled }) {\n    this.hmsStore = hmsStore;\n    this.enabled = false;\n    this.audioSocket = null; // this is the socket that will be used to send audio to the STT server\n    this.setTranscriptAndSpeakingPeer = setTranscriptAndSpeakingPeer;\n    this.setIsTranscriptionEnabled = setIsTranscriptionEnabled;\n    this.sttTuningConfig = {\n      timeSlice: 250,\n      desiredSampRate: 8000,\n      numberOfAudioChannels: 1,\n      bufferSize: 256,\n    };\n    this.resetTextTimer = null; // used to reset the transcript after some time, if no new update comes\n    this.localPeerName = hmsStore.getState(selectLocalPeerName);\n    this.observingLocalPeerTrack = false;\n    this.trackIdBeingObserved = null;\n    this.recordRTCInstance = null;\n    this.unsubscribes = [];\n  }\n\n  async toggleTranscriptionState() {\n    await this.enableTranscription(!this.enabled);\n  }\n\n  async enableTranscription(enable) {\n    if (enable === this.enabled) {\n      return;\n    }\n    console.log('transcription enabled', enable);\n    if (enable) {\n      this.enabled = true;\n      await this.setIsTranscriptionEnabled(true);\n      await this.listen();\n    } else {\n      this.enabled = false;\n      await this.setIsTranscriptionEnabled(false);\n      this.cleanup();\n    }\n  }\n\n  setTranscriptAndPeerWithExpiry(transcript, peerName) {\n    if (!transcript) {\n      return;\n    }\n    this.setTranscriptAndSpeakingPeer(transcript, `[${peerName}]`);\n    // reset after some time if no new update comes\n    clearTimeout(this.resetTextTimer);\n    this.resetTextTimer = setTimeout(() => {\n      this.resetTranscriptAndPeer();\n    }, 5000);\n  }\n\n  resetTranscriptAndPeer() {\n    this.setTranscriptAndSpeakingPeer('', '');\n    clearTimeout(this.resetTextTimer);\n  }\n\n  async listen(retryCount = 0) {\n    if (retryCount > 5) {\n      console.error('transcription', 'Max retry count reached!!', retryCount);\n      this.cleanup();\n      return;\n    }\n    try {\n      let url = process.env.REACT_APP_DYNAMIC_STT_TOKEN_GENERATION_ENDPOINT;\n      let res = await fetch(url);\n      let body = await res.json();\n      const authToken = body.token;\n\n      if (authToken) {\n        this.audioSocket = await new WebSocket(\n          `wss://api.assemblyai.com/v2/realtime/ws?sample_rate=${this.sttTuningConfig.desiredSampRate}&token=${authToken}`,\n        );\n        this.resetTranscriptAndPeer();\n        this.audioSocket.onmessage = message => {\n          try {\n            const res = JSON.parse(message.data);\n            if (res.text && this.enabled) {\n              //Limiting the transcript size based on it's charecter length.\n              let messageText =\n                res.text.length >= 80\n                  ? res.text\n                      .split(' ')\n                      .slice(Math.max(res.text.split(' ').length - 10, 1))\n                      .join(' ')\n                  : res.text;\n              if (messageText) {\n                this.setTranscriptAndPeerWithExpiry(messageText, this.localPeerName);\n              }\n            }\n          } catch (err) {\n            console.error('transcription', err);\n          }\n        };\n\n        this.audioSocket.onerror = event => {\n          console.error('transcription', event);\n          this.audioSocket.close();\n        };\n\n        this.audioSocket.onclose = event => {\n          try {\n            console.log(event);\n            this.audioSocket = null;\n            if (this.enabled && event.code !== 4001) {\n              this.listen(retryCount++);\n            }\n          } catch (err) {\n            console.error('transcription', err);\n          }\n        };\n\n        this.audioSocket.onopen = () => {\n          this.observeLocalPeerTrack();\n        };\n      } else {\n        console.error('Unable to fetch dynamic token!!');\n      }\n    } catch (err) {\n      console.error('transcription', err);\n    }\n  }\n\n  async observeLocalPeerTrack() {\n    try {\n      if (this.observingLocalPeerTrack) {\n        return;\n      }\n      this.observingLocalPeerTrack = true;\n      console.log('transcription - observing local peer track');\n      let unsub = this.hmsStore.subscribe(this.getAndObserveStream, selectIsLocalAudioEnabled);\n      this.unsubscribes.push(unsub);\n      this.getAndObserveStream(); // call it once to start observing initially\n    } catch (err) {\n      console.error('transcription - observing local peer track', err);\n    }\n  }\n\n  /**\n   * This method is used to get the local peer's stream and observe it for changes.\n   * @returns {Promise<void>}\n   */\n  getAndObserveStream = async () => {\n    // a hacky way to get the local peer's stream till we have a better way\n    const localPeer = window.__hms.sdk.getLocalPeer();\n    const mediaTrack = localPeer.audioTrack.nativeTrack;\n    if (!mediaTrack || mediaTrack.id === this.trackIdBeingObserved) {\n      return;\n    }\n    this.trackIdBeingObserved = mediaTrack.id;\n    console.log('transcription - observing local peer track', mediaTrack.id);\n    try {\n      if (this.recordRTCInstance) {\n        console.log('transcription - destroying earlier instance');\n        this.recordRTCInstance.destroy();\n      }\n      this.recordRTCInstance = null;\n    } catch (err) {\n      console.error('transcription - in destroying earlier instance', err);\n    }\n    const stream = new MediaStream([mediaTrack]);\n    await this.observeStream(stream);\n  };\n\n  async observeStream(stream) {\n    this.recordRTCInstance = new RecordRTC(stream, {\n      ...this.sttTuningConfig,\n      type: 'audio',\n      mimeType: 'audio/webm;codecs=pcm',\n      recorderType: StereoAudioRecorder,\n      ondataavailable: blob => {\n        const reader = new FileReader();\n        reader.onload = () => {\n          const base64data = reader.result;\n          if (this.audioSocket && this.enabled && this.audioSocket.readyState && this.audioSocket.readyState === 1) {\n            try {\n              this.audioSocket.send(JSON.stringify({ audio_data: base64data.split('base64,')[1] }));\n            } catch (err) {\n              console.error('transcription', err);\n            }\n          }\n        };\n        reader.readAsDataURL(blob);\n      },\n    });\n    this.recordRTCInstance.startRecording();\n  }\n\n  cleanup() {\n    console.log('transcription - cleanup');\n    if (this.audioSocket) {\n      try {\n        this.audioSocket.close();\n        this.audioSocket = null;\n      } catch (err) {\n        console.error(\"transcription cleanup - couldn't close socket\", err);\n      }\n    }\n    if (this.recordRTCInstance) {\n      try {\n        this.recordRTCInstance.destroy();\n        this.recordRTCInstance = null;\n      } catch (err) {\n        console.error(\"transcription cleanup - couldn't stop recording\", err);\n      }\n    }\n    for (const unsub of this.unsubscribes) {\n      unsub();\n    }\n    this.resetTranscriptAndPeer();\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["res", "transcript"]
-}

package/src/Prebuilt/common/useSortedPeers.js

@@ -1,28 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useHMSVanillaStore } from '@100mslive/react-sdk';
-import PeersSorter from './PeersSorter';
-import { useActiveSpeakerSorting } from '../components/AppData/useUISettings';
-
-function useSortedPeers({ peers, maxTileCount = 9 }) {
-  const [sortedPeers, setSortedPeers] = useState([]);
-  const store = useHMSVanillaStore();
-  const activeSpeakerSorting = useActiveSpeakerSorting();
-  const peerSortedRef = useRef(new PeersSorter(store));
-  peerSortedRef.current.onUpdate(setSortedPeers);
-
-  useEffect(() => {
-    const peersSorter = peerSortedRef.current;
-    if (peers?.length > 0 && maxTileCount && activeSpeakerSorting) {
-      peersSorter.setPeersAndTilesPerPage({
-        peers,
-        tilesPerPage: maxTileCount,
-      });
-    } else if (!activeSpeakerSorting) {
-      peersSorter.stop();
-    }
-  }, [maxTileCount, peers, activeSpeakerSorting]);
-
-  return activeSpeakerSorting ? sortedPeers : peers;
-}
-
-export default useSortedPeers;

package/src/Prebuilt/components/BottomActionSheet/BottomActionSheet.jsx

@@ -1,96 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { CrossIcon } from '@100mslive/react-icons';
-import { Box, Flex, Popover, Text } from '../../..';
-import { getUpdatedHeight } from '../../common/utils';
-
-const BottomActionSheet = ({
-  title = '',
-  children = <></>,
-  triggerContent,
-  containerCSS = {},
-  // By default the component starts just above the trigger.
-  // A negative offset allows it to start from the bottom of the screen.
-  sideOffset = -50,
-  defaultHeight = 50,
-}) => {
-  const MINIMUM_HEIGHT = 40; // vh
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const [sheetHeight, setSheetHeight] = useState(`${Math.min(Math.max(MINIMUM_HEIGHT, defaultHeight), 100)}vh`);
-  const closeRef = useRef(null);
-
-  // Close the sheet if height goes under MINIMUM_HEIGHT
-  useEffect(() => {
-    if (closeRef?.current && parseFloat(sheetHeight.slice(0, -2)) <= MINIMUM_HEIGHT) {
-      setSheetOpen(false);
-      // Delay for showing the opacity animation, can be removed if not needed
-      setTimeout(() => closeRef.current?.click(), 200);
-    }
-  }, [sheetHeight]);
-
-  return (
-    <>
-      <Popover.Root
-        onOpenChange={open => {
-          if (!open) {
-            setSheetHeight('0');
-          }
-          setSheetOpen(open);
-        }}
-      >
-        <Popover.Trigger asChild>{triggerContent}</Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content sideOffset={sideOffset} style={{ zIndex: '2' }}>
-            <Box
-              css={{
-                w: '100vw',
-                py: '$8',
-                opacity: sheetOpen ? '1' : '0.5',
-                h: sheetHeight,
-                minHeight: '50vh',
-                overflowY: 'auto',
-                backgroundColor: '$surface_default',
-                transition: 'all 0.2s linear',
-                ...containerCSS,
-              }}
-            >
-              <Flex
-                justify="between"
-                onTouchMove={e => {
-                  const updatedSheetHeight = getUpdatedHeight(e, MINIMUM_HEIGHT);
-                  setSheetHeight(updatedSheetHeight);
-                }}
-                css={{
-                  borderBottom: '1px solid $border_bright',
-                  px: '$8',
-                  pb: '$4',
-                  mb: '$4',
-                  w: '100%',
-                }}
-              >
-                <Text variant="h6" css={{ color: '$on_surface_high' }}>
-                  {title}
-                </Text>
-                <Popover.Close aria-label="Close">
-                  <Box
-                    ref={closeRef}
-                    css={{
-                      color: '$on_surface_high',
-                      bg: '$surface_bright',
-                      p: '$2',
-                      borderRadius: '$round',
-                    }}
-                  >
-                    <CrossIcon />
-                  </Box>
-                </Popover.Close>
-              </Flex>
-              <Box css={{ px: '$8', maxHeight: '100%', overflowY: 'auto' }}>{children}</Box>
-            </Box>
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-    </>
-  );
-};
-
-export default BottomActionSheet;

package/src/Prebuilt/components/BottomActionSheet/BottomActionSheet.stories.tsx

@@ -1,46 +0,0 @@
-import React, { ReactElement } from 'react';
-import { Meta } from '@storybook/react';
-import { Button } from '../../../Button';
-import { Box } from '../../../Layout';
-import { Text } from '../../../Text';
-import { CSS } from '../../../Theme';
-import BottomActionSheet from './BottomActionSheet';
-
-// WIP
-
-export default {
-  title: 'Components/BottomActionSheet',
-  component: BottomActionSheet,
-  argTypes: {
-    title: { control: 'text' },
-    triggerContent: { control: 'jsx' },
-    containerCSS: { control: 'object' },
-    sideOffset: { control: 'number' },
-    defaultHeight: { control: 'number' },
-  },
-} as Meta;
-
-interface BottomActionSheetProps {
-  title: string;
-  triggerContent: ReactElement;
-  children: ReactElement;
-  containerCSS: CSS;
-  sideOffset: number;
-  defaultHeight: number;
-}
-
-const Template = (args: BottomActionSheetProps) => (
-  <BottomActionSheet {...args}>
-    <Box>
-      <Text>This is the content of the BottomActionSheet.</Text>
-      <Text>You can put any content you like here.</Text>
-    </Box>
-  </BottomActionSheet>
-);
-
-// Example story with default props
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Example BottomActionSheet',
-  triggerContent: <Button>Open BottomActionSheet</Button>,
-};