From 4558939bff74c29580e0de7b488cb190a9b847fb Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Thu, 9 Nov 2017 18:10:10 +0100 Subject: [PATCH] New anime images --- jobs/sync-anime/sync-anime.go | 6 ++---- mixins/AnimeGrid.pixy | 2 +- pages/anime/anime.go | 2 +- pages/anime/anime.pixy | 33 ++++++++++++++++---------------- pages/compare/animelist.pixy | 14 +++++++------- pages/search/search.pixy | 14 +++++++------- pages/soundtrack/soundtrack.pixy | 10 +++++----- scripts/AnimeNotifier.ts | 17 +++++++++++++--- 8 files changed, 53 insertions(+), 45 deletions(-) diff --git a/jobs/sync-anime/sync-anime.go b/jobs/sync-anime/sync-anime.go index 2c10bcaa..b5e5bd6b 100644 --- a/jobs/sync-anime/sync-anime.go +++ b/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.Image.Small = kitsu.FixImageURL(attr.PosterImage.Small) - anime.Image.Large = kitsu.FixImageURL(attr.PosterImage.Large) - anime.Image.Original = kitsu.FixImageURL(attr.PosterImage.Original) + anime.ImageExtension = filepath.Ext(kitsu.FixImageURL(attr.PosterImage.Original)) anime.StartDate = attr.StartDate anime.EndDate = attr.EndDate anime.EpisodeCount = attr.EpisodeCount diff --git a/mixins/AnimeGrid.pixy b/mixins/AnimeGrid.pixy index b95e06ef..13a67517 100644 --- a/mixins/AnimeGrid.pixy +++ b/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) \ No newline at end of file + img.anime-grid-image.lazy(data-src=anime.Image("medium"), alt=anime.Title.Romaji, title=anime.Title.Romaji) \ No newline at end of file diff --git a/pages/anime/anime.go b/pages/anime/anime.go index 5ee3d120..04dafdc5 100644 --- a/pages/anime/anime.go +++ b/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, diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 9429f016..28bc532e 100644 --- a/pages/anime/anime.pixy +++ b/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 - img.anime-cover-image(src=anime.Image.Large, alt=anime.Title.ByUser(user)) + .anime-image-container.mountable + img.anime-cover-image.lazy(data-src=anime.Image("large"), data-webp="true", 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") diff --git a/pages/compare/animelist.pixy b/pages/compare/animelist.pixy index d1aeadee..6387439f 100644 --- a/pages/compare/animelist.pixy +++ b/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 diff --git a/pages/search/search.pixy b/pages/search/search.pixy index 78800143..f97d17cf 100644 --- a/pages/search/search.pixy +++ b/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. diff --git a/pages/soundtrack/soundtrack.pixy b/pages/soundtrack/soundtrack.pixy index 0be148e6..93fce271 100644 --- a/pages/soundtrack/soundtrack.pixy +++ b/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 . diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 585a0791..64672508 100644 --- a/scripts/AnimeNotifier.ts +++ b/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(".") - element.src = element.dataset.src.substring(0, dot) + ".webp" + extension = ".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)