Initial commit

examples/vite/src/App.tsx

@@ -1,4 +1,9 @@
-import { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
+import {
+  ChannelFilters,
+  ChannelOptions,
+  ChannelSort,
+  LiveLocationManagerConstructorParameters,
+} from 'stream-chat';
 import {
   AIStateIndicator,
   Channel,
@@ -13,6 +18,9 @@ import {
   useCreateChatClient,
   ThreadList,
   ChatView,
+  useChatContext,
+  useLiveLocationSharingManager,
+  Attachment,
 } from 'stream-chat-react';
 import 'stream-chat-react/css/v2/index.css';
 
@@ -64,13 +72,67 @@ type StreamChatGenerics = {
   userType: LocalUserType;
 };
 
+const ShareLiveLocation = () => {
+  const { channel } = useChatContext();
+
+  return (
+    <button
+      onClick={() => {
+        console.log('trying to fetch location');
+        navigator.geolocation.getCurrentPosition(
+          (position) => {
+            const { latitude, longitude } = position.coords;
+            console.log('got location ', position);
+            channel?.startLiveLocationSharing({
+              latitude,
+              longitude,
+              end_time: new Date(Date.now() + 1 * 1000 * 3600 * 24).toISOString(),
+            });
+          },
+          console.warn,
+          { timeout: 200 },
+        );
+      }}
+    >
+      location
+    </button>
+  );
+};
+
+const watchLocationNormal: LiveLocationManagerConstructorParameters['watchLocation'] = (
+  watcher,
+) => {
+  const watch = navigator.geolocation.watchPosition((position) => {
+    watcher({ latitude: position.coords.latitude, longitude: position.coords.longitude });
+  });
+
+  return () => navigator.geolocation.clearWatch(watch);
+};
+
+const watchLocationTimed: LiveLocationManagerConstructorParameters['watchLocation'] = (watcher) => {
+  const timer = setInterval(() => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      watcher({ latitude: position.coords.latitude, longitude: position.coords.longitude });
+    });
+  }, 5000);
+
+  return () => clearInterval(timer);
+};
+
 const App = () => {
   const chatClient = useCreateChatClient<StreamChatGenerics>({
     apiKey,
     tokenOrProvider: userToken,
     userData: { id: userId },
   });
 
+  const manager = useLiveLocationSharingManager({
+    client: chatClient ?? undefined,
+    watchLocation: watchLocationTimed,
+  });
+
+  // const s = useStateStore(manager?.state)
+
   if (!chatClient) return <>Loading...</>;
 
   return (
@@ -86,12 +148,27 @@ const App = () => {
             showChannelSearch
             additionalChannelSearchProps={{ searchForChannels: true }}
           />
-          <Channel>
+          <Channel
+            Attachment={(props) => {
+              const [attachment] = props.attachments ?? [];
+
+              if (attachment?.type === 'live_location') {
+                return (
+                  <div style={{ padding: 25 }}>
+                    lat: {attachment.latitude}, lng: {attachment.longitude}
+                  </div>
+                );
+              }
+
+              return <Attachment {...props} />;
+            }}
+          >
             <Window>
               <ChannelHeader Avatar={ChannelAvatar} />
               <MessageList returnAllReadData />
               <AIStateIndicator />
               <MessageInput focus />
+              <ShareLiveLocation />
             </Window>
             <Thread virtualized />
           </Channel>

src/components/Attachment/Attachment.tsx

@@ -41,6 +41,7 @@ const CONTAINER_MAP = {
   media: MediaContainer,
   unsupported: UnsupportedAttachmentContainer,
   voiceRecording: VoiceRecordingContainer,
+  // geolocation: () => <div></div>,
 } as const;
 
 export const ATTACHMENT_GROUPS_ORDER = [

src/components/Attachment/hooks/useLiveLocationSharingManager.ts

@@ -0,0 +1,35 @@
+import { LiveLocationManager } from 'stream-chat';
+import type { LiveLocationManagerConstructorParameters } from 'stream-chat';
+import { useEffect, useMemo } from 'react';
+
+type PartialKeys<T, K extends keyof T> = {
+  [L in keyof T]: L extends K ? T[L] | undefined : T[L];
+};
+
+export const useLiveLocationSharingManager = ({
+  client,
+  retrieveAndDeserialize,
+  serializeAndStore,
+  watchLocation,
+}: PartialKeys<LiveLocationManagerConstructorParameters, 'client'>) => {
+  const manager = useMemo(() => {
+    if (!client) return null;
+
+    return new LiveLocationManager({
+      client,
+      retrieveAndDeserialize,
+      serializeAndStore,
+      watchLocation,
+    });
+  }, [client, retrieveAndDeserialize, serializeAndStore, watchLocation]);
+
+  useEffect(() => {
+    if (!manager) return;
+
+    manager.registerSubscriptions();
+
+    return () => manager.unregisterSubscriptions();
+  }, [manager]);
+
+  return manager;
+};

src/components/Attachment/index.ts

@@ -8,3 +8,4 @@ export * from './components';
 export * from './UnsupportedAttachment';
 export * from './FileAttachment';
 export * from './utils';
+export * from './hooks/useLiveLocationSharingManager';