tracker

9.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. parent './main.hl'
17. import { appTitle } from '../project.hl'
18. import { userIdOfSession } from '../users.hl'
19. import { showBySlug, genreById, personById, seasonsOfShow, episodesOfSeason, seasonById, posterName } from '../shows.hl'
20. import { watchesOfUser, isWatched, watchedSet, setWatched, setSeasonWatched, watchClassOf } from '../watches.hl'
22. // ---- pure helpers ----------------------------------------------------------------------------
23. // `static`, like calendar.hl's `soonOf` — a PLAIN instance member function that calls an
24. // hl:mpackdb-backed import (seasonsOfShow, episodesOfSeason, watchesOfUser, …) comes back null
25. // when called from an `on server` face (confirmed by running the gate: "'buildRows' is not
26. // callable — it holds null" at the face's call site, even though the SAME call works fine as a
27. // member's own initializer at the top of this file). `static` is the proven-safe shape (calendar's
28. // `soonOf`, called from `calLoad`/`calSettingsLoad`, an mpackdb-backed helper exactly like this one).
29. static initialCollapsed = (seasons) => {
30. let m = {}
31. let i = 0
32. while (i < seasons.length) {
33. if (i > 0) { m[seasons[i].id] = true }
34. i = i + 1
35. }
36. return m
37. }
38. static genreRowsOf = (show) => {
39. let out = []
40. for (gid of show.genres) {
41. let g = genreById(gid)
42. if (g != null) { out.push({ id = g.id name = g.name href = '/genre/' + g.urlSegment }) }
43. }
44. return out
45. }
46. static castRowsOf = (show) => {
47. let out = []
48. for (c of show.cast) {
49. let p = personById(c.person)
50. if (p != null) { out.push({ name = c.actor href = '/person/' + p.urlSegment }) }
51. }
52. return out
53. }
54. // a View attribute must be a literal, a member or a field path — never an inline expression — so
55. // every ternary (watched -> icon class, collapsed -> row class) is resolved HERE, once, into a
56. // plain field the View just reads (row.watchClass, row.rowClass); `watchClassOf` itself lives in
57. // watches.hl (shared with /unwatched and /schedule, "reuse, don't copy")
58. static buildRows = (show, watchRows, collapsed) => {
59. let watched = watchedSet(watchRows)
60. let out = []
61. for (s of seasonsOfShow(show)) {
62. let isCollapsed = collapsed[s.id] == true
63. let label = s.title != null && s.title != '' ? s.title : 'Season ' + s.seasonNumber
64. let seasonWatched = watched['season:' + s.id] == true
65. 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' })
66. if (!isCollapsed) {
67. for (e of episodesOfSeason(s)) {
68. let epWatched = watched['episode:' + e.id] == true
69. 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) })
70. }
71. }
72. }
73. return out
74. }
76. // ---- reactive members -----------------------------------------------------------------------
77. slug = null
78. session = null
79. userId = userIdOfSession(session)
80. signedIn = userId != null
82. showRow = showBySlug(slug)
83. found = showRow != null
84. notFound = showRow == null
86. title = found ? showRow.title : ''
87. summary = found && showRow.summary != null ? showRow.summary : ''
88. poster = found ? posterName(showRow) : null
89. hasPoster = poster != null
90. posterUrl = hasPoster ? '/posters/' + poster : ''
92. genreRows = found ? genreRowsOf(showRow) : []
93. hasGenres = genreRows.length > 0
94. castRows = found ? castRowsOf(showRow) : []
95. hasCast = castRows.length > 0
97. collapsed = found ? initialCollapsed(seasonsOfShow(showRow)) : {}
98. watchRows = found && signedIn ? watchesOfUser(userId) : []
99. rows = found ? buildRows(showRow, watchRows, collapsed) : []
100. hasRows = rows.length > 0
102. __title = found ? title + ' — ' + appTitle : appTitle
104. View {
105. showPage {
106. if (notFound) {
107. article { class = "main"
108. h1 { "Not found" }
109. p { "This show doesn't exist." }
110. }
111. }
112. if (found) {
113. showHeader {
114. showPoster { if (hasPoster) { img { src = posterUrl alt = title } } }
115. showMeta {
116. h1 { title }
117. if (hasGenres) {
118. showGenres {
119. for (g of genreRows) { a { class = "genre-pill" href = g.href g.name } }
120. }
121. }
122. showSummary { summary }
123. if (hasCast) {
124. showCast {
125. for (c of castRows) { a { class = "artist-link" href = c.href c.name } }
126. }
127. }
128. }
129. }
130. if (hasRows) {
131. showSeasons {
132. for (row of rows) {
133. if (row.isSeason) {
134. seasonRow { class = row.rowClass
135. if (signedIn) {
136. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark season watched"
137. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
138. circle { cx = "12" cy = "12" r = "10" }
139. path { d = "M7 12.5 L10.5 16 L17 8.5" }
140. }
141. on click(e) { emit toggleSeason(row.id) }
142. }
143. }
144. button { type = "button" class = "season-toggle" value = row.id
145. seasonLabel { row.label }
146. seasonCount { row.episodeCountText }
147. on click(e) { emit toggleCollapse(row.id) }
148. }
149. }
150. }
151. if (row.isEpisode) {
152. episodeRow {
153. if (signedIn) {
154. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark episode watched"
155. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
156. circle { cx = "12" cy = "12" r = "10" }
157. path { d = "M7 12.5 L10.5 16 L17 8.5" }
158. }
159. on click(e) { emit toggleEpisode(row.id) }
160. }
161. }
162. episodeNumber { row.episodeNumber }
163. episodeTitle { row.title }
164. }
165. }
166. }
167. }
168. }
169. }
170. }
171. }
173. // Every rebuild of `rows` happens SERVER-SIDE, never by calling `buildRows` from a client handler:
174. // a member function whose body reaches an hl:mpackdb-backed import (seasonsOfShow, episodesOfSeason,
175. // watchesOfUser, …) compiles to nothing on the client (no case ever assigns it — a genuine Hybriel
176. // gap, filed under `issues`) even though the client bundle still calls it, so `this.buildRows(...)`
177. // throws "not a function" in the browser. The client here only ever ASSIGNS the `rows` the server
178. // already built (`rows = r.rows`) — never calls a tainted local helper itself. `slug` goes along so
179. // the face can refetch the show without depending on implicit access to a sibling member.
180. on toggleCollapse(seasonId) {
181. let r = emit server showRows(slug, seasonId, collapsed)
182. if (r == null || r.error != null) { return null }
183. collapsed = r.collapsed
184. rows = r.rows
185. }
187. on toggleEpisode(episodeId) {
188. if (!signedIn) { return null }
189. let r = emit server showToggleEpisode(slug, '' + episodeId, collapsed)
190. if (r == null || r.error != null) { return null }
191. rows = r.rows
192. }
194. on toggleSeason(seasonId) {
195. if (!signedIn) { return null }
196. let r = emit server showToggleSeason(slug, '' + seasonId, collapsed)
197. if (r == null || r.error != null) { return null }
198. rows = r.rows
199. }
201. // ---- the faces (the trailing `session` is always the server's: hybriel#16) ----
202. on server showRows(slug, seasonId, collapsed, session) {
203. let show = showBySlug(slug)
204. if (show == null) { return { error = 'no such show' } }
205. let m = collapsed
206. m[seasonId] = collapsed[seasonId] == true ? false : true
207. let uid = userIdOfSession(session)
208. let wr = uid != null ? watchesOfUser(uid) : []
209. return { ok = true collapsed = m rows = buildRows(show, wr, m) }
210. }
212. on server showToggleEpisode(slug, episodeId, collapsed, session) {
213. let show = showBySlug(slug)
214. if (show == null) { return { error = 'no such show' } }
215. let uid = userIdOfSession(session)
216. if (uid == null) { return { error = 'you are not signed in' } }
217. let rows = watchesOfUser(uid)
218. let watched = isWatched(rows, 'episode', episodeId) == false
219. let ok = setWatched(uid, 'episode', episodeId, rows, watched)
220. if (!ok) { return { error = 'could not save the watch' } }
221. return { ok = true rows = buildRows(show, watchesOfUser(uid), collapsed) }
222. }
224. on server showToggleSeason(slug, seasonId, collapsed, session) {
225. let show = showBySlug(slug)
226. if (show == null) { return { error = 'no such show' } }
227. let uid = userIdOfSession(session)
228. if (uid == null) { return { error = 'you are not signed in' } }
229. let season = seasonById(seasonId)
230. if (season == null) { return { error = 'no such season' } }
231. let rows = watchesOfUser(uid)
232. let watched = isWatched(rows, 'season', seasonId) == false
233. let ok = setSeasonWatched(uid, seasonId, season.episodes, rows, watched)
234. if (!ok) { return { error = 'could not save the watch' } }
235. return { ok = true rows = buildRows(show, watchesOfUser(uid), collapsed) }
236. }