chore(deps): update dependency @types/node to v18.19.71

.gitea/workflows/build.yml

@@ -1,34 +1,28 @@
-name: docker
+name: Build and publish the docker image
 
 on:
   push:
-    branches:
+    branches: ["custom"]
-      - "main"
-    paths-ignore:
-      - "README.md"
-      - "LICENSE.txt"
-      - "docker-compose.example.yml"
-      - "ups.json"
 
 env:
   REGISTRY: git.ngn.tf
   IMAGE: ${{gitea.repository}}
 
 jobs:
-  docker:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: "https://github.com/actions/checkout@v4"
 
       - name: Login to container repo
-        uses: docker/login-action@v1
+        uses: "https://github.com/docker/login-action@v1"
         with:
           registry: ${{env.REGISTRY}}
           username: ${{gitea.actor}}
           password: ${{secrets.PACKAGES_TOKEN}}
 
-      - name: Build docker image
+      - name: Build image
         run: |
           docker build . --tag ${{env.REGISTRY}}/${{env.IMAGE}}:latest
           docker push ${{env.REGISTRY}}/${{env.IMAGE}}:latest

.gitea/workflows/ups.yml

@@ -1,25 +0,0 @@
-name: ups
-
-on:
-  schedule:
-    - cron: "@weekly"
-
-jobs:
-  ups:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Install dependencies
-        run: |
-          sudo apt update -y
-          sudo apt install -y python3 python3-build python3-requests make
-
-      - name: Install ups
-        run: |
-          git clone https://git.ngn.tf/ngn/ups && cd ups
-          make && make install
-
-      - name: Run ups
-        run: PATH=~/.local/bin:$PATH ups-check

Dockerfile

@@ -1,12 +1,20 @@
+FROM node:lts-alpine AS deps
+
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+
+RUN npm install -g pnpm
+RUN pnpm install --frozen-lockfile
+
 FROM node:lts-alpine AS builder
 
 WORKDIR /app
 COPY . .
+COPY --from=deps /app/node_modules ./node_modules
 
 ENV NODE_ENV=production
 
 RUN npm install -g pnpm
-RUN pnpm install
 RUN pnpm build
 
 FROM node:lts-alpine AS runner

README.md

@@ -1,7 +1,5 @@
-# libremdb - IMDb frontend
+# [ngn.tf] | libremdb
 
