analytics/webcontent/bi/js/cahome/ui/react/StartVideoModal/StartVideoModal.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactHtmlParser from 'react-html-parser';
import './StartVideoModal.scss';
import { SVGIcon } from 'ca-ui-toolkit';
import play32 from '@ba-ui-toolkit/ba-graphics/dist/icons/play_32.svg';
import { Dialog } from 'ca-ui-toolkit';

const DASHBOARD_TUTORIAL_IMG_PATH = 'images/tutVideo_Dashboard.png';
const EXPLORE_TUTORIAL_IMG_PATH = 'images/tutVideo_Explore.png';
const OVERVIEW_TUTORIAL_IMG_PATH = 'images/tutVideo_Overview.png';

/*
Metadata for three videos:
	- Thumbnail & title are hard-coded in this repo
	- For video replacement, contact Reimar S. to change the mapping of tiny URLs
*/
const metadata = {
	0:{
		thumbnail: OVERVIEW_TUTORIAL_IMG_PATH,
		link: 'https://ibm.biz/BdzbpD',
		title_string: 'modal_how_video_title_overview'
	},
	1:{
		thumbnail: DASHBOARD_TUTORIAL_IMG_PATH,
		link: 'https://ibm.biz/BdzbpF',
		title_string: 'modal_how_video_title_dashboard'
	},
	2:{
		thumbnail: EXPLORE_TUTORIAL_IMG_PATH,
		link: 'https://ibm.biz/BdzbpR',
		title_string: 'modal_how_video_title_exploration'
	}
};

export class StartVideoModal extends Component {
	static propTypes = {
		/** Handler to close the modal */
		closeHandler: PropTypes.func.isRequired,
		/** A copy of the i18n object used to translate strings */
		stringGetter: PropTypes.object
	};

	state = {
		selectedVideo: 0,
		playing: false
	};

	// Click handler called when user clicks on the video option
	_selectVideo = (index) => {
		this.setState({
			playing: false,
			selectedVideo: index
		});
	}

	// Click handler called when user clicks play button
	_playVideo = () => {
		this.setState({ playing: true });
	}

	// Return the generic youtube iframe for embedded video
	_youtubeVideoSrc = (link) => {
		return (<iframe
			width="756"
			height="424"
			src={link}
			frameBorder="0"
			allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
			allowFullScreen>
		</iframe>);
	}

	// Handler to open the video via tabbing action
	_selectVideoViaTabbing = (e, index) => {
		e.stopPropagation();
		// If not a shift click, ctrl click or a right click or the user pressed enter on the context menu
		if((e.type == 'click' && !e.shiftKey && !e.ctrlKey && e.nativeEvent.which !== 3) || (e.type=='keyup' && e.keyCode === 13)) {
			e.persist();
			this._selectVideo(index);
		}
	}

	// Handler to play the video via tabbing action
	_playVideoViaTabbing = (e) => {
		e.stopPropagation();
		// If not a shift click, ctrl click or a right click or the user pressed enter on the context menu
		if((e.type == 'click' && !e.shiftKey && !e.ctrlKey && e.nativeEvent.which !== 3) || (e.type=='keyup' && e.keyCode === 13)) {
			e.persist();
			this._playVideo();
		}
	}

	render() {
		const dialogProps = {
			size: 'large',
			width: '804px',
			minWidth: '804px',
			clickaway: true,
			theme: 'ba-theme-default',
			className: 'startVideoModal_dialog',
			style: { 'padding-bottom': '64px' },
			startingFocusIndex: -1
		};

		const { stringGetter } = this.props;

		const mainScreen = this.state.playing ?  (<div className='largeVideoThumbnail' >{this._youtubeVideoSrc(metadata[this.state.selectedVideo].link)}</div>):
			(<div className='largeVideoThumbnail'>
				<img src={metadata[this.state.selectedVideo].thumbnail}></img>
				<div className='playIndicator' tabIndex='1' onKeyUp={(e) => {this._playVideoViaTabbing(e);}} onClick={() => this._playVideo()}>
					{stringGetter.get('modal_how_play')} <SVGIcon className='playIcon' size='large' iconId={play32.id} />
				</div>
			</div>);

		return (<Dialog
			{...dialogProps}
			onClose={() => {
				this.props.closeHandler();
			}}
		>
			<Dialog.Header>{stringGetter.get('modal_how_title')}</Dialog.Header>
			<Dialog.Body>
				<div className='mainVideoSection'>
					{mainScreen}
				</div>
				<div className='videoOptionSection'>
					<div tabIndex='1' onKeyUp={(e) => {this._selectVideoViaTabbing(e, 0);}} onClick={() => this._selectVideo(0)} className={this.state.selectedVideo === 0 ? 'optionSelected optionBlock optionBlockSeprator' : 'optionBlock optionBlockSeprator'}>
						<img className='smallVideoThumbnail' src={ metadata[0].thumbnail }></img>
						<div className='smallVideoDescription' >
							<label className='videoTitle'>{ stringGetter.get(metadata[0].title_string) }</label>
						</div>
					</div>
					<div tabIndex='1' onKeyUp={(e) => {this._selectVideoViaTabbing(e, 1);}} onClick={() => this._selectVideo(1)} className={this.state.selectedVideo === 1 ? 'optionSelected optionBlock optionBlockSeprator' : 'optionBlock optionBlockSeprator'}>
						<img className='smallVideoThumbnail' src={ metadata[1].thumbnail }></img>
						<div className='smallVideoDescription'>
							<label className='videoTitle' >{ stringGetter.get(metadata[1].title_string) }</label>
						</div>
					</div>
					<div tabIndex='1' onKeyUp={(e) => {this._selectVideoViaTabbing(e, 2);}} onClick={() => this._selectVideo(2)} className={this.state.selectedVideo === 2 ? 'optionSelected optionBlock' : 'optionBlock' }>
						<img className='smallVideoThumbnail' src={ metadata[2].thumbnail }></img>
						<div className='smallVideoDescription'>
							<label className='videoTitle'>{ stringGetter.get(metadata[2].title_string) }</label>
						</div>
					</div>
				</div>
			</Dialog.Body>
		</Dialog>);
	}
}