├── .env.example
├── pnpm-workspace.yaml
├── public
    ├── robots.txt
    ├── .DS_Store
    ├── movies.png
    ├── movies.webp
    ├── stars.webp
    ├── movies-sm.webp
    ├── social-card.png
    ├── stars-filled.webp
    ├── tmdb2.svg
    └── tmdb.svg
├── vercel.json
├── server
    └── api
    │   └── index.ts
├── .npmrc
├── eslint.config.js
├── proxy
    ├── .env.example
    ├── routes
    │   ├── index.ts
    │   ├── ipx
    │   │   └── [...path].ts
    │   └── tmdb
    │   │   └── [...path].ts
    ├── tsconfig.json
    ├── package.json
    ├── nitro.config.ts
    └── README.md
├── i18n.config.ts
├── tests
    ├── unit
    │   ├── config.ts
    │   └── mocks.ts
    └── e2e
    │   └── homapage.spec.ts
├── components
    ├── video
    │   ├── Grid.vue
    │   ├── Card.vue
    │   └── Card.nuxt.test.ts
    ├── media
    │   ├── Grid.vue
    │   ├── Videos.vue
    │   ├── Overview.vue
    │   ├── Details.vue
    │   ├── Card.vue
    │   ├── Photos.vue
    │   ├── AutoLoadGrid.vue
    │   ├── Hero.vue
    │   └── Info.vue
    ├── carousel
    │   ├── Items.vue
    │   ├── AutoQuery.vue
    │   └── Base.vue
    ├── StarsRate.vue
    ├── photo
    │   ├── Card.vue
    │   ├── Card.nuxt.test.ts
    │   ├── Modal.vue
    │   └── Modal.nuxt.test.ts
    ├── LanguageSwitcher.vue
    ├── person
    │   ├── Credits.vue
    │   ├── Photos.vue
    │   ├── Card.vue
    │   ├── CreditsList.vue
    │   ├── Details.vue
    │   ├── Info.vue
    │   ├── Photos.nuxt.test.ts
    │   ├── Details.nuxt.test.ts
    │   ├── Credits.nuxt.test.ts
    │   ├── Card.nuxt.test.ts
    │   ├── Info.nuxt.test.ts
    │   └── CreditsList.nuxt.test.ts
    ├── IframeModal.vue
    ├── NavBar.vue
    ├── StarsRate.nuxt.test.ts
    ├── TheFooter.vue
    ├── icon
    │   ├── IconTMDB.vue
    │   ├── IconNuxt3.vue
    │   ├── IconVercel.vue
    │   └── IconNuxt.vue
    └── ExternalLinks.vue
├── tsconfig.json
├── .vscode
    └── settings.json
├── .gitignore
├── composables
    ├── nuxt.ts
    ├── item.ts
    ├── nuxt.nuxt.test.ts
    ├── utils.ts
    ├── utils.nuxt.test.ts
    ├── tmdb.ts
    └── item.nuxt.test.ts
├── constants
    ├── images.ts
    ├── lists.ts
    └── languages.ts
├── plugins
    └── scroll.client.ts
├── middleware
    └── disable-vue-transitions.global.ts
├── vitest.config.ts
├── .github
    └── workflows
    │   ├── provenance.yml
    │   ├── tests-unit.yml
    │   └── tests-e2e.yml
├── pages
    ├── person
    │   └── [id].vue
    ├── [type]
    │   ├── category
    │   │   └── [query].vue
    │   ├── [id].vue
    │   └── index.vue
    ├── genre
    │   └── [no]
    │   │   ├── tv.vue
    │   │   └── movie.vue
    ├── index.vue
    └── search.vue
├── error.vue
├── LICENSE
├── unocss.config.ts
├── app.vue
├── playwright.config.ts
├── internationalization
    ├── zh-CN.json
    ├── ja.json
    ├── it.json
    ├── en.json
    ├── fa-IR.json
    ├── de-DE.json
    ├── ru-RU.json
    ├── vi.json
    ├── fr-FR.json
    ├── es-ES.json
    ├── uk-UA.json
    ├── pt-PT.json
    └── pt-BR.json
├── README.md
├── package.json
├── types.ts
└── nuxt.config.ts


/.env.example:
--------------------------------------------------------------------------------
1 | BASE_URL=http://localhost:3000
2 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - proxy
3 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "github": {
3 |     "silent": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt/movies/HEAD/public/.DS_Store


--------------------------------------------------------------------------------
/public/movies.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt/movies/HEAD/public/movies.png


--------------------------------------------------------------------------------
/public/movies.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt/movies/HEAD/public/movies.webp


--------------------------------------------------------------------------------
/public/stars.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt/movies/HEAD/public/stars.webp


--------------------------------------------------------------------------------
/server/api/index.ts:
--------------------------------------------------------------------------------
1 | export default defineEventHandler(() => 'Nuxt Movies API')
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | shell-emulator=true
4 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import antfu from '@antfu/eslint-config'
2 | 
3 | export default antfu()
4 | 


--------------------------------------------------------------------------------
/public/movies-sm.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt/movies/HEAD/public/movies-sm.webp


--------------------------------------------------------------------------------
/public/social-card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt/movies/HEAD/public/social-card.png


--------------------------------------------------------------------------------
/public/stars-filled.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nuxt/movies/HEAD/public/stars-filled.webp


--------------------------------------------------------------------------------
/proxy/.env.example:
--------------------------------------------------------------------------------
1 | # https://developers.themoviedb.org/3/getting-started/introduction
2 | TMDB_API_KEY=
3 | 


--------------------------------------------------------------------------------
/i18n.config.ts:
--------------------------------------------------------------------------------
1 | export default defineI18nConfig(() => {
2 |   return {
3 |     fallbackLocale: 'en',
4 |   }
5 | })
6 | 


--------------------------------------------------------------------------------
/tests/unit/config.ts:
--------------------------------------------------------------------------------
1 | const config = useRuntimeConfig()
2 | 
3 | export const baseUrl = config.public.apiBaseUrl
4 | 


--------------------------------------------------------------------------------
/components/video/Grid.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div grid="~ cols-minmax-20rem" gap4 p8>
3 |     <slot />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/components/media/Grid.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div grid="~ cols-minmax-10rem lg:cols-minmax-15rem" gap4 p8>
3 |     <slot />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/proxy/routes/index.ts:
--------------------------------------------------------------------------------
1 | export default eventHandler(() => {
2 |   return 'Nuxt Movies Proxy: <a href="https://github.com/nuxt/movies/tree/main/proxy">Learn more</a>'
3 | })
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./.nuxt/tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "strict": true
 5 |   },
 6 |   "exclude": [
 7 |     "proxy/**"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "cSpell.words": [
3 |     "TMDB"
4 |   ],
5 |   "eslint.useFlatConfig": true,
6 |   "prettier.enable": false,
7 |   "editor.formatOnSave": false
8 | }
9 | 


--------------------------------------------------------------------------------
/proxy/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nitro/types/tsconfig.json",
3 |   "compilerOptions": {
4 |     "strict": true,
5 |     "allowSyntheticDefaultImports": true,
6 |     "skipLibCheck": true
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log
 3 | dist
 4 | .output
 5 | .nuxt
 6 | .env
 7 | .nitro
 8 | .DS_Store
 9 | .idea
10 | .vercel
11 | 
12 | coverage
13 | test-results
14 | /playwright-report/
15 | /blob-report/
16 | /playwright/.cache/
17 | 


--------------------------------------------------------------------------------
/composables/nuxt.ts:
--------------------------------------------------------------------------------
1 | import type { ComputedRef } from 'vue'
2 | 
3 | export function useRouteParam<T>(name: string, init?: T): ComputedRef<T> {
4 |   const route = useRoute()
5 |   return computed(() => route.params[name] as any ?? init)
6 | }
7 | 


--------------------------------------------------------------------------------
/constants/images.ts:
--------------------------------------------------------------------------------
1 | export const YOUTUBE_THUMBNAIL_QUALITY_NAME = 'maxresdefault.jpg'
2 | 
3 | export const TMDB_IMAGE_BASE_THUMBNAIL = 'https://image.tmdb.org/t/p/original'
4 | export const TMDB_IMAGE_BASE_ORIGINAL = 'https://image.tmdb.org/t/p/original'
5 | 


--------------------------------------------------------------------------------
/plugins/scroll.client.ts:
--------------------------------------------------------------------------------
 1 | import { createRouterScroller } from 'vue-router-better-scroller'
 2 | 
 3 | export default defineNuxtPlugin(({ vueApp }) => {
 4 |   vueApp.use(createRouterScroller({
 5 |     selectors: {
 6 |       '#app-scroller': true,
 7 |     },
 8 |   }))
 9 | })
10 | 


--------------------------------------------------------------------------------
/middleware/disable-vue-transitions.global.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtRouteMiddleware((to) => {
2 |   if (typeof document !== 'undefined' && !document.startViewTransition)
3 |     return
4 | 
5 |   // Disable built-in Vue transitions
6 |   // to.meta.pageTransition = false
7 |   to.meta.layoutTransition = false
8 | })
9 | 


--------------------------------------------------------------------------------
/proxy/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "PORT=3001 nitropack dev",
 5 |     "prepare": "nitropack prepare",
 6 |     "build": "nitropack build"
 7 |   },
 8 |   "devDependencies": {
 9 |     "nitropack": "^2.9.6",
10 |     "ofetch": "^1.3.4",
11 |     "typescript": "^5.4.5"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/proxy/nitro.config.ts:
--------------------------------------------------------------------------------
 1 | import process from 'node:process'
 2 | import { defineNitroConfig } from 'nitropack/config'
 3 | 
 4 | export default defineNitroConfig({
 5 |   routeRules: {
 6 |     '/**': { cors: true, swr: 3600 },
 7 |   },
 8 |   runtimeConfig: {
 9 |     tmdb: {
10 |       apiKey: process.env.TMDB_API_KEY || '',
11 |     },
12 |   },
13 | })
14 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineVitestConfig } from '@nuxt/test-utils/config'
 2 | 
 3 | export default defineVitestConfig({
 4 |   test: {
 5 |     include: ['**/tests/unit/**/*.test.ts', '**/components/**/*.test.ts', '**/composables/**/*.test.ts'],
 6 |     name: 'unit',
 7 |     environment: 'node',
 8 |     coverage: {
 9 |       include: ['**/components/**/*.vue', '**/composables/**/*.ts'],
10 |     },
11 |   },
12 | })
13 | 


--------------------------------------------------------------------------------
/components/carousel/Items.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media, MediaType } from '~/types'
 3 | 
 4 | defineProps<{
 5 |   type: MediaType
 6 |   items: Media[]
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <CarouselBase>
12 |     <MediaCard
13 |       v-for="i of items"
14 |       :key="i.id"
15 |       :item="i"
16 |       :type="type"
17 |       flex-1 w-40 md:w-60
18 |     />
19 |   </CarouselBase>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/tests/e2e/homapage.spec.ts:
--------------------------------------------------------------------------------
 1 | import { expect, test } from '@nuxt/test-utils/playwright'
 2 | 
 3 | test('homepage displays correctly 1', async ({ page, goto }) => {
 4 |   await goto('', { waitUntil: 'hydration' })
 5 |   await expect(page.getByRole('heading')).toContainText('', { ignoreCase: true })
 6 | })
 7 | 
 8 | test('homepage displays correctly 2', async ({ page, goto }) => {
 9 |   await goto('', { waitUntil: 'hydration' })
10 |   await expect(page.getByRole('heading')).toContainText('', { ignoreCase: true })
11 | })
12 | 


--------------------------------------------------------------------------------
/components/media/Videos.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media } from '~/types'
 3 | 
 4 | defineProps<{
 5 |   item: Media
 6 | }>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <div flex="~ col" px4 md:px14 py4 gap6>
11 |     <div op50>
12 |       {{ $t('{numberOfVideos} Videos', { numberOfVideos: item.videos?.results?.length || 0 }) }}
13 |     </div>
14 |     <div grid="~ cols-minmax-20rem" gap4>
15 |       <VideoCard v-for="i of item.videos?.results" :key="i.id" :item="i" />
16 |     </div>
17 |   </div>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/.github/workflows/provenance.yml:
--------------------------------------------------------------------------------
 1 | name: ci
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |   pull_request:
 8 |     branches:
 9 |       - main
10 | permissions:
11 |   contents: read
12 | jobs:
13 |   check-provenance:
14 |     runs-on: ubuntu-latest
15 |     steps:
16 |       - uses: actions/checkout@v4
17 |         with:
18 |           fetch-depth: 0
19 |       - name: Check provenance downgrades
20 |         uses: danielroe/provenance-action@a5a718233ca12eff67651fcf29a030bbbd5b3ca1 # v0.1.0
21 |         with:
22 |           fail-on-provenance-change: true
23 | 


--------------------------------------------------------------------------------
/components/media/Overview.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media, MediaType } from '~/types'
 3 | 
 4 | defineProps<{
 5 |   item: Media
 6 |   type: MediaType
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <MediaInfo :item="item" :type="type" />
12 |   <CarouselBase v-if="item.credits?.cast?.length">
13 |     <template #title>
14 |       {{ $t('Cast') }}
15 |     </template>
16 |     <PersonCard
17 |       v-for="i of item.credits?.cast"
18 |       :key="i.id"
19 |       :item="i"
20 |       flex-1 w-50
21 |     />
22 |   </CarouselBase>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/pages/person/[id].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const id = useRouteParam<string>('id')
 3 | const person = await getPerson(id.value)
 4 | 
 5 | const $img = useImage()
 6 | 
 7 | useHead({
 8 |   title: person.name,
 9 |   meta: [
10 |     { name: 'description', content: person.biography || person.name },
11 |     { property: 'og:image', content: $img(`/tmdb${person.profile_path}`, { width: 1200, height: 630 }) },
12 |   ],
13 | })
14 | </script>
15 | 
16 | <template>
17 |   <div>
18 |     <PersonDetails :item="person" />
19 |     <TheFooter />
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/components/StarsRate.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = withDefaults(
 3 |   defineProps<{
 4 |     value?: number
 5 |   }>(),
 6 |   {
 7 |     value: 0,
 8 |   },
 9 | )
10 | 
11 | const style = computed(() => ({
12 |   'clip-path': `inset(0 ${(10 - props.value) * 10}% 0 0)`,
13 | }))
14 | </script>
15 | 
16 | <template>
17 |   <div relative aspect="11/2" filter-hue-rotate-320deg>
18 |     <img src="/stars.webp" absolute inset-0 aria-hidden="true">
19 |     <img src="/stars-filled.webp" absolute inset-0 aria-hidden="true" :style="style">
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/proxy/routes/ipx/[...path].ts:
--------------------------------------------------------------------------------
 1 | import { lazyEventHandler, useBase } from 'h3'
 2 | import { createIPX, createIPXH3Handler, ipxHttpStorage } from 'ipx'
 3 | 
 4 | export default lazyEventHandler(() => {
 5 |   const ipx = createIPX({
 6 |     maxAge: 3600,
 7 |     alias: {
 8 |       '/tmdb': 'https://image.tmdb.org/t/p/original/',
 9 |       '/youtube': 'https://img.youtube.com/',
10 |     },
11 |     storage: ipxHttpStorage({
12 |       domains: [
13 |         'image.tmdb.org',
14 |         'img.youtube.com',
15 |       ],
16 |     }),
17 |   })
18 | 
19 |   return useBase('/ipx', createIPXH3Handler(ipx))
20 | })
21 | 


--------------------------------------------------------------------------------
/components/photo/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Image } from '~/types'
 3 | 
 4 | const props = defineProps<{
 5 |   item: Image
 6 | }>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <button
11 |     text-left block
12 |     bg-gray4:10 transition
13 |     duration-400 relative hover="scale-102 z10"
14 |     title="View photo"
15 |     data-testid="photo-button"
16 |   >
17 |     <NuxtImg
18 |       width="400"
19 |       height="600"
20 |       format="webp"
21 |       :src="`/tmdb${props.item.file_path}`"
22 |       alt="Photo"
23 |       w-full h-full object-cover
24 |       data-testid="photo-image"
25 |     />
26 |   </button>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/constants/lists.ts:
--------------------------------------------------------------------------------
 1 | import type { QueryItem } from '~/types'
 2 | 
 3 | export const QUERY_LIST = {
 4 |   movie: <QueryItem[]>([
 5 |     { type: 'movie', title: 'Popular Movies', query: 'popular' },
 6 |     { type: 'movie', title: 'Top Rated Movies', query: 'top_rated' },
 7 |     { type: 'movie', title: 'Upcoming Movies', query: 'upcoming' },
 8 |     { type: 'movie', title: 'Now Playing Movies', query: 'now_playing' },
 9 |   ]),
10 |   tv: <QueryItem[]>([
11 |     { type: 'tv', title: 'Popular TV Shows', query: 'popular' },
12 |     { type: 'tv', title: 'Top Rated TV Shows', query: 'top_rated' },
13 |     { type: 'tv', title: 'TV Shows Airing Today', query: 'airing_today' },
14 |   ]),
15 | }
16 | 


--------------------------------------------------------------------------------
/pages/[type]/category/[query].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media, MediaType } from '~/types'
 3 | 
 4 | const route = useRoute()
 5 | const query = computed(() => route.params.query as string)
 6 | const type = computed(() => route.params.type as MediaType || 'movie')
 7 | 
 8 | const items: Media[] = reactive([])
 9 | 
10 | async function fetch(page: number) {
11 |   items.push(...(await listMedia(type.value, query.value, page)).results)
12 | }
13 | </script>
14 | 
15 | <template>
16 |   <MediaAutoLoadGrid
17 |     :fetch="fetch"
18 |     :type="type"
19 |     :items="items"
20 |   >
21 |     <span case-capital>{{ query.replace(/_/g, ' ') }}</span>
22 |     <span>{{ type === 'tv' ? 'TV' : 'Movies' }}</span>
23 |   </MediaAutoLoadGrid>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/pages/genre/[no]/tv.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media, MediaType } from '~/types'
 3 | 
 4 | const route = useRoute()
 5 | const no = computed(() => route.params.no as string)
 6 | const type = 'tv' as MediaType
 7 | 
 8 | const items: Media[] = reactive([])
 9 | 
10 | const list = await getGenreList(type)
11 | const name = list.find(item => item.id === +no.value)?.name
12 | async function fetch(page: number) {
13 |   const data = await getMediaByGenre(type, no.value, page)
14 |   items.push(...data.results)
15 | }
16 | </script>
17 | 
18 | <template>
19 |   <MediaAutoLoadGrid
20 |     :fetch="fetch"
21 |     :type="type"
22 |     :items="items"
23 |   >
24 |     {{ type === 'tv' ? 'TV' : 'Movie' }} Genre: {{ name }}
25 |   </MediaAutoLoadGrid>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/pages/genre/[no]/movie.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media, MediaType } from '~/types'
 3 | 
 4 | const route = useRoute()
 5 | const no = computed(() => route.params.no as string)
 6 | const type = 'movie' as MediaType
 7 | 
 8 | const items: Media[] = reactive([])
 9 | 
10 | const list = await getGenreList(type)
11 | const name = list.find(item => item.id === +no.value)?.name
12 | async function fetch(page: number) {
13 |   const data = await getMediaByGenre(type, no.value, page)
14 |   items.push(...data.results)
15 | }
16 | </script>
17 | 
18 | <template>
19 |   <MediaAutoLoadGrid
20 |     :fetch="fetch"
21 |     :type="type"
22 |     :items="items"
23 |   >
24 |     {{ type === 'tv' ? 'TV' : 'Movie' }} Genre: {{ name }}
25 |   </MediaAutoLoadGrid>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/components/LanguageSwitcher.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const { locale, locales, setLocale } = useI18n()
 3 | 
 4 | const availableLocales = computed(() => {
 5 |   return (locales.value)
 6 | })
 7 | 
 8 | function updateLocale(event) {
 9 |   setLocale(event.target.value)
10 |   window.location.reload()
11 | }
12 | 
13 | onMounted(() => {
14 |   const langSwitcher = document.querySelector('#langSwitcher')
15 |   langSwitcher.value = locale.value
16 | })
17 | </script>
18 | 
19 | <template>
20 |   <div flex gap2 items-center mt-5>
21 |     Language:
22 |     <select id="langSwitcher" rounded-md text-sm p-1 @change="updateLocale">
23 |       <option v-for="loc in availableLocales" :key="loc.code" :value="loc.code" p-1>
24 |         {{ loc.name }}
25 |       </option>
26 |     </select>
27 |   </div>
28 | </template>
29 | 


--------------------------------------------------------------------------------
/components/carousel/AutoQuery.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { QueryItem } from '~/types'
 3 | 
 4 | const props = defineProps<{
 5 |   query: QueryItem
 6 | }>()
 7 | 
 8 | const item = await listMedia(props.query.type, props.query.query, 1)
 9 | </script>
10 | 
11 | <template>
12 |   <CarouselBase>
13 |     <template #title>
14 |       {{ $t(query.title) }}
15 |     </template>
16 |     <template #more>
17 |       <NuxtLink :to="`/${props.query.type}/category/${props.query.query}`" n-link>
18 |         {{ $t('Explore more') }}
19 |       </NuxtLink>
20 |     </template>
21 |     <MediaCard
22 |       v-for="i of item?.results || []"
23 |       :key="i.id"
24 |       :item="i"
25 |       :query="props.query"
26 |       :type="props.query.type"
27 |       flex-1 w-40 md:w-60
28 |     />
29 |   </CarouselBase>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/components/person/Credits.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Person } from '~/types'
 3 | 
 4 | const props = withDefaults(defineProps<{
 5 |   item: Person
 6 | }>(), {
 7 |   item: () => ({} as Person),
 8 | })
 9 | </script>
10 | 
11 | <template>
12 |   <div flex="~ col" px16 gap5 data-testid="person-credits-container">
13 |     <PersonCreditsList
14 |       v-if="props.item.combined_credits?.cast?.length"
15 |       :title="$t('Acting Credits')"
16 |       :items="props.item.combined_credits.cast"
17 |       data-testid="acting-credits-list"
18 |     />
19 |     <PersonCreditsList
20 |       v-if="props.item.combined_credits?.crew?.length"
21 |       :title="$t('Production Credits')"
22 |       :items="props.item.combined_credits.crew"
23 |       data-testid="production-credits-list"
24 |     />
25 |   </div>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/composables/item.ts:
--------------------------------------------------------------------------------
 1 | import type { Image, Media, Video } from '~/types'
 2 | import { useSingleton } from './utils'
 3 | 
 4 | export function getTrailer(item: Media) {
 5 |   const trailer = item.videos?.results?.find(video => video.type === 'Trailer')
 6 |   return getVideoLink(trailer)
 7 | }
 8 | 
 9 | export function getVideoLink(item?: Video) {
10 |   if (!item?.key)
11 |     return null
12 |   return `https://www.youtube.com/embed/${item.key}?rel=0&showinfo=0&autoplay=0`
13 | }
14 | 
15 | const [
16 |   provideIframeModal,
17 |   useIframeModal,
18 | ] = useSingleton<(url: string) => void>()
19 | 
20 | const [
21 |   provideImageModal,
22 |   useImageModal,
23 | ] = useSingleton<(photos: Image[], index: number) => void>()
24 | 
25 | export {
26 |   provideIframeModal,
27 |   provideImageModal,
28 |   useIframeModal,
29 |   useImageModal,
30 | }
31 | 


--------------------------------------------------------------------------------
/.github/workflows/tests-unit.yml:
--------------------------------------------------------------------------------
 1 | name: Tests unit
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches: [main]
 6 |   push:
 7 |     branches: [main]
 8 |   workflow_dispatch:
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 | 
14 |     strategy:
15 |       fail-fast: true
16 | 
17 |     steps:
18 |       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
19 |       - run: corepack enable
20 |       - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
21 |         with:
22 |           node-version: lts/-1
23 |           cache: pnpm
24 | 
25 |       - name: Install dependencies
26 |         run: pnpm install
27 | 
28 |       - name: Run tests
29 |         run: pnpm run test:unit
30 | 
31 |       - name: Lint project
32 |         run: pnpm run lint
33 | 
34 |       - name: Typecheck project
35 |         run: pnpm run typecheck
36 | 


--------------------------------------------------------------------------------
/components/person/Photos.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Person } from '~/types'
 3 | 
 4 | defineProps<{
 5 |   item: Person
 6 | }>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <div flex="~ col" px16 gap6 data-testid="person-photos-container">
11 |     <div flex mt-10 gap-2 items-baseline>
12 |       <div text-2xl data-testid="person-photos-title">
13 |         {{ $t('Person Photos') }}
14 |       </div>
15 |       <div text-sm op50 data-testid="number-of-images">
16 |         {{ $t('{numberOfImages} Images', { numberOfImages: item.images?.profiles?.length }) }}
17 |       </div>
18 |     </div>
19 |     <div grid="~ cols-minmax-10rem lg:cols-minmax-15rem" gap4 data-testid="photos-grid">
20 |       <PhotoCard
21 |         v-for="i of item.images?.profiles"
22 |         :key="i.file_path"
23 |         :item="i"
24 |         class="aspect-9/16"
25 |         data-testid="photo-card"
26 |       />
27 |     </div>
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/proxy/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt Movies Proxy
 2 | 
 3 | Proxy hosts is a lightweight proxy server for the tmdb api and youtube images.
 4 | 
 5 | - Speeds up API responses by leveraging the SWR cache.
 6 | - Speeds up the development by removing the requirement of having a local token set up.
 7 | - Speeds up the performances by optimizing images using [unjs/ipx](https://github.com/unjs/ipx).
 8 | - Allows easily deploying the main project to any hosting platform, yet leveraging caching and image optimization.
 9 | 
10 | ## Setup
11 | 
12 | 1. Take a copy of `.env.example` and re-name to `.env`
13 | 2. Get your [TMDB](https://developers.themoviedb.org/3) API key
14 | 3. Enter the details into the `.env` file
15 | 4. Start the dev server with the following scripts
16 | 
17 | ``` bash
18 | # Enable pnpm
19 | $ corepack enable
20 | 
21 | # Install dependencies
22 | $ pnpm install
23 | 
24 | # Start dev server with hot reload at localhost:3001
25 | $ pnpm dev
26 | ```
27 | 


--------------------------------------------------------------------------------
/components/person/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Person } from '~/types'
 3 | 
 4 | defineProps<{
 5 |   item: Person
 6 | }>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <NuxtLink :to="`/person/${item.id}`" data-testid="person-link">
11 |     <div block bg-gray4:10 p1 class="aspect-10/16" transition duration-400 hover="scale-105 z10" data-testid="person-container">
12 |       <NuxtImg v-if="item.profile_path" width="500" height="800" format="webp" :src="`/tmdb${item.profile_path}`" :alt="item.name" w-full h-full object-cover data-testid="person-image" />
13 |       <div v-else h-full op10 data-testid="person-placeholder">
14 |         <div i-ph:user ma text-4xl />
15 |       </div>
16 |     </div>
17 |     <div mt-2 data-testid="person-name">
18 |       {{ item.name }}
19 |     </div>
20 |     <div op50 data-testid="person-character">
21 |       {{ item.character || item.known_for_department }}
22 |     </div>
23 |   </NuxtLink>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/components/IframeModal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { onKeyDown } from '@vueuse/core'
 3 | 
 4 | const src = ref<string | null>(null)
 5 | 
 6 | function showModal(link: string) {
 7 |   src.value = link
 8 | }
 9 | const el = ref<HTMLIFrameElement>()
10 | 
11 | provideIframeModal(showModal)
12 | 
13 | onKeyDown('Escape', () => {
14 |   if (src.value)
15 |     src.value = null
16 | })
17 | 
18 | onClickOutside(el, () => {
19 |   src.value = null
20 | })
21 | </script>
22 | 
23 | <template>
24 |   <div v-if="src" fixed top-0 left-0 right-0 bottom-0 z-10 bg-black:90 flex>
25 |     <button
26 |       absolute top-1 right-1 z-100 p3 text-3xl n-link bg-black:60 rounded-full
27 |       title="Close"
28 |       @click="src = null"
29 |     >
30 |       <div i-carbon-close />
31 |     </button>
32 |     <iframe
33 |       ref="el"
34 |       allow="autoplay; encrypted-media"
35 |       allowfullscreen
36 |       :src="src" w-full m5 lg:m20 border-none
37 |     />
38 |   </div>
39 | </template>
40 | 


--------------------------------------------------------------------------------
/components/media/Details.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media, MediaType } from '~/types'
 3 | 
 4 | defineProps<{
 5 |   item: Media
 6 |   type: MediaType
 7 | }>()
 8 | 
 9 | const tab = ref<'overview' | 'videos' | 'photos'>('overview')
