tracker

2.9 KB

1. // components/mymovies.hl — `/my/movies` (tracker.worldapi.org#13): every MOVIE the signed-in user follows, the one
2. // followed last on top — the architect: "/my/movies = the movies you follow, like /my/shows". A row: the small poster, the
3. // title with its year linking to the movie's page (`/shows/<slug>`: movies share the show page and its Follow button).
4. // Read-only like /my/shows, the same row look (the my-show-row tags/classes in styles.hl). Reused: `followsOfUser`,
5. // `insertByFollowDesc` (follows.hl), `showById`, `posterUrlOf`, `titleWithYear` (shows.hl).
6. // mission 058 (tracker#24): a movie watched on its page (watch `movie:<id>`, watches.hl) shows the solid check in its row,
7. // and the count line says how many of them are watched ("3 movies · 1 watched"). One scan of the user's watches (watchedSet).
8. parent './main.hl'
9. import { appTitle } from '../project.hl'
10. import { userIdOfSession } from '../users.hl'
11. import { followsOfUser, insertByFollowDesc } from '../follows.hl'
12. import { showById, posterUrlOf, titleWithYear } from '../shows.hl'
13. import { watchesOfUser, watchedSet } from '../watches.hl'
15. // static: an mpackdb-backed helper must be `static` (hybriel#115/#116)
16. static watchedCountOf = (rows) => {
17. let n = 0
18. for (r of rows) { if (r.watched) { n = n + 1 } }
19. return n
20. }
21. static myMoviesRowsOf = (userId) => {
22. if (userId == null) { return [] }
23. let watched = watchedSet(watchesOfUser(userId))
24. let out = []
25. for (f of followsOfUser(userId)) {
26. let show = showById(f.show)
27. if (show != null && show.type == 'movie') {
28. out = insertByFollowDesc(out, {
29. id = show.id title = titleWithYear(show) href = '/shows/' + show.urlSegment
30. posterUrl = posterUrlOf(show) followedAt = f.at != null ? f.at : 0
31. watched = watched['movie:' + show.id] == true
32. })
33. }
34. }
35. return out
36. }
38. session = null
39. userId = userIdOfSession(session)
40. signedIn = userId != null
41. // a plain copy of userId for `rows` (mission 047: session sync, see components/show.hl `me`)
42. me = userId
44. rows = signedIn ? myMoviesRowsOf(me) : []
45. hasRows = rows.length > 0
46. noRows = !hasRows
47. countText = rows.length + (rows.length == 1 ? ' movie' : ' movies') + ' · ' + watchedCountOf(rows) + ' watched'
48. emptyText = signedIn ? 'You follow no movies yet.' : 'Sign in to see the movies you follow.'
50. __title = 'My movies — ' + appTitle
52. View {
53. myMoviesPage {
54. h1 { "My movies" }
55. if (noRows) { p { class = "muted" emptyText } }
56. if (hasRows) {
57. p { class = "muted list-count" id = "mymovies-count" countText }
58. myShowsRows {
59. for (row of rows) {
60. myShowRow {
61. img { class = "myshow-poster" src = row.posterUrl alt = row.title }
62. a { class = "myshow-title" href = row.href row.title }
63. if (row.watched) {
64. myMovieWatched { class = "checkicon solid" title = "Watched"
65. svg { viewBox = "0 0 24 24" width = "22" height = "22" "aria-hidden" = "true"
66. circle { cx = "12" cy = "12" r = "10" }
67. path { d = "M7 12.5 L10.5 16 L17 8.5" }
68. }
69. }
70. }
71. }
72. }
73. }
74. }
75. }
76. }