syranide / react-swf Goto Github PK

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
};

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;

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.

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?