From 2fac517fb7a55cd0b0aa745dafdaf115bc060ea9 Mon Sep 17 00:00:00 2001 From: Pietro Passarelli - News Labs Date: Thu, 3 Jan 2019 19:43:12 +0100 Subject: [PATCH 01/35] moved ToolTip next to settings icon --- package-lock.json | 2 +- .../TranscriptEditor/TimedTextEditor/index.js | 22 --------------- .../TimedTextEditor/index.module.css | 19 ------------- src/lib/TranscriptEditor/index.js | 28 ++++++++++++++++++- src/lib/TranscriptEditor/index.module.css | 26 +++++++++++++++++ 5 files changed, 54 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 07a31990..d41bd3f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3441,7 +3441,7 @@ }, "regjsparser": { "version": "0.1.5", - "resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=", "dev": true, "requires": { diff --git a/src/lib/TranscriptEditor/TimedTextEditor/index.js b/src/lib/TranscriptEditor/TimedTextEditor/index.js index f00fb973..5d969956 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, @@ -405,13 +401,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 currentWord = this.getCurrentWord(); const highlightColour = '#69e3c2'; @@ -447,17 +436,6 @@ class TimedTextEditor extends React.Component { return (
- - - How does this work? - - { this.props.transcriptData !== null ? editor : null }
); diff --git a/src/lib/TranscriptEditor/TimedTextEditor/index.module.css b/src/lib/TranscriptEditor/TimedTextEditor/index.module.css index 170c81a4..cd103a24 100644 --- a/src/lib/TranscriptEditor/TimedTextEditor/index.module.css +++ b/src/lib/TranscriptEditor/TimedTextEditor/index.module.css @@ -24,22 +24,3 @@ https://github.com/facebook/draft-js/issues/528 } } -.help { - cursor: pointer; - float: right; - padding-right: 0.5em; - padding-left: 11em; - margin: 0.5em 0; -} - -.icon { - color: color-labs-red; - margin-right: 0.5em; -} - -.helpMessage span { - display: block; - font-size: 0.8em; - font-weight: lighter; - margin-top: 1em; -} diff --git a/src/lib/TranscriptEditor/index.js b/src/lib/TranscriptEditor/index.js index 036c771c..62f378d8 100644 --- a/src/lib/TranscriptEditor/index.js +++ b/src/lib/TranscriptEditor/index.js @@ -2,7 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCog, faKeyboard } from '@fortawesome/free-solid-svg-icons'; +import { faCog, faKeyboard, faQuestionCircle, faMousePointer, faICursor, faUserEdit, faSave } from '@fortawesome/free-solid-svg-icons'; + +import Tooltip from 'react-simple-tooltip'; import TimedTextEditor from './TimedTextEditor'; import MediaPlayer from './MediaPlayer'; @@ -156,11 +158,35 @@ class TranscriptEditor extends React.Component { handleShortcutsToggle={ this.handleShortcutsToggle } />; + 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? + ; + return (
{ this.state.showSettings ? settings : null } { this.state.showShortcuts ? shortcuts : null } + {tooltip}
diff --git a/src/lib/TranscriptEditor/index.module.css b/src/lib/TranscriptEditor/index.module.css index 8f08e6fc..00a1c2e4 100644 --- a/src/lib/TranscriptEditor/index.module.css +++ b/src/lib/TranscriptEditor/index.module.css @@ -70,3 +70,29 @@ ::moz-selection { background: color-subt-green; } + +.help { + cursor: pointer; + float: right; + padding-right: 0.5em; + padding-left: 11em; + margin: 0.5em 0; + color: white; + display: block; + /* font-size: 0.8em; */ + font-weight: lighter; + margin-top: 0.5em; + margin-right: 6em; +} + +.icon { + color: color-labs-red; + margin-right: 0.5em; +} + +.helpMessage span { + display: block; + /* font-size: 0.8em; */ + font-weight: lighter; + margin-top: 1em; +} \ No newline at end of file From 8e365d1b1b0b573c9125745d0e01ff54c338a3d6 Mon Sep 17 00:00:00 2001 From: Pietro Passarelli - News Labs Date: Fri, 4 Jan 2019 02:31:19 +0100 Subject: [PATCH 02/35] layout change refactor --- src/index.js | 25 +++- .../MediaPlayer/PlayerControls.js | 13 ++ .../MediaPlayer/PlayerControls.module.css | 4 +- .../MediaPlayer/VideoPlayer.js | 18 ++- src/lib/TranscriptEditor/MediaPlayer/index.js | 109 +++++------------ .../MediaPlayer/index.module.css | 6 - src/lib/TranscriptEditor/Settings/index.js | 9 ++ src/lib/TranscriptEditor/index.js | 113 ++++++++++++++---- src/lib/TranscriptEditor/index.module.css | 31 ++++- 9 files changed, 209 insertions(+), 119 deletions(-) diff --git a/src/index.js b/src/index.js index 7a1562db..b425a293 100644 --- a/src/index.js +++ b/src/index.js @@ -18,7 +18,8 @@ class App extends React.Component { mediaUrl: null, isTextEditable: true, sttType: 'bbckaldi', - analyticsEvents: [] + analyticsEvents: [], + title: 'Ted Talk Kate Kate Darling' }; // this.handleChangeLoadTranscriptJson = this.handleChangeLoadTranscriptJson.bind(this); } @@ -115,7 +116,13 @@ class App extends React.Component { handleAnalyticsEvents = (event) => { this.setState({ analyticsEvents: [ ...this.state.analyticsEvents, event ] }); - } + } + + handleChangeTranscripTitle = (newTitle) => { + this.setState({ + title: newTitle + }); + } render() { return ( @@ -173,6 +180,13 @@ class App extends React.Component { /> +
+ + this.handleChangeTranscripTitle(e.target.value) } + />
@@ -183,13 +197,14 @@ class App extends React.Component { isEditable={ this.state.isTextEditable } sttJsonType={ this.state.sttType } handleAnalyticsEvents={ this.handleAnalyticsEvents } + title={ this.state.title } ref={ 'transcriptEditor' } />
-
diff --git a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js b/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js index 9fa6ac22..eec85747 100644 --- a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js +++ b/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js @@ -80,6 +80,19 @@ class PlayerControls extends React.Component { + +
+ {this.props.title} +
+ ); } diff --git a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css b/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css index bf85585f..ab977309 100644 --- a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css +++ b/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css @@ -1,7 +1,9 @@ @value color-darkest-grey, color-light-grey, color-labs-red from '../colours.module.css'; .playerControls { - margin: 1em; + /* margin: 1em; */ + margin-top: 0.5em; + margin-left: 0.5em; } .playerButton { diff --git a/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.js b/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.js index 53680d58..998e7fee 100644 --- a/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.js +++ b/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.js @@ -2,7 +2,19 @@ import React from 'react'; import PropTypes from 'prop-types'; class VideoPlayer extends React.Component { + constructor(props) { + super(props); + } + + handlePlayMedia = () => { + console.log('handle media', this.props.videoRef.current, this.props.videoRef); + if (this.props.videoRef.current !== null) { + this.props.videoRef.current.paused? this.props.videoRef.current.play(): this.props.videoRef.current.pause(); + } + }; render() { + const isDisplayed = this.props.previewIsDisplayed? 'inline' : 'none'; + return (