jam-cloud/web/app/assets/javascripts/events/react-components/EventPage.js.jsx

context = window
EventActions = context.EventActions

context.EventPage = React.createClass({

    mixins: [Reflux.listenTo(EventStore, "onEventsChanged")],


    getInitialState: function () {
        return {submitting: false, error: null, event: null}
    },

    parseSlug: function() {
        var path = window.location.pathname

        console.log("slug path: ", path)

        var pathPart = path.substring('/events/'.length)
        console.log("slug part", pathPart)

        var query = pathPart.indexOf('?')
        if(query > -1) {
            var slug = pathPart.substring(0, query)
        }
        else {
            var slug = pathPart
        }


        console.log("slug", slug)
        return slug;

    },

    componentDidMount: function () {
        EventActions.single(this.parseSlug())
      //  new Plyr('#video');
    },

    componentDidUpdate: function() {

    },

    authorizeDone: function(response) {
        this.setState({submitting:false})
        EventActions.addAuthorization(response)
    },

    authorizeFailed: function(e) {
        if(e instanceof SyntaxError) {
            this.setState({error: 'Server error. Please try again or contact support@jamkazam.com.'})
        }
        else if(e instanceof Error) {
            this.setState({error: 'Please enter a valid Eventbrite Order ID'})
        }
        else {
                console.log("heheh", e)
        }
        this.setState({submitting:false})
    },

    handleSubmit: function(event) {
        var value = document.getElementById("order-input").value
        if(value) {
            context.JK.Rest2.authorizeLiveStream({order: value}).then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }
                return response.json()
            }).then((response) => this.authorizeDone(response)).catch((jqXHR) => this.authorizeFailed(jqXHR))
            this.setState({submitting: true, error:null})
        }
        event.preventDefault();
    },

    isErrored() {
        return !!this.state.error
    },

    isReady() {
        return !!this.state.event
    },

    isAuthorized() {
        return this.state.event.authorization || this.state.event.allow_in
    },

    isNotAuthorized() {
        return false
    },

    videoCode() {
        return this.state.event.youtube_code
    },

    title() {
        return this.state.event.title ? this.state.event.title : 'Unknown title'
    },

    description() {
        return this.state.event.description ? this.state.event.description : ''
    },

    startsAt() {
        return this.state.event.starts_at? "Starts at " + new Date(this.state.event.starts_at).toLocaleString() : 'Unknown start time'
    },

    header() {

        if(this.isErrored()) {
            return <div className="header">
                <div className="title">No event found.</div>
            </div>
        }
        else if(this.isReady()) {
            var title = this.title()
            var description = this.description()
            var startsAt = this.startsAt()

           return <div className="header">
                <div className="title">{title}</div>
                <div className="description">{description}</div>
                <div className="starts-at">{startsAt}</div>
            </div>
        }
        else {
           return <div className="header">
               <div className="title">Loading ...</div>
            </div>
        }
    },

    body: function() {
        var video = null
        if(this.isErrored()) {
            video = null
        }
        else if(this.isReady()) {
            if(this.isAuthorized()) {
                //video = <div id="player" className="video player">
                //    <div id="video" data-plyr-provider="youtube" data-plyr-embed-id={this.videoCode()}></div>
                //</div>

                var videoCode = this.videoCode()
                if(videoCode) {
                    var src = "https://www.youtube.com/embed/" + this.videoCode() + "?modestbranding=true&autoplay=0&rel=0"
                    video =  <div id="player">
                        <iframe  src={src} frameBorder="0" style={ { position:"absolute", top:0,left:0,width:"100%", height:"100%"} } allow="accelerometer; encrypted-media; gyroscope; autoplay" allowFullScreen={true}></iframe>
                    </div>
                }
                else {
                    video = <div id="no-player" className="no-code"><div>No video yet</div></div>
                }

            }
            else {
                var notRegistered = <span className="no-register">You are not registered for this event!</span>
                var onceDone = <li>Enter your EventBrite order code at the <a href="https://www.jamkazam.com/events" target="_blank"> JamKazam Event Registration</a> page when done registering.</li>

                var eventBriteUrl = this.state.event.event_brite_registration_url
                if(eventBriteUrl) {
                    var meat = <div>
                        {notRegistered}
                        <ol>
                            <li>Please register at <a target="_blank" href={eventBriteUrl}>EventBrite</a> to see this video</li>
                            {onceDone}
                        </ol>
                    </div>
                }
                else {
                    var meat = <div>
                        {notRegistered}
                        <ol>
                            <li>Please find your event at <a target="_blank" href="https://www.eventbrite.com/d/online/jamkazam/">EventBrite</a> and register for this event.</li>
                            {onceDone}
                        </ol>
                        </div>
                }
                video = <div id="no-player" className="no-code">
                    {meat}
                </div>
            }
        }
        else {
            video = <div id="no-player"></div>
        }

        return video
    },

    render: function () {

        var header = this.header()

        var body = this.body()

        var response = <div className="EventPage">
            <div id="header">
                <div className="logo-holder"><img src="/assets/logo.png"/></div>
            </div>
            <div id="top-container">
                {header}
            </div>
            <div className="listing">
                {body}
            </div>
        </div>
        return response
    },

    onEventsChanged: function (allEvents) {
        var event = null;
        if(allEvents && allEvents.events && allEvents.events.entries && allEvents.events.entries.length > 0){
            event = allEvents.events.entries[0]
        }

        console.log("event change", event, allEvents)
        this.setState({event: event, error:allEvents.events_error})
    }
})