{this.props.blockProps.showSpeakers ? speakerElement : ''}
+
{this.props.blockProps.showTimecodes ? timecodeElement : ''}
diff --git a/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.module.css b/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.module.css
index aa0a0fa8..aee318a8 100644
--- a/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.module.css
+++ b/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.module.css
@@ -1,53 +1,100 @@
@value color-labs-red, color-light-grey, color-mid-grey, color-dark-grey from '../colours.module.css';
-.WrapperBlock {
- height: 100%;
- width: 100%;
- margin-bottom: 2em;
- line-height: 1.2em;
- overflow: hidden;
-}
+/* Desktop size */
+@media (min-width: 768px) {
-.markers {
- width: 25%;
- font-size: 0.8em;
- line-height: 1.2em;
- float: left;
-}
+ .markers {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ }
+
+ .WrapperBlock {
+ margin-bottom: 1em;
+ overflow: hidden;
+ display: grid;
+ grid-template-columns: [col-speaker] minmax(200px, 18%) [col-text] minmax(
+ 50%,
+ 81%
+ );
+ grid-column-gap: 1%;
+ justify-content: center;
+ align-content: center;
+ }
-.text {
- width: 75%;
- font-size: 1em;
- float: right;
- clear: right;
+ .speaker {
+ color: color-mid-grey;
+ font-weight: bold;
+ text-transform: uppercase;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ justify-self: start;
+ max-width: 100px;
+ text-align: left;
+ }
+
+ .text {
+ font-size: 1em;
+ float: right;
+ clear: right;
+ }
}
-.speaker {
- display: inline-block;
- width: 50%;
- padding-right: 2em;
- vertical-align: middle;
- color: color-mid-grey;
- font-weight: bold;
- text-transform: uppercase;
- text-align: right;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
+/* Mobile devices */
+@media (max-width: 768px) {
+
+ .markers {
+ width: 100%;
+ font-size: 0.8em;
+ line-height: 1.2em;
+ margin-bottom: 0.5em;
+ }
+
+ .WrapperBlock {
+ width: 100%;
+ margin-bottom: 1em;
+ line-height: 1.2em;
+ overflow: hidden;
+ }
+
+ .speaker {
+ padding-right: 2em;
+ vertical-align: middle;
+ color: color-mid-grey;
+ font-weight: bold;
+ text-transform: uppercase;
+ text-align: right;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: left;
+ }
+
+ .text {
+ width: 100%;
+ font-size: 1em;
+ float: left;
+
+ /* clear: right; */
+ }
}
.time {
- display: inline-block;
- width: 30%;
font-weight: lighter;
- vertical-align: middle;
cursor: pointer;
- float: right;
- line-height: 1.4em;
- margin-right: 0.5em;
+ justify-self: start;
}
-.EditLabel {
+.time:hover {
+ text-decoration: underline;
+
+ /* color: blue; */
+}
+
+.speaker {
cursor: pointer;
+}
+
+.EditLabel {
margin-right: 0.5em;
}
diff --git a/src/lib/TranscriptEditor/TimedTextEditor/index.js b/src/lib/TranscriptEditor/TimedTextEditor/index.js
index 913e5ea8..cfa1a948 100644
--- a/src/lib/TranscriptEditor/TimedTextEditor/index.js
+++ b/src/lib/TranscriptEditor/TimedTextEditor/index.js
@@ -1,9 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
-import Tooltip from 'react-simple-tooltip';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faQuestionCircle, faMousePointer, faICursor, faUserEdit, faKeyboard, faSave } from '@fortawesome/free-solid-svg-icons';
import {
Editor,
@@ -12,8 +8,7 @@ import {
convertFromRaw,
convertToRaw,
getDefaultKeyBinding,
- Modifier,
- KeyBindingUtil
+ Modifier
} from 'draft-js';
import Word from './Word';
@@ -23,8 +18,6 @@ import sttJsonAdapter from '../../Util/adapters/index.js';
import exportAdapter from '../../Util/export-adapters/index.js';
import style from './index.module.css';
-const { hasCommandModifier } = KeyBindingUtil;
-
class TimedTextEditor extends React.Component {
constructor(props) {
super(props);
@@ -64,7 +57,7 @@ class TimedTextEditor extends React.Component {
componentDidUpdate(prevProps, prevState) {
if (
(prevState.transcriptData !== this.state.transcriptData)
- && ( this.props.mediaUrl!== null && !this.isPresentInLocalStorage(this.props.mediaUrl) )
+ && ( this.props.mediaUrl !== null && !this.isPresentInLocalStorage(this.props.mediaUrl) )
) {
this.loadData();
}
@@ -109,12 +102,12 @@ class TimedTextEditor extends React.Component {
editorState
}), () => {
// saving when user has stopped typing for more then five seconds
- if (this.saveTimer!== undefined) {
+ if (this.saveTimer !== undefined) {
clearTimeout(this.saveTimer);
}
this.saveTimer = setTimeout(() => {
this.localSave(this.props.mediaUrl);
- }, 5000);
+ }, 1000);
});
}
}
@@ -149,7 +142,6 @@ class TimedTextEditor extends React.Component {
}
localSave = () => {
- console.log('localSave');
clearTimeout(this.saveTimer);
let mediaUrlName = this.props.mediaUrl;
// if using local media instead of using random blob name
@@ -268,7 +260,7 @@ class TimedTextEditor extends React.Component {
*/
customKeyBindingFn = (e) => {
const enterKey = 13;
- const spaceKey =32;
+ const spaceKey = 32;
const kKey = 75;
const lKey = 76;
const jKey = 74;
@@ -406,9 +398,9 @@ class TimedTextEditor extends React.Component {
// if it's the last char in the paragraph - get previous entity
if (remainingCharNumber === 0 ) {
isEndOfParagraph = true;
- for (let j = lengthPlainTextForTheBlock; j >0 ; j--) {
+ for (let j = lengthPlainTextForTheBlock; j > 0 ; j--) {
entityKey = originalBlock.getEntityAt(j);
- if (entityKey!== null) {
+ if (entityKey !== null) {
// if it finds it then return
return { entityKey, isEndOfParagraph };
}
@@ -416,10 +408,9 @@ class TimedTextEditor extends React.Component {
}
// if it's first char or another within the block - get next entity
else {
- console.log('Main part of paragraph');
let initialSelectionOffset = currentSelection.getStartOffset();
for (let i = 0; i < remainingCharNumber ; i++) {
- initialSelectionOffset +=i;
+ initialSelectionOffset += i;
entityKey = originalBlock.getEntityAt(initialSelectionOffset);
// if it finds it then return
if (entityKey !== null) {
@@ -482,25 +473,6 @@ class TimedTextEditor extends React.Component {
}
render() {
- const helpMessage =
- Double click on a word or timestamp to jump to that point in the video.
- Start typing to edit text.
- You can add and change names of speakers in your transcript.
- Use keyboard shortcuts for quick control.
- Save & export to get a copy to your desktop.
-
;
-
- const tooltip =
-
- How does this work?
- ;
-
const currentWord = this.getCurrentWord();
const highlightColour = '#69e3c2';
const unplayedColor = '#767676';
@@ -512,8 +484,12 @@ class TimedTextEditor extends React.Component {
const editor = (
this.handleDoubleClick(event) }>
-
+ onDoubleClick={ event => this.handleDoubleClick(event) }
+ // TODO: decide if on mobile want to have a way to "click" on words
+ // to play corresponding media
+ // a double tap would be the ideal solution
+ // onTouchStart={ event => this.handleDoubleClick(event) }
+ >