tracker

4.9 KB

1. // components/unwatched.hl — `/unwatched` (tracker.worldapi.org#5): 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`, `isWatched`, `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 } from '../shows.hl'
20. import { watchesOfUser, isWatched, 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 watchRows = 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. let watched = isWatched(watchRows, 'episode', e.id)
51. if (released && !watched) {
52. let title = e.title != null ? e.title : ''
53. out = insertByReleaseDesc(out, {
54. id = e.id showTitle = show.title showHref = '/shows/' + show.urlSegment
55. episodeLabel = 'Ep ' + e.episodeNumber + ' · ' + title
56. release = e.release watchClass = watchClassOf(false)
57. })
58. }
59. }
60. }
61. }
62. }
63. return out
64. }
66. // ---- reactive members -----------------------------------------------------------------------
67. session = null
68. userId = userIdOfSession(session)
69. signedIn = userId != null
71. rows = signedIn ? unwatchedRowsOf(userId) : []
72. hasRows = rows.length > 0
73. noRows = !hasRows
74. emptyText = signedIn ? 'No unwatched episodes.' : 'Sign in to see the shows you follow.'
76. __title = 'Unwatched — ' + appTitle
78. View {
79. unwatchedPage {
80. h1 { "Unwatched" }
81. if (noRows) { p { class = "muted" emptyText } }
82. if (hasRows) {
83. unwatchedRows {
84. for (row of rows) {
85. unwatchedRow {
86. button { type = "button" class = row.watchClass value = row.id "aria-label" = "mark episode watched"
87. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
88. circle { cx = "12" cy = "12" r = "10" }
89. path { d = "M7 12.5 L10.5 16 L17 8.5" }
90. }
91. on click(e) { emit toggleEpisode(row.id) }
92. }
93. a { class = "unwatched-show" href = row.showHref row.showTitle }
94. unwatchedEpisode { row.episodeLabel }
95. unwatchedDate { row.release }
96. }
97. }
98. }
99. }
100. }
101. }
103. // The client only ever ASSIGNS the `rows` the server already rebuilt — never calls the tainted
104. // local helper itself (components/show.hl's own `on toggleEpisode` follows the same shape, and
105. // the same reason: `unwatchedRowsOf` touches mpackdb-backed imports, so it compiles to nothing on
106. // the client, hybriel#115/#116).
107. on toggleEpisode(episodeId) {
108. if (!signedIn) { return null }
109. let r = emit server unwatchedToggle('' + episodeId)
110. if (r == null || r.error != null) { return null }
111. rows = r.rows
112. }
114. // ---- the face (the trailing `session` is always the server's: hybriel#16) ----
115. on server unwatchedToggle(episodeId, session) {
116. let uid = userIdOfSession(session)
117. if (uid == null) { return { error = 'you are not signed in' } }
118. let watchRows = watchesOfUser(uid)
119. let ok = setWatched(uid, 'episode', episodeId, watchRows, true)
120. if (!ok) { return { error = 'could not save the watch' } }
121. return { ok = true rows = unwatchedRowsOf(uid) }
122. }