Add similar movies

next.config.js

@@ -10,6 +10,11 @@ module.exports = {
   },
   i18n,
   images: {
-    domains: ['image.tmdb.org'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'image.tmdb.org',
+      },
+    ],
   },
 }

package.json

@@ -21,6 +21,8 @@
   },
   "dependencies": {
     "@meilisearch/instant-meilisearch": "0.16.0",
+    "@twicpics/components": "^0.29.2",
+    "clsx": "^2.1.1",
     "dotenv": "^16.0.3",
     "lodash.get": "^4.4.2",
     "next": "^14.1.0",
@@ -54,7 +56,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-prettier": "^3.4.0",
-    "meilisearch": "^0.37.0",
+    "meilisearch": "^0.41.0",
     "ofetch": "^1.3.3",
     "postcss": "^8.4.38",
     "prettier": "^2.3.2",

public/locales/en/common.json

@@ -7,7 +7,6 @@
   "movies": "Movies",
   "results": "Results",
   "synopsis": "Synopsis",
-  "overview": "Overview",
   "whereToWatch": "Where to Watch",
   "cast": "Cast",
   "buy": "Buy",
@@ -34,5 +33,21 @@
     "heading": "What's trending?",
     "semanticLabel": "semantic",
     "semanticTooltip": "Determines how semantic search affects the results."
+  },
+
+  "overview": {
+    "heading": "Overview"
+  },
+
+  "platforms": {
+    "heading": "Platforms",
+    "description": "Find platforms to watch {{title}}.",
+    "mobileDescription": "Where can I watch {{title}}?"
+  },
+
+  "similar": {
+    "heading": "Similar movies",
+    "mobileHeading": "Similar",
+    "description": "Watch movies similar to {{title}}."
   }
 }

scripts/update-settings.ts

@@ -1,6 +1,6 @@
 import { Task } from 'meilisearch'
 import { ofetch } from 'ofetch'
-import { checkEnv } from './utils'
+import { checkEnv, isUsingMeilisearchCloud } from './utils'
 
 type TaskResponse = {
   taskUid: Task['uid']
@@ -33,15 +33,19 @@ const indexesConfig = [
 async function main() {
   console.log(`Connecting to: ${MEILISEARCH_HOST}`)
 
-  await ofetch<TaskResponse>(`${MEILISEARCH_HOST}/experimental-features`, {
-    method: 'PATCH',
-    headers: {
-      Authorization: `Bearer ${MEILISEARCH_ADMIN_API_KEY}`,
-    },
-    body: {
-      vectorStore: true,
-    },
-  })
+  const shouldEnableVectorStore = !isUsingMeilisearchCloud(MEILISEARCH_HOST)
+  if (shouldEnableVectorStore) {
+    console.log('Enabling vector store')
+    await ofetch<TaskResponse>(`${MEILISEARCH_HOST}/experimental-features`, {
+      method: 'PATCH',
+      headers: {
+        Authorization: `Bearer ${MEILISEARCH_ADMIN_API_KEY}`,
+      },
+      body: {
+        vectorStore: true,
+      },
+    })
+  }
 
   for (const { indexName, documentTemplate } of indexesConfig) {
     const endpoint = `${MEILISEARCH_HOST}/indexes/${indexName}/settings`

scripts/utils.ts

@@ -1,17 +1,21 @@
-import dotenv from 'dotenv';
+import dotenv from 'dotenv'
 
-dotenv.config(); // load environment variables from a .env file into process.env
+dotenv.config() // load environment variables from a .env file into process.env
 
-export const checkEnv = (variables: string | string[]) => {
+export const checkEnv = (variables: string | string[]) => {
   if (Array.isArray(variables)) {
     variables.forEach(variable => {
       if (process.env[variable] === undefined) {
-        throw new Error(`Please set the ${variable} environment variable.`);
+        throw new Error(`Please set the ${variable} environment variable.`)
       }
     })
     return
   }
   if (process.env[variables] === undefined) {
-    throw new Error(`Please set the ${variables} environment variable.`);
+    throw new Error(`Please set the ${variables} environment variable.`)
   }
 }
+
+export const isUsingMeilisearchCloud = host => {
+  return host.includes('edge.meilisearch') || host.includes('meilisearch.io')
+}

src/components/Card.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import styled from 'styled-components'
+import { TwicImg } from '@twicpics/components/react'
+import { getTwicpicsUrl } from '~/utils'
+import { MOVIE_POSTER_ASPECT_RATIO } from '~/lib/constants'
+import Typography from 'components/Typography'
+import Rating from 'components/Rating'
+import { MovieData } from '~/types'
+import clsx from 'clsx'
+
+type CardProps = MovieData & {
+  className?: string
+  imageClassName?: string
+}
+
+const Title = styled(Typography)`
+  color: var(--800-100);
+`
+
+const ReleaseYear = styled(Typography)`
+  color: var(--gray-300);
+`
+
+const Card = ({
+  poster_path = '',
+  title = '',
+  release_date = '',
+  vote_average,
+  ...props
+}: CardProps) => {
+  const releaseYear = new Date(release_date).getFullYear()
+  return (
+    <div className={clsx('flex flex-col', props.className)}>
+      <div
+        className={clsx(
+          'rounded-lg overflow-hidden mb-2',
+          props.imageClassName
+        )}
+      >
+        <TwicImg
+          src={getTwicpicsUrl('tmdb', poster_path)}
+          ratio={MOVIE_POSTER_ASPECT_RATIO}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <Title variant="cardTitle" className="text-wrap">
+        {title}
+      </Title>
+      <div className="flex items-center flex-wrap space-x-4">
+        <ReleaseYear variant="subtitle">{releaseYear}</ReleaseYear>
+        <Rating rating={Math.round((vote_average / 2) * 10) / 10} />
+      </div>
+    </div>
+  )
+}
+
+export default Card

src/components/MovieContent/BackdropImage.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import get from 'utils/get'
 
-const BackdropImage = styled.div`
+const Wrapper = styled.div`
   background: linear-gradient(
       to bottom,
       rgba(var(--movie-content-image-gradient), 0.5) 0%,
@@ -24,4 +24,8 @@ const BackdropImage = styled.div`
     padding: 246px 50px 0;
   }
 `
+
+const BackdropImage = ({ children, imageUrl }) => {
+  return <Wrapper $image={imageUrl}>{children}</Wrapper>
+}
 export default BackdropImage

src/components/MovieContent/Cast.js

@@ -1,30 +1,17 @@
 import React from 'react'
-import styled from 'styled-components'
 import People from 'components/People'
-import get from 'utils/get'
-
-const Peoples = styled.div`
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-gap: 24px;
-
-  @media (min-width: ${get('breakpoints.desktop')}) {
-    margin-top: 22px;
-    grid-template-columns: repeat(8, 1fr);
-    grid-gap: 30px;
-  }
-`
+import clsx from 'clsx'
 
 const Cast = ({ cast, ...props }) => (
-  <Peoples {...props}>
+  <div {...props} className={clsx('flex flex-wrap gap-6', props.className)}>
     {cast.map((people, index) => (
       <People
         key={`${people?.name}-${people?.character || index}`}
         people={people}
         data-cast={people?.name}
       />
     ))}
-  </Peoples>
+  </div>
 )
 
 export default Cast