feat: connect video, profile picture fill and socials fill events

src/components/login-modal/profile-form-view.tsx

@@ -24,7 +24,7 @@ import { notifyError, notifySuccess } from '@src/libs/notifications/internal-not
 import { SUCCESS } from '@src/libs/notifications/success';
 import { ERRORS } from '@src/libs/notifications/errors.ts';
 import {ProfileFormProps, ProfileFormValues} from "@src/components/login-modal/types.ts"
-import { useCreateUserMutation, useUpdateUserMutation } from '@src/graphql/generated/hooks.tsx';
+import { useCreateUserMutation, useLogEventMutation, useUpdateUserMutation } from '@src/graphql/generated/hooks.tsx';
 import { resolveSrc } from '@src/utils/image.ts';
 import { getIpfsUri } from '@src/utils/publication.ts';
 import { useAuth } from '@src/hooks/use-auth.ts';
@@ -51,6 +51,7 @@ export const ProfileFormView: React.FC<ProfileFormProps> = ({
   const [registrationLoading, setRegistrationLoading] = useState(false);
   const [createUser, { loading: createUserLoading, error: errorCreatingProfile }] = useCreateUserMutation();
   const [updateUser, { loading: updateUserLoading, error: errorUpdatingProfile }] = useUpdateUserMutation();
+  const [logEvent] = useLogEventMutation();
   const { session } = useAuth();
   const { refreshUser } = useAccountSession();
 
@@ -108,6 +109,39 @@ export const ProfileFormView: React.FC<ProfileFormProps> = ({
     }
   };
 
+  const buildPerkEvents = (
+    data: ProfileData,
+    profilePictureURI: string | null,
+    prev?: ProfileData | null,
+  ) => {
+    const jobs: Promise<unknown>[] = [];
+
+    const hadPictureBefore = !!prev?.profilePicture;
+    if (!hadPictureBefore && profilePictureURI) {
+      jobs.push(
+        logEvent({
+          variables: { input: { type: 'PROFILE_PICTURE_ADDED' } },
+        }),
+      );
+    }
+
+    Object.entries(data.socialLinks).forEach(([platform, url]) => {
+      const prevUrl = prev?.socialLinks?.[platform as keyof typeof data.socialLinks];
+      if (!prevUrl && url) {
+        jobs.push(
+          logEvent({
+            variables: {
+              input: { type: 'SOCIAL_LINK_ADDED', meta: { platform } },
+            },
+          }),
+        );
+      }
+    });
+
+    return jobs;
+  };
+
+
   const updateProfileMetadata = async (data: ProfileData) => {
     setRegistrationLoading(true);
 
@@ -126,12 +160,13 @@ export const ProfileFormView: React.FC<ProfileFormProps> = ({
 
       await updateUser({
         variables: {
-          input: {
-            ...metadata
-          },
+          input: { ...metadata },
         },
       });
 
+      const events = buildPerkEvents(data, profilePictureURI, initialValues ?? null);
+      await Promise.all(events);
+
       setRegistrationLoading(false);
       onSuccess();
     } catch (error) {
@@ -170,12 +205,15 @@ export const ProfileFormView: React.FC<ProfileFormProps> = ({
         await createUser({
           variables: {
             input: {
-              address: session?.address,
-              ...metadata
+              address: session.address,
+              ...metadata,
             },
           },
         });
 
+        const events = buildPerkEvents(data, profilePictureURI, null);
+        await Promise.all(events);
+
         setRegistrationLoading(false);
         notifySuccess(SUCCESS.PROFILE_CREATED_SUCCESSFULLY);
         setTimeout(refreshUser, 100)

src/components/video-player/video-player.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useEffect, memo } from 'react';
+import { FC, useRef, useEffect, memo, useState } from 'react';
 // @ts-expect-error No error in this context
 import { Hls, FetchLoader, XhrLoader } from 'hls.js/dist/hls.mjs';
 import { Typography, IconButton, Button } from '@mui/material';
@@ -21,20 +21,26 @@ import useGetSubtitles from '@src/hooks/protocol/use-get-subtitles.ts';
 import { useResponsive } from '@src/hooks/use-responsive';
 import Label from '../label';
 import {ErrorData} from "hls.js"
+import { useLogEventMutation } from '@src/graphql/generated/hooks.tsx';
+import { useAuth } from '@src/hooks/use-auth.ts';
 
 export interface VideoPlayerProps {
   src: string;
   cid: string;
   titleMovie: string;
   onBack?: () => void;
   showBack?: boolean;
+  postId: string;
 }
 
-export const VideoPlayer: FC<VideoPlayerProps> = ({ src, cid, titleMovie, onBack, showBack }) => {
+export const VideoPlayer: FC<VideoPlayerProps> = ({ src, cid, titleMovie, postId, onBack, showBack }) => {
   const mdUp = useResponsive('up', 'md');
   const player = useRef<MediaPlayerInstance>(null);
+  const [sent, setSent] = useState({ 25: false, 50: false, 75: false });
   const controlsVisible = useMediaState('controlsVisible', player);
   const { tracks, getSubtitles } = useGetSubtitles();
+  const [logEvent] = useLogEventMutation();
+  const { session } = useAuth();
 
   useEffect(() => {
     if (cid) getSubtitles(cid);
@@ -49,6 +55,53 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({ src, cid, titleMovie, onBack
     return () => document?.removeEventListener('keydown', handleKeyDown);
   }, []);
 
+  const emit = async (type: string, progress?: number) => {
+    console.log('emit event', type, progress);
+    if (!session?.authenticated) return;
+    try {
+      await logEvent({
+        variables: {
+          input: {
+            type,
+            targetId: postId,
+            targetType: 'POST',
+            progress,
+            meta: { cid },
+          },
+        },
+      });
+    } catch (e) {
+      console.error('logEvent error', e);
+    }
+  };
+
+  const handlePlay = () => emit('VIDEO_START');
+
+  const handleTimeUpdate = () => {
+    const media = player.current;
+    if (!media) return;
+
+    const { currentTime, duration } = media;
+    if (!duration) return;
+
+    const pct = (currentTime / duration) * 100;
+
+    if (!sent[25] && pct >= 25) {
+      emit('VIDEO_25', 25);
+      setSent(s => ({ ...s, 25: true }));
+    }
+    if (!sent[50] && pct >= 50) {
+      emit('VIDEO_50', 50);
+      setSent(s => ({ ...s, 50: true }));
+    }
+    if (!sent[75] && pct >= 75) {
+      emit('VIDEO_75', 75);
+      setSent(s => ({ ...s, 75: true }));
+    }
+  };
+
+  const handleEnded = () => emit('VIDEO_WATCH_FULL');
+
   // on provider (HLS) initialization
   const onProviderSetup = (provider: MediaProviderAdapter) => {
     if (isHLSProvider(provider)) {
@@ -139,6 +192,9 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({ src, cid, titleMovie, onBack
       src={{ src, type: 'application/x-mpegurl' }}
       onProviderChange={onProviderChange}
       onProviderSetup={onProviderSetup}
+      onPlay={handlePlay}
+      onEnded={handleEnded}
+      onTimeUpdate={handleTimeUpdate}
       viewType="video"
       streamType="on-demand"
       logLevel="warn"