web: Extension UI improvements (#13473)
* web: Improve styling of extension pop-up menu * web: Improve styling of extension settings page * web: Improve styling of extension player * web: Make styling more consistent across browsers * web: Run eslint, fix some problems * web: Move version text near top of pop-up menu, add to settings menu * web: Improve logo hover bounds in pop-up and settings * web: Improve styling of extension status indicator * web: Update extension pop-up text strings * web: Misc. sizing/padding changes to extension UI * web: chore: Add a stylelint exception for #backgroundColor in player.css Because it's not kebab-case, to match the keys of the metadata object in JS. --------- Co-authored-by: TÖRÖK Attila <torokati44@gmail.com>
This commit is contained in:
Wumbo
GitHub
parent
2059492d77
commit
4403848a4b
|
|
@ -9,7 +9,7 @@
|
|||
"message": "Show SWF download in context menu"
|
||||
},
|
||||
"settings_autostart": {
|
||||
"message": "Play automatically without splash screen (then click to unmute)"
|
||||
"message": "Autoplay Flash content (click to unmute)"
|
||||
},
|
||||
"settings_log_level": {
|
||||
"message": "Log level"
|
||||
|
|
@ -57,25 +57,25 @@
|
|||
"message": "Checking Ruffle status on current tab…"
|
||||
},
|
||||
"status_result_running": {
|
||||
"message": "Ruffle is loaded and ready to run Flash content on the current tab."
|
||||
"message": "Ruffle is ready to run Flash content in the current tab."
|
||||
},
|
||||
"status_result_running_protected": {
|
||||
"message": "Ruffle is loaded and running the Flash content that you requested."
|
||||
"message": "Ruffle is ready to run the Flash content that you request."
|
||||
},
|
||||
"status_result_optout": {
|
||||
"message": "Ruffle is not loaded because the current page has marked itself as incompatible."
|
||||
"message": "Ruffle cannot load because the current website marked itself as incompatible."
|
||||
},
|
||||
"status_result_disabled": {
|
||||
"message": "Ruffle is not loaded because it is disabled."
|
||||
"message": "Ruffle is disabled."
|
||||
},
|
||||
"status_result_error": {
|
||||
"message": "An error occurred when querying the current tab's instance of Ruffle."
|
||||
"message": "An error occurred while querying the current page's Ruffle instance."
|
||||
},
|
||||
"status_result_protected": {
|
||||
"message": "Ruffle cannot load on protected browser pages."
|
||||
"message": "Ruffle cannot load in protected browser pages."
|
||||
},
|
||||
"action_reload": {
|
||||
"message": "Reload tab to apply changes"
|
||||
"message": "Reload Tab to Apply Changes"
|
||||
},
|
||||
"open_player_page": {
|
||||
"message": "Open SWF Player"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
:root {
|
||||
--ruffle-light-blue: #546da3;
|
||||
--ruffle-blue: #37528c;
|
||||
--ruffle-dark-blue: #184778;
|
||||
--ruffle-orange: #ffad33;
|
||||
|
|
@ -25,8 +26,19 @@ body {
|
|||
position: relative;
|
||||
background: var(--ruffle-dark-blue);
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
box-shadow: 0 0 15px #0008;
|
||||
padding: 16px 16px 6px;
|
||||
box-shadow: 0 0 12px #0008;
|
||||
}
|
||||
|
||||
.header a {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
#version-text {
|
||||
text-align: center;
|
||||
font-size: smaller;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -40,10 +52,37 @@ body {
|
|||
|
||||
/* Controls */
|
||||
|
||||
input,
|
||||
select {
|
||||
background: var(--ruffle-dark-blue);
|
||||
color: white;
|
||||
padding: 6px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
opacity: 0.5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 6px 8px;
|
||||
border: 2px solid var(--ruffle-blue);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background: var(--ruffle-light-blue);
|
||||
color: white;
|
||||
|
||||
/* This gives the text a little more weight without outright bolding it */
|
||||
text-shadow: 0 0 0.1px white;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 24px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.option {
|
||||
|
|
@ -54,13 +93,14 @@ body {
|
|||
|
||||
.option input,
|
||||
.option select {
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.option label {
|
||||
display: inline-block;
|
||||
padding-right: 80px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
/* Checkbox (Based on "Pure CSS Slider Checkboxes": https://codepen.io/Qvcool/pen/bdzVYW) */
|
||||
|
|
|
|||
|
|
@ -3,19 +3,17 @@
|
|||
}
|
||||
|
||||
.container {
|
||||
max-width: 400px;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
|
||||
details > .options {
|
||||
padding-top: 10px;
|
||||
#advanced-options {
|
||||
color: var(--ruffle-orange);
|
||||
font-size: 28px;
|
||||
margin: 8px auto 0;
|
||||
}
|
||||
|
||||
details > .options.special {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
details > summary {
|
||||
cursor: pointer;
|
||||
#reset-settings {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
:root {
|
||||
--ruffle-blue: #37528c;
|
||||
--ruffle-orange: #ffad33;
|
||||
--splash-screen-background: #31497d;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
|
@ -12,25 +6,81 @@ body {
|
|||
font-family: Lato, sans-serif;
|
||||
font-size: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-direction: column;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width: 100%;
|
||||
background: var(--ruffle-blue);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#nav > * {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
flex: 0 0 content;
|
||||
}
|
||||
|
||||
.select-container > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#web-url {
|
||||
width: min(40vw, 500px);
|
||||
}
|
||||
|
||||
#local-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#local-file-name {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
#toggle-info,
|
||||
#reload-swf {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#player-container {
|
||||
overflow-y: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#player-container > * {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
border: 8px dashed var(--ruffle-orange);
|
||||
border-radius: 30px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in;
|
||||
margin: 10px 5px;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#overlay.drag {
|
||||
|
|
@ -38,160 +88,37 @@ body {
|
|||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
#player {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 10px 0;
|
||||
#overlay:not([hidden]) ~ #player {
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width: 100%;
|
||||
background: var(--ruffle-blue);
|
||||
box-shadow: 0 3px 6px 5px var(--ruffle-blue);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: white;
|
||||
padding: 10px 0 5px;
|
||||
margin-bottom: 5px;
|
||||
#info-container {
|
||||
width: 300px;
|
||||
background-color: var(--ruffle-blue);
|
||||
padding: 4px 16px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#title {
|
||||
transition: opacity 0.5s;
|
||||
#info-container span:first-child {
|
||||
text-shadow: 0 0 1px white;
|
||||
}
|
||||
|
||||
#title:hover {
|
||||
opacity: 0.5;
|
||||
#info-container span:first-child::after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
#title img {
|
||||
height: 32px;
|
||||
#info-container span:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#file-picker {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#file-picker select,
|
||||
#file-picker input {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#local-file-container,
|
||||
#web-url-container {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#local-file {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#local-file-label,
|
||||
#web-form-submit {
|
||||
color: var(--ruffle-blue);
|
||||
padding: 3px 10px;
|
||||
margin: 5px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 50px;
|
||||
/* TODO: Make metadata element IDs kebab-case, and convert back and forth
|
||||
between that and the camelCase of metadata JS object keys. */
|
||||
/* stylelint-disable-next-line selector-id-pattern */
|
||||
#backgroundColor {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: 2px solid var(--ruffle-dark-blue);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#web-form-submit {
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#local-file-name {
|
||||
min-width: 150px;
|
||||
display: inline-block;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--ruffle-blue);
|
||||
margin: 15vh auto;
|
||||
padding: 20px;
|
||||
border: 2px solid white;
|
||||
width: 300px;
|
||||
height: 270px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#open-modal,
|
||||
#reload-swf {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#metadata {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#metadata td {
|
||||
padding: 2px 1px;
|
||||
border: 1px solid #ddd;
|
||||
color: var(--ruffle-orange);
|
||||
}
|
||||
|
||||
#metadata tr td:nth-child(1) {
|
||||
font-weight: bold;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#web-url {
|
||||
width: min(40vw, 500px);
|
||||
}
|
||||
|
||||
@media only screen and (width <= 800px) {
|
||||
#local-file-container,
|
||||
#web-url-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#web-url-container {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width <= 600px) {
|
||||
#local-file-static-label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#local-file-container {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#nav {
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,32 +8,17 @@ body {
|
|||
}
|
||||
|
||||
.container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background: var(--ruffle-orange);
|
||||
color: black;
|
||||
border-top: 1px solid var(--ruffle-blue);
|
||||
}
|
||||
|
||||
#version-text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
margin: 2px 0 6px;
|
||||
font-size: small;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#status-container {
|
||||
text-align: center;
|
||||
background: white;
|
||||
background-color: white;
|
||||
background-image: linear-gradient(#fff1, #fff1 50%, #0001 50%, #0001);
|
||||
background-size: 100% 2px;
|
||||
color: black;
|
||||
box-shadow: inset 0 -12px 12px -12px #0008;
|
||||
}
|
||||
|
||||
#status-indicator {
|
||||
|
|
@ -48,21 +33,55 @@ button {
|
|||
box-shadow: 0 0 10px var(--color);
|
||||
}
|
||||
|
||||
.options {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 2px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.buttons-container button {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* TODO: figure out why this appears smaller on Firefox */
|
||||
#options-button {
|
||||
width: 24px;
|
||||
margin-left: 4px;
|
||||
padding: 0 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#reload-button {
|
||||
height: 0;
|
||||
padding: 0;
|
||||
transition: height 0.2s ease-in;
|
||||
transition:
|
||||
height 0.2s ease-in,
|
||||
margin-bottom 0.2s ease-in;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
background: var(--ruffle-orange);
|
||||
color: var(--ruffle-dark-blue);
|
||||
text-shadow: 0 0 0.1px var(--ruffle-dark-blue);
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
#reload-button:enabled {
|
||||
height: calc(1em + 20px);
|
||||
transition: height 0.2s ease-out;
|
||||
height: 33px;
|
||||
margin-bottom: 6px;
|
||||
transition:
|
||||
height 0.2s ease-out,
|
||||
margin-bottom 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#status-container {
|
||||
background: #333;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,12 +12,9 @@
|
|||
<body>
|
||||
<div class="header">
|
||||
<a href="https://ruffle.rs/" target="_blank">
|
||||
<img
|
||||
src="images/logo.svg"
|
||||
alt="Ruffle"
|
||||
data-canonical-src="images/logo.svg"
|
||||
class="logo" />
|
||||
<img src="images/logo.svg" alt="Ruffle" data-canonical-src="images/logo.svg" class="logo" />
|
||||
</a>
|
||||
<div id="version-text">nightly YYYY-MM-DD</div>
|
||||
</div>
|
||||
<div class="options container">
|
||||
<div class="option checkbox">
|
||||
|
|
@ -30,50 +27,40 @@
|
|||
</div>
|
||||
<div class="option checkbox">
|
||||
<input type="checkbox" id="autostart" />
|
||||
<label for="autostart">Play automatically without splash screen (then click to unmute)</label>
|
||||
<label for="autostart">Autoplay Flash content (click to unmute)</label>
|
||||
</div>
|
||||
<details>
|
||||
<summary id="advanced_options">Advanced Options</summary>
|
||||
<div class="options">
|
||||
<div class="option checkbox">
|
||||
<input type="checkbox" id="ignore_optout" />
|
||||
<label for="ignore_optout">Play Flash content even on sites that disallow Ruffle</label>
|
||||
</div>
|
||||
<div class="option select">
|
||||
<select id="log_level">
|
||||
<option value="info" id="log_level_info">Info</option>
|
||||
<option value="warn" id="log_level_warn">Warning</option>
|
||||
<option value="error" id="log_level_error">Error</option>
|
||||
</select>
|
||||
<label for="log_level">Log level</label>
|
||||
</div>
|
||||
<div class="option select">
|
||||
<select id="preferred_renderer">
|
||||
<option value="" id="preferred_renderer_auto">Automatic</option>
|
||||
<option value="webgpu">WebGPU</option>
|
||||
<option value="wgpu-webgl">Wgpu (via WebGL)</option>
|
||||
<option value="webgl">WebGL</option>
|
||||
<option value="canvas">Canvas2D</option>
|
||||
</select>
|
||||
<label for="preferred_renderer">Preferred renderer</label>
|
||||
</div>
|
||||
<div class="option number-input">
|
||||
<input type="number" id="player_version"
|
||||
min="1"
|
||||
max="32"
|
||||
placeholder="32"
|
||||
/>
|
||||
<label for="player_version">Flash player version number to emulate (range 1-32)</label>
|
||||
</div>
|
||||
<div class="option number-input">
|
||||
<input type="number" id="max_execution_duration" min="1" />
|
||||
<label for="max_execution_duration">Maximum allowed ActionScript execution duration (in seconds)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options special">
|
||||
<button id="reset_settings">Reset settings</button>
|
||||
</div>
|
||||
</details>
|
||||
<div id="advanced-options">Advanced Options</div>
|
||||
<div class="option checkbox">
|
||||
<input type="checkbox" id="ignore_optout" />
|
||||
<label for="ignore_optout">Play Flash content even on sites that disallow Ruffle</label>
|
||||
</div>
|
||||
<div class="option select">
|
||||
<select id="log_level">
|
||||
<option value="info" id="log_level_info">Info</option>
|
||||
<option value="warn" id="log_level_warn">Warning</option>
|
||||
<option value="error" id="log_level_error">Error</option>
|
||||
</select>
|
||||
<label for="log_level">Log level</label>
|
||||
</div>
|
||||
<div class="option select">
|
||||
<select id="preferred_renderer">
|
||||
<option value="" id="preferred_renderer_auto">Automatic</option>
|
||||
<option value="webgpu">WebGPU</option>
|
||||
<option value="wgpu-webgl">Wgpu (via WebGL)</option>
|
||||
<option value="webgl">WebGL</option>
|
||||
<option value="canvas">Canvas2D</option>
|
||||
</select>
|
||||
<label for="preferred_renderer">Preferred renderer</label>
|
||||
</div>
|
||||
<div class="option number-input">
|
||||
<input type="number" id="player_version" min="1" max="32" placeholder="32" />
|
||||
<label for="player_version">Flash player version number to emulate (range 1-32)</label>
|
||||
</div>
|
||||
<div class="option number-input">
|
||||
<input type="number" id="max_execution_duration" min="1" />
|
||||
<label for="max_execution_duration">Maximum allowed ActionScript execution duration (in seconds)</label>
|
||||
</div>
|
||||
<button id="reset-settings">Reset settings</button>
|
||||
</div>
|
||||
<script src="dist/options.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Ruffle Player</title>
|
||||
<link rel="stylesheet" href="css/lato.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/player.css">
|
||||
<link rel="icon" href="images/icon32.png" sizes="32x32">
|
||||
<link rel="icon" href="images/icon64.png" sizes="64x64">
|
||||
|
|
@ -13,77 +14,66 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="nav">
|
||||
<div id="title">
|
||||
<a href="https://ruffle.rs/" target="_blank">
|
||||
<img
|
||||
src="images/logo.svg"
|
||||
alt="Ruffle"
|
||||
data-canonical-src="https://ruffle.rs/assets/logo.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div id="file-picker">
|
||||
<a id="logo-container" href="https://ruffle.rs/" target="_blank">
|
||||
<img class="logo" src="images/logo.svg" alt="Ruffle" data-canonical-src="https://ruffle.rs/assets/logo.svg" />
|
||||
</a>
|
||||
<div class="select-container">
|
||||
<div id="web-url-container">
|
||||
<label for="web-url">Web URL: </label>
|
||||
<input id="web-url" name="web-url" type="text" placeholder="URL of a .swf file on the web">
|
||||
<button type="submit" id="web-form-submit">Load</button>
|
||||
</div>
|
||||
<div id="local-file-container">
|
||||
<span id="local-file-static-label">Local SWF:</span>
|
||||
<input type="file" accept=".swf,.spl" id="local-file"
|
||||
aria-describedby="local-file-static-label" />
|
||||
<label for="local-file" id="local-file-label">Select File</label>
|
||||
<span id="local-file-name">No file selected.</span>
|
||||
<input type="file" accept=".swf,.spl" id="local-file" aria-describedby="local-file-static-label" />
|
||||
<button id="local-file-label">Select File</button>
|
||||
<label id="local-file-name" for="local-file">No file selected.</label>
|
||||
</div>
|
||||
 
|
||||
<svg width="20px" id="open-modal" viewBox="0 0 416.979 416.979"><path fill="white" d="M356.004 61.156c-81.37-81.47-213.377-81.551-294.848-.182-81.47 81.371-81.552 213.379-.181 294.85 81.369 81.47 213.378 81.551 294.849.181 81.469-81.369 81.551-213.379.18-294.849zM237.6 340.786a5.821 5.821 0 0 1-5.822 5.822h-46.576a5.821 5.821 0 0 1-5.822-5.822V167.885a5.821 5.821 0 0 1 5.822-5.822h46.576a5.82 5.82 0 0 1 5.822 5.822v172.901zm-29.11-202.885c-18.618 0-33.766-15.146-33.766-33.765 0-18.617 15.147-33.766 33.766-33.766s33.766 15.148 33.766 33.766c0 18.619-15.149 33.765-33.766 33.765z"/></g></svg>
|
||||
 
|
||||
</div>
|
||||
<div>
|
||||
<svg id="toggle-info" width="20px" viewBox="0 0 416.979 416.979"><path fill="white" d="M356.004 61.156c-81.37-81.47-213.377-81.551-294.848-.182-81.47 81.371-81.552 213.379-.181 294.85 81.369 81.47 213.378 81.551 294.849.181 81.469-81.369 81.551-213.379.18-294.849zM237.6 340.786a5.821 5.821 0 0 1-5.822 5.822h-46.576a5.821 5.821 0 0 1-5.822-5.822V167.885a5.821 5.821 0 0 1 5.822-5.822h46.576a5.82 5.82 0 0 1 5.822 5.822v172.901zm-29.11-202.885c-18.618 0-33.766-15.146-33.766-33.765 0-18.617 15.147-33.766 33.766-33.766s33.766 15.148 33.766 33.766c0 18.619-15.149 33.765-33.766 33.765z"/></svg>
|
||||
<svg id="reload-swf" width="20px" viewBox="0 0 489.711 489.711"><path fill="white" d="M112.156 97.111c72.3-65.4 180.5-66.4 253.8-6.7l-58.1 2.2c-7.5.3-13.3 6.5-13 14 .3 7.3 6.3 13 13.5 13h.5l89.2-3.3c7.3-.3 13-6.2 13-13.5v-1.6l-3.3-88.2c-.3-7.5-6.6-13.3-14-13-7.5.3-13.3 6.5-13 14l2.1 55.3c-36.3-29.7-81-46.9-128.8-49.3-59.2-3-116.1 17.3-160 57.1-60.4 54.7-86 137.9-66.8 217.1 1.5 6.2 7 10.3 13.1 10.3 1.1 0 2.1-.1 3.2-.4 7.2-1.8 11.7-9.1 9.9-16.3-16.8-69.6 5.6-142.7 58.7-190.7zm350.3 98.4c-1.8-7.2-9.1-11.7-16.3-9.9-7.2 1.8-11.7 9.1-9.9 16.3 16.9 69.6-5.6 142.7-58.7 190.7-37.3 33.7-84.1 50.3-130.7 50.3-44.5 0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-.7 12.9-7.2 12.2-14.7s-7.2-12.9-14.7-12.2l-88.9 8c-7.4.7-12.9 7.2-12.2 14.7l8 88.9c.6 7 6.5 12.3 13.4 12.3.4 0 .8 0 1.2-.1 7.4-.7 12.9-7.2 12.2-14.7l-4.8-54.1c36.3 29.4 80.8 46.5 128.3 48.9 3.8.2 7.6.3 11.3.3 55.1 0 107.5-20.2 148.7-57.4 60.4-54.7 86-137.8 66.8-217.1z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main" aria-label="Select a demo or drag an SWF">
|
||||
<div id="overlay" class="hidden"></div>
|
||||
</div>
|
||||
<div id="metadata-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" id="close-modal">×</span>
|
||||
<table id="metadata">
|
||||
<tr>
|
||||
<td>Uncompressed Length</td>
|
||||
<td><span class="metadata" id="uncompressedLength">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Version</td>
|
||||
<td><span class="metadata" id="swfVersion">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>FP Version</td>
|
||||
<td><span class="metadata" id="flashVersion">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ActionScript 3</td>
|
||||
<td><span class="metadata" id="isActionScript3">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Frames</td>
|
||||
<td><span class="metadata" id="numFrames">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Frame Rate</td>
|
||||
<td><span class="metadata" id="frameRate">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Width</td>
|
||||
<td><span class="metadata" id="width">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Height</td>
|
||||
<td><span class="metadata" id="height">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Background Color</td>
|
||||
<td><input class="metadata" type="color" id="backgroundColor" disabled value="#FFFFFF"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="main">
|
||||
<div id="player-container" aria-label="Select a demo or drag an SWF">
|
||||
<div id="overlay" hidden></div>
|
||||
</div>
|
||||
<div id="info-container" style="display:none">
|
||||
<div>
|
||||
<span>Uncompressed Length</span>
|
||||
<span id="uncompressedLength">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>SWF Version</span>
|
||||
<span id="swfVersion">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>FP Version</span>
|
||||
<span id="flashVersion">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>ActionScript 3</span>
|
||||
<span id="isActionScript3">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>Total Frames</span>
|
||||
<span id="numFrames">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>Frame Rate</span>
|
||||
<span id="frameRate">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>SWF Width</span>
|
||||
<span id="width">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>SWF Height</span>
|
||||
<span id="height">N/A</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>SWF Background Color</span>
|
||||
<span id="backgroundColor"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="dist/player.js"></script>
|
||||
|
|
|
|||
|
|
@ -11,16 +11,13 @@
|
|||
<body>
|
||||
<div class="header">
|
||||
<a href="https://ruffle.rs/" target="_blank">
|
||||
<img
|
||||
src="images/logo.svg"
|
||||
alt="Ruffle"
|
||||
data-canonical-src="images/logo.svg"
|
||||
class="logo" />
|
||||
<img src="images/logo.svg" alt="Ruffle" data-canonical-src="images/logo.svg" class="logo" />
|
||||
</a>
|
||||
<div id="version-text">nightly YYYY-MM-DD</div>
|
||||
</div>
|
||||
<div id="status-container" class="container">
|
||||
<div id="status-indicator"></div>
|
||||
<span id="status-text">Ruffle is running.</span>
|
||||
<span id="status-text">Ruffle is ready to run Flash content in the current tab.</span>
|
||||
</div>
|
||||
<div class="options container">
|
||||
<div class="option checkbox">
|
||||
|
|
@ -33,13 +30,14 @@
|
|||
</div>
|
||||
<div class="option checkbox">
|
||||
<input type="checkbox" id="autostart" />
|
||||
<label for="autostart">Disable splash screen and autoplay (click to unmute)</label>
|
||||
<label for="autostart">Autoplay Flash content (click to unmute)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="version-text">Ruffle extension</div>
|
||||
<button id="options-button">Settings</button>
|
||||
<button id="player-button">Open SWF Player</button>
|
||||
<button id="reload-button" disabled>Reload</button>
|
||||
<div class="buttons-container">
|
||||
<button id="player-button">Open SWF Player</button>
|
||||
<svg id="options-button" viewBox="0 0 24 24"><path fill="white" d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
|
||||
<button id="reload-button" disabled>Reload Tab to Apply Changes</button>
|
||||
</div>
|
||||
<script src="dist/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,19 @@
|
|||
import * as utils from "./utils";
|
||||
import { bindOptions, resetOptions } from "./common";
|
||||
import { buildInfo } from "ruffle-core";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
document.title = utils.i18n.getMessage("settings_page");
|
||||
{
|
||||
const ao = document.getElementById("advanced_options")!;
|
||||
const vt = document.getElementById("version-text")!;
|
||||
vt.textContent = buildInfo.versionName;
|
||||
}
|
||||
{
|
||||
const ao = document.getElementById("advanced-options")!;
|
||||
ao.textContent = utils.i18n.getMessage("settings_advanced_options");
|
||||
}
|
||||
{
|
||||
const rs = document.getElementById("reset_settings")!;
|
||||
const rs = document.getElementById("reset-settings")!;
|
||||
rs.textContent = utils.i18n.getMessage("settings_reset");
|
||||
rs.addEventListener("click", async () => {
|
||||
if (confirm(utils.i18n.getMessage("settings_reset_confirm"))) {
|
||||
|
|
|
|||
|
|
@ -12,16 +12,15 @@ window.RufflePlayer = api;
|
|||
const ruffle = api.newest()!;
|
||||
let player: RufflePlayer;
|
||||
|
||||
const main = document.getElementById("main")!;
|
||||
const playerContainer = document.getElementById("player-container")!;
|
||||
const overlay = document.getElementById("overlay")!;
|
||||
const localFileInput = document.getElementById(
|
||||
"local-file",
|
||||
)! as HTMLInputElement;
|
||||
const localFileName = document.getElementById("local-file-name")!;
|
||||
const closeModal = document.getElementById("close-modal")!;
|
||||
const openModal = document.getElementById("open-modal")!;
|
||||
const toggleInfo = document.getElementById("toggle-info")!;
|
||||
const reloadSwf = document.getElementById("reload-swf")!;
|
||||
const metadataModal = document.getElementById("metadata-modal")!;
|
||||
const infoContainer = document.getElementById("info-container")!;
|
||||
const webFormSubmit = document.getElementById("web-form-submit")!;
|
||||
const webURL = document.getElementById("web-url")! as HTMLInputElement;
|
||||
|
||||
|
|
@ -84,9 +83,8 @@ function unload() {
|
|||
document.querySelectorAll("span.metadata").forEach((el) => {
|
||||
el.textContent = "Loading";
|
||||
});
|
||||
(
|
||||
document.getElementById("backgroundColor")! as HTMLInputElement
|
||||
).value = "#FFFFFF";
|
||||
document.getElementById("backgroundColor")!.style.backgroundColor =
|
||||
"white";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +92,7 @@ function load(options: string | DataLoadOptions | URLLoadOptions) {
|
|||
unload();
|
||||
player = ruffle.createPlayer();
|
||||
player.id = "player";
|
||||
main.append(player);
|
||||
playerContainer.append(player);
|
||||
player.load(options);
|
||||
player.addEventListener("loadedmetadata", () => {
|
||||
if (player.metadata) {
|
||||
|
|
@ -103,8 +101,8 @@ function load(options: string | DataLoadOptions | URLLoadOptions) {
|
|||
if (metadataElement) {
|
||||
switch (key) {
|
||||
case "backgroundColor":
|
||||
(metadataElement as HTMLInputElement).value =
|
||||
value ?? "#FFFFFF";
|
||||
metadataElement.style.backgroundColor =
|
||||
value ?? "white";
|
||||
break;
|
||||
case "uncompressedLength":
|
||||
metadataElement.textContent = `${value >> 10}Kb`;
|
||||
|
|
@ -148,21 +146,21 @@ localFileInput.addEventListener("change", (event) => {
|
|||
}
|
||||
});
|
||||
|
||||
main.addEventListener("dragenter", (event) => {
|
||||
playerContainer.addEventListener("dragenter", (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
main.addEventListener("dragleave", (event) => {
|
||||
playerContainer.addEventListener("dragleave", (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
overlay.classList.remove("drag");
|
||||
});
|
||||
main.addEventListener("dragover", (event) => {
|
||||
playerContainer.addEventListener("dragover", (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
overlay.classList.add("drag");
|
||||
});
|
||||
main.addEventListener("drop", (event) => {
|
||||
playerContainer.addEventListener("drop", (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
overlay.classList.remove("drag");
|
||||
|
|
@ -191,12 +189,12 @@ localFileInput.addEventListener("drop", (event) => {
|
|||
}
|
||||
});
|
||||
|
||||
closeModal.addEventListener("click", () => {
|
||||
metadataModal.style.display = "none";
|
||||
});
|
||||
|
||||
openModal.addEventListener("click", () => {
|
||||
metadataModal.style.display = "block";
|
||||
toggleInfo.addEventListener("click", () => {
|
||||
if (infoContainer.style.display === "none") {
|
||||
infoContainer.style.display = "flex";
|
||||
} else {
|
||||
infoContainer.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
reloadSwf.addEventListener("click", () => {
|
||||
|
|
@ -215,15 +213,9 @@ window.addEventListener("load", () => {
|
|||
) {
|
||||
localFileInput.removeAttribute("accept");
|
||||
}
|
||||
overlay.classList.remove("hidden");
|
||||
overlay.removeAttribute("hidden");
|
||||
});
|
||||
|
||||
window.onclick = (event) => {
|
||||
if (event.target === metadataModal) {
|
||||
metadataModal.style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
async function loadSwf(swfUrl: string) {
|
||||
try {
|
||||
const pathname = new URL(swfUrl).pathname;
|
||||
|
|
@ -258,6 +250,11 @@ window.addEventListener("pageshow", loadSwfFromHash);
|
|||
window.addEventListener("hashchange", loadSwfFromHash);
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
document
|
||||
.getElementById("local-file-label")!
|
||||
.addEventListener("click", () => {
|
||||
document.getElementById("local-file")!.click();
|
||||
});
|
||||
webFormSubmit.addEventListener("click", () => {
|
||||
if (webURL.value !== "") {
|
||||
window.location.hash = webURL.value;
|
||||
|
|
|
|||
|
|
@ -159,12 +159,11 @@ window.addEventListener("DOMContentLoaded", () => {
|
|||
const versionText = document.getElementById(
|
||||
"version-text",
|
||||
) as HTMLDivElement;
|
||||
versionText.textContent = `Ruffle extension ${buildInfo.versionName}`;
|
||||
versionText.textContent = buildInfo.versionName;
|
||||
|
||||
const optionsButton = document.getElementById(
|
||||
"options-button",
|
||||
) as HTMLButtonElement;
|
||||
optionsButton.textContent = utils.i18n.getMessage("open_settings_page");
|
||||
optionsButton.addEventListener("click", async () => {
|
||||
await utils.openOptionsPage();
|
||||
window.close();
|
||||
|
|
|
|||
Loading…
Reference in New Issue