10 | </script>
11 | 
12 | <template>
13 |   <div flex items-center justify-center gap8 py6>
14 |     <button n-tab :class="{ 'n-tab-active': tab === 'overview' }" @click="tab = 'overview'">
15 |       {{ $t('Overview') }}
16 |     </button>
17 |     <button n-tab :class="{ 'n-tab-active': tab === 'videos' }" @click="tab = 'videos'">
18 |       {{ $t('Videos') }}
19 |     </button>
20 |     <button n-tab :class="{ 'n-tab-active': tab === 'photos' }" @click="tab = 'photos'">
21 |       {{ $t('Media Photos') }}
22 |     </button>
23 |   </div>
24 |   <MediaOverview v-if="tab === 'overview'" :item="item" :type="type" />
25 |   <MediaVideos v-if="tab === 'videos'" :item="item" />
26 |   <MediaPhotos v-if="tab === 'photos'" :item="item" />
27 | </template>
28 | 


--------------------------------------------------------------------------------
/error.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const props = defineProps({
 3 |   error: Object,
 4 | })
 5 | 
 6 | const message = computed(() => String(props.error?.message || ''))
 7 | const is404 = computed(() => props.error?.statusCode === 404 || message.value?.includes('404'))
 8 | const isDev = process.dev
 9 | 
10 | function handleError() {
11 |   return clearError({ redirect: '/' })
12 | }
13 | </script>
14 | 
15 | <template>
16 |   <NuxtLayout>
17 |     <div flex="~ col" h-screen text-center items-center justify-center gap4>
18 |       <div text-3xl>
19 |         {{ is404 ? 'This page could not be found' : 'An error occurred' }}
20 |       </div>
21 |       <div text-xl op50>
22 |         Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
23 |       </div>
24 |       <pre v-if="isDev">{{ error }}</pre>
25 |       <button n-link border px4 py1 rounded @click="handleError">
26 |         Go Back
27 |       </button>
28 |     </div>
29 |   </NuxtLayout>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/proxy/routes/tmdb/[...path].ts:
--------------------------------------------------------------------------------
 1 | const TMDB_API_URL = 'https://api.themoviedb.org/3'
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const query = getQuery(event)
 5 |   // eslint-disable-next-line no-console
 6 |   console.log(
 7 |     'Fetching TMDB API',
 8 |     {
 9 |       url: getRequestURL(event).href,
10 |       query,
11 |       params: event.context.params,
12 |     },
13 |   )
14 |   const config = useRuntimeConfig()
15 |   if (!config.tmdb.apiKey)
16 |     throw new Error('TMDB API key is not set')
17 |   try {
18 |     return await $fetch(event.context.params!.path, {
19 |       baseURL: TMDB_API_URL,
20 |       params: {
21 |         api_key: config.tmdb.apiKey,
22 |         language: 'en-US',
23 |         ...query,
24 |       },
25 |       headers: {
26 |         Accept: 'application/json',
27 |       },
28 |     })
29 |   }
30 |   catch (e: any) {
31 |     const status = e?.response?.status || 500
32 |     setResponseStatus(event, status)
33 |     return {
34 |       error: String(e)?.replace(config.tmdb.apiKey, '***'),
35 |     }
36 |   }
37 | })
38 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { MediaType } from '~/types'
 3 | import { QUERY_LIST } from '~/constants/lists'
 4 | 
 5 | const route = useRoute()
 6 | const type = computed(() => route.params.type as MediaType || 'movie')
 7 | 
 8 | const queries = computed(() => [
 9 |   QUERY_LIST.movie[0],
10 |   QUERY_LIST.tv[0],
11 | ])
12 | 
13 | const AsyncWrapper = defineComponent({
14 |   name: 'AsyncWrapper',
15 |   async setup(_, ctx) {
16 |     const list = await listMedia(type.value, queries.value[0].query, 1)
17 |     const item = await getMedia(type.value, list.results[0].id)
18 |     return () => ctx.slots?.default?.({ item })
19 |   },
20 | })
21 | </script>
22 | 
23 | <template>
24 |   <div>
25 |     <AsyncWrapper v-slot="{ item }">
26 |       <NuxtLink :to="`/${type}/${item.id}`">
27 |         <MediaHero :item="item" />
28 |       </NuxtLink>
29 |     </AsyncWrapper>
30 |     <CarouselAutoQuery
31 |       v-for="query of queries"
32 |       :key="query.type + query.query"
33 |       :query="query"
34 |     />
35 |     <TheFooter />
36 |   </div>
37 | </template>
38 | 


--------------------------------------------------------------------------------
/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     flex="~ row lg:col"
 4 |     justify-evenly items-center
 5 |     py5 lg:px5
 6 |     border="t lg:r base"
 7 |     bg-black
 8 |   >
 9 |     <NuxtLink v-slot="{ isActive }" to="/" :title="$t('Home')">
10 |       <div
11 |         text-2xl
12 |         :class="isActive ? 'i-ph-house-fill text-primary' : 'i-ph-house'"
13 |       />
14 |     </NuxtLink>
15 |     <NuxtLink v-slot="{ isActive }" to="/movie" :title="$t('Movies')">
16 |       <div
17 |         text-2xl
18 |         :class="isActive ? 'i-ph-film-strip-fill text-primary' : 'i-ph-film-strip'"
19 |       />
20 |     </NuxtLink>
21 |     <NuxtLink v-slot="{ isActive }" to="/tv" :title="$t('TV Shows')">
22 |       <div
23 |         text-2xl
24 |         :class="isActive ? 'i-ph-television-simple-fill text-primary' : 'i-ph-television-simple'"
25 |       />
26 |     </NuxtLink>
27 |     <NuxtLink v-slot="{ isActive }" to="/search" :title="$t('Search')">
28 |       <div
29 |         text-2xl
30 |         :class="isActive ? 'i-ph-magnifying-glass-fill text-primary' : 'i-ph-magnifying-glass'"
31 |       />
32 |     </NuxtLink>
33 |   </div>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2022-present - Nuxt Team
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/person/CreditsList.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media } from '~/types'
 3 | 
 4 | const props = defineProps<{
 5 |   items: Media[]
 6 |   title: string
 7 | }>()
 8 | 
 9 | const credits = [...props.items]
10 |   .sort((a, b) => (b.release_date || b.first_air_date || '9999')
11 |     .localeCompare(a.release_date || a.first_air_date || '9999'))
12 | </script>
13 | 
14 | <template>
15 |   <div flex="~ col" gap1 data-testid="credits-container">
16 |     <h2 text-2xl pb4 data-testid="credits-title">
17 |       {{ title }}
18 |     </h2>
19 |     <NuxtLink
20 |       v-for="i of credits"
21 |       :key="i.id"
22 |       :to="`/${i.media_type}/${i.id}`"
23 |       flex="col" gap2 px2 py3 bg-gray:5
24 |       data-testid="credit-item"
25 |     >
26 |       <div text-center w-20 tabular-nums data-testid="credit-date">
27 |         {{ i.release_date ? i.release_date.slice(0, 4) : i.first_air_date ? i.first_air_date.slice(0, 4) : '-' }}
28 |       </div>
29 |       <div data-testid="credit-title">
30 |         {{ i.title || i.name }}
31 |       </div>
32 |       <div op50 data-testid="credit-character">
33 |         {{ i.character ? $t('as {character}', { character: i.character }) : '' }}
34 |       </div>
35 |     </NuxtLink>
36 |   </div>
37 | </template>
38 | 


--------------------------------------------------------------------------------
/components/video/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Video } from '~/types'
 3 | 
 4 | const props = defineProps<{
 5 |   item: Video
 6 | }>()
 7 | 
 8 | const showModal = useIframeModal()
 9 | function play() {
10 |   return showModal(getVideoLink(props.item)!)
11 | }
12 | </script>
13 | 
14 | <template>
15 |   <button pb2 text-left data-testid="play-button" @click="play()">
16 |     <div
17 |       block bg-gray4:10 p1 flex
18 |       class="aspect-16/9"
19 |       transition duration-400 relative
20 |       hover="scale-102 z10"
21 |       data-testid="video-thumbnail"
22 |     >
23 |       <NuxtImg
24 |         :src="`/youtube/vi/${item.key}/maxresdefault.jpg`"
25 |         width="400"
26 |         height="600"
27 |         format="webp"
28 |         :alt="props.item.name"
29 |         w-full h-full object-cover
30 |         data-testid="video-image"
31 |       />
32 |       <div flex w-full h-full absolute inset-0 op20 hover:op100 transition>
33 |         <div i-ph-play ma text-3xl data-testid="play-icon" />
34 |       </div>
35 |     </div>
36 |     <div mt-2 data-testid="video-name">
37 |       {{ props.item.name }}
38 |     </div>
39 |     <div op60 text-sm data-testid="video-type">
40 |       {{ props.item.type }}
41 |     </div>
42 |   </button>
43 | </template>
44 | 


--------------------------------------------------------------------------------
/components/media/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media, MediaType, QueryItem } from '~/types'
 3 | 
 4 | defineProps<{
 5 |   type: MediaType
 6 |   item: Media
 7 |   query?: QueryItem
 8 | }>()
 9 | </script>
10 | 
11 | <template>
12 |   <NuxtLink
13 |     :to="`/${item.media_type || type}/${item.id}`" pb2
14 |   >
15 |     <div
16 |       block bg-gray4:10 p1 class="aspect-10/16"
17 |       transition duration-400
18 |       hover="scale-105 z10"
19 |     >
20 |       <NuxtImg
21 |         v-if="item.poster_path"
22 |         width="400"
23 |         height="600"
24 |         format="webp"
25 |         :src="`/tmdb${item.poster_path}`"
26 |         :alt="item.title || item.name"
27 |         w-full h-full object-cover
28 |         :style="{ 'view-transition-name': `item-${item.id}${query?.query ? `-${query.query}` : ''}` }"
29 |       />
30 |       <div v-else h-full op10 flex>
31 |         <div i-ph:question ma text-4xl />
32 |       </div>
33 |     </div>
34 |     <div mt-2>
35 |       {{ item.title || item.name }}
36 |     </div>
37 |     <div flex text-sm gap-2 items-center>
38 |       <StarsRate w-20 :value="item.vote_average" />
39 |       <div op60>
40 |         {{ formatVote(item.vote_average) }}
41 |       </div>
42 |     </div>
43 |   </NuxtLink>
44 | </template>
45 | 


--------------------------------------------------------------------------------
/unocss.config.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   defineConfig,
 3 |   presetAttributify,
 4 |   presetIcons,
 5 |   presetTypography,
 6 |   presetUno,
 7 |   presetWebFonts,
 8 |   transformerDirectives,
 9 |   transformerVariantGroup,
10 | } from 'unocss'
11 | 
12 | // @unocss-include
13 | 
14 | export default defineConfig({
15 |   shortcuts: [
16 |     ['n-link', 'op50 hover:(op100 text-primary) transition'],
17 |     ['n-link-text', 'n-link underline'],
18 |     ['n-tab', 'text-xl tracking-wide uppercase p3 border-b-2 border-transparent op20 transition'],
19 |     ['n-tab-active', 'border-current op100'],
20 |     ['border-base', 'border-gray-400/20'],
21 |   ],
22 |   rules: [
23 |     [/^view-transition-([\w-]+)$/, ([, name]) => ({ 'view-transition-name': name })],
24 |   ],
25 |   theme: {
26 |     colors: {
27 |       primary: '#40c1ad',
28 |     },
29 |   },
30 |   presets: [
31 |     presetUno(),
32 |     presetAttributify(),
33 |     presetIcons({
34 |       scale: 1.2,
35 |     }),
36 |     presetTypography(),
37 |     presetWebFonts({
38 |       fonts: {
39 |         sans: 'DM Sans',
40 |         serif: 'DM Serif Display',
41 |         mono: 'DM Mono',
42 |       },
43 |     }),
44 |   ],
45 |   transformers: [
46 |     transformerDirectives(),
47 |     transformerVariantGroup(),
48 |   ],
49 | })
50 | 


--------------------------------------------------------------------------------
/components/StarsRate.nuxt.test.ts:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import { describe, expect, it } from 'vitest'
 3 | import StarsRate from './StarsRate.vue'
 4 | 
 5 | describe('starsRate', () => {
 6 |   it('renders stars correctly with default value', () => {
 7 |     const wrapper = mount(StarsRate)
 8 | 
 9 |     const starsFilled = wrapper.find('img[src="/stars-filled.webp"]')
10 |     expect(starsFilled.exists()).toBe(true)
11 |     expect(starsFilled.attributes('style')).toContain('clip-path: inset(0 100% 0 0);')
12 |   })
13 | 
14 |   it('renders stars correctly with a given value', () => {
15 |     const wrapper = mount(StarsRate, {
16 |       props: {
17 |         value: 5,
18 |       },
19 |     })
20 | 
21 |     const starsFilled = wrapper.find('img[src="/stars-filled.webp"]')
22 |     expect(starsFilled.exists()).toBe(true)
23 |     expect(starsFilled.attributes('style')).toContain('clip-path: inset(0 50% 0 0);')
24 |   })
25 | 
26 |   it('renders stars correctly with a full value', () => {
27 |     const wrapper = mount(StarsRate, {
28 |       props: {
29 |         value: 10,
30 |       },
31 |     })
32 | 
33 |     const starsFilled = wrapper.find('img[src="/stars-filled.webp"]')
34 |     expect(starsFilled.exists()).toBe(true)
35 |     expect(starsFilled.attributes('style')).toContain('clip-path: inset(0 0% 0 0);')
36 |   })
37 | })
38 | 


--------------------------------------------------------------------------------
/components/person/Details.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Person } from '~/types'
 3 | 
 4 | defineProps<{
 5 |   item: Person
 6 | }>()
 7 | 
 8 | const tab = ref<'known' | 'credits' | 'photos'>('known')
 9 | </script>
10 | 
11 | <template>
12 |   <PersonInfo :item="item" />
13 |   <div flex items-center justify-center gap8 py6>
14 |     <button n-tab :class="{ 'n-tab-active': tab === 'known' }" data-testid="tab-known" @click="tab = 'known'">
15 |       {{ $t('Known For') }}
16 |     </button>
17 |     <button n-tab :class="{ 'n-tab-active': tab === 'credits' }" data-testid="tab-credits" @click="tab = 'credits'">
18 |       {{ $t('Credits') }}
19 |     </button>
20 |     <button n-tab :class="{ 'n-tab-active': tab === 'photos' }" data-testid="tab-photos" @click="tab = 'photos'">
21 |       {{ $t('Person Photos') }}
22 |     </button>
23 |   </div>
24 |   <MediaGrid v-if="tab === 'known'" data-testid="media-grid">
25 |     <template
26 |       v-for="i of item.combined_credits?.cast"
27 |       :key="i.id"
28 |     >
29 |       <MediaCard
30 |         v-if="i.release_date"
31 |         :item="i"
32 |         type="movie"
33 |         data-testid="media-card"
34 |       />
35 |     </template>
36 |   </MediaGrid>
37 |   <PersonCredits v-if="tab === 'credits'" :item="item" data-testid="person-credits" />
38 |   <PersonPhotos v-if="tab === 'photos'" :item="item" data-testid="person-photos" />
39 | </template>
40 | 


--------------------------------------------------------------------------------
/pages/[type]/[id].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { MediaType } from '~/types'
 3 | 
 4 | definePageMeta({
 5 |   key: route => route.fullPath,
 6 |   validate: ({ params }) => {
 7 |     return ['movie', 'tv'].includes(params.type as MediaType)
 8 |   },
 9 | })
10 | 
11 | const route = useRoute()
12 | const type = computed(() => route.params.type as MediaType || 'movie')
13 | const id = computed(() => route.params.id as string)
14 | 
15 | const [item, recommendations] = await Promise.all([
16 |   getMedia(type.value, id.value),
17 |   getRecommendations(type.value, id.value),
18 | ])
19 | const $img = useImage()
20 | 
21 | useHead({
22 |   title: item.name || item.title,
23 |   meta: [
24 |     { name: 'description', content: item.overview },
25 |     { property: 'og:image', content: $img(`/tmdb${item.poster_path}`, { width: 1200, height: 630 }) },
26 |   ],
27 | })
28 | </script>
29 | 
30 | <template>
31 |   <div>
32 |     <MediaHero :item="item" />
33 |     <MediaDetails :item="item" :type="type" />
34 |     <CarouselBase v-if="recommendations?.results?.length">
35 |       <template #title>
36 |         {{ $t('More like this') }}
37 |       </template>
38 |       <MediaCard
39 |         v-for="i of recommendations.results"
40 |         :key="i.id"
41 |         :item="i"
42 |         :type="type"
43 |         flex-1 w-40 md:w-60
44 |       />
45 |     </CarouselBase>
46 |     <TheFooter />
47 |   </div>
48 | </template>
49 | 


--------------------------------------------------------------------------------
/components/carousel/Base.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const scrollEl = ref<HTMLDivElement>()
 3 | 
 4 | function scrollLeft() {
 5 |   scrollEl.value?.scrollBy({
 6 |     left: -window.innerWidth,
 7 |     behavior: 'smooth',
 8 |   })
 9 | }
10 | 
11 | function scrollRight() {
12 |   scrollEl.value?.scrollBy({
13 |     left: window.innerWidth,
14 |     behavior: 'smooth',
15 |   })
16 | }
17 | </script>
18 | 
19 | <template>
20 |   <div flex py3 px10 items-center mt5>
21 |     <div text-2xl>
22 |       <slot name="title" />
23 |     </div>
24 |     <div flex-auto />
25 |     <slot name="more" />
26 |   </div>
27 |   <div relative>
28 |     <div ref="scrollEl" overflow-y-auto>
29 |       <div flex gap-2 w-max p-2 px-10>
30 |         <slot />
31 |       </div>
32 |     </div>
33 |     <button
34 |       type="button"
35 |       flex="~ col" absolute top-0 left-0 bottom-0 bg-black:50 p3 items-center justify-center op0 hover:op100 transition
36 |       title="Scroll left"
37 |       @click="scrollLeft()"
38 |     >
39 |       <div i-ph-caret-left-light text-3xl text-white />
40 |     </button>
41 |     <button
42 |       type="button"
43 |       flex="~ col" absolute top-0 right-0 bottom-0 bg-black:50 p3 items-center justify-center op0 hover:op100 transition
44 |       title="Scroll right"
45 |       @click="scrollRight()"
46 |     >
47 |       <div i-ph-caret-right-light text-3xl text-white />
48 |     </button>
49 |   </div>
50 | </template>
51 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import '@unocss/reset/tailwind.css'
 3 | 
 4 | useHead({
 5 |   htmlAttrs: {
 6 |     lang: 'en',
 7 |   },
 8 |   charset: 'utf-8',
 9 |   title: 'Nuxt Movies',
10 |   titleTemplate: title => (title !== 'Nuxt Movies' ? `${title} · Nuxt Movies` : title),
11 |   meta: [
12 |     { name: 'description', content: 'A TMDB client built with Nuxt Image to show the potential of it ✨' },
13 |     { property: 'og:image', content: 'https://movies.nuxt.space/social-card.png' },
14 |     { name: 'twitter:card', content: 'summary_large_image' },
15 |     { name: 'twitter:site', content: '@nuxt_js' },
16 |     { name: 'twitter:creator', content: '@nuxt_js' },
17 |   ],
18 |   link: [
19 |     {
20 |       rel: 'icon',
21 |       type: 'image/webp',
22 |       href: '/movies.webp',
23 |     },
24 |   ],
25 | })
26 | </script>
27 | 
28 | <template>
29 |   <NuxtLoadingIndicator />
30 |   <div h-full w-full font-sans grid="~ lt-lg:rows-[1fr_max-content] lg:cols-[max-content_1fr]" of-hidden view-transition-app transition duration-0>
31 |     <div id="app-scroller" of-x-hidden of-y-auto relative>
32 |       <NuxtPage />
33 |     </div>
34 |     <NavBar lg:order-first />
35 |     <IframeModal />
36 |     <PhotoModal />
37 |   </div>
38 | </template>
39 | 
40 | <style>
41 | html,
42 | body,
43 | #__nuxt {
44 |   height: 100vh;
45 |   margin: 0;
46 |   padding: 0;
47 |   background: #111;
48 |   color: white;
49 |   color-scheme: dark;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/components/media/Photos.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media } from '~/types'
 3 | 
 4 | defineProps<{
 5 |   item: Media
 6 | }>()
 7 | 
 8 | const show = useImageModal()
 9 | </script>
10 | 
11 | <template>
12 |   <div flex="~ col" px4 md:px16 py8 gap6>
13 |     <div flex gap-2 items-baseline>
14 |       <div text-2xl>
15 |         {{ $t('Backdrops') }}
16 |       </div>
17 |       <div text-sm op50>
18 |         {{ $t('{numberOfImages} Images', { numberOfImages: item.images?.backdrops?.length }) }}
19 |       </div>
20 |     </div>
21 |     <div grid="~ cols-minmax-20rem" gap4>
22 |       <PhotoCard
23 |         v-for="i, idx of item.images?.backdrops"
24 |         :key="i.file_path"
25 |         :item="i"
26 |         class="aspect-16/9"
27 |         w-full
28 |         @click="show(item.images!.backdrops, idx)"
29 |       />
30 |     </div>
31 |     <div flex mt-10 gap-2 items-baseline>
32 |       <div text-2xl>
33 |         {{ $t('Posters') }}
34 |       </div>
35 |       <div text-sm op50>
36 |         {{ $t('{numberOfImages} Images', { numberOfImages: item.images?.posters?.length }) }}
37 |       </div>
38 |     </div>
39 |     <div grid="~ cols-minmax-10rem lg:cols-minmax-15rem" gap4>
40 |       <PhotoCard
41 |         v-for="i, idx of item.images?.posters"
42 |         :key="i.file_path"
43 |         :item="i"
44 |         class="aspect-9/16"
45 |         @click="show(item.images!.posters, idx)"
46 |       />
47 |     </div>
48 |   </div>
49 | </template>
50 | 


--------------------------------------------------------------------------------
/pages/[type]/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { MediaType } from '~/types'
 3 | import { QUERY_LIST } from '~/constants/lists'
 4 | 
 5 | definePageMeta({
 6 |   key: route => route.fullPath,
 7 |   validate: ({ params }) => {
 8 |     return ['movie', 'tv'].includes(params.type as MediaType)
 9 |   },
10 | })
11 | 
12 | const route = useRoute()
13 | const type = computed(() => route.params.type as MediaType || 'movie')
14 | 
15 | useHead({
16 |   title: type.value === 'movie' ? 'Movies' : 'TV Shows',
17 | })
18 | 
19 | const queries = computed(() => QUERY_LIST[type.value as MediaType])
20 | 
21 | const AsyncWrapper = defineComponent(async (_, ctx) => {
22 |   if (!queries.value)
23 |     throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
24 | 
25 |   const list = await listMedia(type.value, queries.value?.[0].query, 1)
26 |   if (!list)
27 |     return () => {}
28 |   const item = await getMedia(type.value, list.results?.[0].id)
29 |   return () => ctx.slots?.default?.({ item })
30 | })
31 | </script>
32 | 
33 | <template>
34 |   <div>
35 |     <AsyncWrapper>
36 |       <template #default="{ item }">
37 |         <NuxtLink :to="`/${type}/${item.id}`">
38 |           <MediaHero :item="item" />
39 |         </NuxtLink>
40 |       </template>
41 |     </AsyncWrapper>
42 |     <CarouselAutoQuery
43 |       v-for="query of queries"
44 |       :key="query.type + query.query"
45 |       :query="query"
46 |     />
47 |     <TheFooter />
48 |   </div>
49 | </template>
50 | 


--------------------------------------------------------------------------------
/components/TheFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer p="y15 x15" flex="~ col gap4">
 3 |     <div flex="~ row gap2" items-center my2>
 4 |       <img src="/movies-sm.webp" width="25" height="25" alt="Logo">
 5 |       <div text-xl>
 6 |         Nuxt Movies
 7 |       </div>
 8 |     </div>
 9 |     <div flex="~ row gap2" items-center>
10 |       <div op50 text-sm>
11 |         Made with
12 |       </div>
13 |       <a href="https://nuxt.com/" target="_blank" title="Nuxt 3">
14 |         <IconNuxt3 h5 />
15 |       </a>
16 |     </div>
17 |     <div flex="~ row gap2" items-center>
18 |       <p text-true-gray:90 text-sm>
19 |         Data provided by&nbsp;
20 |         <a op100 target="_blank" href="https://www.themoviedb.org/" title="The Movie Database" rel="noopener" n-link-text>
21 |           <IconTMDB inline h4 />
22 |         </a>
23 |       </p>
24 |     </div>
25 |     <div flex="~ row gap2" items-center>
26 |       <p text-true-gray:90 text-sm>
27 |         This project uses the TMDB API but is not endorsed or certified by TMDB.
28 |       </p>
29 |     </div>
30 |     <div flex gap4 items-center>
31 |       <ExternalLinks
32 |         :links="{
33 |           twitter_id: 'nuxt_js',
34 |           github_id: 'nuxt/movies',
35 |         }"
36 |       >
37 |         <a href="https://vercel.com" rel="noopener" target="_blank" aria-label="go to vercel">
38 |           <IconVercel alt="Vercel" />
39 |         </a>
40 |       </ExternalLinks>
41 | 
42 |       <LanguageSwitcher />
43 |     </div>
44 |   </footer>
45 | </template>
46 | 


--------------------------------------------------------------------------------
/.github/workflows/tests-e2e.yml:
--------------------------------------------------------------------------------
 1 | name: Tests e2e
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches: [main]
 6 |   push:
 7 |     branches: [main]
 8 |   workflow_dispatch:
 9 | 
10 | jobs:
11 |   build:
12 |     timeout-minutes: 60
13 |     runs-on: ubuntu-latest
14 | 
15 |     strategy:
16 |       fail-fast: true
17 | 
18 |     steps:
19 |       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
20 |       - run: corepack enable
21 |       - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
22 |         with:
23 |           node-version: lts/-1
24 |           cache: pnpm
25 | 
26 |       - name: Install dependencies
27 |         run: pnpm install
28 | 
29 |       - name: Cache Playwright browsers
30 |         id: cache-playwright
31 |         uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
32 |         with:
33 |           path: ~/.cache/ms-playwright
34 |           key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
35 |           restore-keys: |
36 |             ${{ runner.os }}-playwright-
37 | 
38 |       - name: Install Playwright Browsers
39 |         run: npx playwright install --with-deps
40 | 
41 |       - name: Run Playwright tests
42 |         run: npx playwright test
43 | 
44 |       - name: Upload HTML Report
45 |         uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
46 |         with:
47 |           name: playwright-report
48 |           path: playwright-report/
49 |           retention-days: 30
50 | 


--------------------------------------------------------------------------------
/components/photo/Card.nuxt.test.ts:
--------------------------------------------------------------------------------
 1 | import type { VueWrapper } from '@vue/test-utils'
 2 | import type { Image } from '~/types'
 3 | import { mountSuspended } from '@nuxt/test-utils/runtime'
 4 | 
 5 | import { describe, expect, it } from 'vitest'
 6 | import { baseUrl } from '~/tests/unit/config'
 7 | import { mockImage } from '~/tests/unit/mocks'
 8 | import PhotoCard from './Card.vue'
 9 | 
10 | function initComponent(props: { item: Image }) {
11 |   return mountSuspended(PhotoCard, {
12 |     props,
13 |   })
14 | }
15 | 
16 | describe('photoCard', () => {
17 |   // Helper functions to get elements by data-testid
18 |   const findButton = (wrapper: VueWrapper) => wrapper.find('[data-testid="photo-button"]')
19 |   const findImage = (wrapper: VueWrapper) => wrapper.find('[data-testid="photo-image"]')
20 | 
21 |   it('renders correctly with image', async () => {
22 |     const image = mockImage({ file_path: '/path/to/image.jpg' })
23 | 
24 |     const wrapper = await initComponent({ item: image })
25 | 
26 |     expect(findButton(wrapper).exists()).toBe(true)
27 |     expect(findImage(wrapper).exists()).toBe(true)
28 | 
29 |     expect(findImage(wrapper).attributes('src')).toBe(`${baseUrl}/ipx/f_webp&s_400x600/tmdb${image.file_path}`)
30 |     expect(findImage(wrapper).attributes('alt')).toBe('Photo')
31 |   })
32 | 
33 |   it('has correct button title', async () => {
34 |     const image = mockImage()
35 | 
36 |     const wrapper = await initComponent({ item: image })
37 | 
38 |     expect(findButton(wrapper).attributes('title')).toBe('View photo')
39 |   })
40 | })
41 | 


