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: Add nicer play button

This commit is contained in:
Mike Welsh 2020-04-27 03:34:47 -07:00
parent 03d4ed953c
commit c94df5243e
4 changed files with 68 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/js-src/ruffle-player.js
View File

@ -14,11 +14,16 @@ export class RufflePlayer extends HTMLElement {
constructor(...args) {
let self = super(...args);
self.shadow = self.attachShadow({mode: 'closed'});
self.shadow = self.attachShadow({ mode: 'closed' });
self.shadow.appendChild(ruffle_shadow_template.content.cloneNode(true));
self.dynamic_styles = self.shadow.getElementById("dynamic_styles");
self.canvas = self.shadow.getElementById("player");
self.play_button = self.shadow.getElementById("play_button");
if (self.play_button) {
self.play_button.addEventListener("click", self.play_button_clicked.bind(self));
}
self.instance = null;
self.Ruffle = load_ruffle();
@ -113,6 +118,15 @@ export class RufflePlayer extends HTMLElement {
}
}
play_button_clicked(event) {
if (this.instance) {
this.instance.play();
if (this.play_button) {
this.play_button.style.display = "none";
}
}
}
async play_swf_data(data) {
if (this.isConnected && !this.is_unused_fallback_object()) {
console.log("Got SWF data");
@ -127,9 +141,13 @@ export class RufflePlayer extends HTMLElement {
console.error("Serious error loading Ruffle: " + e);
throw e;
});
this.instance = Ruffle.new(this.canvas, new Uint8Array(data));
console.log("New Ruffle instance created.");
if (this.play_button) {
this.play_button.style.display = "block";
}
} else {
console.warn("Ignoring attempt to play a disconnected or suspended Ruffle element");
}

38
web/js-src/shadow-template.js
View File

@ -5,13 +5,49 @@ ruffle_shadow_tmpl.innerHTML = `
display: inline-block;
}
#container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#player {
width: 100%;
height: 100%;
}
#play_button {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
}
#play_button .icon {
position: relative;
background-image: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNTBweCIgaGVpZ2h0PSIyNTBweCIgdmlld0JveD0iMCAwIDI1MCAyNTAiPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJHcmFkaWVudF8xIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEyNSIgeTE9IjAiIHgyPSIxMjUiIHkyPSIyNTAiIHNwcmVhZE1ldGhvZD0icGFkIj4KPHN0b3AgIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGREExMzgiLz4KCjxzdG9wICBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGRDNBNDAiLz4KPC9saW5lYXJHcmFkaWVudD4KCjxnIGlkPSJMYXllcjBfMF9GSUxMIj4KPHBhdGggZmlsbD0idXJsKCNHcmFkaWVudF8xKSIgc3Ryb2tlPSJub25lIiBkPSIKTSAyNTAgMTI1ClEgMjUwIDczLjIgMjEzLjM1IDM2LjYgMTc2LjggMCAxMjUgMCA3My4yIDAgMzYuNjUgMzYuNiAwIDczLjIgMCAxMjUgMCAxNzYuOCAzNi42NSAyMTMuMzUgNzMuMiAyNTAgMTI1IDI1MCAxNzYuOCAyNTAgMjEzLjM1IDIxMy4zNSAyNTAgMTc2LjggMjUwIDEyNQpNIDg3IDE5NQpMIDg3IDU1IDE4NyAxMjUgODcgMTk1IFoiLz4KCjxwYXRoIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0ibm9uZSIgZD0iCk0gODcgNTUKTCA4NyAxOTUgMTg3IDEyNSA4NyA1NSBaIi8+CjwvZz4KPC9kZWZzPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDEsIDAsIDAsIDEsIDAsMCkgIj4KPHVzZSB4bGluazpocmVmPSIjTGF5ZXIwXzBfRklMTCIvPgo8L2c+Cjwvc3ZnPgo=");
background-size: 100% 100%;
top: 50%;
left: 50%;
width: 90%;
height: 90%;
max-width: 500px;
max-height: 500px;
transform: translate(-50%, -50%);
}
#play_button:hover .icon {
background-image: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNTBweCIgaGVpZ2h0PSIyNTBweCIgdmlld0JveD0iMCAwIDI1MCAyNTAiPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJHcmFkaWVudF8xIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEyNSIgeTE9IjAiIHgyPSIxMjUiIHkyPSIyNTAiIHNwcmVhZE1ldGhvZD0icGFkIj4KPHN0b3AgIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGRkUwNDQiLz4KCjxzdG9wICBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGRjQ5NTIiLz4KPC9saW5lYXJHcmFkaWVudD4KCjxnIGlkPSJMYXllcjBfMF9GSUxMIj4KPHBhdGggZmlsbD0idXJsKCNHcmFkaWVudF8xKSIgc3Ryb2tlPSJub25lIiBkPSIKTSAyNTAgMTI1ClEgMjUwIDczLjIgMjEzLjM1IDM2LjYgMTc2LjggMCAxMjUgMCA3My4yIDAgMzYuNjUgMzYuNiAwIDczLjIgMCAxMjUgMCAxNzYuOCAzNi42NSAyMTMuMzUgNzMuMiAyNTAgMTI1IDI1MCAxNzYuOCAyNTAgMjEzLjM1IDIxMy4zNSAyNTAgMTc2LjggMjUwIDEyNQpNIDg3IDE5NQpMIDg3IDU1IDE4NyAxMjUgODcgMTk1IFoiLz4KCjxwYXRoIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0ibm9uZSIgZD0iCk0gODcgNTUKTCA4NyAxOTUgMTg3IDEyNSA4NyA1NSBaIi8+CjwvZz4KPC9kZWZzPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDEsIDAsIDAsIDEsIDAsMCkgIj4KPHVzZSB4bGluazpocmVmPSIjTGF5ZXIwXzBfRklMTCIvPgo8L2c+Cjwvc3ZnPgo=");
}
</style>
<style id="dynamic_styles"></style>
<canvas id="player"></canvas>
<div id="container">
<div id="play_button"><div class="icon"></div></div>
<canvas id="player"></canvas>
</div>
`;
export default ruffle_shadow_tmpl;

11
web/src/lib.rs
View File

@ -59,6 +59,16 @@ impl Ruffle {
Ruffle::new_internal(canvas, swf_data).map_err(|_| "Error creating player".into())
}
pub fn play(&mut self) {
// Remove instance from the active list.
INSTANCES.with(|instances| {
let mut instances = instances.borrow_mut();
let instance = instances.get_mut(self.0).unwrap();
instance.core.lock().unwrap().set_is_playing(true);
log::info!("PLAY!");
});
}
pub fn destroy(&mut self) -> Result<(), JsValue> {
// Remove instance from the active list.
if let Some(instance) = INSTANCES.with(|instances| {
@ -180,7 +190,6 @@ impl Ruffle {
let mut instances = instances.borrow_mut();
if let Some(instance) = instances.get_mut(index) {
instance.has_focus = true;
instance.core.lock().unwrap().set_is_playing(true);
if let Some(target) = js_event.current_target() {
let _ = target
.unchecked_ref::<Element>()

9
web/src/render.rs
View File

@ -613,15 +613,8 @@ impl RenderBackend for WebCanvasRenderBackend {
fn draw_pause_overlay(&mut self) {
let width = f64::from(self.canvas.width());
let height = f64::from(self.canvas.height());
self.context.set_fill_style(&"rgba(0, 0, 0, 0.5)".into());
self.context.set_fill_style(&"rgba(0, 0, 0, 1.0)".into());
self.context.fill_rect(0.0, 0.0, width, height);
self.context.set_text_align("center");
self.context.set_fill_style(&"white".into());
self.context
.set_font(&format!("bold {}px sans-serif", height * 0.1));
let _ = self
.context
.fill_text("Click to Play", width / 2.0, height / 2.0);
}
fn draw_letterbox(&mut self, letterbox: Letterbox) {