Add useStartVideo hook (#714)

.changeset/early-hats-tell.md

@@ -0,0 +1,7 @@
+---
+"@livekit/components-core": patch
+"@livekit/components-react": patch
+
+---
+
+Add useStartVideo hook + update livekit client

docs/storybook/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@livekit/components-react": "workspace:*",
     "@livekit/components-styles": "workspace:*",
-    "livekit-client": "^1.12.0",
+    "livekit-client": "^1.15.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/nextjs/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@livekit/components-react": "workspace:*",
     "@livekit/components-styles": "workspace:*",
-    "livekit-client": "^1.12.0",
+    "livekit-client": "^1.15.1",
     "livekit-server-sdk": "^1.0.3",
     "next": "^12.2.4",
     "react": "^18.2.0",

packages/core/package.json

@@ -41,7 +41,7 @@
     "rxjs": "^7.8.0"
   },
   "peerDependencies": {
-    "livekit-client": "^1.12.0",
+    "livekit-client": "^1.15.1",
     "tslib": "^2.6.2"
   },
   "devDependencies": {

packages/core/src/components/startVideo.ts

@@ -0,0 +1,13 @@
+import type { Room } from 'livekit-client';
+import { log } from '../logger';
+import { roomVideoPlaybackAllowedObservable } from '../observables/room';
+import { prefixClass } from '../styles-interface';
+
+export function setupStartVideo() {
+  const handleStartVideoPlayback = async (room: Room) => {
+    log.info('Start Video for room: ', room);
+    await room.startAudio();
+  };
+  const className: string = prefixClass('start-audio-button');
+  return { className, roomVideoPlaybackAllowedObservable, handleStartVideoPlayback };
+}

packages/core/src/index.ts

@@ -16,6 +16,7 @@ export * from './components/mediaTrack';
 export * from './components/participantTile';
 export * from './components/chat';
 export * from './components/startAudio';
+export * from './components/startVideo';
 export * from './components/chatToggle';
 export * from './components/focusToggle';
 export * from './components/clearPinButton';

packages/core/src/observables/room.ts

@@ -225,6 +225,15 @@ export function roomAudioPlaybackAllowedObservable(room: Room) {
   return observable;
 }
 
+export function roomVideoPlaybackAllowedObservable(room: Room) {
+  const observable = observeRoomEvents(room, RoomEvent.VideoPlaybackStatusChanged).pipe(
+    map((room) => {
+      return { canPlayVideo: room.canPlaybackVideo };
+    }),
+  );
+  return observable;
+}
+
 export function createActiveDeviceObservable(room: Room, kind: MediaDeviceKind) {
   return roomEventSelector(room, RoomEvent.ActiveDeviceChanged).pipe(
     filter(([kindOfDevice]) => kindOfDevice === kind),

packages/react/package.json

@@ -53,7 +53,7 @@
     "usehooks-ts": "^2.9.1"
   },
   "peerDependencies": {
-    "livekit-client": "^1.12.0",
+    "livekit-client": "^1.15.1",
     "react": ">=18",
     "react-dom": ">=18",
     "tslib": "^2.6.2"

packages/react/src/hooks/useStartVideo.ts

@@ -0,0 +1,49 @@
+import { setupStartVideo } from '@livekit/components-core';
+import type { Room } from 'livekit-client';
+import * as React from 'react';
+import { useEnsureRoom } from '../context';
+import { mergeProps } from '../mergeProps';
+import { useObservableState } from './internal';
+
+/** @alpha */
+export interface UseStartVideoProps {
+  room?: Room;
+  props: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+/**
+ * In some browsers to start video playback in low power mode, the user must perform a user-initiated event such as clicking a button.
+ * The `useStartVideo` hook returns an object with a boolean `canPlayVideo` flag
+ * that indicates whether video playback is allowed in the current context,
+ * as well as a `startVideo` function that can be called in a button `onClick` callback to start video playback in the current context.
+ *
+ * @alpha
+ */
+export function useStartVideo({ room, props }: UseStartVideoProps) {
+  const roomEnsured = useEnsureRoom(room);
+  const { className, roomVideoPlaybackAllowedObservable, handleStartVideoPlayback } = React.useMemo(
+    () => setupStartVideo(),
+    [],
+  );
+  const observable = React.useMemo(
+    () => roomVideoPlaybackAllowedObservable(roomEnsured),
+    [roomEnsured, roomVideoPlaybackAllowedObservable],
+  );
+  const { canPlayVideo } = useObservableState(observable, {
+    canPlayVideo: roomEnsured.canPlaybackVideo,
+  });
+
+  const mergedProps = React.useMemo(
+    () =>
+      mergeProps(props, {
+        className,
+        onClick: () => {
+          handleStartVideoPlayback(roomEnsured);
+        },
+        style: { display: canPlayVideo ? 'none' : 'block' },
+      }),
+    [props, className, canPlayVideo, handleStartVideoPlayback, roomEnsured],
+  );
+
+  return { mergedProps, canPlayVideo };
+}