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

5
mixins/AMV.pixy
View File

@ -17,8 +17,9 @@ component AMVVideo(amv *arn.AMV)
//- RawIcon("play") //- RawIcon("play")
.video-controls .video-controls
.video-progress-container .video-progress-clickable
.video-progress .video-progress-container
.video-progress
.video-time= fmt.Sprintf("%d:%02d", int(amv.Info.Duration.Minutes()), int(amv.Info.Duration.Seconds()) % 60) .video-time= fmt.Sprintf("%d:%02d", int(amv.Info.Duration.Minutes()), int(amv.Info.Duration.Seconds()) % 60)

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

11
styles/video.scarlet
View File

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