tracker

14.9 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#12: link icons under the title — the show on TMDB, IMDb, TheTVDB, TVmaze (a movie: TMDB + IMDb),
23. // only for the ids it has (shows.hl externalLinksOf), each in a new tab.
24. parent './main.hl'
25. import Modal from './modal.hl'
26. import { appTitle } from '../project.hl'
27. import { userIdOfSession, loginHref } from '../users.hl'
28. import { isFollowing, setFollowed } from '../follows.hl'
29. import { showBySlug, genreById, personById, seasonsOfShow, episodesOfSeason, seasonById, posterName, externalLinksOf } from '../shows.hl'
30. import { watchesOfUser, isWatched, watchedSet, setWatched, setSeasonWatched, watchClassOf } from '../watches.hl'
32. // ---- pure helpers ----------------------------------------------------------------------------
33. // `static`, like calendar.hl's `soonOf` — a PLAIN instance member function that calls an
34. // hl:mpackdb-backed import (seasonsOfShow, episodesOfSeason, watchesOfUser, …) comes back null
35. // when called from an `on server` face (confirmed by running the gate: "'buildRows' is not
36. // callable — it holds null" at the face's call site, even though the SAME call works fine as a
37. // member's own initializer at the top of this file). `static` is the proven-safe shape (calendar's
38. // `soonOf`, called from `calLoad`/`calSettingsLoad`, an mpackdb-backed helper exactly like this one).
39. static initialCollapsed = (seasons) => {
40. let m = {}
41. let i = 0
42. while (i < seasons.length) {
43. if (i > 0) { m[seasons[i].id] = true }
44. i = i + 1
45. }
46. return m
47. }
48. static genreRowsOf = (show) => {
49. let out = []
50. for (gid of show.genres) {
51. let g = genreById(gid)
52. if (g != null) { out.push({ id = g.id name = g.name href = '/genre/' + g.urlSegment }) }
53. }
54. return out
55. }
56. static castRowsOf = (show) => {
57. let out = []
58. for (c of show.cast) {
59. let p = personById(c.person)
60. if (p != null) { out.push({ name = c.actor href = '/person/' + p.urlSegment }) }
61. }
62. return out
63. }
64. // a View attribute must be a literal, a member or a field path — never an inline expression — so
65. // every ternary (watched -> icon class, collapsed -> row class) is resolved HERE, once, into a
66. // plain field the View just reads (row.watchClass, row.rowClass); `watchClassOf` itself lives in
67. // watches.hl (shared with /unwatched and /schedule, "reuse, don't copy")
68. static buildRows = (show, uid, collapsed) => {
69. let watched = watchedSet(uid != null ? watchesOfUser(uid) : [])
70. let out = []
71. for (s of seasonsOfShow(show)) {
72. let isCollapsed = collapsed[s.id] == true
73. let label = s.title != null && s.title != '' ? s.title : 'Season ' + s.seasonNumber
74. let seasonWatched = watched['season:' + s.id] == true
75. out.push({ kind = 'season' isSeason = true isEpisode = false id = s.id label = label episodeCountText = s.episodes.length == 1 ? '1 episode' : s.episodes.length + ' episodes' watched = seasonWatched watchClass = watchClassOf(seasonWatched) collapsed = isCollapsed rowClass = isCollapsed ? 'collapsed' : 'expanded' })
76. if (!isCollapsed) {
77. for (e of episodesOfSeason(s)) {
78. let epWatched = watched['episode:' + e.id] == true
79. out.push({ kind = 'episode' isSeason = false isEpisode = true id = e.id seasonId = s.id episodeNumber = e.episodeNumber title = e.title != null ? e.title : '' watched = epWatched watchClass = watchClassOf(epWatched) })
80. }
81. }
82. }
83. return out
84. }
86. // a LOCAL static like buildRows (an imported mpackdb helper called straight from a member's initializer came back false
87. // after a client-side navigation to the page — the gate's follow check)
88. static followingOf = (show, uid) => { return uid != null && isFollowing(uid, show.id) }
89. // mission 056: an ADULT title's page (TMDB's flag `adult == true`, mission 054) is "Not found" for everyone who does not
90. // follow it (signed out too); a follower sees it as before. Unknown (`null`) is not hidden here — only in the lists.
91. // With hybriel ≥ 73267707 (#121/#122) `showRow`/`found` are server sites re-derived after every session face with the page's
92. // 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).
93. // Mission 054's try (`found = … && !adultHiddenFor(showRow, me)`, `collapsed`/`rows` from `found`) broke the checks.
94. static adultHiddenFor = (show, uid) => { return show.adult == true && !followingOf(show, uid) }
95. // 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
96. // row of a hidden title must never be one
97. static visibleShow = (slug, uid) => {
98. let s = showBySlug(slug)
99. return s != null && adultHiddenFor(s, uid) ? null : s
100. }
101. // the initial open/closed seasons from the SLUG alone (not from `showRow`, which reads the session — see `collapsed`)
102. static initialCollapsedOf = (slug) => {
103. let s = showBySlug(slug)
104. return s != null ? initialCollapsed(seasonsOfShow(s)) : {}
105. }
107. // ---- reactive members -----------------------------------------------------------------------
108. slug = null
109. session = null
110. userId = userIdOfSession(session)
111. signedIn = userId != null
112. // SESSION SYNC (mission 047; since hybriel #121/#122, mission 056): a face taking `session` answers with a `sync` of every
113. // member derived from session that reaches an import (here `showRow`, `found`, `following`, `rows`, …), re-derived on the
114. // server with the page's route params but the MOUNT's other state — so client state (`collapsed`) must never derive from
115. // them. `me` stays the plain copy mission 047 introduced.
116. me = userId
118. showRow = visibleShow(slug, me)
119. found = showRow != null
120. notFound = showRow == null
122. // the Follow toggle: "Follow" = the inverted button (accent border), "Following" = the filled one
123. following = found ? followingOf(showRow, me) : false
124. followClass = following ? 'follow' : 'follow inverted'
125. followText = following ? 'Following' : 'Follow'
126. signInHref = loginHref
128. title = found ? showRow.title : ''
129. summary = found && showRow.summary != null ? showRow.summary : ''
130. poster = found ? posterName(showRow) : null
131. hasPoster = poster != null
132. posterUrl = hasPoster ? '/posters/' + poster : ''
134. genreRows = found ? genreRowsOf(showRow) : []
135. hasGenres = genreRows.length > 0
136. castRows = found ? castRowsOf(showRow) : []
137. hasCast = castRows.length > 0
138. linkRows = found ? externalLinksOf(showRow) : []
139. hasLinks = linkRows.length > 0
141. // NOT from `showRow`/`found`: they read the session (via `me`), so a member derived from them is re-derived on the server
142. // after every session face with the MOUNT's state — `collapsed` (client state) would snap back to the initial seasons (mission
143. // 056: the 2nd episode click in a re-opened season did nothing). The season ids of a hidden page are no secret.
144. collapsed = initialCollapsedOf(slug)
145. rows = found ? buildRows(showRow, me, collapsed) : []
146. hasRows = rows.length > 0
148. __title = found ? title + ' — ' + appTitle : appTitle
150. View {
151. showPage {
152. if (notFound) {
153. article { class = "main"
154. h1 { "Not found" }
155. p { "This show doesn't exist." }
156. }
157. }
158. if (found) {
159. showHeader {
160. showPoster { if (hasPoster) { img { src = posterUrl alt = title } } }
161. showMeta {
162. showTitle {
163. h1 { title }
164. button { id = "follow" type = "button" class = followClass followText on click(e) { emit toggleFollow(e) } }
165. }
166. if (hasLinks) {
167. showLinks {
168. 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 } }
169. }
170. }
171. if (hasGenres) {
172. showGenres {
173. for (g of genreRows) { a { class = "genre-pill" href = g.href g.name } }
174. }
175. }
176. showSummary { summary }
177. if (hasCast) {
178. showCast {
179. for (c of castRows) { a { class = "artist-link" href = c.href c.name } }
180. }
181. }
182. }
183. }
184. if (hasRows) {
185. showSeasons {
186. for (row of rows) {
187. if (row.isSeason) {
188. seasonRow { class = row.rowClass
189. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark season watched"
190. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
191. circle { cx = "12" cy = "12" r = "10" }
192. path { d = "M7 12.5 L10.5 16 L17 8.5" }
193. }
194. on click(e) { emit toggleSeason(row.id) }
195. }
196. button { type = "button" class = "season-toggle" value = row.id
197. seasonLabel { row.label }
198. seasonCount { row.episodeCountText }
199. seasonCaret { "aria-hidden" = "true"
200. svg { viewBox = "0 0 24 24" width = "20" height = "20"
201. path { d = "M6 9 L12 15 L18 9" }
202. }
203. }
204. on click(e) { emit toggleCollapse(row.id) }
205. }
206. }
207. }
208. if (row.isEpisode) {
209. episodeRow {
210. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark episode watched"
211. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
212. circle { cx = "12" cy = "12" r = "10" }
213. path { d = "M7 12.5 L10.5 16 L17 8.5" }
214. }
215. on click(e) { emit toggleEpisode(row.id) }
216. }
217. episodeNumber { row.episodeNumber }
218. episodeTitle { row.title }
219. }
220. }
221. }
222. }
223. }
224. Modal { id = "signin" title = "Sign in"
225. p { "You need to sign in to follow shows and mark episodes." }
226. footer {
227. button { type = "button" value = "close" "Close" }
228. a { id = "signin-link" class = "button" href = signInHref "Sign in with ident" }
229. }
230. }
231. }
232. }
233. }
235. // Every rebuild of `rows` happens SERVER-SIDE, never by calling `buildRows` from a client handler:
236. // a member function whose body reaches an hl:mpackdb-backed import (seasonsOfShow, episodesOfSeason,
237. // watchesOfUser, …) compiles to nothing on the client (no case ever assigns it — a genuine Hybriel
238. // gap, filed under `issues`) even though the client bundle still calls it, so `this.buildRows(...)`
239. // throws "not a function" in the browser. The client here only ever ASSIGNS the `rows` the server
240. // already built (`rows = r.rows`) — never calls a tainted local helper itself. `slug` goes along so
241. // the face can refetch the show without depending on implicit access to a sibling member.
242. on toggleCollapse(seasonId) {
243. let r = emit server showRows(slug, seasonId, collapsed)
244. if (r == null || r.error != null) { return null }
245. collapsed = r.collapsed
246. rows = r.rows
247. }
249. // signed out: the modal, nothing is sent
250. on toggleEpisode(episodeId) {
251. if (!signedIn) { document.getElementById('signin').showModal() return null }
252. let r = emit server showToggleEpisode(slug, '' + episodeId, collapsed)
253. if (r == null || r.error != null) { return null }
254. rows = r.rows
255. }
257. on toggleSeason(seasonId) {
258. if (!signedIn) { document.getElementById('signin').showModal() return null }
259. let r = emit server showToggleSeason(slug, '' + seasonId, collapsed)
260. if (r == null || r.error != null) { return null }
261. rows = r.rows
262. }
264. on toggleFollow(e) {
265. if (!signedIn) { document.getElementById('signin').showModal() return null }
266. let r = emit server showToggleFollow(slug)
267. if (r == null || r.error != null) { return null }
268. following = r.following
269. followClass = r.following ? 'follow' : 'follow inverted'
270. followText = r.following ? 'Following' : 'Follow'
271. }
273. // ---- the faces (the trailing `session` is always the server's: hybriel#16) ----
274. on server showRows(slug, seasonId, collapsed, session) {
275. let show = showBySlug(slug)
276. let uid = userIdOfSession(session)
277. if (show == null || adultHiddenFor(show, uid)) { return { error = 'no such show' } }
278. let m = collapsed
279. m[seasonId] = collapsed[seasonId] == true ? false : true
280. return { ok = true collapsed = m rows = buildRows(show, uid, m) }
281. }
283. on server showToggleEpisode(slug, episodeId, collapsed, session) {
284. let show = showBySlug(slug)
285. if (show == null) { return { error = 'no such show' } }
286. let uid = userIdOfSession(session)
287. if (uid == null) { return { error = 'you are not signed in' } }
288. if (adultHiddenFor(show, uid)) { return { error = 'no such show' } }
289. let rows = watchesOfUser(uid)
290. let watched = isWatched(rows, 'episode', episodeId) == false
291. let ok = setWatched(uid, 'episode', episodeId, rows, watched)
292. if (!ok) { return { error = 'could not save the watch' } }
293. return { ok = true rows = buildRows(show, uid, collapsed) }
294. }
296. on server showToggleSeason(slug, seasonId, collapsed, session) {
297. let show = showBySlug(slug)
298. if (show == null) { return { error = 'no such show' } }
299. let uid = userIdOfSession(session)
300. if (uid == null) { return { error = 'you are not signed in' } }
301. if (adultHiddenFor(show, uid)) { return { error = 'no such show' } }
302. let season = seasonById(seasonId)
303. if (season == null) { return { error = 'no such season' } }
304. let rows = watchesOfUser(uid)
305. let watched = isWatched(rows, 'season', seasonId) == false
306. let ok = setSeasonWatched(uid, seasonId, season.episodes, rows, watched)
307. if (!ok) { return { error = 'could not save the watch' } }
308. return { ok = true rows = buildRows(show, uid, collapsed) }
309. }
311. on server showToggleFollow(slug, session) {
312. let show = showBySlug(slug)
313. if (show == null) { return { error = 'no such show' } }
314. let uid = userIdOfSession(session)
315. if (uid == null) { return { error = 'you are not signed in' } }
316. let follow = isFollowing(uid, show.id) == false
317. if (!setFollowed(uid, show.id, follow)) { return { error = 'could not save the follow' } }
318. return { ok = true following = follow }
319. }