Revert "Support cover image heights and positioning changes (#3758)"

This reverts commit f682df1.

Author: viktorrenkema

packages/gitbook/e2e/internal.spec.ts

@@ -33,7 +33,6 @@ import {
     headerLinks,
     runTestCases,
     waitForCookiesDialog,
-    waitForCoverImages,
     waitForNotFound,
 } from './util';
 
@@ -907,10 +906,7 @@ const testCases: TestsCase[] = [
             {
                 name: 'With cover',
                 url: 'page-options/page-with-cover',
-                run: async (page) => {
-                    await waitForCookiesDialog(page);
-                    await waitForCoverImages(page);
-                },
+                run: waitForCookiesDialog,
             },
             {
                 name: 'With cover for dark mode',
@@ -925,18 +921,12 @@ const testCases: TestsCase[] = [
             {
                 name: 'With hero cover',
                 url: 'page-options/page-with-hero-cover',
-                run: async (page) => {
-                    await waitForCookiesDialog(page);
-                    await waitForCoverImages(page);
-                },
+                run: waitForCookiesDialog,
             },
             {
                 name: 'With cover and no TOC',
                 url: 'page-options/page-with-cover-and-no-toc',
-                run: async (page) => {
-                    await waitForCookiesDialog(page);
-                    await waitForCoverImages(page);
-                },
+                run: waitForCookiesDialog,
                 screenshot: {
                     waitForTOCScrolling: false,
                 },

packages/gitbook/e2e/util.ts

@@ -154,13 +154,6 @@ export async function waitForNotFound(_page: Page, response: Response | null) {
     expect(response?.status()).toBe(404);
 }
 
-export async function waitForCoverImages(page: Page) {
-    // Wait for cover images to exist (not the shimmer placeholder)
-    await expect(page.locator('img[alt="Page cover"]').first()).toBeVisible({
-        timeout: 10_000,
-    });
-}
-
 /**
  * Transform test cases into Playwright tests and run it.
  */

packages/gitbook/src/components/PageBody/PageCover.tsx

@@ -8,7 +8,6 @@ import { tcls } from '@/lib/tailwind';
 
 import { assert } from 'ts-essentials';
 import { PageCoverImage } from './PageCoverImage';
-import { getCoverHeight } from './coverHeight';
 import defaultPageCoverSVG from './default-page-cover.svg';
 
 const defaultPageCover = defaultPageCoverSVG as StaticImageData;
@@ -23,12 +22,6 @@ export async function PageCover(props: {
     context: GitBookSiteContext;
 }) {
     const { as, page, cover, context } = props;
-    const height = getCoverHeight(cover);
-
-    if (!height) {
-        return null;
-    }
-
     const [resolved, resolvedDark] = await Promise.all([
         cover.ref ? resolveContentRef(cover.ref, context) : null,
         cover.refDark ? resolveContentRef(cover.refDark, context) : null,
@@ -85,7 +78,6 @@ export async function PageCover(props: {
         <div
             id="page-cover"
             data-full={String(as === 'full')}
-            style={{ height }}
             className={tcls(
                 'overflow-hidden',
                 // Negative margin to balance the container padding

packages/gitbook/src/components/PageBody/PageCoverImage.tsx

@@ -1,7 +1,8 @@
 'use client';
 import { tcls } from '@/lib/tailwind';
+import { useRef } from 'react';
+import { useResizeObserver } from 'usehooks-ts';
 import type { ImageSize } from '../utils';
-import { useCoverPosition } from './useCoverPosition';
 
 interface ImageAttributes {
     src: string;
@@ -17,16 +18,28 @@ interface Images {
     dark?: ImageAttributes;
 }
 
+const PAGE_COVER_SIZE: ImageSize = { width: 1990, height: 480 };
+
+function getTop(container: { height?: number; width?: number }, y: number, img: ImageAttributes) {
+    // When the size of the image hasn't been determined, we fallback to the center position
+    if (!img.size || y === 0) return '50%';
+    const ratio =
+        container.height && container.width
+            ? Math.max(container.width / img.size.width, container.height / img.size.height)
+            : 1;
+    const scaledHeight = img.size ? img.size.height * ratio : PAGE_COVER_SIZE.height;
+    const top =
+        container.height && img.size ? (container.height - scaledHeight) / 2 + y * ratio : y;
+    return `${top}px`;
+}
+
 export function PageCoverImage({ imgs, y }: { imgs: Images; y: number }) {
-    const { containerRef, objectPositionY, isLoading } = useCoverPosition(imgs, y);
+    const containerRef = useRef<HTMLDivElement>(null);
 
-    if (isLoading) {
-        return (
-            <div className="h-full w-full overflow-hidden" ref={containerRef}>
-                <div className="h-full w-full animate-pulse bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900" />
-            </div>
-        );
-    }
+    const container = useResizeObserver({
+        // @ts-expect-error wrong types
+        ref: containerRef,
+    });
 
     return (
         <div className="h-full w-full overflow-hidden" ref={containerRef}>
@@ -36,9 +49,10 @@ export function PageCoverImage({ imgs, y }: { imgs: Images; y: number }) {
                 sizes={imgs.light.sizes}
                 fetchPriority="high"
                 alt="Page cover"
-                className={tcls('h-full', 'w-full', 'object-cover', imgs.dark ? 'dark:hidden' : '')}
+                className={tcls('w-full', 'object-cover', imgs.dark ? 'dark:hidden' : '')}
                 style={{
-                    objectPosition: `50% ${objectPositionY}%`,
+                    aspectRatio: `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}`,
+                    objectPosition: `50% ${getTop(container, y, imgs.light)}`,
                 }}
             />
             {imgs.dark && (
@@ -48,9 +62,10 @@ export function PageCoverImage({ imgs, y }: { imgs: Images; y: number }) {
                     sizes={imgs.dark.sizes}
                     fetchPriority="low"
                     alt="Page cover"
-                    className={tcls('h-full', 'w-full', 'object-cover', 'dark:inline', 'hidden')}
+                    className={tcls('w-full', 'object-cover', 'dark:inline', 'hidden')}
                     style={{
-                        objectPosition: `50% ${objectPositionY}%`,
+                        aspectRatio: `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}`,
+                        objectPosition: `50% ${getTop(container, y, imgs.dark)}`,
                     }}
                 />
             )}

packages/gitbook/src/components/PageBody/coverHeight.ts

@@ -1,3 +1,2 @@
 export * from './PageBody';
 export * from './PageCover';
-export * from './useCoverPosition';