Improved video loading

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")
+			video.video.lazy(controls="controls", controlsList="nodownload")
-				source(src="/videos/amvs/" + amv.File, type="video/webm")
+				div(data-src="/videos/amvs/" + amv.File, data-type="video/webm")
 		
 		AMVFooter(amv, user)
 

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

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
+		max-width 380px
+		margin calc(content-padding / 2)

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

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

pages/amvs/amvs.scarlet

@@ -0,0 +1,2 @@
+.amvs-page
+	justify-content center !important

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<HTMLElement>) {
 		if(!elements) {
 			elements = findAll("mountable")