--------------------------------------------------------------------------------
/composables/nuxt.nuxt.test.ts:
--------------------------------------------------------------------------------
 1 | import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 2 | import { beforeEach, describe, expect, it, vi } from 'vitest'
 3 | import { useRouteParam } from './nuxt'
 4 | 
 5 | // Define mocks using vi.hoisted
 6 | const { mockUseRoute } = vi.hoisted(() => {
 7 |   return {
 8 |     mockUseRoute: vi.fn(() => {
 9 |       return { params: {} }
10 |     }),
11 |   }
12 | })
13 | 
14 | // Mock the useRoute function
15 | mockNuxtImport('useRoute', () => {
16 |   return mockUseRoute
17 | })
18 | 
19 | describe('useRouteParam', () => {
20 |   beforeEach(() => {
21 |     // Restore mocks before each test
22 |     vi.resetAllMocks()
23 |   })
24 | 
25 |   it('should return the route parameter value as a computed ref', () => {
26 |     mockUseRoute.mockImplementation(() => {
27 |       return { params: { id: '123' } }
28 |     })
29 | 
30 |     const param = useRouteParam<string>('id')
31 |     expect(param.value).toBe('123')
32 |   })
33 | 
34 |   it('should return the initial value if the route parameter is not defined', () => {
35 |     mockUseRoute.mockImplementation(() => {
36 |       return { params: {} }
37 |     })
38 | 
39 |     const param = useRouteParam<string>('id', 'default')
40 |     expect(param.value).toBe('default')
41 |   })
42 | 
43 |   it('should return undefined if the route parameter is not defined and no initial value is provided', () => {
44 |     mockUseRoute.mockImplementation(() => {
45 |       return { params: {} }
46 |     })
47 | 
48 |     const param = useRouteParam<string>('id')
49 |     expect(param.value).toBeUndefined()
50 |   })
51 | })
52 | 


--------------------------------------------------------------------------------
/components/video/Card.nuxt.test.ts:
--------------------------------------------------------------------------------
 1 | import type { Video } from '~/types'
 2 | import { mount } from '@vue/test-utils'
 3 | 
 4 | import { describe, expect, it, vi } from 'vitest'
 5 | import { mockVideo } from '~/tests/unit/mocks'
 6 | import Card from './Card.vue'
 7 | 
 8 | // Mock the useIframeModal function
 9 | const showModalMock = vi.fn()
10 | 
11 | vi.mock('~/composables/item', () => {
12 |   return {
13 |     useIframeModal: () => showModalMock,
14 |     getVideoLink: (item: Video) => `https://www.youtube.com/embed/${item.key}?rel=0&showinfo=0&autoplay=0`,
15 |   }
16 | })
17 | 
18 | describe('card.vue', () => {
19 |   it('renders video details correctly', () => {
20 |     const wrapper = mount(Card, {
21 |       props: {
22 |         item: mockVideo(),
23 |       },
24 |     })
25 | 
26 |     expect(wrapper.find('[data-testid="video-name"]').text()).toBe(mockVideo().name)
27 |     expect(wrapper.find('[data-testid="video-type"]').text()).toBe(mockVideo().type)
28 |     expect(wrapper.find('[data-testid="video-image"]').attributes('src')).toContain(mockVideo().key)
29 |   })
30 | 
31 |   it('calls play method when play button is clicked', async () => {
32 |     const wrapper = mount(Card, {
33 |       props: {
34 |         item: mockVideo(),
35 |       },
36 |     })
37 | 
38 |     const playMock = vi.spyOn(wrapper.vm, 'play')
39 |     await wrapper.find('[data-testid="play-button"]').trigger('click')
40 | 
41 |     expect(playMock).toHaveBeenCalled()
42 |     expect(showModalMock).toHaveBeenCalledWith(`https://www.youtube.com/embed/${mockVideo().key}?rel=0&showinfo=0&autoplay=0`)
43 |   })
44 | })
45 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import type { ConfigOptions } from '@nuxt/test-utils/playwright'
 2 | import process from 'node:process'
 3 | import { defineConfig, devices } from '@playwright/test'
 4 | 
 5 | export default defineConfig<ConfigOptions>({
 6 |   testMatch: '**/tests/e2e/*.spec.ts',
 7 |   use: {
 8 |     baseURL: process.env.BASE_URL,
 9 |   },
10 |   /* Configure projects for major browsers */
11 |   projects: [
12 |     {
13 |       name: 'Chrome',
14 |       use: {
15 |         ...devices['Desktop Chrome'],
16 |         browserName: 'chromium',
17 |         channel: 'chrome',
18 |         isMobile: false,
19 |       },
20 |       metadata: {
21 |         deviceName: 'desktop-chrome',
22 |       },
23 |     },
24 |     {
25 |       name: 'Safari',
26 |       use: {
27 |         ...devices['Desktop Safari'],
28 |         browserName: 'webkit',
29 |         isMobile: false,
30 |       },
31 |       metadata: {
32 |         deviceName: 'desktop-safari',
33 |       },
34 |     },
35 |     {
36 |       name: 'Mobile Chrome',
37 |       use: {
38 |         ...devices['Samsung Galaxy S20'],
39 |         browserName: 'chromium',
40 |         isMobile: true,
41 |         viewport: { width: 412, height: 915 },
42 |       },
43 |       metadata: {
44 |         deviceName: 'Samsung-Galaxy-20',
45 |       },
46 |     },
47 |     {
48 |       name: 'Mobile Safari',
49 |       use: {
50 |         ...devices['iPhone 14'],
51 |         isMobile: true,
52 |         browserName: 'webkit',
53 |         viewport: { width: 412, height: 915 },
54 |       },
55 |       metadata: {
56 |         deviceName: 'Iphone-14',
57 |       },
58 |     },
59 |   ],
60 | })
61 | 


--------------------------------------------------------------------------------
/internationalization/zh-CN.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "热门电影",
 3 |   "Top Rated Movies": "高分电影",
 4 |   "Upcoming Movies": "即将上映电影",
 5 |   "Now Playing Movies": "正在上映电影",
 6 |   "Popular TV Shows": "热门剧集",
 7 |   "Top Rated TV Shows": "高分剧集",
 8 |   "TV Shows Airing Today": "今日播出剧集",
 9 | 
10 |   "Watch Trailer": "观看预告",
11 |   "Explore more": "查看更多",
12 | 
13 |   "Overview": "概述",
14 |   "Videos": "视频",
15 |   "Media Photos": "照片",
16 | 
17 |   "Cast": "演员",
18 |   "More like this": "更多类似的",
19 | 
20 |   "Storyline": "剧情",
21 |   "Release Date": "上映日期",
22 |   "Runtime": "片长",
23 |   "Director": "导演",
24 |   "Budget": "成本",
25 |   "Revenue": "票房",
26 |   "Genre": "类型",
27 |   "Status": "状态",
28 |   "Language": "语言",
29 |   "Production": "制片",
30 | 
31 |   "Backdrops": "背景",
32 |   "Posters": "海报",
33 | 
34 |   "Known For": "知名",
35 |   "Credits": "作品",
36 |   "Person Photos": "照片",
37 |   "(no biography)": "（没有简介）",
38 |   "Known for": "知名",
39 |   "Place of birth": "出生地",
40 |   "Birthday": "生日",
41 | 
42 |   "Acting Credits": "演出",
43 |   "Production Credits": "制片",
44 | 
45 |   "Type to search...": "搜索",
46 |   "Type something to search...": "请输入要搜索的内容",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews}人评价",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages}张照片",
51 |   "{numberOfVideos} Videos": "{numberOfVideos}个视频",
52 | 
53 |   "as {character}": "饰 {character}",
54 | 
55 |   "{count} items": "{count}条结果",
56 |   "Search result for: {currentSearch}": "搜索 {currentSearch}",
57 | 
58 |   "Error occurred on fetching": "获取数据时出错",
59 |   "Retry": "重试",
60 | 
61 |   "Home": "首页",
62 |   "Movies": "电影",
63 |   "TV Shows": "电视剧",
64 |   "Search": "搜索"
65 | }
66 | 


--------------------------------------------------------------------------------
/internationalization/ja.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "人気の映画",
 3 |   "Top Rated Movies": "評価の高い映画",
 4 |   "Upcoming Movies": "近日公開の映画",
 5 |   "Now Playing Movies": "上映中の映画",
 6 |   "Popular TV Shows": "人気のテレビ番組",
 7 |   "Top Rated TV Shows": "評価の高いテレビ番組",
 8 |   "TV Shows Airing Today": "今日放送中のテレビ番組",
 9 | 
10 |   "Watch Trailer": "予告編を見ます",
11 |   "Explore more": "もっと見る",
12 | 
13 |   "Overview": "概要",
14 |   "Videos": "動画",
15 |   "Media Photos": "写真",
16 | 
17 |   "Cast": "キャスト",
18 |   "More like this": "似ている",
19 | 
20 |   "Storyline": "ストーリー",
21 |   "Release Date": "リリース",
22 |   "Runtime": "上映時間",
23 |   "Director": "監督",
24 |   "Budget": "製作費",
25 |   "Revenue": "興行収入",
26 |   "Genre": "ジャンル",
27 |   "Status": "状態",
28 |   "Language": "言語",
29 |   "Production": "製作",
30 | 
31 |   "Backdrops": "背景",
32 |   "Posters": "ポスター",
33 | 
34 |   "Known For": "知られている",
35 |   "Credits": "クレジット",
36 |   "Person Photos": "写真",
37 |   "(no biography)": "（伝記なし）",
38 |   "Known for": "知られている",
39 |   "Place of birth": "出生地",
40 |   "Birthday": "生年月日",
41 | 
42 |   "Acting Credits": "出演",
43 |   "Production Credits": "製作",
44 | 
45 |   "Type to search...": "検索",
46 |   "Type something to search...": "何かを入力して検索する",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews}レビュー",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages}枚写真",
51 |   "{numberOfVideos} Videos": "{numberOfVideos}本動画",
52 | 
53 |   "as {character}": "演 {character}",
54 | 
55 |   "{count} items": "{count}件",
56 |   "Search result for: {currentSearch}": "「{currentSearch}」の検索結果 ",
57 | 
58 |   "Error occurred on fetching": "取得中にエラーが発生しました",
59 |   "Retry": "再試行",
60 | 
61 |   "Home": "ホーム",
62 |   "Movies": "映画",
63 |   "TV Shows": "テレビ番組",
64 |   "Search": "検索"
65 | }
66 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <br><p align="center">
 2 | <img height="100px" src="./public/movies.webp" />
 3 | </p>
 4 | 
 5 | <h1 align="center">Nuxt Movies with tests</h1>
 6 | <br>
 7 | 
 8 | > Movies app demo built using [Nuxt 3](https://github.com/nuxt/nuxt), [Vue 3](https://github.com/vuejs/core), [UnoCSS](https://github.com/unocss/unocss), [Image Module](https://v1.image.nuxtjs.org), [The Movie Database](https://www.themoviedb.org) [API](https://www.themoviedb.org/documentation/api) and [TypeScript](https://github.com/microsoft/TypeScript).
 9 | 
10 | **🍿 Live preview:** https://movies.nuxt.space
11 | 
12 | ## Screenshots
13 | 
14 | <img width="1191" src="https://user-images.githubusercontent.com/11247099/171109597-ee4fb47c-48b5-4dba-94b3-a56e0083c142.png">
15 | <img width="1191" src="https://user-images.githubusercontent.com/11247099/171109632-d9b480c4-e640-4812-8ea6-ccc6d17daa6a.png">
16 | <img width="1191" src="https://user-images.githubusercontent.com/11247099/171109644-c586de96-04be-4ae7-8a7b-c0d615a2ecba.png">
17 | <img width="764" src="https://user-images.githubusercontent.com/11247099/171109653-7137e2e5-ca06-4a30-9caa-bacdbc739121.png">
18 | 
19 | ## Proxy Server
20 | 
21 | Check [proxy/README](./proxy)
22 | 
23 | ## Setup
24 | 
25 | ``` bash
26 | # Enable pnpm
27 | $ corepack enable
28 | 
29 | # Install dependencies
30 | $ pnpm install
31 | 
32 | # Start dev server with hot reload at localhost:3000
33 | $ pnpm dev
34 | ```
35 | 
36 | ## Credits
37 | 
38 | Based on [jasonujmaalvis/vue-movies](https://github.com/jasonujmaalvis/vue-movies) and [tastejs/nuxt-movies](https://github.com/tastejs/nuxt-movies).
39 | 
40 | <img height="50px" src="./public/tmdb.svg">
41 | 
42 | Data provided by [The Movie Database](https://www.themoviedb.org).
43 | 
44 | This project uses the TMDB API but is not endorsed or certified by TMDB.
45 | 


--------------------------------------------------------------------------------
/composables/utils.ts:
--------------------------------------------------------------------------------
 1 | import LANGUAGES from '~/constants/languages'
 2 | 
 3 | export function formatDate(string: string) {
 4 |   const locale = useNuxtApp().$i18n.locale
 5 |   const date = new Date(string).toLocaleDateString(unref(locale))
 6 |   return date
 7 | }
 8 | 
 9 | /**
10 |  * Format minutes into hours and mins
11 |  */
12 | export function formatTime(minutes: number) {
13 |   // seconds
14 |   const seconds = minutes * 60
15 |   let secondsLeft = seconds
16 | 
17 |   // hours
18 |   const hours = Math.floor(secondsLeft / 3600)
19 |   secondsLeft = secondsLeft % 3600
20 | 
21 |   // mins
22 |   const mins = Math.floor(secondsLeft / 60)
23 |   secondsLeft = secondsLeft % 60
24 | 
25 |   return `${hours ? `${hours}h ` : ''}${mins}min`
26 | }
27 | 
28 | export function numberWithCommas(number: number) {
29 |   return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
30 | }
31 | 
32 | export function formatLang(iso: string) {
33 |   const fullLang = LANGUAGES.find(lang => lang.iso_639_1 === iso)
34 | 
35 |   if (fullLang)
36 |     return fullLang.english_name
37 | 
38 |   return iso
39 | }
40 | 
41 | export function useSingleton<T>() {
42 |   const key = Symbol('singleton')
43 |   return [
44 |     function provide(v: T) {
45 |       const vm = getCurrentInstance()
46 |       vm?.appContext.app.provide(key, v)
47 |     },
48 |     function use(fallback?: T) {
49 |       return inject(key, fallback) as T
50 |     },
51 |   ] as const
52 | }
53 | 
54 | export function formatVote(number?: number): string {
55 |   if (number === undefined) {
56 |     number = 0
57 |   }
58 | 
59 |   const formatter = new Intl.NumberFormat('en-GB', {
60 |     notation: 'compact',
61 |     maximumFractionDigits: 1,
62 |   })
63 | 
64 |   const formattedNumber = formatter.format(number)
65 | 
66 |   return formattedNumber
67 | }
68 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "type": "module",
 3 |   "private": true,
 4 |   "packageManager": "pnpm@9.15.0",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev:proxy": "cd proxy && pnpm dev",
 8 |     "dev": "nuxt dev",
 9 |     "lint": "eslint .",
10 |     "lint:fix": "eslint . --fix",
11 |     "prepare": "nuxt prepare",
12 |     "start": "node .output/server/index.mjs",
13 |     "test:codegen": "bunx playwright codegen http://localhost:3000/",
14 |     "test:unit": "vitest",
15 |     "test:unit-coverage": "vitest --coverage",
16 |     "test:unit-web": "vitest --coverage --ui",
17 |     "test:e2e": "playwright test",
18 |     "test:e2e-ui": "playwright test --ui",
19 |     "typecheck": "vue-tsc --noEmit"
20 |   },
21 |   "dependencies": {
22 |     "@nuxtjs/html-validator": "^1.8.2",
23 |     "vue-router-better-scroller": "^0.0.0"
24 |   },
25 |   "devDependencies": {
26 |     "@antfu/eslint-config": "^3.10.0",
27 |     "@iconify-json/carbon": "^1.1.31",
28 |     "@iconify-json/cib": "^1.1.8",
29 |     "@iconify-json/ph": "^1.1.12",
30 |     "@iconify-json/simple-icons": "^1.1.99",
31 |     "@iconify-json/twemoji": "^1.1.15",
32 |     "@nuxt/devtools": "^1.6.1",
33 |     "@nuxt/image": "^1.8.1",
34 |     "@nuxt/test-utils": "^3.15.1",
35 |     "@nuxtjs/color-mode": "^3.4.0",
36 |     "@nuxtjs/i18n": "^8.3.0",
37 |     "@playwright/test": "^1.49.1",
38 |     "@unocss/nuxt": "^0.64.1",
39 |     "@vitest/coverage-v8": "2.1.8",
40 |     "@vitest/ui": "^2.1.8",
41 |     "@vue/test-utils": "^2.4.6",
42 |     "@vueuse/nuxt": "^12.0.0",
43 |     "eslint": "^9.15.0",
44 |     "happy-dom": "^20.0.2",
45 |     "lru-cache": "^10.2.0",
46 |     "nuxt": "^3.14.1592",
47 |     "ohash": "^1.1.3",
48 |     "playwright-core": "^1.49.1",
49 |     "typescript": "^5.6.3",
50 |     "vitest": "^2.1.9",
51 |     "vue-tsc": "^2.1.10"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/components/media/AutoLoadGrid.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media, MediaType } from '~/types'
 3 | 
 4 | const props = withDefaults(
 5 |   defineProps<{
 6 |     items: Media[]
 7 |     type: MediaType
 8 |     fetch: (page: number) => Promise<void>
 9 |     count?: number
10 |     blocking?: boolean
11 |   }>(),
12 |   {
13 |     blocking: true,
14 |   },
15 | )
16 | 
17 | const tailEl = ref<HTMLDivElement>()
18 | 
19 | let page = 0
20 | const isLoading = ref(false)
21 | 
22 | async function loadingNext() {
23 |   if (isLoading.value)
24 |     return
25 |   isLoading.value = true
26 |   try {
27 |     page += 1
28 |     await props.fetch(page)
29 |   }
30 |   finally {
31 |     isLoading.value = false
32 |   }
33 | }
34 | 
35 | if (process.server || props.blocking)
36 |   await loadingNext()
37 | else
38 |   loadingNext()
39 | 
40 | if (process.client) {
41 |   useIntervalFn(() => {
42 |     if (!tailEl.value || isLoading.value)
43 |       return
44 |     if (props.count != null && props.items?.length >= props.count)
45 |       return
46 |     const { top } = tailEl.value.getBoundingClientRect()
47 |     const delta = top - window.innerHeight
48 |     if (delta < 400)
49 |       loadingNext()
50 |   }, 500)
51 | }
52 | </script>
53 | 
54 | <template>
55 |   <div>
56 |     <h1 flex="~" px8 pt8 gap2 text-3xl>
57 |       <slot />
58 |     </h1>
59 |     <div v-if="count != null" px8 op50>
60 |       {{ $t('{count} items', { count }) }}
61 |     </div>
62 |     <MediaGrid>
63 |       <MediaCard
64 |         v-for="item of items"
65 |         :key="item.id"
66 |         :type="type"
67 |         :item="item"
68 |       />
69 |     </MediaGrid>
70 |     <div ref="tailEl" />
71 |     <div v-if="isLoading" p10 animate-pulse>
72 |       <div i-carbon:circle-dash text-4xl ma animate-spin />
73 |     </div>
74 |   </div>
75 | </template>
76 | 


--------------------------------------------------------------------------------
/internationalization/it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Film Popolari",
 3 |   "Top Rated Movies": "Film Più Votati",
 4 |   "Upcoming Movies": "Film in Uscita",
 5 |   "Now Playing Movies": "Film in Sala",
 6 |   "Popular TV Shows": "TV Shows Popolari",
 7 |   "Top Rated TV Shows": "TV Shows Più Votati",
 8 |   "TV Shows Airing Today": "TV Shows in Onda",
 9 | 
10 |   "Watch Trailer": "Guarda Trailer",
11 |   "Explore more": "Scopri di più",
12 | 
13 |   "Overview": "Panoramica",
14 |   "Videos": "Video",
15 |   "Media Photos": "Foto",
16 | 
17 |   "Cast": "Cast",
18 |   "More like this": "Simili",
19 | 
20 |   "Storyline": "Trama",
21 |   "Release Date": "Data di Uscita",
22 |   "Runtime": "Durata",
23 |   "Director": "Regista",
24 |   "Budget": "Budget",
25 |   "Revenue": "Incassi",
26 |   "Genre": "Genere",
27 |   "Status": "Stato",
28 |   "Language": "Lingua",
29 |   "Production": "Produzione",
30 | 
31 |   "Backdrops": "Sfondi",
32 |   "Posters": "Poster",
33 | 
34 |   "Known For": "Conosciuto Per",
35 |   "Credits": "Crediti",
36 |   "Person Photos": "Foto",
37 |   "(no biography)": "(nessuna biografia)",
38 |   "Known for": "Conosciuto per",
39 |   "Place of birth": "Luogo di nascita",
40 |   "Birthday": "Compleanno",
41 | 
42 |   "Acting Credits": "Attore",
43 |   "Production Credits": "Produzione",
44 | 
45 |   "Type to search...": "Scrivi per cercare...",
46 |   "Type something to search...": "Scrivi qualcosa per cercare...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} Recensioni",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} Immagini",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} Video",
52 | 
53 |   "as {character}": "come {character}",
54 | 
55 |   "{count} items": "{count} risultati",
56 |   "Search result for: {currentSearch}": "Risultati per: {currentSearch}",
57 | 
58 |   "Error occurred on fetching": "C'è stato un errore nel caricamento",
59 |   "Retry": "Riprova"
60 | }
61 | 


--------------------------------------------------------------------------------
/tests/unit/mocks.ts:
--------------------------------------------------------------------------------
 1 | import type { Image, Media, Person, Video } from '~/types'
 2 | 
 3 | export function mockPerson(overrides: Partial<Person> = {}): Person {
 4 |   return {
 5 |     adult: false,
 6 |     gender: 0,
 7 |     id: 1,
 8 |     known_for_department: '',
 9 |     name: 'John Doe',
10 |     profile_path: '/d81K0RH8UX7tZj49tZaQhZ9ewH.jpg',
11 |     original_name: '',
12 |     popularity: 0,
13 |     credit_id: '',
14 |     character: 'Main Character',
15 |     order: 0,
16 |     images: {
17 |       profiles: [{ aspect_ratio: 0.667, height: 900, iso_639_1: 'null', file_path: '/d81K0RH8UX7tZj49tZaQhZ9ewH.jpg', vote_average: 5.326, vote_count: 7, width: 600 }],
18 |     },
19 |     ...overrides,
20 |   }
21 | }
22 | 
23 | export function mockImage(overrides: Partial<Image> = {}): Image {
24 |   return {
25 |     aspect_ratio: 1.5,
26 |     height: 1000,
27 |     iso_639_1: '',
28 |     file_path: '/path/to/image.jpg',
29 |     vote_average: 0,
30 |     vote_count: 0,
31 |     width: 1500,
32 |     ...overrides,
33 |   }
34 | }
35 | 
36 | export function mockMedia(overrides: Partial<Media> = {}): Media {
37 |   return {
38 |     adult: false,
39 |     backdrop_path: '',
40 |     genre_ids: [],
41 |     id: '1',
42 |     original_language: 'en',
43 |     original_title: 'Movie 1',
44 |     overview: '',
45 |     popularity: 0,
46 |     poster_path: '',
47 |     release_date: '',
48 |     title: undefined,
49 |     video: false,
50 |     vote_average: 0,
51 |     vote_count: 0,
52 |     ...overrides,
53 |   }
54 | }
55 | 
56 | export function mockVideo(overrides: Partial<Video> = {}): Video {
57 |   return {
58 |     key: 'sampleKey',
59 |     name: 'Sample Video',
60 |     type: 'Trailer',
61 |     iso_639_1: 'en',
62 |     iso_3166_1: 'US',
63 |     site: 'YouTube',
64 |     size: 1080,
65 |     official: true,
66 |     published_at: '2023-01-01T00:00:00Z',
67 |     id: 'sampleId',
68 |     ...overrides,
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/internationalization/en.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Popular Movies",
 3 |   "Top Rated Movies": "Top Rated Movies",
 4 |   "Upcoming Movies": "Upcoming Movies",
 5 |   "Now Playing Movies": "Now Playing Movies",
 6 |   "Popular TV Shows": "Popular TV Shows",
 7 |   "Top Rated TV Shows": "Top Rated TV Shows",
 8 |   "TV Shows Airing Today": "TV Shows Airing Today",
 9 | 
10 |   "Watch Trailer": "Watch Trailer",
11 |   "Explore more": "Explore more",
12 | 
13 |   "Overview": "Overview",
14 |   "Videos": "Videos",
15 |   "Media Photos": "Photos",
16 | 
17 |   "Cast": "Cast",
18 |   "More like this": "More like this",
19 | 
20 |   "Storyline": "Storyline",
21 |   "Release Date": "Released",
22 |   "Runtime": "Runtime",
23 |   "Director": "Director",
24 |   "Budget": "Budget",
25 |   "Revenue": "Revenue",
26 |   "Genre": "Genre",
27 |   "Status": "Status",
28 |   "Language": "Language",
29 |   "Production": "Production",
30 | 
31 |   "Backdrops": "Backdrops",
32 |   "Posters": "Posters",
33 | 
34 |   "Known For": "Known For",
35 |   "Credits": "Credits",
36 |   "Person Photos": "Photos",
37 |   "(no biography)": "(no biography)",
38 |   "Known for": "Known for",
39 |   "Place of birth": "Place of birth",
40 |   "Birthday": "Birthday",
41 | 
42 |   "Acting Credits": "Acting",
43 |   "Production Credits": "Production",
44 | 
45 |   "Type to search...": "Type to search...",
46 |   "Type something to search...": "Type something to search...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} Reviews",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} Images",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} Videos",
52 | 
53 |   "as {character}": "as {character}",
54 | 
55 |   "{count} items": "{count} items",
56 |   "Search result for: {currentSearch}": "Search result for: {currentSearch}",
57 | 
58 |   "Error occurred on fetching": "Error occurred on fetching",
59 |   "Retry": "Retry",
60 | 
61 |   "Home": "Home",
62 |   "Movies": "Movies",
63 |   "TV Shows": "TV Shows",
64 |   "Search": "Search"
65 | }
66 | 


--------------------------------------------------------------------------------
/public/tmdb2.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 273.42 35.52"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" y1="17.76" x2="273.42" y2="17.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#90cea1"/><stop offset="0.56" stop-color="#3cbec9"/><stop offset="1" stop-color="#00b3e5"/></linearGradient></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M191.85,35.37h63.9A17.67,17.67,0,0,0,273.42,17.7h0A17.67,17.67,0,0,0,255.75,0h-63.9A17.67,17.67,0,0,0,174.18,17.7h0A17.67,17.67,0,0,0,191.85,35.37ZM10.1,35.42h7.8V6.92H28V0H0v6.9H10.1Zm28.1,0H46V8.25h.1L55.05,35.4h6L70.3,8.25h.1V35.4h7.8V0H66.45l-8.2,23.1h-.1L50,0H38.2ZM89.14.12h11.7a33.56,33.56,0,0,1,8.08,1,18.52,18.52,0,0,1,6.67,3.08,15.09,15.09,0,0,1,4.53,5.52,18.5,18.5,0,0,1,1.67,8.25,16.91,16.91,0,0,1-1.62,7.58,16.3,16.3,0,0,1-4.38,5.5,19.24,19.24,0,0,1-6.35,3.37,24.53,24.53,0,0,1-7.55,1.15H89.14Zm7.8,28.2h4a21.66,21.66,0,0,0,5-.55A10.58,10.58,0,0,0,110,26a8.73,8.73,0,0,0,2.68-3.35,11.9,11.9,0,0,0,1-5.08,9.87,9.87,0,0,0-1-4.52,9.17,9.17,0,0,0-2.63-3.18A11.61,11.61,0,0,0,106.22,8a17.06,17.06,0,0,0-4.68-.63h-4.6ZM133.09.12h13.2a32.87,32.87,0,0,1,4.63.33,12.66,12.66,0,0,1,4.17,1.3,7.94,7.94,0,0,1,3,2.72,8.34,8.34,0,0,1,1.15,4.65,7.48,7.48,0,0,1-1.67,5,9.13,9.13,0,0,1-4.43,2.82V17a10.28,10.28,0,0,1,3.18,1,8.51,8.51,0,0,1,2.45,1.85,7.79,7.79,0,0,1,1.57,2.62,9.16,9.16,0,0,1,.55,3.2,8.52,8.52,0,0,1-1.2,4.68,9.32,9.32,0,0,1-3.1,3A13.38,13.38,0,0,1,152.32,35a22.5,22.5,0,0,1-4.73.5h-14.5Zm7.8,14.15h5.65a7.65,7.65,0,0,0,1.78-.2,4.78,4.78,0,0,0,1.57-.65,3.43,3.43,0,0,0,1.13-1.2,3.63,3.63,0,0,0,.42-1.8A3.3,3.3,0,0,0,151,8.6a3.42,3.42,0,0,0-1.23-1.13A6.07,6.07,0,0,0,148,6.9a9.9,9.9,0,0,0-1.85-.18h-5.3Zm0,14.65h7a8.27,8.27,0,0,0,1.83-.2,4.67,4.67,0,0,0,1.67-.7,3.93,3.93,0,0,0,1.23-1.3,3.8,3.8,0,0,0,.47-1.95,3.16,3.16,0,0,0-.62-2,4,4,0,0,0-1.58-1.18,8.23,8.23,0,0,0-2-.55,15.12,15.12,0,0,0-2.05-.15h-5.9Z"/></g></g></svg>


