From dfa89fb6cfbbe44415a48a7967319c21547b6f38 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Fri, 8 Mar 2024 03:05:00 +1300 Subject: [PATCH] More watch page progress --- materialious/package-lock.json | 30 +++++++++++++++ materialious/package.json | 2 + materialious/src/lib/Api/index.ts | 9 ++++- materialious/src/lib/Api/model.ts | 17 +++++++++ materialious/src/routes/+layout.svelte | 3 ++ materialious/src/routes/+layout.ts | 4 +- .../src/routes/watch/[slug]/+page.svelte | 38 +++++++++++++++++-- materialious/src/routes/watch/[slug]/+page.ts | 4 +- materialious/src/store.ts | 1 + 9 files changed, 98 insertions(+), 10 deletions(-) diff --git a/materialious/package-lock.json b/materialious/package-lock.json index ece44b0c..739277dc 100644 --- a/materialious/package-lock.json +++ b/materialious/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.1", "dependencies": { "beercss": "^3.5.1", + "human-number": "^2.0.4", "svelte-persisted-store": "^0.9.1" }, "devDependencies": { @@ -16,6 +17,7 @@ "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", "@types/eslint": "^8.56.0", + "@types/human-number": "^1.0.2", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "eslint": "^8.56.0", @@ -925,6 +927,12 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" }, + "node_modules/@types/human-number": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@types/human-number/-/human-number-1.0.2.tgz", + "integrity": "sha512-Xm2hW0MXOjX/IOrRv8IRLycwVz23cU51b3fUn3Km5q8+4oM88uJaZ36dD1S0qINg92jhfQm7iEuAxZefIIffYg==", + "dev": true + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -2186,6 +2194,17 @@ "node": ">=8" } }, + "node_modules/human-number": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/human-number/-/human-number-2.0.4.tgz", + "integrity": "sha512-OENvA941poJU1VGR6s5Nf/GpYNPE+81lmHkIVLO9FgiyHxB+BSlVOJV3lnItk5tfHzcEbZv3kTQrzpZK0+ExRA==", + "dependencies": { + "round-to": "~5.0.0" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -2958,6 +2977,17 @@ "fsevents": "~2.3.2" } }, + "node_modules/round-to": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/round-to/-/round-to-5.0.0.tgz", + "integrity": "sha512-i4+Ntwmo5kY7UWWFSDEVN3RjT2PX1FqkZ9iCcAO3sKML3Ady9NgsjM/HLdYKUAnrxK4IlSvXzpBMDvMHZQALRQ==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", diff --git a/materialious/package.json b/materialious/package.json index 070d2bb9..dba7acf8 100644 --- a/materialious/package.json +++ b/materialious/package.json @@ -16,6 +16,7 @@ "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", "@types/eslint": "^8.56.0", + "@types/human-number": "^1.0.2", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "eslint": "^8.56.0", @@ -32,6 +33,7 @@ "type": "module", "dependencies": { "beercss": "^3.5.1", + "human-number": "^2.0.4", "svelte-persisted-store": "^0.9.1" } } diff --git a/materialious/src/lib/Api/index.ts b/materialious/src/lib/Api/index.ts index 7a4e500d..f0902363 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 } from '../../store'; -import type { Video, VideoPlay } from './model'; +import { invidiousInstance, returnYTDislikesInstance } from '../../store'; +import type { ReturnYTDislikes, Video, VideoPlay } from './model'; function buildPath(path: string): string { return `${get(invidiousInstance)}/api/v1/${path}`; @@ -14,4 +14,9 @@ export async function getTrending(): Promise { export async function getVideo(videoId: string): Promise { const resp = await fetch(buildPath(`videos/${videoId}`)); return await resp.json(); +} + +export async function getDislikes(videoId: string): Promise { + const resp = await fetch(`${get(returnYTDislikesInstance)}/Votes?videoId=${videoId}`); + 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 9bd3a2c2..a1a0bc08 100644 --- a/materialious/src/lib/Api/model.ts +++ b/materialious/src/lib/Api/model.ts @@ -72,6 +72,12 @@ export interface Captions { url: string; }; +export interface AuthorThumbnails { + url: string; + width: string; + height: string; +} + export interface VideoPlay extends Video { keywords: string[]; likeCount: number; @@ -88,4 +94,15 @@ export interface VideoPlay extends Video { adaptiveFormats: AdaptiveFormats[]; formatStreams: FormatStreams; recommendedVideos: VideoBase[]; + authorThumbnails: AuthorThumbnails[]; +} + +export interface ReturnYTDislikes { + id: string; + dateCreated: string; + likes: number; + dislikes: number; + rating: number; + viewCount: number; + deleted: boolean; } \ No newline at end of file diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte index ce564974..a4c9eb80 100644 --- a/materialious/src/routes/+layout.svelte +++ b/materialious/src/routes/+layout.svelte @@ -1,6 +1,9 @@
-
+
{data.video.title}
+ + +

{numberWithCommas(data.video.viewCount)} views • {data.video.publishedText}

-

{data.video.description}

+

{data.video.description}

-
+
{#each data.video.recommendedVideos as recommendedVideo} {/each} diff --git a/materialious/src/routes/watch/[slug]/+page.ts b/materialious/src/routes/watch/[slug]/+page.ts index cbaa1688..ad304254 100644 --- a/materialious/src/routes/watch/[slug]/+page.ts +++ b/materialious/src/routes/watch/[slug]/+page.ts @@ -1,5 +1,5 @@ -import { getVideo } from '$lib/Api/index.js'; +import { getDislikes, getVideo } from '$lib/Api/index.js'; export async function load({ params }) { - return { video: await getVideo(params.slug) }; + return { video: await getVideo(params.slug), returnYTDislikes: await getDislikes(params.slug) }; }; diff --git a/materialious/src/store.ts b/materialious/src/store.ts index 33fb2b8a..024f9b59 100644 --- a/materialious/src/store.ts +++ b/materialious/src/store.ts @@ -1,3 +1,4 @@ import { persisted } from 'svelte-persisted-store'; export const invidiousInstance = persisted('invidiousInstance', import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE); +export const returnYTDislikesInstance = persisted('returnYTDislikesInstance', import.meta.env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE); \ No newline at end of file