gistfile1.txt

"use client";

import { useEffect, useRef } from "react";
import { trackEvent, updateUserMXProfile } from "@/lib/mixpanel/mixpanel";

export interface VideoPlayedMetadata {
	video_type:
		| "show"
		| "live match"
		| "finished match"
		| "moments"
		| "movie"
		| "summary"
		| "episode"
		| "highlights"
		| "goals"
		| "analytics_studio";
	event_source: string;
	exclusive_video: boolean;
	source_title?: string;
	session_id: string;
	start_minute?: string;
	end_minute?: string;
	audio_settings?: "balanced" | "commentator" | "stadium";
	video_quality?: string;
	commentator_name?: string;
	advanced_mode?: "on" | "off";
	video_id: string;
	video_title: string;
	teams_names?: string;
	league_name?: string;
	show_name?: string;
	live: boolean;
	total_video_duration: string;
	subtitles?: "off" | "ar" | "en";
	muted: boolean;
	duration_watched?: string;
}

interface Props {
	isPlaying: boolean;
	currentTime: number;
	metadata: VideoPlayedMetadata;
}

function formatDuration(totalSeconds: number) {
	const minutes = Math.floor(totalSeconds / 60);
	const seconds = totalSeconds % 60;

	return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}

export const VideoPlayedTracker = ({ isPlaying, currentTime, metadata }: Props) => {
	const playStartTime = useRef<number | null>(null);
	const totalPlayedTimeAtStart = useRef(0);
	const elapsedSinceStart = useRef(0);
	const elapsedInVideo = useRef(0);
	const wasPlaying = useRef(false);

	useEffect(() => {
		if (isPlaying) {
			if (playStartTime.current === null) {
				playStartTime.current = Date.now();
				totalPlayedTimeAtStart.current = currentTime;
			}

			elapsedSinceStart.current = (Date.now() - playStartTime.current) / 1000;
			elapsedInVideo.current = currentTime - totalPlayedTimeAtStart.current;
			wasPlaying.current = true;
			return;
		}

		const justPaused = wasPlaying.current;

		wasPlaying.current = false;
		playStartTime.current = null;

		if (!justPaused) return;

		const durationWatched = Math.floor(
			Math.max(elapsedSinceStart.current, elapsedInVideo.current),
		);

		if (durationWatched >= 3) {
			trackEvent("video_played", {
				...metadata,
				duration_watched: formatDuration(durationWatched),
			});

			updateUserMXProfile({
				last_content_watched: metadata.video_title,
			});
		}

		elapsedSinceStart.current = 0;
		elapsedInVideo.current = 0;
		totalPlayedTimeAtStart.current = currentTime;
	}, [isPlaying, currentTime, metadata]);

	useEffect(() => {
		playStartTime.current = null;
		totalPlayedTimeAtStart.current = 0;
		elapsedSinceStart.current = 0;
		elapsedInVideo.current = 0;
		wasPlaying.current = false;
	}, [metadata.video_id]);

	return null;
};