--------------------------------------------------------------------------------
/internationalization/fa-IR.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "فیلم‌های محبوب",
 3 |   "Top Rated Movies": "فیلم‌های با امتیاز بالا",
 4 |   "Upcoming Movies": "فیلم‌های آینده",
 5 |   "Now Playing Movies": "فیلم‌های در حال پخش",
 6 |   "Popular TV Shows": "برنامه های تلویزیونی محبوب",
 7 |   "Top Rated TV Shows": "برنامه های تلویزیونی با امتیاز بالا",
 8 |   "TV Shows Airing Today": "برنامه های تلویزیونی امروز",
 9 | 
10 |   "Watch Trailer": "تماشای تریلر",
11 |   "Explore more": "کشف بیشتر",
12 | 
13 |   "Overview": "خلاصه",
14 |   "Videos": "ویدئوها",
15 |   "Media Photos": "عکس‌ها",
16 | 
17 |   "Cast": "بازیگران",
18 |   "More like this": "مشابه‌ها",
19 | 
20 |   "Storyline": "داستان",
21 |   "Release Date": "تاریخ انتشار",
22 |   "Runtime": "مدت زمان",
23 |   "Director": "کارگردان",
24 |   "Budget": "بودجه",
25 |   "Revenue": "درآمد",
26 |   "Genre": "ژانر",
27 |   "Status": "وضعیت",
28 |   "Language": "زبان",
29 |   "Production": "تولید",
30 | 
31 |   "Backdrops": "تصاویر پس‌زمینه",
32 |   "Posters": "پوسترها",
33 | 
34 |   "Known For": "معروف برای",
35 |   "Credits": "اعتبارات",
36 |   "Person Photos": "عکس‌ها",
37 |   "(no biography)": "(بیوگرافی موجود نیست)",
38 |   "Known for": "معروف برای",
39 |   "Place of birth": "محل تولد",
40 |   "Birthday": "تاریخ تولد",
41 | 
42 |   "Acting Credits": "بازیگری",
43 |   "Production Credits": "تولید",
44 | 
45 |   "Type to search...": "برای جستجو تایپ کنید...",
46 |   "Type something to search...": "چیزی برای جستجو تایپ کنید...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} نقد و بررسی",
49 |   "{numberOfImages} Images": "{numberOfImages} تصویر",
50 |   "{numberOfVideos} Videos": "{numberOfVideos} ویدئو",
51 | 
52 |   "as {character}": "در نقش {character}",
53 | 
54 |   "{count} items": "{count} مورد",
55 |   "Search result for: {currentSearch}": "نتایج جستجو برای: {currentSearch}",
56 | 
57 |   "Error occurred on fetching": "خطا در دریافت اطلاعات",
58 |   "Retry": "تلاش مجدد",
59 | 
60 |   "Home": "خانه",
61 |   "Movies": "فیلم‌ها",
62 |   "TV Shows": "سریال‌ها",
63 |   "Search": "جستجو"
64 | }
65 | 


--------------------------------------------------------------------------------
/internationalization/de-DE.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Beliebte Filme",
 3 |   "Top Rated Movies": "Bestbewertete Filme",
 4 |   "Upcoming Movies": "Kommende Filme",
 5 |   "Now Playing Movies": "Kinofilme",
 6 |   "Popular TV Shows": "Beliebte Serien",
 7 |   "Top Rated TV Shows": "Bestbewertete Serien",
 8 |   "TV Shows Airing Today": "Serien die heute ausgestrahlt werden",
 9 | 
10 |   "Watch Trailer": "Trailer ansehen",
11 |   "Explore more": "Mehr entdecken",
12 | 
13 |   "Overview": "Überblick",
14 |   "Videos": "Videos",
15 |   "Media Photos": "Fotos",
16 | 
17 |   "Cast": "Besetzung",
18 |   "More like this": "Ähnlich",
19 | 
20 |   "Storyline": "Handlung",
21 |   "Release Date": "Erscheinungsdatum",
22 |   "Länge": "Runtime",
23 |   "Director": "Regie",
24 |   "Budget": "Budget",
25 |   "Revenue": "Einnahmen",
26 |   "Genre": "Genre",
27 |   "Status": "Status",
28 |   "Language": "Sprache",
29 |   "Production": "Produktion",
30 | 
31 |   "Backdrops": "Kulissen",
32 |   "Posters": "Plakate",
33 | 
34 |   "Known For": "Bekannt für",
35 |   "Credits": "Filmographie",
36 |   "Person Photos": "Fotos",
37 |   "(no biography)": "(keine Biografie)",
38 |   "Known for": "Bekannt für",
39 |   "Place of birth": "Geburtsort",
40 |   "Birthday": "Geburtsdatum",
41 | 
42 |   "Acting Credits": "Darsteller",
43 |   "Production Credits": "Produktion",
44 | 
45 |   "Type to search...": "Durchsuchen",
46 |   "Type something to search...": "Suchen...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} Rezension",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} Bilder",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} Videos",
52 | 
53 |   "as {character}": "Rolle: {character}",
54 | 
55 |   "{count} items": "{count} Ergebnisse ",
56 |   "Search result for: {currentSearch}": "Suchergebnis für {currentSearch}",
57 | 
58 |   "Error occurred on fetching": "Fehler beim Abrufen aufgetreten",
59 |   "Retry": "Erneut versuchen",
60 | 
61 |   "Home": "Startseite",
62 |   "Movies": "Filme",
63 |   "TV Shows": "Fernsehserien",
64 |   "Search": "Suche"
65 | }
66 | 


--------------------------------------------------------------------------------
/components/icon/IconTMDB.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 273.42 35.52"><defs><linearGradient id="linear-gradient" y1="17.76" x2="273.42" y2="17.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#90cea1" /><stop offset="0.56" stop-color="#3cbec9" /><stop offset="1" stop-color="#00b3e5" /></linearGradient></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M191.85,35.37h63.9A17.67,17.67,0,0,0,273.42,17.7h0A17.67,17.67,0,0,0,255.75,0h-63.9A17.67,17.67,0,0,0,174.18,17.7h0A17.67,17.67,0,0,0,191.85,35.37ZM10.1,35.42h7.8V6.92H28V0H0v6.9H10.1Zm28.1,0H46V8.25h.1L55.05,35.4h6L70.3,8.25h.1V35.4h7.8V0H66.45l-8.2,23.1h-.1L50,0H38.2ZM89.14.12h11.7a33.56,33.56,0,0,1,8.08,1,18.52,18.52,0,0,1,6.67,3.08,15.09,15.09,0,0,1,4.53,5.52,18.5,18.5,0,0,1,1.67,8.25,16.91,16.91,0,0,1-1.62,7.58,16.3,16.3,0,0,1-4.38,5.5,19.24,19.24,0,0,1-6.35,3.37,24.53,24.53,0,0,1-7.55,1.15H89.14Zm7.8,28.2h4a21.66,21.66,0,0,0,5-.55A10.58,10.58,0,0,0,110,26a8.73,8.73,0,0,0,2.68-3.35,11.9,11.9,0,0,0,1-5.08,9.87,9.87,0,0,0-1-4.52,9.17,9.17,0,0,0-2.63-3.18A11.61,11.61,0,0,0,106.22,8a17.06,17.06,0,0,0-4.68-.63h-4.6ZM133.09.12h13.2a32.87,32.87,0,0,1,4.63.33,12.66,12.66,0,0,1,4.17,1.3,7.94,7.94,0,0,1,3,2.72,8.34,8.34,0,0,1,1.15,4.65,7.48,7.48,0,0,1-1.67,5,9.13,9.13,0,0,1-4.43,2.82V17a10.28,10.28,0,0,1,3.18,1,8.51,8.51,0,0,1,2.45,1.85,7.79,7.79,0,0,1,1.57,2.62,9.16,9.16,0,0,1,.55,3.2,8.52,8.52,0,0,1-1.2,4.68,9.32,9.32,0,0,1-3.1,3A13.38,13.38,0,0,1,152.32,35a22.5,22.5,0,0,1-4.73.5h-14.5Zm7.8,14.15h5.65a7.65,7.65,0,0,0,1.78-.2,4.78,4.78,0,0,0,1.57-.65,3.43,3.43,0,0,0,1.13-1.2,3.63,3.63,0,0,0,.42-1.8A3.3,3.3,0,0,0,151,8.6a3.42,3.42,0,0,0-1.23-1.13A6.07,6.07,0,0,0,148,6.9a9.9,9.9,0,0,0-1.85-.18h-5.3Zm0,14.65h7a8.27,8.27,0,0,0,1.83-.2,4.67,4.67,0,0,0,1.67-.7,3.93,3.93,0,0,0,1.23-1.3,3.8,3.8,0,0,0,.47-1.95,3.16,3.16,0,0,0-.62-2,4,4,0,0,0-1.58-1.18,8.23,8.23,0,0,0-2-.55,15.12,15.12,0,0,0-2.05-.15h-5.9Z" /></g></g></svg>
3 | </template>
4 | 
5 | <style scoped>
6 | .cls-1{fill:url(#linear-gradient);}
7 | </style>
8 | 


--------------------------------------------------------------------------------
/internationalization/ru-RU.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Популярные фильмы",
 3 |   "Top Rated Movies": "Фильмы с высоким рейтингом",
 4 |   "Upcoming Movies": "Скоро в кино",
 5 |   "Now Playing Movies": "Сейчас в кино",
 6 |   "Popular TV Shows": "Популярные сериалы",
 7 |   "Top Rated TV Shows": "Сериалы с высоким рейтингом",
 8 |   "TV Shows Airing Today": "Сегодня в эфире",
 9 | 
10 |   "Watch Trailer": "Смотреть трейлер",
11 |   "Explore more": "Узнать больше",
12 | 
13 |   "Overview": "Обзор",
14 |   "Videos": "Видео",
15 |   "Media Photos": "Изображения",
16 | 
17 |   "Cast": "Актёрский состав",
18 |   "More like this": "Похожие",
19 | 
20 |   "Storyline": "Описание",
21 |   "Release Date": "Дата выхода",
22 |   "Runtime": "Продолжительность",
23 |   "Director": "Режиссёр",
24 |   "Budget": "Бюджет",
25 |   "Revenue": "Сборы",
26 |   "Genre": "Жанр",
27 |   "Status": "Статус",
28 |   "Language": "Язык",
29 |   "Production": "Кинокомпания",
30 | 
31 |   "Backdrops": "Фоны",
32 |   "Posters": "Постеры",
33 | 
34 |   "Known For": "Фильмы и сериалы",
35 |   "Credits": "Фильмография",
36 |   "Person Photos": "Фото",
37 |   "(no biography)": "(биография отсутствует)",
38 |   "Known for": "Известен по",
39 |   "Place of birth": "Место рождения",
40 |   "Birthday": "Дата рождения",
41 | 
42 |   "Acting Credits": "Актёрская игра",
43 |   "Production Credits": "Производство",
44 | 
45 |   "Type to search...": "Начните печатать...",
46 |   "Type something to search...": "Введите текст для поиска...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} рецензий",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} изображений",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} видео",
52 | 
53 |   "as {character}": "в роли {character}",
54 | 
55 |   "{count} items": "{count} результат(ов)",
56 |   "Search result for: {currentSearch}": "Результаты поиска для «{currentSearch}»",
57 | 
58 |   "Error occurred on fetching": "Ошибка при загрузке данных",
59 |   "Retry": "Повторить",
60 | 
61 |   "Home": "Главная",
62 |   "Movies": "Фильмы",
63 |   "TV Shows": "Сериалы",
64 |   "Search": "Поиск"
65 | }
66 | 


--------------------------------------------------------------------------------
/internationalization/vi.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Phim Phổ biến",
 3 |   "Top Rated Movies": "Phim Được Đánh Giá Cao",
 4 |   "Upcoming Movies": "Phim Sắp Chiếu",
 5 |   "Now Playing Movies": "Phim Đang Chiếu",
 6 |   "Popular TV Shows": "Chương Trình TV Phổ biến",
 7 |   "Top Rated TV Shows": "Chương Trình TV Được Đánh Giá Cao",
 8 |   "TV Shows Airing Today": "Chương Trình TV Phát Sóng Hôm Nay",
 9 | 
10 |   "Watch Trailer": "Xem Trailer",
11 |   "Explore more": "Khám phá thêm",
12 | 
13 |   "Overview": "Tổng quan",
14 |   "Videos": "Video",
15 |   "Media Photos": "Hình ảnh",
16 | 
17 |   "Cast": "Diễn viên",
18 |   "More like this": "Phim tương tự",
19 | 
20 |   "Storyline": "Nội dung",
21 |   "Release Date": "Ngày phát hành",
22 |   "Runtime": "Thời lượng",
23 |   "Director": "Đạo diễn",
24 |   "Budget": "Ngân sách",
25 |   "Revenue": "Doanh thu",
26 |   "Genre": "Thể loại",
27 |   "Status": "Trạng thái",
28 |   "Language": "Ngôn ngữ",
29 |   "Production": "Sản xuất",
30 | 
31 |   "Backdrops": "Hình nền",
32 |   "Posters": "Áp phích",
33 | 
34 |   "Known For": "Nổi tiếng với",
35 |   "Credits": "Danh đề",
36 |   "Person Photos": "Hình ảnh",
37 |   "(no biography)": "(không có tiểu sử)",
38 |   "Known for": "Nổi tiếng với",
39 |   "Place of birth": "Nơi sinh",
40 |   "Birthday": "Ngày sinh",
41 | 
42 |   "Acting Credits": "Diễn xuất",
43 |   "Production Credits": "Sản xuất",
44 | 
45 |   "Type to search...": "Nhập để tìm kiếm...",
46 |   "Type something to search...": "Nhập nội dung để tìm kiếm...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} Đánh giá",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} Hình ảnh",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} Video",
52 | 
53 |   "as {character}": "vai {character}",
54 | 
55 |   "{count} items": "{count} mục",
56 |   "Search result for: {currentSearch}": "Kết quả tìm kiếm cho: {currentSearch}",
57 | 
58 |   "Error occurred on fetching": "Đã xảy ra lỗi khi tải dữ liệu",
59 |   "Retry": "Thử lại",
60 | 
61 |   "Home": "Trang chủ",
62 |   "Movies": "Phim",
63 |   "TV Shows": "Chương Trình TV",
64 |   "Search": "Tìm kiếm"
65 | }
66 | 


--------------------------------------------------------------------------------
/internationalization/fr-FR.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Films Populaires",
 3 |   "Top Rated Movies": "Films les mieux notés",
 4 |   "Upcoming Movies": "Prochaines Sorties",
 5 |   "Now Playing Movies": "Films à l'affiche",
 6 |   "Popular TV Shows": "Séries Populaires",
 7 |   "Top Rated TV Shows": "Séries les mieux notées",
 8 |   "TV Shows Airing Today": "Séries diffusées aujourd'hui",
 9 | 
10 |   "Watch Trailer": "Voir la bande-annonce",
11 |   "Explore more": "Voir plus",
12 | 
13 |   "Overview": "Aperçu",
14 |   "Videos": "Vidéos",
15 |   "Media Photos": "Photos",
16 | 
17 |   "Cast": "Casting",
18 |   "More like this": "Plus du même genre",
19 | 
20 |   "Storyline": "Synopsis",
21 |   "Release Date": "Date de sortie",
22 |   "Runtime": "Durée",
23 |   "Director": "Directeur",
24 |   "Budget": "Budget",
25 |   "Revenue": "Revenus",
26 |   "Genre": "Genre",
27 |   "Status": "Statut",
28 |   "Language": "Langue",
29 |   "Production": "Production",
30 | 
31 |   "Backdrops": "Décors",
32 |   "Posters": "Affiches",
33 | 
34 |   "Known For": "Connu pour",
35 |   "Credits": "Filmographie",
36 |   "Person Photos": "Photos",
37 |   "(no biography)": "(pas de biographie)",
38 |   "Known for": "Connu pour",
39 |   "Place of birth": "Lieu de naissance",
40 |   "Birthday": "Anniversaire",
41 | 
42 |   "Acting Credits": "Interprétation",
43 |   "Production Credits": "Production",
44 | 
45 |   "Type to search...": "Tapez pour rechercher...",
46 |   "Type something to search...": "Tapez quelque chose à rechercher...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} Critiques",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} Images",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} Vidéos",
52 | 
53 |   "as {character}": "en {character}",
54 | 
55 |   "{count} items": "{count} résultats",
56 |   "Search result for: {currentSearch}": "Résutats pour: {currentSearch}",
57 | 
58 |   "Error occurred on fetching": "Une erreur s'est produite lors de la récupération des données.",
59 |   "Retry": "Réessayer",
60 | 
61 |   "Home": "Accueil",
62 |   "Movies": "Films",
63 |   "TV Shows": "Séries",
64 |   "Search": "Recherche"
65 | }
66 | 


--------------------------------------------------------------------------------
/internationalization/es-ES.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Películas populares",
 3 |   "Top Rated Movies": "Películas mejor valoradas",
 4 |   "Upcoming Movies": "Próximas películas",
 5 |   "Now Playing Movies": "Películas en cartelera",
 6 |   "Popular TV Shows": "Programas de televisión populares",
 7 |   "Top Rated TV Shows": "Programas de televisión mejor valorados",
 8 |   "TV Shows Airing Today": "Programas de televisión que se emiten hoy",
 9 | 
10 |   "Watch Trailer": "Ver tráiler",
11 |   "Explore more": "Explorar más",
12 | 
13 |   "Overview": "Visión general",
14 |   "Videos": "Videos",
15 |   "Media Photos": "Fotos",
16 | 
17 |   "Cast": "Reparto",
18 |   "More like this": "Más como esto",
19 | 
20 |   "Storyline": "Trama",
21 |   "Release Date": "Fecha de estreno",
22 |   "Runtime": "Duración",
23 |   "Director": "Director",
24 |   "Budget": "Presupuesto",
25 |   "Revenue": "Ingresos",
26 |   "Genre": "Género",
27 |   "Status": "Estado",
28 |   "Language": "Idioma",
29 |   "Production": "Producción",
30 | 
31 |   "Backdrops": "Fondos",
32 |   "Posters": "Pósters",
33 | 
34 |   "Known For": "Conocido por",
35 |   "Credits": "Créditos",
36 |   "Person Photos": "Fotos",
37 |   "(no biography)": "(sin biografía)",
38 |   "Known for": "Conocido por",
39 |   "Place of birth": "Lugar de nacimiento",
40 |   "Birthday": "Cumpleaños",
41 | 
42 |   "Acting Credits": "Actuación",
43 |   "Production Credits": "Producción",
44 | 
45 |   "Type to search...": "Escribe para buscar...",
46 |   "Type something to search...": "Escribe algo para buscar...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} Reseñas",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} Imágenes",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} Videos",
52 | 
53 |   "as {character}": "como {character}",
54 | 
55 |   "{count} items": "{count} artículos",
56 |   "Search result for: {currentSearch}": "Resultado de búsqueda para: {currentSearch}",
57 | 
58 |   "Error occurred on fetching": "Error al obtener datos",
59 |   "Retry": "Reintentar",
60 | 
61 |   "Home": "Inicio",
62 |   "Movies": "Películas",
63 |   "TV Shows": "Series de TV",
64 |   "Search": "Buscar"
65 | }
66 | 


--------------------------------------------------------------------------------
/internationalization/uk-UA.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Популярні фільми",
 3 |   "Top Rated Movies": "Фільми з високим рейтингом",
 4 |   "Upcoming Movies": "Скоро в кіно",
 5 |   "Now Playing Movies": "Зараз в кіно",
 6 |   "Popular TV Shows": "Популярні серіали",
 7 |   "Top Rated TV Shows": "Серіали з високим рейтингом",
 8 |   "TV Shows Airing Today": "Сьогодні в ефірі",
 9 | 
10 |   "Watch Trailer": "Дивитися трейлер",
11 |   "Explore more": "Дізнатися більше",
12 | 
13 |   "Overview": "Огляд",
14 |   "Videos": "Відео",
15 |   "Media Photos": "Зображення",
16 | 
17 |   "Cast": "Акторський склад",
18 |   "More like this": "Схожі",
19 | 
20 |   "Storyline": "Опис",
21 |   "Release Date": "Дата виходу",
22 |   "Runtime": "Тривалість",
23 |   "Director": "Режисер",
24 |   "Budget": "Бюджет",
25 |   "Revenue": "Збори",
26 |   "Genre": "Жанр",
27 |   "Status": "Статус",
28 |   "Language": "Мова",
29 |   "Production": "Кінокомпанія",
30 | 
31 |   "Backdrops": "Фони",
32 |   "Posters": "Постери",
33 | 
34 |   "Known For": "Фільми та серіали",
35 |   "Credits": "Фільмографія",
36 |   "Person Photos": "Фото",
37 |   "(no biography)": "(біографія відсутня)",
38 |   "Known for": "Відомий за",
39 |   "Place of birth": "Місце народження",
40 |   "Birthday": "Дата народження",
41 | 
42 |   "Acting Credits": "Акторська гра",
43 |   "Production Credits": "Виробництво",
44 | 
45 |   "Type to search...": "Почніть друкувати...",
46 |   "Type something to search...": "Введіть текст для пошуку...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} рецензій",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} зображень",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} відео",
52 | 
53 |   "as {character}": "в ролі {character}",
54 | 
55 |   "{count} items": "{count} результат(ів)",
56 |   "Search result for: {currentSearch}": "Результати пошуку для «{currentSearch}»",
57 | 
58 |   "Error occurred on fetching": "Помилка при завантаженні даних",
59 |   "Retry": "Повторити",
60 | 
61 |   "Home": "Головна",
62 |   "Movies": "Фільми",
63 |   "TV Shows": "Серіали",
64 |   "Search": "Пошук"
65 | }
66 | 


--------------------------------------------------------------------------------
/internationalization/pt-PT.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Filmes populares",
 3 |   "Top Rated Movies": "Filmes com melhor classificação",
 4 |   "Upcoming Movies": "Filmes a estrear em breve",
 5 |   "Now Playing Movies": "Filmes em exibição",
 6 |   "Popular TV Shows": "Séries populares",
 7 |   "Top Rated TV Shows": "Séries com melhor classificação",
 8 |   "TV Shows Airing Today": "Séries emitidas hoje",
 9 | 
10 |   "Watch Trailer": "Ver trailer",
11 |   "Explore more": "Explorar tudo",
12 | 
13 |   "Overview": "Visão geral",
14 |   "Videos": "Vídeos",
15 |   "Media Photos": "Imagens",
16 | 
17 |   "Cast": "Elenco",
18 |   "More like this": "Títulos semelhantes",
19 | 
20 |   "Storyline": "Sinopse",
21 |   "Release Date": "Data de lançamento",
22 |   "Runtime": "Duração",
23 |   "Director": "Realização",
24 |   "Budget": "Orçamento",
25 |   "Revenue": "Bilheteira",
26 |   "Genre": "Género",
27 |   "Status": "Estado",
28 |   "Language": "Idioma",
29 |   "Production": "Produção",
30 | 
31 |   "Backdrops": "Imagens de fundo",
32 |   "Posters": "Cartazes",
33 | 
34 |   "Known For": "Reconhecido(a) por",
35 |   "Credits": "Créditos conhecidos",
36 |   "Person Photos": "Fotos",
37 |   "(no biography)": "(sem biografia)",
38 |   "Known for": "Reconhecido(a) por",
39 |   "Place of birth": "Local de nascimento",
40 |   "Birthday": "Nasceu em",
41 | 
42 |   "Acting Credits": "Créditos de Atuação",
43 |   "Production Credits": "Créditos de Produção",
44 | 
45 |   "Type to search...": "Pesquisar...",
46 |   "Type something to search...": "Escreve algo para pesquisar...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} Críticas",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} Imagens",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} Vídeos",
52 | 
53 |   "as {character}": "como {character}",
54 | 
55 |   "{count} items": "{count} itens",
56 |   "Search result for: {currentSearch}": "Resultados da pesquisa: {currentSearch}",
57 | 
58 |   "Error occurred on fetching": "Ocorreu um erro na pesquisa",
59 |   "Retry": "Tentar novamente",
60 | 
61 |   "Home": "Início",
62 |   "Movies": "Filmes",
63 |   "TV Shows": "Séries",
64 |   "Search": "Pesquisar"
65 | }
66 | 


--------------------------------------------------------------------------------
/internationalization/pt-BR.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Popular Movies": "Filmes Populares",
 3 |   "Top Rated Movies": "Filmes mais bem avaliados",
 4 |   "Upcoming Movies": "Filmes que estreiam em breve",
 5 |   "Now Playing Movies": "Filmes Em Exibição",
 6 |   "Popular TV Shows": "Séries Populares",
 7 |   "Top Rated TV Shows": "Séries com Melhor Classificação",
 8 |   "TV Shows Airing Today": "Séries exibidas hoje",
 9 | 
10 |   "Watch Trailer": "Ver Trailer",
11 |   "Explore more": "Explore mais",
12 | 
13 |   "Overview": "Visão geral",
14 |   "Videos": "Vídeos",
15 |   "Media Photos": "Fotos",
16 | 
17 |   "Cast": "Elenco",
18 |   "More like this": "Mais itens semelhantes",
19 | 
20 |   "Storyline": "Enredo",
21 |   "Release Date": "Data de lançamento",
22 |   "Runtime": "Tempo de duração",
23 |   "Director": "Director",
24 |   "Budget": "Orçamento",
25 |   "Revenue": "Receita",
26 |   "Genre": "Tipo",
27 |   "Status": "Estado",
28 |   "Language": "Idioma",
29 |   "Production": "Produção",
30 | 
31 |   "Backdrops": "Imagens de fundo",
32 |   "Posters": "Pôsteres",
33 | 
34 |   "Known For": "Reconhecido(a) por",
35 |   "Credits": "Creditado(a) em",
36 |   "Person Photos": "Fotos",
37 |   "(no biography)": "(sem biografia)",
38 |   "Known for": "Reconhecido(a) por",
39 |   "Place of birth": "Local de nascimento",
40 |   "Birthday": "Nascimento",
41 | 
42 |   "Acting Credits": "Créditos de Atuação",
43 |   "Production Credits": "Créditos de Produção",
44 | 
45 |   "Type to search...": "Pesquisa...",
46 |   "Type something to search...": "Digite algo para pesquisar...",
47 | 
48 |   "{numberOfReviews} Reviews": "{numberOfReviews} Avaliações",
49 | 
50 |   "{numberOfImages} Images": "{numberOfImages} Imagens",
51 |   "{numberOfVideos} Videos": "{numberOfVideos} Vídeos",
52 | 
53 |   "as {character}": "como {character}",
54 | 
55 |   "{count} items": "{count} itens",
56 |   "Search result for: {currentSearch}": "Resultados da procura por: {currentSearch}",
57 | 
58 |   "Error occurred on fetching": "Ocorreu um erro na busca",
59 |   "Retry": "Tentar novamente",
60 | 
61 |   "Home": "Início",
62 |   "Movies": "Filmes",
63 |   "TV Shows": "Programas de TV",
64 |   "Search": "Pesquisar"
65 | }
66 | 


