tracker

5.1 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. rows = start.rows
55. hasRows = rows.length > 0
56. loading = start.loading
57. loadText = 'Loading filmography…'
58. busy = false
59. fillError = ''
60. hasFillError = fillError != ''
61. noRows = found && !loading && rows.length == 0 && fillError == ''
63. __title = found ? name + ' — ' + appTitle : appTitle
65. View {
66. personPage { "data-loading" = loading
67. if (notFound) {
68. article { class = "main"
69. h1 { "Not found" }
70. p { "This person doesn't exist." }
71. }
72. }
73. if (found) {
74. personHeader {
75. if (hasPhoto) { personPhoto { img { src = photoUrl alt = name } } }
76. personMeta {
77. h1 { name }
78. if (hasBorn) { personFact { class = "born" born } }
79. if (hasDied) { personFact { class = "died" died } }
80. if (hasBio) { personBio { bio } }
81. }
82. }
83. h2 { class = "film-heading" "Filmography" }
84. if (loading) {
85. personLoading { id = "personloading" loadText
86. personProbe { "aria-hidden" = "true" on animationiteration(e) { emit fillTick(e) } }
87. }
88. }
89. if (hasFillError) { p { id = "fillerror" class = "message" fillError } }
90. if (noRows) { p { id = "nofilms" class = "muted" "No shows or movies known." } }
91. if (hasRows) {
92. filmRows {
93. for (row of rows) {
94. a { class = "film-row" href = row.href
95. img { class = "film-poster" src = row.posterUrl alt = "" loading = "lazy" }
96. filmText {
97. filmTitle { row.title }
98. filmMeta {
99. filmYear { row.year }
100. filmType { row.typeLabel }
101. }
102. filmRole { row.role }
103. }
104. }
105. }
106. }
107. }
108. }
109. }
110. }
112. // the probe's tick: the fill, step by step, until done (once per page — `busy`); a lost answer (null) just waits for the
113. // next tick and goes on where the server is
114. on fillTick(e) {
115. if (busy || !loading) { return null }
116. busy = true
117. let s = slug
118. let r = emit server personFill(s)
119. while (r != null && r.error == null && r.done != true && slug == s) {
120. loadText = 'Loading filmography… ' + r.pos + ' of ' + r.total + ' titles'
121. r = emit server personFill(s)
122. }
123. busy = false
124. if (r == null || slug != s) { return null }
125. if (r.error != null) {
126. loading = false
127. fillError = 'Could not load the filmography: ' + r.error
128. return null
129. }
130. photoUrl = r.photoUrl
131. born = r.born
132. died = r.died
133. bio = r.bio
134. rows = r.rows
135. loading = false
136. }
138. // ---- the face (a unique name: hl:web dispatches faces by name across all files) ----
139. on server personFill(slug) {
140. return fillOf(slug != null ? '' + slug : '')
141. }