@bbc/react-transcript-editor/dist/TranscriptEditor/MediaPlayer/index.js

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_reactKeyboardShortcuts=require("react-keyboard-shortcuts"),_VideoPlayer=_interopRequireDefault(require("./VideoPlayer")),_PlayerControls=_interopRequireDefault(require("./PlayerControls")),_ProgressBar=_interopRequireDefault(require("./ProgressBar")),_defaultHotKeys=_interopRequireDefault(require("./defaultHotKeys")),_indexModule=_interopRequireDefault(require("./index.module.css")),_index=require("../../Util/timecode-converter/index"),_crypto=require("crypto");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _typeof(obj){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(obj)}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var descriptor,i=0;i<props.length;i++)descriptor=props[i],descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Constructor}function _possibleConstructorReturn(self,call){return call&&("object"===_typeof(call)||"function"==typeof call)?call:_assertThisInitialized(self)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&_setPrototypeOf(subClass,superClass)}function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf||function(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}var PLAYBACK_RATES=[{value:.2,label:"0.2"},{value:.25,label:"0.25"},{value:.5,label:"0.5"},{value:.75,label:"0.75"},{value:1,label:"1"},{value:1.25,label:"1.25"},{value:1.5,label:"1.5"},{value:1.75,label:"1.75"},{value:2,label:"2"},{value:2.5,label:"2.5"},{value:3,label:"3"},{value:3.5,label:"3.5"}],MediaPlayer=/*#__PURE__*/function(_React$Component){function MediaPlayer(props){var _this;return _classCallCheck(this,MediaPlayer),_this=_possibleConstructorReturn(this,_getPrototypeOf(MediaPlayer).call(this,props)),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"hot_keys",(0,_defaultHotKeys.default)(_assertThisInitialized(_assertThisInitialized(_this)))),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setCurrentTime",function(newCurrentTime){if(""!==newCurrentTime&&null!==newCurrentTime){// hh:mm:ss:ff - mm:ss - m:ss - ss - seconds number or string and hh:mm:ss
var newCurrentTimeInSeconds=(0,_index.timecodeToSeconds)(newCurrentTime);if(null!==_this.videoRef.current){var videoRef=_this.videoRef.current;4===videoRef.readyState&&(videoRef.currentTime=newCurrentTimeInSeconds,_this.playMedia())}}}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"promptSetCurrentTime",function(){var userTimecodeValue=prompt("Jump to time - hh:mm:ss:ff hh:mm:ss mm:ss m:ss m.ss seconds");// TODO: add some validation, eg if user types just a string it won't crash.
// needs function to check it's either timecode on the formats specified above or a number
// this could be part of the timecode module(?)
void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"promptSetCurrentTime",name:"userTimecodeValue",value:userTimecodeValue}),null!==userTimecodeValue&&(userTimecodeValue.includes(":")&&(userTimecodeValue=(0,_index.timecodeToSeconds)(userTimecodeValue)),0!==_this.state.timecodeOffset&&(userTimecodeValue-=_this.state.timecodeOffset),_this.setCurrentTime(userTimecodeValue))}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setTimeCodeOffset",function(newTimeCodeOffSet){if(void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"setTimeCodeOffset",name:"timecodeOffsetValue",value:newTimeCodeOffSet}),""!==newTimeCodeOffSet&&null!==newTimeCodeOffSet){// use similar helper function from above to convert
var newCurrentTimeInSeconds=newTimeCodeOffSet;newTimeCodeOffSet.includes(":")&&(newCurrentTimeInSeconds=(0,_index.timecodeToSeconds)(newTimeCodeOffSet),_this.setState({timecodeOffset:newCurrentTimeInSeconds}))}}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"rollBack",function(){if(null!==_this.videoRef.current){void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"rollBack",name:"rollBackValue",value:_this.state.rollBackValueInSeconds});// get video duration
var videoElem=_this.videoRef.current,tmpDesiredCurrentTime=videoElem.currentTime-_this.state.rollBackValueInSeconds;_this.setCurrentTime(tmpDesiredCurrentTime)}}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleTimeUpdate",function(e){_this.props.hookOnTimeUpdate(e.target.currentTime)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handlePlayBackRateChange",function(e){_this.setPlayBackRate(parseFloat(e.target.value))}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"setPlayBackRate",function(input){null!==_this.videoRef.current&&.2<=input&&3.5>=input&&_this.setState({playbackRate:input},function(){_this.videoRef.current.playbackRate=input,void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"setPlayBackRate",name:"playbackRateNewValue",value:input})})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"decreasePlaybackRate",function(){var speeds=[].concat(PLAYBACK_RATES).reverse(),slower=speeds.find(function(option){return option.value<_this.state.playbackRate}),newSpeed=slower?slower.value:.2;_this.setPlayBackRate(newSpeed)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"increasePlaybackRate",function(){var speeds=[].concat(PLAYBACK_RATES),faster=speeds.find(function(option){return option.value>_this.state.playbackRate}),newSpeed=faster?faster.value:3.5;_this.setPlayBackRate(newSpeed)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleChangeReplayRollbackValue",function(e){null!==_this.videoRef.current&&_this.setState({rollBackValueInSeconds:e.target.value})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMuteVolume",function(){null!==_this.videoRef.current&&(0<_this.videoRef.current.volume?_this.videoRef.current.volume=0:_this.videoRef.current.volume=1)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"isPlaying",function(){if(null!==_this.videoRef.current)return!_this.videoRef.current.paused}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"pauseMedia",function(){_this.setState({isPlaying:!1},function(){return _this.videoRef.current.pause()}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"pauseMedia",name:"pauseMedia",value:(0,_index.secondsToTimecode)(_this.videoRef.current.currentTime)})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"playMedia",function(){_this.setState({isPlaying:!0},function(){return _this.videoRef.current.play()}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"playMedia",name:"playMedia",value:(0,_index.secondsToTimecode)(_this.videoRef.current.currentTime)})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"togglePlayMedia",function(){null!==_this.videoRef.current&&(_this.state.isPlaying?_this.pauseMedia():_this.playMedia())}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"skipForward",function(){if(null!==_this.videoRef.current){// TODO track this?
var currentTime=_this.videoRef.current.currentTime,newCurrentTime=+(currentTime+10).toFixed(1);_this.setCurrentTime(newCurrentTime)}}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"skipBackward",function(){// TODO track this?
if(null!==_this.videoRef.current){var currentTime=_this.videoRef.current.currentTime,newCurrentTime=+(currentTime-10).toFixed(1);_this.setCurrentTime(newCurrentTime)}}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleProgressBarClick",function(e){var time=e.target.value;_this.setCurrentTime(time),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"handleProgressBarClick",name:"roundNewCurrentTime",value:time})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getMediaCurrentTime",function(){return null===_this.videoRef.current?"00:00:00:00":(0,_index.secondsToTimecode)(_this.videoRef.current.currentTime+_this.state.timecodeOffset)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleMediaDurationChange",function(e){void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"mediaDuration",name:(0,_index.secondsToTimecode)(e.target.duration),value:e.target.duration})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"onLoadedDataGetDuration",function(e){var currentDuration=e.target.duration,currentDurationWithOffset=currentDuration+_this.state.timecodeOffset,durationInSeconds=(0,_index.secondsToTimecode)(currentDuration+currentDurationWithOffset);_this.setState({mediaDuration:durationInSeconds}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"onLoadedDataGetDuration",name:"durationInSeconds-WithoutOffset",value:(0,_index.secondsToTimecode)(currentDuration)})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handlePictureInPicture",function(){null!==_this.videoRef.current&&(void 0===document.pictureInPictureElement?(alert("Picture in Picture not supported in this browser, try chrome."),_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"handlePictureInPicture",name:"picture-in-picture-not-supported"})):document.pictureInPictureElement?(_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"handlePictureInPicture",name:"turning-picture-in-picture-off"}),document.exitPictureInPicture().catch(function(error){console.error("Video failed to leave Picture-in-Picture mode",error),_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"handlePictureInPicture",name:"turning-picture-in-picture-off-error"})})):(_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"handlePictureInPicture",name:"turning-picture-in-picture-on"}),_this.videoRef.current.requestPictureInPicture().catch(function(error){console.error("Video failed to enter Picture-in-Picture mode",error),_this.props.handleAnalyticsEvents({category:"MediaPlayer",action:"handlePictureInPicture",name:"turning-picture-in-picture-on-error"})})))}),_this.videoRef=_react.default.createRef(),_this.state={playbackRate:1,rollBackValueInSeconds:_this.props.rollBackValueInSeconds,timecodeOffset:_this.props.timecodeOffset,hotKeys:(0,_defaultHotKeys.default)(_assertThisInitialized(_assertThisInitialized(_this))),isPlaying:!1,playbackRateOptions:PLAYBACK_RATES,mediaDuration:"00:00:00:00"},_this}/*eslint-disable camelcase */return _inherits(MediaPlayer,_React$Component),_createClass(MediaPlayer,[{key:"componentDidMount",value:function componentDidMount(){this.props.hookSeek(this.setCurrentTime),this.props.hookPlayMedia(this.togglePlayMedia),this.props.hookIsPlaying(this.isPlaying)}},{key:"render",value:function render(){var _this2=this,player=_react.default.createElement(_VideoPlayer.default,{mediaUrl:this.props.mediaUrl,onTimeUpdate:this.handleTimeUpdate,onClick:this.togglePlayMedia.bind(this),videoRef:this.videoRef,onLoadedDataGetDuration:this.onLoadedDataGetDuration}),playerControlsSection=_react.default.createElement("div",{className:_indexModule.default.controlsSection},_react.default.createElement("div",{className:_indexModule.default.titleBox},_react.default.createElement("h1",{className:_indexModule.default.title},this.props.fileName?this.props.fileName:this.props.mediaUrl)),_react.default.createElement(_PlayerControls.default,{playMedia:this.togglePlayMedia.bind(this),isPlaying:this.state.isPlaying,playbackRate:this.state.playbackRate,skipBackward:this.skipBackward.bind(this),skipForward:this.skipForward.bind(this),rollback:this.rollBack,currentTime:this.getMediaCurrentTime(),duration:this.state.mediaDuration,onSetCurrentTime:"",onSetTimecodeOffset:"",promptSetCurrentTime:this.promptSetCurrentTime.bind(this),setTimeCodeOffset:this.setTimeCodeOffset.bind(this),timecodeOffset:(0,_index.secondsToTimecode)(this.state.timecodeOffset),handleMuteVolume:this.handleMuteVolume.bind(this),setPlayBackRate:this.handlePlayBackRateChange.bind(this),playbackRateOptions:this.state.playbackRateOptions,pictureInPicture:this.handlePictureInPicture,handleSaveTranscript:function handleSaveTranscript(){_this2.props.handleSaveTranscript()}})),progressBar=_react.default.createElement(_ProgressBar.default,{max:null===this.videoRef.current?"100":parseInt(this.videoRef.current.duration).toString(),value:null===this.videoRef.current?0:parseInt(this.videoRef.current.currentTime),buttonClick:this.handleProgressBarClick.bind(this)});return _react.default.createElement("section",{className:_indexModule.default.topSection},_react.default.createElement("div",{className:_indexModule.default.playerSection},null===this.props.mediaUrl?null:player,null===this.props.mediaUrl?null:playerControlsSection),null===this.props.mediaUrl?null:progressBar)}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps){if(null!==nextProps.timecodeOffset){var newCurrentTimeInSeconds=nextProps.timecodeOffset;return"string"==typeof newCurrentTimeInSeconds&&newCurrentTimeInSeconds.includes(":")&&!newCurrentTimeInSeconds.includes("NaN")&&(newCurrentTimeInSeconds=(0,_index.timecodeToSeconds)(nextProps.timecodeOffset)),{timecodeOffset:newCurrentTimeInSeconds,rollBackValueInSeconds:nextProps.rollBackValueInSeconds}}return null}}]),MediaPlayer}(_react.default.Component);MediaPlayer.propTypes={fileName:_propTypes.default.string,hookSeek:_propTypes.default.func,hookPlayMedia:_propTypes.default.func,hookIsPlaying:_propTypes.default.func,mediaUrl:_propTypes.default.string,hookOnTimeUpdate:_propTypes.default.func,rollBackValueInSeconds:_propTypes.default.number,timecodeOffset:_propTypes.default.number};var _default=(0,_reactKeyboardShortcuts.hotkeys)(MediaPlayer);exports.default=_default;