import classnames from 'classnames' ; import React from "react" ; import { Alert , Dialog , ProgressBar , Intent } from "@blueprintjs/core" ; import { PlayerControls } from "./PlayerControls" ; import { StepperView } from "../stepper/views/StepperView" ; import { SubtitlesBand } from "../subtitles/SubtitlesBand" ; import { connect } from "react-redux" ; import { AppStore } from "../store" ; import { PlayerError } from "./index" ; interface PlayerAppStateToProps { containerWidth : number ; viewportTooSmall : boolean ; isReady : boolean ; progress : number ; error : PlayerError ; } function mapStateToProps ( state ) { const viewportTooSmall = state . viewportTooSmall ; const containerWidth = state . containerWidth ; const player = state . player ; const isReady = player . isReady ; const progress = player . progress ; const error = player . error ; return { viewportTooSmall , containerWidth , isReady , progress , error } ; } interface PlayerAppDispatchToProps { dispatch : Function ; } interface PlayerAppProps extends PlayerAppStateToProps , PlayerAppDispatchToProps { } class _PlayerApp extends React . PureComponent < PlayerAppProps > { render ( ) { const { containerWidth , viewportTooSmall , isReady , progress , error } = this . props ; return ( < div id = 'player-app' > < Dialog isOpen = { ! isReady } title = { "Preparing playback" } isCloseButtonShown = { false } > < div style = { { margin : '20px 20px 0 20px' } } > < ProgressBar value = { progress } intent = { Intent . SUCCESS } / > < /div> < /Dialog> { isReady && < div id = 'main' style = { { width : `${ containerWidth }px` } } className = { classnames ( [ viewportTooSmall && 'viewportTooSmall' ] ) } > < PlayerControls /> < StepperView / > < SubtitlesBand /> < /div>} { error && < Alert intent = { Intent . DANGER } icon = 'error' isOpen = { ! ! error } onConfirm = { this . reload } > < p style = { { fontSize : '150%' , fontWeight : 'bold' } } > { "A fatal error has occured while preparing playback." } < /p> < p > { "Source: " } { error . source } < /p> < p > { "Error: " } { error . message } < /p> < p > { "Details: " } { error . details } < /p> < p style = { { fontWeight : 'bold' } } > { "Click OK to reload the page." } < /p> < /Alert>} < /div>); } reload = ( ) => { window . location . reload ( ) ; } ; } export const PlayerApp = connect ( mapStateToProps ) ( _PlayerApp ) ;