@100mslive/roomkit-react 0.1.0

package/dist/transcription-BTSB7FZH.js

@@ -0,0 +1,356 @@
+import {
+  Box,
+  Text
+} from "./chunk-XRJXE6UO.js";
+import {
+  IconButton_default,
+  SESSION_STORE_KEY,
+  Tooltip,
+  __async,
+  __publicField,
+  __spreadProps,
+  __spreadValues,
+  define_process_env_default,
+  init_define_process_env
+} from "./chunk-KYYP6ZVK.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-BTSB7FZH.js.map

package/dist/transcription-BTSB7FZH.js.map

@@ -0,0 +1,7 @@
+{
+  "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/dist/utils/animations.d.ts

@@ -0,0 +1,92 @@
+export declare const slideDown: (controller: string) => {
+    (): string;
+    name: string;
+};
+export declare const slideUp: (controller: string) => {
+    (): string;
+    name: string;
+};
+export declare const dialogOpen: {
+    (): string;
+    name: string;
+};
+export declare const dialogClose: {
+    (): string;
+    name: string;
+};
+export declare const slideUpAndFade: (start?: string) => {
+    (): string;
+    name: string;
+};
+export declare const slideRightAndFade: (start?: string) => {
+    (): string;
+    name: string;
+};
+export declare const slideDownAndFade: (start?: string) => {
+    (): string;
+    name: string;
+};
+export declare const slideLeftAndFade: (start?: string) => {
+    (): string;
+    name: string;
+};
+export declare const popoverAnimation: {
+    '@media (prefers-reduced-motion: no-preference)': {
+        animationDuration: string;
+        animationTimingFunction: string;
+        willChange: string;
+        '&[data-state="open"]': {
+            '&[data-side="top"]': {
+                animationName: {
+                    (): string;
+                    name: string;
+                };
+            };
+            '&[data-side="right"]': {
+                animationName: {
+                    (): string;
+                    name: string;
+                };
+            };
+            '&[data-side="bottom"]': {
+                animationName: {
+                    (): string;
+                    name: string;
+                };
+            };
+            '&[data-side="left"]': {
+                animationName: {
+                    (): string;
+                    name: string;
+                };
+            };
+        };
+    };
+};
+export declare const toastAnimation: {
+    '@media (prefers-reduced-motion: no-preference)': {
+        animationDuration: string;
+        animationTimingFunction: string;
+        willChange: string;
+        animationName: {
+            (): string;
+            name: string;
+        };
+        '&[data-state="open"]': {
+            animationName: {
+                (): string;
+                name: string;
+            };
+        };
+        '&[data-swipe="move"]': {
+            transform: string;
+        };
+        '&[data-swipe="cancel"]': {
+            transform: string;
+            transition: string;
+        };
+        '&[data-swipe="end"]': {
+            animation: string;
+        };
+    };
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './animations';
+export * from './styles';

package/dist/utils/styles.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Flex based centering helper styles
+ */
+export declare const flexCenter: {
+    display: string;
+    justifyContent: string;
+    alignItems: string;
+};
+/**
+ * Gives styles for text ellipsis, with given width as maxWidth.
+ * A number in pixels or css width string value can be passed
+ * @param {number|string} width
+ * @returns
+ */
+export declare const textEllipsis: (width: number | string) => {
+    maxWidth: string | number;
+    overflow: string;
+    textOverflow: string;
+    whiteSpace: string;
+    minWidth: number;
+};

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@100mslive/roomkit-react",
+  "source": "src/index.ts",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "version": "0.1.0",
+  "author": "100ms",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "prestart": "rm -rf dist && yarn types:build",
+    "start": "concurrently \"yarn dev\" \"yarn types\"",
+    "dev": "node ../../scripts/dev",
+    "build:only": "rm -rf dist && node ../../scripts/build-webapp",
+    "build": "yarn build:only && yarn types:build",
+    "types": "tsc -w",
+    "types:build": "tsc -p tsconfig.json",
+    "lint": "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx",
+    "lint:fix": "yarn lint --fix",
+    "format": "prettier -w src/**",
+    "storybook": "sb dev -p 6006",
+    "build-storybook": "sb build",
+    "babel": "npx storybook@latest babelrc"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@storybook/addon-a11y": "^7.0.27",
+    "@storybook/addon-actions": "^7.0.27",
+    "@storybook/addon-essentials": "^7.0.27",
+    "@storybook/addon-interactions": "^7.0.27",
+    "@storybook/addon-links": "^7.0.27",
+    "@storybook/cli": "^7.0.27",
+    "@storybook/react": "^7.0.27",
+    "@storybook/react-webpack5": "^7.0.27",
+    "@storybook/testing-library": "^0.2.0",
+    "@types/lodash.merge": "^4.6.6",
+    "@types/mdx": "2.0.2",
+    "@types/react": "^18.1.0",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-react-require": "3.1.3",
+    "react": "^18.1.0",
+    "rollup": "^2.70.1",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-import-css": "^3.3.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook-dark-mode": "^3.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.2 <19.0.0"
+  },
+  "dependencies": {
+    "@100mslive/hls-player": "0.1.10",
+    "@100mslive/hms-virtual-background": "1.11.10",
+    "@100mslive/react-icons": "0.8.10",
+    "@100mslive/react-sdk": "0.8.10",
+    "@emoji-mart/data": "^1.0.6",
+    "@emoji-mart/react": "^1.0.1",
+    "@radix-ui/react-accordion": "1.0.0",
+    "@radix-ui/react-checkbox": "1.0.0",
+    "@radix-ui/react-collapsible": "1.0.0",
+    "@radix-ui/react-dialog": "1.0.0",
+    "@radix-ui/react-dropdown-menu": "1.0.0",
+    "@radix-ui/react-label": "1.0.0",
+    "@radix-ui/react-popover": "1.0.0",
+    "@radix-ui/react-progress": "1.0.0",
+    "@radix-ui/react-radio-group": "1.0.0",
+    "@radix-ui/react-select": "1.0.0",
+    "@radix-ui/react-slider": "1.0.0",
+    "@radix-ui/react-switch": "1.0.0",
+    "@radix-ui/react-tabs": "1.0.0",
+    "@radix-ui/react-toast": "1.0.0",
+    "@radix-ui/react-tooltip": "1.0.0",
+    "@stitches/react": "^1.2.8",
+    "@tldraw/tldraw": "^1.18.4",
+    "emoji-mart": "^5.2.2",
+    "eventemitter2": "^6.4.7",
+    "hls.js": "^1.3.0",
+    "js-confetti": "^0.10.2",
+    "lodash.merge": "^4.6.2",
+    "mobx": "^6.3.12",
+    "pusher-js": "^7.0.3",
+    "qrcode.react": "^3.1.0",
+    "react-draggable": "^4.4.5",
+    "react-intersection-observer": "^9.4.3",
+    "react-router-dom": "^6.3.0",
+    "react-use": "^17.4.0",
+    "react-virtualized-auto-sizer": "^1.0.7",
+    "react-window": "^1.8.7",
+    "recordrtc": "^5.6.2",
+    "screenfull": "^5.1.0",
+    "uuid": "^8.3.2",
+    "web-vitals": "^1.0.1",
+    "worker-timers": "^7.0.40",
+    "zipyai": "^1.3.24"
+  }
+}

