tracker

5.0 KB

1. // components/unwatched.hl — `/my/unwatched` (tracker.worldapi.org#5, moved from `/unwatched` in #8): every already-released episode of a
2. // show the signed-in user follows that they have not watched yet, newest release first. Creator's words:
3. // "/unwatched lists all unwatched episodes of shows followed in release date desc order"; "check icon is
4. // a disc with a check in it" — the SAME check icon and watch logic as the show page (step 4), reused
5. // (not copied) from follows.hl/shows.hl/watches.hl: `watchClassOf`, `watchedSet`, `setWatched` come from
6. // watches.hl, the check icon markup/CSS is the same `button.checkicon` shape/class styles.hl already has.
7. //
8. // A ROW ONLY EVER SHOWS AN UNWATCHED EPISODE, so a click always marks it watched (never toggles back,
9. // unlike the show page's checks) and the row leaves the list — the ticket's own test: "click an
10. // episode's check: it disappears from the list."
11. //
12. // ONE FLAT LIST, rebuilt whole server-side on every click — the same proven-safe shape components/show.hl
13. // uses for exactly the same Hybriel reasons (hybriel#86, hybriel#115/#116: a plain member function that
14. // touches an hl:mpackdb-backed import must be `static` and must only ever be called server-side).
15. parent './main.hl'
16. import { appTitle } from '../project.hl'
17. import { userIdOfSession } from '../users.hl'
18. import { followedShowIds } from '../follows.hl'
19. import { showById, seasonsOfShow, episodesOfSeason, episodeCode, titleWithYear, titlePath } from '../shows.hl'
20. import { watchesOfUser, watchedSet, setWatched, watchClassOf } from '../watches.hl'
21. import { now, timestamp } from 'hl:time'
23. // ---- pure helpers (static: see the header comment above) ------------------------------------
24. static todayStr = () => { return timestamp(now()).slice(0, 10) }
26. // insertion sort, hand-written (no list sort(), hybriel#1) — a follow list is a handful of shows,
27. // a season a handful of episodes; newest release first, `release` is a plain 'YYYY-MM-DD' string
28. static insertByReleaseDesc = (sorted, row) => {
29. let out = []
30. let inserted = false
31. for (x of sorted) {
32. if (!inserted && row.release >= x.release) { out.push(row) inserted = true }
33. out.push(x)
34. }
35. if (!inserted) { out.push(row) }
36. return out
37. }
39. static unwatchedRowsOf = (userId) => {
40. if (userId == null) { return [] }
41. let today = todayStr()
42. let watched = watchedSet(watchesOfUser(userId))
43. let out = []
44. for (sid of followedShowIds(userId)) {
45. let show = showById(sid)
46. if (show != null) {
47. for (s of seasonsOfShow(show)) {
48. for (e of episodesOfSeason(s)) {
49. let released = e.release != null && e.release <= today
50. if (released && watched['episode:' + e.id] != true) {
51. let title = e.title != null ? e.title : ''
52. out = insertByReleaseDesc(out, {
53. id = e.id showTitle = titleWithYear(show) showHref = titlePath(show)
54. episodeLabel = episodeCode(e.seasonNumber, e.episodeNumber) + ' · ' + title
55. release = e.release watchClass = watchClassOf(false)
56. })
57. }
58. }
59. }
60. }
61. }
62. return out
63. }
65. // ---- reactive members -----------------------------------------------------------------------
66. session = null
67. userId = userIdOfSession(session)
68. signedIn = userId != null
69. // a plain copy of userId for `rows` (mission 047: session sync, see components/show.hl `me`)
70. me = userId
72. rows = signedIn ? unwatchedRowsOf(me) : []
73. hasRows = rows.length > 0
74. noRows = !hasRows
75. emptyText = signedIn ? 'No unwatched episodes.' : 'Sign in to see the shows you follow.'
77. __title = 'Unwatched — ' + appTitle
79. View {
80. unwatchedPage {
81. h1 { "Unwatched" }
82. if (noRows) { p { class = "muted" emptyText } }
83. if (hasRows) {
84. unwatchedRows {
85. for (row of rows) {
86. unwatchedRow {
87. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark episode watched"
88. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
89. circle { cx = "12" cy = "12" r = "10" }
90. path { d = "M7 12.5 L10.5 16 L17 8.5" }
91. }
92. on click(e) { emit toggleEpisode(row.id) }
93. }
94. a { class = "unwatched-show" href = row.showHref row.showTitle }
95. unwatchedEpisode { row.episodeLabel }
96. unwatchedDate { row.release }
97. }
98. }
99. }
100. }
101. }
102. }
104. // The client only ever ASSIGNS the `rows` the server already rebuilt — never calls the tainted
105. // local helper itself (components/show.hl's own `on toggleEpisode` follows the same shape, and
106. // the same reason: `unwatchedRowsOf` touches mpackdb-backed imports, so it compiles to nothing on
107. // the client, hybriel#115/#116).
108. on toggleEpisode(episodeId) {
109. if (!signedIn) { return null }
110. let r = emit server unwatchedToggle('' + episodeId)
111. if (r == null || r.error != null) { return null }
112. rows = r.rows
113. }
115. // ---- the face (the trailing `session` is always the server's: hybriel#16) ----
116. on server unwatchedToggle(episodeId, session) {
117. let uid = userIdOfSession(session)
118. if (uid == null) { return { error = 'you are not signed in' } }
119. let watchRows = watchesOfUser(uid)
120. let ok = setWatched(uid, 'episode', episodeId, watchRows, true)
121. if (!ok) { return { error = 'could not save the watch' } }
122. return { ok = true rows = unwatchedRowsOf(uid) }
123. }