From 5657ecc30728122ff232f7a90569285e5279779c Mon Sep 17 00:00:00 2001 From: James Dooley Date: Wed, 14 Aug 2019 17:02:05 +0100 Subject: [PATCH 01/14] Fix: fonts --- .eslintrc | 2 +- .storybook/styles/main.scss | 13 +++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/.eslintrc b/.eslintrc index c4673ab2..3b8e34c4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -43,7 +43,7 @@ "no-param-reassign": [ 1 ], "no-shadow": [ 1 ], "camelcase": [ 1 ], - "no-underscore-dangle" : [0, "always"], + "no-underscore-dangle": [0, "always"], "keyword-spacing": ["error", { "before": true, "after": true }], "key-spacing": ["error", { "afterColon": true }], "newline-before-return": "error", diff --git a/.storybook/styles/main.scss b/.storybook/styles/main.scss index 18db8bce..56f3ef51 100644 --- a/.storybook/styles/main.scss +++ b/.storybook/styles/main.scss @@ -1,4 +1,13 @@ -body * { +body { font-family: ReithSerif, Fallback, sans-serif; - // font-family: ReithSans, Helvetica, sans-serif !important; + +} + +p, span { + font-family: ReithSans, Helvetica, sans-serif; + +} + +h1, h2, h3, h4, h5, h6, label * { + font-family: ReithSerif; } From 639bc295003c153a09c30b3842b3fbe5b28d69c3 Mon Sep 17 00:00:00 2001 From: James Dooley Date: Wed, 14 Aug 2019 17:02:33 +0100 Subject: [PATCH 02/14] Refactor: tidy transcript-editor, remove repeated videoRef checks --- packages/components/media-player/index.js | 263 +++++++----------- .../media-player/src/ProgressBar.js | 5 + .../components/transcript-editor/index.js | 40 +-- packages/components/video-player/index.js | 2 +- 4 files changed, 132 insertions(+), 178 deletions(-) diff --git a/packages/components/media-player/index.js b/packages/components/media-player/index.js index 1a5cc8d9..6fea7e02 100644 --- a/packages/components/media-player/index.js +++ b/packages/components/media-player/index.js @@ -35,6 +35,7 @@ class MediaPlayer extends React.Component { static getDerivedStateFromProps(nextProps) { if (nextProps.timecodeOffset !== null) { let newCurrentTimeInSeconds = nextProps.timecodeOffset; + if ( typeof newCurrentTimeInSeconds === 'string' && newCurrentTimeInSeconds.includes(':') && @@ -92,13 +93,11 @@ class MediaPlayer extends React.Component { if (newCurrentTime !== '' && newCurrentTime !== null) { // hh:mm:ss:ff - mm:ss - m:ss - ss - seconds number or string and hh:mm:ss const newCurrentTimeInSeconds = timecodeToSeconds(newCurrentTime); - if (this.props.videoRef.current !== null) { - const videoRef = this.props.videoRef.current; + const videoRef = this.props.videoRef.current; - if (videoRef.readyState === 4) { - videoRef.currentTime = newCurrentTimeInSeconds; - this.playMedia(); - } + if (videoRef.readyState === 4) { + videoRef.currentTime = newCurrentTimeInSeconds; + this.playMedia(); } } }; @@ -158,22 +157,20 @@ class MediaPlayer extends React.Component { }; rollBack = () => { - if (this.props.videoRef.current !== null) { - if (this.props.handleAnalyticsEvents) { - this.props.handleAnalyticsEvents({ - category: 'MediaPlayer', - action: 'rollBack', - name: 'rollBackValue', - value: this.state.rollBackValueInSeconds - }); - } - // get video duration - const videoElem = this.props.videoRef.current; - const tmpDesiredCurrentTime = + if (this.props.handleAnalyticsEvents) { + this.props.handleAnalyticsEvents({ + category: 'MediaPlayer', + action: 'rollBack', + name: 'rollBackValue', + value: this.state.rollBackValueInSeconds + }); + } + // get video duration + const videoElem = this.props.videoRef.current; + const tmpDesiredCurrentTime = videoElem.currentTime - this.state.rollBackValueInSeconds; // > 0 < duration of video - this.setCurrentTime(tmpDesiredCurrentTime); - } + this.setCurrentTime(tmpDesiredCurrentTime); }; handlePlayBackRateChange = e => { @@ -184,34 +181,30 @@ class MediaPlayer extends React.Component { * @param {float} input - playback rate value as a float */ setPlayBackRate = input => { - if (this.props.videoRef.current !== null) { - if (input >= 0.2 && input <= 3.5) { - this.setState( - { - playbackRate: input - }, - () => { - this.props.videoRef.current.playbackRate = input; - - if (this.props.handleAnalyticsEvents) { - this.props.handleAnalyticsEvents({ - category: 'MediaPlayer', - action: 'setPlayBackRate', - name: 'playbackRateNewValue', - value: input - }); - } + if (input >= 0.2 && input <= 3.5) { + this.setState( + { + playbackRate: input + }, + () => { + this.props.videoRef.current.playbackRate = input; + + if (this.props.handleAnalyticsEvents) { + this.props.handleAnalyticsEvents({ + category: 'MediaPlayer', + action: 'setPlayBackRate', + name: 'playbackRateNewValue', + value: input + }); } - ); - } + } + ); } }; decreasePlaybackRate = () => { const speeds = [ ...PLAYBACK_RATES ].reverse(); - const slower = speeds.find(option => { - return option.value < this.state.playbackRate; - }); + const slower = speeds.find(option => option.value < this.state.playbackRate); const newSpeed = slower ? slower.value : 0.2; this.setPlayBackRate(newSpeed); @@ -219,48 +212,38 @@ class MediaPlayer extends React.Component { increasePlaybackRate = () => { const speeds = [ ...PLAYBACK_RATES ]; - const faster = speeds.find(option => { - return option.value > this.state.playbackRate; - }); + const faster = speeds.find(option => option.value > this.state.playbackRate); const newSpeed = faster ? faster.value : 3.5; this.setPlayBackRate(newSpeed); }; handleChangeReplayRollbackValue = e => { - if (this.props.videoRef.current !== null) { - this.setState({ - rollBackValueInSeconds: e.target.value - }); - } + this.setState({ + rollBackValueInSeconds: e.target.value + }); }; handleMuteVolume = () => { - if (this.props.videoRef.current !== null) { - if (this.props.videoRef.current.volume > 0) { - this.props.videoRef.current.volume = 0; - this.setState({ isMute: true }); - } else { - this.props.videoRef.current.volume = 1; - this.setState({ isMute: false }); - } + if (this.props.videoRef.current.volume > 0) { + this.props.videoRef.current.volume = 0; + this.setState({ isMute: true }); + } else { + this.props.videoRef.current.volume = 1; + this.setState({ isMute: false }); } }; // TEMP: keeping this in for now. Might be replaced by state // The pauseWhileTyping logic (in TimedTextEditor) currently uses this isPlaying = () => { - if (this.props.videoRef.current !== null) { - if (this.props.videoRef.current.paused) return false; + if (this.props.videoRef.current.paused) return false; - return true; - } + return true; }; pauseMedia = () => { - this.setState({ isPlaying: false }, () => - this.props.videoRef.current.pause() - ); + this.setState({ isPlaying: false }, () => this.props.videoRef.current.pause()); if (this.props.handleAnalyticsEvents) { this.props.handleAnalyticsEvents({ @@ -273,9 +256,7 @@ class MediaPlayer extends React.Component { }; playMedia = () => { - this.setState({ isPlaying: true }, () => - this.props.videoRef.current.play() - ); + this.setState({ isPlaying: true }, () => this.props.videoRef.current.play()); if (this.props.handleAnalyticsEvents) { this.props.handleAnalyticsEvents({ @@ -290,33 +271,27 @@ class MediaPlayer extends React.Component { // Sets isPlaying state and toggles modes on the video player // TODO: modularise these / enable specific play / pause action togglePlayMedia = () => { - if (this.props.videoRef.current !== null) { - if (this.state.isPlaying) { - this.pauseMedia(); - } else { - this.playMedia(); - } + if (this.state.isPlaying) { + this.pauseMedia(); + } else { + this.playMedia(); } }; skipForward = () => { - if (this.props.videoRef.current !== null) { - // TODO track this? - const currentTime = this.props.videoRef.current.currentTime; - const newCurrentTimeIncreased = currentTime + 10; - const newCurrentTime = Number(newCurrentTimeIncreased.toFixed(1)); - this.setCurrentTime(newCurrentTime); - } + const currentTime = this.props.videoRef.current.currentTime; + const newCurrentTimeIncreased = currentTime + 10; + const newCurrentTime = Number(newCurrentTimeIncreased.toFixed(1)); + + this.setCurrentTime(newCurrentTime); }; skipBackward = () => { - // TODO track this? - if (this.props.videoRef.current !== null) { - const currentTime = this.props.videoRef.current.currentTime; - const newCurrentTimeIncreased = currentTime - 10; - const newCurrentTime = Number(newCurrentTimeIncreased.toFixed(1)); - this.setCurrentTime(newCurrentTime); - } + const currentTime = this.props.videoRef.current.currentTime; + const newCurrentTimeIncreased = currentTime - 10; + const newCurrentTime = Number(newCurrentTimeIncreased.toFixed(1)); + + this.setCurrentTime(newCurrentTime); }; handleProgressBarClick = e => { @@ -333,94 +308,66 @@ class MediaPlayer extends React.Component { } }; - getMediaCurrentTime = () => { - if (this.props.videoRef.current !== null) { - return secondsToTimecode( - this.props.videoRef.current.currentTime + this.state.timecodeOffset - ); - } - - return '00:00:00:00'; - }; + getMediaCurrentTime = () => secondsToTimecode(this.props.videoRef.current.currentTime + this.state.timecodeOffset); handlePictureInPicture = () => { - // console.log('this.props.videoRef', this.props.videoRef, this.props.videoRef.current ); - if (this.props.videoRef.current !== undefined) { - if (document.pictureInPictureElement !== undefined) { - // from https://developers.google.com/web/updates/2017/09/picture-in-picture - if (!document.pictureInPictureElement) { - if (this.props.handleAnalyticsEvents) { - this.props.handleAnalyticsEvents({ - category: 'MediaPlayer', - action: 'handlePictureInPicture', - name: 'turning-picture-in-picture-on' - }); - } - - this.props.videoRef.current.requestPictureInPicture().catch(error => { - // Video failed to enter Picture-in-Picture mode. - console.error( - 'Video failed to enter Picture-in-Picture mode', - error - ); - - if (this.props.handleAnalyticsEvents) { - this.props.handleAnalyticsEvents({ - category: 'MediaPlayer', - action: 'handlePictureInPicture', - name: 'turning-picture-in-picture-on-error' - }); - } + if (document.pictureInPictureElement !== undefined) { + // from https://developers.google.com/web/updates/2017/09/picture-in-picture + if (!document.pictureInPictureElement) { + if (this.props.handleAnalyticsEvents) { + this.props.handleAnalyticsEvents({ + category: 'MediaPlayer', + action: 'handlePictureInPicture', + name: 'turning-picture-in-picture-on' }); - } else { + } + + this.props.videoRef.current.requestPictureInPicture().catch(error => { + console.error('Video failed to enter Picture-in-Picture mode', error); + if (this.props.handleAnalyticsEvents) { this.props.handleAnalyticsEvents({ category: 'MediaPlayer', action: 'handlePictureInPicture', - name: 'turning-picture-in-picture-off' + name: 'turning-picture-in-picture-on-error' }); } - document.exitPictureInPicture().catch(error => { - // Video failed to leave Picture-in-Picture mode. - console.error( - 'Video failed to leave Picture-in-Picture mode', - error - ); - if (this.props.handleAnalyticsEvents) { - this.props.handleAnalyticsEvents({ - category: 'MediaPlayer', - action: 'handlePictureInPicture', - name: 'turning-picture-in-picture-off-error' - }); - } - }); - } + }); } else { - alert('Picture in Picture not supported in this browser, try chrome.'); if (this.props.handleAnalyticsEvents) { this.props.handleAnalyticsEvents({ category: 'MediaPlayer', action: 'handlePictureInPicture', - name: 'picture-in-picture-not-supported' + name: 'turning-picture-in-picture-off' }); } + + document.exitPictureInPicture().catch(error => { + console.error('Video failed to leave Picture-in-Picture mode', error); + + if (this.props.handleAnalyticsEvents) { + this.props.handleAnalyticsEvents({ + category: 'MediaPlayer', + action: 'handlePictureInPicture', + name: 'turning-picture-in-picture-off-error' + }); + } + }); + } + } else { + alert('Picture in Picture not supported in this browser, try chrome.'); + if (this.props.handleAnalyticsEvents) { + this.props.handleAnalyticsEvents({ + category: 'MediaPlayer', + action: 'handlePictureInPicture', + name: 'picture-in-picture-not-supported' + }); } } }; - // performance optimization - getProgressBarMax = () => { - return this.props.videoRef.current !== null - ? parseInt(this.props.videoRef.current.duration).toString() - : '100'; - } - - // performance optimization - getProgressBarValue = () => { - return this.props.videoRef.current !== null - ? parseInt(this.props.videoRef.current.currentTime) - : 0; - } + getProgressBarMax = () => parseInt(this.props.videoRef.current.duration).toString(); + getProgressBarValue = () => parseInt(this.props.videoRef.current.currentTime).toString(); render() { const progressBar = ( @@ -457,14 +404,14 @@ class MediaPlayer extends React.Component { this.props.handleSaveTranscript(); } } /> - {this.props.mediaUrl === null ? null : progressBar} + {this.props.mediaUrl ? progressBar : null} ); return (
- {this.props.mediaUrl === null ? null : playerControlsSection} + {this.props.mediaUrl ? playerControlsSection : null}
); diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js index 43c90352..86f2a47a 100644 --- a/packages/components/media-player/src/ProgressBar.js +++ b/packages/components/media-player/src/ProgressBar.js @@ -38,4 +38,9 @@ ProgressBar.propTypes = { buttonClick: PropTypes.func }; +ProgressBar.defaultProps = { + value: '0', + max: '0', +}; + export default ProgressBar; diff --git a/packages/components/transcript-editor/index.js b/packages/components/transcript-editor/index.js index fe7daba0..4d2fc253 100644 --- a/packages/components/transcript-editor/index.js +++ b/packages/components/transcript-editor/index.js @@ -439,33 +439,35 @@ class TranscriptEditor extends React.Component { /> ); + const header = ( +
+ ); + return (
- {this.props.mediaUrl === null ? null :
} + {this.props.mediaUrl ? header : null}
+
- {this.props.mediaUrl !== null && - this.props.transcriptData !== null - ? timedTextEditor - : null} + {this.props.mediaUrl && this.props.transcriptData ? timedTextEditor : null}
diff --git a/packages/components/video-player/index.js b/packages/components/video-player/index.js index aaa492e9..16b0abf6 100644 --- a/packages/components/video-player/index.js +++ b/packages/components/video-player/index.js @@ -47,7 +47,7 @@ VideoPlayer.propTypes = { mediaUrl: PropTypes.string, onTimeUpdate: PropTypes.func, onClick: PropTypes.func, - videoRef: PropTypes.object, + videoRef: PropTypes.object.isRequired, onLoadedDataGetDuration: PropTypes.func, previewIsDisplayed: PropTypes.bool, previewViewWidth: PropTypes.string From 2f14de00e00ea5e2e42b917b05cf638c93ce1c56 Mon Sep 17 00:00:00 2001 From: James Dooley Date: Wed, 14 Aug 2019 18:14:45 +0100 Subject: [PATCH 03/14] Task: Add sass-loader to webpack, pull in colours via scss --- .storybook/webpack.config.js | 6 +++++ .../keyboard-shortcuts/index.module.css | 6 ++--- .../components/media-player/index.module.css | 2 -- .../src/PlayerControls/index.module.css | 18 +++++++-------- .../media-player/src/ProgressBar.module.css | 6 ++--- .../settings/Toggle/index.module.css | 6 ++--- .../timed-text-editor/WrapperBlock.module.css | 12 +++++----- .../timed-text-editor/index.module.css | 2 +- .../transcript-editor/index.module.css | 10 ++++----- .../transcript-editor/src/index.module.css | 22 +++++++++---------- .../config/style-guide/colours.module.css | 10 --------- packages/config/style-guide/colours.scss | 8 +++++++ webpack.config.js | 8 ++++++- 13 files changed, 62 insertions(+), 54 deletions(-) delete mode 100644 packages/config/style-guide/colours.module.css create mode 100644 packages/config/style-guide/colours.scss diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index ea93098a..ca9ca8a1 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -16,6 +16,12 @@ module.exports = { options: { modules: true } + }, + { + loader: "sass-loader", + options: { + sourcemap: true + } } ] }, diff --git a/packages/components/keyboard-shortcuts/index.module.css b/packages/components/keyboard-shortcuts/index.module.css index 396692f3..c3b4a395 100644 --- a/packages/components/keyboard-shortcuts/index.module.css +++ b/packages/components/keyboard-shortcuts/index.module.css @@ -1,4 +1,4 @@ -@value color-lightest-grey, color-labs-red, color-dark-grey from '../../config/style-guide/colours.module.css'; +@import '../../config/style-guide/colours.scss'; .shortcuts { font-size: 0.85em; @@ -7,7 +7,7 @@ height: auto; vertical-align: middle; color: black; - background: color-lightest-grey; + background: $color-lightest-grey; z-index: 2; position: absolute; top: 0; @@ -43,7 +43,7 @@ .shortcut { display: inline-block; width: 6em; - background: color-labs-red; + background: $color-labs-red; font-weight: lighter; color: white; padding: 0 0; diff --git a/packages/components/media-player/index.module.css b/packages/components/media-player/index.module.css index 47f4b41b..4be055ef 100644 --- a/packages/components/media-player/index.module.css +++ b/packages/components/media-player/index.module.css @@ -1,5 +1,3 @@ -@value color-light-grey from '../../config/style-guide/colours.module.css'; - .topSection { background: black; } diff --git a/packages/components/media-player/src/PlayerControls/index.module.css b/packages/components/media-player/src/PlayerControls/index.module.css index 76d1be6e..83b3b565 100644 --- a/packages/components/media-player/src/PlayerControls/index.module.css +++ b/packages/components/media-player/src/PlayerControls/index.module.css @@ -1,4 +1,4 @@ -@value color-light-shilo, color-darkest-grey, color-light-grey, color-labs-red from '../../../../config/style-guide/colours.module.css'; +@import '../../../../config/style-guide/colours.scss'; .playerControls { margin-bottom: 0.5em; @@ -18,7 +18,7 @@ padding: 0.5em; border: 0; color: white; - background: color-darkest-grey; + background: $color-darkest-grey; font-size: 1em; cursor: pointer; margin-right: 0.3rem; @@ -50,7 +50,7 @@ width: auto; width: 100%; color: white; - background-color: color-darkest-grey; + background-color: $color-darkest-grey; } .timeBox { @@ -58,17 +58,17 @@ text-align: center; line-height: 48px; padding: 0 1em; - background-color: color-darkest-grey; + background-color: $color-darkest-grey; } .currentTime { - color: color-light-shilo; + color: $color-light-shilo; cursor: pointer; font-family: 'Lucida Console', monospace; } .separator { - color: color-light-grey; + color: $color-light-grey; margin: 0 1em; } @@ -127,7 +127,7 @@ width: auto; width: 100%; color: white; - background-color: color-darkest-grey; + background-color: $color-darkest-grey; } .timeBox { @@ -137,7 +137,7 @@ } .currentTime { - color: color-light-shilo; + color: $color-light-shilo; cursor: pointer; float: left; font-size: 0.7em; @@ -145,7 +145,7 @@ } .separator { - color: color-light-grey; + color: $color-light-grey; margin: 0 1em; display: none; } diff --git a/packages/components/media-player/src/ProgressBar.module.css b/packages/components/media-player/src/ProgressBar.module.css index f2da5d30..8285cd13 100644 --- a/packages/components/media-player/src/ProgressBar.module.css +++ b/packages/components/media-player/src/ProgressBar.module.css @@ -1,4 +1,4 @@ -@value color-light-grey, color-labs-red from '../../../config/style-guide/colours.module.css'; +@import '../../../config/style-guide/colours.scss'; .bar { width: 100%; @@ -17,14 +17,14 @@ -webkit-appearance: none; height: 30px; width: 16px; - background: color-labs-red; + background: $color-labs-red; cursor: pointer; } .bar::-moz-range-thumb { height: 30px; width: 16px; - background: color-labs-red; + background: $color-labs-red; cursor: pointer; border: 0; } diff --git a/packages/components/settings/Toggle/index.module.css b/packages/components/settings/Toggle/index.module.css index fe249f19..5cd6d039 100644 --- a/packages/components/settings/Toggle/index.module.css +++ b/packages/components/settings/Toggle/index.module.css @@ -1,4 +1,4 @@ -@value color-labs-red from '../../../config/style-guide/colours.module.css'; +@import '../../../config/style-guide/colours.scss'; .switchContainer { display: inline-block; @@ -47,11 +47,11 @@ } input:checked + .slider { - background-color: color-labs-red; + background-color: $color-labs-red; } input:focus + .slider { - box-shadow: 0 0 1px color-labs-red; + box-shadow: 0 0 1px $color-labs-red; } input:checked + .slider:before { diff --git a/packages/components/timed-text-editor/WrapperBlock.module.css b/packages/components/timed-text-editor/WrapperBlock.module.css index f3f91eef..5f748632 100644 --- a/packages/components/timed-text-editor/WrapperBlock.module.css +++ b/packages/components/timed-text-editor/WrapperBlock.module.css @@ -1,8 +1,8 @@ -@value color-labs-red, color-light-grey, color-mid-grey, color-dark-grey from '../../config/style-guide/colours.module.css'; +@import '../../config/style-guide/colours.scss'; -/* https://developer.mozilla.org/en-US/docs/Web/CSS/user-select +/* https://developer.mozilla.org/en-US/docs/Web/CSS/user-select TODO: only working in Chrome, not working in Firefox, and Safari - OSX -if selecting text, not showing selection +if selecting text, not showing selection Commented out because it means cannot select speakers and timecode anymore which is the intended default behavior but needs to come with export functionality to export as plain text, word etc.. otherwise user won't be able @@ -12,7 +12,7 @@ to get text out of component with timecodes and speaker names in the interim */ -webkit-user-select: none; -ms-user-select: none; user-select: none; -} +} /* Desktop size */ @media (min-width: 768px) { @@ -36,7 +36,7 @@ to get text out of component with timecodes and speaker names in the interim */ } .speaker { - color: color-mid-grey; + color: $color-mid-grey; font-weight: bold; text-transform: uppercase; text-overflow: ellipsis; @@ -74,7 +74,7 @@ to get text out of component with timecodes and speaker names in the interim */ .speaker { padding-right: 2em; vertical-align: middle; - color: color-mid-grey; + color: $color-mid-grey; font-weight: bold; text-transform: uppercase; text-align: right; diff --git a/packages/components/timed-text-editor/index.module.css b/packages/components/timed-text-editor/index.module.css index cbeabce6..8a3fab73 100644 --- a/packages/components/timed-text-editor/index.module.css +++ b/packages/components/timed-text-editor/index.module.css @@ -1,4 +1,4 @@ -@value color-subt-green, color-darkest-grey, color-labs-red from '../../config/style-guide/colours.module.css'; +@import '../../config/style-guide/colours.scss'; .DraftEditor-root { background: #f9f9f9; diff --git a/packages/components/transcript-editor/index.module.css b/packages/components/transcript-editor/index.module.css index 79de0c63..37a14f1b 100644 --- a/packages/components/transcript-editor/index.module.css +++ b/packages/components/transcript-editor/index.module.css @@ -1,4 +1,4 @@ -@value color-subt-green, color-darkest-grey, color-labs-red from '../../config/style-guide/colours.module.css'; +@import '../../config/style-guide/colours.scss'; .container { position: relative; @@ -30,7 +30,7 @@ } .icon { - color: color-labs-red; + color: $color-labs-red; margin-right: 0.5em; } @@ -69,7 +69,7 @@ .settingsButton { line-height: 1em; margin-left: 0.5em; - background: color-darkest-grey; + background: $color-darkest-grey; display: inline-block; border: 0; color: white; @@ -107,12 +107,12 @@ top: 0; right: 0; padding: 0; - } + } .settingsButton { line-height: 1em; margin-left: 0.5em; - background: color-darkest-grey; + background: $color-darkest-grey; display: inline-block; border: 0; color: white; diff --git a/packages/components/transcript-editor/src/index.module.css b/packages/components/transcript-editor/src/index.module.css index c9709998..576bf622 100644 --- a/packages/components/transcript-editor/src/index.module.css +++ b/packages/components/transcript-editor/src/index.module.css @@ -1,4 +1,4 @@ -@value color-darkest-grey from '../../../config/style-guide/colours.module.css'; +@import '../../../config/style-guide/colours.scss'; .settings { position: absolute; @@ -16,12 +16,12 @@ font-weight: lighter; z-index: 2; } - + .header { margin-top: 0; margin-bottom: 1em; } - + .closeButton { position: absolute; top: 0; @@ -29,7 +29,7 @@ padding: 1em; cursor: pointer; } - + .controlsContainer { display: flex; flex-direction: column; @@ -37,19 +37,19 @@ align-items: center; margin: 0 auto; } - + .settingElement { text-align: left; align-self: auto; margin-bottom: 0.5em; } - + .label { display: inline-block; min-width: 200px; width: 200px; } - + .rollbackValue { height: 2em; width: 48px; @@ -60,12 +60,12 @@ margin-right: 16px; vertical-align: middle; } - + .timecodeLabel { display: block; text-align: center; } - + .playerButton { width: 48px; @@ -73,7 +73,7 @@ padding: 0.5em; border: 0; color: white; - background: color-darkest-grey; + background: $color-darkest-grey; font-size: 1em; cursor: pointer; margin-right: 0.3rem; @@ -92,4 +92,4 @@ .playerButton:hover { background-color: gray; -} \ No newline at end of file +} diff --git a/packages/config/style-guide/colours.module.css b/packages/config/style-guide/colours.module.css deleted file mode 100644 index 1a865a51..00000000 --- a/packages/config/style-guide/colours.module.css +++ /dev/null @@ -1,10 +0,0 @@ -:global { - @value color-labs-red: #a0372d; - @value color-darkest-grey: #282828; - @value color-dark-grey: #4a4a4a; - @value color-mid-grey: #696969; - @value color-light-grey: #767676; - @value color-lightest-grey: #f2f2f2; - @value color-subt-green: #69e3c2; - @value color-light-shilo: #E2A9A2; -} diff --git a/packages/config/style-guide/colours.scss b/packages/config/style-guide/colours.scss new file mode 100644 index 00000000..c49bca94 --- /dev/null +++ b/packages/config/style-guide/colours.scss @@ -0,0 +1,8 @@ +$color-labs-red: #a0372d !default; +$color-darkest-grey: #282828 !default; +$color-dark-grey: #4a4a4a !default; +$color-mid-grey: #696969 !default; +$color-light-grey: #767676 !default; +$color-lightest-grey: #f2f2f2 !default; +$color-subt-green: #69e3c2 !default; +$color-light-shilo: #E2A9A2 !default; diff --git a/webpack.config.js b/webpack.config.js index d66bab5e..be2f5452 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -44,7 +44,13 @@ module.exports = { options: { modules: true } - } + }, + { + loader: 'sass-loader', + options: { + modules: true + } + }, ] }, { From 45c324dc1dcd2fdd3ca94b1e14a699eab11587e0 Mon Sep 17 00:00:00 2001 From: James Dooley Date: Mon, 19 Aug 2019 21:29:02 +0100 Subject: [PATCH 04/14] Task: hide empty sidebar in storybook for now --- .storybook/config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.storybook/config.js b/.storybook/config.js index e357274d..9415e7b3 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -17,7 +17,8 @@ addDecorator(withA11y); addParameters({ options: { - panelPosition: 'right', + // showPanel: false, + panelPosition: 'bottom', sidebarAnimations: true }, }); From b1c2d382e78cc543789d72ba107a164b3e0df951 Mon Sep 17 00:00:00 2001 From: James Dooley Date: Mon, 19 Aug 2019 21:29:19 +0100 Subject: [PATCH 05/14] Fix: tidy demo styling --- demo/app.js | 40 +++-- demo/index.module.css | 161 +++++++++--------- .../components/media-player/index.module.css | 2 +- 3 files changed, 100 insertions(+), 103 deletions(-) diff --git a/demo/app.js b/demo/app.js index ce05b32c..9ab2f389 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1,18 +1,14 @@ import React from 'react'; -// NOTE: This slows down performance, even during development -// if (process.env.NODE_ENV !== 'production') { -// const { whyDidYouUpdate } = require('why-did-you-update'); -// whyDidYouUpdate(React, { exclude: [ /^HotKeysWrapper/ ] } ); -// } + import TranscriptEditor from '../packages/components/transcript-editor'; import SttTypeSelect from './select-stt-json-type'; import ExportFormatSelect from './select-export-format'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faGithub } from '@fortawesome/free-brands-svg-icons'; -import demoTranscript from './sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json'; -const demoMediaUrl = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'; -const demoTitle = 'Ted Talk - Kate Darling'; +import DEMO_TRANSCRIPT from './sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json'; +const DEMO_MEDIA_URL = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'; +const DEMO_TITLE = 'TED Talk | Kate Darling - Why we have an emotional connection to robots'; import style from './index.module.css'; @@ -36,9 +32,9 @@ class App extends React.Component { loadDemo = () => { this.setState({ - transcriptData: demoTranscript, - mediaUrl: demoMediaUrl, - title: demoTitle, + transcriptData: DEMO_TRANSCRIPT, + mediaUrl: DEMO_MEDIA_URL, + title: DEMO_TITLE, sttType: 'bbckaldi' }); } @@ -52,7 +48,7 @@ class App extends React.Component { if (canPlay) { const fileURL = URL.createObjectURL(file); this.setState({ - // transcriptData: demoTranscript, + // transcriptData: DEMO_TRANSCRIPT, mediaUrl: fileURL, fileName: file.name }); @@ -65,7 +61,7 @@ class App extends React.Component { const fileURL = prompt("Paste the URL you'd like to use here:"); this.setState({ - // transcriptData: demoTranscript, + // transcriptData: DEMO_TRANSCRIPT, mediaUrl: fileURL }); } @@ -178,19 +174,19 @@ class App extends React.Component {
- - + + this.handleLoadMedia(e.target.files) } /> - + {this.state.fileName !== '' ? : null}
- + this.handleLoadTranscriptJson(e.target.files) } /> - + {this.state.transcriptData !== null ? : null}
@@ -254,7 +250,11 @@ class App extends React.Component { />
- + @@ -281,6 +281,4 @@ class App extends React.Component { } } -// render(, document.getElementById('root')); - export default App; diff --git a/demo/index.module.css b/demo/index.module.css index b5f5837c..30d44c21 100644 --- a/demo/index.module.css +++ b/demo/index.module.css @@ -8,115 +8,118 @@ body { font-family: ReithSerif, Fallback, sans-serif; } -.demoNavItem { - padding-right: 1em; - text-align: center; -} +.demoNav { + margin-top: 1rem; + padding: 0 2rem; -.sectionLabel { - display: block; - text-align: center; - font-size: 0.9em; - font-weight: 500; + .demoNavItem { + padding-right: 0.5rem; + text-align: center; + + .dropdown { + display: block; + margin: 0.5em auto; + width: 100px; + } + + .sectionLabel { + display: block; + font-size: 0.8em; + font-weight: 500; + } + + .fileNameLabel { + display: block; + text-align: center; + font-size: 0.5em; + margin: 0.5em; + } + + .titleLabel { + margin-left: 0.5em; + font-style: italic; + font-size: 0.7em; + } + + .editableLabel { + font-size: 0.7em; + } + } } [type="file"] { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; + position: absolute !important; overflow: hidden; + height: 0; + width: 0; padding: 0; - position: absolute !important; + clip: rect(0, 0, 0, 0); + border: 0; white-space: nowrap; - width: 1px; + + + label { + display: block; + margin: 0.5rem auto; + padding: 0.75em 1.5em; + height: 30px; + width: 120px !important; + background-color: #5b97ef; + color: white; + font-size: 0.7em; + box-sizing: border-box; + border-radius: 2px; + cursor: pointer; + + &:hover { + background-color: #4f7bc0; + } + } } -[type="file"] + label { - display: inline-block; - box-sizing: border-box; +.demoNavItem button { + display: block; + margin: 0.5rem auto; + padding: 0.75em 1.5em; + height: 30px; + width: 120px !important; background-color: #5b97ef; color: white; - cursor: pointer; font-size: 0.7em; - padding: 0.75em 1.5em; - margin-top: 0.5em; - margin-right: 0.5em; - text-align: center; - width: 140px; - max-width: 140px; -} - -[type="file"]:focus + label, -[type="file"] + label:hover { - background-color: #4f7bc0; -} - -.demoNav section button { - background-color: #5b97ef; border: none; - color: white; - cursor: pointer; - padding: 0.75em 1.5em; - text-align: center; - text-decoration: none; - display: inline-block; + border-radius: 2px; box-sizing: border-box; - font-size: 0.7em; - margin-top: 0.5em; - margin-right: 0.5em; - width: 140px; - max-width: 140px; + text-decoration: none; white-space: nowrap; -} + cursor: pointer; -.demoNav section button:hover { - background-color: #4f7bc0; + &:hover { + background-color: #4f7bc0; + } } .warningButton { background-color: #d25b56 !important; -} + font-size: 0.6rem !important; -.warningButton:hover { - background-color: #b6332b !important; + &:hover { + background-color: #b6332b !important; + } } + .demoButton { background-color: #74b567 !important; -} - -.demoButton:hover { - background-color: #528946 !important; -} -.dropdown { - display: block; - margin: 0.5em auto; - width: 140px; -} - -.fileNameLabel { - display: block; - text-align: center; - font-size: 0.5em; - margin: 0.5em; -} - -.titleLabel { - margin-left: 0.5em; - font-style: italic; - font-size: 0.7em; -} - -.editableLabel { - font-size: 0.7em; + &:hover { + background-color: #528946 !important; + } } /* desktop */ @media (min-width: 767px) { .demoNav { display: flex; - justify-content: space-between; + justify-content: space-evenly; } } @@ -133,10 +136,6 @@ body { border-bottom: 1px solid grey; } - .demoNav section button { - display: inline-block; - } - .checkbox { display: block; } diff --git a/packages/components/media-player/index.module.css b/packages/components/media-player/index.module.css index 4be055ef..fc310f5c 100644 --- a/packages/components/media-player/index.module.css +++ b/packages/components/media-player/index.module.css @@ -17,7 +17,7 @@ .title { color: white; - height: 1.2em; + line-height: 1.2em; width: 90vw; margin-top: 0; margin-bottom: 0.5em; From c3448e392518141f3644b31d5e6d528778955dd3 Mon Sep 17 00:00:00 2001 From: James Dooley Date: Mon, 19 Aug 2019 21:54:08 +0100 Subject: [PATCH 06/14] Feature: CSS hovers for buttons, refactoring css --- .../components/media-player/index.module.css | 2 +- .../media-player/src/PlaybackRate.js | 2 +- .../media-player/src/PlaybackRate.module.css | 8 ---- .../src/PlayerControls/index.module.css | 9 ++++ .../transcript-editor/index.module.css | 46 ++++++++----------- .../transcript-editor/src/Header.js | 10 ++-- 6 files changed, 32 insertions(+), 45 deletions(-) delete mode 100644 packages/components/media-player/src/PlaybackRate.module.css diff --git a/packages/components/media-player/index.module.css b/packages/components/media-player/index.module.css index fc310f5c..39d8c1f1 100644 --- a/packages/components/media-player/index.module.css +++ b/packages/components/media-player/index.module.css @@ -31,12 +31,12 @@ @media (max-width: 768px) { .title { - width: 100%; margin-top: 0; margin-bottom: 0.5em; text-align: center; font-size: 1.2em; line-height: 1.2em; padding-top: 1em; + white-space: normal; } } diff --git a/packages/components/media-player/src/PlaybackRate.js b/packages/components/media-player/src/PlaybackRate.js index 23ecc54a..1a184109 100644 --- a/packages/components/media-player/src/PlaybackRate.js +++ b/packages/components/media-player/src/PlaybackRate.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -// import styles from './PlaybackRate.module.css'; import Select from './Select'; + import style from './PlayerControls/index.module.css'; class PlaybackRate extends React.Component { diff --git a/packages/components/media-player/src/PlaybackRate.module.css b/packages/components/media-player/src/PlaybackRate.module.css deleted file mode 100644 index 0ff71bb6..00000000 --- a/packages/components/media-player/src/PlaybackRate.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.helpText { - margin-top: 0; - margin-bottom: 0.1em; -} - -.playbackRateValue { - font-weight: bold; -} diff --git a/packages/components/media-player/src/PlayerControls/index.module.css b/packages/components/media-player/src/PlayerControls/index.module.css index 83b3b565..0f87aaf9 100644 --- a/packages/components/media-player/src/PlayerControls/index.module.css +++ b/packages/components/media-player/src/PlayerControls/index.module.css @@ -23,6 +23,10 @@ cursor: pointer; margin-right: 0.3rem; margin-top: 0.3rem; + + &:hover { + background: $color-dark-grey; + } } .playBackRate { @@ -51,6 +55,11 @@ width: 100%; color: white; background-color: $color-darkest-grey; + cursor: pointer; + + &:hover { + background-color: $color-dark-grey; + } } .timeBox { diff --git a/packages/components/transcript-editor/index.module.css b/packages/components/transcript-editor/index.module.css index 37a14f1b..e3f4084b 100644 --- a/packages/components/transcript-editor/index.module.css +++ b/packages/components/transcript-editor/index.module.css @@ -22,6 +22,24 @@ text-align: left; } +.settingsButton { + line-height: 1em; + margin-left: 0.5em; + background: $color-darkest-grey; + display: inline-block; + border: 0; + color: white; + font-size: 1em; + cursor: pointer; + text-align: center; + width: 2em; + height: 2em; + + &:hover { + background: $color-dark-grey; + } +} + @media (max-width: 768px) { .help { @@ -65,20 +83,6 @@ right: 0; padding: 0; } - - .settingsButton { - line-height: 1em; - margin-left: 0.5em; - background: $color-darkest-grey; - display: inline-block; - border: 0; - color: white; - font-size: 1em; - cursor: pointer; - text-align: center; - width: 2em; - height: 2em; - } } /* Ipad */ @@ -109,20 +113,6 @@ padding: 0; } - .settingsButton { - line-height: 1em; - margin-left: 0.5em; - background: $color-darkest-grey; - display: inline-block; - border: 0; - color: white; - font-size: 1em; - cursor: pointer; - text-align: center; - width: 2em; - height: 2em; - } - .keyboardShortcutsButon { display: none; } diff --git a/packages/components/transcript-editor/src/Header.js b/packages/components/transcript-editor/src/Header.js index f5ee321f..f82139d4 100644 --- a/packages/components/transcript-editor/src/Header.js +++ b/packages/components/transcript-editor/src/Header.js @@ -38,18 +38,14 @@ class Header extends React.Component { - - - ); - } -} - -RollBack.propTypes = { - rollBackValueInSeconds: PropTypes.number, - handleChangeReplayRollbackValue: PropTypes.func, - rollBack: PropTypes.func -}; - -export default RollBack; diff --git a/packages/components/media-player/src/RollBack.module.css b/packages/components/media-player/src/RollBack.module.css deleted file mode 100644 index 3484ffaa..00000000 --- a/packages/components/media-player/src/RollBack.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.helpText { - margin-top: 0; - margin-bottom: 0.1em; -} - -.rollBackValue { - font-weight: bold; -} diff --git a/packages/components/media-player/src/ScrollIntoView.js b/packages/components/media-player/src/ScrollIntoView.js deleted file mode 100644 index 8642fa13..00000000 --- a/packages/components/media-player/src/ScrollIntoView.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -class ScrollIntoView extends React.Component { - render() { - return ( -
-

ScrollIntoView

- -
- ); - } -} - -ScrollIntoView.propTypes = { - handleToggle: PropTypes.func, - isScrollIntoViewOn: PropTypes.bool -}; - -export default ScrollIntoView; diff --git a/packages/components/media-player/src/PLAYBACK_RATES.js b/packages/components/media-player/src/config/playbackRates.js similarity index 100% rename from packages/components/media-player/src/PLAYBACK_RATES.js rename to packages/components/media-player/src/config/playbackRates.js From 9557faa0f66c4abb711301e2fc94fdcd5f48dc4c Mon Sep 17 00:00:00 2001 From: James Dooley Date: Tue, 20 Aug 2019 11:04:09 +0100 Subject: [PATCH 09/14] Task: Move to scss, update and optimise webpack --- .eslintrc | 3 +- .storybook/webpack.config.js | 32 +++++------------ demo/app.js | 2 +- demo/{index.module.css => index.module.scss} | 0 package-lock.json | 20 +++++++++-- package.json | 3 +- packages/components/media-player/index.js | 4 +-- .../{index.module.css => index.module.scss} | 0 .../media-player/src/PlaybackRate.js | 2 +- .../src/PlayerControls/TimeBox.js | 2 +- .../media-player/src/PlayerControls/index.js | 14 +++----- .../{index.module.css => index.module.scss} | 0 .../media-player/src/ProgressBar.js | 2 +- ...Bar.module.css => ProgressBar.module.scss} | 0 .../components/media-player/src/Select.js | 2 +- .../{Select.module.css => Select.module.scss} | 0 .../src/{ => config}/defaultHotKeys.js | 0 webpack.config.js | 36 ++++++++++++++----- 18 files changed, 68 insertions(+), 54 deletions(-) rename demo/{index.module.css => index.module.scss} (100%) rename packages/components/media-player/{index.module.css => index.module.scss} (100%) rename packages/components/media-player/src/PlayerControls/{index.module.css => index.module.scss} (100%) rename packages/components/media-player/src/{ProgressBar.module.css => ProgressBar.module.scss} (100%) rename packages/components/media-player/src/{Select.module.css => Select.module.scss} (100%) rename packages/components/media-player/src/{ => config}/defaultHotKeys.js (100%) diff --git a/.eslintrc b/.eslintrc index 3b8e34c4..c62b046f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -10,7 +10,8 @@ ], "env": { "browser": true, - "jest": true + "jest": true, + "node": true, }, "rules": { "prefer-const": 1, diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index ca9ca8a1..f95b7d04 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -6,42 +6,28 @@ module.exports = { module: { rules: [ { - test: /\.module.css$/, + test: /\.module.(sa|sc|c)ss$/, use: [ - { - loader: "style-loader" - }, + "style-loader", { loader: "css-loader", - options: { - modules: true - } + options: { modules: true } }, { loader: "sass-loader", - options: { - sourcemap: true - } + options: { sourcemap: true } } ] }, { - test: /\.scss$/, + test: /\.s(a|c)ss$/, + exclude: /\.module.(s(a|c)ss)$/, use: [ - { - loader: "style-loader" - }, - { - loader: "css-loader", - options: { - sourceMap: true - } - }, + "style-loader", + "css-loader", { loader: "sass-loader", - options: { - sourcemap: true - } + options: { sourcemap: true } } ] } diff --git a/demo/app.js b/demo/app.js index 9ab2f389..2330f850 100644 --- a/demo/app.js +++ b/demo/app.js @@ -10,7 +10,7 @@ import DEMO_TRANSCRIPT from './sample-data/KateDarling-bbcKaldiTranscriptWithSpe const DEMO_MEDIA_URL = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'; const DEMO_TITLE = 'TED Talk | Kate Darling - Why we have an emotional connection to robots'; -import style from './index.module.css'; +import style from './index.module.scss'; class App extends React.Component { constructor(props) { diff --git a/demo/index.module.css b/demo/index.module.scss similarity index 100% rename from demo/index.module.css rename to demo/index.module.scss diff --git a/package-lock.json b/package-lock.json index 386f663c..2b104994 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1850,6 +1850,19 @@ "regenerator-runtime": "^0.12.1", "semver": "^5.6.0", "webpack": "^4.29.0" + }, + "dependencies": { + "mini-css-extract-plugin": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", + "integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "schema-utils": "^1.0.0", + "webpack-sources": "^1.1.0" + } + } } }, "@storybook/router": { @@ -10744,12 +10757,13 @@ } }, "mini-css-extract-plugin": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", - "integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==", + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz", + "integrity": "sha512-MNpRGbNA52q6U92i0qbVpQNsgk7LExy41MdAlG84FeytfDOtRIf/mCHdEgG8rpTKOaNKiqUnZdlptF469hxqOw==", "dev": true, "requires": { "loader-utils": "^1.1.0", + "normalize-url": "1.9.1", "schema-utils": "^1.0.0", "webpack-sources": "^1.1.0" } diff --git a/package.json b/package.json index 6d150c41..d844336b 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ ], "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", - "\\.(css|less)$": "/__mocks__/styleMock.js" + "\\.(css|scss|less)$": "/__mocks__/styleMock.js" } }, "dependencies": { @@ -92,6 +92,7 @@ "gh-pages": "^2.0.1", "husky": "^1.1.3", "jest": "^24.7.1", + "mini-css-extract-plugin": "^0.8.0", "node-sass": "^4.12.0", "prettier-stylelint": "^0.4.2", "react-testing-library": "^5.2.3", diff --git a/packages/components/media-player/index.js b/packages/components/media-player/index.js index b8aceea8..0ea7e52e 100644 --- a/packages/components/media-player/index.js +++ b/packages/components/media-player/index.js @@ -5,9 +5,9 @@ import { hotkeys } from 'react-keyboard-shortcuts'; import PlayerControls from './src/PlayerControls'; import ProgressBar from './src/ProgressBar'; -import returnHotKeys from './src/defaultHotKeys'; +import returnHotKeys from './src/config/defaultHotKeys'; -import styles from './index.module.css'; +import styles from './index.module.scss'; import { secondsToTimecode, diff --git a/packages/components/media-player/index.module.css b/packages/components/media-player/index.module.scss similarity index 100% rename from packages/components/media-player/index.module.css rename to packages/components/media-player/index.module.scss diff --git a/packages/components/media-player/src/PlaybackRate.js b/packages/components/media-player/src/PlaybackRate.js index a45d43cf..169927e8 100644 --- a/packages/components/media-player/src/PlaybackRate.js +++ b/packages/components/media-player/src/PlaybackRate.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Select from './Select'; -import style from './PlayerControls/index.module.css'; +import style from './PlayerControls/index.module.scss'; class PlaybackRate extends React.Component { diff --git a/packages/components/media-player/src/PlayerControls/TimeBox.js b/packages/components/media-player/src/PlayerControls/TimeBox.js index 6f8278ed..96eb57f1 100644 --- a/packages/components/media-player/src/PlayerControls/TimeBox.js +++ b/packages/components/media-player/src/PlayerControls/TimeBox.js @@ -1,6 +1,6 @@ import React from 'react'; -import style from './index.module.css'; +import style from './index.module.scss'; class TimeBox extends React.Component { diff --git a/packages/components/media-player/src/PlayerControls/index.js b/packages/components/media-player/src/PlayerControls/index.js index fd12c5bc..f2e1d9ba 100644 --- a/packages/components/media-player/src/PlayerControls/index.js +++ b/packages/components/media-player/src/PlayerControls/index.js @@ -1,8 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import style from './index.module.css'; - import { faSave, faTv, @@ -19,18 +17,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import PlaybackRate from '../PlaybackRate'; import TimeBox from './TimeBox.js'; +import style from './index.module.scss'; + class PlayerControls extends React.Component { shouldComponentUpdate = (nextProps) => { - if (nextProps !== this.props) return true; - - return false; + return nextProps !== this.props; } - // to handle backward and forward mouse pressed on btn - // set a 300 ms interval to repeat the - // backward or forward function - // on mouseUp the interval is cleared setIntervalHelperBackward = () => { // this.props.skipBackward(); this.interval = setInterval(() => { @@ -115,7 +109,7 @@ class PlayerControls extends React.Component { diff --git a/packages/components/media-player/src/PlayerControls/index.module.css b/packages/components/media-player/src/PlayerControls/index.module.scss similarity index 100% rename from packages/components/media-player/src/PlayerControls/index.module.css rename to packages/components/media-player/src/PlayerControls/index.module.scss diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js index a074545e..33e51d5b 100644 --- a/packages/components/media-player/src/ProgressBar.js +++ b/packages/components/media-player/src/ProgressBar.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import style from './ProgressBar.module.css'; +import style from './ProgressBar.module.scss'; class ProgressBar extends React.Component { diff --git a/packages/components/media-player/src/ProgressBar.module.css b/packages/components/media-player/src/ProgressBar.module.scss similarity index 100% rename from packages/components/media-player/src/ProgressBar.module.css rename to packages/components/media-player/src/ProgressBar.module.scss diff --git a/packages/components/media-player/src/Select.js b/packages/components/media-player/src/Select.js index 1825a768..bdccaa0a 100644 --- a/packages/components/media-player/src/Select.js +++ b/packages/components/media-player/src/Select.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import style from './Select.module.css'; +import style from './Select.module.scss'; class Select extends React.Component { diff --git a/packages/components/media-player/src/Select.module.css b/packages/components/media-player/src/Select.module.scss similarity index 100% rename from packages/components/media-player/src/Select.module.css rename to packages/components/media-player/src/Select.module.scss diff --git a/packages/components/media-player/src/defaultHotKeys.js b/packages/components/media-player/src/config/defaultHotKeys.js similarity index 100% rename from packages/components/media-player/src/defaultHotKeys.js rename to packages/components/media-player/src/config/defaultHotKeys.js diff --git a/webpack.config.js b/webpack.config.js index be2f5452..782fb816 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,9 @@ // based on https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f // and http://jasonwatmore.com/post/2018/04/14/react-npm-how-to-publish-a-react-component-to-npm const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +const isDevelopment = process.env.NODE_ENV !== 'production'; module.exports = { mode: 'production', @@ -31,26 +34,41 @@ module.exports = { optimization: { minimize: true }, + plugins: [ + new MiniCssExtractPlugin({ + filename: isDevelopment ? '[name].css' : '[name].[hash].css', + chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css' + }) + ], module: { rules: [ { - test: /\.module.css$/, + test: /\.module.(sa|sc|c)ss$/, use: [ + isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader, { - loader: 'style-loader' + loader: 'css-loader', + options: { modules: true, sourcemap: isDevelopment } }, + { + loader: 'sass-loader', + options: { sourcemap: isDevelopment } + } + ] + }, + { + test: /\.s(a|c)ss$/, + exclude: /\.module.(s(a|c)ss)$/, + use: [ + isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader, { loader: 'css-loader', - options: { - modules: true - } + options: { sourcemap: isDevelopment } }, { loader: 'sass-loader', - options: { - modules: true - } - }, + options: { sourcemap: isDevelopment } + } ] }, { From c6de274a40d004277e21896d14f9d28d7a24753b Mon Sep 17 00:00:00 2001 From: James Dooley Date: Thu, 22 Aug 2019 12:08:53 +0100 Subject: [PATCH 10/14] Feature: progress shades red on ProgressBar component --- .../components/media-player/index.module.scss | 2 + .../media-player/src/ProgressBar.js | 18 +-- .../media-player/src/ProgressBar.module.scss | 103 +++++++++++++----- 3 files changed, 89 insertions(+), 34 deletions(-) diff --git a/packages/components/media-player/index.module.scss b/packages/components/media-player/index.module.scss index 2d9645a7..b52c2d56 100644 --- a/packages/components/media-player/index.module.scss +++ b/packages/components/media-player/index.module.scss @@ -13,6 +13,8 @@ margin: auto; padding: 1em; position: relative; + // overflow-x: auto; + // overflow-y: auto; } .title { diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js index 33e51d5b..c3c6788b 100644 --- a/packages/components/media-player/src/ProgressBar.js +++ b/packages/components/media-player/src/ProgressBar.js @@ -15,14 +15,16 @@ class ProgressBar extends React.Component { render() { return ( - +
+ +
); } } diff --git a/packages/components/media-player/src/ProgressBar.module.scss b/packages/components/media-player/src/ProgressBar.module.scss index 8285cd13..2aff34e6 100644 --- a/packages/components/media-player/src/ProgressBar.module.scss +++ b/packages/components/media-player/src/ProgressBar.module.scss @@ -1,39 +1,90 @@ @import '../../../config/style-guide/colours.scss'; -.bar { +$slider-width-number: 1440; +$slider-width: #{$slider-width-number}px; +$slider-height: 10px; +$background-slider: $color-light-grey; +$bar-slider-filled: $color-labs-red; +$thumb-width: 16px; +$thumb-height: 24px; +$shadow-size: -7px; +$fit-thumb-in-slider: -7px; + +@function strip-units($number) { + @return $number / ($number * 0 + 1); +} + +@function makelongshadow($color, $size) { + $val: 1px 0 0 $size $color; + + @for $i from 1 through $slider-width-number { + $val: #{$val}, #{$i}px 0 0 $size #{$color}; + } + + @return $val; +} + +.wrapper { width: 100%; - -webkit-appearance: none; - height: 10px; - background: #747474; - margin: 0px; - outline: none; - cursor: pointer; + overflow-x: hidden; position: absolute; - bottom: 0; left: 0; + bottom: -5px; } -.bar::-webkit-slider-thumb { +.bar { -webkit-appearance: none; - height: 30px; - width: 16px; - background: $color-labs-red; + -moz-appearance: none; + appearance: none; + background: none; cursor: pointer; -} + width: 100%; + margin: 0; -.bar::-moz-range-thumb { - height: 30px; - width: 16px; - background: $color-labs-red; - cursor: pointer; - border: 0; -} + &::-webkit-slider-runnable-track { + height: $slider-height; + width: $slider-width; + content: ''; + pointer-events: none; + background: $bar-slider-filled; + } -.bar::-webkit-slider-runnable-track { - width: 100%; - cursor: pointer; -} + &::-webkit-slider-thumb { + -webkit-appearance: none; + height: $thumb-height; + width: $thumb-width; + margin-top: $fit-thumb-in-slider; + background: $color-labs-red; + box-shadow: makelongshadow($color-light-grey, $shadow-size); + cursor: pointer; + } + + &::-moz-range-track { + height: $slider-height; + width: $slider-width; + content: ''; + pointer-events: none; + background: $bar-slider-filled; + } + + &::-moz-range-thumb { + -moz-appearance: none; + height: $thumb-height; + width: $thumb-width; + margin-top: $fit-thumb-in-slider; + background: $color-labs-red; + box-shadow: makelongshadow($color-light-grey, $shadow-size); + cursor: pointer; + } + + &::-moz-range-progress { + height: $slider-height; + background: $bar-slider-filled; + border: 0; + margin-top: 0; + } -input[type=range]::-moz-focus-outer { - border: 0; + &::-moz-focus-outer { + border: 0; + } } From 6d2970a086deec180407e3f4278304ba1ca089c1 Mon Sep 17 00:00:00 2001 From: James Dooley Date: Thu, 22 Aug 2019 12:08:53 +0100 Subject: [PATCH 11/14] Feature: progress shades red on ProgressBar component --- .../components/media-player/index.module.scss | 2 + .../media-player/src/ProgressBar.js | 18 ++-- .../media-player/src/ProgressBar.module.scss | 95 ++++++++++++++----- 3 files changed, 81 insertions(+), 34 deletions(-) diff --git a/packages/components/media-player/index.module.scss b/packages/components/media-player/index.module.scss index 2d9645a7..b52c2d56 100644 --- a/packages/components/media-player/index.module.scss +++ b/packages/components/media-player/index.module.scss @@ -13,6 +13,8 @@ margin: auto; padding: 1em; position: relative; + // overflow-x: auto; + // overflow-y: auto; } .title { diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js index 33e51d5b..c3c6788b 100644 --- a/packages/components/media-player/src/ProgressBar.js +++ b/packages/components/media-player/src/ProgressBar.js @@ -15,14 +15,16 @@ class ProgressBar extends React.Component { render() { return ( - +
+ +
); } } diff --git a/packages/components/media-player/src/ProgressBar.module.scss b/packages/components/media-player/src/ProgressBar.module.scss index 8285cd13..00b4d9eb 100644 --- a/packages/components/media-player/src/ProgressBar.module.scss +++ b/packages/components/media-player/src/ProgressBar.module.scss @@ -1,39 +1,82 @@ @import '../../../config/style-guide/colours.scss'; -.bar { +$slider-width-number: 1440; +$slider-width: #{$slider-width-number}px; +$slider-height: 10px; +$background-slider: $color-light-grey; +$bar-slider-filled: $color-labs-red; +$thumb-width: 16px; +$thumb-height: 24px; +$shadow-size: -7px; +$fit-thumb-in-slider: -7px; + +@function strip-units($number) { + @return $number / ($number * 0 + 1); +} + +@function makelongshadow($color, $size) { + $val: 1px 0 0 $size $color; + + @for $i from 1 through $slider-width-number { + $val: #{$val}, #{$i}px 0 0 $size #{$color}; + } + + @return $val; +} + +.wrapper { width: 100%; - -webkit-appearance: none; - height: 10px; - background: #747474; - margin: 0px; - outline: none; - cursor: pointer; + overflow-x: hidden; position: absolute; - bottom: 0; left: 0; + bottom: -16px; } -.bar::-webkit-slider-thumb { +.bar { -webkit-appearance: none; - height: 30px; - width: 16px; - background: $color-labs-red; + -moz-appearance: none; + appearance: none; + background: none; cursor: pointer; -} - -.bar::-moz-range-thumb { + width: 100%; height: 30px; - width: 16px; - background: $color-labs-red; - cursor: pointer; - border: 0; -} + margin: 0; -.bar::-webkit-slider-runnable-track { - width: 100%; - cursor: pointer; -} + // Chrome + &::-webkit-slider-runnable-track { + height: $slider-height; + width: $slider-width; + content: ''; + pointer-events: none; + background: $bar-slider-filled; + } + + &::-webkit-slider-thumb { + -webkit-appearance: none; + height: $thumb-height; + width: $thumb-width; + margin-top: $fit-thumb-in-slider; + background: $color-labs-red; + box-shadow: makelongshadow($color-light-grey, $shadow-size); + } + + // Firefox + &::-moz-range-track { + height: $slider-height; + width: $slider-width; + content: ''; + pointer-events: none; + background: $bar-slider-filled; + } -input[type=range]::-moz-focus-outer { - border: 0; + &::-moz-range-thumb { + -moz-appearance: none; + height: $thumb-height; + width: $thumb-width; + margin-top: $fit-thumb-in-slider; + border: 0; + border-radius: 0; + background: $color-labs-red; + box-shadow: makelongshadow($color-light-grey, $shadow-size); + } } From 8723a0ba16a7d566658b738f5a8256afec4db74d Mon Sep 17 00:00:00 2001 From: James Dooley Date: Wed, 18 Sep 2019 10:38:31 +0100 Subject: [PATCH 12/14] Fix: demo font fallback & breakpoint --- demo/index.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/index.module.scss b/demo/index.module.scss index 30d44c21..d743bede 100644 --- a/demo/index.module.scss +++ b/demo/index.module.scss @@ -5,7 +5,7 @@ body { .container { height: 100vh; - font-family: ReithSerif, Fallback, sans-serif; + font-family: ReithSerif, sans-serif; } .demoNav { @@ -116,7 +116,7 @@ body { } /* desktop */ -@media (min-width: 767px) { +@media (min-width: 768px) { .demoNav { display: flex; justify-content: space-evenly; From b6f29c378077fa986537aa13f10e9c3076360db3 Mon Sep 17 00:00:00 2001 From: James Dooley Date: Wed, 18 Sep 2019 10:46:32 +0100 Subject: [PATCH 13/14] Task: Adding react-fast-compare to optimise renders --- package-lock.json | 3 +-- package.json | 1 + packages/components/media-player/src/PlaybackRate.js | 4 +++- .../components/media-player/src/PlayerControls/TimeBox.js | 4 ++-- packages/components/media-player/src/PlayerControls/index.js | 3 ++- packages/components/media-player/src/ProgressBar.js | 4 ++-- 6 files changed, 11 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b104994..e85ca013 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13188,8 +13188,7 @@ "react-fast-compare": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", - "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==", - "dev": true + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, "react-focus-lock": { "version": "1.18.3", diff --git a/package.json b/package.json index d844336b..6403e59a 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "mousetrap": "1.5.2", "number-to-words": "^1.2.4", "prop-types": "^15.6.2", + "react-fast-compare": "^2.0.4", "react-keyboard-shortcuts": "^1.1.3", "react-simple-tooltip": "^2.3.3", "sbd": "^1.0.15", diff --git a/packages/components/media-player/src/PlaybackRate.js b/packages/components/media-player/src/PlaybackRate.js index 169927e8..f4834aa9 100644 --- a/packages/components/media-player/src/PlaybackRate.js +++ b/packages/components/media-player/src/PlaybackRate.js @@ -1,5 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import isEqual from 'react-fast-compare'; + import Select from './Select'; import style from './PlayerControls/index.module.scss'; @@ -7,7 +9,7 @@ import style from './PlayerControls/index.module.scss'; class PlaybackRate extends React.Component { shouldComponentUpdate = (nextProps) => { - return nextProps.playbackRate !== this.props.playbackRate; + return !isEqual(this.props, nextProps); } render() { diff --git a/packages/components/media-player/src/PlayerControls/TimeBox.js b/packages/components/media-player/src/PlayerControls/TimeBox.js index 96eb57f1..ec8c2644 100644 --- a/packages/components/media-player/src/PlayerControls/TimeBox.js +++ b/packages/components/media-player/src/PlayerControls/TimeBox.js @@ -1,11 +1,11 @@ import React from 'react'; +import isEqual from 'react-fast-compare'; import style from './index.module.scss'; class TimeBox extends React.Component { - shouldComponentUpdate = (nextProps) => { - return nextProps !== this.props; + return !isEqual(this.props, nextProps); } handleClick = (e) => { diff --git a/packages/components/media-player/src/PlayerControls/index.js b/packages/components/media-player/src/PlayerControls/index.js index f2e1d9ba..8cdf8acc 100644 --- a/packages/components/media-player/src/PlayerControls/index.js +++ b/packages/components/media-player/src/PlayerControls/index.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import isEqual from 'react-fast-compare'; import { faSave, @@ -22,7 +23,7 @@ import style from './index.module.scss'; class PlayerControls extends React.Component { shouldComponentUpdate = (nextProps) => { - return nextProps !== this.props; + return !isEqual(this.props, nextProps); } setIntervalHelperBackward = () => { diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js index c3c6788b..aa59a9be 100644 --- a/packages/components/media-player/src/ProgressBar.js +++ b/packages/components/media-player/src/ProgressBar.js @@ -1,12 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; +import isEqual from 'react-fast-compare'; import style from './ProgressBar.module.scss'; class ProgressBar extends React.Component { - shouldComponentUpdate = (nextProps) => { - return nextProps !== this.props; + return !isEqual(this.props, nextProps); } handleOnChange = (e) => { From 0e7a9887a700a7e4d44416d89478a36f401c0b62 Mon Sep 17 00:00:00 2001 From: James Dooley Date: Wed, 18 Sep 2019 10:47:37 +0100 Subject: [PATCH 14/14] Fix: prop type for progress bar --- packages/components/media-player/src/ProgressBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js index aa59a9be..3ecf4fd8 100644 --- a/packages/components/media-player/src/ProgressBar.js +++ b/packages/components/media-player/src/ProgressBar.js @@ -30,7 +30,7 @@ class ProgressBar extends React.Component { } ProgressBar.propTypes = { - value: PropTypes.number, + value: PropTypes.string, max: PropTypes.string, buttonClick: PropTypes.func };