web/notify.moe
Code Issues Pull Requests Activity

Use a height buffer for video seek clicks

Browse Source
This commit is contained in:
Eduard Urbach 2018-12-08 09:12:50 +09:00
parent f8382f5093
commit b1d64007a6
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mixins/AMV.pixy
View File

@ -17,6 +17,7 @@ component AMVVideo(amv *arn.AMV)
//- RawIcon("play")
.video-controls
.video-progress-clickable
.video-progress-container
.video-progress

6
scripts/AnimeNotifier.ts
View File

@ -917,7 +917,7 @@ export default class AnimeNotifier {
})
let progressElement = video.parentElement.getElementsByClassName("video-progress")[0] as HTMLElement
let progressContainer = video.parentElement.getElementsByClassName("video-progress-container")[0]
let progressClickable = video.parentElement.getElementsByClassName("video-progress-clickable")[0]
let timeElement = video.parentElement.getElementsByClassName("video-time")[0]
video.addEventListener("canplay", () => {
@ -948,8 +948,8 @@ export default class AnimeNotifier {
this.loading(false)
})
progressContainer.addEventListener("click", (e: MouseEvent) => {
let rect = progressContainer.getBoundingClientRect()
progressClickable.addEventListener("click", (e: MouseEvent) => {
let rect = progressClickable.getBoundingClientRect()
let x = e.clientX
let progress = (x - rect.left) / rect.width
video.currentTime = progress * video.duration

11
styles/video.scarlet
View File

@ -1,5 +1,7 @@
const video-padding = 56.25%
const video-control-color = rgba(255, 255, 255, 0.75)
const video-progress-height = 0.35rem
const video-progress-clickable-height-buffer = 0.4rem
.video-container
position relative
@ -35,9 +37,12 @@ const video-control-color = rgba(255, 255, 255, 0.75)
:hover
opacity 1 !important
.video-progress-container
.video-progress-clickable
flex 1
height 5px
padding video-progress-clickable-height-buffer 0
.video-progress-container
height video-progress-height
background rgba(255, 255, 255, 0.3)
border-radius ui-element-border-radius
transform translateZ(0)
@ -46,7 +51,7 @@ const video-control-color = rgba(255, 255, 255, 0.75)
.video-progress
background white
width 100%
height 100%
height video-progress-height
transform scaleX(0)
transform-origin 0
will-change transform