From 6489b550c9d87153075f8db159491b0bf0749a9f Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sun, 9 Dec 2018 11:57:37 +0900 Subject: [PATCH] Added play and pause button --- mixins/AMV.pixy | 2 +- mixins/VideoControls.pixy | 8 +++++++- pages/episode/episode.pixy | 7 ++++--- scripts/Actions/Video.ts | 13 ++++++++----- scripts/AnimeNotifier.ts | 12 ++++++++++++ styles/video.scarlet | 11 ++++++++++- 6 files changed, 42 insertions(+), 11 deletions(-) diff --git a/mixins/AMV.pixy b/mixins/AMV.pixy index bd85bfea..fb176a74 100644 --- a/mixins/AMV.pixy +++ b/mixins/AMV.pixy @@ -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 diff --git a/mixins/VideoControls.pixy b/mixins/VideoControls.pixy index ffac57f6..f79d9f11 100644 --- a/mixins/VideoControls.pixy +++ b/mixins/VideoControls.pixy @@ -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") \ No newline at end of file diff --git a/pages/episode/episode.pixy b/pages/episode/episode.pixy index acda5ebb..1335c9b2 100644 --- a/pages/episode/episode.pixy +++ b/pages/episode/episode.pixy @@ -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)) diff --git a/scripts/Actions/Video.ts b/scripts/Actions/Video.ts index 5d4b2fc5..bf019be8 100644 --- a/scripts/Actions/Video.ts +++ b/scripts/Actions/Video.ts @@ -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 { diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 57c3d527..144b4d1f 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -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 diff --git a/styles/video.scarlet b/styles/video.scarlet index 0a7d5117..725eacb4 100644 --- a/styles/video.scarlet +++ b/styles/video.scarlet @@ -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 \ No newline at end of file