Improved video loading

This commit is contained in:
Eduard Urbach 2018-04-15 11:14:11 +02:00
parent b6321de60b
commit d8714f92a2
7 changed files with 75 additions and 7 deletions

View File

@ -1,8 +1,8 @@
component AMV(amv *arn.AMV, user *arn.User) component AMV(amv *arn.AMV, user *arn.User)
.amv.mountable .amv.mountable
.video-container .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) AMVFooter(amv, user)

View File

@ -21,6 +21,14 @@ component AMVPage(amv *arn.AMV, user *arn.User)
.amv-extra-anime.mountable .amv-extra-anime.mountable
AnimeGridSmall(amv.ExtraAnime(), user) 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) component AnimeGridSmall(animes []*arn.Anime, user *arn.User)
each anime in animes each anime in animes
a.mountable(href=anime.Link(), title=anime.Title.ByUser(user)) a.mountable(href=anime.Link(), title=anime.Title.ByUser(user))

View File

@ -4,7 +4,6 @@
.amv .amv
width 100% width 100%
margin calc(content-padding / 2)
.video-container .video-container
box-shadow shadow-medium box-shadow shadow-medium
@ -29,6 +28,14 @@
img img
border-radius ui-element-border-radius border-radius ui-element-border-radius
.amv-links
margin-top 1rem
.amv-link
list-style none
margin-left 0
text-align center
> 500px > 500px
.amvs .amvs
horizontal-wrap horizontal-wrap
@ -37,3 +44,4 @@
.amv .amv
max-width 380px max-width 380px
margin calc(content-padding / 2)

View File

@ -1,7 +1,10 @@
package amvs package amvs
import ( import (
"sort"
"github.com/aerogo/aero" "github.com/aerogo/aero"
"github.com/animenotifier/arn"
"github.com/animenotifier/notify.moe/components" "github.com/animenotifier/notify.moe/components"
"github.com/animenotifier/notify.moe/utils" "github.com/animenotifier/notify.moe/utils"
) )
@ -10,12 +13,32 @@ import (
func Latest(ctx *aero.Context) string { func Latest(ctx *aero.Context) string {
user := utils.GetUser(ctx) 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. // Best AMVs.
func Best(ctx *aero.Context) string { func Best(ctx *aero.Context) string {
user := utils.GetUser(ctx) 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))
} }

View File

@ -14,7 +14,7 @@ component AMVs(amvs []*arn.AMV, nextIndex int, tag string, user *arn.User)
Icon("pencil") Icon("pencil")
span Edit draft span Edit draft
#load-more-target.amvs #load-more-target.amvs.amvs-page
AMVsScrollable(amvs, user) AMVsScrollable(amvs, user)
if nextIndex != -1 if nextIndex != -1

2
pages/amvs/amvs.scarlet Normal file
View File

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

View File

@ -545,6 +545,10 @@ export default class AnimeNotifier {
this.lazyLoadImage(element as HTMLImageElement) this.lazyLoadImage(element as HTMLImageElement)
break break
case "VIDEO":
this.lazyLoadVideo(element as HTMLVideoElement)
break
case "IFRAME": case "IFRAME":
this.lazyLoadIFrame(element as HTMLIFrameElement) this.lazyLoadIFrame(element as HTMLIFrameElement)
break break
@ -638,6 +642,29 @@ export default class AnimeNotifier {
this.visibilityObserver.observe(element) 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>) { mountMountables(elements?: IterableIterator<HTMLElement>) {
if(!elements) { if(!elements) {
elements = findAll("mountable") elements = findAll("mountable")