Improved video controls

This commit is contained in:
Eduard Urbach 2018-12-08 04:40:27 +09:00
parent 4001f3dad8
commit de70254ce7
4 changed files with 48 additions and 11 deletions

View File

@ -9,7 +9,7 @@ component AMVMini(amv *arn.AMV, user *arn.User)
AMVMiniFooter(amv, user) AMVMiniFooter(amv, user)
component AMVVideo(amv *arn.AMV) component AMVVideo(amv *arn.AMV)
.video-container(id=amv.ID) .video-container(id=amv.ID, data-api="/api/amv/" + amv.ID)
video.video.media-play-area.lazy.action(data-action="playVideo", data-trigger="click", data-media-id=amv.ID) video.video.media-play-area.lazy.action(data-action="playVideo", data-trigger="click", data-media-id=amv.ID)
source(data-src="https://notify.moe/videos/amvs/" + amv.File, data-type="video/webm") source(data-src="https://notify.moe/videos/amvs/" + amv.File, data-type="video/webm")
@ -17,7 +17,12 @@ component AMVVideo(amv *arn.AMV)
//- RawIcon("play") //- RawIcon("play")
.video-controls .video-controls
button.video-control.action(data-action="toggleFullscreen", data-trigger="click", data-id=amv.ID) .video-duration= fmt.Sprintf("%d:%02d", int(amv.Info.Duration.Minutes()), int(amv.Info.Duration.Seconds()) % 60)
//- button.video-control.action(data-action="like", data-trigger="click")
//- RawIcon("heart-o")
button.video-control.action(data-action="toggleFullscreen", data-trigger="click", data-id=amv.ID, aria-label="Fullscreen")
RawIcon("square-o") RawIcon("square-o")
component AMVFooter(amv *arn.AMV, user *arn.User) component AMVFooter(amv *arn.AMV, user *arn.User)

View File

@ -9,11 +9,11 @@ export function playVideo(arn: AnimeNotifier, video: HTMLVideoElement) {
return return
} }
video.load()
video.addEventListener("loadeddata", () => { video.addEventListener("loadeddata", () => {
togglePlayVideo(video) togglePlayVideo(video)
}) })
video.load()
} }
function togglePlayVideo(video: HTMLVideoElement) { function togglePlayVideo(video: HTMLVideoElement) {

View File

@ -891,13 +891,30 @@ export default class AnimeNotifier {
} }
lazyLoadVideo(video: HTMLVideoElement) { lazyLoadVideo(video: HTMLVideoElement) {
const hideControlsDelay = 1500
// Once the video becomes visible, load it // Once the video becomes visible, load it
video["became visible"] = () => { video["became visible"] = () => {
// video.pause()
// Prevent context menu // Prevent context menu
video.addEventListener("contextmenu", e => e.preventDefault()) video.addEventListener("contextmenu", e => e.preventDefault())
// Show and hide controls on mouse movement
let controls = video.parentElement.getElementsByClassName("video-controls")[0]
let hideControls = () => {
controls.classList.add("fade-out")
}
let showControls = () => {
controls.classList.remove("fade-out")
}
video.addEventListener("mousemove", () => {
showControls()
clearTimeout(video["hideControlsTimeout"])
video["hideControlsTimeout"] = setTimeout(hideControls, hideControlsDelay)
})
let modified = false let modified = false
for(let child of video.children) { for(let child of video.children) {
@ -916,7 +933,6 @@ export default class AnimeNotifier {
if(modified) { if(modified) {
Diff.mutations.queue(() => { Diff.mutations.queue(() => {
// video.load()
video.classList.add("element-found") video.classList.add("element-found")
}) })
} }

View File

@ -1,4 +1,5 @@
const video-padding = 56.25% const video-padding = 56.25%
const video-control-color = rgba(255, 255, 255, 0.75)
.video-container .video-container
position relative position relative
@ -22,16 +23,31 @@ const video-padding = 56.25%
.video-controls .video-controls
position absolute position absolute
bottom 1rem bottom 0.5rem
right 1rem right 0.75rem
opacity 0 opacity 0
horizontal
align-items center
default-transition default-transition
:hover
opacity 1 !important
.video-duration
color video-control-color
.video-control .video-control
background transparent background transparent !important
color video-control-color
border none border none
color white
font-size 1.2rem font-size 1.2rem
line-height 1em
height auto
padding 0
margin-left 0.5rem
:hover
color white
::-webkit-media-controls ::-webkit-media-controls
display none !important display none !important