The Video Details View provides a comprehensive analysis of a single YouTube video. It displays the video player, core statistics, top comments, and integrates an AI-powered analysis module to generate strategic insights. This view is typically accessed by selecting a video from the Channel Analyzer or Video Search pages.

The view is composed of several nested components that handle data display, user interaction, and communication with the backend API to fetch comments and perform AI analysis.

Sources: apps/web/src/features/youtube/views/video-detail.view.tsx, apps/web/src/features/youtube/components/video-detail.component.tsx, apps/web/src/features/search/views/video-search.view.tsx:40-42, apps/web/src/features/youtube/views/channel-analyzer.view.tsx:49-51

Architecture

The Video Details feature follows a component-based architecture on the frontend, with a clear separation of concerns. The main view acts as a wrapper that receives video data via router state and passes it down to presentation components.

Component Structure

The following diagram illustrates the hierarchy of the main React components involved in rendering the Video Details page.

Generating architecture diagram...

This diagram shows that VideoDetailView is the entry point, which renders the main VideoDetail component. VideoDetail then composes the UI using smaller components for stats and comments, and crucially, embeds the VideoAnalyzer for all AI-related functionality.

Sources: apps/web/src/features/youtube/views/video-detail.view.tsx:18, apps/web/src/features/youtube/components/video-detail.component.tsx:70,187,225,258

Data Flow

The data flow for the Video Details View involves initial data passing via React Router's state, followed by asynchronous requests to the tRPC backend for comments and AI analysis.

Initial Load and Comment Fetching

When a user navigates to the video detail page, the YouTubeVideo object is passed through the router's location state. The VideoDetail component then uses the video's ID to fetch the associated comments.

Generating architecture diagram...

Sources: apps/web/src/features/youtube/views/video-detail.view.tsx:10-12, apps/web/src/features/youtube/components/video-detail.component.tsx:34-45, apps/api/src/features/youtube/youtube.router.ts:33-37, apps/api/src/features/youtube/youtube.service.ts:187-194

AI Analysis Flow

The VideoAnalyzer component allows the user to initiate an AI-powered analysis of the video. This triggers a mutation to the backend, which in turn calls the Google Gemini AI API.

Generating architecture diagram...

Sources: apps/web/src/features/ai/components/video-analyzer.component.tsx:75-81, apps/api/src/features/ai/ai.router.ts:18-26, apps/api/src/features/ai/ai.service.ts:16-19, 50-55

Core Components

`VideoDetailView`

The top-level view component responsible for routing logic.

Purpose: Retrieves the YouTubeVideo object from the router's location state.
Logic: If the video object is not present, it displays a "Video not found" message. Otherwise, it renders the VideoDetail component, passing the video data and a handleBack function.
File: apps/web/src/features/youtube/views/video-detail.view.tsx

Sources: apps/web/src/features/youtube/views/video-detail.view.tsx:10-25

`VideoDetail`

The main layout component for the view.

Purpose: Displays all primary information about the video, including the embedded player, stats, description, and comments. It also orchestrates the fetching of comments.
State Management: Manages the state for comments, loadingComments, and commentsError.
Data Fetching: Uses a useEffect hook to call the trpcClient.youtube.getComments query upon component mount.
Layout: Uses a two-column grid to separate the video player/info from the comments list. Below this grid, it renders the VideoAnalyzer component.
File: apps/web/src/features/youtube/components/video-detail.component.tsx

Sources: apps/web/src/features/youtube/components/video-detail.component.tsx:29-32, 34-45, 72

`VideoAnalyzer`

An AI-powered component for analyzing the video's viral potential.

Purpose: Provides an interface to generate a "Viral Analysis Report" and interact with a "Strategy Assistant" chat bot.
State Management: Manages loading and error states for the analysis, the analysis result itself (analysis), and the full state for the chat interface (chatInput, chatMessages, chatLoading).
Persistence: Caches the generated analysis in localStorage using the video ID as a key (video_analysis_{video.id}) to avoid redundant API calls.
Functionality:
1. Analysis: The handleAnalyze function calls the trpcClient.ai.analyze mutation.
2. Chat: The handleSendMessage function calls the trpcClient.ai.chat mutation, sending the current chat history to provide context to the AI.
File: apps/web/src/features/ai/components/video-analyzer.component.tsx

Sources: apps/web/src/features/ai/components/video-analyzer.component.tsx:43, 51-58, 75-81, 101-115

Backend API (tRPC)

The frontend components communicate with the backend via tRPC procedures.

Endpoints

