diff --git a/packages/next/app/components/archive-progress.tsx b/packages/next/app/components/archive-progress.tsx index fe12fd4..bf2c6ef 100644 --- a/packages/next/app/components/archive-progress.tsx +++ b/packages/next/app/components/archive-progress.tsx @@ -7,25 +7,18 @@ export interface IArchiveProgressProps { } export default async function ArchiveProgress ({ vtuber }: IArchiveProgressProps) { - // const vods = await getVodsForVtuber(vtuber.id) - const streams = await getStreamCountForVtuber(vtuber.id); - // const goodStreams = await getAllStreamsForVtuber(vtuber.id, ['good']); - // const issueStreams = await getAllStreamsForVtuber(vtuber.id, ['issue']); - // const totalStreams = streams.length; - // const eligibleStreams = issueStreams.length+goodStreams.length; // // Check if totalStreams is not zero before calculating completedPercentage // const completedPercentage = (totalStreams !== 0) ? Math.round(eligibleStreams / totalStreams * 100) : 0; - const completedPercentage = 50 - const totalStreams = 500 - const eligibleStreams = 50 + const totalStreams = await getStreamCountForVtuber(vtuber.id); + const eligibleStreams = await getStreamCountForVtuber(vtuber.id, ['good', 'issue']); + const completedPercentage = (eligibleStreams / totalStreams) * 100 return (
-
-                
-                    {JSON.stringify(streams, null, 2)}
-                
-            
+ {/*

+ {totalStreams} known streams
+ {eligibleStreams} archived
+

*/}

{eligibleStreams}/{totalStreams} Streams Archived ({completedPercentage}%)

{completedPercentage}%
diff --git a/packages/next/app/components/funding-goal.tsx b/packages/next/app/components/funding-goal.tsx index 352244f..9b2adc7 100644 --- a/packages/next/app/components/funding-goal.tsx +++ b/packages/next/app/components/funding-goal.tsx @@ -1,7 +1,7 @@ import { getCampaign } from "@/lib/patreon"; import { getGoals, IGoals } from '@/lib/pm' -import Image from 'next/image'; +import Image from "next/legacy/image"; import React from 'react'; import Link from 'next/link' diff --git a/packages/next/app/components/stream-page.tsx b/packages/next/app/components/stream-page.tsx index 4392b5d..1a81d45 100644 --- a/packages/next/app/components/stream-page.tsx +++ b/packages/next/app/components/stream-page.tsx @@ -4,7 +4,7 @@ import { IStream } from "@/lib/streams"; // import NotFound from "app/streams/[cuid]/not-found"; import { IVod } from "@/lib/vods"; import Link from "next/link"; -import Image from "next/image"; +import Image from "next/legacy/image"; import { LocalizedDate } from "./localized-date"; import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; import { faTriangleExclamation, faCircleInfo, faThumbsUp, IconDefinition, faO, faX, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; diff --git a/packages/next/app/components/stream.tsx b/packages/next/app/components/stream.tsx index 3e54a19..f9f63b5 100644 --- a/packages/next/app/components/stream.tsx +++ b/packages/next/app/components/stream.tsx @@ -4,7 +4,7 @@ import { LocalizedDate } from "./localized-date"; import Link from "next/link"; import ChaturbateIcon from "@/components/icons/chaturbate"; import FanslyIcon from "@/components/icons/fansly"; -import Image from "next/image"; +import Image from "next/legacy/image"; export interface IStreamProps { stream: IStream; diff --git a/packages/next/app/components/streams-table.tsx b/packages/next/app/components/streams-table.tsx index 0082cdd..df78e9f 100644 --- a/packages/next/app/components/streams-table.tsx +++ b/packages/next/app/components/streams-table.tsx @@ -8,7 +8,7 @@ import { useQuery, } from '@tanstack/react-query' import { format } from 'date-fns' -import Image from 'next/image' +import Image from "next/legacy/image" import { PaginationState, useReactTable, @@ -65,7 +65,7 @@ export default function StreamsTable() { src={image} alt={displayName} placeholder="blur" - objectFit='contain' + objectFit='cover' blurDataURL={imageBlur} width={32} height={32} @@ -81,8 +81,11 @@ export default function StreamsTable() { } }, { - header: 'Date', + header: 'Date2', accessorFn: d => format(new Date(d.attributes.date2), 'yyyy-MM-dd HH:mm'), + // accessorFn: d => new Date(d.attributes.date2), + sortingFn: 'datetime', + sortDescFirst: true, cell: info => ({info.getValue() as string}) }, { diff --git a/packages/next/app/components/thumbnail.tsx b/packages/next/app/components/thumbnail.tsx index 7a71405..a64aeb0 100644 --- a/packages/next/app/components/thumbnail.tsx +++ b/packages/next/app/components/thumbnail.tsx @@ -1,6 +1,6 @@ 'use client' import LinkableHeading from "./linkable-heading" -import Image from "next/image" +import Image from "next/legacy/image" import { useState } from "react" import styles from '@/assets/styles/fp.module.css' diff --git a/packages/next/app/components/toys.tsx b/packages/next/app/components/toys.tsx index 564d0ef..b913ede 100644 --- a/packages/next/app/components/toys.tsx +++ b/packages/next/app/components/toys.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { IToy, IToysResponse } from '@/lib/toys'; import { IVtuber } from '@/lib/vtubers'; import Link from 'next/link'; -import Image from 'next/image'; +import Image from "next/legacy/image"; export interface IToyProps { toy: IToy; @@ -56,8 +56,7 @@ export function ToyItem({ toy }: IToyProps) { src={toy.attributes.image2} alt={displayName} objectFit='contain' - - fill + layout='fill' />

{toy.attributes.model}

diff --git a/packages/next/app/components/vod-card.tsx b/packages/next/app/components/vod-card.tsx index d2af9dc..07021cd 100644 --- a/packages/next/app/components/vod-card.tsx +++ b/packages/next/app/components/vod-card.tsx @@ -4,7 +4,7 @@ import { faPatreon } from "@fortawesome/free-brands-svg-icons"; import { faVideo } from "@fortawesome/free-solid-svg-icons"; import { getSafeDate, getDateFromSafeDate } from '@/lib/dates'; import { IVtuber } from '@/lib/vtubers'; -import Image from 'next/image' +import Image from "next/legacy/image" import { LocalizedDate } from '@/components/localized-date' import { IMuxAsset, IMuxAssetResponse } from "@/lib/types"; import { IB2File } from "@/lib/b2File"; diff --git a/packages/next/app/components/vod-nav.tsx b/packages/next/app/components/vod-nav.tsx index 0b5f62f..a6a32e0 100644 --- a/packages/next/app/components/vod-nav.tsx +++ b/packages/next/app/components/vod-nav.tsx @@ -3,7 +3,7 @@ import { faVideo, faExternalLinkAlt, faShareAlt } from "@fortawesome/free-solid-svg-icons"; import { faXTwitter } from '@fortawesome/free-brands-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import Image from 'next/image'; +import Image from "next/legacy/image"; import Link from 'next/link'; import { IVod } from '@/lib/vods'; import { buildIpfsUrl } from '@/lib/ipfs'; diff --git a/packages/next/app/components/vod-page.tsx b/packages/next/app/components/vod-page.tsx index 2f1dfe2..10c8b6c 100644 --- a/packages/next/app/components/vod-page.tsx +++ b/packages/next/app/components/vod-page.tsx @@ -7,7 +7,7 @@ import { faChevronLeft, faChevronRight, faGlobe, faImage, faLink } from "@fortaw import { notFound } from 'next/navigation'; import { IpfsCid } from './ipfs-cid'; import LinkableHeading from './linkable-heading'; -import Image from 'next/image'; +import Image from "next/legacy/image"; import Thumbnail from './thumbnail'; export function getVodTitle(vod: IVod): string { diff --git a/packages/next/app/components/vtuber-button.tsx b/packages/next/app/components/vtuber-button.tsx index 6826a28..22f5bc2 100644 --- a/packages/next/app/components/vtuber-button.tsx +++ b/packages/next/app/components/vtuber-button.tsx @@ -1,4 +1,4 @@ -import Image from "next/image" +import Image from "next/legacy/image" interface VtuberButtonProps { image: string; diff --git a/packages/next/app/components/vtuber-card.tsx b/packages/next/app/components/vtuber-card.tsx index 0c512fd..e9b5e98 100644 --- a/packages/next/app/components/vtuber-card.tsx +++ b/packages/next/app/components/vtuber-card.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; import type { IVtuber } from '@/lib/vtubers'; import { getVodsForVtuber } from "@/lib/vods"; -import Image from 'next/image' +import Image from "next/legacy/image" import NotFound from "app/vt/[slug]/not-found"; import ArchiveProgress from "./archive-progress"; diff --git a/packages/next/app/lib/streams.ts b/packages/next/app/lib/streams.ts index cdd4d15..329976d 100644 --- a/packages/next/app/lib/streams.ts +++ b/packages/next/app/lib/streams.ts @@ -335,7 +335,8 @@ export async function fetchStreamData({ pageIndex, pageSize }: { pageIndex: numb start: offset, limit: pageSize, withCount: true - } + }, + sort: ['date:desc'] }) const response = await fetch( `${strapiUrl}/api/streams?${query}` @@ -351,8 +352,9 @@ export async function fetchStreamData({ pageIndex, pageSize }: { pageIndex: numb return d; } -export async function getStreamCountForVtuber(vtuberId: number): Promise { +export async function getStreamCountForVtuber(vtuberId: number, archiveStatuses = ['missing', 'issue', 'good']): Promise { if (!vtuberId) throw new Error(`getStreamCountForVtuber requires a vtuberId, but it was undefined.`); + // @todo possible performance improvement is to only request the meta field, since we don't use any of the data.attributes const query = qs.stringify( { filters: { @@ -360,13 +362,16 @@ export async function getStreamCountForVtuber(vtuberId: number): Promise