New anime images

jobs/sync-anime/sync-anime.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"fmt"
+	"path/filepath"
 	"strings"
 
 	"github.com/animenotifier/arn"
@@ -53,10 +54,7 @@ func sync(data *kitsu.Anime) *arn.Anime {
 	anime.Title.English = attr.Titles.En
 	anime.Title.Romaji = attr.Titles.EnJp
 	anime.Title.Synonyms = attr.AbbreviatedTitles
-	anime.Image.Tiny = kitsu.FixImageURL(attr.PosterImage.Tiny)
+	anime.ImageExtension = filepath.Ext(kitsu.FixImageURL(attr.PosterImage.Original))
-	anime.Image.Small = kitsu.FixImageURL(attr.PosterImage.Small)
-	anime.Image.Large = kitsu.FixImageURL(attr.PosterImage.Large)
-	anime.Image.Original = kitsu.FixImageURL(attr.PosterImage.Original)
 	anime.StartDate = attr.StartDate
 	anime.EndDate = attr.EndDate
 	anime.EpisodeCount = attr.EpisodeCount

mixins/AnimeGrid.pixy

@@ -2,4 +2,4 @@ component AnimeGrid(animeList []*arn.Anime)
 	.anime-grid
 		each anime in animeList
 			a.anime-grid-cell.ajax(href="/anime/" + toString(anime.ID))
-				img.anime-grid-image.lazy(data-src=anime.Image.Small, alt=anime.Title.Romaji, title=anime.Title.Romaji)
+				img.anime-grid-image.lazy(data-src=anime.Image("medium"), alt=anime.Title.Romaji, title=anime.Title.Romaji)

pages/anime/anime.go

@@ -94,7 +94,7 @@ func Get(ctx *aero.Context) string {
 	openGraph := &arn.OpenGraph{
 		Tags: map[string]string{
 			"og:title":       anime.Title.Canonical,
-			"og:image":       anime.Image.Large,
+			"og:image":       anime.Image("large"),
 			"og:url":         "https://" + ctx.App.Config.Domain + anime.Link(),
 			"og:site_name":   "notify.moe",
 			"og:description": description,

pages/anime/anime.pixy

@@ -7,17 +7,16 @@ component Anime(anime *arn.Anime, tracks []*arn.SoundTrack, episodes []*arn.Anim
 
 component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes []*arn.AnimeEpisode, user *arn.User)
 	.anime-header(data-id=anime.ID)
-		if anime.Image.Large != ""
+		.anime-image-container.mountable
-			.anime-image-container.mountable
+			img.anime-cover-image.lazy(data-src=anime.Image("large"), data-webp="true", alt=anime.Title.ByUser(user))
-				img.anime-cover-image(src=anime.Image.Large, alt=anime.Title.ByUser(user))
+
+			//- if anime.StartDate != ""
+			//- 	.anime-start-date
+			//- 		span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
+			//- 		if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
+			//- 			span  -
+			//- 			span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
 
-				//- if anime.StartDate != ""
-				//- 	.anime-start-date
-				//- 		span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
-				//- 		if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
-				//- 			span  - 
-				//- 			span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
-		
 		.space
 
 		.anime-info
@@ -28,14 +27,14 @@ component AnimeMainColumn(anime *arn.Anime, tracks []*arn.SoundTrack, episodes [
 
 			//- h3.anime-section-name.anime-summary-header Summary
 			p.anime-summary.mountable= anime.Summary
-			
+
 			AnimeActions(anime, user)
-	
+
 	AnimeCharacters(anime)
 	AnimeRelations(anime, user)
 	AnimeTracks(anime, tracks)
 	AnimeEpisodes(episodes)
-	
+
 	//- //- h3.anime-section-name Reviews
 	//- //- p Coming soon.
 
@@ -114,7 +113,7 @@ component AnimePopularity(anime *arn.Anime)
 					tr.mountable(data-mountable-type="info")
 						td.anime-info-key Completed:
 						td.anime-info-value= anime.Popularity.Completed
-				
+
 				if anime.Popularity.Planned > 0
 					tr.mountable(data-mountable-type="info")
 						td.anime-info-key Planned:
@@ -137,7 +136,7 @@ component AnimeLinks(anime *arn.Anime)
 			a.light-button(href="https://kitsu.io/anime/" + anime.ID, target="_blank", rel="noopener")
 				Icon("external-link")
 				span Kitsu
-			
+
 			each mapping in anime.Mappings
 				a.light-button(href=mapping.Link(), target="_blank", rel="noopener")
 					Icon("external-link")
@@ -167,7 +166,7 @@ component AnimeFriends(friends []*arn.User, listItems map[*arn.User]*arn.AnimeLi
 	if len(friends) > 0
 		section.anime-section.mountable
 			h3.anime-section-name Friends
-			
+
 			.anime-friends
 				.user-avatars
 					each friend in friends
@@ -200,7 +199,7 @@ component AnimeInformation(anime *arn.Anime)
 			tr.mountable(data-mountable-type="info")
 				td.anime-info-key Status:
 				td.anime-info-value= anime.StatusHumanReadable()
-			
+
 			if anime.StartDate == anime.EndDate && anime.StartDate != "" && anime.EndDate != ""
 				if anime.StartDate != ""
 					tr.mountable(data-mountable-type="info")

pages/compare/animelist.pixy

@@ -14,23 +14,23 @@ component CompareAnimeList(a *arn.User, b *arn.User, countA int, countB int, com
 				th.comparison
 					Avatar(b)
 				th.comparison
-		
+
 		tbody
 			each comparison in comparisons
 				tr.anime-list-item.mountable
 					td.anime-list-item-image-container
 						a.ajax(href=comparison.Anime.Link())
-							img.anime-list-item-image.lazy(data-src=comparison.Anime.Image.Tiny, alt=comparison.Anime.Title.ByUser(user))
+							img.anime-list-item-image.lazy(data-src=comparison.Anime.Image("small"), alt=comparison.Anime.Title.ByUser(user))
-					
+
 					td.anime-list-item-name
 						a.ajax(href=comparison.Anime.Link())= comparison.Anime.Title.ByUser(user)
-					
+
 					td.comparison
 						if comparison.ItemA != nil
 							span= comparison.ItemA.Status
 						else
 							span -
-					
+
 					td.comparison
 						if comparison.ItemA != nil
 							if comparison.ItemA.Rating.Overall != 0
@@ -42,13 +42,13 @@ component CompareAnimeList(a *arn.User, b *arn.User, countA int, countB int, com
 								span -
 						else
 							span -
-					
+
 					td.comparison
 						if comparison.ItemB != nil
 							span= comparison.ItemB.Status
 						else
 							span -
-					
+
 					td.comparison
 						if comparison.ItemB != nil
 							if comparison.ItemB.Rating.Overall != 0

pages/search/search.pixy

@@ -6,20 +6,20 @@ component SearchResults(term string, users []*arn.User, animes []*arn.Anime, pos
 			h3.widget-title
 				Icon("tv")
 				span Anime
-			
+
 			.profile-watching-list.anime-search
 				if len(animes) == 0
 					p.no-search-results.mountable No anime found.
 				else
 					each anime in animes
 						a.profile-watching-list-item.mountable.ajax(href=anime.Link(), title=anime.Title.Canonical, data-mountable-type="anime")
-							img.anime-cover-image.anime-search-result(src=anime.Image.Tiny, alt=anime.Title.Canonical)
+							img.anime-cover-image.anime-search-result(src=anime.Image("small"), alt=anime.Title.Canonical)
 
 		.widget
 			h3.widget-title
 				Icon("comment")
 				span Forum
-			
+
 			if len(posts) == 0 && len(threads) == 0
 				p.no-search-results.mountable No posts found.
 			else
@@ -30,7 +30,7 @@ component SearchResults(term string, users []*arn.User, animes []*arn.Anime, pos
 							if thread.Author().HasNick()
 								.forum-search-result-author= thread.Author().Nick
 						.forum-search-result-sample= thread.Text
-				
+
 				each post in posts
 					.mountable(data-mountable-type="forum")
 						.forum-search-result
@@ -38,12 +38,12 @@ component SearchResults(term string, users []*arn.User, animes []*arn.Anime, pos
 							if post.Author().HasNick()
 								.forum-search-result-author= post.Author().Nick
 						.forum-search-result-sample= post.Text
-		
+
 		.widget
 			h3.widget-title
 				Icon("music")
 				span Soundtracks
-			
+
 			if len(tracks) == 0
 				p.no-search-results.mountable No soundtracks found.
 			else
@@ -56,7 +56,7 @@ component SearchResults(term string, users []*arn.User, animes []*arn.Anime, pos
 			h3.widget-title
 				Icon("user")
 				span Users
-			
+
 			.user-avatars.user-search
 				if len(users) == 0
 					p.no-search-results.mountable No users found.

pages/soundtrack/soundtrack.pixy

@@ -20,7 +20,7 @@ component Track(track *arn.SoundTrack, user *arn.User)
 				.sound-track-anime-list
 					each anime in track.Anime()
 						a.sound-track-anime-list-item.ajax(href=anime.Link(), title=anime.Title.Canonical)
-							img.sound-track-anime-list-item-image.lazy(data-src=anime.Image.Tiny, alt=anime.Title.Canonical)
+							img.sound-track-anime-list-item-image.lazy(data-src=anime.Image("small"), alt=anime.Title.Canonical)
 
 			if len(track.Beatmaps()) > 0
 				.widget.mountable
@@ -36,14 +36,14 @@ component Track(track *arn.SoundTrack, user *arn.User)
 						.tag= tag
 		.footer.text-center.mountable
 			if track.EditedBy != ""
-				span Edited 
+				span Edited
 				span.utc-date(data-date=track.Edited)
-				span  by 
+				span  by
 				span= track.EditedByUser().Nick
 			else
-				span Posted 
+				span Posted
 				span.utc-date(data-date=track.Created)
-				span  by 
+				span  by
 				span= track.Creator().Nick
 
 			span .

scripts/AnimeNotifier.ts

@@ -464,14 +464,25 @@ export class AnimeNotifier {
 	lazyLoadImage(element: HTMLImageElement) {
 		// Once the image becomes visible, load it
 		element["became visible"] = () => {
+			let dataSrc = element.dataset.src
+			let dot = dataSrc.lastIndexOf(".")
+			let base = dataSrc.substring(0, dot)
+			let extension = ""
+
 			// Replace URL with WebP if supported
 			if(this.webpEnabled && element.dataset.webp) {
-				let dot = element.dataset.src.lastIndexOf(".")
+				extension = ".webp"
-				element.src = element.dataset.src.substring(0, dot) + ".webp"
 			} else {
-				element.src = element.dataset.src
+				extension = dataSrc.substring(dot)
 			}
 
+			// Anime images on Retina displays
+			if(base.includes("/anime/") && window.devicePixelRatio >= 2) {
+				base += "@2"
+			}
+
+			element.src = base + extension
+
 			if(element.naturalWidth === 0) {
 				element.onload = () => {
 					this.elementFound.queue(element)