package/src/Accordion/Accordion.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Accordion } from '.';
+
+export default {
+  title: 'UI Components/Accordion',
+  component: Accordion.Root,
+} as ComponentMeta<typeof Accordion.Root>;
+
+function AccordionItem({ value, header, content }: { value: string; header: string; content: string }) {
+  return (
+    <Accordion.Item value={value}>
+      <Accordion.Header css={{ padding: '$8 $9' }}>{header}</Accordion.Header>
+      <Accordion.Content contentStyles={{ padding: '$8 $9' }}>
+        <>
+          {content}
+          <Accordion.Item value={value + '1'}>
+            <Accordion.Header css={{ padding: '$8 $9' }}>nested header</Accordion.Header>
+            <Accordion.Content contentStyles={{ padding: '$8 $9' }}>nested item</Accordion.Content>
+          </Accordion.Item>
+        </>
+      </Accordion.Content>
+    </Accordion.Item>
+  );
+}
+
+const Template = () => {
+  return (
+    <Accordion.Root type="multiple" defaultValue={['item-1']} css={{ width: '300px' }}>
+      <AccordionItem
+        value="item-1"
+        header="Is it accessible?"
+        content="Yes. It adheres to the WAI-ARIA design pattern."
+      />
+      <AccordionItem
+        value="item-2"
+        header="Is it unstyled?"
+        content="Yes. It's unstyled by default, giving you freedom over the look and feel."
+      />
+      <AccordionItem
+        value="item-3"
+        header="Can it be animated?"
+        content="Yes! You can animate the Accordion. with CSS or JavaScript."
+      />
+    </Accordion.Root>
+  );
+};
+
+export const AccordionContent: ComponentStory<typeof Accordion.Root> = Template.bind({});
+AccordionContent.storyName = 'Accordion';