@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"),_reactSimpleTooltip=_interopRequireDefault(require("react-simple-tooltip")),_TimedTextEditor=_interopRequireDefault(require("./TimedTextEditor")),_MediaPlayer=_interopRequireDefault(require("./MediaPlayer")),_VideoPlayer=_interopRequireDefault(require("./MediaPlayer/VideoPlayer")),_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(){var timedTextEditor=_this.timedTextEditorRef;timedTextEditor&&timedTextEditor.current&&(timedTextEditor.current.isPresentInLocalStorage(_this.props.mediaUrl)?(console.info("Already present in local storage."),timedTextEditor.current.loadLocalSavedData(_this.props.mediaUrl)):console.info("Not present in local storage."))}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleWordClick",function(startTime){_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(e){var currentTime=e.target.currentTime;_this.setState({currentTime:currentTime})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handlePlayMedia",function(isPlaying){_this.playMedia(isPlaying)}),_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}),_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}),_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}),_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.timedTextEditorRef.current.forceUpdate()})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleShowTimecodes",function(e){var isChecked=e.target.checked;_this.setState({showTimecodes:isChecked}),_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}),_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}}),_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}}),_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.timedTextEditorRef.current.getEditorContent(exportFormat)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handlePreviewIsDisplayed",function(){_this.setState({previewIsDisplayed:!_this.state.previewIsDisplayed})}),_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}),_this.props.handleAnalyticsEvents&&_this.props.handleAnalyticsEvents({category:"TranscriptEditor",action:"onLoadedDataGetDuration",name:"durationInSeconds-WithoutOffset",value:(0,_index.secondsToTimecode)(currentDuration)})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleChangePreviewViewWidth",function(e){var newPreviewViewWidth=e.target.value;_this.setState({previewViewWidth:newPreviewViewWidth})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleSaveTranscript",function(){return alert("The changes to this transcript have been saved in your browser"),_this.timedTextEditorRef.current.localSave(_this.props.mediaUrl)}),_this.videoRef=_react.default.createRef(),_this.state={currentTime:0,lastLocalSavedTime:"",transcriptData:null,isScrollIntoViewOn:!1,showSettings:!1,showShortcuts:!1,isPauseWhileTypingOn:!0,rollBackValueInSeconds:15,timecodeOffset:0,showTimecodes:!0,showSpeakers:!0,previewIsDisplayed:!0,mediaDuration:"00:00:00:00"// previewViewWidth: '25'
},_this.timedTextEditorRef=_react.default.createRef(),_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,videoPlayer=_react.default.createElement(_VideoPlayer.default,{mediaUrl:this.props.mediaUrl,onTimeUpdate:this.handleTimeUpdate// onClick={ this.props.onClick }
,videoRef:this.videoRef,previewIsDisplayed:this.state.previewIsDisplayed,onLoadedDataGetDuration:this.onLoadedDataGetDuration// viewWith={ this.state.previewViewWidth }
}),mediaControls=_react.default.createElement(_MediaPlayer.default,{title:this.props.title?this.props.title:"",mediaDuration:this.state.mediaDuration,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,videoRef:this.videoRef,handleSaveTranscript:this.handleSaveTranscript}),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,previewIsDisplayed:this.state.previewIsDisplayed,handlePreviewIsDisplayed:this.handlePreviewIsDisplayed// previewViewWidth={ this.state.previewViewWidth }
,handleChangePreviewViewWidth:this.handleChangePreviewViewWidth}),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:this.timedTextEditorRef,handleAnalyticsEvents:this.props.handleAnalyticsEvents}),helpMessage=_react.default.createElement("div",{className:_indexModule.default.helpMessage},_react.default.createElement("span",null,_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{className:_indexModule.default.icon,icon:_freeSolidSvgIcons.faMousePointer}),"Double click on a word or timestamp to jump to that point in the video."),_react.default.createElement("span",null,_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{className:_indexModule.default.icon,icon:_freeSolidSvgIcons.faICursor}),"Start typing to edit text."),_react.default.createElement("span",null,_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{className:_indexModule.default.icon,icon:_freeSolidSvgIcons.faUserEdit}),"You can add and change names of speakers in your transcript."),_react.default.createElement("span",null,_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{className:_indexModule.default.icon,icon:_freeSolidSvgIcons.faKeyboard}),"Use keyboard shortcuts for quick control."),_react.default.createElement("span",null,_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{className:_indexModule.default.icon,icon:_freeSolidSvgIcons.faSave}),"Save & export to get a copy to your desktop.")),tooltip=_react.default.createElement(_reactSimpleTooltip.default,{className:_indexModule.default.help,content:helpMessage,fadeDuration:250,fadeEasing:"ease-in",placement:"bottom",radius:5,border:"#ffffff",background:"#f2f2f2",color:"#000000"},_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{className:_indexModule.default.icon,icon:_freeSolidSvgIcons.faQuestionCircle}),"How does this work?"),header=_react.default.createElement(_react.default.Fragment,null,_react.default.createElement("header",{className:_indexModule.default.header},this.state.showSettings?settings:null,this.state.showShortcuts?shortcuts:null,tooltip),_react.default.createElement("nav",{className:_indexModule.default.nav},null===this.props.mediaUrl?null:mediaControls),_react.default.createElement("div",{className:_indexModule.default.settingsContainer},_react.default.createElement("button",{className:_indexModule.default.settingsButton,title:"Settings",onClick:this.handleSettingsToggle},_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{icon:_freeSolidSvgIcons.faCog})),_react.default.createElement("button",{className:"".concat(_indexModule.default.settingsButton," ").concat(_indexModule.default.keyboardShortcutsButon),title:"view shortcuts",onClick:this.handleShortcutsToggle},_react.default.createElement(_reactFontawesome.FontAwesomeIcon,{icon:_freeSolidSvgIcons.faKeyboard}))));return _react.default.createElement("div",{className:_indexModule.default.container},null===this.props.mediaUrl?null:header,_react.default.createElement("div",{className:_indexModule.default.grid},_react.default.createElement("section",{className:_indexModule.default.row},_react.default.createElement("aside",{className:_indexModule.default.aside},null===this.props.mediaUrl?null:videoPlayer),_react.default.createElement("main",{className:_indexModule.default.main},null!==this.props.mediaUrl&&null!==this.props.transcriptData?timedTextEditor:null))))}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps){return null===nextProps.transcriptData?null:{transcriptData:nextProps.transcriptData}}}]),TranscriptEditor}(_react.default.Component);TranscriptEditor.propTypes={onClick:_propTypes.default.func,title:_propTypes.default.string,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;