fix: extend null handling to like and subscriber counts

Allow videoLikeCount and subscriberCount to be null (VideoData,
ChannelData, YoutubeVideoInfo) since the YouTube API can omit these
fields too. Update ChannelInfo, VideoInfo, and VideoStats components
to accept nullable counts, and extract a toSafeNumber helper shared
by formatCount and formatExactCount.

Author: jothamteshome

backend/src/interfaces/VideoData.ts

@@ -1,15 +1,15 @@
 /** Interface for video information pulled from Youtube Data API v3 */
 export interface VideoData {
   videoDescription: string;
-  videoLikeCount: number;
+  videoLikeCount: number | null;
   videoPublishedAt: number | null;
   videoTitle: string;
   videoThumbnail: string;
   videoViewCount: number | null;
   channelIcon: string;
   channelTitle: string;
   channelUrl: string;
-  subscriberCount: number;
+  subscriberCount: number | null;
 };
 
 
@@ -18,5 +18,5 @@ export interface ChannelData {
   channelIcon: string,
   channelTitle: string,
   channelUrl: string,
-  subscriberCount: number
+  subscriberCount: number | null
 };

backend/src/routes/videoApiRoutes.ts

@@ -32,7 +32,7 @@ const getChannelData = async (channelId: string): Promise<ChannelData> => {
         channelIcon: item.snippet.thumbnails.default.url,
         channelTitle: item.snippet.title,
         channelUrl: `https://www.youtube.com/channel/${channelId}`,
-        subscriberCount: Number.parseInt(item.statistics.subscriberCount)
+        subscriberCount: item.statistics.subscriberCount != null ? Number.parseInt(item.statistics.subscriberCount) : null
     };
 
     return channelData;
@@ -51,7 +51,7 @@ const getVideoData = async (videoId: string): Promise<VideoData> => {
 
     const videoData: VideoData = {
         videoDescription: item.snippet.description,
-        videoLikeCount: Number.parseInt(item.statistics.likeCount),
+        videoLikeCount: item.statistics.likeCount != null ? Number.parseInt(item.statistics.likeCount) : null,
         videoPublishedAt: item.snippet.publishedAt ? Date.parse(item.snippet.publishedAt) : null,
         videoTitle: item.snippet.title,
         videoThumbnail: item.snippet.thumbnails.high.url,

frontend/src/components/youtube/ChannelInfo.tsx

@@ -7,7 +7,7 @@ import { formatCount } from "../../utils/formatVideoInfo";
  */
 interface ChannelTitleProps {
     channelTitle: string;
-    subscriberCount: number;
+    subscriberCount: number | null;
 }
 
 
@@ -18,15 +18,15 @@ interface ChannelInfoProps {
     channelIcon: string;
     channelTitle: string;
     channelUrl: string;
-    subscriberCount: number;
+    subscriberCount: number | null;
 }
 
 
 /**
  * Renders the channel's title and subscriber count.
  */
 function ChannelTitle({ channelTitle, subscriberCount }: ChannelTitleProps) {
-    const subscriberText = subscriberCount === 1 ? "subscriber" : "subscribers";
+    const subscriberText = (subscriberCount ?? 0) === 1 ? "subscriber" : "subscribers";
 
     return (
         <div className="flex flex-col ml-2">
@@ -44,7 +44,7 @@ export default function ChannelInfo({ channelIcon, channelTitle, channelUrl, sub
     return (
         <a className="flex items-center h-12" href={channelUrl}>
             <UserIcon src={channelIcon} />
-            <ChannelTitle channelTitle={channelTitle!} subscriberCount={subscriberCount!} />
+            <ChannelTitle channelTitle={channelTitle} subscriberCount={subscriberCount} />
         </a>
     );
 }

frontend/src/components/youtube/VideoDescription.tsx

@@ -38,11 +38,14 @@ function DescriptionStats({ videoPublishedAt, videoViewCount, descriptionExpande
     const viewsText = (videoViewCount ?? 0) === 1 ? "view" : "views";
 
     const expandedDateString: string = formatExactDate(videoPublishedAt);
-    const relativeDateString: string = formatYoutubeDate(videoPublishedAt);
+    const relativeDateString: string = descriptionExpanded ? "" : formatYoutubeDate(videoPublishedAt);
     const expandedViewCount: string = `${formatExactCount(videoViewCount)} ${viewsText}`;
 
-    const tooltipParts = descriptionExpanded ? [] : [expandedViewCount, expandedDateString].filter(Boolean);
-    const tooltipText = tooltipParts.length > 0 ? tooltipParts.join(" • ") : undefined;
+    const tooltipText = descriptionExpanded
+        ? undefined
+        : expandedDateString
+            ? `${expandedViewCount} • ${expandedDateString}`
+            : expandedViewCount;
 
     return (
         <div className="flex" title={tooltipText}>

frontend/src/components/youtube/VideoInfo.tsx

@@ -14,11 +14,11 @@ interface VideoTitleProps {
  */
 interface VideoInfoProps {
     videoTitle: string;
-    videoLikeCount: number;
+    videoLikeCount: number | null;
     channelIcon: string;
     channelTitle: string;
     channelUrl: string;
-    subscriberCount: number;
+    subscriberCount: number | null;
 }
 
 

frontend/src/components/youtube/VideoStats.tsx

@@ -6,19 +6,19 @@ import { formatCount } from "../../utils/formatVideoInfo";
  * Props for VideoLikes component.
  */
 interface VideoLikesProps {
-    videoLikeCount: number;
+    videoLikeCount: number | null;
 }
 
 
 /**
  * Props for VideoStats component.
  */
 interface VideoStatsProps {
-    videoLikeCount: number;
+    videoLikeCount: number | null;
     channelIcon: string;
     channelTitle: string;
     channelUrl: string;
-    subscriberCount: number;
+    subscriberCount: number | null;
 }
 
 

frontend/src/interfaces/YoutubeVideoInfo.ts

@@ -6,13 +6,13 @@ import type BaseVideoInfo from "./BaseVideoInfo";
  */
 export default interface YoutubeVideoInfo extends BaseVideoInfo {
     videoDescription: string;
-    videoLikeCount: number;
+    videoLikeCount: number | null;
     videoPublishedAt: number | null;
     videoTitle: string;
     videoThumbnail: string;
     videoViewCount: number | null;
     channelIcon: string;
     channelTitle: string;
     channelUrl: string;
-    subscriberCount: number;
+    subscriberCount: number | null;
 }

frontend/src/utils/formatVideoInfo.ts

@@ -1,6 +1,11 @@
-export function formatCount(n: number | null | undefined, precision: number): string {
+function toSafeNumber(n: number | null | undefined): number {
     const safeN = n ?? 0;
-    if (!Number.isFinite(safeN)) return "0";
+    return Number.isFinite(safeN) ? safeN : 0;
+}
+
+
+export function formatCount(n: number | null | undefined, precision: number): string {
+    const safeN = toSafeNumber(n);
 
     if (safeN >= 1_000_000_000) return `${(safeN / 1_000_000_000).toFixed(precision).replace(/\.0$/, "")}B`;
     if (safeN >= 1_000_000) return `${(safeN / 1_000_000).toFixed(precision).replace(/\.0$/, "")}M`;
@@ -10,8 +15,7 @@ export function formatCount(n: number | null | undefined, precision: number): st
 
 
 export function formatExactCount(n: number | null | undefined): string {
-    const safeN = n ?? 0;
-    return Number.isFinite(safeN) ? safeN.toLocaleString() : "0";
+    return toSafeNumber(n).toLocaleString();
 }