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,16 +7,15 @@ 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 != ""
+			//- if anime.StartDate != ""
-				//- 	.anime-start-date
+			//- 	.anime-start-date
-				//- 		span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
+			//- 		span(title="Start date: " + anime.StartDate)= anime.StartDate[:4]
-				//- 		if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
+			//- 		if anime.EndDate != "" && anime.StartDate[:4] != anime.EndDate[:4]
-				//- 			span  - 
+			//- 			span  -
-				//- 			span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
+			//- 			span(title="End date: " + anime.EndDate)= anime.EndDate[:4]
 
 		.space
 

pages/compare/animelist.pixy

@@ -20,7 +20,7 @@ component CompareAnimeList(a *arn.User, b *arn.User, countA int, countB int, com
 				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)

pages/search/search.pixy

@@ -13,7 +13,7 @@ component SearchResults(term string, users []*arn.User, animes []*arn.Anime, pos
 				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

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

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)