web/notify.moe
Code Issues Pull Requests Activity

Added play and pause button

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mixins/AMV.pixy
View File

@ -10,7 +10,7 @@ component AMVMini(amv *arn.AMV, user *arn.User)
component AMVVideo(amv *arn.AMV)
.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")
//- button.media-play-button

8
mixins/VideoControls.pixy
View File

@ -1,5 +1,11 @@
component VideoControls(containerId string, duration time.Duration)
.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-container
.video-progress
@ -9,5 +15,5 @@ component VideoControls(containerId string, duration time.Duration)
//- 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=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")

7
pages/episode/episode.pixy
View File

@ -2,11 +2,12 @@ component AnimeEpisode(anime *arn.Anime, episode *arn.AnimeEpisode, episodeIndex
h1
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
.video-container(id="stream-test")
video.video.lazy.action(data-action="playVideo", 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")
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/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))

13
scripts/Actions/Video.ts
View File

@ -1,22 +1,25 @@
import AnimeNotifier from "../AnimeNotifier"
// Play video
export function playVideo(arn: AnimeNotifier, video: HTMLVideoElement) {
// Toggle play video
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
if(video.readyState >= 2) {
togglePlayVideo(video)
togglePlayVideoElement(video)
return
}
video.addEventListener("canplay", () => {
togglePlayVideo(video)
togglePlayVideoElement(video)
})
video.load()
}
function togglePlayVideo(video: HTMLVideoElement) {
function togglePlayVideoElement(video: HTMLVideoElement) {
if(video.paused) {
video.play()
} else {

12
scripts/AnimeNotifier.ts
View File

@ -901,6 +901,8 @@ export default class AnimeNotifier {
// Show and hide controls on mouse movement
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 = () => {
controls.classList.add("fade-out")
@ -950,6 +952,16 @@ export default class AnimeNotifier {
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) => {
let rect = progressClickable.getBoundingClientRect()
let x = e.clientX

11
styles/video.scarlet
View File

@ -70,10 +70,19 @@ const video-progress-clickable-height-buffer = 0.4rem
line-height 1em
height auto
padding 0
margin-left 0.5rem
:hover
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
display none !important