--------------------------------------------------------------------------------
/public/tmdb.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 190.24 81.52"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" y1="40.76" x2="190.24" y2="40.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#90cea1"/><stop offset="0.56" stop-color="#3cbec9"/><stop offset="1" stop-color="#00b3e5"/></linearGradient></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M105.67,36.06h66.9A17.67,17.67,0,0,0,190.24,18.4h0A17.67,17.67,0,0,0,172.57.73h-66.9A17.67,17.67,0,0,0,88,18.4h0A17.67,17.67,0,0,0,105.67,36.06Zm-88,45h76.9A17.67,17.67,0,0,0,112.24,63.4h0A17.67,17.67,0,0,0,94.57,45.73H17.67A17.67,17.67,0,0,0,0,63.4H0A17.67,17.67,0,0,0,17.67,81.06ZM10.41,35.42h7.8V6.92h10.1V0H.31v6.9h10.1Zm28.1,0h7.8V8.25h.1l9,27.15h6l9.3-27.15h.1V35.4h7.8V0H66.76l-8.2,23.1h-.1L50.31,0H38.51ZM152.43,55.67a15.07,15.07,0,0,0-4.52-5.52,18.57,18.57,0,0,0-6.68-3.08,33.54,33.54,0,0,0-8.07-1h-11.7v35.4h12.75a24.58,24.58,0,0,0,7.55-1.15A19.34,19.34,0,0,0,148.11,77a16.27,16.27,0,0,0,4.37-5.5,16.91,16.91,0,0,0,1.63-7.58A18.5,18.5,0,0,0,152.43,55.67ZM145,68.6A8.8,8.8,0,0,1,142.36,72a10.7,10.7,0,0,1-4,1.82,21.57,21.57,0,0,1-5,.55h-4.05v-21h4.6a17,17,0,0,1,4.67.63,11.66,11.66,0,0,1,3.88,1.87A9.14,9.14,0,0,1,145,59a9.87,9.87,0,0,1,1,4.52A11.89,11.89,0,0,1,145,68.6Zm44.63-.13a8,8,0,0,0-1.58-2.62A8.38,8.38,0,0,0,185.63,64a10.31,10.31,0,0,0-3.17-1v-.1a9.22,9.22,0,0,0,4.42-2.82,7.43,7.43,0,0,0,1.68-5,8.42,8.42,0,0,0-1.15-4.65,8.09,8.09,0,0,0-3-2.72,12.56,12.56,0,0,0-4.18-1.3,32.84,32.84,0,0,0-4.62-.33h-13.2v35.4h14.5a22.41,22.41,0,0,0,4.72-.5,13.53,13.53,0,0,0,4.28-1.65,9.42,9.42,0,0,0,3.1-3,8.52,8.52,0,0,0,1.2-4.68A9.39,9.39,0,0,0,189.66,68.47ZM170.21,52.72h5.3a10,10,0,0,1,1.85.18,6.18,6.18,0,0,1,1.7.57,3.39,3.39,0,0,1,1.22,1.13,3.22,3.22,0,0,1,.48,1.82,3.63,3.63,0,0,1-.43,1.8,3.4,3.4,0,0,1-1.12,1.2,4.92,4.92,0,0,1-1.58.65,7.51,7.51,0,0,1-1.77.2h-5.65Zm11.72,20a3.9,3.9,0,0,1-1.22,1.3,4.64,4.64,0,0,1-1.68.7,8.18,8.18,0,0,1-1.82.2h-7v-8h5.9a15.35,15.35,0,0,1,2,.15,8.47,8.47,0,0,1,2.05.55,4,4,0,0,1,1.57,1.18,3.11,3.11,0,0,1,.63,2A3.71,3.71,0,0,1,181.93,72.72Z"/></g></g></svg>


--------------------------------------------------------------------------------
/components/photo/Modal.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Image } from '~/types'
 3 | 
 4 | const images = ref<Image[] | null>(null)
 5 | const index = ref(0)
 6 | 
 7 | const current = computed(() => images.value?.[index.value])
 8 | 
 9 | provideImageModal((img, idx) => {
10 |   images.value = img
11 |   index.value = idx
12 | })
13 | 
14 | function prev() {
15 |   if (!images.value?.length)
16 |     return
17 |   index.value = (index.value - 1 + images.value.length) % images.value.length
18 | }
19 | 
20 | function next() {
21 |   if (!images.value?.length)
22 |     return
23 |   index.value = (index.value + 1) % images.value.length
24 | }
25 | 
26 | useEventListener('keydown', (e) => {
27 |   if (!images.value)
28 |     return
29 |   if (e.key === 'Escape')
30 |     images.value = null
31 |   else if (e.key === 'ArrowLeft')
32 |     prev()
33 |   else if (e.key === 'ArrowRight')
34 |     next()
35 | })
36 | </script>
37 | 
38 | <template>
39 |   <div v-if="images && current" fixed top-0 left-0 right-0 bottom-0 z-10 bg-black:90 p5 flex items-center justify-center data-testid="photo-modal">
40 |     <button type="button" absolute top-1 right-1 z-100 p3 text-3xl n-link bg-black:60 rounded-full data-testid="close-button" @click="images = null">
41 |       <div i-carbon-close />
42 |     </button>
43 |     <NuxtImg
44 |       :key="current.file_path"
45 |       format="webp"
46 |       :src="`/tmdb${current.file_path}`"
47 |       aria-hidden="true"
48 |       max-w-full max-h-full object-contain
49 |       data-testid="photo-image"
50 |     />
51 |     <div absolute left-0 top="1/2" un-translate="y--1/2">
52 |       <button type="button" py10 px4 bg-black:30 op10 hover:op100 data-testid="prev-button" @click="prev()">
53 |         <div i-ph-caret-left-light text-3xl text-white />
54 |       </button>
55 |     </div>
56 |     <div absolute right-0 top="1/2" un-translate="y--1/2">
57 |       <button type="button" py10 px4 bg-black:30 op10 hover:op100 data-testid="next-button" @click="next()">
58 |         <div i-ph-caret-right-light text-3xl text-white />
59 |       </button>
60 |     </div>
61 |     <div absolute bottom-2 left-0 right-0 items-center>
62 |       <div bg-black:50 px4 py2 data-testid="photo-counter">
63 |         {{ index + 1 }} / {{ images.length }}
64 |       </div>
65 |     </div>
66 |   </div>
67 | </template>
68 | 


--------------------------------------------------------------------------------
/components/icon/IconNuxt3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg viewBox="0 0 128 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 3 |     <path d="M60.32 32C60.6656 32 60.96 31.7135 60.96 31.36V16.48C60.96 16.48 61.76 17.92 63.2 20.32L69.44 31.04C69.7255 31.6384 70.359 32 70.88 32H75.2V8H70.88C70.5923 8 70.24 8.23906 70.24 8.64V23.68L67.36 18.56L61.6 8.8C61.3197 8.3026 60.7166 8 60.16 8H56V32H60.32Z" fill="currentColor" />
 4 |     <path d="M116.16 14.72H118.24C118.77 14.72 119.2 14.2902 119.2 13.76V9.6H123.68V14.72H128V18.56H123.68V25.44C123.68 27.12 124.489 27.84 125.92 27.84H128V32H125.28C121.592 32 119.2 29.6114 119.2 25.6V18.56H116.16V14.72Z" fill="currentColor" />
 5 |     <path d="M94.56 14.72V24.64C94.56 26.8806 93.7188 28.7695 92.48 30.08C91.2412 31.3905 89.5306 32 87.2 32C84.8694 32 82.9988 31.3905 81.76 30.08C80.5422 28.7695 79.68 26.8806 79.68 24.64V14.72H82.24C82.7859 14.72 83.3231 14.8195 83.68 15.2C84.0369 15.5593 84.16 15.7704 84.16 16.32V24.64C84.16 25.9294 84.2331 26.7259 84.8 27.36C85.3669 27.973 86.0662 28.16 87.2 28.16C88.3548 28.16 88.8731 27.973 89.44 27.36C90.0069 26.7259 90.08 25.9294 90.08 24.64V16.32C90.08 15.7704 90.2031 15.4205 90.56 15.04C90.8736 14.7057 91.2045 14.7136 91.68 14.72C91.7457 14.7209 91.9337 14.72 92 14.72H94.56Z" fill="currentColor" />
 6 |     <path d="M108.16 23.04L113.6 14.72H109.44C108.916 14.72 108.45 14.9081 108.16 15.36L105.6 19.2L103.2 15.52C102.91 15.0681 102.284 14.72 101.76 14.72H97.76L103.2 22.88L97.28 32H101.44C101.96 32 102.429 31.486 102.72 31.04L105.6 26.72L108.64 31.2C108.931 31.646 109.4 32 109.92 32H114.08L108.16 23.04Z" fill="currentColor" />
 7 |     <path d="M26.88 32H44.64C45.2068 32.0001 45.7492 31.8009 46.24 31.52C46.7308 31.2391 47.2367 30.8865 47.52 30.4C47.8033 29.9135 48.0002 29.3615 48 28.7998C47.9998 28.2381 47.8037 27.6864 47.52 27.2001L35.52 6.56C35.2368 6.0736 34.8907 5.72084 34.4 5.44C33.9093 5.15916 33.2066 4.96 32.64 4.96C32.0734 4.96 31.5307 5.15916 31.04 5.44C30.5493 5.72084 30.2032 6.0736 29.92 6.56L26.88 11.84L20.8 1.59962C20.5165 1.11326 20.1708 0.600786 19.68 0.32C19.1892 0.0392139 18.6467 0 18.08 0C17.5133 0 16.9708 0.0392139 16.48 0.32C15.9892 0.600786 15.4835 1.11326 15.2 1.59962L0.32 27.2001C0.0363166 27.6864 0.000246899 28.2381 3.05588e-07 28.7998C-0.000246288 29.3615 0.0367437 29.9134 0.32 30.3999C0.603256 30.8864 1.10919 31.2391 1.6 31.52C2.09081 31.8009 2.63324 32.0001 3.2 32H14.4C18.8379 32 22.068 30.0092 24.32 26.24L29.76 16.8L32.64 11.84L41.44 26.88H29.76L26.88 32ZM14.24 26.88H6.4L18.08 6.72L24 16.8L20.0786 23.636C18.5831 26.0816 16.878 26.88 14.24 26.88Z" fill="#00DC82" />
 8 |   </svg>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/components/person/Info.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Person } from '~/types'
 3 | import { formatDate } from '~/composables/utils'
 4 | 
 5 | const props = defineProps<{
 6 |   item: Person
 7 | }>()
 8 | 
 9 | const externalIds = computed(() => ({ ...props.item.external_ids, homepage: props.item.homepage }))
10 | </script>
11 | 
12 | <template>
13 |   <div p4 grid="~ md:cols-[max-content_1fr]" gap-8 items-center ma max-w-300 data-testid="person-details-container">
14 |     <NuxtImg
15 |       v-if="props.item.profile_path"
16 |       width="400"
17 |       height="600"
18 |       format="webp"
19 |       :src="`/tmdb${props.item.profile_path}`"
20 |       :alt="props.item.name"
21 |       block border="4 gray4/10" w-70 md:90 self-start mt-5 mx-auto
22 |       transition duration-400 object-cover aspect="3/4"
23 |       data-testid="profile-image"
24 |     />
25 |     <div p4 gap8>
26 |       <div>
27 |         <h2 text-3xl mb4 data-testid="person-name">
28 |           {{ props.item.name }}
29 |         </h2>
30 | 
31 |         <div v-if="props.item.biography" font-sans ws-pre-wrap op80 leading-relaxed data-testid="biography" v-text="props.item.biography" />
32 |         <div v-else op50 italic data-testid="no-biography">
33 |           {{ $t('(no biography)') }}
34 |         </div>
35 |       </div>
36 | 
37 |       <div text-sm op80>
38 |         <ul grid="~ cols-[max-content_1fr] gap3" items-center>
39 |           <template v-if="props.item.known_for_department">
40 |             <div op60 data-testid="known-for-label">
41 |               {{ $t('Known for') }}
42 |             </div>
43 |             <div data-testid="known-for">
44 |               {{ props.item.known_for_department }}
45 |             </div>
46 |           </template>
47 |           <template v-if="props.item.place_of_birth">
48 |             <div op60 data-testid="place-of-birth-label">
49 |               {{ $t('Place of birth') }}
50 |             </div>
51 |             <div data-testid="place-of-birth">
52 |               {{ props.item.place_of_birth }}
53 |             </div>
54 |           </template>
55 | 
56 |           <template v-if="props.item.birthday">
57 |             <div op60 data-testid="birthday-label">
58 |               {{ $t('Birthday') }}
59 |             </div>
60 |             <div data-testid="birthday">
61 |               {{ formatDate(props.item.birthday) }}
62 |             </div>
63 |           </template>
64 |         </ul>
65 |       </div>
66 | 
67 |       <div data-testid="external-links">
68 |         <ExternalLinks :links="externalIds" />
69 |       </div>
70 |     </div>
71 |   </div>
72 | </template>
73 | 


--------------------------------------------------------------------------------
/pages/search.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Media } from '~/types'
 3 | 
 4 | definePageMeta({
 5 |   pageTransition: false,
 6 | })
 7 | 
 8 | const route = useRoute()
 9 | const router = useRouter()
10 | const input = ref((route.query.s || '').toString())
11 | const error = ref<unknown>()
12 | const count = ref<undefined | number>()
13 | 
14 | const items = ref<Media[]>([])
15 | const currentSearch = ref(input.value)
16 | 
17 | function search() {
18 |   if (currentSearch.value === input.value)
19 |     return
20 | 
21 |   currentSearch.value = input.value.toString()
22 |   count.value = undefined
23 |   items.value = []
24 |   router.replace({ query: { s: input.value } })
25 | }
26 | 
27 | async function fetch(page: number) {
28 |   if (!currentSearch.value)
29 |     return
30 |   try {
31 |     const data = await searchShows(currentSearch.value, page)
32 |     count.value = data.total_results ?? count.value
33 |     items.value.push(...data.results)
34 |   }
35 |   catch (e: any) {
36 |     error.value = e
37 |   }
38 | }
39 | 
40 | const throttledSearch = useDebounceFn(search, 200)
41 | 
42 | const vFocus = {
43 |   mounted: (el: HTMLElement) => el.focus(),
44 | }
45 | 
46 | useHead({
47 |   title: computed(() => `Search: ${currentSearch.value}`),
48 | })
49 | 
50 | watch(
51 |   () => input.value,
52 |   () => throttledSearch(),
53 | )
54 | </script>
55 | 
56 | <template>
57 |   <div>
58 |     <div flex bg-gray:10 items-center px6 py4 gap3 sticky>
59 |       <div i-ph:magnifying-glass text-xl op50 />
60 |       <input
61 |         v-model="input"
62 |         v-focus
63 |         type="text"
64 |         text-2xl bg-transparent outline-none w-full
65 |         :placeholder="$t('Type to search...')"
66 |         @keyup.enter="search"
67 |       >
68 |     </div>
69 |     <div v-if="error" p8 flex flex-col gap-3 items-start>
70 |       <h1 text-4xl text-red>
71 |         {{ $t('Error occurred on fetching') }}
72 |       </h1>
73 |       <pre py2>{{ error }}</pre>
74 |       <button n-link border px4 py1 rounded @click="error = undefined">
75 |         {{ $t('Retry') }}
76 |       </button>
77 |     </div>
78 |     <MediaAutoLoadGrid
79 |       v-else-if="currentSearch"
80 |       :key="currentSearch"
81 |       :fetch="fetch"
82 |       :items="items"
83 |       :count="count"
84 |       :blocking="false"
85 |       type="movie"
86 |     >
87 |       <div>{{ $t('Search result for: {currentSearch}', { currentSearch }) }}</div>
88 |     </MediaAutoLoadGrid>
89 |     <div v-else text-4xl p10 font-100 op50 text-center>
90 |       {{ $t('Type something to search...') }}
91 |     </div>
92 |   </div>
93 | </template>
94 | 


--------------------------------------------------------------------------------
/components/ExternalLinks.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { ExternalIds } from '~/types'
 3 | 
 4 | const props = defineProps<{
 5 |   links: ExternalIds
 6 | }>()
 7 | 
 8 | const imdbType = computed(() => {
 9 |   if (props.links.imdb_id?.startsWith('nm'))
10 |     return 'name'
11 | 
12 |   return 'title'
13 | })
14 | </script>
15 | 
16 | <template>
17 |   <div flex="~ row gap5" items-center text-lg mt-5>
18 |     <a
19 |       v-if="links.twitter_id"
20 |       :href="`https://twitter.com/${links.twitter_id}`"
21 |       target="_blank"
22 |       aria-label="Link to Twitter account"
23 |       rel="noopener"
24 |       n-link
25 |     >
26 |       <div i-simple-icons:twitter />
27 |     </a>
28 |     <a
29 |       v-if="links.facebook_id"
30 |       :href="`https://www.facebook.com/${links.facebook_id}`"
31 |       target="_blank"
32 |       aria-label="Link to Facebook account"
33 |       rel="noopener"
34 |       n-link
35 |     >
36 |       <div i-simple-icons:facebook />
37 |     </a>
38 |     <a
39 |       v-if="links.instagram_id"
40 |       :href="`https://instagram.com/${links.instagram_id}`"
41 |       target="_blank"
42 |       aria-label="Link to Instagram account"
43 |       rel="noopener"
44 |       n-link
45 |     >
46 |       <div i-simple-icons:instagram />
47 |     </a>
48 |     <a
49 |       v-if="links.imdb_id"
50 |       :href="`https://www.imdb.com/${imdbType}/${links.imdb_id}`"
51 |       target="_blank"
52 |       aria-label="Link to IMDb account"
53 |       rel="noopener"
54 |       n-link
55 |     >
56 |       <div i-cib:imdb />
57 |     </a>
58 |     <a
59 |       v-if="links.github_id"
60 |       :href="`https://github.com/${links.github_id}`"
61 |       target="_blank"
62 |       aria-label="Link to GitHub account"
63 |       rel="noopener"
64 |       n-link
65 |     >
66 |       <div i-simple-icons:github />
67 |     </a>
68 |     <a
69 |       v-if="links.linkedin_id"
70 |       :href="`https://www.linkedin.com/in/${links.linkedin_id}`"
71 |       target="_blank"
72 |       aria-label="Link to LinkedIn account"
73 |       rel="noopener"
74 |       n-link
75 |     >
76 |       <div i-simple-icons:linkedin />
77 |     </a>
78 |     <a
79 |       v-if="links.email"
80 |       :href="links.email"
81 |       aria-label="Link to Email"
82 |       rel="noopener" scale-120
83 |       n-link
84 |     >
85 |       <div i-ph-envelope-simple />
86 |     </a>
87 |     <a
88 |       v-if="links.homepage"
89 |       :href="links.homepage"
90 |       aria-label="Link to Homepage"
91 |       rel="noopener" scale-120
92 |       n-link
93 |     >
94 |       <div i-ph-link-simple />
95 |     </a>
96 |     <slot />
97 |   </div>
98 | </template>
99 | 


--------------------------------------------------------------------------------
/components/person/Photos.nuxt.test.ts:
--------------------------------------------------------------------------------
 1 | import type { VueWrapper } from '@vue/test-utils'
 2 | import { mountSuspended } from '@nuxt/test-utils/runtime'
 3 | import { describe, expect, it } from 'vitest'
 4 | 
 5 | import { mockImage, mockPerson } from '~/tests/unit/mocks'
 6 | import PersonPhotos from './Photos.vue'
 7 | 
 8 | describe('personPhotos', () => {
 9 |   // Helper functions to get elements by data-testid
10 |   const getContainer = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-photos-container"]')
11 |   const getTitle = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-photos-title"]')
12 |   const getNumberOfImages = (wrapper: VueWrapper) => wrapper.find('[data-testid="number-of-images"]')
13 |   const getPhotosGrid = (wrapper: VueWrapper) => wrapper.find('[data-testid="photos-grid"]')
14 |   const getPhotoCards = (wrapper: VueWrapper) => wrapper.findAll('[data-testid="photo-card"]')
15 | 
16 |   it('renders the container', async () => {
17 |     const item = mockPerson()
18 | 
19 |     const wrapper = await mountSuspended(PersonPhotos, {
20 |       props: { item },
21 |     })
22 | 
23 |     expect(getContainer(wrapper).exists()).toBe(true)
24 |   })
25 | 
26 |   it('renders the title and number of images', async () => {
27 |     const item = mockPerson({
28 |       images: {
29 |         profiles: [mockImage(), mockImage()],
30 |       },
31 |     })
32 | 
33 |     const wrapper = await mountSuspended(PersonPhotos, {
34 |       props: { item },
35 |     })
36 | 
37 |     expect(getTitle(wrapper).text()).toBe('Photos')
38 |     expect(getNumberOfImages(wrapper).text()).toBe('2 Images')
39 |   })
40 | 
41 |   it('renders the photos grid', async () => {
42 |     const item = mockPerson({
43 |       images: {
44 |         profiles: [mockImage(), mockImage()],
45 |       },
46 |     })
47 | 
48 |     const wrapper = await mountSuspended(PersonPhotos, {
49 |       props: { item },
50 |     })
51 | 
52 |     expect(getPhotosGrid(wrapper).exists()).toBe(true)
53 |   })
54 | 
55 |   it('renders photo cards correctly', async () => {
56 |     const item = mockPerson({
57 |       images: {
58 |         profiles: [
59 |           mockImage({ file_path: '/path/to/image1.jpg' }),
60 |           mockImage({ file_path: '/path/to/image2.jpg' }),
61 |         ],
62 |       },
63 |     })
64 | 
65 |     const wrapper = await mountSuspended(PersonPhotos, {
66 |       props: { item },
67 |     })
68 | 
69 |     const photoCards = getPhotoCards(wrapper)
70 | 
71 |     expect(photoCards.length).toBe(2)
72 |     expect(photoCards[0].attributes('data-testid')).toBe('photo-card')
73 |     expect(photoCards[1].attributes('data-testid')).toBe('photo-card')
74 |   })
75 | })
76 | 


--------------------------------------------------------------------------------
/components/person/Details.nuxt.test.ts:
--------------------------------------------------------------------------------
 1 | import type { VueWrapper } from '@vue/test-utils'
 2 | import { mountSuspended } from '@nuxt/test-utils/runtime'
 3 | import { describe, expect, it } from 'vitest'
 4 | 
 5 | import { mockMedia, mockPerson } from '~/tests/unit/mocks'
 6 | import PersonDetails from './Details.vue'
 7 | 
 8 | describe('personDetails', () => {
 9 |   // Helper functions to get elements by data-testid
10 |   const getTabKnown = (wrapper: VueWrapper) => wrapper.find('[data-testid="tab-known"]')
11 |   const getTabCredits = (wrapper: VueWrapper) => wrapper.find('[data-testid="tab-credits"]')
12 |   const getTabPhotos = (wrapper: VueWrapper) => wrapper.find('[data-testid="tab-photos"]')
13 |   const getMediaGrid = (wrapper: VueWrapper) => wrapper.find('[data-testid="media-grid"]')
14 |   const getMediaCards = (wrapper: VueWrapper) => wrapper.findAll('[data-testid="media-card"]')
15 |   const getPersonCredits = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-credits"]')
16 |   const getPersonPhotos = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-photos"]')
17 | 
18 |   it('renders the tabs', async () => {
19 |     const item = mockPerson()
20 | 
21 |     const wrapper = await mountSuspended(PersonDetails, {
22 |       props: { item },
23 |     })
24 | 
25 |     expect(getTabKnown(wrapper).exists()).toBe(true)
26 |     expect(getTabCredits(wrapper).exists()).toBe(true)
27 |     expect(getTabPhotos(wrapper).exists()).toBe(true)
28 |   })
29 | 
30 |   it('renders the media grid when "Known For" tab is selected', async () => {
31 |     const item = mockPerson({
32 |       combined_credits: {
33 |         cast: [mockMedia({ id: '1', title: 'Movie 1', release_date: '2023-01-01' })],
34 |         crew: [],
35 |       },
36 |     })
37 | 
38 |     const wrapper = await mountSuspended(PersonDetails, {
39 |       props: { item },
40 |     })
41 | 
42 |     await getTabKnown(wrapper).trigger('click')
43 | 
44 |     expect(getMediaGrid(wrapper).exists()).toBe(true)
45 |     expect(getMediaCards(wrapper).length).toBe(1)
46 |   })
47 | 
48 |   it('renders the person credits when "Credits" tab is selected', async () => {
49 |     const item = mockPerson()
50 | 
51 |     const wrapper = await mountSuspended(PersonDetails, {
52 |       props: { item },
53 |     })
54 | 
55 |     await getTabCredits(wrapper).trigger('click')
56 | 
57 |     expect(getPersonCredits(wrapper).exists()).toBe(true)
58 |   })
59 | 
60 |   it('renders the person photos when "Photos" tab is selected', async () => {
61 |     const item = mockPerson()
62 | 
63 |     const wrapper = await mountSuspended(PersonDetails, {
64 |       props: { item },
65 |     })
66 | 
67 |     await getTabPhotos(wrapper).trigger('click')
68 | 
69 |     expect(getPersonPhotos(wrapper).exists()).toBe(true)
70 |   })
71 | })
72 | 


--------------------------------------------------------------------------------
/types.ts:
--------------------------------------------------------------------------------
  1 | export type MediaType = 'movie' | 'tv'
  2 | 
  3 | export interface Media {
  4 |   adult: boolean
  5 |   backdrop_path: string
  6 |   genre_ids: number[]
  7 |   id: string
  8 |   original_language: string
  9 |   original_title: string
 10 |   overview: string
 11 |   popularity: number
 12 |   poster_path: string
 13 |   release_date?: string
 14 |   first_air_date?: string
 15 |   title?: string
 16 |   name?: string
 17 |   video: boolean
 18 |   vote_average: number
 19 |   vote_count: number
 20 |   media_type?: MediaType
 21 |   // details
 22 |   homepage?: string
 23 |   runtime?: number
 24 |   budget?: number
 25 |   revenue?: number
 26 |   status?: string
 27 |   genres?: Genre[]
 28 |   production_companies?: any[]
 29 |   videos?: {
 30 |     results: Video[]
 31 |   }
 32 |   credits?: {
 33 |     cast: Person[]
 34 |     crew: Person[]
 35 |   }
 36 |   images?: {
 37 |     backdrops: Image[]
 38 |     posters: Image[]
 39 |   }
 40 |   external_ids?: ExternalIds
 41 |   // cast
 42 |   character?: string
 43 | }
 44 | 
 45 | export interface Person {
 46 |   adult: boolean
 47 |   gender: number
 48 |   id: number
 49 |   known_for_department: string
 50 |   name: string
 51 |   original_name: string
 52 |   profile_path: string
 53 |   popularity: number
 54 |   cast_id?: number
 55 |   job?: string
 56 |   character?: string
 57 |   credit_id: string
 58 |   order: number
 59 |   // details
 60 |   also_known_as?: string[]
 61 |   birthday?: string
 62 |   place_of_birth?: string
 63 |   homepage?: string
 64 |   biography?: string
 65 |   external_ids?: ExternalIds
 66 |   combined_credits?: {
 67 |     cast?: Media[]
 68 |     crew?: Media[]
 69 |   }
 70 |   images?: {
 71 |     profiles: Image[]
 72 |   }
 73 | }
 74 | 
 75 | export interface Video {
 76 |   iso_639_1: string
 77 |   iso_3166_1: string
 78 |   name: string
 79 |   key: string
 80 |   site: string
 81 |   size: number
 82 |   type: string
 83 |   official: boolean
 84 |   published_at: string
 85 |   id: string
 86 | }
 87 | 
 88 | export interface Image {
 89 |   aspect_ratio: number
 90 |   height: number
 91 |   iso_639_1: string
 92 |   file_path: string
 93 |   vote_average: number
 94 |   vote_count: number
 95 |   width: number
 96 | }
 97 | 
 98 | export interface ExternalIds {
 99 |   imdb_id?: string
100 |   facebook_id?: string
101 |   instagram_id?: string
102 |   twitter_id?: string
103 |   linkedin_id?: string
104 |   github_id?: string
105 |   email?: string
106 |   homepage?: string
107 | }
108 | 
109 | export interface PageResult<T> {
110 |   page: number
111 |   results: T[]
112 |   total_pages: number
113 |   total_results: number
114 | }
115 | 
116 | export interface Genre {
117 |   id: number
118 |   name: string
119 | }
120 | 
121 | export interface QueryItem {
122 |   type: MediaType
123 |   title: string
124 |   query: string
125 | }
126 | 
127 | export interface Credits {
128 |   cast: Media[]
129 | }
130 | 


--------------------------------------------------------------------------------
/components/person/Credits.nuxt.test.ts:
--------------------------------------------------------------------------------
 1 | import type { VueWrapper } from '@vue/test-utils'
 2 | import type { Person } from '~/types'
 3 | import { mountSuspended } from '@nuxt/test-utils/runtime'
 4 | 
 5 | import { describe, expect, it } from 'vitest'
 6 | import { mockMedia, mockPerson } from '~/tests/unit/mocks'
 7 | import CreditsComponent from './Credits.vue'
 8 | 
 9 | async function createWrapper(item: Person) {
10 |   const wrapper = await mountSuspended(CreditsComponent, {
11 |     props: {
12 |       item,
13 |     },
14 |   })
15 |   return wrapper
16 | }
17 | 
18 | describe('personCredits', () => {
19 |   // Helper functions to get elements by data-testid
20 |   const findPersonCreditsContainer = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-credits-container"]')
21 |   const findActingCreditsList = (wrapper: VueWrapper) => wrapper.find('[data-testid="acting-credits-list"]')
22 |   const findProductionCreditsList = (wrapper: VueWrapper) => wrapper.find('[data-testid="production-credits-list"]')
23 | 
24 |   it('renders acting credits list when there are acting credits', async () => {
25 |     const item = mockPerson({
26 |       combined_credits: {
27 |         cast: [mockMedia()],
28 |         crew: [],
29 |       },
30 |     })
31 | 
32 |     const wrapper = await createWrapper(item)
33 | 
34 |     expect(findActingCreditsList(wrapper).exists()).toBe(true)
35 |     expect(findProductionCreditsList(wrapper).exists()).toBe(false)
36 |   })
37 | 
38 |   it('renders production credits list when there are production credits', async () => {
39 |     const item = mockPerson({
40 |       combined_credits: {
41 |         cast: [],
42 |         crew: [mockMedia({ title: 'Production 1' })],
43 |       },
44 |     })
45 | 
46 |     const wrapper = await createWrapper(item)
47 | 
48 |     expect(findActingCreditsList(wrapper).exists()).toBe(false)
49 |     expect(findProductionCreditsList(wrapper).exists()).toBe(true)
50 |   })
51 | 
52 |   it('renders both acting and production credits lists when there are both', async () => {
53 |     const item = mockPerson({
54 |       combined_credits: {
55 |         cast: [mockMedia()],
56 |         crew: [mockMedia({ title: 'Production 1' })],
57 |       },
58 |     })
59 | 
60 |     const wrapper = await createWrapper(item)
61 | 
62 |     expect(findActingCreditsList(wrapper).exists()).toBe(true)
63 |     expect(findProductionCreditsList(wrapper).exists()).toBe(true)
64 |   })
65 | 
66 |   it('renders neither list when there are no credits', async () => {
67 |     const item = mockPerson({
68 |       combined_credits: {
69 |         cast: [],
70 |         crew: [],
71 |       },
72 |     })
73 | 
74 |     const wrapper = await createWrapper(item)
75 | 
76 |     expect(findPersonCreditsContainer(wrapper).exists()).toBe(true)
77 |     expect(findActingCreditsList(wrapper).exists()).toBe(false)
78 |     expect(findProductionCreditsList(wrapper).exists()).toBe(false)
79 |   })
80 | })
81 | 