-![](https://git.ngn.tf/ngn/libremdb/actions/workflows/docker.yml/badge.svg)
+![](https://git.ngn.tf/ngn/libremdb/actions/workflows/build.yml/badge.svg)
-![](https://git.ngn.tf/ngn/libremdb/actions/workflows/ups.yml/badge.svg)
 
-A fork of the [libremdb](https://github.com/zyachel/libremdb) project, with my
+A fork of the [libremdb](https://github.com/zyachel/libremdb) project, with my personal changes.
-personal changes.

docker-compose.example.yml

@@ -8,7 +8,7 @@ services:
     depends_on:
     - libremdb_redis
     tmpfs:
-      - /app/.next/cache/:size=10M,mode=0770,uid=65534,gid=65534,noexec,nosuid,nodev
+    - /opt/app/.next/cache/:size=10M,mode=0770,uid=65534,gid=65534,noexec,nosuid,nodev
     security_opt:
     - no-new-privileges:true
     cap_drop:

next.config.mjs

@@ -9,11 +9,6 @@ const nextConfig = {
         destination: '/find',
         permanent: true,
       },
-      {
-        source: '/:langcode(\\w{2})/:slug*',
-        destination: '/:slug*',
-        permanent: true,
-      },
     ];
   },
   images: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "libremdb",
-  "version": "4.2.0",
+  "version": "4.1.0",
   "description": "a free & open source IMDb front-end",
   "private": true,
   "type": "module",
@@ -21,14 +21,14 @@
     "cheerio": "1.0.0-rc.12",
     "ioredis": "^5.3.2",
     "next": "12.2.5",
-    "react": "19.1.0",
+    "react": "18.2.0",
-    "react-dom": "19.1.0",
+    "react-dom": "18.2.0",
     "sharp": "^0.33.1"
   },
   "devDependencies": {
-    "@types/node": "18.7.3",
+    "@types/node": "18.19.71",
-    "@types/react": "19.1.8",
+    "@types/react": "18.0.17",
-    "@types/react-dom": "19.1.6",
+    "@types/react-dom": "18.0.6",
     "eslint": "8.22.0",
     "eslint-config-next": "12.2.5",
     "sass": "^1.62.1",

pnpm-lock.yaml

@@ -31,8 +31,8 @@ importers:
         version: 0.33.1
     devDependencies:
       '@types/node':
-        specifier: 18.7.3
+        specifier: 18.19.71
-        version: 18.7.3
+        version: 18.19.71
       '@types/react':
         specifier: 18.0.17
         version: 18.0.17
@@ -68,12 +68,14 @@ packages:
   '@humanwhocodes/config-array@0.10.7':
     resolution: {integrity: sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==}
     engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
 
   '@humanwhocodes/gitignore-to-minimatch@1.0.2':
     resolution: {integrity: sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==}
 
   '@humanwhocodes/object-schema@1.2.1':
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
+    deprecated: Use @eslint/object-schema instead
 
   '@img/sharp-darwin-arm64@0.33.1':
     resolution: {integrity: sha512-esr2BZ1x0bo+wl7Gx2hjssYhjrhUsD88VQulI0FrG8/otRQUOxLWHMBd1Y1qo2Gfg2KUvXNpT0ASnV9BzJCexw==}
@@ -296,8 +298,8 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
-  '@types/node@18.7.3':
+  '@types/node@18.19.71':
-    resolution: {integrity: sha512-LJgzOEwWuMTBxHzgBR/fhhBOWrvBjvO+zPteUgbbuQi80rYIZHrk1mNbRUqPZqSLP2H7Rwt1EFLL/tNLD1Xx/w==}
+    resolution: {integrity: sha512-evXpcgtZm8FY4jqBSN8+DmOTcVkkvTmAayeo4Wf3m1xAruyVGzGuDh/Fb/WWX2yLItUiho42ozyJjB0dw//Tkw==}
 
   '@types/prop-types@15.7.5':
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
@@ -480,7 +482,7 @@ packages:
     engines: {node: '>= 0.8'}
 
   concat-map@0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -681,6 +683,7 @@ packages:
   eslint@8.22.0:
     resolution: {integrity: sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   espree@9.5.1:
@@ -792,9 +795,11 @@ packages:
 
   glob@7.1.7:
     resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   globals@13.20.0:
     resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
@@ -860,6 +865,7 @@ packages:
 
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
 
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
@@ -1233,6 +1239,7 @@ packages:
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   run-parallel@1.2.0:
@@ -1358,6 +1365,9 @@ packages:
   tslib@2.5.0:
     resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
 
+  tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+
   tsutils@3.21.0:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -1383,6 +1393,9 @@ packages:
   unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
 
+  undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -1431,7 +1444,7 @@ snapshots:
 
   '@emnapi/runtime@0.44.0':
     dependencies:
-      tslib: 2.5.0
+      tslib: 2.6.2
     optional: true
 
   '@eslint/eslintrc@1.4.1':
@@ -1602,7 +1615,9 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
-  '@types/node@18.7.3': {}
+  '@types/node@18.19.71':
+    dependencies:
+      undici-types: 5.26.5
 
   '@types/prop-types@15.7.5': {}
 
@@ -1996,7 +2011,7 @@ snapshots:
       eslint: 8.22.0
       eslint-import-resolver-node: 0.3.7
       eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.27.5(eslint@8.22.0))(eslint@8.22.0)
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.1(eslint@8.22.0)(typescript@4.7.4))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.27.5(eslint@8.22.0))(eslint@8.22.0))(eslint@8.22.0)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.1(eslint@8.22.0)(typescript@4.7.4))(eslint-import-resolver-typescript@2.7.1)(eslint@8.22.0)
       eslint-plugin-jsx-a11y: 6.7.1(eslint@8.22.0)
       eslint-plugin-react: 7.32.2(eslint@8.22.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.22.0)
@@ -2018,7 +2033,7 @@ snapshots:
     dependencies:
       debug: 4.3.4
       eslint: 8.22.0
-      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.1(eslint@8.22.0)(typescript@4.7.4))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.27.5(eslint@8.22.0))(eslint@8.22.0))(eslint@8.22.0)
+      eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.1(eslint@8.22.0)(typescript@4.7.4))(eslint-import-resolver-typescript@2.7.1)(eslint@8.22.0)
       glob: 7.2.3
       is-glob: 4.0.3
       resolve: 1.22.2
@@ -2037,7 +2052,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.1(eslint@8.22.0)(typescript@4.7.4))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.27.5(eslint@8.22.0))(eslint@8.22.0))(eslint@8.22.0):
+  eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.1(eslint@8.22.0)(typescript@4.7.4))(eslint-import-resolver-typescript@2.7.1)(eslint@8.22.0):
     dependencies:
       array-includes: 3.1.6
       array.prototype.flat: 1.3.1
@@ -2883,6 +2898,9 @@ snapshots:
 
   tslib@2.5.0: {}
 
+  tslib@2.6.2:
+    optional: true
+
   tsutils@3.21.0(typescript@4.7.4):
     dependencies:
       tslib: 1.14.1
