Added play and pause button

This commit is contained in:
Eduard Urbach 2018-12-09 11:57:37 +09:00
parent 85f140fb18
commit 6489b550c9
6 changed files with 42 additions and 11 deletions

View File

@ -10,7 +10,7 @@ component AMVMini(amv *arn.AMV, user *arn.User)
component AMVVideo(amv *arn.AMV) component AMVVideo(amv *arn.AMV)
.video-container(id=amv.ID, data-api="/api/amv/" + amv.ID) .video-container(id=amv.ID, data-api="/api/amv/" + amv.ID)
video.video.lazy.action(data-action="playVideo", data-trigger="click", data-media-id=amv.ID) video.video.lazy.action(data-action="toggleFullscreen", data-trigger="dblclick", data-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")
//- button.media-play-button //- button.media-play-button

View File

@ -1,5 +1,11 @@
component VideoControls(containerId string, duration time.Duration) component VideoControls(containerId string, duration time.Duration)
.video-controls .video-controls
button.video-control.video-control-play.action(data-action="togglePlayVideo", data-trigger="click", data-media-id=containerId, aria-label="Play")
RawIcon("play")
button.video-control.video-control-pause.action(data-action="togglePlayVideo", data-trigger="click", data-media-id=containerId, aria-label="Pause")
RawIcon("pause")
.video-progress-clickable .video-progress-clickable
.video-progress-container .video-progress-container
.video-progress .video-progress
@ -9,5 +15,5 @@ component VideoControls(containerId string, duration time.Duration)
//- button.video-control.action(data-action="like", data-trigger="click") //- button.video-control.action(data-action="like", data-trigger="click")
//- RawIcon("heart-o") //- RawIcon("heart-o")
button.video-control.action(data-action="toggleFullscreen", data-trigger="click", data-id=containerId, aria-label="Fullscreen") button.video-control.video-control-fullscreen.action(data-action="toggleFullscreen", data-trigger="click", data-id=containerId, aria-label="Fullscreen")
RawIcon("fullscreen") RawIcon("fullscreen")

View File

@ -2,11 +2,12 @@ component AnimeEpisode(anime *arn.Anime, episode *arn.AnimeEpisode, episodeIndex
h1 h1
a(href=anime.Link())= anime.Title.ByUser(user) a(href=anime.Link())= anime.Title.ByUser(user)
if anime.ID == "VhRKhKimR" && episode.Number == 10 if anime.ID == "GWyShKmiR" && episode.Number == 10
.widget-form.amv-page .widget-form.amv-page
.video-container(id="stream-test") .video-container(id="stream-test")
video.video.lazy.action(data-action="playVideo", data-trigger="click", data-media-id="stream-test") video.video.lazy.action(data-action="togglePlayVideo", data-trigger="click", data-media-id="stream-test")
source(data-src="https://arn.sfo2.cdn.digitaloceanspaces.com/videos/anime/VhRKhKimR/10.webm", data-type="video/webm") source(data-src="https://arn.sfo2.cdn.digitaloceanspaces.com/videos/anime/GWyShKmiR/10.webm", data-type="video/webm")
track(label="English", kind="subtitles", srclang="en", src="https://arn.sfo2.cdn.digitaloceanspaces.com/videos/anime/GWyShKmiR/10.en.vtt", default)
VideoControls("stream-test", time.Duration(0)) VideoControls("stream-test", time.Duration(0))

View File

@ -1,22 +1,25 @@
import AnimeNotifier from "../AnimeNotifier" import AnimeNotifier from "../AnimeNotifier"
// Play video // Toggle play video
export function playVideo(arn: AnimeNotifier, video: HTMLVideoElement) { export function togglePlayVideo(arn: AnimeNotifier, element: HTMLElement) {
let container = document.getElementById(element.dataset.mediaId)
let video = container.getElementsByTagName("video")[0]
video.volume = arn.audioPlayer.volume video.volume = arn.audioPlayer.volume
if(video.readyState >= 2) { if(video.readyState >= 2) {
togglePlayVideo(video) togglePlayVideoElement(video)
return return
} }
video.addEventListener("canplay", () => { video.addEventListener("canplay", () => {
togglePlayVideo(video) togglePlayVideoElement(video)
}) })
video.load() video.load()
} }
function togglePlayVideo(video: HTMLVideoElement) { function togglePlayVideoElement(video: HTMLVideoElement) {
if(video.paused) { if(video.paused) {
video.play() video.play()
} else { } else {

View File

@ -901,6 +901,8 @@ export default class AnimeNotifier {
// Show and hide controls on mouse movement // Show and hide controls on mouse movement
let controls = video.parentElement.getElementsByClassName("video-controls")[0] let controls = video.parentElement.getElementsByClassName("video-controls")[0]
let playButton = video.parentElement.getElementsByClassName("video-control-play")[0] as HTMLElement
let pauseButton = video.parentElement.getElementsByClassName("video-control-pause")[0] as HTMLElement
let hideControls = () => { let hideControls = () => {
controls.classList.add("fade-out") controls.classList.add("fade-out")
@ -950,6 +952,16 @@ export default class AnimeNotifier {
this.loading(false) this.loading(false)
}) })
video.addEventListener("play", () => {
playButton.style.display = "none"
pauseButton.style.display = "block"
})
video.addEventListener("pause", () => {
playButton.style.display = "block"
pauseButton.style.display = "none"
})
progressClickable.addEventListener("click", (e: MouseEvent) => { progressClickable.addEventListener("click", (e: MouseEvent) => {
let rect = progressClickable.getBoundingClientRect() let rect = progressClickable.getBoundingClientRect()
let x = e.clientX let x = e.clientX

View File

@ -70,10 +70,19 @@ const video-progress-clickable-height-buffer = 0.4rem
line-height 1em line-height 1em
height auto height auto
padding 0 padding 0
margin-left 0.5rem
:hover :hover
color white color white
.video-control-fullscreen
margin-left 0.5rem
.video-control-play,
.video-control-pause
margin-right 0.5rem
.video-control-pause
display none
::-webkit-media-controls ::-webkit-media-controls
display none !important display none !important