--------------------------------------------------------------------------------
/components/person/Card.nuxt.test.ts:
--------------------------------------------------------------------------------
 1 | import type { VueWrapper } from '@vue/test-utils'
 2 | import type { Person } from '~/types'
 3 | import { mountSuspended } from '@nuxt/test-utils/runtime'
 4 | 
 5 | import { describe, expect, it } from 'vitest'
 6 | import { baseUrl } from '~/tests/unit/config'
 7 | import { mockPerson } from '~/tests/unit/mocks'
 8 | import PersonCard from './Card.vue'
 9 | 
10 | function initComponent(props: { item: Person }) {
11 |   return mountSuspended(PersonCard, {
12 |     props,
13 |   })
14 | }
15 | 
16 | describe('personCard', () => {
17 |   // Helper functions to get elements by data-testid
18 |   const findImage = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-image"]')
19 |   const findName = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-name"]')
20 |   const findCharacter = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-character"]')
21 |   const findPlaceholder = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-placeholder"]')
22 |   const findLink = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-link"]')
23 | 
24 |   it('renders correctly with profile image', async () => {
25 |     const personWithProfile = mockPerson()
26 | 
27 |     const wrapper = await initComponent({ item: personWithProfile })
28 | 
29 |     expect(findImage(wrapper).exists()).toBe(true)
30 | 
31 |     expect(findImage(wrapper).attributes('src')).toBe(`${baseUrl}/ipx/f_webp&s_500x800/tmdb${personWithProfile.profile_path}`)
32 |     expect(findImage(wrapper).attributes('alt')).toBe('John Doe')
33 | 
34 |     expect(findName(wrapper).text()).toBe('John Doe')
35 | 
36 |     expect(findCharacter(wrapper).text()).toBe('Main Character')
37 |   })
38 | 
39 |   it('renders correctly without profile image', async () => {
40 |     const personWithoutProfile = mockPerson({ profile_path: '', name: 'Jane Doe', character: 'Supporting Character', id: 2 })
41 |     const wrapper = await initComponent({ item: personWithoutProfile })
42 | 
43 |     expect(findImage(wrapper).exists()).toBe(false)
44 | 
45 |     expect(findPlaceholder(wrapper).exists()).toBe(true)
46 | 
47 |     expect(findName(wrapper).text()).toBe('Jane Doe')
48 | 
49 |     expect(findCharacter(wrapper).text()).toBe('Supporting Character')
50 |   })
51 | 
52 |   it('renders correctly with known_for_department when character is missing', async () => {
53 |     const personWithDepartment = mockPerson({ character: '', known_for_department: 'Acting', name: 'Jane Doe', id: 2 })
54 |     const wrapper = await initComponent({ item: personWithDepartment })
55 | 
56 |     expect(findImage(wrapper).exists()).toBe(true)
57 | 
58 |     expect(findName(wrapper).text()).toBe('Jane Doe')
59 | 
60 |     expect(findCharacter(wrapper).text()).toBe('Acting')
61 |   })
62 | 
63 |   it('links to the correct URL', async () => {
64 |     const personWithProfile = mockPerson()
65 |     const wrapper = await initComponent({ item: personWithProfile })
66 | 
67 |     expect(findLink(wrapper).attributes('href')).toBe('/person/1')
68 |   })
69 | })
70 | 


--------------------------------------------------------------------------------
/components/person/Info.nuxt.test.ts:
--------------------------------------------------------------------------------
 1 | import type { VueWrapper } from '@vue/test-utils'
 2 | import { mountSuspended } from '@nuxt/test-utils/runtime'
 3 | import { describe, expect, it } from 'vitest'
 4 | 
 5 | import { mockPerson } from '~/tests/unit/mocks'
 6 | import PersonInfo from './Info.vue'
 7 | 
 8 | describe('personInfo', () => {
 9 |   // Helper functions to get elements by data-testid
10 |   const getContainer = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-details-container"]')
11 |   const getProfileImage = (wrapper: VueWrapper) => wrapper.find('[data-testid="profile-image"]')
12 |   const getName = (wrapper: VueWrapper) => wrapper.find('[data-testid="person-name"]')
13 |   const getBiography = (wrapper: VueWrapper) => wrapper.find('[data-testid="biography"]')
14 |   const getNoBiography = (wrapper: VueWrapper) => wrapper.find('[data-testid="no-biography"]')
15 |   const getKnownForLabel = (wrapper: VueWrapper) => wrapper.find('[data-testid="known-for-label"]')
16 |   const getKnownFor = (wrapper: VueWrapper) => wrapper.find('[data-testid="known-for"]')
17 |   const getPlaceOfBirthLabel = (wrapper: VueWrapper) => wrapper.find('[data-testid="place-of-birth-label"]')
18 |   const getPlaceOfBirth = (wrapper: VueWrapper) => wrapper.find('[data-testid="place-of-birth"]')
19 |   const getBirthdayLabel = (wrapper: VueWrapper) => wrapper.find('[data-testid="birthday-label"]')
20 |   const getBirthday = (wrapper: VueWrapper) => wrapper.find('[data-testid="birthday"]')
21 |   const getExternalLinks = (wrapper: VueWrapper) => wrapper.find('[data-testid="external-links"]')
22 | 
23 |   it('renders the container', async () => {
24 |     const item = mockPerson()
25 | 
26 |     const wrapper = await mountSuspended(PersonInfo, {
27 |       props: { item },
28 |     })
29 | 
30 |     expect(getContainer(wrapper).exists()).toBe(true)
31 |   })
32 | 
33 |   it('renders the profile image', async () => {
34 |     const item = mockPerson()
35 | 
36 |     const wrapper = await mountSuspended(PersonInfo, {
37 |       props: { item },
38 |     })
39 | 
40 |     expect(getProfileImage(wrapper).exists()).toBe(true)
41 |   })
42 | 
43 |   it('renders the name and biography', async () => {
44 |     const item = mockPerson({ biography: 'This is a biography.' })
45 | 
46 |     const wrapper = await mountSuspended(PersonInfo, {
47 |       props: { item },
48 |     })
49 | 
50 |     expect(getName(wrapper).text()).toBe(item.name)
51 |     expect(getBiography(wrapper).text()).toBe(item.biography)
52 |   })
53 | 
54 |   it('renders the known for, place of birth, and birthday', async () => {
55 |     const item = mockPerson({
56 |       known_for_department: 'Acting',
57 |       place_of_birth: 'Somewhere',
58 |       birthday: '1980-01-01',
59 |     })
60 | 
61 |     const wrapper = await mountSuspended(PersonInfo, {
62 |       props: { item },
63 |     })
64 | 
65 |     expect(getKnownForLabel(wrapper).text()).toBe('Known for')
66 |     expect(getKnownFor(wrapper).text()).toBe(item.known_for_department)
67 |     expect(getPlaceOfBirthLabel(wrapper).text()).toBe('Place of birth')
68 |     expect(getPlaceOfBirth(wrapper).text()).toBe(item.place_of_birth)
69 |     expect(getBirthdayLabel(wrapper).text()).toBe('Birthday')
70 |     expect(getBirthday(wrapper).text()).toBe('1/1/1980')
71 |   })
72 | 
73 |   it('renders external links', async () => {
74 |     const item = mockPerson()
75 | 
76 |     const wrapper = await mountSuspended(PersonInfo, {
77 |       props: { item },
78 |     })
79 | 
80 |     expect(getExternalLinks(wrapper).exists()).toBe(true)
81 |   })
82 | 
83 |   it('renders no biography text when biography is missing', async () => {
84 |     const item = mockPerson({ biography: '' })
85 | 
86 |     const wrapper = await mountSuspended(PersonInfo, {
87 |       props: { item },
88 |     })
89 | 
90 |     expect(getNoBiography(wrapper).text()).toBe('(no biography)')
91 |   })
92 | })
93 | 


--------------------------------------------------------------------------------
/composables/utils.nuxt.test.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it, vi } from 'vitest'
  2 | import { createApp, defineComponent, h } from 'vue'
  3 | import LANGUAGES from '~/constants/languages'
  4 | import { formatDate, formatLang, formatTime, formatVote, numberWithCommas, useSingleton } from './utils'
  5 | 
  6 | describe('utils', () => {
  7 |   describe('formatDate', () => {
  8 |     it('should format date according to locale', () => {
  9 |       const date = '2023-10-01'
 10 |       const formattedDate = formatDate(date)
 11 |       expect(formattedDate).toBe(new Date(date).toLocaleDateString('en-US'))
 12 |     })
 13 |   })
 14 | 
 15 |   describe('formatTime', () => {
 16 |     it('should format minutes into hours and minutes', () => {
 17 |       expect(formatTime(125)).toBe('2h 5min')
 18 |       expect(formatTime(45)).toBe('45min')
 19 |       expect(formatTime(0)).toBe('0min')
 20 |     })
 21 |   })
 22 | 
 23 |   describe('numberWithCommas', () => {
 24 |     it('should format number with commas', () => {
 25 |       expect(numberWithCommas(1000)).toBe('1,000')
 26 |       expect(numberWithCommas(1234567)).toBe('1,234,567')
 27 |     })
 28 |   })
 29 | 
 30 |   describe('formatLang', () => {
 31 |     it('should return the full English name of the language if found', () => {
 32 |       const iso = 'en'
 33 |       const language = LANGUAGES.find(lang => lang.iso_639_1 === iso)
 34 |       if (language) {
 35 |         expect(formatLang(iso)).toBe(language.english_name)
 36 |       }
 37 |     })
 38 | 
 39 |     it('should return "No Language" if the language is xx', () => {
 40 |       const iso = 'xx'
 41 |       expect(formatLang(iso)).toBe('No Language')
 42 |     })
 43 | 
 44 |     it('should handle if the language is not found', () => {
 45 |       const iso = 'John Doe'
 46 |       expect(formatLang(iso)).toBe('John Doe')
 47 |     })
 48 |   })
 49 | 
 50 |   describe('useSingleton', () => {
 51 |     it('should provide and use singleton without issues', () => {
 52 |       const [provideFn, useFn] = useSingleton<() => void>()
 53 | 
 54 |       const mockFn = vi.fn()
 55 | 
 56 |       const ProviderComponent = defineComponent({
 57 |         setup() {
 58 |           provideFn(mockFn)
 59 |           return () => h('div', 'ProviderComponent')
 60 |         },
 61 |       })
 62 | 
 63 |       const ConsumerComponent = defineComponent({
 64 |         setup() {
 65 |           const usedFn = useFn()
 66 |           expect(usedFn).toBe(mockFn)
 67 |           return () => h('div', 'ConsumerComponent')
 68 |         },
 69 |       })
 70 | 
 71 |       const app = createApp({
 72 |         components: { ProviderComponent, ConsumerComponent },
 73 |         template: '<ProviderComponent /><ConsumerComponent />',
 74 |       })
 75 | 
 76 |       const root = document.createElement('div')
 77 |       app.mount(root)
 78 |     })
 79 | 
 80 |     it('should use fallback value if singleton is not provided', () => {
 81 |       const [, useFn] = useSingleton<string>()
 82 | 
 83 |       const fallback = 'fallback value'
 84 | 
 85 |       const ConsumerComponent = defineComponent({
 86 |         setup() {
 87 |           const usedValue = useFn(fallback)
 88 |           expect(usedValue).toBe(fallback)
 89 |           return () => h('div', 'ConsumerComponent')
 90 |         },
 91 |       })
 92 | 
 93 |       const app = createApp({
 94 |         components: { ConsumerComponent },
 95 |         template: '<ConsumerComponent />',
 96 |       })
 97 | 
 98 |       const root = document.createElement('div')
 99 |       app.mount(root)
100 |     })
101 |   })
102 | 
103 |   describe('formatVote', () => {
104 |     it('should format vote count correctly', () => {
105 |       expect(formatVote(1234)).toBe('1.2K')
106 |       expect(formatVote(56789)).toBe('56.8K')
107 |       expect(formatVote(7.3)).toBe('7.3')
108 |       expect(formatVote(0)).toBe('0')
109 |       expect(formatVote(undefined)).toBe('0')
110 |     })
111 |   })
112 | })
113 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
  1 | import process from 'node:process'
  2 | 
  3 | const isDev = process.env.NODE_ENV === 'development'
  4 | 
  5 | // const apiBaseUrl = 'http://localhost:3001'
  6 | const apiBaseUrl = 'https://movies-proxy.vercel.app'
  7 | 
  8 | export default defineNuxtConfig({
  9 |   modules: ['@vueuse/nuxt', '@unocss/nuxt', '@nuxt/image', '@nuxtjs/i18n', '@nuxtjs/html-validator', '@nuxt/test-utils/module'],
 10 | 
 11 |   experimental: {
 12 |     // inlineSSRStyles: false,
 13 |     viewTransition: true,
 14 |     renderJsonPayloads: true,
 15 |   },
 16 | 
 17 |   routeRules: {
 18 |     '/**': isDev ? {} : { cache: { swr: true, maxAge: 120, staleMaxAge: 60, headersOnly: true } },
 19 |   },
 20 | 
 21 |   runtimeConfig: {
 22 |     public: {
 23 |       apiBaseUrl,
 24 |     },
 25 |   },
 26 | 
 27 |   devtools: {
 28 |     enabled: true,
 29 |   },
 30 | 
 31 |   image: {
 32 |     provider: 'proxy',
 33 |     providers: {
 34 |       proxy: {
 35 |         provider: 'ipx',
 36 |         options: {
 37 |           baseURL: `${apiBaseUrl}/ipx`,
 38 |         },
 39 |       },
 40 |     },
 41 |   },
 42 | 
 43 |   nitro: {
 44 |     routeRules: {
 45 |       '/**': { isr: false },
 46 |     },
 47 |   },
 48 | 
 49 |   i18n: {
 50 |     detectBrowserLanguage: {
 51 |       useCookie: true,
 52 |       fallbackLocale: 'en',
 53 |     },
 54 |     strategy: 'no_prefix',
 55 |     locales: [
 56 |       {
 57 |         code: 'en',
 58 |         name: 'English',
 59 |         file: 'en.json',
 60 |       },
 61 |       {
 62 |         code: 'fa-IR',
 63 |         name: 'فارسی',
 64 |         file: 'fa-IR.json',
 65 |       },
 66 |       {
 67 |         code: 'de-DE',
 68 |         name: 'Deutsch',
 69 |         file: 'de-DE.json',
 70 |       },
 71 |       {
 72 |         code: 'es-ES',
 73 |         name: 'Español',
 74 |         file: 'es-ES.json',
 75 |       },
 76 |       {
 77 |         code: 'it',
 78 |         name: 'Italiano',
 79 |         file: 'it.json',
 80 |       },
 81 |       {
 82 |         code: 'ja',
 83 |         name: '日本語',
 84 |         file: 'ja.json',
 85 |       },
 86 |       {
 87 |         code: 'zh-CN',
 88 |         name: '简体中文',
 89 |         file: 'zh-CN.json',
 90 |       },
 91 |       {
 92 |         code: 'pt-PT',
 93 |         name: 'Português',
 94 |         file: 'pt-PT.json',
 95 |       },
 96 |       {
 97 |         code: 'pt-BR',
 98 |         name: 'Português do Brasil',
 99 |         file: 'pt-BR.json',
100 |       },
101 |       {
102 |         code: 'ru-RU',
103 |         name: 'Русский',
104 |         file: 'ru-RU.json',
105 |       },
106 |       {
107 |         code: 'fr-FR',
108 |         name: 'Français',
109 |         file: 'fr-FR.json',
110 |       },
111 |       {
112 |         code: 'uk-UA',
113 |         name: 'Українська',
114 |         file: 'uk-UA.json',
115 |       },
116 |       {
117 |         code: 'vi',
118 |         name: 'Tiếng Việt',
119 |         file: 'vi.json',
120 |       },
121 |     ],
122 |     lazy: true,
123 |     langDir: 'internationalization',
124 |     defaultLocale: 'en',
125 |   },
126 | 
127 |   htmlValidator: {
128 |     usePrettier: false,
129 |     logLevel: 'verbose',
130 |     failOnError: false,
131 |     /** A list of routes to ignore (that is, not check validity for). */
132 |     ignore: [/\.(xml|rss|json)$/],
133 |     options: {
134 |       extends: ['html-validate:document', 'html-validate:recommended', 'html-validate:standard'],
135 |       rules: {
136 |         'svg-focusable': 'off',
137 |         'no-unknown-elements': 'error',
138 |         // Conflicts or not needed as we use prettier formatting
139 |         'void-style': 'off',
140 |         'no-trailing-whitespace': 'off',
141 |         // Conflict with Nuxt defaults
142 |         'require-sri': 'off',
143 |         'attribute-boolean-style': 'off',
144 |         'doctype-style': 'off',
145 |         // Unreasonable rule
146 |         'no-inline-style': 'off',
147 |       },
148 |     },
149 |   },
150 | 
151 |   compatibilityDate: '2024-11-22',
152 | })
153 | 


--------------------------------------------------------------------------------
/components/media/Hero.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import type { Media } from '~/types'
  3 | import { formatTime } from '~/composables/utils'
  4 | 
  5 | const props = withDefaults(defineProps<{
  6 |   item: Media
  7 | }>(), {
  8 |   item: () => ({} as Media),
  9 | })
 10 | 
 11 | const trailer = computed(() => getTrailer(props.item))
 12 | 
 13 | const showModal = useIframeModal()
 14 | function playTrailer() {
 15 |   if (trailer.value)
 16 |     showModal(trailer.value)
 17 | }
 18 | 
 19 | const mounted = useMounted()
 20 | </script>
 21 | 
 22 | <template>
 23 |   <div :key="item.id" relative class="aspect-ratio-3/2 lg:aspect-ratio-25/9" bg-black>
 24 |     <div
 25 |       absolute top-0 right-0
 26 |       lt-lg="left-0"
 27 |       lg="bottom-0 left-1/3"
 28 |     >
 29 |       <NuxtImg
 30 |         width="1220"
 31 |         height="659"
 32 |         format="webp"
 33 |         :src="`/tmdb${props.item.backdrop_path}`"
 34 |         :alt="props.item.title || props.item.name"
 35 |         h-full w-full object-cover
 36 |       />
 37 |     </div>
 38 |     <div
 39 |       absolute bottom-0 left-0 top-0 px-10
 40 |       flex="~ col" justify-center
 41 |       lt-lg="bg-gradient-to-t right-0 p10"
 42 |       lg="px25 w-2/3 bg-gradient-to-r"
 43 |       from-black via-black to-transparent
 44 |     >
 45 |       <Transition appear name="hero">
 46 |         <div v-show="mounted">
 47 |           <h1 mt-2 text-4xl lg:text-5xl line-clamp-2>
 48 |             {{ props.item.title || props.item.name }}
 49 |           </h1>
 50 |           <div flex="~ row wrap" gap2 items-center mt4>
 51 |             <StarsRate w-25 :value="props.item.vote_average" />
 52 |             <div class="op50 hidden md:block">
 53 |               {{ formatVote(props.item.vote_average) }}
 54 |             </div>
 55 |             <span class="op50 hidden md:block">·</span>
 56 |             <div class="op50 hidden md:block">
 57 |               {{ $t('{numberOfReviews} Reviews', { numberOfReviews: formatVote(props.item.vote_count) }) }}
 58 |             </div>
 59 |             <span v-if="props.item.release_date" op50>·</span>
 60 |             <div v-if="props.item.release_date" op50>
 61 |               {{ props.item.release_date.slice(0, 4) }}
 62 |             </div>
 63 |             <span v-if="props.item.runtime" op50>·</span>
 64 |             <div v-if="props.item.runtime" op50>
 65 |               {{ formatTime(props.item.runtime) }}
 66 |             </div>
 67 |           </div>
 68 |           <p class="mt-2 op80 leading-relaxed of-hidden line-clamp-3 md:line-clamp-5 text-xs md:text-base">
 69 |             {{ props.item.overview }}
 70 |           </p>
 71 |           <div v-if="trailer" class="py5 display-none lg:block">
 72 |             <button
 73 |               type="button"
 74 |               flex="~ gap2" items-center p="x6 y3"
 75 |               bg="gray/15 hover:gray/20" transition
 76 |               :title="$t('Watch Trailer')"
 77 |               @click="playTrailer()"
 78 |             >
 79 |               <div i-ph-play />
 80 |               {{ $t('Watch Trailer') }}
 81 |             </button>
 82 |           </div>
 83 |         </div>
 84 |       </Transition>
 85 |     </div>
 86 |     <div v-if="trailer" lg:hidden absolute left-0 top-0 right-0 h="2/3" items-center justify-center>
 87 |       <button
 88 |         type="button"
 89 |         items-center p10 text-5xl op20 hover:op80 transition
 90 |         :title="$t('Watch Trailer')"
 91 |         @click="playTrailer()"
 92 |       >
 93 |         <div i-ph-play-circle-light />
 94 |       </button>
 95 |     </div>
 96 |   </div>
 97 | </template>
 98 | 
 99 | <style>
100 | .hero-enter-active,
101 | .hero-leave-active {
102 |   transition: transform .75s cubic-bezier(.4, .25, .3, 1), opacity .3s cubic-bezier(.4, .25, .3, 1);
103 | }
104 | 
105 | .hero-enter-from,
106 | .hero-leave-to {
107 |   opacity: 0;
108 |   transform: translate3d(0, 2rem, 0);
109 | }
110 | 
111 | .hero-enter-to,
112 | .hero-leave-from {
113 |   opacity: 1;
114 |   transform: translateZ(0);
115 | }
116 | </style>
117 | 


--------------------------------------------------------------------------------
/components/person/CreditsList.nuxt.test.ts:
--------------------------------------------------------------------------------
  1 | import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
  2 | import { mountSuspended } from '@nuxt/test-utils/runtime'
  3 | import { describe, expect, it } from 'vitest'
  4 | 
  5 | import { mockMedia } from '~/tests/unit/mocks'
  6 | import CreditsList from './CreditsList.vue'
  7 | 
  8 | describe('creditsList', () => {
  9 |   // Helper functions to get elements by data-testid
 10 |   const getTitle = (wrapper: VueWrapper) => wrapper.find('[data-testid="credits-title"]')
 11 |   const getCreditItems = (wrapper: VueWrapper) => wrapper.findAll('[data-testid="credit-item"]')
 12 |   const getCreditDate = (item: DOMWrapper<Element>) => item.find('[data-testid="credit-date"]')
 13 |   const getCreditTitle = (item: DOMWrapper<Element>) => item.find('[data-testid="credit-title"]')
 14 |   const getCreditCharacter = (item: DOMWrapper<Element>) => item.find('[data-testid="credit-character"]')
 15 | 
 16 |   it('renders the title', async () => {
 17 |     const wrapper = await mountSuspended(CreditsList, {
 18 |       props: {
 19 |         items: [],
 20 |         title: 'Test Title',
 21 |       },
 22 |     })
 23 | 
 24 |     expect(getTitle(wrapper).text()).toBe('Test Title')
 25 |   })
 26 | 
 27 |   it('renders credit items correctly', async () => {
 28 |     const items = [
 29 |       mockMedia({ id: '1', title: 'Movie 1', release_date: '2023-01-01', media_type: 'movie' }),
 30 |       mockMedia({ id: '2', name: 'TV Show 1', first_air_date: '2022-01-01', media_type: 'tv' }),
 31 |     ]
 32 | 
 33 |     const wrapper = await mountSuspended(CreditsList, {
 34 |       props: {
 35 |         items,
 36 |         title: 'Credits',
 37 |       },
 38 |     })
 39 | 
 40 |     const creditItems = getCreditItems(wrapper)
 41 | 
 42 |     expect(creditItems.length).toBe(2)
 43 | 
 44 |     expect(getCreditDate(creditItems[0]).text()).toBe('2023')
 45 |     expect(getCreditTitle(creditItems[0]).text()).toBe('Movie 1')
 46 |     expect(getCreditCharacter(creditItems[0]).text()).toBe('')
 47 | 
 48 |     expect(getCreditDate(creditItems[1]).text()).toBe('2022')
 49 |     expect(getCreditTitle(creditItems[1]).text()).toBe('TV Show 1')
 50 |     expect(getCreditCharacter(creditItems[1]).text()).toBe('')
 51 |   })
 52 | 
 53 |   it('sorts items by release date', async () => {
 54 |     const items = [
 55 |       mockMedia({ id: '1', title: 'Movie 1', release_date: '2023-01-01', media_type: 'movie' }),
 56 |       mockMedia({ id: '2', title: 'Movie 2', release_date: '2024-01-01', media_type: 'movie' }),
 57 |       mockMedia({ id: '3', title: 'Movie 3', release_date: undefined, first_air_date: '2022-03-01', media_type: 'movie' }),
 58 |       mockMedia({ id: '4', title: 'Movie 4', release_date: undefined, first_air_date: '2022-08-01', media_type: 'movie' }),
 59 |     ]
 60 | 
 61 |     const wrapper = await mountSuspended(CreditsList, {
 62 |       props: {
 63 |         items,
 64 |         title: 'Credits',
 65 |       },
 66 |     })
 67 | 
 68 |     const creditItems = getCreditItems(wrapper)
 69 | 
 70 |     expect(getCreditTitle(creditItems[0]).text()).toBe('Movie 2')
 71 |     expect(getCreditTitle(creditItems[1]).text()).toBe('Movie 1')
 72 |     expect(getCreditTitle(creditItems[2]).text()).toBe('Movie 4')
 73 |     expect(getCreditTitle(creditItems[3]).text()).toBe('Movie 3')
 74 |   })
 75 | 
 76 |   it('renders credit items with name instead of title', async () => {
 77 |     const items = [
 78 |       mockMedia({ id: '1', name: 'TV Show 1', first_air_date: '2022-01-01', media_type: 'tv' }),
 79 |     ]
 80 | 
 81 |     const wrapper = await mountSuspended(CreditsList, {
 82 |       props: {
 83 |         items,
 84 |         title: 'Credits',
 85 |       },
 86 |     })
 87 | 
 88 |     const creditItems = getCreditItems(wrapper)
 89 | 
 90 |     expect(creditItems.length).toBe(1)
 91 | 
 92 |     expect(getCreditDate(creditItems[0]).text()).toBe('2022')
 93 |     expect(getCreditTitle(creditItems[0]).text()).toBe('TV Show 1')
 94 |     expect(getCreditCharacter(creditItems[0]).text()).toBe('')
 95 |   })
 96 | 
 97 |   it('renders credit items with character', async () => {
 98 |     const items = [
 99 |       mockMedia({ id: '1', title: 'Movie 1', release_date: '2023-01-01', media_type: 'movie', character: 'Hero' }),
100 |     ]
101 | 
102 |     const wrapper = await mountSuspended(CreditsList, {
103 |       props: {
104 |         items,
105 |         title: 'Credits',
106 |       },
107 |     })
108 | 
109 |     const creditItems = getCreditItems(wrapper)
110 | 
111 |     expect(creditItems.length).toBe(1)
112 | 
113 |     expect(getCreditDate(creditItems[0]).text()).toBe('2023')
114 |     expect(getCreditTitle(creditItems[0]).text()).toBe('Movie 1')
115 |     expect(getCreditCharacter(creditItems[0]).text()).toBe('as Hero')
116 |   })
117 | })
118 | 


