tracker

5.9 KB

1. // components/person.hl — `/person/<slug>` (tracker.worldapi.org#16): a person's page — name, photo, born/died, bio, then
2. // the filmography (poster, title, year, role; series and movies, newest first, each → /shows/<slug>). The show page's cast
3. // and the search's people link here.
4. //
5. // FIRST VISIT of a person we don't have complete yet (people.hl `needsFill`): the page shows what we have plus "Loading
6. // filmography…" and fills in WITHOUT a reload — the face `personFill` does ONE step per call (1st: TMDB person + credits,
7. // then 40 titles per call, the last marks the person complete) and the handler calls it until it says `done`; between two
8. // calls hl:web serves every other request. hl:web gives a page no "mounted" hook, so the first call comes from a tick like
9. // the shell's offline probe (components/main.hl): the invisible `personProbe` runs an endless short CSS animation
10. // (styles.hl) and its `animationiteration` starts the fill (once — `busy`). A failed fill shows why; the next visit tries again.
11. //
12. // mission 060 (tracker.worldapi.org#27): the person's short id (shortids.hl) under the photo (no photo: under the facts).
13. //
14. // HYBRIEL TRAPS: no session here at all (the fill needs no sign-in — one TMDB request per person, ever), so hybriel#121/#122
15. // can't bite; every list is replaced whole. Helpers are LOCAL statics (an imported mpackdb helper straight in a member's
16. // initializer came back wrong after a client-side navigation — components/show.hl `followingOf`).
17. parent './main.hl'
18. import { appTitle } from '../project.hl'
19. import { personBySlug, personInfoOf, filmographyOf, needsFill, personFillStep } from '../people.hl'
21. // everything the page shows for one slug
22. static pageOf = (slug) => {
23. let p = personBySlug(slug)
24. if (p == null) { return { found = false name = '' photoUrl = '' born = '' died = '' bio = '' rows = [] loading = false shortId = '' } }
25. let info = personInfoOf(p)
26. return { found = true name = info.name photoUrl = info.photoUrl born = info.born died = info.died bio = info.bio
27. rows = filmographyOf(p) loading = needsFill(p) shortId = p.shortId != null ? '' + p.shortId : '' }
28. }
29. // one fill step for the person of this slug; the last answers the whole page again
30. static fillOf = (slug) => {
31. let p = personBySlug(slug)
32. if (p == null) { return { error = 'no such person' } }
33. let r = personFillStep(p.id)
34. if (r.error != null) { return { error = r.error } }
35. if (r.done != true) { return { done = false pos = r.pos total = r.total } }
36. let out = pageOf(slug)
37. out.done = true
38. out.added = r.added
39. return out
40. }
42. // ---- reactive members -----------------------------------------------------------------------
43. slug = null
44. start = pageOf(slug)
45. found = start.found
46. notFound = !start.found
47. name = start.name
48. photoUrl = start.photoUrl
49. hasPhoto = photoUrl != ''
50. // mission 060 (tracker.worldapi.org#27): the short id under the photo — no photo: under the name and facts
51. shortId = start.shortId
52. hasShortId = shortId != ''
53. shortIdInMeta = hasShortId && !hasPhoto
54. born = start.born
55. hasBorn = born != ''
56. died = start.died
57. hasDied = died != ''
58. bio = start.bio
59. hasBio = bio != ''
60. bioClass = 'short'
61. rows = start.rows
62. hasRows = rows.length > 0
63. loading = start.loading
64. loadText = 'Loading filmography…'
65. busy = false
66. fillError = ''
67. hasFillError = fillError != ''
68. noRows = found && !loading && rows.length == 0 && fillError == ''
70. __title = found ? name + ' — ' + appTitle : appTitle
72. View {
73. personPage { "data-loading" = loading
74. if (notFound) {
75. article { class = "main"
76. h1 { "Not found" }
77. p { "This person doesn't exist." }
78. }
79. }
80. if (found) {
81. personHeader {
82. if (hasPhoto) {
83. personPhoto {
84. img { src = photoUrl alt = name }
85. if (hasShortId) { shortIdLabel { id = "shortid" title = "Short id" shortId } }
86. }
87. }
88. personMeta {
89. h1 { name }
90. if (hasBorn) { personFact { class = "born" born } }
91. if (hasDied) { personFact { class = "died" died } }
92. if (shortIdInMeta) { shortIdLabel { id = "shortid" title = "Short id" shortId } }
93. }
94. }
95. // a SHORT bio: four lines (styles.hl), a click shows all of it
96. if (hasBio) { personBio { class = bioClass title = "Show all" bio on click(e) { emit toggleBio(e) } } }
97. h2 { class = "film-heading" "Filmography" }
98. if (loading) {
99. personLoading { id = "personloading" loadText
100. personProbe { "aria-hidden" = "true" on animationiteration(e) { emit fillTick(e) } }
101. }
102. }
103. if (hasFillError) { p { id = "fillerror" class = "message" fillError } }
104. if (noRows) { p { id = "nofilms" class = "muted" "No shows or movies known." } }
105. if (hasRows) {
106. filmRows {
107. for (row of rows) {
108. a { class = "film-row" href = row.href
109. img { class = "film-poster" src = row.posterUrl alt = "" loading = "lazy" }
110. filmText {
111. filmTitle { row.title }
112. filmMeta {
113. filmYear { row.year }
114. filmType { row.typeLabel }
115. }
116. filmRole { row.role }
117. }
118. }
119. }
120. }
121. }
122. }
123. }
124. }
126. // the probe's tick: the fill, step by step, until done (once per page — `busy`); a lost answer (null) just waits for the
127. // next tick and goes on where the server is
128. on fillTick(e) {
129. if (busy || !loading) { return null }
130. busy = true
131. let s = slug
132. let r = emit server personFill(s)
133. while (r != null && r.error == null && r.done != true && slug == s) {
134. loadText = 'Loading filmography… ' + r.pos + ' of ' + r.total + ' titles'
135. r = emit server personFill(s)
136. }
137. busy = false
138. if (r == null || slug != s) { return null }
139. if (r.error != null) {
140. loading = false
141. fillError = 'Could not load the filmography: ' + r.error
142. return null
143. }
144. photoUrl = r.photoUrl
145. born = r.born
146. died = r.died
147. bio = r.bio
148. rows = r.rows
149. loading = false
150. }
152. on toggleBio(e) {
153. bioClass = bioClass == 'short' ? 'full' : 'short'
154. }
156. // ---- the face (a unique name: hl:web dispatches faces by name across all files) ----
157. on server personFill(slug) {
158. return fillOf(slug != null ? '' + slug : '')
159. }