stream-chat-react 14.2.0 → 14.4.0

package/README.md

@@ -54,26 +54,26 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
 
 ## Example Applications
 
-We have built five demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual event. You can preview these [demos](https://getstream.io/chat/demos/) on our website. Also, the code is [open source](https://github.com/GetStream/website-react-examples/).
+We have built demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual events. You can preview these [demos](https://getstream.io/chat/demos/) on our website.
 
 ## Documentation
 
 We use a doc generator to build our [component documentation](https://getstream.io/chat/docs/sdk/react/). We provide a brief description of each chat component and define all of the props it accepts.
 
-The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
+The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, you'll likely need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
 
 ## Component Reusability
 
-For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
+For components that implement significant logic, it's helpful to split the component into two parts: a top-level component that handles functionality and a lower-level component that renders the UI. This way, you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
 
 ```jsx
 <Channel>
   <Window>
     <ChannelHeader />
-    <WithComponents overrides={{ Message: CustomMessageUI }}>
+    <WithComponents overrides={{ MessageUI: CustomMessageUI }}>
       <MessageList />
     </WithComponents>
-    <MessageInput />
+    <MessageComposer />
   </Window>
   <Thread />
 </Channel>
@@ -81,14 +81,12 @@ For components that implement significant logic, it's helpful to split the compo
 
 ### Customizing Styles
 
-The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
+The preferred method for overriding the pre-defined styles in the library is a two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
 
 ```css title="index.css"
 @layer stream, stream-overrides;
 
-@import 'stream-chat-react/css/v2/index.css' layer(stream);
-/* or */
-@import 'stream-chat-react/dist/css/v2/index.css' layer(stream);
+@import 'stream-chat-react/css/index.css' layer(stream);
 
 @layer stream-overrides {
   /* your overrides */

package/dist/cjs/ReactPlayerWrapper.16cd6fed.js

@@ -0,0 +1,24 @@
+const require_useNotificationApi = require("./useNotificationApi.9ffe5761.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_player = require("react-player");
+react_player = require_useNotificationApi.__toESM(react_player);
+//#region src/components/VideoPlayer/ReactPlayerWrapper.tsx
+var ReactPlayer = react_player.default.default ?? react_player.default;
+/**
+* Default-exported so `VideoPlayer` can code-split it via `React.lazy`, keeping
+* `react-player` (~2 MB) out of the SDK's eager import graph — it is fetched
+* only when a default video player actually renders.
+*/
+var ReactPlayerWrapper = ({ isPlaying, thumbnailUrl, videoUrl }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReactPlayer, {
+	className: "react-player",
+	config: { file: { attributes: { poster: thumbnailUrl } } },
+	controls: true,
+	height: "100%",
+	playing: isPlaying,
+	url: videoUrl,
+	width: "100%"
+});
+//#endregion
+exports.default = ReactPlayerWrapper;
+
+//# sourceMappingURL=ReactPlayerWrapper.16cd6fed.js.map

package/dist/cjs/ReactPlayerWrapper.16cd6fed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactPlayerWrapper.16cd6fed.js","names":[],"sources":["../../src/components/VideoPlayer/ReactPlayerWrapper.tsx"],"sourcesContent":["import ReactPlayerImport from 'react-player';\n\nimport type { VideoPlayerProps } from './VideoPlayer';\n\n// react-player ships as CJS with the component on `exports.default`. Some\n// bundler/interop setups (e.g. Vite serving our built ESM as a linked workspace\n// dependency) hand back the module namespace `{ default }` instead of the\n// component itself, which makes React throw \"Element type is invalid ... got:\n// object\". Unwrap the default defensively so it works regardless of interop.\nconst ReactPlayer =\n  (ReactPlayerImport as unknown as { default?: typeof ReactPlayerImport }).default ??\n  ReactPlayerImport;\n\n/**\n * Default-exported so `VideoPlayer` can code-split it via `React.lazy`, keeping\n * `react-player` (~2 MB) out of the SDK's eager import graph — it is fetched\n * only when a default video player actually renders.\n */\nconst ReactPlayerWrapper = ({ isPlaying, thumbnailUrl, videoUrl }: VideoPlayerProps) => (\n  <ReactPlayer\n    className='react-player'\n    config={{ file: { attributes: { poster: thumbnailUrl } } }}\n    controls\n    height='100%'\n    playing={isPlaying}\n    url={videoUrl}\n    width='100%'\n  />\n);\n\nexport default ReactPlayerWrapper;\n"],"mappings":";;;;;AASA,IAAM,cACH,aAAA,QAAwE,WACzE,aAAA;;;;;;AAOF,IAAM,sBAAsB,EAAE,WAAW,cAAc,eACrD,iBAAA,GAAA,kBAAA,KAAC,aAAD;CACE,WAAU;CACV,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,aAAa,EAAE,EAAE;CACzD,UAAA;CACA,QAAO;CACP,SAAS;CACT,KAAK;CACL,OAAM;AACP,CAAA"}

package/dist/cjs/audioProcessing.22303d69.js

@@ -0,0 +1,148 @@
+let react = require("react");
+//#region src/components/ReactFileUtilities/utils.ts
+var useHandleFileChangeWrapper = (resetOnChange = false, handler) => (0, react.useCallback)(({ currentTarget }) => {
+	const { files } = currentTarget;
+	if (!files) return;
+	try {
+		handler?.(Array.from(files));
+	} catch (error) {
+		console.error(error);
+	}
+	if (resetOnChange) currentTarget.value = "";
+}, [handler, resetOnChange]);
+async function dataTransferItemsToFiles(items) {
+	if (!items || !items.length) return [];
+	const fileLikes = getFileLikes(items);
+	if (fileLikes.length) return fileLikes;
+	const blobPromises = [];
+	for (const item of items) if (item.type === "text/html") blobPromises.push(new Promise((accept) => {
+		item.getAsString(async (s) => {
+			const imagePromises = extractImageSources(s).map((src) => getImageSource(fileLikes, src));
+			await Promise.all(imagePromises);
+			accept();
+		});
+	}));
+	await Promise.all(blobPromises);
+	return fileLikes;
+}
+function getFileLikes(items) {
+	const fileLikes = [];
+	for (const item of items) if (item.kind === "file") {
+		const file = item.getAsFile();
+		if (file) fileLikes.push(file);
+	}
+	return fileLikes;
+}
+async function getImageSource(fileLikes, src) {
+	let res;
+	try {
+		res = await fetch(src);
+	} catch (e) {
+		return;
+	}
+	const contentType = res.headers.get("Content-type") || "application/octet-stream";
+	const buf = await res.arrayBuffer();
+	const blob = new Blob([buf], { type: contentType });
+	fileLikes.push(blob);
+}
+var extractImageSources = (s) => {
+	const imageTags = new DOMParser().parseFromString(s, "text/html").getElementsByTagName("img");
+	return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
+};
+var createFileFromBlobs = ({ blobsArray, fileName, mimeType }) => {
+	const concatenatedBlob = new Blob(blobsArray, { type: mimeType });
+	return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });
+};
+var getExtensionFromMimeType = (mimeType) => {
+	const match = mimeType.match(/\/([^/;]+)/);
+	return match && match[1];
+};
+var getRecordedMediaTypeFromMimeType = (mimeType) => {
+	const match = mimeType.match(/^(audio|video)\/.*$/);
+	return match && match[1];
+};
+var readFileAsArrayBuffer = (file) => new Promise((resolve, reject) => {
+	const fileReader = new FileReader();
+	fileReader.onload = () => {
+		resolve(fileReader.result);
+	};
+	fileReader.onerror = () => {
+		reject(fileReader.error);
+	};
+	fileReader.readAsArrayBuffer(file);
+});
+//#endregion
+//#region src/components/MediaRecorder/transcode/audioProcessing.ts
+/**
+* In the context of resampling audio data, AudioContext is used to decode the input audio file into an AudioBuffer,
+* which is a fundamental data structure representing audio data.
+* @param file
+*/
+var toAudioBuffer = async (file) => {
+	const audioCtx = new AudioContext();
+	const arrayBuffer = await readFileAsArrayBuffer(file);
+	const decodedData = await audioCtx.decodeAudioData(arrayBuffer);
+	if (audioCtx.state !== "closed") await audioCtx.close();
+	return decodedData;
+};
+/**
+* OfflineAudioContext is a specialized type of AudioContext that does not render audio in real-time and is used for offline audio processing tasks.
+* It allows performing audio processing and rendering without actually playing the audio through speakers or outputting it to a destination.
+* In the context of resampling audio data, OfflineAudioContext is used to resample the decoded AudioBuffer from a file to the desired sample rate.
+* It provides more flexibility and control over audio processing, as it can operate at different sample rates and durations compared to real-time audio contexts.
+* @param audioBuffer
+* @param sampleRate
+*/
+var renderAudio = async (audioBuffer, sampleRate) => {
+	const offlineAudioCtx = new OfflineAudioContext(audioBuffer.numberOfChannels, audioBuffer.duration * sampleRate, sampleRate);
+	const source = offlineAudioCtx.createBufferSource();
+	source.buffer = audioBuffer;
+	source.connect(offlineAudioCtx.destination);
+	source.start();
+	return await offlineAudioCtx.startRendering();
+};
+//#endregion
+Object.defineProperty(exports, "createFileFromBlobs", {
+	enumerable: true,
+	get: function() {
+		return createFileFromBlobs;
+	}
+});
+Object.defineProperty(exports, "dataTransferItemsToFiles", {
+	enumerable: true,
+	get: function() {
+		return dataTransferItemsToFiles;
+	}
+});
+Object.defineProperty(exports, "getExtensionFromMimeType", {
+	enumerable: true,
+	get: function() {
+		return getExtensionFromMimeType;
+	}
+});
+Object.defineProperty(exports, "getRecordedMediaTypeFromMimeType", {
+	enumerable: true,
+	get: function() {
+		return getRecordedMediaTypeFromMimeType;
+	}
+});
+Object.defineProperty(exports, "renderAudio", {
+	enumerable: true,
+	get: function() {
+		return renderAudio;
+	}
+});
+Object.defineProperty(exports, "toAudioBuffer", {
+	enumerable: true,
+	get: function() {
+		return toAudioBuffer;
+	}
+});
+Object.defineProperty(exports, "useHandleFileChangeWrapper", {
+	enumerable: true,
+	get: function() {
+		return useHandleFileChangeWrapper;
+	}
+});
+
+//# sourceMappingURL=audioProcessing.22303d69.js.map

package/dist/cjs/audioProcessing.22303d69.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioProcessing.22303d69.js","names":[],"sources":["../../src/components/ReactFileUtilities/utils.ts","../../src/components/MediaRecorder/transcode/audioProcessing.ts"],"sourcesContent":["import type { FileLike, RecordedMediaType } from './types';\nimport type { ChangeEvent } from 'react';\nimport { useCallback } from 'react';\n\nexport const useHandleFileChangeWrapper = (\n  resetOnChange = false,\n  handler?: (files: Array<File>) => void,\n) =>\n  useCallback(\n    ({ currentTarget }: ChangeEvent<HTMLInputElement>) => {\n      const { files } = currentTarget;\n\n      if (!files) return;\n\n      try {\n        handler?.(Array.from(files));\n      } catch (error) {\n        console.error(error);\n      }\n\n      if (resetOnChange) currentTarget.value = '';\n    },\n    [handler, resetOnChange],\n  );\n\nexport function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean {\n  if (!items || !items.length) {\n    return false;\n  }\n  for (const item of items) {\n    if (item.kind === 'file' || item.type === 'text/html') {\n      return true;\n    }\n  }\n  return false;\n}\n\nexport async function dataTransferItemsToFiles(\n  items?: DataTransferItem[],\n): Promise<FileLike[]> {\n  if (!items || !items.length) {\n    return [];\n  }\n\n  // If there are files inside the DataTransferItem prefer those\n  const fileLikes = getFileLikes(items);\n  if (fileLikes.length) {\n    return fileLikes;\n  }\n\n  // Otherwise extract images from html\n  const blobPromises = [];\n  for (const item of items) {\n    if (item.type === 'text/html') {\n      blobPromises.push(\n        new Promise<void>((accept) => {\n          item.getAsString(async (s) => {\n            const imagePromises = extractImageSources(s).map((src) =>\n              getImageSource(fileLikes, src),\n            );\n\n            await Promise.all(imagePromises);\n            accept();\n          });\n        }),\n      );\n    }\n  }\n  await Promise.all(blobPromises);\n  return fileLikes;\n}\n\nfunction getFileLikes(items: DataTransferItem[]) {\n  const fileLikes = [];\n  for (const item of items) {\n    if (item.kind === 'file') {\n      const file = item.getAsFile();\n      if (file) {\n        fileLikes.push(file);\n      }\n    }\n  }\n  return fileLikes;\n}\n\nasync function getImageSource(fileLikes: FileLike[], src: string) {\n  let res;\n  try {\n    res = await fetch(src);\n  } catch (e) {\n    return;\n  }\n  const contentType = res.headers.get('Content-type') || 'application/octet-stream';\n  const buf = await res.arrayBuffer();\n  const blob = new Blob([buf], { type: contentType });\n  fileLikes.push(blob);\n}\n\nconst extractImageSources = (s: string) => {\n  const imageTags = new DOMParser()\n    .parseFromString(s, 'text/html')\n    .getElementsByTagName('img');\n  return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);\n};\n\nexport const isBlobButNotFile = (obj: unknown): obj is Blob =>\n  obj instanceof Blob && !(obj instanceof File);\n\nexport const createFileFromBlobs = ({\n  blobsArray,\n  fileName,\n  mimeType,\n}: {\n  blobsArray: Blob[];\n  fileName: string;\n  mimeType: string;\n}) => {\n  const concatenatedBlob = new Blob(blobsArray, { type: mimeType });\n  return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });\n};\n\nexport const getExtensionFromMimeType = (mimeType: string) => {\n  const match = mimeType.match(/\\/([^/;]+)/);\n  return match && match[1];\n};\n\nexport const getRecordedMediaTypeFromMimeType = (\n  mimeType: string,\n): RecordedMediaType | null => {\n  const match = mimeType.match(/^(audio|video)\\/.*$/);\n  return match && (match[1] as RecordedMediaType);\n};\n\nexport const readFileAsArrayBuffer = (file: File): Promise<ArrayBuffer> =>\n  new Promise((resolve, reject) => {\n    const fileReader = new FileReader();\n    fileReader.onload = () => {\n      resolve(fileReader.result as ArrayBuffer);\n    };\n\n    fileReader.onerror = () => {\n      reject(fileReader.error);\n    };\n\n    fileReader.readAsArrayBuffer(file);\n  });\n\nexport const generateFileName = (mimeType: string) =>\n  `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;\n","import { readFileAsArrayBuffer } from '../../ReactFileUtilities';\n\n/**\n * In the context of resampling audio data, AudioContext is used to decode the input audio file into an AudioBuffer,\n * which is a fundamental data structure representing audio data.\n * @param file\n */\nexport const toAudioBuffer = async (file: File) => {\n  const audioCtx = new AudioContext();\n\n  const arrayBuffer = await readFileAsArrayBuffer(file);\n  const decodedData = await audioCtx.decodeAudioData(arrayBuffer);\n  if (audioCtx.state !== 'closed') await audioCtx.close();\n  return decodedData;\n};\n\n/**\n * OfflineAudioContext is a specialized type of AudioContext that does not render audio in real-time and is used for offline audio processing tasks.\n * It allows performing audio processing and rendering without actually playing the audio through speakers or outputting it to a destination.\n * In the context of resampling audio data, OfflineAudioContext is used to resample the decoded AudioBuffer from a file to the desired sample rate.\n * It provides more flexibility and control over audio processing, as it can operate at different sample rates and durations compared to real-time audio contexts.\n * @param audioBuffer\n * @param sampleRate\n */\nexport const renderAudio = async (audioBuffer: AudioBuffer, sampleRate: number) => {\n  const offlineAudioCtx = new OfflineAudioContext(\n    audioBuffer.numberOfChannels,\n    audioBuffer.duration * sampleRate,\n    sampleRate,\n  );\n  const source = offlineAudioCtx.createBufferSource();\n  source.buffer = audioBuffer;\n  source.connect(offlineAudioCtx.destination);\n  source.start();\n\n  return await offlineAudioCtx.startRendering();\n};\n"],"mappings":"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"}