From 4c7c7f25403f4b1268de52801a35961f3b2ba7ad Mon Sep 17 00:00:00 2001 From: WardPearce Date: Fri, 8 Mar 2024 17:24:33 +1300 Subject: [PATCH] Started video comments --- materialious/src/app.html | 24 ++++--- materialious/src/lib/Api/index.ts | 9 ++- materialious/src/lib/Api/model.ts | 32 +++++++++- materialious/src/lib/Thumbnail.svelte | 8 +-- materialious/src/routes/+layout.ts | 2 +- .../src/routes/channel/[slug]/+page.svelte | 0 .../src/routes/channel/[slug]/+page.ts | 0 .../src/routes/watch/[slug]/+page.svelte | 63 +++++++++++++++++-- materialious/src/routes/watch/[slug]/+page.ts | 4 +- materialious/static/style.css | 3 + 10 files changed, 117 insertions(+), 28 deletions(-) create mode 100644 materialious/src/routes/channel/[slug]/+page.svelte create mode 100644 materialious/src/routes/channel/[slug]/+page.ts create mode 100644 materialious/static/style.css diff --git a/materialious/src/app.html b/materialious/src/app.html index 77a5ff52..13aa9997 100644 --- a/materialious/src/app.html +++ b/materialious/src/app.html @@ -1,12 +1,16 @@ - - - - - %sveltekit.head% - - -
%sveltekit.body%
- - + + + + + + + %sveltekit.head% + + + +
%sveltekit.body%
+ + + \ No newline at end of file diff --git a/materialious/src/lib/Api/index.ts b/materialious/src/lib/Api/index.ts index f030845f..01d055a7 100644 --- a/materialious/src/lib/Api/index.ts +++ b/materialious/src/lib/Api/index.ts @@ -1,6 +1,6 @@ import { get } from 'svelte/store'; import { invidiousInstance, returnYTDislikesInstance } from '../../store'; -import type { ReturnYTDislikes, Video, VideoPlay } from './model'; +import type { Comments, ReturnYTDislikes, Video, VideoPlay } from './model'; export function buildPath(path: string): string { return `${get(invidiousInstance)}/api/v1/${path}`; @@ -19,4 +19,11 @@ export async function getVideo(videoId: string): Promise { export async function getDislikes(videoId: string): Promise { const resp = await fetch(`${get(returnYTDislikesInstance)}/Votes?videoId=${videoId}`); return await resp.json(); +} + +export async function getComments(videoId: string, parameters: { sortBy: "top" | "new", source: "youtube" | "reddit", continuation?: string; }): Promise { + const path = new URL(buildPath(`comments/${videoId}`)); + path.search = new URLSearchParams(parameters).toString(); + const resp = await fetch(path); + return await resp.json(); } \ No newline at end of file diff --git a/materialious/src/lib/Api/model.ts b/materialious/src/lib/Api/model.ts index d7ba8e2a..2d831d8c 100644 --- a/materialious/src/lib/Api/model.ts +++ b/materialious/src/lib/Api/model.ts @@ -17,6 +17,7 @@ export interface VideoBase { title: string; videoThumbnails: Thumbnail[]; author: string; + authorId: string; lengthSeconds: number; viewCountText: string; } @@ -24,7 +25,6 @@ export interface VideoBase { export interface Video extends VideoBase { type: "video"; title: string; - authorId: string; authorUrl: string; authorVerified: boolean; description: string; @@ -106,4 +106,34 @@ export interface ReturnYTDislikes { rating: number; viewCount: number; deleted: boolean; +} + +export interface Comment { + author: string; + authorThumbnails: AuthorThumbnails[]; + authorID: string; + authorUrl: string; + isEdited: boolean; + isPinned: boolean; + content: string; + contentHtml: string; + published: number; + publishedText: string; + likeCount: number; + authorIsChannelOwner: boolean; + creatorHeart: { + creatorThumbnail: string; + creatorName: string; + }; + replies: { + replyCount: number; + continuation: string; + }; +} + +export interface Comments { + commentCount: number; + videoId: string; + continuation?: string; + comments: Comment[]; } \ No newline at end of file diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte index 9fe301d0..5aa77f97 100644 --- a/materialious/src/lib/Thumbnail.svelte +++ b/materialious/src/lib/Thumbnail.svelte @@ -68,7 +68,7 @@
{truncate(video.title)}
- {video.author}{#if !('publishedText' in video)} + {video.author}{#if !('publishedText' in video)}  • {video.viewCountText}{/if}
{#if 'publishedText' in video} @@ -76,12 +76,6 @@ {video.viewCountText} • {video.publishedText}
{/if} - diff --git a/materialious/src/routes/+layout.ts b/materialious/src/routes/+layout.ts index b8dcd205..c354ec14 100644 --- a/materialious/src/routes/+layout.ts +++ b/materialious/src/routes/+layout.ts @@ -1 +1 @@ -export let ssr = false; \ No newline at end of file +export let ssr = false; diff --git a/materialious/src/routes/channel/[slug]/+page.svelte b/materialious/src/routes/channel/[slug]/+page.svelte new file mode 100644 index 00000000..e69de29b diff --git a/materialious/src/routes/channel/[slug]/+page.ts b/materialious/src/routes/channel/[slug]/+page.ts new file mode 100644 index 00000000..e69de29b diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte index 648f3446..9a4f5036 100644 --- a/materialious/src/routes/watch/[slug]/+page.svelte +++ b/materialious/src/routes/watch/[slug]/+page.svelte @@ -16,6 +16,7 @@ const cleanRound = (number: number) => Number.parseFloat(number.toString()).toFixed(1); + $: video = data.video; let player; onMount(() => { player = new Plyr('#player'); @@ -46,11 +47,19 @@
{data.video.title}