Procedure	Type	Description	Source File
`youtube.getComments`	Query	Fetches the top 20 comments for a given video ID.	`apps/api/src/features/youtube/youtube.router.ts:33-37`
`ai.analyze`	Mutation	Generates a viral analysis report for a video using Gemini AI.	`apps/api/src/features/ai/ai.router.ts:18-26`
`ai.chat`	Mutation	Handles conversational follow-ups about the video analysis.	`apps/api/src/features/ai/ai.router.ts:32-41`

AI Service (`ai.service.ts`)

The AI service contains the core logic for interacting with the Google Gemini AI.

analyzeVideo:
- Constructs a detailed prompt for the AI, including the video URL, title, description, and a summary of top comments.
- Instructs the AI to use Google Search for grounding to find the video's content or transcript.
- Specifies a strict JSON output format for the analysis.
- Extracts grounding sources (URLs used by the AI) from the response metadata.
chatAboutVideo:
- Uses Gemini's chat functionality (ai.chats.create).
- Provides a system instruction to the AI to act as a helpful assistant, giving it context about the video being discussed.

Sources: apps/api/src/features/ai/ai.service.ts:22-48, 77-83, 131-143

Data Models

The feature relies on shared types defined in the @repo/types package.

`YouTubeVideo`

This diagram shows the structure of the YouTubeVideo type.

Generating architecture diagram...

Sources: packages/types/src/youtube/youtube-video.type.ts:3-14

`ViralAnalysisResult`

This is the shape of the JSON object returned by the AI analysis.

Generating architecture diagram...

Sources: apps/api/src/features/ai/ai.service.ts:41-47, 85-99

Conclusion

The Video Details View is a critical feature that transforms raw video data into actionable intelligence. It effectively combines a standard video information display with a powerful, context-aware AI analysis suite. The architecture cleanly separates concerns between data fetching (tRPC services), state management (React components), and presentation, making it a robust and extensible part of the application.

Resources

AI code review
Bug Bench
AI coding statistics
Coding standards
Agents
Wikis

View on GitHub

Back to directory

Repository

Monsoft-Solutions/adfluens-app

Overview

Home Getting Started Environment Variables

System Architecture

Monorepo Architecture Frontend Architecture Backend Architecture Full-Stack Data Flow

Core Features

User Authentication Video Search AI-Powered Video Analysis Channel Analyzer Video Details View

Data Management

Database Schema ORM and Migrations (Drizzle)

Frontend (apps/web)

Client State Management Theming

Frontend Components

Shared UI Library (@repo/ui)Layout Components Protected Routes

Backend (apps/api)

tRPC API Overview YouTube API Router AI API Router Server-Side Authentication (@repo/auth)

Integrations

YouTube Data API Integration Google Gemini API Integration

Developer Guides

Shared Types (@repo/types)Linting and Code Style Adding a New Feature

Deployment

Building for Production Deployment Guide

Video Details View

Relevant source files

The following files were used as context for generating this wiki page:

apps/web/src/features/youtube/views/video-detail.view.tsx
apps/web/src/features/youtube/components/video-detail.component.tsx
apps/web/src/features/ai/components/video-analyzer.component.tsx
apps/api/src/features/youtube/youtube.router.ts
apps/api/src/features/youtube/youtube.service.ts
apps/api/src/features/ai/ai.router.ts
apps/api/src/features/ai/ai.service.ts
packages/types/src/youtube/youtube-video.type.ts

The view is composed of several nested components that handle data display, user interaction, and communication with the backend API to fetch comments and perform AI analysis.

Architecture

Component Structure

The following diagram illustrates the hierarchy of the main React components involved in rendering the Video Details page.

Generating architecture diagram...

Sources: apps/web/src/features/youtube/views/video-detail.view.tsx:18, apps/web/src/features/youtube/components/video-detail.component.tsx:70,187,225,258

Data Flow

The data flow for the Video Details View involves initial data passing via React Router's state, followed by asynchronous requests to the tRPC backend for comments and AI analysis.

Initial Load and Comment Fetching

Generating architecture diagram...

AI Analysis Flow

The VideoAnalyzer component allows the user to initiate an AI-powered analysis of the video. This triggers a mutation to the backend, which in turn calls the Google Gemini AI API.

Generating architecture diagram...

Sources: apps/web/src/features/ai/components/video-analyzer.component.tsx:75-81, apps/api/src/features/ai/ai.router.ts:18-26, apps/api/src/features/ai/ai.service.ts:16-19, 50-55

Core Components

`VideoDetailView`

The top-level view component responsible for routing logic.

Purpose: Retrieves the YouTubeVideo object from the router's location state.
Logic: If the video object is not present, it displays a "Video not found" message. Otherwise, it renders the VideoDetail component, passing the video data and a handleBack function.
File: apps/web/src/features/youtube/views/video-detail.view.tsx

