tracker

10.2 KB

1. // components/search.hl — `/search` and `/search/<text>` (tracker.worldapi.org#14). Creator's words: "in the actionbar a
2. // search symbol that first checks our database and then has a fetch from web button that actually searches tmdb then for
3. // things we dont have yet". The header's search icon (components/main.hl) opens this page.
4. //
5. // * OUR DATABASE as you type: every keystroke asks the face `searchDb` (search.hl's in-memory index — no table scan) and the
6. // lists are replaced whole; the address follows the text (`history.replaceState` → `/search/<text>`), so a reload or a
7. // shared link opens the same results, rendered on the server. Titles (series + movies, with the year) and people (tracker#37:
8. // with their photo, each → their page).
9. // * "Fetch from web": the face `searchWeb` asks TMDB (search/multi) and lists the titles we DON'T have yet; "Add" imports
10. // one (`searchImport`: a new show, then the daily sync's own `syncShow` — seasons, episodes, poster, ids) and opens its
11. // page. Signed out, "Add" opens the sign-in modal and sends nothing; searching itself needs no sign-in.
12. //
13. // THE ADDRESS: `/search/<text>`, not `/search?q=` (the architect's reading) — hl:web gives a page its route's path params
14. // but no query string, so the text travels as the route param `q`. A full page load gets it already decoded by the server, a
15. // client-side navigation still encoded — search-helpers.hl `queryOfParam` decodes what is left. '/', '?', '#' go into the address
16. // as spaces (see searchTyped).
17. //
18. // HYBRIEL TRAPS (mission 052): hybriel#121 (rows appended after a session face appear twice) — no list here is ever
19. // appended to, every list is replaced whole; hybriel#122 (after a session face, members using a route param + session are
20. // re-derived without the route param) — no member reads both: the results come from `q` alone, the sign-in state from
21. // `session` alone, and the only session face (`searchImport`) answers no list. The gate checks the lists after a failed
22. // import (a session face that stays on the page).
23. parent './main.hl'
24. import Modal from './modal.hl'
25. import { navigate } from 'hl:web'
26. import { appTitle } from '../project.hl'
27. import { userIdOfSession, loginHref } from '../lib/users.hl'
28. import { showById, personById, posterUrlOf, titleWithYear, titlePath, typeWordOf, typeClassOf } from '../lib/shows.hl'
29. import { dbSearch, webSearch, importTitle } from '../lib/search.hl'
30. import { personPhotoOf } from '../lib/people.hl'
31. import { queryOfParam } from '../lib/search-helpers.hl'
32. import { persistDetails } from '../lib/details.hl'
33. import { applyCredits } from '../lib/credits.hl'
35. // ---- pure helpers (static: an mpackdb-backed helper must be `static`, hybriel#115/#116; and LOCAL, mission 047) ----
36. // tracker.worldapi.org#20/#21: our titles say Movie / Series / Show in their type's colour and link to their own page
37. // (/movies/, /series/, /shows/<slug>); a TMDB result says Movie or TV (TMDB's search tells no TV type — its kind is known
38. // once it is added)
40. // everything the page shows for one text — replaced whole on every keystroke
41. static resultsOf = (text) => {
42. t = text != null ? '' + text : ''
43. r = dbSearch(t)
44. let titleRows = []
45. for (x of r.titles) {
46. let s = showById(x.id)
47. if (s != null) { titleRows.push({ id = s.id title = titleWithYear(s) href = titlePath(s) posterUrl = posterUrlOf(s) typeLabel = typeWordOf(s) typeClass = typeClassOf(s) }) }
48. }
49. let peopleRows = []
50. for (x of r.people) {
51. let p = personById(x.id)
52. // tracker#37: with their photo (people.hl personPhotoOf: ours, else TMDB's, else the placeholder)
53. if (p != null) { peopleRows.push({ id = p.id name = p.name href = '/person/' + p.urlSegment photoUrl = personPhotoOf(p) }) }
54. }
55. let note = ''
56. if (t.trim() == '') { note = 'Search our shows, movies and people.' }
57. else if (r.tooShort) { note = 'Type at least 2 letters.' }
58. else if (titleRows.length == 0 && peopleRows.length == 0) { note = 'Nothing in our database yet.' }
59. let more = ''
60. if (r.titleCount > titleRows.length) { more = 'The first ' + titleRows.length + ' of ' + r.titleCount + ' titles — type more to narrow it down.' }
61. return { text = t titleRows = titleRows peopleRows = peopleRows note = note more = more canFetch = t.trim() != '' && !r.tooShort }
62. }
64. static webRowsOf = (text) => {
65. w = webSearch(text)
66. rows = []
67. for (x of w.rows) {
68. rows.push({ key = x.kind + ':' + x.tmdbId kind = x.kind tmdbId = x.tmdbId title = x.year != '' ? x.title + ' (' + x.year + ')' : x.title
69. overview = x.overview posterUrl = x.posterUrl typeLabel = x.kind == 'movie' ? 'Movie' : 'TV' typeClass = x.kind == 'movie' ? 'type-word type-movie' : 'type-word' })
70. }
71. let note = ''
72. if (w.failed != null) { note = 'TMDB did not answer — try again in a moment.' }
73. else if (rows.length == 0) { note = w.left > 0 ? 'TMDB found nothing we don\'t have already.' : 'TMDB found nothing either.' }
74. return { text = text rows = rows note = note }
75. }
77. // ---- reactive members -----------------------------------------------------------------------
78. q = null
79. session = null
80. userId = userIdOfSession(session)
81. signedIn = userId != null
82. signInHref = loginHref
84. startText = queryOfParam(q)
85. query = startText
86. found = resultsOf(startText)
87. // the text the lists on the page belong to (also an attribute of <search-page>: the gate waits for it)
88. foundText = found.text
89. titleRows = found.titleRows
90. peopleRows = found.peopleRows
91. hasTitles = titleRows.length > 0
92. hasPeople = peopleRows.length > 0
93. note = found.note
94. hasNote = note != ''
95. more = found.more
96. hasMore = more != ''
97. canFetch = found.canFetch
99. webRows = []
100. hasWeb = webRows.length > 0
101. webNote = ''
102. hasWebNote = webNote != ''
103. webBusy = false
104. busyText = ''
105. isBusy = busyText != ''
106. importError = ''
107. hasImportError = importError != ''
109. __title = startText != '' ? startText + ' — search — ' + appTitle : 'Search — ' + appTitle
111. View {
112. searchPage { "data-for" = foundText
113. searchBar {
114. input { id = "searchinput" type = "search" name = "q" value = startText placeholder = "Shows, movies, people" autocomplete = "off" autofocus = "autofocus" enterkeyhint = "search" "aria-label" = "Search" on input(e) { emit searchTyped(e) } }
115. }
116. if (hasNote) { p { id = "searchnote" class = "muted" note } }
117. if (hasTitles) {
118. searchSection { id = "titles"
119. h2 { "Titles" }
120. for (row of titleRows) {
121. searchRow {
122. img { class = "search-poster" src = row.posterUrl alt = "" }
123. a { class = "search-title" href = row.href row.title }
124. searchType { class = row.typeClass row.typeLabel }
125. }
126. }
127. if (hasMore) { p { class = "muted search-more" more } }
128. }
129. }
130. if (hasPeople) {
131. searchSection { id = "people"
132. h2 { "People" }
133. for (row of peopleRows) {
134. searchRow {
135. img { class = "search-poster" src = row.photoUrl alt = "" }
136. a { class = "search-person" href = row.href row.name }
137. }
138. }
139. }
140. }
141. if (canFetch) {
142. webBar {
143. button { id = "fetchweb" type = "button" class = "primary" "Fetch from web" on click(e) { emit searchFetch(e) } }
144. if (webBusy) { span { class = "muted" "Asking TMDB…" } }
145. }
146. }
147. if (hasWebNote) { p { id = "webnote" class = "muted" webNote } }
148. if (hasImportError) { p { id = "importerror" class = "message" importError } }
149. if (isBusy) { p { id = "importbusy" class = "muted" busyText } }
150. if (hasWeb) {
151. searchSection { id = "web"
152. h2 { "From the web (TMDB)" }
153. for (row of webRows) {
154. webRow {
155. img { class = "search-poster" src = row.posterUrl alt = "" }
156. webText {
157. webTitle { row.title }
158. searchType { class = row.typeClass row.typeLabel }
159. }
160. button { type = "button" class = "inverted add" value = row.key "Add" on click(e) { emit searchPick(row.kind, row.tmdbId, row.title) } }
161. }
162. }
163. }
164. }
165. Modal { id = "signin" title = "Sign in"
166. p { "You need to sign in to add titles." }
167. footer {
168. button { type = "button" value = "close" "Close" }
169. a { id = "signin-link" class = "button primary" href = signInHref "Sign in with ident" }
170. }
171. }
172. }
173. }
175. // every keystroke: the address follows the text, then our database answers (an answer for an older text is dropped)
176. on searchTyped(e) {
177. v = e.target.value
178. query = v
179. // the server decodes the path BEFORE routing: an encoded '/' would split the segment (404) and '?' / '#' would cut it —
180. // in the address they become spaces (the search treats them as word breaks anyway)
181. t = v.replaceAll('/', ' ').replaceAll('?', ' ').replaceAll('#', ' ').trim()
182. window.history.replaceState(window.history.state, '', t == '' ? '/search' : '/search/' + encodeURIComponent(t))
183. r = emit server searchDb(v)
184. if (r == null || query != v) { return null }
185. found = r
186. webRows = []
187. webNote = ''
188. importError = ''
189. }
191. on searchFetch(e) {
192. v = query
193. webBusy = true
194. importError = ''
195. r = emit server searchWeb(v)
196. webBusy = false
197. if (r == null || query != v) { return null }
198. webRows = r.rows
199. webNote = r.note
200. }
202. // signed out: the modal, nothing is sent
203. on searchPick(kind, tmdbId, title) {
204. if (!signedIn) { document.getElementById('signin').showModal() return null }
205. if (busyText != '') { return null }
206. importError = ''
207. busyText = 'Adding ' + title + ' …'
208. r = emit server searchImport(kind, '' + tmdbId)
209. busyText = ''
210. if (r == null || r.error != null) {
211. importError = r != null ? 'Could not add it: ' + r.error : 'Could not add it.'
212. return null
213. }
214. navigate(r.path)
215. }
217. // ---- the faces (unique names, hl:web dispatches by name across all files; the trailing `session` is the server's) ----
218. on server searchDb(text) {
219. return resultsOf(text != null ? '' + text : '')
220. }
222. on server searchWeb(text) {
223. return webRowsOf(text != null ? '' + text : '')
224. }
226. on server searchImport(kind, tmdbId, session) {
227. if (userIdOfSession(session) == null) { return { error = 'you are not signed in' } }
228. r = importTitle(kind, tmdbId)
229. if (r.error != null) { return { error = r.error } }
230. // tracker#28: the imported title's cast + crew, from the import's own details answer
231. if (r.created == true && r.details != null) {
232. c = applyCredits(r.show, r.details)
233. persistDetails()
234. console.log('search import credits: ' + r.path + ' cast=' + c.cast + ' crew=' + c.crew + ' people=' + c.people + ' ms=' + c.ms + (c.error != '' ? ' error: ' + c.error : ''))
235. }
236. return { ok = true slug = r.slug path = r.path created = r.created }
237. }