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 = (
+
+
+
+
+
+
+
+
+
+
+);
+const splashScreen = (
+
+);
+const saveManager = (
+
+);
+const volumeControlsModal = (
+
+);
+const videoModal = (
+
+);
+const hardwareAccelerationModal = (
+
+);
const shortcutModifier = navigator.userAgent.includes("Mac OS X")
? "Command"
: "Ctrl";
-export const ruffleShadowTemplate = (
- <>
-
-
-
-
-
-
-
-
-
-
-
+const clipboardModal = (
+
+
+
+
{ text("clipboard-message-title") }
+
+
+ { shortcutModifier }+C
+ { text("clipboard-message-copy") }
+
+
+ { shortcutModifier }+X
+ { text("clipboard-message-cut") }
+
+
+ { shortcutModifier }+V
+ { text("clipboard-message-paste") }
+
-
-
-
-
-
-
-
-
-
{ text("clipboard-message-title") }
-
-
- { shortcutModifier }+C
- { text("clipboard-message-copy") }
-
-
- { shortcutModifier }+X
- { text("clipboard-message-cut") }
-
-
- { shortcutModifier }+V
- { text("clipboard-message-paste") }
-
-
-
-
- >
+
);
+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