2019-08-24 23:56:46 +00:00
|
|
|
import load_ruffle from "./load-ruffle";
|
2019-08-22 01:02:43 +00:00
|
|
|
import ruffle_shadow_template from "./shadow-template";
|
2019-10-20 17:04:22 +00:00
|
|
|
import { lookup_element } from "./register-element";
|
2019-08-22 01:02:43 +00:00
|
|
|
|
2019-08-26 00:11:10 +00:00
|
|
|
export let FLASH_MIMETYPE = "application/x-shockwave-flash";
|
|
|
|
export let FUTURESPLASH_MIMETYPE = "application/futuresplash";
|
2020-04-02 01:45:32 +00:00
|
|
|
export let FLASH7_AND_8_MIMETYPE = "application/x-shockwave-flash2-preview";
|
|
|
|
export let FLASH_MOVIE_MIMETYPE = "application/vnd.adobe.flash-movie";
|
2019-08-26 00:11:10 +00:00
|
|
|
export let FLASH_ACTIVEX_CLASSID = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000";
|
|
|
|
|
2020-03-21 07:26:46 +00:00
|
|
|
const DIMENSION_REGEX = /^\s*(\d+(\.\d+)?(%)?)/;
|
|
|
|
|
2019-08-26 00:11:10 +00:00
|
|
|
export class RufflePlayer extends HTMLElement {
|
2019-08-22 01:02:43 +00:00
|
|
|
constructor(...args) {
|
|
|
|
let self = super(...args);
|
|
|
|
|
2020-04-27 10:34:47 +00:00
|
|
|
self.shadow = self.attachShadow({ mode: 'closed' });
|
2019-08-22 01:02:43 +00:00
|
|
|
self.shadow.appendChild(ruffle_shadow_template.content.cloneNode(true));
|
|
|
|
|
2019-08-25 19:46:38 +00:00
|
|
|
self.dynamic_styles = self.shadow.getElementById("dynamic_styles");
|
2019-08-22 01:02:43 +00:00
|
|
|
self.canvas = self.shadow.getElementById("player");
|
2020-04-27 10:34:47 +00:00
|
|
|
self.play_button = self.shadow.getElementById("play_button");
|
|
|
|
if (self.play_button) {
|
|
|
|
self.play_button.addEventListener("click", self.play_button_clicked.bind(self));
|
|
|
|
}
|
|
|
|
|
2019-08-24 23:56:46 +00:00
|
|
|
self.instance = null;
|
|
|
|
|
|
|
|
self.Ruffle = load_ruffle();
|
2019-08-22 01:02:43 +00:00
|
|
|
|
|
|
|
return self;
|
|
|
|
}
|
|
|
|
|
2019-08-25 19:46:38 +00:00
|
|
|
connectedCallback() {
|
|
|
|
this.update_styles();
|
|
|
|
}
|
|
|
|
|
2020-04-28 13:10:41 +00:00
|
|
|
static get observedAttributes() {
|
|
|
|
return ["width", "height"];
|
|
|
|
}
|
|
|
|
|
2019-08-25 19:46:38 +00:00
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
|
|
if (name === "width" || name === "height") {
|
|
|
|
this.update_styles();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-26 04:27:59 +00:00
|
|
|
disconnectedCallback() {
|
|
|
|
if (this.instance) {
|
|
|
|
this.instance.destroy();
|
|
|
|
this.instance = null;
|
2020-03-29 09:23:17 +00:00
|
|
|
console.log("Ruffle instance destroyed.");
|
2019-08-26 04:27:59 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-25 19:46:38 +00:00
|
|
|
update_styles() {
|
|
|
|
for (var i = 0; i < this.dynamic_styles.sheet.rules.length; i += 1) {
|
|
|
|
this.dynamic_styles.sheet.deleteRule(i);
|
|
|
|
}
|
|
|
|
|
2020-03-21 07:26:46 +00:00
|
|
|
if (this.attributes.width) {
|
|
|
|
let width = RufflePlayer.html_dimension_to_css_dimension(this.attributes.width.value);
|
|
|
|
if (width !== null) {
|
|
|
|
this.dynamic_styles.sheet.insertRule(`:host { width: ${width}; }`);
|
|
|
|
}
|
2019-08-25 19:46:38 +00:00
|
|
|
}
|
|
|
|
|
2020-03-21 07:26:46 +00:00
|
|
|
if (this.attributes.height) {
|
|
|
|
let height = RufflePlayer.html_dimension_to_css_dimension(this.attributes.height.value);
|
|
|
|
if (height !== null) {
|
|
|
|
this.dynamic_styles.sheet.insertRule(`:host { height: ${height}; }`);
|
|
|
|
}
|
2019-08-25 19:46:38 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-26 04:27:59 +00:00
|
|
|
/**
|
|
|
|
* Determine if this element is the fallback content of another Ruffle
|
|
|
|
* player.
|
|
|
|
*
|
|
|
|
* This heurustic assumes Ruffle objects will never use their fallback
|
|
|
|
* content. If this changes, then this code also needs to change.
|
|
|
|
*/
|
|
|
|
is_unused_fallback_object() {
|
|
|
|
let parent = this.parentNode;
|
2019-10-20 17:04:22 +00:00
|
|
|
let element = lookup_element("ruffle-object");
|
2019-08-26 04:27:59 +00:00
|
|
|
|
2019-10-20 17:04:22 +00:00
|
|
|
if (element !== null) {
|
|
|
|
do {
|
|
|
|
if (parent.nodeName === element.name) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
parent = parent.parentNode;
|
|
|
|
} while (parent != document);
|
|
|
|
}
|
2019-08-26 04:27:59 +00:00
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2019-08-24 23:56:46 +00:00
|
|
|
async stream_swf_url(url) {
|
2019-08-22 01:02:43 +00:00
|
|
|
//TODO: Actually stream files...
|
2019-08-24 23:56:46 +00:00
|
|
|
try {
|
2019-08-26 04:27:59 +00:00
|
|
|
if (this.isConnected && !this.is_unused_fallback_object()) {
|
|
|
|
let abs_url = new URL(url, window.location.href).toString();
|
|
|
|
console.log("Loading SWF file " + url);
|
|
|
|
|
|
|
|
let response = await fetch(abs_url);
|
|
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
let data = await response.arrayBuffer();
|
|
|
|
await this.play_swf_data(data);
|
|
|
|
console.log("Playing " + url);
|
|
|
|
} else {
|
|
|
|
console.error("SWF load failed: " + response.status + " " + response.statusText + " for " + url);
|
|
|
|
}
|
2019-08-22 01:02:43 +00:00
|
|
|
} else {
|
2019-08-26 04:27:59 +00:00
|
|
|
console.warn("Ignoring attempt to play a disconnected or suspended Ruffle element");
|
2019-08-22 01:02:43 +00:00
|
|
|
}
|
2019-08-24 23:56:46 +00:00
|
|
|
} catch (err) {
|
|
|
|
console.error("Serious error occured loading SWF file: " + err);
|
|
|
|
throw err;
|
|
|
|
}
|
2019-08-22 01:02:43 +00:00
|
|
|
}
|
|
|
|
|
2020-04-27 10:34:47 +00:00
|
|
|
play_button_clicked(event) {
|
|
|
|
if (this.instance) {
|
|
|
|
this.instance.play();
|
|
|
|
if (this.play_button) {
|
|
|
|
this.play_button.style.display = "none";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-24 23:56:46 +00:00
|
|
|
async play_swf_data(data) {
|
2019-08-26 04:27:59 +00:00
|
|
|
if (this.isConnected && !this.is_unused_fallback_object()) {
|
|
|
|
console.log("Got SWF data");
|
2019-08-24 23:56:46 +00:00
|
|
|
|
2019-08-26 04:27:59 +00:00
|
|
|
if (this.instance) {
|
|
|
|
this.instance.destroy();
|
|
|
|
this.instance = null;
|
2020-03-29 09:23:17 +00:00
|
|
|
console.log("Ruffle instance destroyed.");
|
2019-08-26 04:27:59 +00:00
|
|
|
}
|
2019-08-22 01:02:43 +00:00
|
|
|
|
2019-08-26 04:27:59 +00:00
|
|
|
let Ruffle = await this.Ruffle.catch(function (e) {
|
|
|
|
console.error("Serious error loading Ruffle: " + e);
|
|
|
|
throw e;
|
|
|
|
});
|
2020-04-27 10:34:47 +00:00
|
|
|
|
2019-08-26 04:27:59 +00:00
|
|
|
this.instance = Ruffle.new(this.canvas, new Uint8Array(data));
|
2020-03-29 09:23:17 +00:00
|
|
|
console.log("New Ruffle instance created.");
|
2020-04-27 10:34:47 +00:00
|
|
|
|
|
|
|
if (this.play_button) {
|
|
|
|
this.play_button.style.display = "block";
|
|
|
|
}
|
2019-08-26 04:27:59 +00:00
|
|
|
} else {
|
|
|
|
console.warn("Ignoring attempt to play a disconnected or suspended Ruffle element");
|
|
|
|
}
|
2019-08-22 01:02:43 +00:00
|
|
|
}
|
2020-03-21 07:26:46 +00:00
|
|
|
|
2020-03-26 09:37:25 +00:00
|
|
|
/*
|
|
|
|
* Copies attributes and children from another element to this player element.
|
|
|
|
* Used by the polyfill elements, RuffleObject and RuffleEmbed.
|
|
|
|
*/
|
2020-03-26 09:54:35 +00:00
|
|
|
copy_element(elem) {
|
2020-03-26 09:37:25 +00:00
|
|
|
if (elem) {
|
|
|
|
for (let attrib of elem.attributes) {
|
|
|
|
if (attrib.specified) {
|
|
|
|
// Issue 468: Chrome "Click to Active Flash" box stomps on title attribute
|
|
|
|
if (attrib.name === "title" && attrib.value === "Adobe Flash Player") {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
|
|
|
try {
|
|
|
|
this.setAttribute(attrib.name, attrib.value);
|
|
|
|
} catch (err) {
|
|
|
|
// The embed may have invalid attributes, so handle these gracefully.
|
|
|
|
console.warn(`Unable to set attribute ${attrib.name} on Ruffle instance`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
for (let node of Array.from(elem.children)) {
|
|
|
|
this.appendChild(node);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-21 07:26:46 +00:00
|
|
|
/*
|
|
|
|
* Converts a dimension attribute on an HTML embed/object element to a valid CSS dimension.
|
|
|
|
* HTML element dimensions are unitless, but can also be percentages.
|
|
|
|
* Add a 'px' unit unless the value is a percentage.
|
|
|
|
* Returns null if this is not a valid dimension.
|
|
|
|
*/
|
|
|
|
static html_dimension_to_css_dimension(attribute) {
|
|
|
|
if (attribute) {
|
|
|
|
let match = attribute.match(DIMENSION_REGEX);
|
|
|
|
if (match) {
|
|
|
|
let out = match[1];
|
|
|
|
if (!match[3]) {
|
|
|
|
// Unitless -- add px for CSS.
|
|
|
|
out += "px"
|
|
|
|
}
|
|
|
|
return out;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
2020-03-21 01:27:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Returns whether the given filename ends in an "swf" extension.
|
|
|
|
*/
|
|
|
|
export function is_swf_filename(filename) {
|
|
|
|
return filename && typeof filename === "string" && filename.search(/\.swf\s*$/i) >= 0;
|
|
|
|
}
|