tracker

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