diff --git a/mixins/AMV.pixy b/mixins/AMV.pixy index e37e0c25..f245fe56 100644 --- a/mixins/AMV.pixy +++ b/mixins/AMV.pixy @@ -1,8 +1,8 @@ component AMV(amv *arn.AMV, user *arn.User) .amv.mountable .video-container - video.video(controls="controls", controlsList="nodownload") - source(src="/videos/amvs/" + amv.File, type="video/webm") + video.video.lazy(controls="controls", controlsList="nodownload") + div(data-src="/videos/amvs/" + amv.File, data-type="video/webm") AMVFooter(amv, user) diff --git a/pages/amv/amv.pixy b/pages/amv/amv.pixy index f5037027..f1182bcb 100644 --- a/pages/amv/amv.pixy +++ b/pages/amv/amv.pixy @@ -20,6 +20,14 @@ component AMVPage(amv *arn.AMV, user *arn.User) if len(amv.ExtraAnimeIDs) > 0 .amv-extra-anime.mountable AnimeGridSmall(amv.ExtraAnime(), user) + + if len(amv.Links) > 0 + //- h3.mountable Links + + ul.amv-links + each link in amv.Links + li.amv-link.mountable + a(href=link.URL)= link.Title component AnimeGridSmall(animes []*arn.Anime, user *arn.User) each anime in animes diff --git a/pages/amv/amv.scarlet b/pages/amv/amv.scarlet index cbbc7263..3a78ca53 100644 --- a/pages/amv/amv.scarlet +++ b/pages/amv/amv.scarlet @@ -4,7 +4,6 @@ .amv width 100% - margin calc(content-padding / 2) .video-container box-shadow shadow-medium @@ -29,6 +28,14 @@ img border-radius ui-element-border-radius +.amv-links + margin-top 1rem + +.amv-link + list-style none + margin-left 0 + text-align center + > 500px .amvs horizontal-wrap @@ -36,4 +43,5 @@ margin-top 0 .amv - max-width 380px \ No newline at end of file + max-width 380px + margin calc(content-padding / 2) \ No newline at end of file diff --git a/pages/amvs/amvs.go b/pages/amvs/amvs.go index d5a813b7..94b69b57 100644 --- a/pages/amvs/amvs.go +++ b/pages/amvs/amvs.go @@ -1,7 +1,10 @@ package amvs import ( + "sort" + "github.com/aerogo/aero" + "github.com/animenotifier/arn" "github.com/animenotifier/notify.moe/components" "github.com/animenotifier/notify.moe/utils" ) @@ -10,12 +13,32 @@ import ( func Latest(ctx *aero.Context) string { user := utils.GetUser(ctx) - return ctx.HTML(components.AMVs(nil, -1, "", user)) + amvs := arn.FilterAMVs(func(amv *arn.AMV) bool { + return !amv.IsDraft + }) + + sort.Slice(amvs, func(i, j int) bool { + return amvs[i].Created > amvs[j].Created + }) + + return ctx.HTML(components.AMVs(amvs, -1, "", user)) } // Best AMVs. func Best(ctx *aero.Context) string { user := utils.GetUser(ctx) - return ctx.HTML(components.AMVs(nil, -1, "", user)) + amvs := arn.FilterAMVs(func(amv *arn.AMV) bool { + return !amv.IsDraft + }) + + sort.Slice(amvs, func(i, j int) bool { + if len(amvs[i].Likes) == len(amvs[j].Likes) { + return amvs[i].Title.String() < amvs[j].Title.String() + } + + return len(amvs[i].Likes) > len(amvs[j].Likes) + }) + + return ctx.HTML(components.AMVs(amvs, -1, "", user)) } diff --git a/pages/amvs/amvs.pixy b/pages/amvs/amvs.pixy index c2d400bb..0b75cbe9 100644 --- a/pages/amvs/amvs.pixy +++ b/pages/amvs/amvs.pixy @@ -14,7 +14,7 @@ component AMVs(amvs []*arn.AMV, nextIndex int, tag string, user *arn.User) Icon("pencil") span Edit draft - #load-more-target.amvs + #load-more-target.amvs.amvs-page AMVsScrollable(amvs, user) if nextIndex != -1 diff --git a/pages/amvs/amvs.scarlet b/pages/amvs/amvs.scarlet new file mode 100644 index 00000000..284e3d06 --- /dev/null +++ b/pages/amvs/amvs.scarlet @@ -0,0 +1,2 @@ +.amvs-page + justify-content center !important \ No newline at end of file diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 7e693a54..60333bd9 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -545,6 +545,10 @@ export default class AnimeNotifier { this.lazyLoadImage(element as HTMLImageElement) break + case "VIDEO": + this.lazyLoadVideo(element as HTMLVideoElement) + break + case "IFRAME": this.lazyLoadIFrame(element as HTMLIFrameElement) break @@ -638,6 +642,29 @@ export default class AnimeNotifier { this.visibilityObserver.observe(element) } + lazyLoadVideo(video: HTMLVideoElement) { + // Once the video becomes visible, load it + video["became visible"] = () => { + video.pause() + + for(let child of video.children) { + let div = child as HTMLDivElement + let source = document.createElement("source") + source.src = div.dataset.src + source.type = div.dataset.type + + Diff.mutations.queue(() => video.replaceChild(source, div)) + } + + Diff.mutations.queue(() => { + video.load() + video.classList.add("element-found") + }) + } + + this.visibilityObserver.observe(video) + } + mountMountables(elements?: IterableIterator) { if(!elements) { elements = findAll("mountable")