@stream-io/video-react-sdk 1.0.12 → 1.0.13

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

@@ -0,0 +1,16 @@
+import { LivestreamLayoutProps } from '../../core';
+export type LivestreamPlayerProps = {
+    /**
+     * The call type. Usually `livestream`.
+     */
+    callType: string;
+    /**
+     * The call ID.
+     */
+    callId: string;
+    /**
+     * The props for the {@link LivestreamLayout} component.
+     */
+    layoutProps?: LivestreamLayoutProps;
+};
+export declare const LivestreamPlayer: (props: LivestreamPlayerProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/index.ts

@@ -6,6 +6,7 @@ export * from '@stream-io/video-react-bindings';
 export * from './src/core';
 
 export * from './src/components';
+export * from './src/wrappers';
 export * from './src/translations';
 export {
   useHorizontalScrollPosition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

package/src/wrappers/LivestreamPlayer/LivestreamPlayer.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { Call } from '@stream-io/video-client';
+import { useStreamVideoClient } from '@stream-io/video-react-bindings';
+import {
+  LivestreamLayout,
+  LivestreamLayoutProps,
+  StreamCall,
+} from '../../core';
+
+export type LivestreamPlayerProps = {
+  /**
+   * The call type. Usually `livestream`.
+   */
+  callType: string;
+  /**
+   * The call ID.
+   */
+  callId: string;
+  /**
+   * The props for the {@link LivestreamLayout} component.
+   */
+  layoutProps?: LivestreamLayoutProps;
+};
+
+export const LivestreamPlayer = (props: LivestreamPlayerProps) => {
+  const { callType, callId, layoutProps } = props;
+  const client = useStreamVideoClient();
+  const [call, setCall] = useState<Call>();
+  useEffect(() => {
+    if (!client) return;
+    const myCall = client.call(callType, callId);
+    setCall(myCall);
+    myCall.join().catch((e) => {
+      console.error('Failed to join call', e);
+    });
+    return () => {
+      myCall.leave().catch((e) => {
+        console.error('Failed to leave call', e);
+      });
+      setCall(undefined);
+    };
+  }, [callId, callType, client]);
+
+  return (
+    <StreamCall call={call}>
+      <LivestreamLayout {...layoutProps} />
+    </StreamCall>
+  );
+};

package/src/wrappers/LivestreamPlayer/index.ts

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

package/src/wrappers/index.ts

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