@@ -2909,6 +2927,8 @@ snapshots:
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
 
+  undici-types@5.26.5: {}
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.0

pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-onlyBuiltDependencies:
-  - sharp

public/opensearch.xml

@@ -1,7 +0,0 @@
-<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
-  <ShortName>libremdb</ShortName>
-  <Description>Search libremdb</Description>
-  <InputEncoding>UTF-8</InputEncoding>
-  <Image width="16" height="16" type="image/x-icon">https://libremdb.iket.me/favicon.ico</Image>
-  <Url type="text/html" method="get" template="https://libremdb.iket.me/find?q={searchTerms}"/>
-</OpenSearchDescription>

src/components/error/ErrorInfo.tsx

@@ -11,7 +11,6 @@ type Props = {
   message: string;
   statusCode?: number;
   originalPath?: string;
-  stack?: string;
   /** props specific to error boundary. */
   misc?: {
     subtext: string;
@@ -20,9 +19,7 @@ type Props = {
   };
 };
 
-const isDev = process.env.NODE_ENV === 'development';
+const ErrorInfo = ({ message, statusCode, misc, originalPath }: Props) => {
-
-const ErrorInfo = ({ message, statusCode, misc, originalPath, stack }: Props) => {
   const title = statusCode ? `${message} (${statusCode})` : message;
   return (
     <>
@@ -42,11 +39,6 @@ const ErrorInfo = ({ message, statusCode, misc, originalPath, stack }: Props) =>
           <use href='/svg/sadgnu.svg#sad-gnu'></use>
         </svg>
         <h1 className={`heading heading__primary ${styles.heading}`}>{title}</h1>
-        {Boolean(stack && isDev) && (
-          <pre className={styles.stack}>
-            <code>{stack}</code>
-          </pre>
-        )}
         {misc ? (
           <>
             <p>{misc.subtext}</p>
@@ -72,13 +64,6 @@ const ErrorInfo = ({ message, statusCode, misc, originalPath, stack }: Props) =>
             .
           </p>
         )}
-        <p>
-          If you think this shouldn't happen,{' '}
-          <Link href='/contact'>
-            <a className='link'>let it be known</a>
-          </Link>
-          .
-        </p>
       </Layout>
     </>
   );

src/components/media/Media.tsx

@@ -14,41 +14,32 @@ type Props = {
 const Media = ({ className, media }: Props) => {
   return (
     <div className={`${className} ${styles.media}`}>
-      {(media.trailers?.length || !!media.videos.total) && (
+      {(media.trailer || !!media.videos.total) && (
         <section className={styles.videos}>
           <h2 className='heading heading__secondary'>Videos</h2>
 
           <div className={styles.videos__container}>
-            {media.trailers?.map(trailer => (
+            {media.trailer && (
-              <div className={styles.trailer} key={trailer.id}>
+              <div className={styles.trailer}>
                 <video
-                  aria-label={trailer.caption ?? 'trailer video'}
+                  aria-label='trailer video'
                   controls
                   playsInline
-                  poster={getProxiedIMDbImgUrl(modifyIMDbImg(trailer.thumbnail))}
+                  poster={getProxiedIMDbImgUrl(modifyIMDbImg(media.trailer.thumbnail))}
                   className={styles.trailer__video}
                   preload='none'
-                  muted
                 >
-                  {trailer.urls.map(source => (
+                  {media.trailer.urls.map(source => (
                     <source
                       key={source.url}
-                      type='video/mp4'
+                      type={source.mimeType ?? undefined}
                       src={getProxiedIMDbImgUrl(source.url)}
-                      media={source.resolution !== 'SD' ? '(min-width: 450px)' : undefined}
                       data-res={source.resolution}
                     />
                   ))}
-
-                  <p>
-                    {trailer.caption}:{' '}
-                    <Link href={getProxiedIMDbImgUrl(trailer.urls[0]?.url)}>
-                      <a className='link'>link</a>
-                    </Link>
-                  </p>
                 </video>
               </div>
-            ))}
+            )}
 
             {!!media.videos.total &&
               media.videos.videos.map(video => (

src/components/meta/Meta.tsx

@@ -36,13 +36,6 @@ const Meta = ({
       <meta property='og:locale' content='en_US' />
       <meta property='og:type' content='video.movie' />
       <meta property='og:image' content={url.toString()} />
-
-      <link
-        rel='search'
-        type='application/opensearchdescription+xml'
-        href='/opensearch.xml'
-        title='libremdb'
-      ></link>
     </Head>
   );
 };

src/components/name/DidYouKnow.tsx

@@ -9,10 +9,6 @@ type Props = {
 const DidYouKnow = ({ data }: Props) => (
   <section className={styles.container}>
     <h2 className='heading heading__secondary'>Did you know</h2>
-    {isEmpty(data) ? (
-      <p>Nothing interesting to show.</p>
-    ) : (
-      <>
     {!!data.trivia?.total && (
       <section>
         <h3 className='heading heading__tertiary'>Trivia</h3>
@@ -49,14 +45,7 @@ const DidYouKnow = ({ data }: Props) => (
         </p>
       </section>
     )}
-      </>
-    )}
   </section>
 );
 
 export default DidYouKnow;
-
-const isEmpty = (data: Props['data']) =>
-  Boolean(
-    !data.nicknames.length && !data.quotes && !data.salary && !data.trademark && !data.trivia
-  );

src/components/title/Basic.tsx

@@ -86,21 +86,6 @@ const Basic = ({ data, className }: Props) => {
           ))}
         </p>
       )}
-
-      {!!data.interests.length && (
-        <p className={styles.genres}>
-          <span className={styles.genres__heading}>Interests: </span>
-          {data.interests.map((interest, i) => (
-            <Fragment key={interest.id}>
-              {i > 0 && ', '}
-              <Link href={`/interest/${interest.id}`}>
-                <a className={styles.link}>{interest.text}</a>
-              </Link>
-            </Fragment>
-          ))}
-        </p>
-      )}
-
       <p className={styles.overview}>
         <span className={styles.overview__heading}>Plot: </span>
         <span className={styles.overview__text}>{data.plot || '-'}</span>

src/components/title/DidYouKnow.tsx

@@ -7,13 +7,7 @@ type Props = {
 };
 
 const DidYouKnow = ({ data }: Props) => {
-  if (!Object.keys(data).length)
+  if (!Object.keys(data).length) return <></>;
-    return (
-      <section className={styles.didYouKnow}>
-        <h2 className='heading heading__secondary'>Did you know</h2>
-        <p>Nothing interesting to show.</p>
-      </section>
-    );
   return (
     <section className={styles.didYouKnow}>
       <h2 className='heading heading__secondary'>Did you know</h2>

src/components/title/Reviews.tsx

@@ -1,127 +1,82 @@
 import { useRouter } from 'next/router';
 import Link from 'next/link';
-import type { Reviews as TReviews } from 'src/interfaces/shared/title';
+import { Reviews } from 'src/interfaces/shared/title';
 import { formatNumber } from 'src/utils/helpers';
 import styles from 'src/styles/modules/components/title/reviews.module.scss';
 
 type Props = {
-  reviews: TReviews;
+  reviews: Reviews;
 };
 
 const Reviews = ({ reviews }: Props) => {
-  return (
-    <section className={styles.reviews}>
-      <h2 className='heading heading__secondary'>Reviews</h2>
-
-      <RatingsDistribution ratings={reviews.ratingsDistribution} />
-
-      <section className={styles.userReviews}>
-        <h3 className='heading heading__tertiary'>User Reviews</h3>
-        {reviews.featuredReviews ? (
-          <ul className={styles.userReviews__list} role='list'>
-            {reviews.featuredReviews.map(featuredReview => (
-              <li key={featuredReview.id}>
-                <details className={styles.review}>
-                  <summary className={styles.review__summary}>
-                    <strong>{featuredReview.review.summary}</strong>
-                  </summary>
-                  <div
-                    className={styles.review__text}
-                    dangerouslySetInnerHTML={{
-                      __html: featuredReview.review.html,
-                    }}
-                  ></div>
-                  <footer className={styles.review__metadata}>
-                    <p>
-                      {featuredReview.rating && <span>Rated {featuredReview.rating}/10</span>}
-                      <span>
-                        {' '}
-                        by{' '}
-                        <Link href={`/user/${featuredReview.reviewer.id}`}>
-                          <a className='link'>{featuredReview.reviewer.name}</a>
-                        </Link>
-                      </span>
-                    </p>
-                  </footer>
-                </details>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <p>No reviews yet.</p>
-        )}
-      </section>
-
-      {reviews.ai?.summary && (
-        <details className={styles.reviewAi}>
-          <summary className='heading heading__tertiary'>AI Summary</summary>
-          <p dangerouslySetInnerHTML={{ __html: reviews.ai.summary }} />
-          <ul>
-            {reviews.ai.themes.map(theme => (
-              <li key={theme.id}>{theme.text}</li>
-            ))}
-          </ul>
-        </details>
-      )}
-
-      <ReviewStats reviews={reviews} />
-    </section>
-  );
-};
-
-export default Reviews;
-
-const RatingsDistribution = ({ ratings }: { ratings: Props['reviews']['ratingsDistribution'] }) => {
-  const maxRating = Math.max(...ratings.map(r => r.votes));
-
-  return (
-    <div className={styles.ratingsDistribution}>
-      <h3 className='heading heading__tertiary'>Ratings Distribution</h3>
-      {ratings.length ? (
-        <ul>
-          {ratings.map(rating => (
-            <li
-              key={rating.rating}
-              style={
-                {
-                  '--bar-height': `${((rating.votes / maxRating) * 100).toFixed(2)}%`,
-                } as React.CSSProperties
-              }
-            >
-              <span>
-                {rating.rating} <span>({formatNumber(rating.votes)})</span>
-              </span>
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <p>No ratings yet.</p>
-      )}
-    </div>
-  );
-};
-
-const ReviewStats = ({ reviews }: { reviews: Props['reviews'] }) => {
   const router = useRouter();
   const { titleId } = router.query;
 
   return (
-    <div className={styles.reviewStats}>
+    <section className={styles.reviews}>
+      <h2 className="heading heading__secondary">Reviews</h2>
+
+      {reviews.featuredReview && (
+        <article className={styles.reviews__reviewContainer}>
+          <details className={styles.review}>
+            <summary className={styles.review__summary}>
+              <strong>{reviews.featuredReview.review.summary}</strong>
+            </summary>
+            <div
+              className={styles.review__text}
+              dangerouslySetInnerHTML={{
+                __html: reviews.featuredReview.review.html,
+              }}
+            ></div>
+          </details>
+          <footer className={styles.review__metadata}>
+            <p>
+              {reviews.featuredReview.rating && (
+                <span>Rated {reviews.featuredReview.rating}/10</span>
+              )}
+              <span>
+                {' '}
+                by{' '}
+                <Link href={`/user/${reviews.featuredReview.reviewer.id}`}>
+                  <a className="link">{reviews.featuredReview.reviewer.name}</a>
+                </Link>
+              </span>
+              <span> on {reviews.featuredReview.date}.</span>
+            </p>
+            <p>
+              <span>
+                {formatNumber(reviews.featuredReview.votes.up)} upvotes
+              </span>
+              <span>
+                , {formatNumber(reviews.featuredReview.votes.down)} downvotes
+              </span>
+            </p>
+          </footer>
+        </article>
+      )}
+
+      <div className={styles.reviews__stats}>
         <p>
           <Link href={`/title/${titleId}/reviews`}>
-          <a className='link'>{formatNumber(reviews.numUserReviews)} User reviews</a>
+            <a className="link">
+              {formatNumber(reviews.numUserReviews)} User reviews
+            </a>
           </Link>
         </p>
         <p>
           <Link href={`/title/${titleId}/externalreviews`}>
-          <a className='link'>{formatNumber(reviews.numCriticReviews)} Critic reviews</a>
+            <a className="link">
+              {formatNumber(reviews.numCriticReviews)} Critic reviews
+            </a>
           </Link>
         </p>
         <p>
           <Link href={`/title/${titleId}/criticreviews`}>
-          <a className='link'> {reviews.metacriticScore} Metascore</a>
+            <a className="link"> {reviews.metacriticScore} Metascore</a>
           </Link>
         </p>
       </div>
+    </section>
   );
 };
+export default Reviews;

src/interfaces/misc/rawName.ts

@@ -143,7 +143,7 @@ export default interface Name {
                   value: string;
                   language: string;
                 };
-                videoMimeType?: string;
+                mimeType?: string;
                 url: string;
               }>;
               recommendedTimedTextTrack?: {

src/interfaces/shared/error.ts

@@ -1,3 +1,3 @@
 import { AppError as AppErrorClass } from 'src/utils/helpers';
 
-export type AppError = Pick<InstanceType<typeof AppErrorClass>, 'message' | 'statusCode' | 'stack'>;
+export type AppError = Omit<InstanceType<typeof AppErrorClass>, 'name'>;

src/pages/find/index.tsx

@@ -67,13 +67,13 @@ export const getServerSideProps: GetServerSideProps<Data, FindQueryParams> = asy
       props: { data: { title: query, results: res }, error: null, originalPath },
     };
   } catch (error) {
-    const err = getErrorProperties(error);
+    const { message, statusCode } = getErrorProperties(error);
-    ctx.res.statusCode = err.statusCode;
+    ctx.res.statusCode = statusCode;
-    ctx.res.statusMessage = err.message;
+    ctx.res.statusMessage = message;
 
     return {
       props: {
-        error: { message: err.message, statusCode: err.statusCode, stack: err.format() },
+        error: { message, statusCode },
         data: { title: query, results: null },
         originalPath,
       },

src/pages/name/[nameId]/index.tsx

@@ -55,17 +55,11 @@ export const getServerSideProps: GetServerSideProps<Data, Params> = async ctx =>
 
     return { props: { data, error: null, originalPath } };
   } catch (error) {
-    const err = getErrorProperties(error);
+    const { message, statusCode } = getErrorProperties(error);
-    ctx.res.statusCode = err.statusCode;
+    ctx.res.statusCode = statusCode;
-    ctx.res.statusMessage = err.message;
+    ctx.res.statusMessage = message;
 
-    return {
+    return { props: { error: { message, statusCode }, data: null, originalPath } };
-      props: {
-        error: { message: err.message, statusCode: err.statusCode, stack: err.format() },
-        data: null,
-        originalPath,
-      },
-    };
   }
 };
 

src/pages/title/[titleId]/index.tsx

@@ -5,7 +5,7 @@ import ErrorInfo from 'src/components/error/ErrorInfo';
 import Media from 'src/components/media/Media';
 import { Basic, Cast, DidYouKnow, Info, MoreLikeThis, Reviews } from 'src/components/title';
 import Title from 'src/interfaces/shared/title';
-import type { AppError } from 'src/interfaces/shared/error';
+import { AppError } from 'src/interfaces/shared/error';
 import getOrSetApiCache from 'src/utils/getOrSetApiCache';
 import title from 'src/utils/fetchers/title';
 import { getErrorProperties, getProxiedIMDbImgUrl } from 'src/utils/helpers';
@@ -63,18 +63,12 @@ export const getServerSideProps: GetServerSideProps<Data, Params> = async ctx =>
     const data = await getOrSetApiCache(titleKey(titleId), title, titleId);
 
     return { props: { data, error: null, originalPath } };
-  } catch (e) {
+  } catch (error) {
-    const err = getErrorProperties(e);
+    const { message, statusCode } = getErrorProperties(error);
-    ctx.res.statusCode = err.statusCode;
+    ctx.res.statusCode = statusCode;
-    ctx.res.statusMessage = err.message;
+    ctx.res.statusMessage = message;
 
-    const error = {
+    return { props: { error: { message, statusCode }, data: null, originalPath } };
-      message: err.message,
-      statusCode: err.statusCode,
-      stack: err.format(),
-    };
-    console.error(err);
-    return { props: { error, data: null, originalPath } };
   }
 };
 

src/styles/modules/components/error/error-info.module.scss

@@ -8,7 +8,7 @@
   display: grid;
   justify-content: center;
   justify-items: center;
-  gap: var(--comp-whitespace);
+  gap: var(--spacer-1);
 
   @include helper.bp('bp-700') {
     --doc-whitespace: var(--spacer-5);
@@ -31,19 +31,6 @@
   text-align: center;
 }
 
-.stack {
-  max-width: 90%;
-  max-height: 20rem;
-  padding: var(--spacer-3);
-  white-space: pre-wrap;
-  overflow: scroll;
-
-  user-select: all;
-
-  border-radius: var(--spacer-1);
-  background-color: var(--clr-bg-muted);
-}
-
 .button {
   align-self: end;
   

src/styles/modules/components/title/reviews.module.scss

@@ -1,94 +1,26 @@
 .reviews {
   display: grid;
   gap: var(--comp-whitespace);
+
+  &__reviewContainer {
+    // background-color: antiquewhite;
   }
 
-.ratingsDistribution {
+  &__stats {
-  overflow: hidden;
-
-  ul {
-    list-style: none;
-    display: flex;
-    gap: var(--spacer-2);
-    overflow-x: auto;
-    padding-block: var(--spacer-1);
-  }
-
-  li {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    height: 5em;
-    align-items: center;
-    flex-shrink: 0;
-
-    &::before {
-      display: block;
-      content: '';
-
-      height: var(--bar-height);
-      margin-top: auto;
-      background-color: var(--clr-fill);
-      width: var(--spacer-6);
-      border-radius: var(--spacer-0);
-    }
-
-    span {
-      font-weight: var(--fw-bold);
-
-      > span {
-        font-weight: initial;
-        font-size: 0.9em;
-        color: var(--clr-text-muted);
-      }
-    }
-  }
-}
-
-.reviewAi {
-  summary {
-    cursor: pointer;
-  }
-  p {
-    padding-block: var(--spacer-2);
-  }
-  ul {
-    list-style: none;
-    display: flex;
-    gap: var(--spacer-1);
-    flex-wrap: wrap;
-
-    li {
-      padding: var(--spacer-1);
-      background-color: var(--clr-bg-muted);
-      border-radius: var(--spacer-0);
-    }
-  }
-}
-
-.reviewStats {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacer-2);
   }
-
-.userReviews {
-
-  &__list {
-    padding-block-start: var(--spacer-1);
-    display: grid;
-    gap: var(--spacer-1);
-    list-style: none;
-  }
 }
 
 .review {
   &__summary {
+    font-size: calc(var(--fs-5) * 1.1);
     cursor: pointer;
   }
 
   &__text,
   &__metadata {
-    padding-top: var(--spacer-1);
+    padding-top: var(--spacer-2);
   }
 }

src/utils/cleaners/name.ts

@@ -42,18 +42,18 @@ const cleanName = (rawData: RawName) => {
     },
     media: {
       ...(main.primaryVideos.edges.length && {
-        trailers: main.primaryVideos.edges.map(trailer => ({
+        trailer: {
-          id: trailer.node.id,
+          id: main.primaryVideos.edges[0].node.id,
-          isMature: trailer.node.isMature,
+          isMature: main.primaryVideos.edges[0].node.isMature,
-          thumbnail: trailer.node.thumbnail.url,
+          thumbnail: main.primaryVideos.edges[0].node.thumbnail.url,
-          runtime: trailer.node.runtime.value,
+          runtime: main.primaryVideos.edges[0].node.runtime.value,
-          caption: trailer.node.description?.value ?? null,
+          caption: main.primaryVideos.edges[0].node.description?.value ?? null,
-          urls: trailer.node.playbackURLs.map(url => ({
+          urls: main.primaryVideos.edges[0].node.playbackURLs.map(url => ({
-            resolution: url.displayName.value as 'SD' | '480p',
+            resolution: url.displayName.value,
-            mimeType: url.videoMimeType ?? null,
+            mimeType: url.mimeType ?? null,
             url: url.url,
           })),
-        })),
+        },
       }),
       images: {
         total: misc.images.total,

src/utils/cleaners/title.ts

@@ -12,7 +12,6 @@ const cleanTitle = (rawData: RawTitle) => {
     titleId: main.id,
     basic: {
       id: main.id,
-      isAdult: main.isAdult,
       title: main.titleText.text,
       // ...(main.originalTitleText.text.toLowerCase() !==
       //   main.titleText.text.toLowerCase() && {
@@ -51,10 +50,6 @@ const cleanTitle = (rawData: RawTitle) => {
         id: genre.id,
         text: genre.text,
       })),
-      interests: main.interests.edges.map(interest => ({
-        id: interest.node.id,
-        text: interest.node.primaryText.text,
-      })),
       plot: main.plot?.plotText?.plainText || null,
       primaryCrew: main.principalCredits.map(type => ({
         type: { category: type.category.text, id: type.category.id },
@@ -81,18 +76,18 @@ const cleanTitle = (rawData: RawTitle) => {
     })),
     media: {
       ...(main.primaryVideos.edges.length && {
-        trailers: main.primaryVideos.edges.map(trailer => ({
+        trailer: {
-          id: trailer.node.id,
+          id: main.primaryVideos.edges[0].node.id,
-          isMature: trailer.node.isMature,
+          isMature: main.primaryVideos.edges[0].node.isMature,
-          thumbnail: trailer.node.thumbnail.url,
+          thumbnail: main.primaryVideos.edges[0].node.thumbnail.url,
-          runtime: trailer.node.runtime.value,
+          runtime: main.primaryVideos.edges[0].node.runtime.value,
-          caption: trailer.node.description?.value ?? null,
+          caption: main.primaryVideos.edges[0].node.description?.value ?? null,
-          urls: trailer.node.playbackURLs.map(url => ({
+          urls: main.primaryVideos.edges[0].node.playbackURLs.map(url => ({
-            resolution: url.displayName.value as 'SD' | '480p',
+            resolution: url.displayName.value,
-            mimeType: url.videoMimeType ?? null,
+            mimeType: url.mimeType ?? null,
             url: url.url,
           })),
-        })),
+        },
       }),
       images: {
         total: misc.titleMainImages.total,
@@ -127,9 +122,6 @@ const cleanTitle = (rawData: RawTitle) => {
       }),
       topRating: misc.ratingsSummary.topRanking?.rank || null,
     },
-    watchlist: {
-      text: main.engagementStatistics?.watchlistStatistics.displayableCount.text || null,
-    },
     meta: {
       // for tv episode
       ...(main.series && {
@@ -216,34 +208,24 @@ const cleanTitle = (rawData: RawTitle) => {
       metacriticScore: main.metacritic?.metascore.score || null,
       numCriticReviews: main.criticReviewsTotal.total,
       numUserReviews: misc.reviews.total,
-      ratingsDistribution:
-        misc.aggregateRatingsBreakdown.histogram?.histogramValues.map(v => ({
-          rating: v.rating,
-          votes: v.voteCount,
-        })) || [],
-      ...(misc.reviewSummary && {
-        ai: {
-          summary: misc.reviewSummary.overall.medium.value.plaidHtml,
-          themes: misc.reviewSummary.themes.map(t => ({
-            text: t.label.value,
-            id: t.themeId,
-            sentiment: t.sentiment as 'POSITIVE' | 'NEGATIVE',
-          })),
-        },
-      }),
       ...(misc.featuredReviews.edges.length && {
-        featuredReviews: misc.featuredReviews.edges.map(featuredReview => ({
+        featuredReview: {
-          id: featuredReview.node.id,
+          id: misc.featuredReviews.edges[0].node.id,
           reviewer: {
-            id: featuredReview.node.author.userId,
+            id: misc.featuredReviews.edges[0].node.author.userId,
-            name: featuredReview.node.author.username.text,
+            name: misc.featuredReviews.edges[0].node.author.nickName,
+          },
+          rating: misc.featuredReviews.edges[0].node.authorRating,
+          date: formatDate(misc.featuredReviews.edges[0].node.submissionDate),
+          votes: {
+            up: misc.featuredReviews.edges[0].node.helpfulness.upVotes,
+            down: misc.featuredReviews.edges[0].node.helpfulness.downVotes,
           },
-          rating: featuredReview.node.authorRating,
           review: {
-            summary: featuredReview.node.summary.originalText,
+            summary: misc.featuredReviews.edges[0].node.summary.originalText,
-            html: featuredReview.node.text.originalText.plaidHtml,
+            html: misc.featuredReviews.edges[0].node.text.originalText.plaidHtml,
+          },
         },
-        })),
       }),
     },
     details: {
@@ -260,8 +242,8 @@ const cleanTitle = (rawData: RawTitle) => {
           },
         },
       }),
-      ...(misc.countriesDetails && {
+      ...(misc.countriesOfOrigin && {
-        countriesOfOrigin: misc.countriesDetails.countries.map(country => ({
+        countriesOfOrigin: misc.countriesOfOrigin.countries.map(country => ({
           id: country.id,
           text: country.text,
         })),
@@ -371,10 +353,6 @@ const cleanTitle = (rawData: RawTitle) => {
       },
       genres: title.node.titleGenres?.genres.map(genre => genre.genre.text) ?? null,
     })),
-    faqs: {
-      questions: misc.faqs.edges.map(q => ({ question: q.node.question, id: q.node.id })),
-      total: misc.faqs.total,
-    },
   };
 
   return cleanData;

src/utils/helpers.ts

@@ -74,33 +74,12 @@ export const getProxiedIMDbImgUrl = (url: string) => {
 };
 
 export const AppError = class extends Error {
-  constructor(message: string, public statusCode: number, cause?: unknown) {
+  constructor(message: string, public statusCode: number, errorOptions?: unknown) {
-    const _cause = cause ? AppError.toError(cause) : undefined;
+    const saneErrorOptions = getErrorOptions(errorOptions);
-    super(message, { cause: _cause });
+    super(message, saneErrorOptions);
 
     Error.captureStackTrace(this, AppError);
-  }
+    if (process.env.NODE_ENV === 'development') console.error(this);
-
-  static toError(err: unknown) {
-    if (err instanceof Error) return err;
-    return new Error(`Unexpected: ${JSON.stringify(err)}`);
-  }
-
-  format() {
-    let str = '';
-    let cur: Error | null = this;
-    let depth = 0;
-
-    while (cur && depth <= 4) {
-      if (cur.stack) str += `${cur.stack}\n`;
-      else str += `${cur.name}: ${cur.message}\n`;
-
-      cur = cur.cause instanceof Error ? cur.cause : null;
-      if (cur) str += 'Caused by:\n';
-      depth++;
-    }
-
-    return str.trimEnd();
   }
 };
 
@@ -131,6 +110,19 @@ export const isLocalStorageAvailable = () => {
   }
 };
 
+const getErrorOptions = (error: unknown): ErrorOptions | undefined => {
+  if (!error || typeof error !== 'object') return undefined;
+
+  let cause: unknown;
+  // @ts-expect-error it's not an error! just that project's ts version is old, which can't be upgraded
+  if ('cause' in error) cause = error.cause;
+  // @ts-expect-error it's not an error! just that project's ts version is old, which can't be upgraded
+  else if ('stack' in error) cause = error.stack;
+
+  // @ts-expect-error it's not an error! just that project's ts version is old, which can't be upgraded
+  return { cause };
+};
+
 export const getErrorProperties = (
   error: unknown,
   message = 'Something went very wrong',

ups.json

@@ -1,5 +0,0 @@
-{
-  "upstream": "https://github.com/zyachel/libremdb",
-  "provider": "github",
-  "commit": "dded1e59ca6df40ccb1b3f2c70de14144afbe922"
-}