From a03b2fdea6f5fb83463fcd1a8bd02864abc901e9 Mon Sep 17 00:00:00 2001
From: Nathan Adams <dinnerbone@dinnerbone.com>
Date: Fri, 20 Nov 2020 10:02:12 +0100
Subject: [PATCH] web: Add mute overlay

Original code by Toad06 as part of PR #1161
---
 web/packages/core/src/ruffle-player.ts   | 30 +++++++++++++++++++++++
 web/packages/core/src/shadow-template.ts | 31 +++++++++++++++++++++++-
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/web/packages/core/src/ruffle-player.ts b/web/packages/core/src/ruffle-player.ts
index e163ee1ce..42e027916 100644
--- a/web/packages/core/src/ruffle-player.ts
+++ b/web/packages/core/src/ruffle-player.ts
@@ -80,6 +80,7 @@ export class RufflePlayer extends HTMLElement {
     private dynamicStyles: HTMLStyleElement;
     private container: HTMLElement;
     private playButton: HTMLElement;
+    private unmuteOverlay: HTMLElement;
     private rightClickMenu: HTMLElement;
     private instance: Ruffle | null;
     private _trace_observer: ((message: string) => void) | null;
@@ -116,6 +117,13 @@ export class RufflePlayer extends HTMLElement {
                 this.playButtonClicked.bind(this)
             );
         }
+
+        this.unmuteOverlay = this.shadow.getElementById("unmute_overlay")!;
+        this.unmuteOverlay.addEventListener(
+            "click",
+            this.unmuteOverlayClicked.bind(this)
+        );
+
         this.rightClickMenu = this.shadow.getElementById("right_click_menu")!;
 
         this.addEventListener(
@@ -477,6 +485,28 @@ export class RufflePlayer extends HTMLElement {
         }
     }
 
+    private audioState(): string {
+        if (this.instance) {
+            const audioContext = this.instance.audio_context();
+            return (audioContext && audioContext.state) || "running";
+        }
+        return "suspended";
+    }
+
+    private unmuteOverlayClicked(): void {
+        if (this.instance) {
+            if (this.audioState() !== "running") {
+                const audioContext = this.instance.audio_context();
+                if (audioContext) {
+                    audioContext.resume();
+                }
+            }
+            if (this.unmuteOverlay) {
+                this.unmuteOverlay.style.display = "none";
+            }
+        }
+    }
+
     /**
      * Load a movie's data into this Ruffle Player instance.
      *
diff --git a/web/packages/core/src/shadow-template.ts b/web/packages/core/src/shadow-template.ts
index ff56b6a78..68937cabf 100644
--- a/web/packages/core/src/shadow-template.ts
+++ b/web/packages/core/src/shadow-template.ts
@@ -51,6 +51,34 @@ ruffleShadowTemplate.innerHTML = `
         #play_button:hover .icon {
             filter: brightness(1.3);
         }
+        
+        #unmute_overlay {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+            display: none;
+        }
+        
+        #unmute_overlay .background {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: #000;
+            opacity: 0.8;
+        }
+        
+        #unmute_overlay .icon {
+            position: relative;
+            top: 50%;
+            left: 50%;
+            width: 90%;
+            height: 90%;
+            max-width: 500px;
+            max-height: 500px;
+            transform: translate(-50%, -50%);
+            opacity: 0.6;
+        }
 
         #panic {
             position: absolute;
@@ -58,7 +86,7 @@ ruffleShadowTemplate.innerHTML = `
             height: 100%;
             /* Inverted colours from play button! */
             background: linear-gradient(180deg, rgba(253,58,64,1) 0%, rgba(253,161,56,1) 100%);
-            color: black;
+            color: #000;
         }
 
         #panic a {
@@ -159,6 +187,7 @@ ruffleShadowTemplate.innerHTML = `
 
     <div id="container">
         <div id="play_button"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" viewBox="0 0 250 250" style="width:100%;height:100%;"><defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="125" y1="0" x2="125" y2="250" spreadMethod="pad"><stop offset="0%" stop-color="#FDA138"/><stop offset="100%" stop-color="#FD3A40"/></linearGradient><g id="b"><path fill="url(#a)" d="M250 125q0-52-37-88-36-37-88-37T37 37Q0 73 0 125t37 88q36 37 88 37t88-37q37-36 37-88M87 195V55l100 70-100 70z"/><path fill="#FFF" d="M87 55v140l100-70L87 55z"/></g></defs><use xlink:href="#b"/></svg></div></div>
+        <div id="unmute_overlay"><div class="background"></div><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" viewBox="0 0 512 584" style="width:100%;height:100%;scale:0.8;"><path fill="#FFF" stroke="#FFF" d="m457.941 256 47.029-47.029c9.372-9.373 9.372-24.568 0-33.941-9.373-9.373-24.568-9.373-33.941 0l-47.029 47.029-47.029-47.029c-9.373-9.373-24.568-9.373-33.941 0-9.372 9.373-9.372 24.568 0 33.941l47.029 47.029-47.029 47.029c-9.372 9.373-9.372 24.568 0 33.941 4.686 4.687 10.827 7.03 16.97 7.03s12.284-2.343 16.971-7.029l47.029-47.03 47.029 47.029c4.687 4.687 10.828 7.03 16.971 7.03s12.284-2.343 16.971-7.029c9.372-9.373 9.372-24.568 0-33.941z"/><path fill="#FFF" stroke="#FFF" d="m99 160h-55c-24.301 0-44 19.699-44 44v104c0 24.301 19.699 44 44 44h55c2.761 0 5-2.239 5-5v-182c0-2.761-2.239-5-5-5z"/><path fill="#FFF" stroke="#FFF" d="m280 56h-24c-5.269 0-10.392 1.734-14.578 4.935l-103.459 79.116c-1.237.946-1.963 2.414-1.963 3.972v223.955c0 1.557.726 3.026 1.963 3.972l103.459 79.115c4.186 3.201 9.309 4.936 14.579 4.936h23.999c13.255 0 24-10.745 24-24v-352.001c0-13.255-10.745-24-24-24z"/><text x="256" y="560" text-anchor="middle" style="font-size:60px;fill:#FFF;stroke:#FFF;">Click to unmute</text></svg></div></div>
     </div>
 
     <ul id="right_click_menu" style="display: none"></ul>