@bbc/react-transcript-editor/dist/TranscriptEditor/TimedTextEditor/WrapperBlock.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")),_draftJs=require("draft-js"),_SpeakerLabel=_interopRequireDefault(require("./SpeakerLabel")),_timecodeConverter=require("../../Util/timecode-converter/"),_WrapperBlockModule=_interopRequireDefault(require("./WrapperBlock.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 WrapperBlock=/*#__PURE__*/function(_React$Component){function WrapperBlock(props){var _this;return _classCallCheck(this,WrapperBlock),_this=_possibleConstructorReturn(this,_getPrototypeOf(WrapperBlock).call(this,props)),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleOnClickEdit",function(){var newSpeakerName=prompt("New Speaker Name?");if(""!==newSpeakerName&&null!==newSpeakerName){_this.setState({speaker:newSpeakerName}),void 0!==_this.props.blockProps.handleAnalyticsEvents&&_this.props.blockProps.handleAnalyticsEvents({category:"WrapperBlock",action:"handleOnClickEdit",name:"newSpeakerName",value:newSpeakerName});// From docs: https://draftjs.org/docs/api-reference-selection-state#keys-and-offsets
// selection points are tracked as key/offset pairs,
// where the key value is the key of the ContentBlock where the point is positioned
// and the offset value is the character offset within the block.
// Get key of the currentBlock
var keyForCurrentCurrentBlock=_this.props.block.getKey(),currentBlockSelection=_draftJs.SelectionState.createEmpty(keyForCurrentCurrentBlock),editorStateWithSelectedCurrentBlock=_draftJs.EditorState.acceptSelection(_this.props.blockProps.editorState,currentBlockSelection),currentBlockSelectionState=editorStateWithSelectedCurrentBlock.getSelection(),newContentState=_draftJs.Modifier.mergeBlockData(_this.props.contentState,currentBlockSelectionState,{speaker:newSpeakerName});// create empty selection for current block
// https://draftjs.org/docs/api-reference-selection-state#createempty
_this.props.blockProps.setEditorNewContentState(newContentState)}}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"handleTimecodeClick",function(){_this.props.blockProps.onWordClick(_this.state.start),void 0!==_this.props.blockProps.handleAnalyticsEvents&&_this.props.blockProps.handleAnalyticsEvents({category:"WrapperBlock",action:"handleTimecodeClick",name:"onWordClick",value:(0,_timecodeConverter.secondsToTimecode)(_this.state.start)})}),_this.state={speaker:"",start:0,timecodeOffset:_this.props.blockProps.timecodeOffset},_this}return _inherits(WrapperBlock,_React$Component),_createClass(WrapperBlock,[{key:"componentDidMount",value:function componentDidMount(){var block=this.props.block,speaker=block.getData().get("speaker"),start=block.getData().get("start");this.setState({speaker:speaker,start:start})}},{key:"render",value:function render(){var startTimecode=this.state.start;this.props.blockProps.timecodeOffset&&(startTimecode+=this.props.blockProps.timecodeOffset);var speakerElement=_react.default.createElement(_SpeakerLabel.default,{name:this.state.speaker,handleOnClickEdit:this.handleOnClickEdit}),timecodeElement=_react.default.createElement("span",{className:_WrapperBlockModule.default.time,onClick:this.handleTimecodeClick},(0,_timecodeConverter.shortTimecode)(startTimecode));return _react.default.createElement("div",{className:_WrapperBlockModule.default.WrapperBlock},_react.default.createElement("div",{className:_WrapperBlockModule.default.markers},this.props.blockProps.showSpeakers?speakerElement:"",this.props.blockProps.showTimecodes?timecodeElement:""),_react.default.createElement("div",{className:_WrapperBlockModule.default.text},_react.default.createElement(_draftJs.EditorBlock,this.props)))}}]),WrapperBlock}(_react.default.Component),_default=WrapperBlock;exports.default=_default;