tracker

5.3 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. // HYBRIEL TRAPS: no session here at all (the fill needs no sign-in — one TMDB request per person, ever), so hybriel#121/#122
13. // can't bite; every list is replaced whole. Helpers are LOCAL statics (an imported mpackdb helper straight in a member's
14. // initializer came back wrong after a client-side navigation — components/show.hl `followingOf`).
15. parent './main.hl'
16. import { appTitle } from '../project.hl'
17. import { personBySlug, personInfoOf, filmographyOf, needsFill, personFillStep } from '../people.hl'
19. // everything the page shows for one slug
20. static pageOf = (slug) => {
21. let p = personBySlug(slug)
22. if (p == null) { return { found = false name = '' photoUrl = '' born = '' died = '' bio = '' rows = [] loading = false } }
23. let info = personInfoOf(p)
24. return { found = true name = info.name photoUrl = info.photoUrl born = info.born died = info.died bio = info.bio
25. rows = filmographyOf(p) loading = needsFill(p) }
26. }
27. // one fill step for the person of this slug; the last answers the whole page again
28. static fillOf = (slug) => {
29. let p = personBySlug(slug)
30. if (p == null) { return { error = 'no such person' } }
31. let r = personFillStep(p.id)
32. if (r.error != null) { return { error = r.error } }
33. if (r.done != true) { return { done = false pos = r.pos total = r.total } }
34. let out = pageOf(slug)
35. out.done = true
36. out.added = r.added
37. return out
38. }
40. // ---- reactive members -----------------------------------------------------------------------
41. slug = null
42. start = pageOf(slug)
43. found = start.found
44. notFound = !start.found
45. name = start.name
46. photoUrl = start.photoUrl
47. hasPhoto = photoUrl != ''
48. born = start.born
49. hasBorn = born != ''
50. died = start.died
51. hasDied = died != ''
52. bio = start.bio
53. hasBio = bio != ''
54. bioClass = 'short'
55. rows = start.rows
56. hasRows = rows.length > 0
57. loading = start.loading
58. loadText = 'Loading filmography…'
59. busy = false
60. fillError = ''
61. hasFillError = fillError != ''
62. noRows = found && !loading && rows.length == 0 && fillError == ''
64. __title = found ? name + ' — ' + appTitle : appTitle
66. View {
67. personPage { "data-loading" = loading
68. if (notFound) {
69. article { class = "main"
70. h1 { "Not found" }
71. p { "This person doesn't exist." }
72. }
73. }
74. if (found) {
75. personHeader {
76. if (hasPhoto) { personPhoto { img { src = photoUrl alt = name } } }
77. personMeta {
78. h1 { name }
79. if (hasBorn) { personFact { class = "born" born } }
80. if (hasDied) { personFact { class = "died" died } }
81. }
82. }
83. // a SHORT bio: four lines (styles.hl), a click shows all of it
84. if (hasBio) { personBio { class = bioClass title = "Show all" bio on click(e) { emit toggleBio(e) } } }
85. h2 { class = "film-heading" "Filmography" }
86. if (loading) {
87. personLoading { id = "personloading" loadText
88. personProbe { "aria-hidden" = "true" on animationiteration(e) { emit fillTick(e) } }
89. }
90. }
91. if (hasFillError) { p { id = "fillerror" class = "message" fillError } }
92. if (noRows) { p { id = "nofilms" class = "muted" "No shows or movies known." } }
93. if (hasRows) {
94. filmRows {
95. for (row of rows) {
96. a { class = "film-row" href = row.href
97. img { class = "film-poster" src = row.posterUrl alt = "" loading = "lazy" }
98. filmText {
99. filmTitle { row.title }
100. filmMeta {
101. filmYear { row.year }
102. filmType { row.typeLabel }
103. }
104. filmRole { row.role }
105. }
106. }
107. }
108. }
109. }
110. }
111. }
112. }
114. // the probe's tick: the fill, step by step, until done (once per page — `busy`); a lost answer (null) just waits for the
115. // next tick and goes on where the server is
116. on fillTick(e) {
117. if (busy || !loading) { return null }
118. busy = true
119. let s = slug
120. let r = emit server personFill(s)
121. while (r != null && r.error == null && r.done != true && slug == s) {
122. loadText = 'Loading filmography… ' + r.pos + ' of ' + r.total + ' titles'
123. r = emit server personFill(s)
124. }
125. busy = false
126. if (r == null || slug != s) { return null }
127. if (r.error != null) {
128. loading = false
129. fillError = 'Could not load the filmography: ' + r.error
130. return null
131. }
132. photoUrl = r.photoUrl
133. born = r.born
134. died = r.died
135. bio = r.bio
136. rows = r.rows
137. loading = false
138. }
140. on toggleBio(e) {
141. bioClass = bioClass == 'short' ? 'full' : 'short'
142. }
144. // ---- the face (a unique name: hl:web dispatches faces by name across all files) ----
145. on server personFill(slug) {
146. return fillOf(slug != null ? '' + slug : '')
147. }