Demoup-react NPM

demoup-react

Place the DemoUp playbutton as a normal react component at the intendend position in your page.

Usage

var DemoUpButton = require('demoup-react')("yourshop.domain").button;

var exampleComponent = function() {
	return <DemoUpButton />
}

Note that the Button is not rendered immediatly. The component will load some shop specific code and check, whether there is actually a video for the current page. It will render the button afterwards in case there are video available. Be prepared that the button is inserted after the page is already rendered.

Configuration

You can configure the components by passing props. The following props are currently supported:

Button

<DemoUpButton
	buttonheight = {30} // Overwrite the height of play image. Default is set by DemoUp specific for each shop.
	buttonwidth = {30} // Overwrite the width of play image. Default is set by DemoUp specific for each shop.
	color = "#FFF" // Overwrite the color of the play image in the button. Default is set by DemoUp specific for each shop.
	height = {60} // Overwrite the height of the button container in pixels. Default is set by DemoUp specific for each shop.
	multibutton = {false} // Should multiple videos displayed as one or several buttons behind each other? true/false Default: false
	width = {60} // Overwrite the width of the button container in pixels. Default is set by DemoUp specific for each shop.
	mode = "production" // If not set the component will detect "Node.env" environment variable and choose to either load the local/staging or production version. By default this is staging. To overwrite this detection use this parameter to explicitly set the system into production mode.

	/* The following option turns off the automatic video detection of DemoUp. Use it similiar as a Youtube embed where you want a specific video at a specific place.
	This is NOT to be used when doing an integration into the product page
	 */
	mid = "OW6Qd26Sdx" // Select a specific video by using a known movie identifier. Movie identifier can be found in the DemoUp dashboard
/>

Container

Additionally to the known button component, there is also a button container element available. It was developed in order to give your components the possibilty to know how many videos there are. The child component in this case "MyChildComponent" will receive a property "videosAvailable" which contains the number of available videos, together with "videos".

  <DemoUpContainer mode="production" threed="enabled" url="https://www.myshop.com/pdp">
    <MyChildComponent />
  </DemoUpContainer>

You component "MyChildComponent" might then look like this, in order to render the video buttons

render(){
    /* Through the properties you will get two main information: 
    /* videosAvailable: The number of videos which were found and selected based on the langugae configuration
    /* videos: A list of unique video ids you can use them to iterate over the array and create play buttons. 
    /* Each playbutton can be assign to an individual video. Moreover you can specify where to playback the video, 
    /* as already know of the former React component version. */
    let buttonsToShow = <></>;
    if(this.props.videos){

        buttonsToShow = this.props.videos.map( aVideo =>{
            return <DemoUpButton mid={aVideo} key={aVideo} playerAttrs={{ title: "Watch video" }} triggerCallback={cb => this.playVideo(cb)}></DemoUpButton>;
        });
    }

    return <div>This is an example for a thumbnail container, which has currently <b> {this.props.videosAvailable} </b> videos to show.
        <div id="demoup-thumbnail-list">
            {buttonsToShow}
        </div>
        
        <h2>Here the video will be displayed.</h2>
        <div id="demoup-playback-div"></div>
    </div>;
}