From ae37c0660f41aefd09903c8f982e36112e14d5b5 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Sat, 11 May 2024 15:45:46 +0700
Subject: [PATCH] Add taking screenshot animation

---
 src/assets/css/root.styl   |  1 +
 src/assets/css/stream.styl | 23 +++++++++++++++++++++++
 src/utils/screenshot.ts    |  7 +++++++
 3 files changed, 31 insertions(+)

diff --git a/src/assets/css/root.styl b/src/assets/css/root.styl
index 56f5e13..6165207 100644
--- a/src/assets/css/root.styl
+++ b/src/assets/css/root.styl
@@ -29,6 +29,7 @@
     --bx-mkb-pointer-lock-msg-z-index: 8999;
     --bx-game-bar-z-index: 8888;
     --bx-wait-time-box-z-index: 100;
+    --bx-screenshot-animation-z-index: 1;
 }
 
 @font-face {
diff --git a/src/assets/css/stream.styl b/src/assets/css/stream.styl
index 1ff654b..fa29cbb 100644
--- a/src/assets/css/stream.styl
+++ b/src/assets/css/stream.styl
@@ -19,3 +19,26 @@ body[data-media-type=default] .bx-stream-refresh-button {
 body[data-media-type=tv] .bx-stream-refresh-button {
     top: calc(var(--gds-focus-borderSize) + 80px) !important;
 }
+
+@keyframes bx-anim-taking-screenshot {
+    0% {
+        border: 0px solid #ffffff80;
+    }
+
+    50% {
+        border: 8px solid #ffffff80;
+    }
+
+    100% {
+        border: 0px solid #ffffff80;
+    }
+}
+
+div[data-testid=media-container].bx-taking-screenshot:before {
+    animation: bx-anim-taking-screenshot 0.5s ease;
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: var(--bx-screenshot-animation-z-index);
+}
diff --git a/src/utils/screenshot.ts b/src/utils/screenshot.ts
index a748d3d..58de110 100644
--- a/src/utils/screenshot.ts
+++ b/src/utils/screenshot.ts
@@ -25,6 +25,10 @@ export class Screenshot {
         Screenshot.#filters = filters;
     }
 
+    private static onAnimationEnd(e: Event) {
+        (e.target as any).classList.remove('bx-taking-screenshot');
+    }
+
     static takeScreenshot(callback?: any) {
         const currentStream = STATES.currentStream;
         const $video = currentStream.$video;
@@ -33,6 +37,9 @@ export class Screenshot {
             return;
         }
 
+        $video.parentElement?.addEventListener('animationend', this.onAnimationEnd);
+        $video.parentElement?.classList.add('bx-taking-screenshot');
+
         const canvasContext = $canvas.getContext('2d', {
                 alpha: false,
                 willReadFrequently: false,