feat: Ruffle embed fullscreen button

FlashpointProject · Oct 14, 2023 · af27e3a · af27e3a
1 parent a1470ac
commit af27e3a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/extensions/core-ruffle/static/templates/basic.css b/extensions/core-ruffle/static/templates/basic.css
@@ -23,4 +23,10 @@ body {
   text-align: center;
   margin-top: 1rem;
   margin-bottom: 1rem;
+}
+.button-row {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
 }
diff --git a/extensions/core-ruffle/static/templates/basic.mustache b/extensions/core-ruffle/static/templates/basic.mustache
@@ -10,18 +10,25 @@
     <div class="page-content">
       <div class="game-title">{{title}}</div>
       <div id="embed-container"></div>
+      <div class="button-row">
+        <button class="button-basic" onclick="(() => {
+          window.player.enterFullscreen();
+        })()">Fullscreen</button>
+      </div>
 
       <script>
         window.RufflePlayer = window.RufflePlayer || {};
         window.RufflePlayer.config = {
           "allowScriptAccess": true,
+          "autoplay": "on",
         }
         window.addEventListener("load", (event) => {
           const ruffle = window.RufflePlayer.newest();
           const player = ruffle.createPlayer();
           const container = document.getElementById("embed-container");
           container.appendChild(player);
           player.load("{{{sourceUrl}}}");
+          window.player = player;
         });
       </script>
       <script src="http://ruffle.rs/ruffle.js"></script>