tracker

21.0 KB

1. // components/show.hl — `/shows/:slug` (tracker.worldapi.org#4): a show's own page. Creator's words:
2. // "the poster on the left, right of it the title of the show, the genre pills, below the plot summary,
3. // below that the artists just as normal links, separated with comma color red, genres are blue" (the
4. // header) — "then all seasons in reverse order, latest on top, below them collapsable their episodes,
5. // episodes first the round check icon, if the episode was watched by the user looking its solid, if
6. // not its regular, then the episode number, then the title. the last season is not collapsed. click on
7. // the check adds a watch. the season also has a check, if the season is checked or unchecked all its
8. // episodes get checked or unchecked. artists link to /person/<artist-slug> the genre to /genre/<genre-slug>."
9. //
10. // THE ROWS ARE ONE FLAT LIST, not a nested for-loop over seasons > episodes: the vendored build may
11. // still lack the fix for hybriel#86 (a nested for over a reassigned outer list keeps stale inner
12. // cells) — a single-level `for (row of rows)` with a `kind` field, reassigned whole on every click,
13. // is the same proven-safe shape components/main.hl's own header and ident's inbox.hl already use.
14. // `rows` is rebuilt from scratch (seasons/episodes refetched by id, watch rows refetched) on every
15. // toggle — cheap: a show has at most a few dozen episodes per season.
16. //
17. // Mission 047 (the creator, 2026-10-01): a caret at the season header's right edge (down = open, right = collapsed); episode
18. // rows not indented; on a phone the title first, then the poster at full width, then genres/plot/cast; a Follow toggle
19. // next to the title. SIGNED OUT the checks and Follow are visible too: a click opens the "sign in" modal (modal.hl, copied
20. // from components.hybriel) and writes nothing.
21. //
22. // tracker.worldapi.org#17 (mission 057): the caret points DOWN while a season is closed and UP while it is open. Opening a
23. // season shows SKELETON rows at once (min(episodes, 8), a CSS shimmer, styles.hl) and then its episodes from the face
24. // `showSeasonEpisodes`, which takes NO session: a face with `session` makes hl:web re-mount the whole page on the server and
25. // ship every session-derived member back as a `sync` (WebFramework.hl `inbound`) — that, not the episodes, was most of the
26. // old 250–450 ms (real data). The watched state comes from `watchedEpisodes` (this show's watched episodes per season, rendered
27. // with the page and re-synced after every watch face). Closing is client-only (no request). An ADULT show (only its
28. // followers see it) keeps the session face `showRows`: the public face refuses adult seasons.
29. //
30. // tracker.worldapi.org#12: link icons under the title — the show on TMDB, IMDb, TheTVDB, TVmaze (a movie: TMDB + IMDb),
31. // only for the ids it has (shows.hl externalLinksOf), each in a new tab.
32. parent './main.hl'
33. import Modal from './modal.hl'
34. import { appTitle } from '../project.hl'
35. import { userIdOfSession, loginHref } from '../users.hl'
36. import { isFollowing, setFollowed } from '../follows.hl'
37. import { showBySlug, showById, genreById, personById, seasonsOfShow, episodesOfSeason, seasonById, posterName, externalLinksOf } from '../shows.hl'
38. import { watchesOfUser, isWatched, watchedSet, setWatched, setSeasonWatched, watchClassOf } from '../watches.hl'
40. // ---- pure helpers ----------------------------------------------------------------------------
41. // `static`, like calendar.hl's `soonOf` — a PLAIN instance member function that calls an
42. // hl:mpackdb-backed import (seasonsOfShow, episodesOfSeason, watchesOfUser, …) comes back null
43. // when called from an `on server` face (confirmed by running the gate: "'buildRows' is not
44. // callable — it holds null" at the face's call site, even though the SAME call works fine as a
45. // member's own initializer at the top of this file). `static` is the proven-safe shape (calendar's
46. // `soonOf`, called from `calLoad`/`calSettingsLoad`, an mpackdb-backed helper exactly like this one).
47. static initialCollapsed = (seasons) => {
48. let m = {}
49. let i = 0
50. while (i < seasons.length) {
51. if (i > 0) { m[seasons[i].id] = true }
52. i = i + 1
53. }
54. return m
55. }
56. static genreRowsOf = (show) => {
57. let out = []
58. for (gid of show.genres) {
59. let g = genreById(gid)
60. if (g != null) { out.push({ id = g.id name = g.name href = '/genre/' + g.urlSegment }) }
61. }
62. return out
63. }
64. static castRowsOf = (show) => {
65. let out = []
66. for (c of show.cast) {
67. let p = personById(c.person)
68. if (p != null) { out.push({ name = c.actor href = '/person/' + p.urlSegment }) }
69. }
70. return out
71. }
72. // a View attribute must be a literal, a member or a field path — never an inline expression — so
73. // every ternary (watched -> icon class, collapsed -> row class) is resolved HERE, once, into a
74. // plain field the View just reads (row.watchClass, row.rowClass); `watchClassOf` itself lives in
75. // watches.hl (shared with /unwatched and /schedule, "reuse, don't copy")
76. static buildRows = (show, uid, collapsed) => {
77. let watched = watchedSet(uid != null ? watchesOfUser(uid) : [])
78. let out = []
79. for (s of seasonsOfShow(show)) {
80. let isCollapsed = collapsed[s.id] == true
81. let label = s.title != null && s.title != '' ? s.title : 'Season ' + s.seasonNumber
82. let seasonWatched = watched['season:' + s.id] == true
83. 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' })
84. if (!isCollapsed) {
85. for (e of episodesOfSeason(s)) {
86. let epWatched = watched['episode:' + e.id] == true
87. 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 : '' watched = epWatched watchClass = watchClassOf(epWatched) })
88. }
89. }
90. }
91. return out
92. }
94. // what the client marks the rows of a season it opens with (tracker#17) — only this show's, never the user's whole watch
95. // list (every member is shipped to the browser). Per season with a watched episode: `{ all, except }` — `all` = most of
96. // it is watched, then `except` holds the UNwatched ids, else the watched ones (a fully watched 142-episode season is
97. // `{ all = true except = {} }`, not 142 ids). No entry = nothing watched.
98. static watchedEpisodesOf = (show, uid) => {
99. let m = {}
100. if (uid == null) { return m }
101. let watched = watchedSet(watchesOfUser(uid))
102. for (s of seasonsOfShow(show)) {
103. let yes = {}
104. let no = {}
105. let n = 0
106. for (eid of s.episodes) {
107. if (watched['episode:' + eid] == true) { yes[eid] = true n = n + 1 } else { no[eid] = true }
108. }
109. if (n > 0) { m[s.id] = n * 2 > s.episodes.length ? { all = true except = no } : { all = false except = yes } }
110. }
111. return m
112. }
113. // is this episode watched, by that per-season shape (client-side, pure)
114. static watchedIn = (entry, episodeId) => {
115. if (entry == null) { return false }
116. let listed = entry.except[episodeId] == true
117. return entry.all ? !listed : listed
118. }
120. // ---- the rows as the CLIENT changes them (tracker#17) — pure: no import is reached, so they run in the browser ----------
121. // (`watchClassOf` is an import of the mpackdb-backed watches.hl, so `filledRows` writes its two classes itself)
122. static seasonRowAs = (row, isCollapsed) => {
123. 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' }
124. }
125. // the season opened: its caret up at once, `skeletonCount` placeholder rows under it
126. static openingRows = (rows, seasonId) => {
127. let out = []
128. for (row of rows) {
129. if (row.isSeason && row.id == seasonId) {
130. out.push(seasonRowAs(row, false))
131. let i = 0
132. while (i < row.skeletonCount) {
133. out.push({ kind = 'skeleton' isSeason = false isEpisode = false isSkeleton = true id = seasonId + '-skeleton-' + i seasonId = seasonId })
134. i = i + 1
135. }
136. } else { out.push(row) }
137. }
138. return out
139. }
140. // the season closed: its episode (and skeleton) rows gone, caret down
141. static closedRows = (rows, seasonId) => {
142. let out = []
143. for (row of rows) {
144. if (row.isSeason && row.id == seasonId) { out.push(seasonRowAs(row, true)) }
145. else if (!row.isSeason && row.seasonId == seasonId) { }
146. else { out.push(row) }
147. }
148. return out
149. }
150. // the episodes arrived: they replace the season's skeleton rows. No skeleton of it left (closed meanwhile, or a watch face
151. // already rebuilt every row) → the rows stay as they are (no double rows)
152. static filledRows = (rows, seasonId, episodes, watched) => {
153. let out = []
154. let done = false
155. for (row of rows) {
156. if (row.isSkeleton && row.seasonId == seasonId) {
157. if (!done) {
158. for (e of episodes) {
159. let w = watchedIn(watched[seasonId], e.id)
160. out.push({ kind = 'episode' isSeason = false isEpisode = true isSkeleton = false id = e.id seasonId = seasonId episodeNumber = e.episodeNumber title = e.title watched = w watchClass = w ? 'checkicon solid' : 'checkicon regular' })
161. }
162. done = true
163. }
164. } else { out.push(row) }
165. }
166. return out
167. }
169. // a LOCAL static like buildRows (an imported mpackdb helper called straight from a member's initializer came back false
170. // after a client-side navigation to the page — the gate's follow check)
171. static followingOf = (show, uid) => { return uid != null && isFollowing(uid, show.id) }
172. // mission 056: an ADULT title's page (TMDB's flag `adult == true`, mission 054) is "Not found" for everyone who does not
173. // follow it (signed out too); a follower sees it as before. Unknown (`null`) is not hidden here — only in the lists.
174. // With hybriel ≥ 73267707 (#121/#122) `showRow`/`found` are server sites re-derived after every session face with the page's
175. // 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).
176. // Mission 054's try (`found = … && !adultHiddenFor(showRow, me)`, `collapsed`/`rows` from `found`) broke the checks.
177. static adultHiddenFor = (show, uid) => { return show.adult == true && !followingOf(show, uid) }
178. // 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
179. // row of a hidden title must never be one
180. static visibleShow = (slug, uid) => {
181. let s = showBySlug(slug)
182. return s != null && adultHiddenFor(s, uid) ? null : s
183. }
184. // the initial open/closed seasons from the SLUG alone (not from `showRow`, which reads the session — see `collapsed`)
185. static initialCollapsedOf = (slug) => {
186. let s = showBySlug(slug)
187. return s != null ? initialCollapsed(seasonsOfShow(s)) : {}
188. }
190. // ---- reactive members -----------------------------------------------------------------------
191. slug = null
192. session = null
193. userId = userIdOfSession(session)
194. signedIn = userId != null
195. // SESSION SYNC (mission 047; since hybriel #121/#122, mission 056): a face taking `session` answers with a `sync` of every
196. // member derived from session that reaches an import (here `showRow`, `found`, `following`, `rows`, …), re-derived on the
197. // server with the page's route params but the MOUNT's other state — so client state (`collapsed`) must never derive from
198. // them. `me` stays the plain copy mission 047 introduced.
199. me = userId
201. showRow = visibleShow(slug, me)
202. found = showRow != null
203. notFound = showRow == null
205. // the Follow toggle: "Follow" = the inverted button (accent border), "Following" = the filled one
206. following = found ? followingOf(showRow, me) : false
207. followClass = following ? 'follow' : 'follow inverted'
208. followText = following ? 'Following' : 'Follow'
209. signInHref = loginHref
211. title = found ? showRow.title : ''
212. summary = found && showRow.summary != null ? showRow.summary : ''
213. poster = found ? posterName(showRow) : null
214. hasPoster = poster != null
215. posterUrl = hasPoster ? '/posters/' + poster : ''
217. genreRows = found ? genreRowsOf(showRow) : []
218. hasGenres = genreRows.length > 0
219. castRows = found ? castRowsOf(showRow) : []
220. hasCast = castRows.length > 0
221. linkRows = found ? externalLinksOf(showRow) : []
222. hasLinks = linkRows.length > 0
224. // NOT from `showRow`/`found`: they read the session (via `me`), so a member derived from them is re-derived on the server
225. // after every session face with the MOUNT's state — `collapsed` (client state) would snap back to the initial seasons (mission
226. // 056: the 2nd episode click in a re-opened season did nothing). The season ids of a hidden page are no secret.
227. collapsed = initialCollapsedOf(slug)
228. rows = found ? buildRows(showRow, me, collapsed) : []
229. hasRows = rows.length > 0
230. watchedEpisodes = found ? watchedEpisodesOf(showRow, me) : {}
231. // an adult page (followers only) opens its seasons through the session face `showRows`
232. adultShow = found && showRow.adult == true
234. __title = found ? title + ' — ' + appTitle : appTitle
236. View {
237. showPage {
238. if (notFound) {
239. article { class = "main"
240. h1 { "Not found" }
241. p { "This show doesn't exist." }
242. }
243. }
244. if (found) {
245. showHeader {
246. showPoster { if (hasPoster) { img { src = posterUrl alt = title } } }
247. showMeta {
248. showTitle {
249. h1 { title }
250. button { id = "follow" type = "button" class = followClass followText on click(e) { emit toggleFollow(e) } }
251. }
252. if (hasLinks) {
253. showLinks {
254. 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 } }
255. }
256. }
257. if (hasGenres) {
258. showGenres {
259. for (g of genreRows) { a { class = "genre-pill" href = g.href g.name } }
260. }
261. }
262. showSummary { summary }
263. if (hasCast) {
264. showCast {
265. for (c of castRows) { a { class = "artist-link" href = c.href c.name } }
266. }
267. }
268. }
269. }
270. if (hasRows) {
271. showSeasons {
272. for (row of rows) {
273. if (row.isSeason) {
274. seasonRow { class = row.rowClass
275. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark season watched"
276. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
277. circle { cx = "12" cy = "12" r = "10" }
278. path { d = "M7 12.5 L10.5 16 L17 8.5" }
279. }
280. on click(e) { emit toggleSeason(row.id) }
281. }
282. button { type = "button" class = "season-toggle" value = row.id
283. seasonLabel { row.label }
284. seasonCount { row.episodeCountText }
285. seasonCaret { "aria-hidden" = "true"
286. svg { viewBox = "0 0 24 24" width = "20" height = "20"
287. path { d = "M6 9 L12 15 L18 9" }
288. }
289. }
290. on click(e) { emit toggleCollapse(row.id) }
291. }
292. }
293. }
294. if (row.isEpisode) {
295. episodeRow {
296. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark episode watched"
297. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
298. circle { cx = "12" cy = "12" r = "10" }
299. path { d = "M7 12.5 L10.5 16 L17 8.5" }
300. }
301. on click(e) { emit toggleEpisode(row.id) }
302. }
303. episodeNumber { row.episodeNumber }
304. episodeTitle { row.title }
305. }
306. }
307. if (row.isSkeleton) {
308. skeletonRow { "aria-hidden" = "true"
309. skeletonCheck { }
310. skeletonNumber { }
311. skeletonTitle { }
312. }
313. }
314. }
315. }
316. }
317. Modal { id = "signin" title = "Sign in"
318. p { "You need to sign in to follow shows and mark episodes." }
319. footer {
320. button { type = "button" value = "close" "Close" }
321. a { id = "signin-link" class = "button" href = signInHref "Sign in with ident" }
322. }
323. }
324. }
325. }
326. }
328. // Every rebuild of `rows` happens SERVER-SIDE, never by calling `buildRows` from a client handler:
329. // a member function whose body reaches an hl:mpackdb-backed import (seasonsOfShow, episodesOfSeason,
330. // watchesOfUser, …) compiles to nothing on the client (no case ever assigns it — a genuine Hybriel
331. // gap, filed under `issues`) even though the client bundle still calls it, so `this.buildRows(...)`
332. // throws "not a function" in the browser. The client here only ever ASSIGNS the `rows` the server
333. // already built (`rows = r.rows`) — never calls a tainted local helper itself. `slug` goes along so
334. // the face can refetch the show without depending on implicit access to a sibling member.
335. //
336. // tracker#17: opening shows the skeleton rows BEFORE the request; the answer replaces them unless the season was closed
337. // meanwhile (then nothing). An error closes the season again. Closing never asks the server.
338. on toggleCollapse(seasonId) {
339. let m = collapsed
340. if (collapsed[seasonId] != true) {
341. m[seasonId] = true
342. collapsed = m
343. rows = closedRows(rows, seasonId)
344. return null
345. }
346. m[seasonId] = false
347. collapsed = m
348. rows = openingRows(rows, seasonId)
349. if (adultShow) {
350. let a = emit server showRows(slug, collapsed)
351. if (collapsed[seasonId] == true) { return null }
352. if (a == null || a.error != null) { m[seasonId] = true collapsed = m rows = closedRows(rows, seasonId) return null }
353. rows = a.rows
354. return null
355. }
356. let r = emit server showSeasonEpisodes('' + seasonId)
357. if (collapsed[seasonId] == true) { return null }
358. if (r == null || r.error != null) { m[seasonId] = true collapsed = m rows = closedRows(rows, seasonId) return null }
359. rows = filledRows(rows, seasonId, r.episodes, watchedEpisodes)
360. }
362. // signed out: the modal, nothing is sent
363. on toggleEpisode(episodeId) {
364. if (!signedIn) { document.getElementById('signin').showModal() return null }
365. let r = emit server showToggleEpisode(slug, '' + episodeId, collapsed)
366. if (r == null || r.error != null) { return null }
367. rows = r.rows
368. }
370. on toggleSeason(seasonId) {
371. if (!signedIn) { document.getElementById('signin').showModal() return null }
372. let r = emit server showToggleSeason(slug, '' + seasonId, collapsed)
373. if (r == null || r.error != null) { return null }
374. rows = r.rows
375. }
377. on toggleFollow(e) {
378. if (!signedIn) { document.getElementById('signin').showModal() return null }
379. let r = emit server showToggleFollow(slug)
380. if (r == null || r.error != null) { return null }
381. following = r.following
382. followClass = r.following ? 'follow' : 'follow inverted'
383. followText = r.following ? 'Following' : 'Follow'
384. }
386. // ---- the faces (the trailing `session` is always the server's: hybriel#16) ----
387. // every row for these open/closed seasons — only an ADULT show's page still uses it (its followers; tracker#17)
388. on server showRows(slug, collapsed, session) {
389. let show = showBySlug(slug)
390. let uid = userIdOfSession(session)
391. if (show == null || adultHiddenFor(show, uid)) { return { error = 'no such show' } }
392. return { ok = true rows = buildRows(show, uid, collapsed) }
393. }
395. // tracker#17: one season's episodes, in order — public data, so NO `session` (no page re-mount, no sync: the fast path).
396. // Refuses a season of an adult title (those pages use showRows above).
397. on server showSeasonEpisodes(seasonId) {
398. if (seasonId == null || hlTypeName(seasonId) != 'String') { return { error = 'no such season' } }
399. let season = seasonById(seasonId)
400. if (season == null) { return { error = 'no such season' } }
401. let show = showById(season.show)
402. if (show == null || show.adult == true) { return { error = 'no such season' } }
403. let out = []
404. for (e of episodesOfSeason(season)) { out.push({ id = e.id episodeNumber = e.episodeNumber title = e.title != null ? e.title : '' }) }
405. return { ok = true episodes = out }
406. }
408. on server showToggleEpisode(slug, episodeId, collapsed, session) {
409. let show = showBySlug(slug)
410. if (show == null) { return { error = 'no such show' } }
411. let uid = userIdOfSession(session)
412. if (uid == null) { return { error = 'you are not signed in' } }
413. if (adultHiddenFor(show, uid)) { return { error = 'no such show' } }
414. let rows = watchesOfUser(uid)
415. let watched = isWatched(rows, 'episode', episodeId) == false
416. let ok = setWatched(uid, 'episode', episodeId, rows, watched)
417. if (!ok) { return { error = 'could not save the watch' } }
418. return { ok = true rows = buildRows(show, uid, collapsed) }
419. }
421. on server showToggleSeason(slug, seasonId, collapsed, session) {
422. let show = showBySlug(slug)
423. if (show == null) { return { error = 'no such show' } }
424. let uid = userIdOfSession(session)
425. if (uid == null) { return { error = 'you are not signed in' } }
426. if (adultHiddenFor(show, uid)) { return { error = 'no such show' } }
427. let season = seasonById(seasonId)
428. if (season == null) { return { error = 'no such season' } }
429. let rows = watchesOfUser(uid)
430. let watched = isWatched(rows, 'season', seasonId) == false
431. let ok = setSeasonWatched(uid, seasonId, season.episodes, rows, watched)
432. if (!ok) { return { error = 'could not save the watch' } }
433. return { ok = true rows = buildRows(show, uid, collapsed) }
434. }
436. on server showToggleFollow(slug, session) {
437. let show = showBySlug(slug)
438. if (show == null) { return { error = 'no such show' } }
439. let uid = userIdOfSession(session)
440. if (uid == null) { return { error = 'you are not signed in' } }
441. let follow = isFollowing(uid, show.id) == false
442. if (!setFollowed(uid, show.id, follow)) { return { error = 'could not save the follow' } }
443. return { ok = true following = follow }
444. }