From 0c878207c6fbe0ecf8ce9725884d9abb189bade6 Mon Sep 17 00:00:00 2001 From: Daniel Jacobs Date: Wed, 17 Jul 2024 18:45:51 -0400 Subject: [PATCH] web: Use namespaces for SVG elements and split elements in template --- web/packages/core/src/globals.d.ts | 1 + web/packages/core/src/ruffle-player.tsx | 3 +- web/packages/core/src/shadow-template.tsx | 253 ++++++++++++---------- 3 files changed, 142 insertions(+), 115 deletions(-) diff --git a/web/packages/core/src/globals.d.ts b/web/packages/core/src/globals.d.ts index 9886dff0d..76611ae21 100644 --- a/web/packages/core/src/globals.d.ts +++ b/web/packages/core/src/globals.d.ts @@ -14,6 +14,7 @@ module "tsx-dom-types" { } interface SVGSVGElement { xmlns?: string; + "xmlns:xlink"?: string; scale?: string | number; } interface SVGPathElement { diff --git a/web/packages/core/src/ruffle-player.tsx b/web/packages/core/src/ruffle-player.tsx index 0e6f59ad0..37247817d 100644 --- a/web/packages/core/src/ruffle-player.tsx +++ b/web/packages/core/src/ruffle-player.tsx @@ -225,8 +225,7 @@ export class RufflePlayer extends HTMLElement { super(); this.shadow = this.attachShadow({ mode: "open" }); - console.log(ruffleShadowTemplate); - this.shadow.appendChild(ruffleShadowTemplate.cloneNode(true)); + this.shadow.appendChild(ruffleShadowTemplate.content.cloneNode(true)); this.dynamicStyles = this.shadow.getElementById( "dynamic-styles", diff --git a/web/packages/core/src/shadow-template.tsx b/web/packages/core/src/shadow-template.tsx index 24c6612e2..ce4353421 100644 --- a/web/packages/core/src/shadow-template.tsx +++ b/web/packages/core/src/shadow-template.tsx @@ -489,121 +489,148 @@ const css = ` --modal-foreground-filter: invert(90%); } }`; +const staticStyles = ( + +); +const dynamicStyles = ( + +); +const container = ( +
+
+
+ + + + + + + + + + + + + +
+
+
+
+
+ + + + + + Click to unmute + + +
+
+ +
+); +const splashScreen = ( + +); +const saveManager = ( + +); +const volumeControlsModal = ( + +); +const videoModal = ( + +); +const hardwareAccelerationModal = ( + +); const shortcutModifier = navigator.userAgent.includes("Mac OS X") ? "Command" : "Ctrl"; -export const ruffleShadowTemplate = ( - <> - - -
-
-
- - - - - - - - - - - - - -
-
-
-
-
- - - - - - Click to unmute - - -
-
- +const clipboardModal = ( + ); +const contextMenuOverlay = ( + +); +export const ruffleShadowTemplate = document.createElement("template"); +ruffleShadowTemplate.content.appendChild(staticStyles); +ruffleShadowTemplate.content.appendChild(dynamicStyles); +ruffleShadowTemplate.content.appendChild(container); +ruffleShadowTemplate.content.appendChild(splashScreen); +ruffleShadowTemplate.content.appendChild(saveManager); +ruffleShadowTemplate.content.appendChild(volumeControlsModal); +ruffleShadowTemplate.content.appendChild(videoModal); +ruffleShadowTemplate.content.appendChild(hardwareAccelerationModal); +ruffleShadowTemplate.content.appendChild(clipboardModal); +ruffleShadowTemplate.content.appendChild(contextMenuOverlay); \ No newline at end of file