Merge pull request #25 from benjifs/feat/tmdb

feat: TMDB for movie search

.env.example

@@ -1,3 +1,2 @@
-OMDB_API_KEY="1234abcd"
-LASTFM_API_KEY="abcd1234"
+TMDB_API_KEY="1234abcd"
 GIANTBOMB_API_KEY="wxyz7890"

README.md

@@ -35,15 +35,14 @@ You can read more about this project [here](https://benji.dog/articles/sparkles/
 ### Environment Variables
 | name | description |
 | --- | --- |
-| `OMDB_API_KEY` | [OMDB API Key](https://www.omdbapi.com/) for movie search |
-| `LASTFM_API_KEY` | [Last.fm API Key](https://www.last.fm/api) for {artist, album, track} search |
+| `TMDB_API_KEY` | [TMDB API Key](https://developer.themoviedb.org/) for movie search |
 | `GIANTBOMB_API_KEY` | [GiantBomb API Key](https://www.giantbomb.com/api/) for video game search |
 
 ### Build
 * Clone this repository
 * `npm install`
 * Run `netlify dev` to test locally
-  * Your default browser should automatically open to: http://localhost:9000
+  * Your default browser should automatically open to: http://localhost:8888
   * The frontend will run on port `5173`
   * The functions will run on port `5174`
 

netlify.toml

@@ -25,6 +25,5 @@
 	status = 200
 
 [template.environment]
-	OMDB_API_KEY = "OMDB API Key"
-	LASTFM_API_KEY = "last.fm API key"
+	TMDB_API_KEY = "TMDB API Key"
 	GIANTBOMB_API_KEY = "Giant Bomb API key"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkles",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "micropub client",
   "main": "./src/js/app.js",
   "scripts": {
@@ -28,9 +28,9 @@
     "url": "https://github.com/benjifs/sparkles/issues"
   },
   "devDependencies": {
-    "eslint": "^9.3.0",
-    "sass": "^1.77.2",
-    "vite": "^5.2.11"
+    "eslint": "^9.4.0",
+    "sass": "^1.77.4",
+    "vite": "^5.2.12"
   },
   "dependencies": {
     "cheerio": "^1.0.0-rc.12",

src/functions/search.js

@@ -4,23 +4,23 @@ import { Error, Response } from './lib/utils'
 
 const types = {
 	movie: {
-		url: 'https://www.omdbapi.com',
+		url: 'https://api.themoviedb.org/3/search/movie',
 		buildParams: ({ query, year, page }) => ({
-			apikey: process.env.OMDB_API_KEY,
-			type: 'movie',
-			s: query,
-			y: year,
+			api_key: process.env.TMDB_API_KEY,
+			query: query,
+			year: year,
 			page: page
 		}),
 		buildError: ({ status, response }) => Response.error({ statusCode: status }, response.Error),
 		parseResponse: res => ({
-			totalResults: res?.totalResults || 0,
-			results: res?.Search?.map(m => ({
-				id: `imdb:${m.imdbID}`,
-				title: m.Title,
-				image: m.Poster,
-				year: m.Year,
-				url: `https://imdb.com/title/${m.imdbID}`
+			totalResults: res?.total_results || 0,
+			results: res?.results?.map(m => ({
+				id: `tmdb:${m.id}`,
+				title: m.original_title,
+				image: `https://image.tmdb.org/t/p/original${m.poster_path}`,
+				year: (m.release_date || '').split('-')[0],
+				description: m.overview,
+				url: `https://themoviedb.org/movie/${m.id}`
 			}))
 		})
 	},

src/js/Editors/MediaEditor.js

@@ -73,6 +73,7 @@ const MediaEditor = ({ attrs }) => {
 							...(state.selected.id && { uid: [ state.selected.id ] }),
 							...(state.selected.url && { url: [ state.selected.url ] }),
 							...(state.selected.year && { published: [ state.selected.year ] }),
+							...(state.selected.description && { content: [ state.selected.description ] }),
 						}
 					}
 				],
@@ -142,6 +143,7 @@ const MediaEditor = ({ attrs }) => {
 			})
 			search = res?.results || []
 			state.totalResults = res?.totalResults || 0
+			if (search.length > 10) state.pageSize = search.length
 		} catch ({ response }) {
 			Alert.error(response && response.error_description)
 			search = null
@@ -203,7 +205,7 @@ const MediaEditor = ({ attrs }) => {
 					state.searched && (!search || search.length === 0) && m('div', 'No results found'),
 					!state.selected && search && state.totalResults > search.length && m('div.item-pagination', [
 						m('button', { disabled: state.page == 1, onclick: e => submitSearch(e, --state.page) }, 'prev'),
-						m('button', { disabled: state.totalResults < state.page * 10, onclick: e => submitSearch(e, ++state.page) }, 'next')
+						m('button', { disabled: state.totalResults < state.page * state.pageSize, onclick: e => submitSearch(e, ++state.page) }, 'next')
 					])
 				]),
 				state.selected && m('form', {

src/scss/_ui.scss

@@ -84,7 +84,7 @@ form {
 			border-radius: 0;
 		}
 		select {
-			width: 25%;
+			width: max(25%, 75px);
 			border-right: var(--input-border-size) solid var(--input-border);
 		}
 		input {