--------------------------------------------------------------------------------
/components/media/Info.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import type { Media, MediaType } from '~/types'
  3 | import { formatDate, formatLang, formatTime, numberWithCommas } from '~/composables/utils'
  4 | 
  5 | const props = withDefaults(defineProps<{
  6 |   item: Media
  7 |   type: MediaType
  8 | }>(), {
  9 |   item: () => ({} as Media),
 10 |   type: 'movie',
 11 | })
 12 | 
 13 | const externalIds = computed(() => ({ ...props.item.external_ids, homepage: props.item.homepage }))
 14 | const directors = computed(() => props.item.credits?.crew.filter(person => person.job === 'Director'))
 15 | </script>
 16 | 
 17 | <template>
 18 |   <div p4 grid="~ cols-[max-content_1fr]" gap-8 items-center ma max-w-300>
 19 |     <NuxtImg
 20 |       width="400"
 21 |       height="600"
 22 |       format="webp"
 23 |       :src="`/tmdb${props.item.poster_path}`"
 24 |       :alt="props.item.title || props.item.name"
 25 |       block border="4 gray4/10" w-79 lt-md:hidden
 26 |       transition duration-400 object-cover aspect="10/16"
 27 |       :style="{ 'view-transition-name': `item-${props.item.id}` }"
 28 |     />
 29 |     <div lt-md:w="[calc(100vw-2rem)]" flex="~ col" md:p4 gap6>
 30 |       <div v-if="props.item.overview">
 31 |         <h2 text-3xl mb4>
 32 |           {{ $t('Storyline') }}
 33 |         </h2>
 34 |         <div op80 v-text="props.item.overview" />
 35 |       </div>
 36 | 
 37 |       <div text-sm op80>
 38 |         <ul grid="~ cols-[max-content_1fr] lg:cols-[max-content_1fr_max-content_1fr] gap3" items-center>
 39 |           <template v-if="props.item.release_date">
 40 |             <div>
 41 |               {{ $t('Release Date') }}
 42 |             </div>
 43 |             <div>
 44 |               {{ formatDate(props.item.release_date) }}
 45 |             </div>
 46 |           </template>
 47 |           <template v-if="props.item.runtime">
 48 |             <div>
 49 |               {{ $t('Runtime') }}
 50 |             </div>
 51 | 
 52 |             <div>
 53 |               {{ formatTime(props.item.runtime) }}
 54 |             </div>
 55 |           </template>
 56 |           <template v-if="directors?.length">
 57 |             <div>
 58 |               {{ $t('Director') }}
 59 |             </div>
 60 | 
 61 |             <div flex="~ row wrap gap1">
 62 |               <NuxtLink
 63 |                 v-for="person of directors"
 64 |                 :key="person.id"
 65 |                 :to="`/person/${person.id}`"
 66 |                 bg="gray/10 hover:gray/20" p="x2 y1"
 67 |                 rounded text-xs
 68 |               >
 69 |                 {{ person.name }}
 70 |               </NuxtLink>
 71 |             </div>
 72 |           </template>
 73 |           <template v-if="props.item.budget">
 74 |             <div>
 75 |               {{ $t('Budget') }}
 76 |             </div>
 77 | 
 78 |             <div>
 79 |               ${{ numberWithCommas(props.item.budget) }}
 80 |             </div>
 81 |           </template>
 82 |           <template v-if="props.item.revenue">
 83 |             <div>
 84 |               {{ $t('Revenue') }}
 85 |             </div>
 86 | 
 87 |             <div>
 88 |               ${{ numberWithCommas(props.item.revenue) }}
 89 |             </div>
 90 |           </template>
 91 |           <template v-if="props.item?.genres?.length">
 92 |             <div>
 93 |               {{ $t('Genre') }}
 94 |             </div>
 95 | 
 96 |             <div flex="~ row wrap gap1">
 97 |               <NuxtLink
 98 |                 v-for="genre of props.item.genres" :key="genre.id"
 99 |                 :to="`/genre/${genre.id}/${type}`"
100 |                 bg="gray/10 hover:gray/20" p="x2 y1"
101 |                 rounded text-xs
102 |               >
103 |                 {{ genre.name }}
104 |               </NuxtLink>
105 |             </div>
106 |           </template>
107 |           <template v-if="props.item.status">
108 |             <div>
109 |               {{ $t('Status') }}
110 |             </div>
111 | 
112 |             <div>
113 |               {{ props.item.status }}
114 |             </div>
115 |           </template>
116 |           <template v-if="props.item.original_language">
117 |             <div>
118 |               {{ $t('Language') }}
119 |             </div>
120 | 
121 |             <div>
122 |               {{ formatLang(props.item.original_language) }}
123 |             </div>
124 |           </template>
125 |           <template v-if="props.item?.production_companies?.length">
126 |             <div>
127 |               {{ $t('Production') }}
128 |             </div>
129 | 
130 |             <div>
131 |               {{ props.item.production_companies.map(i => i.name).join(', ') }}
132 |             </div>
133 |           </template>
134 |         </ul>
135 |       </div>
136 | 
137 |       <div>
138 |         <ExternalLinks :links="externalIds" />
139 |       </div>
140 |     </div>
141 |   </div>
142 | </template>
143 | 


--------------------------------------------------------------------------------
/composables/tmdb.ts:
--------------------------------------------------------------------------------
  1 | import type { Credits, Media, MediaType, PageResult, Person } from '~/types'
  2 | import { LRUCache } from 'lru-cache'
  3 | import { hash as ohash } from 'ohash'
  4 | 
  5 | // const apiBaseUrl = 'http://localhost:3001'
  6 | const apiBaseUrl = 'https://movies-proxy.vercel.app'
  7 | 
  8 | const promiseCache = new LRUCache<string, any>({
  9 |   max: 500,
 10 |   ttl: 2000 * 60 * 60, // 2 hour
 11 | })
 12 | 
 13 | async function _fetchTMDB(url: string, params: Record<string, string | number | boolean | undefined> = {}) {
 14 |   if (params.language == null) {
 15 |     const locale = useNuxtApp().$i18n.locale
 16 |     params.language = unref(locale)
 17 |   }
 18 |   return await $fetch(url, {
 19 |     baseURL: `${apiBaseUrl}/tmdb`,
 20 |     params,
 21 |   })
 22 | }
 23 | 
 24 | export function fetchTMDB(url: string, params: Record<string, string | number | boolean | undefined> = {}): Promise<any> {
 25 |   const hash = ohash([url, params])
 26 |   const state = useState<any>(hash, () => null)
 27 |   if (state.value)
 28 |     return state.value
 29 |   if (!promiseCache.has(hash)) {
 30 |     promiseCache.set(
 31 |       hash,
 32 |       _fetchTMDB(url, params)
 33 |         .then((res) => {
 34 |           state.value = res
 35 |           return res
 36 |         })
 37 |         .catch((e) => {
 38 |           promiseCache.delete(hash)
 39 |           throw e
 40 |         }),
 41 |     )
 42 |   }
 43 |   return promiseCache.get(hash)!
 44 | }
 45 | 
 46 | const blocked = new Set([
 47 |   '66046',
 48 |   '65143',
 49 |   '120057',
 50 |   '137215',
 51 |   '127008',
 52 |   '135272',
 53 |   '152511',
 54 |   '154887',
 55 |   '1123136',
 56 |   '209609',
 57 |   '153496',
 58 |   '214997',
 59 |   '203552',
 60 |   '735902',
 61 |   '561996',
 62 |   '198004',
 63 |   '206239',
 64 |   '210107',
 65 |   '234282',
 66 |   '203164',
 67 |   '219651',
 68 |   '599333',
 69 |   '919207',
 70 |   '606906',
 71 |   '231268',
 72 |   // next tranche
 73 |   '119773',
 74 |   '223890',
 75 |   '229955',
 76 | ])
 77 | 
 78 | export async function listMedia(type: MediaType, query: string, page: number): Promise<PageResult<Media>> {
 79 |   const r = await fetchTMDB(`${type}/${query}`, { page }) as PageResult<Media>
 80 |   r.results = r.results.filter((m: Media) => !blocked.has(m.id.toString()))
 81 |   return r
 82 | }
 83 | 
 84 | export async function getMedia(type: MediaType, id: string): Promise<Media> {
 85 |   if (blocked.has(id.toString())) {
 86 |     throw createError({
 87 |       statusCode: 404,
 88 |       message: 'This media is under copyright restriction and cannot be viewed.',
 89 |     })
 90 |   }
 91 |   return fetchTMDB(`${type}/${id}`, {
 92 |     append_to_response: 'videos,credits,images,external_ids,release_dates,combined_credits',
 93 |     include_image_language: 'en',
 94 |   })
 95 | }
 96 | 
 97 | /**
 98 |  * Get recommended
 99 |  */
100 | export async function getRecommendations(type: MediaType, id: string, page = 1): Promise<PageResult<Media>> {
101 |   const r = await fetchTMDB(`${type}/${id}/recommendations`, { page }) as PageResult<Media>
102 |   r.results = r.results.filter((m: Media) => !blocked.has(m.id.toString()))
103 |   return r
104 | }
105 | 
106 | /**
107 |  * Get TV show episodes from season (single)
108 |  */
109 | export function getTvShowEpisodes(id: string, season: string) {
110 |   return fetchTMDB(`tv/${id}/season/${season}`)
111 | }
112 | 
113 | /**
114 |  * Get trending
115 |  */
116 | export function getTrending(media: string, page = 1) {
117 |   return fetchTMDB(`trending/${media}/week`, { page })
118 | }
119 | 
120 | /**
121 |  * Discover media by genre
122 |  */
123 | export async function getMediaByGenre(media: string, genre: string, page = 1): Promise<PageResult<Media>> {
124 |   const r = await fetchTMDB(`discover/${media}`, {
125 |     with_genres: genre,
126 |     page,
127 |   }) as PageResult<Media>
128 |   r.results = r.results.filter(m => !blocked.has(m.id.toString()))
129 |   return r
130 | }
131 | 
132 | /**
133 |  * Get credits
134 |  */
135 | export function getCredits(id: string | number, type: string): Promise<Credits> {
136 |   return fetchTMDB(`person/${id}/${type}`)
137 | }
138 | 
139 | /**
140 |  * Get genre list
141 |  */
142 | export function getGenreList(media: string): Promise<{ name: string, id: number }[]> {
143 |   return fetchTMDB(`genre/${media}/list`).then(res => res.genres)
144 | }
145 | 
146 | /**
147 |  * Get person (single)
148 |  */
149 | 
150 | export function getPerson(id: string): Promise<Person> {
151 |   return fetchTMDB(`person/${id}`, {
152 |     append_to_response: 'images,combined_credits,external_ids',
153 |     include_image_language: 'en',
154 |   })
155 | }
156 | 
157 | /**
158 |  * Search (searches movies, tv and people)
159 |  */
160 | 
161 | export async function searchShows(query: string, page = 1) {
162 |   const r = await fetchTMDB('search/multi', { query, page, include_adult: false })
163 |   r.results = r.results.filter((m: Media) => !blocked.has(m.id.toString()))
164 |   return r
165 | }
166 | 


--------------------------------------------------------------------------------
/components/photo/Modal.nuxt.test.ts:
--------------------------------------------------------------------------------
  1 | import type { VueWrapper } from '@vue/test-utils'
  2 | import type { Image } from '~/types'
  3 | import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
  4 | import { describe, expect, it, vi } from 'vitest'
  5 | 
  6 | import { nextTick } from 'vue'
  7 | import { baseUrl } from '~/tests/unit/config'
  8 | import { mockImage } from '~/tests/unit/mocks'
  9 | import PhotoModal from './Modal.vue'
 10 | 
 11 | // Define mocks using vi.hoisted
 12 | const { provideImageModal, useImageModal } = vi.hoisted(() => {
 13 |   function useSingleton<T>() {
 14 |     let value: T
 15 |     return [
 16 |       function provide(v: T) {
 17 |         value = v
 18 |       },
 19 |       function use(fallback?: T) {
 20 |         return (value ?? fallback) as T
 21 |       },
 22 |     ] as const
 23 |   }
 24 |   const [provideImageModal, useImageModal] = useSingleton<(photos: Image[], index: number) => void>()
 25 |   return {
 26 |     provideImageModal,
 27 |     useImageModal,
 28 |   }
 29 | })
 30 | 
 31 | // Mock the provideImageModal import
 32 | mockNuxtImport('provideImageModal', () => provideImageModal)
 33 | 
 34 | describe('photoModal', () => {
 35 |   // Helper functions to get elements by data-testid
 36 |   const findModal = (wrapper: VueWrapper) => wrapper.find('[data-testid="photo-modal"]')
 37 |   const findCloseButton = (wrapper: VueWrapper) => wrapper.find('[data-testid="close-button"]')
 38 |   const findImage = (wrapper: VueWrapper) => wrapper.find('[data-testid="photo-image"]')
 39 |   const findPrevButton = (wrapper: VueWrapper) => wrapper.find('[data-testid="prev-button"]')
 40 |   const findNextButton = (wrapper: VueWrapper) => wrapper.find('[data-testid="next-button"]')
 41 |   const findCounter = (wrapper: VueWrapper) => wrapper.find('[data-testid="photo-counter"]')
 42 | 
 43 |   const images = [
 44 |     mockImage({ file_path: '/path/to/image1.jpg' }),
 45 |     mockImage({ file_path: '/path/to/image2.jpg' }),
 46 |     mockImage({ file_path: '/path/to/image3.jpg' }),
 47 |   ]
 48 | 
 49 |   it('renders correctly with image', async () => {
 50 |     const wrapper = await mountSuspended(PhotoModal)
 51 | 
 52 |     const show = useImageModal()
 53 |     show(images, 0)
 54 | 
 55 |     await nextTick()
 56 | 
 57 |     expect(findModal(wrapper).exists()).toBe(true)
 58 |     expect(findImage(wrapper).exists()).toBe(true)
 59 |     expect(findImage(wrapper).attributes('src')).toContain('/tmdb/path/to/image1.jpg')
 60 |     expect(findCounter(wrapper).text()).toBe('1 / 3')
 61 |   })
 62 | 
 63 |   it('navigates to the next image', async () => {
 64 |     const wrapper = await mountSuspended(PhotoModal)
 65 | 
 66 |     const show = useImageModal()
 67 |     show(images, 0)
 68 | 
 69 |     await nextTick()
 70 | 
 71 |     await findNextButton(wrapper).trigger('click')
 72 |     await nextTick()
 73 | 
 74 |     expect(findImage(wrapper).attributes('src')).toContain('/tmdb/path/to/image2.jpg')
 75 |     expect(findCounter(wrapper).text()).toBe('2 / 3')
 76 |   })
 77 | 
 78 |   it('navigates to the previous image', async () => {
 79 |     const wrapper = await mountSuspended(PhotoModal)
 80 | 
 81 |     const show = useImageModal()
 82 |     show(images, 2)
 83 | 
 84 |     await nextTick()
 85 | 
 86 |     await findPrevButton(wrapper).trigger('click')
 87 |     await nextTick()
 88 | 
 89 |     expect(findImage(wrapper).attributes('src')).toContain('/tmdb/path/to/image2.jpg')
 90 |     expect(findCounter(wrapper).text()).toBe('2 / 3')
 91 |   })
 92 | 
 93 |   it('closes the modal', async () => {
 94 |     const wrapper = await mountSuspended(PhotoModal)
 95 | 
 96 |     const show = useImageModal()
 97 |     show(images, 0)
 98 | 
 99 |     await nextTick()
100 | 
101 |     await findCloseButton(wrapper).trigger('click')
102 |     await nextTick()
103 | 
104 |     expect(findModal(wrapper).exists()).toBe(false)
105 |   })
106 | 
107 |   // TODO: understand why this test is failing
108 |   it.skip('handles keyboard events', async () => {
109 |     const wrapper = await mountSuspended(PhotoModal)
110 | 
111 |     const show = useImageModal()
112 |     show(images, 0)
113 | 
114 |     await nextTick()
115 | 
116 |     await wrapper.trigger('keydown', { key: 'ArrowRight' })
117 |     await nextTick()
118 |     expect(findImage(wrapper).attributes('src')).toContain(`${baseUrl}/ipx/f_webp/tmdb/path/to/image2.jpg`)
119 |     expect(findCounter(wrapper).text()).toBe('2 / 3')
120 | 
121 |     await wrapper.trigger('keydown', { key: 'ArrowRight' })
122 |     await nextTick()
123 |     expect(findImage(wrapper).attributes('src')).toContain(`${baseUrl}/ipx/f_webp/tmdb/path/to/image3.jpg`)
124 |     expect(findCounter(wrapper).text()).toBe('3 / 3')
125 | 
126 |     await wrapper.trigger('keydown', { key: 'ArrowLeft' })
127 |     await nextTick()
128 |     expect(findImage(wrapper).attributes('src')).toContain(`${baseUrl}/ipx/f_webp/tmdb/path/to/image2.jpg`)
129 |     expect(findCounter(wrapper).text()).toBe('2 / 3')
130 | 
131 |     await wrapper.trigger('keydown', { key: 'Escape' })
132 |     await nextTick()
133 |     expect(findModal(wrapper).exists()).toBe(false)
134 |   })
135 | })
136 | 


--------------------------------------------------------------------------------
/components/icon/IconVercel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="h-8"
 4 |     viewBox="0 0 212 44"
 5 |     fill="none"
 6 |     xmlns="http://www.w3.org/2000/svg"
 7 |   >
 8 |     <rect width="212" height="44" rx="8" fill="black" />
 9 |     <path
10 |       d="M60.4375 15.2266V26.5H61.8438V22.4766H64.6797C66.7969 22.4766 68.3047 20.9844 68.3047 18.875C68.3047 16.7266 66.8281 15.2266 64.6953 15.2266H60.4375ZM61.8438 16.4766H64.3281C65.9609 16.4766 66.8594 17.3281 66.8594 18.875C66.8594 20.3672 65.9297 21.2266 64.3281 21.2266H61.8438V16.4766ZM73.3441 26.6484C75.7425 26.6484 77.2269 24.9922 77.2269 22.2891C77.2269 19.5781 75.7425 17.9297 73.3441 17.9297C70.9456 17.9297 69.4613 19.5781 69.4613 22.2891C69.4613 24.9922 70.9456 26.6484 73.3441 26.6484ZM73.3441 25.4375C71.7503 25.4375 70.8519 24.2812 70.8519 22.2891C70.8519 20.2891 71.7503 19.1406 73.3441 19.1406C74.9378 19.1406 75.8363 20.2891 75.8363 22.2891C75.8363 24.2812 74.9378 25.4375 73.3441 25.4375ZM89.2975 18.0781H87.9459L86.2897 24.8125H86.1647L84.2819 18.0781H82.9928L81.11 24.8125H80.985L79.3288 18.0781H77.9694L80.3288 26.5H81.6881L83.5631 19.9844H83.6881L85.5709 26.5H86.9381L89.2975 18.0781ZM93.8213 19.1172C95.1572 19.1172 96.0478 20.1016 96.0791 21.5938H91.4384C91.54 20.1016 92.4775 19.1172 93.8213 19.1172ZM96.04 24.3203C95.6884 25.0625 94.9541 25.4609 93.8681 25.4609C92.4384 25.4609 91.5088 24.4062 91.4384 22.7422V22.6797H97.4931V22.1641C97.4931 19.5469 96.1103 17.9297 93.8369 17.9297C91.5244 17.9297 90.04 19.6484 90.04 22.2969C90.04 24.9609 91.5009 26.6484 93.8369 26.6484C95.6806 26.6484 96.9931 25.7578 97.3838 24.3203H96.04ZM99.2825 26.5H100.626V21.2812C100.626 20.0938 101.556 19.2344 102.837 19.2344C103.103 19.2344 103.587 19.2812 103.697 19.3125V17.9688C103.525 17.9453 103.243 17.9297 103.025 17.9297C101.908 17.9297 100.939 18.5078 100.689 19.3281H100.564V18.0781H99.2825V26.5ZM108.181 19.1172C109.517 19.1172 110.408 20.1016 110.439 21.5938H105.798C105.9 20.1016 106.838 19.1172 108.181 19.1172ZM110.4 24.3203C110.048 25.0625 109.314 25.4609 108.228 25.4609C106.798 25.4609 105.869 24.4062 105.798 22.7422V22.6797H111.853V22.1641C111.853 19.5469 110.47 17.9297 108.197 17.9297C105.884 17.9297 104.4 19.6484 104.4 22.2969C104.4 24.9609 105.861 26.6484 108.197 26.6484C110.041 26.6484 111.353 25.7578 111.744 24.3203H110.4ZM116.76 26.6484C117.924 26.6484 118.924 26.0938 119.455 25.1562H119.58V26.5H120.861V14.7344H119.518V19.4062H119.4C118.924 18.4844 117.932 17.9297 116.76 17.9297C114.619 17.9297 113.221 19.6484 113.221 22.2891C113.221 24.9375 114.603 26.6484 116.76 26.6484ZM117.072 19.1406C118.596 19.1406 119.549 20.3594 119.549 22.2891C119.549 24.2344 118.603 25.4375 117.072 25.4375C115.533 25.4375 114.611 24.2578 114.611 22.2891C114.611 20.3281 115.541 19.1406 117.072 19.1406ZM131.534 26.6484C133.667 26.6484 135.065 24.9219 135.065 22.2891C135.065 19.6406 133.674 17.9297 131.534 17.9297C130.378 17.9297 129.354 18.5 128.893 19.4062H128.768V14.7344H127.424V26.5H128.706V25.1562H128.831C129.362 26.0938 130.362 26.6484 131.534 26.6484ZM131.221 19.1406C132.76 19.1406 133.674 20.3203 133.674 22.2891C133.674 24.2578 132.76 25.4375 131.221 25.4375C129.69 25.4375 128.737 24.2344 128.737 22.2891C128.737 20.3438 129.69 19.1406 131.221 19.1406ZM137.261 29.5469C138.753 29.5469 139.425 28.9688 140.143 27.0156L143.433 18.0781H142.003L139.698 25.0078H139.573L137.261 18.0781H135.808L138.925 26.5078L138.768 27.0078C138.417 28.0234 137.995 28.3906 137.222 28.3906C137.034 28.3906 136.823 28.3828 136.659 28.3516V29.5C136.847 29.5312 137.081 29.5469 137.261 29.5469ZM154.652 26.5L158.55 15.2266H156.402L153.589 24.1484H153.457L150.621 15.2266H148.394L152.332 26.5H154.652ZM162.668 19.3203C163.832 19.3203 164.598 20.1328 164.637 21.3984H160.613C160.699 20.1484 161.512 19.3203 162.668 19.3203ZM164.652 24.1484C164.371 24.7812 163.707 25.1328 162.746 25.1328C161.473 25.1328 160.652 24.2422 160.605 22.8203V22.7188H166.574V22.0938C166.574 19.3984 165.113 17.7812 162.676 17.7812C160.199 17.7812 158.66 19.5078 158.66 22.2578C158.66 25.0078 160.176 26.6719 162.691 26.6719C164.707 26.6719 166.137 25.7031 166.488 24.1484H164.652ZM168.199 26.5H170.137V21.5625C170.137 20.3672 171.012 19.5859 172.27 19.5859C172.598 19.5859 173.113 19.6406 173.262 19.6953V17.8984C173.082 17.8438 172.738 17.8125 172.457 17.8125C171.356 17.8125 170.434 18.4375 170.199 19.2812H170.067V17.9531H168.199V26.5ZM181.7 20.8281C181.497 19.0312 180.168 17.7812 177.973 17.7812C175.403 17.7812 173.895 19.4297 173.895 22.2031C173.895 25.0156 175.411 26.6719 177.981 26.6719C180.145 26.6719 181.489 25.4688 181.7 23.6797H179.856C179.653 24.5703 178.981 25.0469 177.973 25.0469C176.653 25.0469 175.856 24 175.856 22.2031C175.856 20.4297 176.645 19.4062 177.973 19.4062C179.036 19.4062 179.676 20 179.856 20.8281H181.7ZM186.817 19.3203C187.981 19.3203 188.747 20.1328 188.786 21.3984H184.762C184.848 20.1484 185.661 19.3203 186.817 19.3203ZM188.802 24.1484C188.52 24.7812 187.856 25.1328 186.895 25.1328C185.622 25.1328 184.802 24.2422 184.755 22.8203V22.7188H190.723V22.0938C190.723 19.3984 189.262 17.7812 186.825 17.7812C184.348 17.7812 182.809 19.5078 182.809 22.2578C182.809 25.0078 184.325 26.6719 186.841 26.6719C188.856 26.6719 190.286 25.7031 190.637 24.1484H188.802ZM192.427 26.5H194.364V14.6484H192.427V26.5Z"
11 |       fill="white"
12 |     />
13 |     <path d="M23.3248 13L32.6497 29H14L23.3248 13Z" fill="white" />
14 |     <line x1="43.5" y1="2.18557e-08" x2="43.5" y2="44" stroke="#5E5E5E" />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/composables/item.nuxt.test.ts:
--------------------------------------------------------------------------------
  1 | import type { Video } from '~/types'
  2 | import { beforeEach, describe, expect, it, vi } from 'vitest'
  3 | 
  4 | import { createApp, defineComponent, h } from 'vue'
  5 | import { mockMedia } from '~/tests/unit/mocks'
  6 | import { getTrailer, getVideoLink, provideIframeModal, provideImageModal, useIframeModal, useImageModal } from './item'
  7 | import { useSingleton } from './utils'
  8 | 
  9 | describe('getTrailer', () => {
 10 |   it('should return the trailer video link if a trailer is found', () => {
 11 |     const media = mockMedia({
 12 |       videos: {
 13 |         results: [
 14 |           { type: 'Teaser', key: 'teaserKey', iso_639_1: 'en', iso_3166_1: 'US', name: 'Teaser', site: 'YouTube', size: 1080, official: true, published_at: '2023-01-01T00:00:00Z', id: 'teaserId' } as Video,
 15 |           { type: 'Trailer', key: 'trailerKey', iso_639_1: 'en', iso_3166_1: 'US', name: 'Trailer', site: 'YouTube', size: 1080, official: true, published_at: '2023-01-01T00:00:00Z', id: 'trailerId' } as Video,
 16 |         ],
 17 |       },
 18 |     })
 19 |     const trailerLink = getTrailer(media)
 20 |     expect(trailerLink).toBe('https://www.youtube.com/embed/trailerKey?rel=0&showinfo=0&autoplay=0')
 21 |   })
 22 | 
 23 |   it('should return null if no trailer is found', () => {
 24 |     const media = mockMedia({
 25 |       videos: {
 26 |         results: [
 27 |           { type: 'Teaser', key: 'teaserKey', iso_639_1: 'en', iso_3166_1: 'US', name: 'Teaser', site: 'YouTube', size: 1080, official: true, published_at: '2023-01-01T00:00:00Z', id: 'teaserId' } as Video,
 28 |         ],
 29 |       },
 30 |     })
 31 |     const trailerLink = getTrailer(media)
 32 |     expect(trailerLink).toBeNull()
 33 |   })
 34 | 
 35 |   it('should return null if there are no videos', () => {
 36 |     const media = mockMedia({
 37 |       videos: {
 38 |         results: [],
 39 |       },
 40 |     })
 41 |     const trailerLink = getTrailer(media)
 42 |     expect(trailerLink).toBeNull()
 43 |   })
 44 | })
 45 | 
 46 | describe('getVideoLink', () => {
 47 |   it('should return the correct YouTube embed link if key is provided', () => {
 48 |     const video: Video = { key: 'testKey', iso_639_1: 'en', iso_3166_1: 'US', name: 'Test Video', site: 'YouTube', size: 1080, type: 'Trailer', official: true, published_at: '2023-01-01T00:00:00Z', id: 'testId' }
 49 |     const videoLink = getVideoLink(video)
 50 |     expect(videoLink).toBe('https://www.youtube.com/embed/testKey?rel=0&showinfo=0&autoplay=0')
 51 |   })
 52 | 
 53 |   it('should return null if no key is provided', () => {
 54 |     const video: Video = { key: '', iso_639_1: 'en', iso_3166_1: 'US', name: 'Test Video', site: 'YouTube', size: 1080, type: 'Trailer', official: true, published_at: '2023-01-01T00:00:00Z', id: 'testId' }
 55 |     const videoLink = getVideoLink(video)
 56 |     expect(videoLink).toBeNull()
 57 |   })
 58 | 
 59 |   it('should return null if item is undefined', () => {
 60 |     const videoLink = getVideoLink(undefined)
 61 |     expect(videoLink).toBeNull()
 62 |   })
 63 | })
 64 | 
 65 | describe('useSingleton', () => {
 66 |   let app: ReturnType<typeof createApp>
 67 | 
 68 |   beforeEach(() => {
 69 |     app = createApp({
 70 |       render: () => h('div'),
 71 |     })
 72 |   })
 73 | 
 74 |   it('should provide and use singleton without issues', () => {
 75 |     const [provideFn, useFn] = useSingleton<() => void>()
 76 | 
 77 |     const mockFn = vi.fn()
 78 | 
 79 |     const TestComponent = defineComponent({
 80 |       setup() {
 81 |         provideFn(mockFn)
 82 |         const usedFn = useFn()
 83 |         expect(usedFn).toBe(mockFn)
 84 |         return () => h('div', 'TestComponent')
 85 |       },
 86 |     })
 87 | 
 88 |     app.component('TestComponent', TestComponent)
 89 |     app.mount(document.createElement('div'))
 90 |   })
 91 | 
 92 |   it('should throw an error if use is called before provide', () => {
 93 |     const [, useFn] = useSingleton<() => void>()
 94 | 
 95 |     const TestComponent = defineComponent({
 96 |       setup() {
 97 |         expect(() => useFn()).toThrow('Singleton not provided')
 98 |         return () => h('div', 'TestComponent')
 99 |       },
100 |     })
101 | 
102 |     app.component('TestComponent', TestComponent)
103 |     app.mount(document.createElement('div'))
104 |   })
105 | })
106 | 
107 | describe('provideIframeModal and useIframeModal', () => {
108 |   let app: ReturnType<typeof createApp>
109 | 
110 |   beforeEach(() => {
111 |     app = createApp({
112 |       render: () => h('div'),
113 |     })
114 |   })
115 | 
116 |   it('should provide and use iframe modal without issues', () => {
117 |     const mockFn = vi.fn()
118 | 
119 |     const TestComponent = defineComponent({
120 |       setup() {
121 |         provideIframeModal(mockFn)
122 |         const usedFn = useIframeModal()
123 |         expect(usedFn).toBe(mockFn)
124 |         return () => h('div', 'TestComponent')
125 |       },
126 |     })
127 | 
128 |     app.component('TestComponent', TestComponent)
129 |     app.mount(document.createElement('div'))
130 |   })
131 | 
132 |   it('should throw an error if useIframeModal is called before provideIframeModal', () => {
133 |     const TestComponent = defineComponent({
134 |       setup() {
135 |         expect(() => useIframeModal()).toThrow('Singleton not provided')
136 |         return () => h('div', 'TestComponent')
137 |       },
138 |     })
139 | 
140 |     app.component('TestComponent', TestComponent)
141 |     app.mount(document.createElement('div'))
142 |   })
143 | })
144 | 
145 | describe('provideImageModal and useImageModal', () => {
146 |   let app: ReturnType<typeof createApp>
147 | 
148 |   beforeEach(() => {
149 |     app = createApp({
150 |       render: () => h('div'),
151 |     })
152 |   })
153 | 
154 |   it('should provide and use image modal without issues', () => {
155 |     const mockFn = vi.fn()
156 | 
157 |     const TestComponent = defineComponent({
158 |       setup() {
159 |         provideImageModal(mockFn)
160 |         const usedFn = useImageModal()
161 |         expect(usedFn).toBe(mockFn)
162 |         return () => h('div', 'TestComponent')
163 |       },
164 |     })
165 | 
166 |     app.component('TestComponent', TestComponent)
167 |     app.mount(document.createElement('div'))
168 |   })
169 | 
170 |   it('should throw an error if useImageModal is called before provideImageModal', () => {
171 |     const TestComponent = defineComponent({
172 |       setup() {
173 |         expect(() => useImageModal()).toThrow('Singleton not provided')
174 |         return () => h('div', 'TestComponent')
175 |       },
176 |     })
177 | 
178 |     app.component('TestComponent', TestComponent)
179 |     app.mount(document.createElement('div'))
180 |   })
181 | })
182 | 


