comments uwu

src/api/platforms/invid/invidious.ts

@@ -3,7 +3,8 @@ import { APIProvider } from "../../types/api";
 import { InvidiousInstance } from "../../types/instances";
 import { Renderer, SearchSuggestions, Thumbnail, VideoData } from "../../types/video";
 import { VideoFormat } from "../../types/format";
-import { InvidiousRenderer, InvidiousVideo, InvidiousVideoData } from "./types";
+import { InvidiousCommentsResponse, InvidiousRenderer, InvidiousVideo, InvidiousVideoData } from "./types";
+import { Comment } from "../../types/comment";
 
 export class InvidiousAPIProvider implements APIProvider {
     instance: InvidiousInstance;
@@ -21,7 +22,7 @@ export class InvidiousAPIProvider implements APIProvider {
         let url = new URL(this.instance.url + "/api/v1/" + path);
 
         for(let [k,v] of Object.entries(opts?.query || {}))
-            url.searchParams.set(k, v);
+            if(v) url.searchParams.set(k, v);
 
         let res = await fetch(url, {
             signal: opts?.signal,
@@ -157,4 +158,28 @@ export class InvidiousAPIProvider implements APIProvider {
             ],
         } as VideoData;
     };
+
+    async getComments(id: string, key?: string) {
+        let data: InvidiousCommentsResponse = await this.request(`comments/${id}`, { query: { continuation: key } });
+
+        return {
+            key: data.continuation,
+            results: data.comments.map(c => ({
+                content: c.contentHtml,
+                edited: c.isEdited,
+                pinned: c.isPinned,
+                hearted: !!c.creatorHeart,
+                likeCount: c.likeCount,
+                id: c.commentId,
+                published: new Date(c.published),
+                replyCount: c.replies?.replyCount || 0,
+                replyKey: c.replies?.continuation,
+                channel: {
+                    id: c.authorId,
+                    title: c.author,
+                    thumbnails: c.authorThumbnails,
+                },
+            } as Comment)),
+        };
+    }
 };

src/api/platforms/invid/types.ts

@@ -123,3 +123,34 @@ export interface InvidiousPlaylistEntry {
 };
 
 export type InvidiousRenderer = InvidiousVideo | InvidiousPlaylist | InvidiousChannel;
+
+export interface InvidiousCommentsResponse {
+    videoId: string;
+    commentCount?: number;
+    comments: InvidiousComment[];
+    continuation: string;
+};
+
+export interface InvidiousComment {
+    author: string;    
+    authorId: string;    
+    authorUrl: string;
+    authorThumbnails: InvidiousImage[];
+    isEdited: boolean;
+    isPinned: boolean;
+    content: string;
+    contentHtml: string;
+    published: number;
+    publishedText: string;
+    likeCount: number;
+    commentId: string;
+    authorIsChannelOwner: boolean;
+    creatorHeart?: {
+        creatorThumbnail: string;
+        creatorName: string;
+    },
+    replies?: {
+        replyCount: number;
+        continuation: string;
+    },
+};

src/api/platforms/lt/comments.ts

@@ -0,0 +1,3 @@
+export interface LTCommentsResponse {
+
+};

src/api/platforms/lt/lighttube.ts

@@ -151,4 +151,11 @@ export class LTAPIProvider implements APIProvider {
             ],
         };
     };
+
+    async getComments(id, key) {
+        return {
+            key: null,
+            results: [],
+        };
+    }
 };

src/api/types/api.ts

@@ -1,11 +1,14 @@
+import { Comment } from "./comment";
 import { Renderer, SearchSuggestions, VideoData } from "./video";
 
+export interface WithContinuation<T> {
+    key?: string;
+    results: T[];
+}
 
 export interface APIProvider {
     searchSuggestions: (query: string, abort?: AbortSignal) => Promise<SearchSuggestions>;
-    search: (query: string) => Promise<{
-        key?: string;
-        results: Renderer[];
-    }>;
+    search: (query: string, key?: string) => Promise<WithContinuation<Renderer>>;
     getVideoInfo: (id: string) => Promise<VideoData>;
+    getComments: (id: string, key?: string) => Promise<WithContinuation<Comment>>;
 };

src/api/types/channel.ts

@@ -0,0 +1,7 @@
+import { Thumbnail } from "./video";
+
+export interface Channel {
+    id: string;
+    title: string;
+    thumbnails: Thumbnail[];
+}

