fixing frontend image quirks

2024-06-12 18:54:44 -08:00 · 2024-06-12 18:54:44 -08:00 · 333b4b49aa
parent 71f19065d0
commit 333b4b49aa
15 changed files with 36 additions and 36 deletions
--- 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 (
        <div>
-            <pre>
-                <code>
-                    {JSON.stringify(streams, null, 2)}
-                </code>
-            </pre>
+            {/* <p>
+                {totalStreams} known streams<br />
+                {eligibleStreams} archived<br />
+            </p>  */}
            <p className="heading">{eligibleStreams}/{totalStreams} Streams Archived ({completedPercentage}%)</p>
            <progress className="progress is-success" value={eligibleStreams} max={totalStreams}>{completedPercentage}%</progress>
        </div>
--- 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'

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

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

--- 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<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
 }
--- a/packages/next/app/vt/[slug]/page.tsx
+++ b/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}
--- a/packages/strapi/src/api/stream/content-types/stream/lifecycles.js
+++ b/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