Sources: apps/web/src/features/youtube/views/video-detail.view.tsx:10-25

`VideoDetail`

The main layout component for the view.

Purpose: Displays all primary information about the video, including the embedded player, stats, description, and comments. It also orchestrates the fetching of comments.
State Management: Manages the state for comments, loadingComments, and commentsError.
Data Fetching: Uses a useEffect hook to call the trpcClient.youtube.getComments query upon component mount.
Layout: Uses a two-column grid to separate the video player/info from the comments list. Below this grid, it renders the VideoAnalyzer component.
File: apps/web/src/features/youtube/components/video-detail.component.tsx

Sources: apps/web/src/features/youtube/components/video-detail.component.tsx:29-32, 34-45, 72

`VideoAnalyzer`

An AI-powered component for analyzing the video's viral potential.

Purpose: Provides an interface to generate a "Viral Analysis Report" and interact with a "Strategy Assistant" chat bot.
State Management: Manages loading and error states for the analysis, the analysis result itself (analysis), and the full state for the chat interface (chatInput, chatMessages, chatLoading).
Persistence: Caches the generated analysis in localStorage using the video ID as a key (video_analysis_{video.id}) to avoid redundant API calls.
Functionality:
1. Analysis: The handleAnalyze function calls the trpcClient.ai.analyze mutation.
2. Chat: The handleSendMessage function calls the trpcClient.ai.chat mutation, sending the current chat history to provide context to the AI.
File: apps/web/src/features/ai/components/video-analyzer.component.tsx

Sources: apps/web/src/features/ai/components/video-analyzer.component.tsx:43, 51-58, 75-81, 101-115

Backend API (tRPC)

The frontend components communicate with the backend via tRPC procedures.

Endpoints

Procedure	Type	Description	Source File
`youtube.getComments`	Query	Fetches the top 20 comments for a given video ID.	`apps/api/src/features/youtube/youtube.router.ts:33-37`
`ai.analyze`	Mutation	Generates a viral analysis report for a video using Gemini AI.	`apps/api/src/features/ai/ai.router.ts:18-26`
`ai.chat`	Mutation	Handles conversational follow-ups about the video analysis.	`apps/api/src/features/ai/ai.router.ts:32-41`

AI Service (`ai.service.ts`)

The AI service contains the core logic for interacting with the Google Gemini AI.

analyzeVideo:
- Constructs a detailed prompt for the AI, including the video URL, title, description, and a summary of top comments.
- Instructs the AI to use Google Search for grounding to find the video's content or transcript.
- Specifies a strict JSON output format for the analysis.
- Extracts grounding sources (URLs used by the AI) from the response metadata.
chatAboutVideo:
- Uses Gemini's chat functionality (ai.chats.create).
- Provides a system instruction to the AI to act as a helpful assistant, giving it context about the video being discussed.

Sources: apps/api/src/features/ai/ai.service.ts:22-48, 77-83, 131-143

Data Models

The feature relies on shared types defined in the @repo/types package.

`YouTubeVideo`

This diagram shows the structure of the YouTubeVideo type.

Generating architecture diagram...

Sources: packages/types/src/youtube/youtube-video.type.ts:3-14

`ViralAnalysisResult`

This is the shape of the JSON object returned by the AI analysis.

Generating architecture diagram...

Sources: apps/api/src/features/ai/ai.service.ts:41-47, 85-99

Conclusion

Resources

AI code review
Bug Bench
AI coding statistics
Coding standards
Agents
Wikis

View on GitHub

Video Details View

Architecture

Component Structure

Data Flow

Initial Load and Comment Fetching

AI Analysis Flow

Core Components

VideoDetailView

VideoDetail

VideoAnalyzer

Backend API (tRPC)

Endpoints

AI Service (ai.service.ts)

Data Models

YouTubeVideo

ViralAnalysisResult

Conclusion

Video Details View

Architecture

Component Structure

Data Flow

Initial Load and Comment Fetching

AI Analysis Flow

Core Components

VideoDetailView

VideoDetail

VideoAnalyzer

Backend API (tRPC)

Endpoints

AI Service (ai.service.ts)

Data Models

YouTubeVideo

ViralAnalysisResult

Conclusion

`VideoDetailView`

`VideoDetail`

`VideoAnalyzer`

AI Service (`ai.service.ts`)

`YouTubeVideo`

`ViralAnalysisResult`

`VideoDetailView`

`VideoDetail`

`VideoAnalyzer`

AI Service (`ai.service.ts`)

`YouTubeVideo`

`ViralAnalysisResult`