src/api/types/comment.ts

@@ -0,0 +1,14 @@
+import { Channel } from "./Channel";
+
+export interface Comment {
+    id: string;
+    channel: Channel;
+    content: string;
+    edited: boolean;
+    pinned: boolean;
+    hearted: boolean;
+    likeCount: number;
+    published: Date;
+    replyCount: number;
+    replyKey?: string;
+};

src/api/types/video.ts

@@ -1,13 +1,8 @@
+import { Channel } from "./Channel";
 import { VideoFormat } from "./format";
 
 export type SearchSuggestions = string[];
 
-export interface Channel {
-    id: string;
-    title: string;
-    thumbnails: Thumbnail[];
-};
-
 export interface VideoInfo {
     id: string;
     title: string;

src/components/cards/ChannelCard.tsx

@@ -1,5 +1,5 @@
 import { Avatar, Group, Stack, Text } from "@mantine/core";
-import { Channel } from "../../api/types/video";
+import { Channel } from "../../api/types/channel";
 
 export const ChannelCard = ({
     channel,

src/components/cards/CommentCard.tsx

@@ -1,13 +1,29 @@
-import { Grid, Paper } from "@mantine/core";
+import { Grid, Group, Paper, Stack } from "@mantine/core";
+import { Comment } from "../../api/types/comment";
+import { MarkdownText } from "../ui/MarkdownText";
+import { ChannelCard } from "./ChannelCard";
 
-export const CommentCard = () => {
+export const CommentCard = ({
+    comment
+}: {
+    comment: Comment,
+}) => {
     return (
         <Paper
             withBorder
             shadow="md"
             p="xs"
         >
-
+            <Stack>
+                <Group justify="space-between">
+                    <ChannelCard
+                        channel={comment.channel}
+                    />
+                </Group>
+                <MarkdownText
+                    text={comment.content}
+                />
+            </Stack>
         </Paper>
     );
 };

src/components/tabs/comps/CommentsTab.tsx

@@ -1,19 +1,59 @@
-import { Loader, ScrollArea, Stack, Text } from "@mantine/core";
-import { useContext } from "react";
+import { Button, Loader, ScrollArea, Stack, Text } from "@mantine/core";
+import { useContext, useEffect, useState } from "react";
 import { VideoPlayerContext } from "../../../api/context/VideoPlayerContext";
 import { HorizontalVideoCard } from "../../cards/VideoCard";
+import { APIContext } from "../../../api/context/APIController";
+import { Comment } from "../../../api/types/comment";
+import { CommentCard } from "../../cards/CommentCard";
+import { ErrorMessage } from "../../ui/ErrorMessage";
 
 export const CommentsTab = () => {
-    const { videoInfo } = useContext(VideoPlayerContext);
+    const { api, currentInstance } = useContext(APIContext);
+    const { videoID } = useContext(VideoPlayerContext);
+    const [error, setError] = useState(null);
+    const [isLoading, setLoading] = useState(true);
+    const [comments, setComments] = useState<Comment[]>([]);
+    const [continuationKey, setContinuationKey] = useState(null);
+
+    const fetchComments = async (more?: boolean) => {
+        setLoading(true);
+        try {
+            let { key, results } = await api.getComments(videoID, more ? continuationKey : null);
+            setComments((c) => more ? [...c, ...results] : results);
+            setContinuationKey(key);
+        } catch (e) {
+            setError(e);
+        }
+        setLoading(false);
+    }
+
+    useEffect(() => {
+        fetchComments(false);
+    }, [videoID, currentInstance]);
 
     return (
-        <ScrollArea w="100%" h="100%">
+        <ScrollArea w="100%" maw="100%" h="100%" type="scroll" scrollbars="y">
             <Stack w="100%" p="xs">
-                {videoInfo ? (
-                    <Stack w="100%">
-
-                    </Stack>
-                ) : (
+                {comments.map((comment, i) => (
+                    <CommentCard
+                        key={i}
+                        comment={comment}
+                    />
+                ))}
+                <ErrorMessage
+                    error={error}
+                    retry={() => fetchComments(!!comments.length)}
+                />
+                {!isLoading && (
+                    <Button
+                        variant="light"
+                        color="violet"
+                        onClick={() => fetchComments(true)}
+                    >
+                        moar comments pwease uwu
+                    </Button>
+                )}
+                {isLoading && (
                     <Stack w="100%" align="center">
                         <Loader />
                         <Text>