--------------------------------------------------------------------------------
/components/icon/IconNuxt.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg class="h-8" viewBox="0 0 204 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 3 |     <path d="M196.302 0H7.69811C3.44656 0 0 3.58172 0 8V36C0 40.4183 3.44656 44 7.69811 44H196.302C200.553 44 204 40.4183 204 36V8C204 3.58172 200.553 0 196.302 0Z" fill="#003C3C" />
 4 |     <path d="M55.184 28V16.8H56.752L60.784 24.608L64.784 16.8H66.368V28H65.024V19.2L61.28 26.4H60.272L56.528 19.216V28H55.184ZM71.2909 28.192C70.6295 28.192 70.0802 28.08 69.6429 27.856C69.2055 27.632 68.8802 27.3333 68.6669 26.96C68.4535 26.5867 68.3469 26.1813 68.3469 25.744C68.3469 24.9333 68.6562 24.3093 69.2749 23.872C69.8935 23.4347 70.7362 23.216 71.8029 23.216H73.9469V23.12C73.9469 22.4267 73.7655 21.904 73.4029 21.552C73.0402 21.1893 72.5549 21.008 71.9469 21.008C71.4242 21.008 70.9709 21.1413 70.5869 21.408C70.2135 21.664 69.9789 22.0427 69.8829 22.544H68.5069C68.5602 21.968 68.7522 21.4827 69.0829 21.088C69.4242 20.6933 69.8455 20.3947 70.3469 20.192C70.8482 19.9787 71.3815 19.872 71.9469 19.872C73.0562 19.872 73.8882 20.1707 74.4429 20.768C75.0082 21.3547 75.2909 22.1387 75.2909 23.12V28H74.0909L74.0109 26.576C73.7869 27.024 73.4562 27.408 73.0189 27.728C72.5922 28.0373 72.0162 28.192 71.2909 28.192ZM71.4989 27.056C72.0109 27.056 72.4482 26.9227 72.8109 26.656C73.1842 26.3893 73.4669 26.0427 73.6589 25.616C73.8509 25.1893 73.9469 24.7413 73.9469 24.272V24.256H71.9149C71.1255 24.256 70.5655 24.3947 70.2349 24.672C69.9149 24.9387 69.7549 25.2747 69.7549 25.68C69.7549 26.096 69.9042 26.432 70.2029 26.688C70.5122 26.9333 70.9442 27.056 71.4989 27.056ZM80.9071 28.192C80.1178 28.192 79.4245 28.0107 78.8271 27.648C78.2405 27.2853 77.7818 26.7893 77.4511 26.16C77.1311 25.5307 76.9711 24.816 76.9711 24.016C76.9711 23.216 77.1365 22.5067 77.4671 21.888C77.7978 21.2587 78.2565 20.768 78.8431 20.416C79.4298 20.0533 80.1231 19.872 80.9231 19.872C81.5738 19.872 82.1498 20.0053 82.6511 20.272C83.1525 20.5387 83.5418 20.912 83.8191 21.392V16.48H85.1631V28H83.9471L83.8191 26.688C83.5631 27.072 83.1951 27.4187 82.7151 27.728C82.2351 28.0373 81.6325 28.192 80.9071 28.192ZM81.0511 27.024C81.5845 27.024 82.0538 26.9013 82.4591 26.656C82.8751 26.4 83.1951 26.048 83.4191 25.6C83.6538 25.152 83.7711 24.6293 83.7711 24.032C83.7711 23.4347 83.6538 22.912 83.4191 22.464C83.1951 22.016 82.8751 21.6693 82.4591 21.424C82.0538 21.168 81.5845 21.04 81.0511 21.04C80.5285 21.04 80.0591 21.168 79.6431 21.424C79.2378 21.6693 78.9178 22.016 78.6831 22.464C78.4591 22.912 78.3471 23.4347 78.3471 24.032C78.3471 24.6293 78.4591 25.152 78.6831 25.6C78.9178 26.048 79.2378 26.4 79.6431 26.656C80.0591 26.9013 80.5285 27.024 81.0511 27.024ZM90.922 28.192C90.1647 28.192 89.4927 28.0213 88.906 27.68C88.3193 27.328 87.8553 26.8427 87.514 26.224C87.1833 25.6053 87.018 24.8747 87.018 24.032C87.018 23.2 87.1833 22.4747 87.514 21.856C87.8447 21.2267 88.3033 20.7413 88.89 20.4C89.4873 20.048 90.1753 19.872 90.954 19.872C91.722 19.872 92.3833 20.048 92.938 20.4C93.5033 20.7413 93.9353 21.1947 94.234 21.76C94.5327 22.3253 94.682 22.9333 94.682 23.584C94.682 23.7013 94.6767 23.8187 94.666 23.936C94.666 24.0533 94.666 24.1867 94.666 24.336H88.346C88.378 24.944 88.5167 25.4507 88.762 25.856C89.018 26.2507 89.3327 26.5493 89.706 26.752C90.09 26.9547 90.4953 27.056 90.922 27.056C91.4767 27.056 91.9407 26.928 92.314 26.672C92.6873 26.416 92.9593 26.0693 93.13 25.632H94.458C94.2447 26.368 93.834 26.9813 93.226 27.472C92.6287 27.952 91.8607 28.192 90.922 28.192ZM90.922 21.008C90.282 21.008 89.7113 21.2053 89.21 21.6C88.7193 21.984 88.4367 22.5493 88.362 23.296H93.354C93.322 22.5813 93.0767 22.0213 92.618 21.616C92.1593 21.2107 91.594 21.008 90.922 21.008ZM102.298 28L99.9778 20.064H101.322L103.002 26.288L104.858 20.064H106.378L108.25 26.288L109.914 20.064H111.274L108.954 28H107.578L105.626 21.456L103.674 28H102.298ZM113.576 18.304C113.31 18.304 113.086 18.2187 112.904 18.048C112.734 17.8667 112.648 17.6427 112.648 17.376C112.648 17.12 112.734 16.9067 112.904 16.736C113.086 16.5653 113.31 16.48 113.576 16.48C113.832 16.48 114.051 16.5653 114.232 16.736C114.414 16.9067 114.504 17.12 114.504 17.376C114.504 17.6427 114.414 17.8667 114.232 18.048C114.051 18.2187 113.832 18.304 113.576 18.304ZM112.904 28V20.064H114.248V28H112.904ZM119.724 28C118.999 28 118.428 27.824 118.012 27.472C117.596 27.12 117.388 26.4853 117.388 25.568V21.2H116.012V20.064H117.388L117.564 18.16H118.732V20.064H121.068V21.2H118.732V25.568C118.732 26.0693 118.834 26.4107 119.036 26.592C119.239 26.7627 119.596 26.848 120.108 26.848H120.94V28H119.724ZM122.776 28V16.48H124.12V21.424C124.387 20.9333 124.765 20.5547 125.256 20.288C125.747 20.0107 126.28 19.872 126.856 19.872C127.773 19.872 128.509 20.16 129.064 20.736C129.619 21.3013 129.896 22.176 129.896 23.36V28H128.568V23.504C128.568 21.8507 127.901 21.024 126.568 21.024C125.875 21.024 125.293 21.2747 124.824 21.776C124.355 22.2667 124.12 22.9707 124.12 23.888V28H122.776ZM135.947 28V16.8H137.995L143.259 24.688V16.8H145.307V28H143.259L137.995 20.128V28H135.947ZM150.407 28.192C149.415 28.192 148.647 27.8827 148.103 27.264C147.569 26.6453 147.303 25.7387 147.303 24.544V20.064H149.335V24.352C149.335 25.0347 149.473 25.5573 149.751 25.92C150.028 26.2827 150.465 26.464 151.063 26.464C151.628 26.464 152.092 26.2613 152.455 25.856C152.828 25.4507 153.015 24.8853 153.015 24.16V20.064H155.063V28H153.255L153.095 26.656C152.849 27.1253 152.492 27.4987 152.023 27.776C151.564 28.0533 151.025 28.192 150.407 28.192ZM156.413 28L159.293 24.032L156.413 20.064H158.605L160.621 22.88L162.621 20.064H164.829L161.933 24.032L164.829 28H162.621L160.621 25.184L158.605 28H156.413ZM169.67 28C168.838 28 168.171 27.7973 167.67 27.392C167.168 26.9867 166.918 26.2667 166.918 25.232V21.776H165.558V20.064H166.918L167.158 17.936H168.966V20.064H171.11V21.776H168.966V25.248C168.966 25.632 169.046 25.8987 169.206 26.048C169.376 26.1867 169.664 26.256 170.07 26.256H171.062V28H169.67ZM175.844 28.192C174.756 28.192 173.881 27.888 173.22 27.28C172.569 26.6613 172.244 25.7867 172.244 24.656H174.292C174.303 25.1787 174.425 25.5947 174.66 25.904C174.895 26.2133 175.273 26.368 175.796 26.368C176.287 26.368 176.644 26.224 176.868 25.936C177.092 25.6373 177.204 25.248 177.204 24.768V16.8H179.252V24.768C179.252 25.8667 178.943 26.7147 178.324 27.312C177.716 27.8987 176.889 28.192 175.844 28.192ZM185.256 28.192C184.434 28.192 183.709 28.0533 183.08 27.776C182.45 27.488 181.954 27.0827 181.592 26.56C181.229 26.0267 181.042 25.3813 181.032 24.624H183.192C183.213 25.1467 183.4 25.5893 183.752 25.952C184.114 26.304 184.61 26.48 185.24 26.48C185.784 26.48 186.216 26.352 186.536 26.096C186.856 25.8293 187.016 25.4773 187.016 25.04C187.016 24.5813 186.872 24.224 186.584 23.968C186.306 23.712 185.933 23.504 185.464 23.344C184.994 23.184 184.493 23.0133 183.96 22.832C183.096 22.5333 182.434 22.1493 181.976 21.68C181.528 21.2107 181.304 20.5867 181.304 19.808C181.293 19.1467 181.448 18.5813 181.768 18.112C182.098 17.632 182.546 17.264 183.112 17.008C183.677 16.7413 184.328 16.608 185.064 16.608C185.81 16.608 186.466 16.7413 187.032 17.008C187.608 17.2747 188.056 17.648 188.376 18.128C188.706 18.608 188.882 19.1787 188.904 19.84H186.712C186.701 19.4453 186.546 19.0987 186.248 18.8C185.96 18.4907 185.554 18.336 185.032 18.336C184.584 18.3253 184.205 18.4373 183.896 18.672C183.597 18.896 183.448 19.2267 183.448 19.664C183.448 20.0373 183.565 20.336 183.8 20.56C184.034 20.7733 184.354 20.9547 184.76 21.104C185.165 21.2533 185.629 21.4133 186.152 21.584C186.706 21.776 187.213 22 187.672 22.256C188.13 22.512 188.498 22.8533 188.776 23.28C189.053 23.696 189.192 24.2347 189.192 24.896C189.192 25.4827 189.042 26.0267 188.744 26.528C188.445 27.0293 188.002 27.4347 187.416 27.744C186.829 28.0427 186.109 28.192 185.256 28.192Z" fill="#E6F0F0" />
 5 |     <path d="M22.891 15.818c-.572-.983-2-.983-2.572 0l-6.23 10.712c-.572.983.142 2.212 1.285 2.212h4.864a1.424 1.424 0 0 1-.3-1.8l4.719-8.088-1.766-3.036Z" fill="#80EEC0" />
 6 |     <path d="M26.839 18.168c.473-.805 1.656-.805 2.129 0l5.156 8.764c.473.805-.119 1.81-1.065 1.81H22.747c-.946 0-1.538-1.005-1.064-1.81l5.156-8.764Z" fill="#00DC82" />
 7 |     <path d="M45 0h-1v44h1V0Z" fill="#2A5B5B" />
 8 |   </svg>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/constants/languages.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Different languages with full name
  3 |  */
  4 | export default [
  5 |   { iso_639_1: 'xx', english_name: 'No Language' },
  6 |   { iso_639_1: 'aa', english_name: 'Afar' },
  7 |   { iso_639_1: 'af', english_name: 'Afrikaans' },
  8 |   { iso_639_1: 'ak', english_name: 'Akan' },
  9 |   { iso_639_1: 'an', english_name: 'Aragonese' },
 10 |   { iso_639_1: 'as', english_name: 'Assamese' },
 11 |   { iso_639_1: 'av', english_name: 'Avaric' },
 12 |   { iso_639_1: 'ae', english_name: 'Avestan' },
 13 |   { iso_639_1: 'ay', english_name: 'Aymara' },
 14 |   { iso_639_1: 'az', english_name: 'Azerbaijani' },
 15 |   { iso_639_1: 'ba', english_name: 'Bashkir' },
 16 |   { iso_639_1: 'bm', english_name: 'Bambara' },
 17 |   { iso_639_1: 'bi', english_name: 'Bislama' },
 18 |   { iso_639_1: 'bo', english_name: 'Tibetan' },
 19 |   { iso_639_1: 'br', english_name: 'Breton' },
 20 |   { iso_639_1: 'ca', english_name: 'Catalan' },
 21 |   { iso_639_1: 'cs', english_name: 'Czech' },
 22 |   { iso_639_1: 'ce', english_name: 'Chechen' },
 23 |   { iso_639_1: 'cu', english_name: 'Slavic' },
 24 |   { iso_639_1: 'cv', english_name: 'Chuvash' },
 25 |   { iso_639_1: 'kw', english_name: 'Cornish' },
 26 |   { iso_639_1: 'co', english_name: 'Corsican' },
 27 |   { iso_639_1: 'cr', english_name: 'Cree' },
 28 |   { iso_639_1: 'cy', english_name: 'Welsh' },
 29 |   { iso_639_1: 'da', english_name: 'Danish' },
 30 |   { iso_639_1: 'de', english_name: 'German' },
 31 |   { iso_639_1: 'dv', english_name: 'Divehi' },
 32 |   { iso_639_1: 'dz', english_name: 'Dzongkha' },
 33 |   { iso_639_1: 'eo', english_name: 'Esperanto' },
 34 |   { iso_639_1: 'et', english_name: 'Estonian' },
 35 |   { iso_639_1: 'eu', english_name: 'Basque' },
 36 |   { iso_639_1: 'fo', english_name: 'Faroese' },
 37 |   { iso_639_1: 'fj', english_name: 'Fijian' },
 38 |   { iso_639_1: 'fi', english_name: 'Finnish' },
 39 |   { iso_639_1: 'fr', english_name: 'French' },
 40 |   { iso_639_1: 'fy', english_name: 'Frisian' },
 41 |   { iso_639_1: 'ff', english_name: 'Fulah' },
 42 |   { iso_639_1: 'gd', english_name: 'Gaelic' },
 43 |   { iso_639_1: 'ga', english_name: 'Irish' },
 44 |   { iso_639_1: 'gl', english_name: 'Galician' },
 45 |   { iso_639_1: 'gv', english_name: 'Manx' },
 46 |   { iso_639_1: 'gn', english_name: 'Guarani' },
 47 |   { iso_639_1: 'gu', english_name: 'Gujarati' },
 48 |   { iso_639_1: 'ht', english_name: 'Haitian; Haitian Creole' },
 49 |   { iso_639_1: 'ha', english_name: 'Hausa' },
 50 |   { iso_639_1: 'sh', english_name: 'Serbo-Croatian' },
 51 |   { iso_639_1: 'hz', english_name: 'Herero' },
 52 |   { iso_639_1: 'ho', english_name: 'Hiri Motu' },
 53 |   { iso_639_1: 'hr', english_name: 'Croatian' },
 54 |   { iso_639_1: 'hu', english_name: 'Hungarian' },
 55 |   { iso_639_1: 'ig', english_name: 'Igbo' },
 56 |   { iso_639_1: 'io', english_name: 'Ido' },
 57 |   { iso_639_1: 'ii', english_name: 'Yi' },
 58 |   { iso_639_1: 'iu', english_name: 'Inuktitut' },
 59 |   { iso_639_1: 'ie', english_name: 'Interlingue' },
 60 |   { iso_639_1: 'ia', english_name: 'Interlingua' },
 61 |   { iso_639_1: 'id', english_name: 'Indonesian' },
 62 |   { iso_639_1: 'ik', english_name: 'Inupiaq' },
 63 |   { iso_639_1: 'is', english_name: 'Icelandic' },
 64 |   { iso_639_1: 'it', english_name: 'Italian' },
 65 |   { iso_639_1: 'jv', english_name: 'Javanese' },
 66 |   { iso_639_1: 'ja', english_name: 'Japanese' },
 67 |   { iso_639_1: 'kl', english_name: 'Kalaallisut' },
 68 |   { iso_639_1: 'kn', english_name: 'Kannada' },
 69 |   { iso_639_1: 'ks', english_name: 'Kashmiri' },
 70 |   { iso_639_1: 'kr', english_name: 'Kanuri' },
 71 |   { iso_639_1: 'kk', english_name: 'Kazakh' },
 72 |   { iso_639_1: 'km', english_name: 'Khmer' },
 73 |   { iso_639_1: 'ki', english_name: 'Kikuyu' },
 74 |   { iso_639_1: 'rw', english_name: 'Kinyarwanda' },
 75 |   { iso_639_1: 'ky', english_name: 'Kirghiz' },
 76 |   { iso_639_1: 'kv', english_name: 'Komi' },
 77 |   { iso_639_1: 'kg', english_name: 'Kongo' },
 78 |   { iso_639_1: 'ko', english_name: 'Korean' },
 79 |   { iso_639_1: 'kj', english_name: 'Kuanyama' },
 80 |   { iso_639_1: 'ku', english_name: 'Kurdish' },
 81 |   { iso_639_1: 'lo', english_name: 'Lao' },
 82 |   { iso_639_1: 'la', english_name: 'Latin' },
 83 |   { iso_639_1: 'lv', english_name: 'Latvian' },
 84 |   { iso_639_1: 'li', english_name: 'Limburgish' },
 85 |   { iso_639_1: 'ln', english_name: 'Lingala' },
 86 |   { iso_639_1: 'lt', english_name: 'Lithuanian' },
 87 |   { iso_639_1: 'lb', english_name: 'Letzeburgesch' },
 88 |   { iso_639_1: 'lu', english_name: 'Luba-Katanga' },
 89 |   { iso_639_1: 'lg', english_name: 'Ganda' },
 90 |   { iso_639_1: 'mh', english_name: 'Marshall' },
 91 |   { iso_639_1: 'ml', english_name: 'Malayalam' },
 92 |   { iso_639_1: 'mr', english_name: 'Marathi' },
 93 |   { iso_639_1: 'mg', english_name: 'Malagasy' },
 94 |   { iso_639_1: 'mt', english_name: 'Maltese' },
 95 |   { iso_639_1: 'mo', english_name: 'Moldavian' },
 96 |   { iso_639_1: 'mn', english_name: 'Mongolian' },
 97 |   { iso_639_1: 'mi', english_name: 'Maori' },
 98 |   { iso_639_1: 'ms', english_name: 'Malay' },
 99 |   { iso_639_1: 'my', english_name: 'Burmese' },
100 |   { iso_639_1: 'na', english_name: 'Nauru' },
101 |   { iso_639_1: 'nv', english_name: 'Navajo' },
102 |   { iso_639_1: 'nr', english_name: 'Ndebele' },
103 |   { iso_639_1: 'nd', english_name: 'Ndebele' },
104 |   { iso_639_1: 'ng', english_name: 'Ndonga' },
105 |   { iso_639_1: 'ne', english_name: 'Nepali' },
106 |   { iso_639_1: 'nl', english_name: 'Dutch' },
107 |   { iso_639_1: 'nn', english_name: 'Norwegian Nynorsk' },
108 |   { iso_639_1: 'nb', english_name: 'Norwegian Bokmål' },
109 |   { iso_639_1: 'no', english_name: 'Norwegian' },
110 |   { iso_639_1: 'ny', english_name: 'Chichewa; Nyanja' },
111 |   { iso_639_1: 'oc', english_name: 'Occitan' },
112 |   { iso_639_1: 'oj', english_name: 'Ojibwa' },
113 |   { iso_639_1: 'or', english_name: 'Oriya' },
114 |   { iso_639_1: 'om', english_name: 'Oromo' },
115 |   { iso_639_1: 'os', english_name: 'Ossetian; Ossetic' },
116 |   { iso_639_1: 'pi', english_name: 'Pali' },
117 |   { iso_639_1: 'pl', english_name: 'Polish' },
118 |   { iso_639_1: 'pt', english_name: 'Portuguese' },
119 |   { iso_639_1: 'qu', english_name: 'Quechua' },
120 |   { iso_639_1: 'rm', english_name: 'Raeto-Romance' },
121 |   { iso_639_1: 'ro', english_name: 'Romanian' },
122 |   { iso_639_1: 'rn', english_name: 'Rundi' },
123 |   { iso_639_1: 'ru', english_name: 'Russian' },
124 |   { iso_639_1: 'sg', english_name: 'Sango' },
125 |   { iso_639_1: 'sa', english_name: 'Sanskrit' },
126 |   { iso_639_1: 'si', english_name: 'Sinhalese' },
127 |   { iso_639_1: 'sk', english_name: 'Slovak' },
128 |   { iso_639_1: 'sl', english_name: 'Slovenian' },
129 |   { iso_639_1: 'se', english_name: 'Northern Sami' },
130 |   { iso_639_1: 'sm', english_name: 'Samoan' },
131 |   { iso_639_1: 'sn', english_name: 'Shona' },
132 |   { iso_639_1: 'sd', english_name: 'Sindhi' },
133 |   { iso_639_1: 'so', english_name: 'Somali' },
134 |   { iso_639_1: 'st', english_name: 'Sotho' },
135 |   { iso_639_1: 'es', english_name: 'Spanish' },
136 |   { iso_639_1: 'sq', english_name: 'Albanian' },
137 |   { iso_639_1: 'sc', english_name: 'Sardinian' },
138 |   { iso_639_1: 'sr', english_name: 'Serbian' },
139 |   { iso_639_1: 'ss', english_name: 'Swati' },
140 |   { iso_639_1: 'su', english_name: 'Sundanese' },
141 |   { iso_639_1: 'sw', english_name: 'Swahili' },
142 |   { iso_639_1: 'sv', english_name: 'Swedish' },
143 |   { iso_639_1: 'ty', english_name: 'Tahitian' },
144 |   { iso_639_1: 'ta', english_name: 'Tamil' },
145 |   { iso_639_1: 'tt', english_name: 'Tatar' },
146 |   { iso_639_1: 'te', english_name: 'Telugu' },
147 |   { iso_639_1: 'tg', english_name: 'Tajik' },
148 |   { iso_639_1: 'tl', english_name: 'Tagalog' },
149 |   { iso_639_1: 'th', english_name: 'Thai' },
150 |   { iso_639_1: 'ti', english_name: 'Tigrinya' },
151 |   { iso_639_1: 'to', english_name: 'Tonga' },
152 |   { iso_639_1: 'tn', english_name: 'Tswana' },
153 |   { iso_639_1: 'ts', english_name: 'Tsonga' },
154 |   { iso_639_1: 'tk', english_name: 'Turkmen' },
155 |   { iso_639_1: 'tr', english_name: 'Turkish' },
156 |   { iso_639_1: 'tw', english_name: 'Twi' },
157 |   { iso_639_1: 'ug', english_name: 'Uighur' },
158 |   { iso_639_1: 'uk', english_name: 'Ukrainian' },
159 |   { iso_639_1: 'ur', english_name: 'Urdu' },
160 |   { iso_639_1: 'uz', english_name: 'Uzbek' },
161 |   { iso_639_1: 've', english_name: 'Venda' },
162 |   { iso_639_1: 'vi', english_name: 'Vietnamese' },
163 |   { iso_639_1: 'vo', english_name: 'Volapük' },
164 |   { iso_639_1: 'wa', english_name: 'Walloon' },
165 |   { iso_639_1: 'wo', english_name: 'Wolof' },
166 |   { iso_639_1: 'xh', english_name: 'Xhosa' },
167 |   { iso_639_1: 'yi', english_name: 'Yiddish' },
168 |   { iso_639_1: 'za', english_name: 'Zhuang' },
169 |   { iso_639_1: 'zu', english_name: 'Zulu' },
170 |   { iso_639_1: 'ab', english_name: 'Abkhazian' },
171 |   { iso_639_1: 'zh', english_name: 'Mandarin' },
172 |   { iso_639_1: 'ps', english_name: 'Pushto' },
173 |   { iso_639_1: 'am', english_name: 'Amharic' },
174 |   { iso_639_1: 'ar', english_name: 'Arabic' },
175 |   { iso_639_1: 'bg', english_name: 'Bulgarian' },
176 |   { iso_639_1: 'cn', english_name: 'Cantonese' },
177 |   { iso_639_1: 'mk', english_name: 'Macedonian' },
178 |   { iso_639_1: 'el', english_name: 'Greek' },
179 |   { iso_639_1: 'fa', english_name: 'Persian' },
180 |   { iso_639_1: 'he', english_name: 'Hebrew' },
181 |   { iso_639_1: 'hi', english_name: 'Hindi' },
182 |   { iso_639_1: 'hy', english_name: 'Armenian' },
183 |   { iso_639_1: 'en', english_name: 'English' },
184 |   { iso_639_1: 'ee', english_name: 'Ewe' },
185 |   { iso_639_1: 'ka', english_name: 'Georgian' },
186 |   { iso_639_1: 'pa', english_name: 'Punjabi' },
187 |   { iso_639_1: 'bn', english_name: 'Bengali' },
188 |   { iso_639_1: 'bs', english_name: 'Bosnian' },
189 |   { iso_639_1: 'ch', english_name: 'Chamorro' },
190 |   { iso_639_1: 'be', english_name: 'Belarusian' },
191 |   { iso_639_1: 'yo', english_name: 'Yoruba' },
192 | ]
193 | 


--------------------------------------------------------------------------------