fixing frontend image quirks

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 = await getStreamCountForVtuber(vtuber.id);
-    const totalStreams = 500
+    const eligibleStreams = await getStreamCountForVtuber(vtuber.id, ['good', 'issue']);
-    const eligibleStreams = 50
+    const completedPercentage = (eligibleStreams / totalStreams) * 100
     return (
         <div>
-            <pre>
+            {/* <p>
-                <code>
+                {totalStreams} known streams<br />
-                    {JSON.stringify(streams, null, 2)}
+                {eligibleStreams} archived<br />
-                </code>
+            </p>  */}
-            </pre>
             <p className="heading">{eligibleStreams}/{totalStreams} Streams Archived ({completedPercentage}%)</p>
             <progress className="progress is-success" value={eligibleStreams} max={totalStreams}>{completedPercentage}%</progress>
         </div>

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'
 

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";

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;

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 => (<Link href={`/archive/${info.row.original.attributes.cuid}`}>{info.getValue() as string}</Link>)
         },
         {

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'
 

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'
-            
+            layout='fill'
-            fill
           />
         </figure>
         <p className="heading">{toy.attributes.model}</p>

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";

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';

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 {

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;

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";
 

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<IStreamsResponse> {
+export async function getStreamCountForVtuber(vtuberId: number, archiveStatuses = ['missing', 'issue', 'good']): Promise<number> {
     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<IStream
                     id: {
                         $eq: vtuberId
                     }
+                },
+                archiveStatus: {
+                    '$in': archiveStatuses
                 }
             }
         }
     )
     const res = await fetch(`${strapiUrl}/api/streams?${query}`, fetchStreamsOptions)
     const data = await res.json()
-    console.log('getStreamCountForVtuber')
+    console.log(`getStreamCountForVtuber with archiveStatuses=${archiveStatuses}`)
     console.log(JSON.stringify(data, null, 2))
     return data.meta.pagination.total
 }

packages/next/app/vt/[slug]/page.tsx

@@ -4,7 +4,7 @@ import { getVtuberBySlug } from '@/lib/vtubers'
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLinkAlt, faBagShopping } from "@fortawesome/free-solid-svg-icons";
 import { faFacebook, faInstagram, faPatreon, faYoutube, faTwitch, faTiktok, faXTwitter, faReddit, faDiscord } from "@fortawesome/free-brands-svg-icons";
-import Image from 'next/image';
+import Image from "next/legacy/image";
 import OnlyfansIcon from "@/components/icons/onlyfans";
 import PornhubIcon from '@/components/icons/pornhub';
 import ThroneIcon from '@/components/icons/throne';
@@ -63,7 +63,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
                     className="is-rounded"
                     alt={vtuber.attributes.displayName}
                     src={vtuber.attributes.image}
-                    fill={true}
+                    layout='fill'
                     objectFit='cover'
                     placeholder='blur'
                     blurDataURL={vtuber.attributes.imageBlur}

packages/strapi/src/api/stream/content-types/stream/lifecycles.js

@@ -79,7 +79,7 @@ module.exports = {
          * If any platformNotification is from chaturbate, isChaturbateStream is set to true.
          */
         const existingData2 = await strapi.entityService.findOne("api::stream.stream", id, {
-            populate: ['platform_notifications']
+            populate: {'platformNotifications': true}
         })
 
         let isFanslyStream = false
@@ -89,7 +89,7 @@ module.exports = {
         console.log(JSON.stringify(existingData2, null, 2))
 
         // Iterate through all platformNotifications to determine platform
-        if (existingData2.platformNotifications) {
+        if (existingData2?.platformNotifications) {
             for (const pn of existingData2.platformNotifications) {
                 if (pn.platform === 'fansly') {
                     isFanslyStream = true