@stream-io/video-react-native-sdk 0.0.1-alpha.262 → 0.0.1-alpha.263

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.1-alpha.263](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.262...@stream-io/video-react-native-sdk-0.0.1-alpha.263) (2023-07-10)
+
+
+### Bug Fixes
+
+* **react-native:** video published on foreground even if it was muted ([#773](https://github.com/GetStream/stream-video-js/issues/773)) ([6fc1ce9](https://github.com/GetStream/stream-video-js/commit/6fc1ce91db183e6fa2c962b86b5715e3ac4421c6))
+
+
+
 ## [0.0.1-alpha.262](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.1-alpha.261...@stream-io/video-react-native-sdk-0.0.1-alpha.262) (2023-07-10)
 
 

package/README.md

@@ -96,7 +96,7 @@ Stream's video roadmap and changelog are available [here](https://github.com/Get
 - [x] Reconnection (awaiting BE)
 - [x] Simulcasting- iOS
 - [x] Pinning and spotlighting participants
-- [ ] Components parity, alignment and refactor
+- [x] Components parity, alignment and refactor
 - [ ] Write docs:
   - [ ] UI Components
   - [ ] Tutorials

package/dist/src/hooks/useCallControls.d.ts

@@ -1,5 +1,5 @@
 /**
- * A helper hook which exposes audio, video mute and camera facing mode and
+ * A helper hook which exposes audio, video publishing state and
  * their respective functions to toggle state
  *
  * @category Device Management

package/dist/src/hooks/useCallControls.js

@@ -7,46 +7,36 @@ const react_1 = require("react");
 const useAppStateListener_1 = require("../utils/hooks/useAppStateListener");
 const MediaStreamManagement_1 = require("../providers/MediaStreamManagement");
 /**
- * A helper hook which exposes audio, video mute and camera facing mode and
+ * A helper hook which exposes audio, video publishing state and
  * their respective functions to toggle state
  *
  * @category Device Management
  */
 const useCallControls = () => {
     const localParticipant = (0, video_react_bindings_1.useLocalParticipant)();
-    const call = (0, video_react_bindings_1.useCall)();
-    /** Refs to keep track of the current call and whether the user is online or not */
-    const callRef = (0, react_1.useRef)(call);
-    callRef.current = call;
     const { publishAudioStream, publishVideoStream, stopPublishingAudio, stopPublishingVideo, } = (0, MediaStreamManagement_1.useMediaStreamManagement)();
     const isAudioPublished = localParticipant?.publishedTracks.includes(video_client_1.SfuModels.TrackType.AUDIO);
     const isVideoPublished = localParticipant?.publishedTracks.includes(video_client_1.SfuModels.TrackType.VIDEO);
-    /** Refs to keep track of whether the user has published the track before going offline  */
-    const isAudioPublishedRef = (0, react_1.useRef)(false);
-    const isVideoPublishedRef = (0, react_1.useRef)(false);
-    isAudioPublishedRef.current = !isAudioPublished;
-    isVideoPublishedRef.current = !isVideoPublished;
-    /** Refs to be used for useEffect that does the rejoining flow when coming back offline */
-    const publishAudioStreamRef = (0, react_1.useRef)(publishAudioStream);
-    const publishVideoStreamRef = (0, react_1.useRef)(publishVideoStream);
-    publishAudioStreamRef.current = publishAudioStream;
-    publishVideoStreamRef.current = publishVideoStream;
     /** Attempt to republish video stream when app comes back to foreground */
-    (0, useAppStateListener_1.useAppStateListener)(isVideoPublishedRef.current ? publishVideoStream : undefined);
-    const toggleVideoMuted = (0, react_1.useCallback)(async () => {
-        if (!isVideoPublished) {
+    (0, useAppStateListener_1.useAppStateListener)(() => {
+        if (isVideoPublished) {
             publishVideoStream();
         }
-        else {
+    }, undefined);
+    const toggleVideoMuted = (0, react_1.useCallback)(async () => {
+        if (isVideoPublished) {
             stopPublishingVideo();
         }
+        else {
+            publishVideoStream();
+        }
     }, [isVideoPublished, publishVideoStream, stopPublishingVideo]);
     const toggleAudioMuted = (0, react_1.useCallback)(async () => {
-        if (!isAudioPublished) {
-            publishAudioStream();
+        if (isAudioPublished) {
+            stopPublishingAudio();
         }
         else {
-            stopPublishingAudio();
+            publishAudioStream();
         }
     }, [isAudioPublished, publishAudioStream, stopPublishingAudio]);
     return {

package/dist/src/hooks/useCallControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCallControls.js","sourceRoot":"","sources":["../../../src/hooks/useCallControls.tsx"],"names":[],"mappings":";;;AAAA,0DAAoD;AACpD,0EAA+E;AAC/E,iCAA4C;AAC5C,4EAAyE;AACzE,8EAA8E;AAE9E;;;;;GAKG;AACI,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,gBAAgB,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAC/C,MAAM,IAAI,GAAG,IAAA,8BAAO,GAAE,CAAC;IACvB,mFAAmF;IACnF,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAEvB,MAAM,EACJ,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,GACpB,GAAG,IAAA,gDAAwB,GAAE,CAAC;IAE/B,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,eAAe,CAAC,QAAQ,CACjE,wBAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IACF,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,eAAe,CAAC,QAAQ,CACjE,wBAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IACF,2FAA2F;IAC3F,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC1C,mBAAmB,CAAC,OAAO,GAAG,CAAC,gBAAgB,CAAC;IAChD,mBAAmB,CAAC,OAAO,GAAG,CAAC,gBAAgB,CAAC;IAEhD,0FAA0F;IAC1F,MAAM,qBAAqB,GAAG,IAAA,cAAM,EAAC,kBAAkB,CAAC,CAAC;IACzD,MAAM,qBAAqB,GAAG,IAAA,cAAM,EAAC,kBAAkB,CAAC,CAAC;IACzD,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;IACnD,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;IAEnD,0EAA0E;IAC1E,IAAA,yCAAmB,EACjB,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAC7D,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC9C,IAAI,CAAC,gBAAgB,EAAE;YACrB,kBAAkB,EAAE,CAAC;SACtB;aAAM;YACL,mBAAmB,EAAE,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEhE,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC9C,IAAI,CAAC,gBAAgB,EAAE;YACrB,kBAAkB,EAAE,CAAC;SACtB;aAAM;YACL,mBAAmB,EAAE,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEhE,OAAO;QACL,gBAAgB;QAChB,gBAAgB;QAChB,gBAAgB;QAChB,gBAAgB;KACjB,CAAC;AACJ,CAAC,CAAC;AA3DW,QAAA,eAAe,mBA2D1B"}
+{"version":3,"file":"useCallControls.js","sourceRoot":"","sources":["../../../src/hooks/useCallControls.tsx"],"names":[],"mappings":";;;AAAA,0DAAoD;AACpD,0EAAsE;AACtE,iCAAoC;AACpC,4EAAyE;AACzE,8EAA8E;AAE9E;;;;;GAKG;AACI,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,gBAAgB,GAAG,IAAA,0CAAmB,GAAE,CAAC;IAE/C,MAAM,EACJ,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,GACpB,GAAG,IAAA,gDAAwB,GAAE,CAAC;IAE/B,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,eAAe,CAAC,QAAQ,CACjE,wBAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IACF,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,eAAe,CAAC,QAAQ,CACjE,wBAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAC;IAEF,0EAA0E;IAC1E,IAAA,yCAAmB,EAAC,GAAG,EAAE;QACvB,IAAI,gBAAgB,EAAE;YACpB,kBAAkB,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC9C,IAAI,gBAAgB,EAAE;YACpB,mBAAmB,EAAE,CAAC;SACvB;aAAM;YACL,kBAAkB,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEhE,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QAC9C,IAAI,gBAAgB,EAAE;YACpB,mBAAmB,EAAE,CAAC;SACvB;aAAM;YACL,kBAAkB,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEhE,OAAO;QACL,gBAAgB;QAChB,gBAAgB;QAChB,gBAAgB;QAChB,gBAAgB;KACjB,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,eAAe,mBA8C1B"}

package/package.json

@@ -84,5 +84,5 @@
     "typedoc-plugin-markdown": "^3.15.3",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.1-alpha.262"
+  "version": "0.0.1-alpha.263"
 }

package/src/hooks/useCallControls.tsx

@@ -1,21 +1,17 @@
 import { SfuModels } from '@stream-io/video-client';
-import { useCall, useLocalParticipant } from '@stream-io/video-react-bindings';
-import { useCallback, useRef } from 'react';
+import { useLocalParticipant } from '@stream-io/video-react-bindings';
+import { useCallback } from 'react';
 import { useAppStateListener } from '../utils/hooks/useAppStateListener';
 import { useMediaStreamManagement } from '../providers/MediaStreamManagement';
 
 /**
- * A helper hook which exposes audio, video mute and camera facing mode and
+ * A helper hook which exposes audio, video publishing state and
  * their respective functions to toggle state
  *
  * @category Device Management
  */
 export const useCallControls = () => {
   const localParticipant = useLocalParticipant();
-  const call = useCall();
-  /** Refs to keep track of the current call and whether the user is online or not */
-  const callRef = useRef(call);
-  callRef.current = call;
 
   const {
     publishAudioStream,
@@ -30,36 +26,27 @@ export const useCallControls = () => {
   const isVideoPublished = localParticipant?.publishedTracks.includes(
     SfuModels.TrackType.VIDEO,
   );
-  /** Refs to keep track of whether the user has published the track before going offline  */
-  const isAudioPublishedRef = useRef(false);
-  const isVideoPublishedRef = useRef(false);
-  isAudioPublishedRef.current = !isAudioPublished;
-  isVideoPublishedRef.current = !isVideoPublished;
-
-  /** Refs to be used for useEffect that does the rejoining flow when coming back offline */
-  const publishAudioStreamRef = useRef(publishAudioStream);
-  const publishVideoStreamRef = useRef(publishVideoStream);
-  publishAudioStreamRef.current = publishAudioStream;
-  publishVideoStreamRef.current = publishVideoStream;
 
   /** Attempt to republish video stream when app comes back to foreground */
-  useAppStateListener(
-    isVideoPublishedRef.current ? publishVideoStream : undefined,
-  );
+  useAppStateListener(() => {
+    if (isVideoPublished) {
+      publishVideoStream();
+    }
+  }, undefined);
 
   const toggleVideoMuted = useCallback(async () => {
-    if (!isVideoPublished) {
-      publishVideoStream();
-    } else {
+    if (isVideoPublished) {
       stopPublishingVideo();
+    } else {
+      publishVideoStream();
     }
   }, [isVideoPublished, publishVideoStream, stopPublishingVideo]);
 
   const toggleAudioMuted = useCallback(async () => {
-    if (!isAudioPublished) {
-      publishAudioStream();
-    } else {
+    if (isAudioPublished) {
       stopPublishingAudio();
+    } else {
+      publishAudioStream();
     }
   }, [isAudioPublished, publishAudioStream, stopPublishingAudio]);