syranide / react-swf Goto Github PK
View Code? Open in Web Editor NEWShockwave Flash Player component for React
License: MIT License
Shockwave Flash Player component for React
License: MIT License
I'm not sure of the best way to get you a minimal example to demo this, but embedding a Flash movie in Firefox doesn't seem to trigger ExternalInterface callbacks, nor can I call exposed methods from the Flash movie.
The SWF I'm using is from here: https://github.com/mangui/flashls/blob/dev/bin/debug/flashlsChromeless.swf
I have a component with the following relevant methods:
componentWillMount() {
window.VideoPlayer = window.VideoPlayer || {};
window.VideoPlayer[this.props.video.id] = {
callback: _.bind(this.flashCallback, this)
};
}
componentDidMount() {
this.$plugin = this.refs.flash.getFPDOMNode();
}
render() {
let vars = {
callback: `window.VideoPlayer[${this.props.video.id}].callback`
};
return (
<ReactSWF
allowScriptAccess="always"
flashVars={ vars }
id={ `videoPlayer_${this.props.video.id}` }
key={ `videoPlayer_${this.props.video.id}` }
ref="flash"
src="/assets/flash/VideoPlayer.swf"
wmode="transparent"
/>
);
}
flashCallback(event, args) {
this.log.debug({ args }, `Flash Player :: ${event}`);
if (_.isFunction(this[`on${eventName}`])) {
this[`on${eventName}`].apply(this, args);
}
}
This all works correctly in Chrome at the very least. Firefox doesn't seem to ever call the callback, nor can I call this.$plugin.methodOnFlashMovie()
like I would expect.
I really have the simplest possible example. SWF shows, but I can't click anything on it. Any ideas?
import React, { Component } from 'react';
import './App.css';
import ReactSWF from 'react-swf'
class App extends Component {
render() {
return (
<div className="App">
<ReactSWF
src="MFD1.swf"
id="mfd1"
width="500"
height="700"
wmode="transparent"
// flashVars={{ foo: 'A', bar: 1 }}
/>
</div>
);
}
}
export default App;
why is this package depend on a beta version of react? (^0.14.0-beta1) most people are still on [email protected]
When i update react v16, i see this
The deprecations introduced in 15.x have been removed from the core package.
React.createClass is now available as create-react-class, React.PropTypes as prop-types,
React.DOM as react-dom-factories, react-addons-test-utils as react-dom/test-utils,
and shallow renderer as react-test-renderer/shallow. See 15.5.0 and 15.6.0 blog posts for
instructions on migrating code and automated codemods.
So it not work as below:
var PropTypes = React.PropTypes;
ReactSWFCompat.propTypes = {
container: PropTypes.element.isRequired
};
Plz update PropTypes that depends on 'prop-types'
I want call javascript function from Flash.
I use ExternalInterface in flash action as:
ExternalInterface.call("buttonClicked", buttonNumber);
but where should I put the function buttonClicked in the react and how it get the variable ButtonNumber in react?
Please explain and give us any simple example.
it will be very helpful.
many thanks
Tracking facebook/react#4878
Probably misses Tag?
Hello. Thanks for great component!
I have a problem with calling js callback function in context of my parent component:
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import ReactSWF from 'react-swf';
import './style.sass';
class Player extends Component {
static propTypes = {
url: PropTypes.string.isRequired,
style: PropTypes.shape({
position: PropTypes.oneOf([
'absolute',
'fixed'
]).isRequired,
top: PropTypes.string,
left: PropTypes.string,
bottom: PropTypes.string,
right: PropTypes.string,
width: PropTypes.string.isRequired,
height: PropTypes.string.isRequired
}).isRequired
};
constructor(props) {
super(props);
}
onJSBridge(...args) {
console.log(this);
console.log(args);
}
render() {
const { style } = this.props;
return (
<div className="player-container" style={style}>
<ReactSWF
src={'/player/GrindPlayer.swf'}
id={'player'}
ref={'player'}
name={'player'}
width={style.width}
height={style.height}
wmode={'transparent'}
flashVars={{javascriptCallbackFunction: this.onJSBridge}} />
</div>
);
}
}
const select = state => state.player;
export default connect(select)(Player);
method onJSBridge allways call in window context. But if I pass flashVars={{javascriptCallbackFunction: this.onJSBridge.bind(this)}} I see error:
Uncaught SyntaxError: Unexpected identifier
in console
How could I call method of object?
A distilled example can be found here: https://github.com/sesm/reactswf-build-issue
To reproduce the issue:
$npm install
$npm run build
Open main.html in browser
Expected: tag appears on the page.
Observed: "ReferenceError: React is not defined" in JS console.
This issue can be fixed by adding a line
var React=require('react');
to the top of react-swf.js, but I'm not sure it's the right way to fix the problem since I'm not yet familiar enough with NPM module system.
So it shows up on the list we'll start pointing people to eventually
Hi.
So if I want to refresh ReactSWF
, I should provide new key
property?
Because changing of FlashVars doesn't do anything ;)
Something like this:
render: function () {
var key = keyIndex++;
return (
<div className="player">
<ReactSWF
key={key}
src={this.props.swfUrl}
id="hdsPlayer"
width={this.state.componentWidth}
height={this.state.componentHeight}
wmode="transparent"
flashVars={this.props.flashVars}/>
</div>
);
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.