Refactor media player

.eslintrc

@@ -10,7 +10,8 @@
   ],
   "env": {
     "browser": true,
-    "jest": true
+    "jest": true,
+    "node": true,
   },
   "rules": {
     "prefer-const": 1,
@@ -43,7 +44,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",

.storybook/config.js

@@ -17,7 +17,8 @@ addDecorator(withA11y);
 
 addParameters({
   options: {
-    panelPosition: 'right',
+    // showPanel: false,
+    panelPosition: 'bottom',
     sidebarAnimations: true
   },
 });

.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;
 }

.storybook/webpack.config.js

@@ -6,36 +6,28 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.module.css$/,
+        test: /\.module.(sa|sc|c)ss$/,
         use: [
+          "style-loader",
           {
-            loader: "style-loader"
+            loader: "css-loader",
+            options: { modules: true }
           },
           {
-            loader: "css-loader",
-            options: {
-              modules: true
-            }
+            loader: "sass-loader",
+            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 }
           }
         ]
       }

demo/app.js

@@ -1,20 +1,16 @@
 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';
+import style from './index.module.scss';
 
 class App extends React.Component {
   constructor(props) {
@@ -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 {
           </section>
 
           <section className={ style.demoNavItem }>
-            <label className={ style.sectionLabel }>Custom Media</label>
-            <button onClick={ () => this.handleLoadMediaUrl() }>Load from URL</button>
+            <label className={ style.sectionLabel }>Load Media</label>
+            <button onClick={ () => this.handleLoadMediaUrl() }> From URL</button>
             <input
               type={ 'file' }
               id={ 'mediaFile' }
               onChange={ e => this.handleLoadMedia(e.target.files) }
             />
-            <label htmlFor="mediaFile" >Load local media</label>
+            <label htmlFor="mediaFile" >From Computer</label>
             {this.state.fileName !== '' ? <label className={ style.fileNameLabel }>{this.state.fileName}</label> : null}
           </section>
 
           <section className={ style.demoNavItem }>
-            <label className={ style.sectionLabel }>Import Transcript</label>
+            <label className={ style.sectionLabel }>Load Transcript</label>
             <SttTypeSelect
               className={ style.dropdown }
               name={ 'sttType' }
@@ -203,7 +199,7 @@ class App extends React.Component {
               id={ 'transcriptFile' }
               onChange={ e => this.handleLoadTranscriptJson(e.target.files) }
             />
-            <label htmlFor="transcriptFile" >Load Transcript</label>
+            <label htmlFor="transcriptFile" >From Computer</label>
             {this.state.transcriptData !== null ? <label className={ style.fileNameLabel }>Transcript loaded.</label> : null}
 
           </section>
@@ -254,7 +250,11 @@ class App extends React.Component {
               />
             </div>
 
-            <button className={ style.warningButton } onClick={ () => this.clearLocalStorage() }>Clear Local Storage</button>
+            <button
+              className={ style.warningButton }
+              onClick={ () => this.clearLocalStorage() }>
+              Clear Local Storage
+            </button>
           </section>
         </div>
 
@@ -281,6 +281,4 @@ class App extends React.Component {
   }
 }
 
-// render(<App />, document.getElementById('root'));
-
 export default App;