tracker

40.2 KB

1. // components/show.hl — a title's own page (tracker.worldapi.org#4): since tracker#21 (mission 068) `/series/:slug`, `/movies/:slug`
2. // and `/shows/:slug` (the last through project.hl showsRoute: a show is rendered there, a series or movie answers 301 to its
3. // own address). tracker#20: the heading is "<Type> | <title>" — Series / Show / Movie in the type's colour (styles.hl
4. // `type-*`), the title white. Creator's words:
5. // "the poster on the left, right of it the title of the show, the genre pills, below the plot summary,
6. // below that the artists just as normal links, separated with comma color red, genres are blue" (the
7. // header) — "then all seasons in reverse order, latest on top, below them collapsable their episodes,
8. // episodes first the round check icon, if the episode was watched by the user looking its solid, if
9. // not its regular, then the episode number, then the title. the last season is not collapsed. click on
10. // the check adds a watch. the season also has a check, if the season is checked or unchecked all its
11. // episodes get checked or unchecked. artists link to /person/<artist-slug> the genre to /genre/<genre-slug>."
12. //
13. // THE ROWS ARE ONE FLAT LIST, not a nested for-loop over seasons > episodes: the vendored build may
14. // still lack the fix for hybriel#86 (a nested for over a reassigned outer list keeps stale inner
15. // cells) — a single-level `for (row of rows)` with a `kind` field, reassigned whole on every click,
16. // is the same proven-safe shape components/main.hl's own header and ident's inbox.hl already use.
17. // `rows` is rebuilt from scratch (seasons/episodes refetched by id, watch rows refetched) on every
18. // toggle — cheap: a show has at most a few dozen episodes per season.
19. //
20. // Mission 047 (the creator, 2026-10-01): a caret at the season header's right edge (down = open, right = collapsed); episode
21. // rows not indented; on a phone the title first, then the poster at full width, then genres/plot/cast; a Follow toggle
22. // next to the title (tracker#34, mission 030: under the poster, as wide as the poster; next to the title the status pill, #35). SIGNED OUT the checks and Follow are visible too: a click opens the "sign in" modal (modal.hl, copied
23. // from components.hybriel) and writes nothing.
24. //
25. // tracker.worldapi.org#17 (mission 057): the caret points DOWN while a season is closed and UP while it is open. Opening a
26. // season shows SKELETON rows at once (min(episodes, 8), a CSS shimmer, styles.hl) and then its episodes from the face
27. // `showSeasonEpisodes`, which takes NO session: a face with `session` makes hl:web re-mount the whole page on the server and
28. // ship every session-derived member back as a `sync` (WebFramework.hl `inbound`) — that, not the episodes, was most of the
29. // old 250–450 ms (real data). The watched state comes from `watchedEpisodes` (this show's watched episodes per season, rendered
30. // with the page and re-synced after every watch face). Closing is client-only (no request). An ADULT show (only its
31. // followers see it) keeps the session face `showRows`: the public face refuses adult seasons.
32. //
33. // tracker.worldapi.org#12: link icons under the title — the show on TMDB, IMDb, TheTVDB, TVmaze (a movie: TMDB + IMDb),
34. // only for the ids it has (shows.hl externalLinksOf), each in a new tab.
35. //
36. // mission 058: #22 every episode row shows its air date (`release`, 'YYYY-MM-DD' like /my/unwatched; none → empty). #23 a
37. // season's check is DERIVED: solid exactly when every one of its episodes is watched (a season without episodes: its own
38. // season watch) — unchecking one episode turns the season off with the face's answer, checking it again turns it on; the
39. // season click watches all when not all are watched, else unwatches all. #24 a MOVIE's page has its own watched check
40. // (watch `targetType = 'movie'`, target = the title's id; face `showToggleMovie`), signed out → the sign-in modal.
41. //
42. // tracker.worldapi.org#26: an INCOMPLETE title (one a person page added from a filmography — details.hl `needsDetails`) shows
43. // what it has plus skeletons (poster, cast line, season rows for a series) and completes itself WITHOUT a reload: the
44. // invisible `showProbe` (endless short CSS animation — hl:web has no mount hook, the person page's trick) calls the face
45. // `showComplete` until it is done — one step per call (details.hl completeStep: TMDB details + ids + cast; a series' seasons/
46. // episodes in parts; poster, TVmaze) — and the last answer's parts replace the skeletons. No session (no page re-mount); adult
47. // refused.
48. //
49. // tracker.worldapi.org#28: the WHOLE cast and the key crew (details.hl stores them: a series' cast of every season, main cast
50. // first by episode count, then "Guest stars"; crew = Created by / Directed by / Written by / Screenplay / Story / Music). The
51. // cast shows its first `castShown` (20) and a "Show all (N)" toggle, each crew job its first `crewShown` (6) and one "Show all
52. // crew (N)" toggle — CLIENT-SIDE (the rows are all rendered, CSS hides the rest; `castClass`/`crewClass`, no request). Names
53. // link to /person/<slug>; the character in brackets after the name (CSS `attr(data-role)` — one element per name: the SSR's
54. // line breaks inside a wrapper element put a space before the comma).
55. parent './main.hl'
56. import Modal from './modal.hl'
57. import FranchiseWidget from './franchisewidget.hl'
58. import { appTitle } from '../project.hl'
59. import { userIdOfSession, loginHref } from '../lib/users.hl'
60. import { isFollowing, toggleFollowed } from '../lib/follows.hl'
61. import { showBySlug, showById, genreById, personById, seasonsOfShow, episodesOfSeason, seasonById, posterName, externalLinksOf, summaryOf, titleKind, statusOf } from '../lib/shows.hl'
62. import { watchesOfUser, isWatched, watchedSet, watchClassOf, seasonAllWatched, toggleWatched, toggleSeasonWatched } from '../lib/watches.hl'
63. import { needsDetails, completeStep, completeLine, persistDetails } from '../lib/details.hl'
64. import { widgetsOf } from '../lib/franchises.hl'
65. import { listOr } from '../lib/util.hl'
66. import { dateText } from '../lib/people.hl'
68. // ---- pure helpers ----------------------------------------------------------------------------
69. // `static`, like calendar.hl's `soonOf` — a PLAIN instance member function that calls an
70. // hl:mpackdb-backed import (seasonsOfShow, episodesOfSeason, watchesOfUser, …) comes back null
71. // when called from an `on server` face (confirmed by running the gate: "'buildRows' is not
72. // callable — it holds null" at the face's call site, even though the SAME call works fine as a
73. // member's own initializer at the top of this file). `static` is the proven-safe shape (calendar's
74. // `soonOf`, called from `calLoad`/`calSettingsLoad`, an mpackdb-backed helper exactly like this one).
75. static initialCollapsed = (&seasons) => {
76. m = {}
77. let i = 0
78. while (i < seasons.length) {
79. if (i > 0) { m[seasons[i].id] = true }
80. i = i + 1
81. }
82. return m
83. }
84. static genreRowsOf = (&show) => {
85. out = []
86. for (gid of show.genres) {
87. let g = genreById(gid)
88. if (g != null) { out.push({ id = g.id name = g.name href = '/genres/' + g.urlSegment }) }
89. }
90. return out
91. }
92. // tracker#28: how many names show before "Show all" (cast; per crew job)
93. static castShown = 20
94. static crewShown = 6
95. // the cast as flat rows (no nested for, see THE ROWS above): `isPerson` rows { name, href, roleText (' (Character)' or ''),
96. // itemClass } and before the first guest one `isLabel` row "Guest stars". itemClass: `more` = hidden until "Show all", `end` =
97. // no comma after it (the last of a group), `cut` = the last one shown while collapsed (no comma then)
98. static castRowsOf = (show) => {
99. people = []
100. for (c of listOr(show.cast)) {
101. let p = c != null && c.person != null ? personById(c.person) : null
102. // mission 062: a guest without a person record — the link creates it on the first open (project.hl guestRoute)
103. if (p != null) { people.push({ name = c.actor != null ? c.actor : p.name href = '/person/' + p.urlSegment role = c.character != null ? c.character : '' guest = c.guest == true }) }
104. else if (c != null && c.person == null && c.tmdbId != null && c.actor != null) { people.push({ name = c.actor href = '/person/tmdb/' + c.tmdbId + '?show=' + show.id role = c.character != null ? c.character : '' guest = true }) }
105. }
106. out = []
107. let k = 0
108. let guests = false
109. while (k < people.length) {
110. let c = people[k]
111. if (c.guest && !guests && k > 0) {
112. guests = true
113. out.push({ isLabel = true isPerson = false text = 'Guest stars' name = '' href = '' roleText = '' itemClass = k >= castShown ? 'more' : '' })
114. }
115. let last = k == people.length - 1 || (people[k + 1].guest && !c.guest)
116. let cls = (k >= castShown ? ' more' : '') + (last ? ' end' : '') + (k == castShown - 1 ? ' cut' : '')
117. out.push({ isLabel = false isPerson = true text = '' name = c.name href = c.href roleText = c.role != '' ? ' (' + c.role + ')' : '' itemClass = 'artist-link' + cls })
118. k = k + 1
119. }
120. return out
121. }
122. static castCountOf = (&rows) => {
123. let n = 0
124. for (r of rows) { if (r.isPerson) { n = n + 1 } }
125. return n
126. }
127. static crewLabels = { creator = 'Created by' director = 'Directed by' writer = 'Written by' screenplay = 'Screenplay' story = 'Story' composer = 'Music' }
128. // the crew as flat rows: per job (in stored order) an `isLabel` row, then its people (itemClass as for the cast, `more` after
129. // the first crewShown of a job)
130. static crewRowsOf = (&show) => {
131. people = []
132. for (c of listOr(show.crew)) {
133. let p = c != null ? personById(c.person) : null
134. if (p != null && crewLabels[c.job] != null) { people.push({ name = c.name != null ? c.name : p.name href = '/person/' + p.urlSegment job = c.job }) }
135. }
136. out = []
137. let k = 0
138. let inJob = 0
139. while (k < people.length) {
140. let c = people[k]
141. if (k == 0 || people[k - 1].job != c.job) {
142. inJob = 0
143. out.push({ isLabel = true isPerson = false text = crewLabels[c.job] name = '' href = '' itemClass = '' })
144. }
145. let last = k == people.length - 1 || people[k + 1].job != c.job
146. out.push({ isLabel = false isPerson = true text = '' name = c.name href = c.href itemClass = 'crew-link' + (inJob >= crewShown ? ' more' : '') + (last ? ' end' : '') + (inJob == crewShown - 1 ? ' cut' : '') })
147. inJob = inJob + 1
148. k = k + 1
149. }
150. return out
151. }
152. // how many crew names are hidden while collapsed (0 = no toggle) and how many there are
153. static crewHiddenOf = (&rows) => {
154. let n = 0
155. for (r of rows) { if (r.isPerson && r.itemClass.includes(' more')) { n = n + 1 } }
156. return n
157. }
158. static crewCountOf = (&rows) => {
159. let n = 0
160. for (r of rows) { if (r.isPerson) { n = n + 1 } }
161. return n
162. }
163. // a View attribute must be a literal, a member or a field path — never an inline expression — so
164. // every ternary (watched -> icon class, collapsed -> row class) is resolved HERE, once, into a
165. // plain field the View just reads (row.watchClass, row.rowClass); `watchClassOf` itself lives in
166. // watches.hl (shared with /unwatched and /schedule, "reuse, don't copy")
167. // #22: an episode's air date as the lists show it ('YYYY-MM-DD'), '' when it has none
168. static airDateOf = (&e) => { return e.release != null && hlTypeName(e.release) == 'String' ? e.release : '' }
169. static buildRows = (&show, &uid, collapsed) => {
170. watched = watchedSet(uid != null ? watchesOfUser(uid) : [])
171. out = []
172. for (s of seasonsOfShow(show)) {
173. let isCollapsed = collapsed[s.id] == true
174. let label = s.title != null && s.title != '' ? s.title : 'Season ' + s.seasonNumber
175. let seasonWatched = seasonAllWatched(s, watched)
176. out.push({ kind = 'season' isSeason = true isEpisode = false isSkeleton = false id = s.id skeletonCount = s.episodes.length < 8 ? s.episodes.length : 8 label = label episodeCountText = s.episodes.length == 1 ? '1 episode' : s.episodes.length + ' episodes' watched = seasonWatched watchClass = watchClassOf(seasonWatched) collapsed = isCollapsed rowClass = isCollapsed ? 'collapsed' : 'expanded' })
177. if (!isCollapsed) {
178. for (e of episodesOfSeason(s)) {
179. let epWatched = watched['episode:' + e.id] == true
180. out.push({ kind = 'episode' isSeason = false isEpisode = true isSkeleton = false id = e.id seasonId = s.id episodeNumber = e.episodeNumber title = e.title != null ? e.title : '' airDate = airDateOf(e) watched = epWatched watchClass = watchClassOf(epWatched) })
181. }
182. }
183. }
184. return out
185. }
187. // what the client marks the rows of a season it opens with (tracker#17) — only this show's, never the user's whole watch
188. // list (every member is shipped to the browser). Per season with a watched episode: `{ all, except }` — `all` = most of
189. // it is watched, then `except` holds the UNwatched ids, else the watched ones (a fully watched 142-episode season is
190. // `{ all = true except = {} }`, not 142 ids). No entry = nothing watched.
191. static watchedEpisodesOf = (&show, &uid) => {
192. m = {}
193. if (uid == null) { return m }
194. watched = watchedSet(watchesOfUser(uid))
195. for (s of seasonsOfShow(show)) {
196. let yes = {}
197. let no = {}
198. let n = 0
199. for (eid of s.episodes) {
200. if (watched['episode:' + eid] == true) { yes[eid] = true n = n + 1 } else { no[eid] = true }
201. }
202. if (n > 0) { m[s.id] = n * 2 > s.episodes.length ? { all = true except = no } : { all = false except = yes } }
203. }
204. return m
205. }
206. // is this episode watched, by that per-season shape (client-side, pure)
207. static watchedIn = (&entry, &episodeId) => {
208. if (entry == null) { return false }
209. listed = entry.except[episodeId] == true
210. return entry.all ? !listed : listed
211. }
213. // ---- the rows as the CLIENT changes them (tracker#17) — pure: no import is reached, so they run in the browser ----------
214. // (`watchClassOf` is an import of the mpackdb-backed watches.hl, so `filledRows` writes its two classes itself)
215. static seasonRowAs = (&row, &isCollapsed) => {
216. return { kind = 'season' isSeason = true isEpisode = false isSkeleton = false id = row.id skeletonCount = row.skeletonCount label = row.label episodeCountText = row.episodeCountText watched = row.watched watchClass = row.watchClass collapsed = isCollapsed rowClass = isCollapsed ? 'collapsed' : 'expanded' }
217. }
218. // the season opened: its caret up at once, `skeletonCount` placeholder rows under it
219. static openingRows = (&rows, seasonId) => {
220. out = []
221. for (row of rows) {
222. if (row.isSeason && row.id == seasonId) {
223. out.push(seasonRowAs(row, false))
224. let i = 0
225. while (i < row.skeletonCount) {
226. out.push({ kind = 'skeleton' isSeason = false isEpisode = false isSkeleton = true id = seasonId + '-skeleton-' + i seasonId = seasonId })
227. i = i + 1
228. }
229. } else { out.push(row) }
230. }
231. return out
232. }
233. // the season closed: its episode (and skeleton) rows gone, caret down
234. static closedRows = (&rows, &seasonId) => {
235. out = []
236. for (row of rows) {
237. if (row.isSeason && row.id == seasonId) { out.push(seasonRowAs(row, true)) }
238. else if (!row.isSeason && row.seasonId == seasonId) { }
239. else { out.push(row) }
240. }
241. return out
242. }
243. // the episodes arrived: they replace the season's skeleton rows. No skeleton of it left (closed meanwhile, or a watch face
244. // already rebuilt every row) → the rows stay as they are (no double rows)
245. static filledRows = (&rows, seasonId, &episodes, watched) => {
246. out = []
247. let done = false
248. for (row of rows) {
249. if (row.isSkeleton && row.seasonId == seasonId) {
250. if (!done) {
251. for (e of episodes) {
252. let w = watchedIn(watched[seasonId], e.id)
253. out.push({ kind = 'episode' isSeason = false isEpisode = true isSkeleton = false id = e.id seasonId = seasonId episodeNumber = e.episodeNumber title = e.title airDate = e.airDate watched = w watchClass = w ? 'checkicon solid' : 'checkicon regular' })
254. }
255. done = true
256. }
257. } else { out.push(row) }
258. }
259. return out
260. }
262. // a LOCAL static like buildRows (an imported mpackdb helper called straight from a member's initializer came back false
263. // after a client-side navigation to the page — the gate's follow check)
264. static followingOf = (&show, &uid) => { return uid != null && isFollowing(uid, show.id) }
265. // #24: has this user watched this movie (a watch `movie:<title id>`)?
266. static movieWatchedOf = (&show, &uid) => { return uid != null && isWatched(watchesOfUser(uid), 'movie', show.id) }
267. // mission 056: an ADULT title's page (TMDB's flag `adult == true`, mission 054) is "Not found" for everyone who does not
268. // follow it (signed out too); a follower sees it as before. Unknown (`null`) is not hidden here — only in the lists.
269. // With hybriel ≥ 73267707 (#121/#122) `showRow`/`found` are server sites re-derived after every session face with the page's
270. // slug, so an Unfollow on the page hides it at once (the gate proves it; the old build left the page up until a reload).
271. // Mission 054's try (`found = … && !adultHiddenFor(showRow, me)`, `collapsed`/`rows` from `found`) broke the checks.
272. static adultHiddenFor = (&show, &uid) => { return show.adult == true && !followingOf(show, uid) }
273. // the page's show — null when there is none OR it is hidden for this user: every member is shipped to the browser, so the
274. // row of a hidden title must never be one
275. static visibleShow = (&slug, &uid) => {
276. s = showBySlug(slug)
277. return s != null && adultHiddenFor(s, uid) ? null : s
278. }
279. // tracker.worldapi.org#19 (mission 066): the franchise widget(s), one per timeline the title is in (components/franchisewidget.hl)
280. static franchiseWidgetsOf = (&show) => { return widgetsOf(show.id) }
281. // tracker#33 (mission 032): a movie's release date and runtime under its title — "17 September 2026 · 7 min", "… · 2 h 15 min";
282. // what is missing is left out ('' = no line)
283. static runtimeText = (&m) => {
284. if (m == null || hlTypeName(m) != 'Number' || m <= 0) { return '' }
285. mins = m % 60
286. hours = (m - mins) / 60
287. if (hours == 0) { return mins + ' min' }
288. return mins == 0 ? hours + ' h' : hours + ' h ' + mins + ' min'
289. }
290. static movieFactsOf = (&s) => {
291. if (s.type != 'movie') { return '' }
292. parts = []
293. d = dateText(s.release)
294. if (d != null) { parts.push(d) }
295. r = runtimeText(s.runtime)
296. if (r != '') { parts.push(r) }
297. return parts.join(' · ')
298. }
299. // mission 062: what the page shows of the title, as a SMALL object — `showRow` reads the session, so hl:web ships it with the page
300. // AND re-sends it after every watch/follow click (SESSION SYNC below): the whole record was ~1 MB on The Simpsons (300 cast + crew
301. // entries). null = not found / hidden.
302. static pageShowOf = (&slug, &uid) => {
303. s = visibleShow(slug, uid)
304. if (s == null) { return null }
305. movie = s.type == 'movie'
306. st = statusOf(s)
307. return { id = s.id title = s.title summary = summaryOf(s) type = s.type adult = s.adult == true shortId = s.shortId != null ? '' + s.shortId : '' statusText = st.text statusTone = st.tone
308. poster = posterName(s) genreRows = genreRowsOf(s) linkRows = externalLinksOf(s) completing = completingOf(s) following = followingOf(s, uid)
309. movieWatched = movie ? movieWatchedOf(s, uid) : false facts = movieFactsOf(s) }
310. }
311. // the seasons/episodes rows and the per-season watch state by the slug (the record itself stays on the server)
312. static rowsOfSlug = (&slug, &uid, &collapsed) => {
313. s = showBySlug(slug)
314. return s != null ? buildRows(s, uid, collapsed) : []
315. }
316. static watchedEpisodesOfSlug = (&slug, &uid) => {
317. s = showBySlug(slug)
318. return s != null ? watchedEpisodesOf(s, uid) : {}
319. }
320. // the initial open/closed seasons and the title's kind (tracker#20/#21: the heading's type word) from the SLUG alone (not from
321. // `showRow`, which reads the session — see `collapsed`) — one slug lookup for both
322. static slugInfoOf = (&slug) => {
323. s = showBySlug(slug)
324. return s != null ? { collapsed = initialCollapsed(seasonsOfShow(s)) kind = titleKind(s) } : { collapsed = {} kind = 'series' }
325. }
327. // mission 062: the cast and crew rows by the SLUG alone (not from `showRow`, which reads the session — see `castRows`). An
328. // ADULT title (its page only for its followers) shows none: every member is shipped to the browser, and adult titles never get
329. // credits anyway (details.hl skips them; at most a migrated cast)
330. static publicShowOf = (&slug) => {
331. s = showBySlug(slug)
332. return s != null && s.adult != true ? s : null
333. }
334. static castOfSlug = (&slug) => {
335. s = publicShowOf(slug)
336. return s != null ? castRowsOf(s) : []
337. }
338. static crewOfSlug = (&slug) => {
339. s = publicShowOf(slug)
340. return s != null ? crewRowsOf(s) : []
341. }
343. // tracker#26: the page loads this title's full details on open
344. static completingOf = (&show) => { return needsDetails(show) }
345. // the face's work: ONE step of completing the title (details.hl completeStep — a series takes a few; a second viewer drives the
346. // same job or finds it complete); when done, every part of the page that changes — the rows without anyone's watch state (a
347. // title that was incomplete had no episodes to watch)
348. static completedPageOf = (&slug) => {
349. let show = showBySlug(slug)
350. if (show == null || show.adult == true) { return { error = 'no such show' } }
351. if (needsDetails(show)) {
352. let r = completeStep(show.id)
353. if (r.retry || r.adult == true) { return { error = r.error != '' ? r.error : 'no such show' } }
354. if (!r.done) { return { done = false steps = r.sum.steps } }
355. if (!r.skipped) {
356. persistDetails()
357. console.log('details on open: ' + completeLine(show.title, r.sum))
358. }
359. show = showById(show.id)
360. }
361. cl = initialCollapsed(seasonsOfShow(show))
362. pn = posterName(show)
363. crew = crewRowsOf(show)
364. cast = castRowsOf(show)
365. return { done = true title = show.title summary = summaryOf(show) poster = pn genreRows = genreRowsOf(show) castRows = cast
366. castCount = castCountOf(cast) castMore = castCountOf(cast) > castShown crewRows = crew crewCount = crewCountOf(crew) crewMore = crewHiddenOf(crew) > 0
367. linkRows = externalLinksOf(show) collapsed = cl rows = buildRows(show, null, cl) }
368. }
370. // ---- reactive members -----------------------------------------------------------------------
371. slug = null
372. session = null
373. userId = userIdOfSession(session)
374. signedIn = userId != null
375. // SESSION SYNC (mission 047; since hybriel #121/#122, mission 056): a face taking `session` answers with a `sync` of every
376. // member derived from session that reaches an import (here `showRow`, `found`, `following`, `rows`, …), re-derived on the
377. // server with the page's route params but the MOUNT's other state — so client state (`collapsed`) must never derive from
378. // them. `me` stays the plain copy mission 047 introduced.
379. me = userId
381. showRow = pageShowOf(slug, me)
382. found = showRow != null
383. notFound = showRow == null
385. // the Follow toggle: "Follow" = the inverted button (accent text on a surface, no border since tracker#32), "Following" = the
386. // filled one (the theme's `primary`)
387. following = found ? showRow.following : false
388. followClass = following ? 'follow primary' : 'follow inverted'
389. followText = following ? 'Following' : 'Follow'
390. signInHref = loginHref
392. // #24: a movie's watched check (same icon/classes as the episodes); the classes written out, not `watchClassOf` (an import of
393. // the mpackdb-backed watches.hl cannot run in the browser when the member is re-derived there)
394. isMovie = found && showRow.type == 'movie'
395. movieWatched = isMovie ? showRow.movieWatched : false
396. movieWatchClass = movieWatched ? 'checkicon solid' : 'checkicon regular'
397. movieWatchText = movieWatched ? 'Watched' : 'Not watched'
398. signInText = isMovie ? 'You need to sign in to follow movies and mark them watched.' : 'You need to sign in to follow shows and mark episodes.'
400. title = found ? showRow.title : ''
401. // tracker#35: the status pill next to a series' title — TVmaze's status, else TMDB's (shows.hl statusOf); none on a movie
402. statusText = found ? showRow.statusText : ''
403. hasStatus = statusText != ''
404. // tracker#33: a movie's release date + runtime (movieFactsOf)
405. factsText = found ? showRow.facts : ''
406. hasFacts = factsText != ''
407. statusClass = found ? 'status-pill status-' + showRow.statusTone : 'status-pill'
408. // tracker#20: "Series | Reacher" — the kind from the slug (pure strings here: they are re-derived in the browser too)
409. slugInfo = slugInfoOf(slug)
410. pageKind = slugInfo.kind
411. typeText = pageKind == 'movie' ? 'Movie' : (pageKind == 'show' ? 'Show' : 'Series')
412. typeClass = 'type-word type-' + pageKind
413. // tracker#18: the creator's own text, else TMDB's, else TVmaze's (pageShowOf → shows.hl summaryOf)
414. summary = found && showRow.summary != null ? showRow.summary : ''
415. poster = found ? showRow.poster : null
416. hasPoster = poster != null
417. posterUrl = hasPoster ? '/posters/' + poster : ''
418. // mission 060 (tracker.worldapi.org#27): the short id under the poster (none yet while the backfill has not reached it)
419. shortId = found ? showRow.shortId : ''
420. hasShortId = shortId != ''
422. genreRows = found ? showRow.genreRows : []
423. hasGenres = genreRows.length > 0
424. // mission 062: cast + crew from the SLUG (`castOfSlug`, `crewOfSlug`), never from `showRow` — a member derived from the session is
425. // re-derived and re-SENT after every watch/follow click (SESSION SYNC above): The Simpsons' 300 names took 0.7 s per click
426. castRows = castOfSlug(slug)
427. hasCast = castRows.length > 0
428. // tracker#28: "Show all (N)" — the toggles' state is CLIENT state: literals, never derived from `showRow` (session sync)
429. castCount = castCountOf(castRows)
430. castMore = castCount > castShown
431. castAllText = 'Show all (' + castCount + ')'
432. castClass = 'collapsed'
433. crewRows = crewOfSlug(slug)
434. hasCrew = crewRows.length > 0
435. crewCount = crewCountOf(crewRows)
436. crewMore = crewHiddenOf(crewRows) > 0
437. crewAllText = 'Show all crew (' + crewCount + ')'
438. crewClass = 'collapsed'
439. linkRows = found ? showRow.linkRows : []
440. franchiseWidgets = found ? franchiseWidgetsOf(showRow) : []
441. hasLinks = linkRows.length > 0
443. // NOT from `showRow`/`found`: they read the session (via `me`), so a member derived from them is re-derived on the server
444. // after every session face with the MOUNT's state — `collapsed` (client state) would snap back to the initial seasons (mission
445. // 056: the 2nd episode click in a re-opened season did nothing). The season ids of a hidden page are no secret.
446. collapsed = slugInfo.collapsed
447. // mission 062: has this page opened/closed a season (client state) — then a watch face sends its own rows (toggleEpisode)
448. collapsedChanged = false
449. rows = found ? rowsOfSlug(slug, me, collapsed) : []
450. hasRows = rows.length > 0
451. watchedEpisodes = found ? watchedEpisodesOfSlug(slug, me) : {}
452. // an adult page (followers only) opens its seasons through the session face `showRows`
453. adultShow = found && showRow.adult == true
454. // tracker#26: incomplete → skeletons + the probe until `showComplete` answered
455. completing = found ? showRow.completing : false
456. // tracker#33: a title TMDB has no poster for (The Remaining) shows the placeholder in the poster's place — the column was empty
457. // but for the short id, the page looked unfinished; while an incomplete title loads, the skeleton instead
458. posterLoading = completing && !hasPoster
459. noPoster = !hasPoster && !completing
460. completeBusy = false
461. isSeries = found && showRow.type != 'movie'
462. skeletonSeasons = ['1', '2', '3']
464. __title = found ? title + ' — ' + appTitle : appTitle
466. View {
467. showPage {
468. if (notFound) {
469. article { class = "main"
470. h1 { "Not found" }
471. p { "This show doesn't exist." }
472. }
473. }
474. if (found) {
475. showHeader {
476. showPoster {
477. if (hasPoster) { img { src = posterUrl alt = title } }
478. if (noPoster) { img { class = "no-poster" src = "/posters/none" alt = "no poster" } }
479. if (posterLoading) { skeletonPoster { "aria-hidden" = "true" } }
480. // tracker#34: Follow directly under the poster, as wide as the poster (creator: "the follow button should go below
481. // the picture … and expand to the size o the poster")
482. button { id = "follow" type = "button" class = followClass followText on click(e) { emit toggleFollow(e) } }
483. if (hasShortId) { shortIdLabel { id = "shortid" title = "Short id" shortId } }
484. }
485. showMeta {
486. showTitle {
487. h1 { class = "typed" typeWord { class = typeClass typeText } typeSep { "|" } typeName { title } }
488. if (hasStatus) { statusPill { class = statusClass statusText } }
489. if (hasFacts) { showFacts { id = "moviefacts" factsText } }
490. }
491. if (isMovie) {
492. movieWatch {
493. button { id = "moviewatch" type = "button" class = movieWatchClass "aria-label" = "mark movie watched"
494. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
495. circle { cx = "12" cy = "12" r = "10" }
496. path { d = "M7 12.5 L10.5 16 L17 8.5" }
497. }
498. on click(e) { emit toggleMovie(e) }
499. }
500. movieWatchLabel { movieWatchText }
501. }
502. }
503. if (hasLinks) {
504. showLinks {
505. for (l of linkRows) { a { class = "extlink" href = l.href target = "_blank" rel = "noopener" title = l.title "aria-label" = l.title "data-site" = l.site l.label } }
506. }
507. }
508. // mission 025: the franchise widget right under the title/poster block — on a phone (showMeta dissolves, see styles.hl)
509. // after the poster and before the genres, plot and cast; from 40rem in the right column under the title
510. FranchiseWidget { widgets = franchiseWidgets }
511. if (hasGenres) {
512. showGenres {
513. for (g of genreRows) { a { class = "genre-pill" href = g.href g.name } }
514. }
515. }
516. showSummary { summary }
517. if (hasCrew) {
518. showCrew { class = crewClass
519. for (r of crewRows) {
520. if (r.isLabel) { crewLabel { r.text } }
521. if (r.isPerson) { a { class = r.itemClass href = r.href r.name } }
522. }
523. if (crewMore) {
524. button { id = "crewtoggle" type = "button" class = "quiet showall"
525. whenCollapsed { crewAllText }
526. whenAll { "Show less" }
527. on click(e) { emit toggleCrewAll(e) }
528. }
529. }
530. }
531. }
532. if (hasCast) {
533. showCast { class = castClass
534. castHeading { "Cast" }
535. for (c of castRows) {
536. if (c.isLabel) { castLabel { class = c.itemClass c.text } }
537. if (c.isPerson) { a { class = c.itemClass href = c.href "data-role" = c.roleText c.name } }
538. }
539. if (castMore) {
540. button { id = "casttoggle" type = "button" class = "quiet showall"
541. whenCollapsed { castAllText }
542. whenAll { "Show less" }
543. on click(e) { emit toggleCastAll(e) }
544. }
545. }
546. }
547. }
548. if (completing) { skeletonCast { "aria-hidden" = "true" } }
549. }
550. }
551. if (completing) {
552. showLoading { id = "showloading" "aria-busy" = "true"
553. if (isSeries) {
554. for (k of skeletonSeasons) {
555. skeletonRow { "aria-hidden" = "true"
556. skeletonCheck { }
557. skeletonTitle { }
558. }
559. }
560. }
561. showProbe { "aria-hidden" = "true" on animationiteration(e) { emit completeTick(e) } }
562. }
563. }
564. if (hasRows) {
565. showSeasons {
566. for (row of rows) {
567. if (row.isSeason) {
568. seasonRow { class = row.rowClass
569. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark season watched"
570. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
571. circle { cx = "12" cy = "12" r = "10" }
572. path { d = "M7 12.5 L10.5 16 L17 8.5" }
573. }
574. on click(e) { emit toggleSeason(row.id) }
575. }
576. button { type = "button" class = "season-toggle" value = row.id
577. seasonLabel { row.label }
578. seasonCount { row.episodeCountText }
579. seasonCaret { "aria-hidden" = "true"
580. svg { viewBox = "0 0 24 24" width = "20" height = "20"
581. path { d = "M6 9 L12 15 L18 9" }
582. }
583. }
584. on click(e) { emit toggleCollapse(row.id) }
585. }
586. }
587. }
588. if (row.isEpisode) {
589. episodeRow {
590. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark episode watched"
591. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
592. circle { cx = "12" cy = "12" r = "10" }
593. path { d = "M7 12.5 L10.5 16 L17 8.5" }
594. }
595. on click(e) { emit toggleEpisode(row.id) }
596. }
597. episodeNumber { row.episodeNumber }
598. episodeTitle { row.title }
599. episodeDate { row.airDate }
600. }
601. }
602. if (row.isSkeleton) {
603. skeletonRow { "aria-hidden" = "true"
604. skeletonCheck { }
605. skeletonNumber { }
606. skeletonTitle { }
607. }
608. }
609. }
610. }
611. }
612. Modal { id = "signin" title = "Sign in"
613. p { signInText }
614. footer {
615. button { type = "button" value = "close" "Close" }
616. a { id = "signin-link" class = "button primary" href = signInHref "Sign in with ident" }
617. }
618. }
619. }
620. }
621. }
623. // Every rebuild of `rows` happens SERVER-SIDE, never by calling `buildRows` from a client handler:
624. // a member function whose body reaches an hl:mpackdb-backed import (seasonsOfShow, episodesOfSeason,
625. // watchesOfUser, …) compiles to nothing on the client (no case ever assigns it — a genuine Hybriel
626. // gap, filed under `issues`) even though the client bundle still calls it, so `this.buildRows(...)`
627. // throws "not a function" in the browser. The client here only ever ASSIGNS the `rows` the server
628. // already built (`rows = r.rows`) — never calls a tainted local helper itself. `slug` goes along so
629. // the face can refetch the show without depending on implicit access to a sibling member.
630. //
631. // tracker#17: opening shows the skeleton rows BEFORE the request; the answer replaces them unless the season was closed
632. // meanwhile (then nothing). An error closes the season again. Closing never asks the server.
633. on toggleCollapse(seasonId) {
634. collapsedChanged = true
635. m = collapsed
636. if (collapsed[seasonId] != true) {
637. m[seasonId] = true
638. collapsed = m
639. rows = closedRows(rows, seasonId)
640. return null
641. }
642. m[seasonId] = false
643. collapsed = m
644. rows = openingRows(rows, seasonId)
645. if (adultShow) {
646. let a = emit server showRows(slug, collapsed)
647. if (collapsed[seasonId] == true) { return null }
648. if (a == null || a.error != null) { m[seasonId] = true collapsed = m rows = closedRows(rows, seasonId) return null }
649. rows = a.rows
650. return null
651. }
652. let r = emit server showSeasonEpisodes('' + seasonId)
653. if (collapsed[seasonId] == true) { return null }
654. if (r == null || r.error != null) { m[seasonId] = true collapsed = m rows = closedRows(rows, seasonId) return null }
655. rows = filledRows(rows, seasonId, r.episodes, watchedEpisodes)
656. }
658. // tracker#26: the probe's tick — `showComplete` step by step until `done` (once per page: `completeBusy`; other requests are
659. // served between two calls); the last answer replaces the skeletons. A lost answer (null) lets the next tick go on where the
660. // server is; an error (TMDB down, adult) ends the loading and keeps what the page has.
661. on completeTick(e) {
662. if (completeBusy || !completing) { return null }
663. completeBusy = true
664. s = slug
665. let r = emit server showComplete(s)
666. while (r != null && r.error == null && r.done != true && slug == s) { r = emit server showComplete(s) }
667. completeBusy = false
668. if (r == null || slug != s) { return null }
669. if (r.error != null) { completing = false return null }
670. title = r.title
671. summary = r.summary
672. poster = r.poster
673. genreRows = r.genreRows
674. castRows = r.castRows
675. castCount = r.castCount
676. castMore = r.castMore
677. castAllText = 'Show all (' + r.castCount + ')'
678. crewRows = r.crewRows
679. crewCount = r.crewCount
680. crewMore = r.crewMore
681. crewAllText = 'Show all crew (' + r.crewCount + ')'
682. linkRows = r.linkRows
683. collapsed = r.collapsed
684. collapsedChanged = true
685. rows = r.rows
686. completing = false
687. }
689. // tracker#28: the cast / crew "Show all" toggles — client-only, no request (CSS shows the hidden names)
690. on toggleCastAll(e) {
691. castClass = castClass == 'all' ? 'collapsed' : 'all'
692. }
693. on toggleCrewAll(e) {
694. crewClass = crewClass == 'all' ? 'collapsed' : 'all'
695. }
697. // signed out: the modal, nothing is sent
698. // mission 062: the new `rows` come with the SAME ack as the session sync (SESSION SYNC above: `rows` derives from the session) —
699. // but that sync is built with the MOUNT's open seasons. So the face sends its own rows only once this page opened/closed a season
700. // (`collapsedChanged`, or a completed title); else they came twice (a second buildRows + 14 kB on The Simpsons: ~40 ms per click)
701. on toggleEpisode(episodeId) {
702. if (!signedIn) { document.getElementById('signin').showModal() return null }
703. let r = emit server showToggleEpisode(slug, '' + episodeId, collapsed, collapsedChanged)
704. if (r == null || r.error != null) { return null }
705. if (r.rows != null) { rows = r.rows }
706. }
708. on toggleSeason(seasonId) {
709. if (!signedIn) { document.getElementById('signin').showModal() return null }
710. let r = emit server showToggleSeason(slug, '' + seasonId, collapsed, collapsedChanged)
711. if (r == null || r.error != null) { return null }
712. if (r.rows != null) { rows = r.rows }
713. }
715. // #24: the movie's own check — signed out the modal, nothing sent
716. on toggleMovie(e) {
717. if (!signedIn) { document.getElementById('signin').showModal() return null }
718. let r = emit server showToggleMovie(slug)
719. if (r == null || r.error != null) { return null }
720. movieWatched = r.watched
721. movieWatchClass = r.watched ? 'checkicon solid' : 'checkicon regular'
722. movieWatchText = r.watched ? 'Watched' : 'Not watched'
723. }
725. on toggleFollow(e) {
726. if (!signedIn) { document.getElementById('signin').showModal() return null }
727. let r = emit server showToggleFollow(slug)
728. if (r == null || r.error != null) { return null }
729. following = r.following
730. followClass = r.following ? 'follow primary' : 'follow inverted'
731. followText = r.following ? 'Following' : 'Follow'
732. }
734. // ---- the faces (the trailing `session` is always the server's: hybriel#16) ----
735. // tracker#26: complete an incomplete title and answer the page's parts — public data, NO session (no page re-mount)
736. on server showComplete(slug) {
737. return completedPageOf(slug != null ? '' + slug : '')
738. }
740. // every row for these open/closed seasons — only an ADULT show's page still uses it (its followers; tracker#17)
741. on server showRows(slug, collapsed, session) {
742. show = showBySlug(slug)
743. uid = userIdOfSession(session)
744. if (show == null || adultHiddenFor(show, uid)) { return { error = 'no such show' } }
745. return { ok = true rows = buildRows(show, uid, collapsed) }
746. }
748. // tracker#17: one season's episodes, in order — public data, so NO `session` (no page re-mount, no sync: the fast path).
749. // Refuses a season of an adult title (those pages use showRows above).
750. on server showSeasonEpisodes(seasonId) {
751. if (seasonId == null || hlTypeName(seasonId) != 'String') { return { error = 'no such season' } }
752. season = seasonById(seasonId)
753. if (season == null) { return { error = 'no such season' } }
754. show = showById(season.show)
755. if (show == null || show.adult == true) { return { error = 'no such season' } }
756. out = []
757. for (e of episodesOfSeason(season)) { out.push({ id = e.id episodeNumber = e.episodeNumber title = e.title != null ? e.title : '' airDate = airDateOf(e) }) }
758. return { ok = true episodes = out }
759. }
761. on server showToggleEpisode(slug, episodeId, collapsed, withRows, session) {
762. show = showBySlug(slug)
763. if (show == null) { return { error = 'no such show' } }
764. uid = userIdOfSession(session)
765. if (uid == null) { return { error = 'you are not signed in' } }
766. if (adultHiddenFor(show, uid)) { return { error = 'no such show' } }
767. if (toggleWatched(uid, 'episode', episodeId) == null) { return { error = 'could not save the watch' } }
768. return withRows == true ? { ok = true rows = buildRows(show, uid, collapsed) } : { ok = true }
769. }
771. on server showToggleSeason(slug, seasonId, collapsed, withRows, session) {
772. show = showBySlug(slug)
773. if (show == null) { return { error = 'no such show' } }
774. uid = userIdOfSession(session)
775. if (uid == null) { return { error = 'you are not signed in' } }
776. if (adultHiddenFor(show, uid)) { return { error = 'no such show' } }
777. season = seasonById(seasonId)
778. if (season == null) { return { error = 'no such season' } }
779. // #23: not all episodes watched → watch them all; all watched → unwatch them all (lib/watches.hl)
780. if (toggleSeasonWatched(uid, season) == null) { return { error = 'could not save the watch' } }
781. return withRows == true ? { ok = true rows = buildRows(show, uid, collapsed) } : { ok = true }
782. }
784. // #24: a movie's watched check (only a movie: a series is watched by its episodes)
785. on server showToggleMovie(slug, session) {
786. show = showBySlug(slug)
787. if (show == null || show.type != 'movie') { return { error = 'no such movie' } }
788. uid = userIdOfSession(session)
789. if (uid == null) { return { error = 'you are not signed in' } }
790. if (adultHiddenFor(show, uid)) { return { error = 'no such movie' } }
791. watched = toggleWatched(uid, 'movie', show.id)
792. if (watched == null) { return { error = 'could not save the watch' } }
793. return { ok = true watched = watched }
794. }
796. on server showToggleFollow(slug, session) {
797. show = showBySlug(slug)
798. if (show == null) { return { error = 'no such show' } }
799. uid = userIdOfSession(session)
800. if (uid == null) { return { error = 'you are not signed in' } }
801. follow = toggleFollowed(uid, show.id)
802. if (follow == null) { return { error = 'could not save the follow' } }
803. return { ok = true following = follow }
804. }