Show friend's progress in the episode list

pages/anime/anime.go

@@ -10,9 +10,12 @@ import (
 	"github.com/animenotifier/notify.moe/utils"
 )
 
-const maxEpisodes = 26
+const (
-const maxEpisodesLongSeries = 12
+	maxEpisodes           = 26
-const maxDescriptionLength = 170
+	maxEpisodesLongSeries = 12
+	maxDescriptionLength  = 170
+	maxFriendsPerEpisode  = 9
+)
 
 // Get anime page.
 func Get(ctx *aero.Context) string {
@@ -34,21 +37,27 @@ func Get(ctx *aero.Context) string {
 	// Friends watching
 	var friends []*arn.User
 	friendsAnimeListItems := map[*arn.User]*arn.AnimeListItem{}
+	episodeToFriends := map[int][]*arn.User{}
 
 	if user != nil {
 		friends = user.Follows().Users()
-
 		deleted := 0
+
 		for i := range friends {
 			j := i - deleted
-			friendAnimeList := friends[j].AnimeList()
+			friend := friends[j]
+			friendAnimeList := friend.AnimeList()
 			friendAnimeListItem := friendAnimeList.Find(anime.ID)
 
 			if friendAnimeListItem == nil || friendAnimeListItem.Private {
 				friends = friends[:j+copy(friends[j:], friends[j+1:])]
 				deleted++
 			} else {
-				friendsAnimeListItems[friends[j]] = friendAnimeListItem
+				friendsAnimeListItems[friend] = friendAnimeListItem
+
+				if len(episodeToFriends[friendAnimeListItem.Episodes]) < maxFriendsPerEpisode {
+					episodeToFriends[friendAnimeListItem.Episodes] = append(episodeToFriends[friendAnimeListItem.Episodes], friend)
+				}
 			}
 		}
 
@@ -109,7 +118,7 @@ func Get(ctx *aero.Context) string {
 	// Open Graph
 	ctx.Data = getOpenGraph(ctx, anime)
 
-	return ctx.HTML(components.Anime(anime, animeListItem, tracks, amvs, amvAppearances, episodes, friends, friendsAnimeListItems, user))
+	return ctx.HTML(components.Anime(anime, animeListItem, tracks, amvs, amvAppearances, episodes, friends, friendsAnimeListItems, episodeToFriends, user))
 }
 
 func getOpenGraph(ctx *aero.Context, anime *arn.Anime) *arn.OpenGraph {

pages/anime/anime.pixy

@@ -1,11 +1,11 @@
-component Anime(anime *arn.Anime, listItem *arn.AnimeListItem, tracks []*arn.SoundTrack, amvs []*arn.AMV, amvAppearances []*arn.AMV, episodes []*arn.AnimeEpisode, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
+component Anime(anime *arn.Anime, listItem *arn.AnimeListItem, tracks []*arn.SoundTrack, amvs []*arn.AMV, amvAppearances []*arn.AMV, episodes []*arn.AnimeEpisode, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, episodeToFriends map[int][]*arn.User, user *arn.User)
 	.anime
 		.anime-main-column
-			AnimeMainColumn(anime, listItem, tracks, amvs, amvAppearances, episodes, user)
+			AnimeMainColumn(anime, listItem, tracks, amvs, amvAppearances, episodes, episodeToFriends, user)
 		.anime-side-column
 			AnimeSideColumn(anime, friends, listItems, user)
 
-component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks []*arn.SoundTrack, amvs []*arn.AMV, amvAppearances []*arn.AMV, episodes []*arn.AnimeEpisode, user *arn.User)
+component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks []*arn.SoundTrack, amvs []*arn.AMV, amvAppearances []*arn.AMV, episodes []*arn.AnimeEpisode, episodeToFriends map[int][]*arn.User, user *arn.User)
 	.anime-header(data-id=anime.ID)
 		a.anime-image-container.mountable(href=anime.ImageLink("original"), target="_blank", data-mountable-type="header")
 			img.anime-cover-image.lazy(data-src=anime.ImageLink("large"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
@@ -29,7 +29,7 @@ component AnimeMainColumn(anime *arn.Anime, listItem *arn.AnimeListItem, tracks
 	AnimeRelations(anime, user, false)
 	AnimeTracks(anime, tracks, user, false)
 	AnimeAMVs(anime, amvs, amvAppearances, user)
-	AnimeEpisodes(anime, episodes, user, false)
+	AnimeEpisodes(anime, episodes, episodeToFriends, user, false)
 	AnimeComments(anime, user, false)
 
 component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)

pages/anime/episodes.go

@@ -20,5 +20,5 @@ func Episodes(ctx *aero.Context) string {
 		return ctx.Error(http.StatusNotFound, "Anime not found", err)
 	}
 
-	return ctx.HTML(components.AnimeEpisodes(anime, anime.Episodes().Items, user, true))
+	return ctx.HTML(components.AnimeEpisodes(anime, anime.Episodes().Items, nil, user, true))
 }

pages/anime/episodes.pixy

@@ -1,4 +1,4 @@
-component AnimeEpisodes(anime *arn.Anime, episodes []*arn.AnimeEpisode, user *arn.User, standAlonePage bool)
+component AnimeEpisodes(anime *arn.Anime, episodes []*arn.AnimeEpisode, episodeToFriends map[int][]*arn.User, user *arn.User, standAlonePage bool)
 	if standAlonePage
 		h1.mountable
 			a(href=anime.Link())= anime.Title.ByUser(user)
@@ -9,7 +9,7 @@ component AnimeEpisodes(anime *arn.Anime, episodes []*arn.AnimeEpisode, user *ar
 				a(href=anime.Episodes().Link()) Episodes
 			
 			.episodes
-				each episode in episodes
+				for index, episode := range episodes
 					a.episode.mountable(href=anime.Link() + "/episode/" + strconv.Itoa(episode.Number), data-mountable-type="episode", data-available=episode.Available())
 						.episode-number
 							if episode.Number != -1
@@ -22,3 +22,8 @@ component AnimeEpisodes(anime *arn.Anime, episodes []*arn.AnimeEpisode, user *ar
 						
 						if validate.DateTime(episode.AiringDate.Start)
 							.episode-airing-date-start.utc-airing-date.no-tip(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
+						
+						if episodeToFriends != nil
+							.episode-friends
+								each friend in episodeToFriends[index+1]
+									AvatarNoLink(friend)

pages/anime/episodes.scarlet

@@ -11,7 +11,6 @@ const episode-margin = 0.5rem
 	margin episode-margin
 	padding 0.5rem
 	width calc(50% - episode-margin * 2)
-	overflow hidden
 	color text-color
 	box-shadow shadow-light
 
@@ -48,3 +47,14 @@ const episode-margin = 0.5rem
 	justify-content center
 	font-size 0.7rem
 	opacity 0.6
+
+.episode-friends
+	horizontal
+	position absolute
+	bottom -0.85rem
+	right -0.85rem
+
+	.user-image
+		width calc(avatar-size / 2)
+		height calc(avatar-size / 2)
+		margin-left -0.5rem