Merge branch 'main' into dependabot/npm_and_yarn/integration/app/test…

…-demo/terser-5.15.0

.gitignore

@@ -11,4 +11,5 @@ tst/snapshots/**/__diff_output__
 *.iml
 integration/logs
 storybook-static
-src/versioning/version.ts
+src/versioning/version.ts
+*.tgz

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Refactor `toggleContentShare` function to allow specifying a `MediaStream` to share. This can be used to share non-screen share content.
+
 ### Removed
 
 ### Changed

scripts/release.js

@@ -47,6 +47,7 @@ const deployDemo = (version) => {
   updateDependency(`amazon-chime-sdk-js@${latestNPMJSSdkVersion}`);
   process.chdir(path.join(__dirname, '../../amazon-chime-sdk/apps/meeting'));
   updateDependency('amazon-chime-sdk-component-library-react', `../../../amazon-chime-sdk-component-library-react/amazon-chime-sdk-component-library-react-${version}.tgz`);
+  spawnOrFail('rm', [`-rf ../../../amazon-chime-sdk-component-library-react/amazon-chime-sdk-component-library-react-${version}.tgz`]);
 
   process.chdir(path.join(__dirname, '../../amazon-chime-sdk/apps/meeting/serverless'));
   const formattedVersion = version.replace(/\./g, '-');
@@ -88,7 +89,7 @@ const checkNPMDepsInstall = () => {
   // Creates a new React test app, install component and sdk and build the test app to ensure no peer dependency warnings, errors or build issues
   logger.log('Install amazon-chime-sdk-component-library-react and amazon-chime-sdk-js sdk as dependencies, check if there is peer dependency warning for amazon-chime-sdk-component-library-react');
   process.chdir(path.join(__dirname, '../..'));
-  if (!fs.existsSync('dependency-check-app')){
+  if (!fs.existsSync('dependency-check-app')) {
     spawnOrFail('mkdir', ['dependency-check-app']);
   } else {
     spawnOrFail('rm', ['-rf dependency-check-app']);
@@ -102,7 +103,7 @@ const checkNPMDepsInstall = () => {
   checkWarning('npm', [`install -q ../amazon-chime-sdk-component-library-react/amazon-chime-sdk-component-library-react-${currentVersion}.tgz`], null, 'amazon-chime-sdk-component-library-react');
   process.chdir(path.join(__dirname, '..'));
   spawnOrFail('rm', ['-rf ../dependency-check-app']);
-}
+};
 
 const cleanUp = (remoteBranch) => {
   logger.warn(`Warning: Resetting HEAD${remoteBranch ? ` to ${remoteBranch}` : ''}.\nAll current staged and local changes will be lost.`);

src/providers/ContentShareProvider/docs/useContentShareControls.stories.mdx

@@ -14,8 +14,10 @@ The `useContentShareControls` hook returns the state and functionality around st
   // A function to toggle content share.
   // If the user is sharing, it will stop the content share.
   // If a user is not sharing, it will start the content share workflow.
-  // You can also provide a sourceId to share a specific screen.
-  toggleContentShare: (sourceId?: string) => Promise<void>;
+  //
+  // You can also provide a string ID to share a specific screen or a specific media stream to
+  // share (e.g. a file being played to a video element).
+  toggleContentShare: (source?: string | MediaStream) => Promise<void>;
 
   // A function to toggle the local user's content share's pause status.
   togglePauseContentShare: () => void;
@@ -52,6 +54,41 @@ const MyChild = () => {
 };
 ```
 
+## Usage With Custom Media Stream
+
+If non-screen content (or transformed screen content) is desired to be shared, you can provide a `MediaStream` directly to the toggle function. You can use classes from `amazon-chime-
+sdk-js` to help accomplish this task, see [this section in the Video Processing guide for more information](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/10_Video_Process
+or.md#custom-video-processor-usage-for-content-share).
+
+```jsx
+import React from 'react';
+import {
+  MeetingProvider,
+  useContentShareControls,
+} from 'amazon-chime-sdk-component-library-react';
+
+const MyChild = () => {
+  const { toggleContentShare } = useContentShareControls();
+
+  const toggleContentShareCustom = async () => {
+    const mediaStream = await navigator.mediaDevices.getDisplayMedia({
+      video: true,
+      audio: true,
+    });
+    toggleContentShare(mediaStream);
+  };
+
+  return <button onClick={toggleContentShareCustom}>Toggle content share</button>;
+};
+
+const App = () => (
+  <MeetingProvider>
+    <MyChild />
+  </MeetingProvider>
+);
+
+```
+
 ### Dependencies
 
 - `ContentShareProvider`

src/providers/ContentShareProvider/index.tsx

@@ -117,16 +117,18 @@ const ContentShareProvider: React.FC = ({ children }) => {
   }, [isLocalShareLoading]);
 
   const toggleContentShare = useCallback(
-    async (sourceId?: string): Promise<void> => {
+    async (source?: string | MediaStream): Promise<void> => {
       if (!audioVideo) {
         return;
       }
 
       if (isLocalUserSharing || isLocalShareLoading) {
         audioVideo.stopContentShare();
       } else {
-        if (sourceId && typeof sourceId === 'string') {
-          audioVideo.startContentShareFromScreenCapture(sourceId);
+        if (source && typeof source === 'string') {
+          audioVideo.startContentShareFromScreenCapture(source);
+        } else if (source instanceof MediaStream) {
+          audioVideo.startContentShare(source);
         } else {
           audioVideo.startContentShareFromScreenCapture();
         }

src/types/index.ts

@@ -41,7 +41,7 @@ export type LocalVideoContextType = {
 
 export type ContentShareControlContextType = {
   paused: boolean;
-  toggleContentShare: (sourceId?: string) => Promise<void>;
+  toggleContentShare: (source?: string | MediaStream) => Promise<void>;
   togglePauseContentShare: () => void;
 };