liangsheng8708
/
ruffle
mirror of https://mirror.ghproxy.com/https://github.com/ruffle-rs/ruffle.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

web: Improve hardware acceleration modal

This commit is contained in:
Wumbo 2024-06-23 20:59:36 -04:00 committed by Nathan Adams
parent aa26ca1d23
commit e315709e1f
3 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/packages/core/src/ruffle-player.ts
View File

@ -285,7 +285,7 @@ export class RufflePlayer extends HTMLElement {
this.addVolumeControlsJavaScript(this.volumeControls);
const backupSaves = <HTMLElement>(
this.saveManager.querySelector("#backup-saves")
this.saveManager.querySelector(".modal-button")
);
if (backupSaves) {
backupSaves.addEventListener("click", this.backupSaves.bind(this));

41
web/packages/core/src/shadow-template.ts
View File

@ -344,6 +344,16 @@ export function applyStaticStyles(styleElement: HTMLStyleElement) {
filter: var(--modal-foreground-filter);
}`,
`.modal-button {
display: inline-block;
background-color: rgba(var(--modal-foreground-rgb), 0.2);
color: rgb(var(--modal-foreground-rgb));
text-decoration: none;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
}`,
`:not(#volume-controls) > .close-modal {
position: absolute;
top: 14px;
@ -352,17 +362,10 @@ export function applyStaticStyles(styleElement: HTMLStyleElement) {
`.general-save-options {
text-align: center;
padding: 4px 0 12px;
padding-bottom: 8px;
border-bottom: 2px solid rgba(var(--modal-foreground-rgb), 0.3);
}`,
`#backup-saves {
background-color: rgba(var(--modal-foreground-rgb), 0.2);
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
}`,
`#local-saves {
border-collapse: collapse;
overflow-y: auto;
@ -469,13 +472,16 @@ export function applyStaticStyles(styleElement: HTMLStyleElement) {
user-select: none;
}`,
`.acceleration-link {
color: var(--ruffle-blue);
text-decoration: none;
`#hardware-acceleration-modal .modal-area {
text-align: center;
padding: 16px 48px;
width: 95%;
box-sizing: border-box;
}`,
`.acceleration-link:hover {
text-decoration: underline;
`#acceleration-text {
display: block;
margin-bottom: 8px;
}`,
/* Handle preferred color scheme. */
@ -829,7 +835,7 @@ const generalSaveOptions = createElement(
undefined,
"general-save-options",
);
const backupSaves = createElement("span", "backup-saves");
const backupSaves = createElement("span", undefined, "modal-button");
const localSaves = createElement("table", "local-saves");
// Volume control elements
@ -873,12 +879,14 @@ const hardwareModal = createElement(
);
const hardwareModalArea = createElement("div", undefined, "modal-area");
const hardwareModalClose = createElement("span", undefined, "close-modal");
const hardwareModalText = createElement("span", "acceleration-text");
hardwareModalText.textContent = text("enable-hardware-acceleration");
const hardwareModalLink = document.createElement("a");
hardwareModalLink.href =
"https://github.com/ruffle-rs/ruffle/wiki/Frequently-Asked-Questions-For-Users#chrome-hardware-acceleration";
hardwareModalLink.target = "_blank";
hardwareModalLink.className = "acceleration-link";
hardwareModalLink.textContent = text("enable-hardware-acceleration");
hardwareModalLink.className = "modal-button";
hardwareModalLink.textContent = text("enable-hardware-acceleration-link");
// Clipboard message
const clipboardModal = createElement("div", "clipboard-modal", "modal hidden");
@ -982,6 +990,7 @@ appendElement(videoModalArea, videoHolder);
appendElement(ruffleShadowTemplate.content, hardwareModal);
appendElement(hardwareModal, hardwareModalArea);
appendElement(hardwareModalArea, hardwareModalClose);
appendElement(hardwareModalArea, hardwareModalText);
appendElement(hardwareModalArea, hardwareModalLink);
// Clipboard modal append
appendElement(ruffleShadowTemplate.content, clipboardModal);

3
web/packages/core/texts/en-US/messages.ftl
View File

@ -10,7 +10,8 @@ update-ruffle = Update Ruffle
ruffle-demo = Web Demo
ruffle-desktop = Desktop Application
ruffle-wiki = View Ruffle Wiki
enable-hardware-acceleration = It looks like hardware acceleration is not enabled. While Ruffle may work, it could be unreasonably slow. You can find out how to enable hardware acceleration by following this link.
enable-hardware-acceleration = It looks like hardware acceleration is disabled. While Ruffle may work, it could be very slow. You can find out how to enable hardware acceleration by following the link below:
enable-hardware-acceleration-link = FAQ - Chrome Hardware Acceleration
view-error-details = View Error Details
open-in-new-tab = Open in a new tab
click-to-unmute = Click to unmute