New anime images

This commit is contained in:
Eduard Urbach 2017-11-09 18:10:10 +01:00
parent ac7c78242f
commit 4558939bff
8 changed files with 53 additions and 45 deletions

View File

@ -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

View File

@ -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)

View File

@ -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,

View File

@ -7,9 +7,8 @@ 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))
img.anime-cover-image.lazy(data-src=anime.Image("large"), data-webp="true", alt=anime.Title.ByUser(user))
//- if anime.StartDate != ""
//- .anime-start-date

View File

@ -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)

View File

@ -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

View File

@ -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

View File

@ -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)