Add taking screenshot animation

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 {

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);
+}

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,