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

A React component to make transcribing audio and video easier and faster.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_reactFontawesome=require("@fortawesome/react-fontawesome"),_freeSolidSvgIcons=require("@fortawesome/free-solid-svg-icons"),_TimedTextEditor=_interopRequireDefault(require("./TimedTextEditor")),_MediaPlayer=_interopRequireDefault(require("./MediaPlayer")),_Settings=_interopRequireDefault(require("./Settings")),_Shortcuts=_interopRequireDefault(require("./Settings/Shortcuts")),_index=require("../Util/timecode-converter/index"),_indexModule=_interopRequireDefault(require("./index.module.css"));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 TranscriptEditor=/*#__PURE__*/function(_React$Component){function TranscriptEditor(props){var _this;return _classCallCheck(this,TranscriptEditor),_this=_possibleConstructorReturn(this,_getPrototypeOf(TranscriptEditor).call(this,props)),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"ifPresentRetrieveTranscriptFromLocalStorage",function(){void 0!==_this.refs.timedTextEditor&&(_this.refs.timedTextEditor.isPresentInLocalStorage(_this.props.mediaUrl)?(console.info("was already present in local storage"),_this.refs.timedTextEditor.loadLocalSavedData(_this.props.mediaUrl)):console.info("not present in local storage"))}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleWordClick",function(startTime){void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"TranscriptEditor",action:"doubleClickOnWord",name:"startTime",value:(0,_index.secondsToTimecode)(startTime)}),_this.setCurrentTime(startTime)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleTimeUpdate",function(currentTime){_this.setState({currentTime:currentTime})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handlePlayMedia",function(bool){_this.playMedia(bool)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleIsPlaying",function(){return _this.isPlaying()}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleIsScrollIntoViewChange",function(e){var isChecked=e.target.checked;_this.setState({isScrollIntoViewOn:isChecked}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"TranscriptEditor",action:"handleIsScrollIntoViewChange",name:"isScrollIntoViewOn",value:isChecked})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handlePauseWhileTyping",function(e){var isChecked=e.target.checked;_this.setState({isPauseWhileTypingOn:isChecked}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"TranscriptEditor",action:"handlePauseWhileTyping",name:"isPauseWhileTypingOn",value:isChecked})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleRollBackValueInSeconds",function(e){var rollBackValue=e.target.value;_this.setState({rollBackValueInSeconds:rollBackValue}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"TranscriptEditor",action:"handleRollBackValueInSeconds",name:"rollBackValueInSeconds",value:rollBackValue})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleSetTimecodeOffset",function(timecodeOffset){_this.setState({timecodeOffset:timecodeOffset},function(){_this.refs.timedTextEditor.forceUpdate()})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleShowTimecodes",function(e){var isChecked=e.target.checked;_this.setState({showTimecodes:isChecked}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"TranscriptEditor",action:"handleShowTimecodes",name:"showTimecodes",value:isChecked})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleShowSpeakers",function(e){var isChecked=e.target.checked;_this.setState({showSpeakers:isChecked}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"TranscriptEditor",action:"handleShowSpeakers",name:"showSpeakers",value:isChecked})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleSettingsToggle",function(){_this.setState(function(prevState){return{showSettings:!prevState.showSettings}}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"TranscriptEditor",action:"handleSettingsToggle",name:"showSettings",value:!_this.state.showSettings})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleShortcutsToggle",function(){_this.setState(function(prevState){return{showShortcuts:!prevState.showShortcuts}}),void 0!==_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"TranscriptEditor",action:"handleShortcutsToggle",name:"showShortcuts",value:!_this.state.showShortcuts})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getEditorContent",function(exportFormat){return _this.refs.timedTextEditor.getEditorContent(exportFormat)}),_this.state={currentTime:0,lastLocalSavedTime:"",transcriptData:null,isScrollIntoViewOn:!1,showSettings:!1,showShortcuts:!1,isPauseWhileTypingOn:!0,rollBackValueInSeconds:15,timecodeOffset:0,showTimecodes:!0,showSpeakers:!0},_this}return _inherits(TranscriptEditor,_React$Component),_createClass(TranscriptEditor,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){prevState.transcriptData!==this.state.transcriptData&&prevProps.mediaUrl!==this.props.mediaUrl?(console.info("Transcript and media"),this.ifPresentRetrieveTranscriptFromLocalStorage()):prevState.transcriptData===this.state.transcriptData&&prevProps.mediaUrl!==this.props.mediaUrl?(console.info("Transcript first and then media"),this.ifPresentRetrieveTranscriptFromLocalStorage()):prevState.transcriptData!==this.state.transcriptData&&prevProps.mediaUrl===this.props.mediaUrl&&(console.info("Media first and then transcript"),this.ifPresentRetrieveTranscriptFromLocalStorage())}},{key:"render",value:function render(){var _this2=this,mediaPlayer=_react.default.createElement(_MediaPlayer.default,{fileName:this.props.fileName,hookSeek:function hookSeek(foo){return _this2.setCurrentTime=foo},hookPlayMedia:function hookPlayMedia(foo){return _this2.playMedia=foo},hookIsPlaying:function hookIsPlaying(foo){return _this2.isPlaying=foo},rollBackValueInSeconds:this.state.rollBackValueInSeconds,timecodeOffset:this.state.timecodeOffset,hookOnTimeUpdate:this.handleTimeUpdate,mediaUrl:this.props.mediaUrl// ref={ 'MediaPlayer' }
,handleAnalyticsEvents:this.props.handleAnalyticsEvents}),settings=_react.default.createElement(_Settings.default,{handleSettingsToggle:this.handleSettingsToggle,defaultValuePauseWhileTyping:this.state.isPauseWhileTypingOn,defaultValueScrollSync:this.state.isScrollIntoViewOn,defaultRollBackValueInSeconds:this.state.rollBackValueInSeconds,timecodeOffset:this.state.timecodeOffset,showTimecodes:this.state.showTimecodes,showSpeakers:this.state.showSpeakers,handlePauseWhileTyping:this.handlePauseWhileTyping,handleIsScrollIntoViewChange:this.handleIsScrollIntoViewChange,handleRollBackValueInSeconds:this.handleRollBackValueInSeconds,handleSetTimecodeOffset:this.handleSetTimecodeOffset,handleShowTimecodes:this.handleShowTimecodes,handleShowSpeakers:this.handleShowSpeakers,handleAnalyticsEvents:this.props.handleAnalyticsEvents}),shortcuts=_react.default.createElement(_Shortcuts.default,{handleShortcutsToggle:this.handleShortcutsToggle}),timedTextEditor=_react.default.createElement(_TimedTextEditor.default,{fileName:this.props.fileName,transcriptData:this.state.transcriptData,timecodeOffset:this.state.timecodeOffset,onWordClick:this.handleWordClick,playMedia:this.handlePlayMedia,isPlaying:this.handleIsPlaying,currentTime:this.state.currentTime,isEditable:this.props.isEditable,sttJsonType:this.props.sttJsonType,mediaUrl:this.props.mediaUrl,isScrollIntoViewOn:this.state.isScrollIntoViewOn,isPauseWhileTypingOn:this.state.isPauseWhileTypingOn,showTimecodes:this.state.showTimecodes,showSpeakers:this.state.showSpeakers,ref:"timedTextEditor",handleAnalyticsEvents:this.props.handleAnalyticsEvents});return _react.default.createElement("div",{className:_indexModule.default.container},_react.default.createElement("header",{className:_indexModule.default.header},this.state.showSettings?settings:null,this.state.showShortcuts?shortcuts:null),_react.default.createElement("aside",{className:_indexModule.default.aside},this.props.mediaUrl?mediaPlayer:null),_react.default.createElement("div",{className:_indexModule.default.settingsContainer},_react.default.createElement("button",{className:_indexModule.default.settingsButton,onClick:this.handleSettingsToggle},_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{icon:_freeSolidSvgIcons.faCog})),_react.default.createElement("button",{className:_indexModule.default.settingsButton,onClick:this.handleShortcutsToggle},_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{icon:_freeSolidSvgIcons.faKeyboard}))),_react.default.createElement("main",{className:_indexModule.default.main},null===this.props.mediaUrl?null:timedTextEditor))}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps){return null===nextProps.transcriptData?null:{transcriptData:nextProps.transcriptData}}}]),TranscriptEditor}(_react.default.Component);TranscriptEditor.propTypes={mediaUrl:_propTypes.default.string,isEditable:_propTypes.default.bool,sttJsonType:_propTypes.default.string,handleAnalyticsEvents:_propTypes.default.func,fileName:_propTypes.default.string};var _default=TranscriptEditor;exports.default=_default;