From a6a25dbb773fade0439988cf4cf99cfca3678712 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Tue, 14 Dec 2021 22:15:08 +0530
Subject: [PATCH] Updated event handling for custom video player

refs https://github.com/TryGhost/Team/issues/1229
---
 core/frontend/src/cards/js/video.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/core/frontend/src/cards/js/video.js b/core/frontend/src/cards/js/video.js
index b9b85dac5e..90a07f95e5 100644
--- a/core/frontend/src/cards/js/video.js
+++ b/core/frontend/src/cards/js/video.js
@@ -162,19 +162,22 @@
             handleOnPause();
         });
 
-        muteIconContainer.addEventListener('click', () => {
+        muteIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
             muteIconContainer.classList.add("kg-video-hide");
             unmuteIconContainer.classList.remove("kg-video-hide");
             videoEl.muted = false;
         });
 
-        unmuteIconContainer.addEventListener('click', () => {
+        unmuteIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
             unmuteIconContainer.classList.add("kg-video-hide");
             muteIconContainer.classList.remove("kg-video-hide");
             videoEl.muted = true;
         });
 
-        playbackRateContainer.addEventListener('click', () => {
+        playbackRateContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
             let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5];
             currentPlaybackRateIdx = currentPlaybackRateIdx + 1;
             videoEl.playbackRate = nextPlaybackRate.rate;
@@ -184,6 +187,7 @@
         videoEl.addEventListener('progress', displayBufferedAmount);
 
         seekSlider.addEventListener('input', (e) => {
+            e.stopPropagation();
             showRangeProgress(e.target);
             currentTimeContainer.textContent = calculateTime(seekSlider.value);
             if (!videoEl.paused) {
@@ -191,14 +195,24 @@
             }
         });
 
-        seekSlider.addEventListener('change', () => {
+        seekSlider.addEventListener('change', (event) => {
+            event.stopPropagation();
             videoEl.currentTime = seekSlider.value;
             if (!videoEl.paused) {
                 requestAnimationFrame(whilePlaying);
             }
         });
 
+        volumeSlider.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+
+        seekSlider.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+
         volumeSlider.addEventListener('input', (e) => {
+            e.stopPropagation();
             const value = e.target.value;
             showRangeProgress(e.target);
             videoEl.volume = value / 100;