@stream-io/video-react-bindings 0.0.1-alpha.39 → 0.0.1-alpha.41

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.1-alpha.41](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.0.1-alpha.40...@stream-io/video-react-bindings-0.0.1-alpha.41) (2023-05-17)
+
+
+### Bug Fixes
+
+* reorganize call control buttons ([#514](https://github.com/GetStream/stream-video-js/issues/514)) ([ed1df9c](https://github.com/GetStream/stream-video-js/commit/ed1df9c230d20c2f08d0d97e2eaa962d22c7fc36))
+
+
+
+## [0.0.1-alpha.40](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.0.1-alpha.39...@stream-io/video-react-bindings-0.0.1-alpha.40) (2023-05-17)
+
+
+### Features
+
+* **react-native:** add reactions support ([#440](https://github.com/GetStream/stream-video-js/issues/440)) ([353a9c9](https://github.com/GetStream/stream-video-js/commit/353a9c99d8b954267191f44168cb21a6490a3eeb))
+
+
+
 ## [0.0.1-alpha.39](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.0.1-alpha.38...@stream-io/video-react-bindings-0.0.1-alpha.39) (2023-05-17)
 
 

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './src/contexts';
 export * from './src/hooks';
+export * from './src/wrappers';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './src/contexts';
 export * from './src/hooks';
+export * from './src/wrappers';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"permissions.js","sourceRoot":"","sources":["../../../src/hooks/permissions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,GAAG,WAA4B,EAAE,EAAE;IACnE,MAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;IACnC,IAAI,CAAC,QAAQ;QAAE,OAAO,KAAK,CAAC;IAC5B,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC,UAAU,EAAE,EAAE,CACtC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAC/C,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;IACnC,OAAO,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,gBAAgB,KAAI,EAAE,CAAC;AAC1C,CAAC,CAAC"}
+{"version":3,"file":"permissions.js","sourceRoot":"","sources":["../../../src/hooks/permissions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,GAAG,WAA4B,EAAE,EAAE;IACnE,MAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;IACnC,IAAI,CAAC,QAAQ;QAAE,OAAO,KAAK,CAAC;IAC5B,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC,UAAU,EAAE,EAAE,CACtC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAC/C,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAoB,EAAE;IACtD,MAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;IACnC,OAAO,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,gBAAgB,KAAI,EAAE,CAAC;AAC1C,CAAC,CAAC"}

package/dist/src/wrappers/Restricted.d.ts

@@ -0,0 +1,19 @@
+import { OwnCapability } from '@stream-io/video-client';
+import { PropsWithChildren } from 'react';
+type RestrictedProps = PropsWithChildren<{
+    /**
+     * OwnCapabilities of the participant - grants they have available
+     */
+    availableGrants?: OwnCapability[];
+    /**
+     * Required grants for the component to be able to render supplied children elements
+     */
+    requiredGrants: OwnCapability[];
+    /**
+     * Require all grants specified in `requiredGrants` to be available in the `availableGrants`,
+     * component by default requires only one grant to appear in both arrays to render its children
+     */
+    requireAll?: boolean;
+}>;
+export declare const Restricted: ({ availableGrants: availableGrantsFromProps, requiredGrants, requireAll, children, }: RestrictedProps) => JSX.Element | null;
+export {};

package/dist/src/wrappers/Restricted.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useCall } from '../contexts';
+import { useOwnCapabilities } from '../hooks';
+export const Restricted = ({ availableGrants: availableGrantsFromProps, requiredGrants, requireAll = true, children, }) => {
+    const call = useCall();
+    const ownCapabilities = useOwnCapabilities();
+    const availableGrants = availableGrantsFromProps !== null && availableGrantsFromProps !== void 0 ? availableGrantsFromProps : ownCapabilities;
+    const hasPermissions = requiredGrants[requireAll ? 'every' : 'some']((capability) => availableGrants.includes(capability));
+    const canRequest = requiredGrants.some((capability) => !!call && call.permissionsContext.canRequest(capability));
+    if (hasPermissions || canRequest)
+        return _jsx(_Fragment, { children: children });
+    return null;
+};
+//# sourceMappingURL=Restricted.js.map

package/dist/src/wrappers/Restricted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Restricted.js","sourceRoot":"","sources":["../../../src/wrappers/Restricted.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAkB9C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,eAAe,EAAE,wBAAwB,EACzC,cAAc,EACd,UAAU,GAAG,IAAI,EACjB,QAAQ,GACQ,EAAE,EAAE;IACpB,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;IAC7C,MAAM,eAAe,GAAG,wBAAwB,aAAxB,wBAAwB,cAAxB,wBAAwB,GAAI,eAAe,CAAC;IACpE,MAAM,cAAc,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAClE,CAAC,UAAU,EAAE,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC,CACrD,CAAC;IACF,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CACpC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,UAAU,CAAC,CACzE,CAAC;IACF,IAAI,cAAc,IAAI,UAAU;QAAE,OAAO,4BAAG,QAAQ,GAAI,CAAC;IACzD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/dist/src/wrappers/index.d.ts

@@ -0,0 +1 @@
+export * from './Restricted';

package/dist/src/wrappers/index.js

@@ -0,0 +1,2 @@
+export * from './Restricted';
+//# sourceMappingURL=index.js.map

package/dist/src/wrappers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wrappers/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/index.ts

@@ -1,2 +1,3 @@
 export * from './src/contexts';
 export * from './src/hooks';
+export * from './src/wrappers';

package/package.json

@@ -23,13 +23,13 @@
     "rxjs": "~7.8.1"
   },
   "peerDependencies": {
-    "@stream-io/i18n": "^0.0.1-alpha.28",
-    "@stream-io/video-client": "^0.0.1-alpha.152",
+    "@stream-io/i18n": "^0.0.1-alpha.30",
+    "@stream-io/video-client": "^0.0.1-alpha.154",
     "react": ">=17.0.0"
   },
   "devDependencies": {
-    "@stream-io/i18n": "^0.0.1-alpha.28",
-    "@stream-io/video-client": "^0.0.1-alpha.152",
+    "@stream-io/i18n": "^0.0.1-alpha.30",
+    "@stream-io/video-client": "^0.0.1-alpha.154",
     "@types/react": "^18.0.26",
     "@types/rimraf": "^3.0.2",
     "react": "^18.2.0",
@@ -39,5 +39,5 @@
     "typedoc-plugin-markdown": "^3.15.3",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.1-alpha.39"
+  "version": "0.0.1-alpha.41"
 }

package/src/hooks/permissions.ts

@@ -21,7 +21,7 @@ export const useHasPermissions = (...permissions: OwnCapability[]) => {
  *
  * @category Call State
  */
-export const useOwnCapabilities = () => {
+export const useOwnCapabilities = (): OwnCapability[] => {
   const metadata = useCallMetadata();
   return metadata?.own_capabilities || [];
 };

package/src/wrappers/Restricted.tsx

@@ -0,0 +1,40 @@
+import { OwnCapability } from '@stream-io/video-client';
+
+import { PropsWithChildren } from 'react';
+import { useCall } from '../contexts';
+import { useOwnCapabilities } from '../hooks';
+
+type RestrictedProps = PropsWithChildren<{
+  /**
+   * OwnCapabilities of the participant - grants they have available
+   */
+  availableGrants?: OwnCapability[];
+  /**
+   * Required grants for the component to be able to render supplied children elements
+   */
+  requiredGrants: OwnCapability[];
+  /**
+   * Require all grants specified in `requiredGrants` to be available in the `availableGrants`,
+   * component by default requires only one grant to appear in both arrays to render its children
+   */
+  requireAll?: boolean;
+}>;
+
+export const Restricted = ({
+  availableGrants: availableGrantsFromProps,
+  requiredGrants,
+  requireAll = true,
+  children,
+}: RestrictedProps) => {
+  const call = useCall();
+  const ownCapabilities = useOwnCapabilities();
+  const availableGrants = availableGrantsFromProps ?? ownCapabilities;
+  const hasPermissions = requiredGrants[requireAll ? 'every' : 'some'](
+    (capability) => availableGrants.includes(capability),
+  );
+  const canRequest = requiredGrants.some(
+    (capability) => !!call && call.permissionsContext.canRequest(capability),
+  );
+  if (hasPermissions || canRequest) return <>{children}</>;
+  return null;
+};

package/src/wrappers/index.ts

@@ -0,0 +1 @@
+export * from './Restricted';