Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor media player #183

Merged
merged 15 commits into from
Sep 18, 2019
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
],
"env": {
"browser": true,
"jest": true
"jest": true,
"node": true,
},
"rules": {
"prefer-const": 1,
Expand Down Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion .storybook/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ addDecorator(withA11y);

addParameters({
options: {
panelPosition: 'right',
// showPanel: false,
panelPosition: 'bottom',
sidebarAnimations: true
},
});
Expand Down
13 changes: 11 additions & 2 deletions .storybook/styles/main.scss
Original file line number Diff line number Diff line change
@@ -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;
}
30 changes: 11 additions & 19 deletions .storybook/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,28 @@ module.exports = {
module: {
rules: [
{
test: /\.module.css$/,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this mean we are only supporting CSS modules?

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 }
}
]
}
Expand Down
42 changes: 20 additions & 22 deletions demo/app.js
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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'
});
}
Expand All @@ -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
});
Expand All @@ -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
});
}
Expand Down Expand Up @@ -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' }
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -281,6 +281,4 @@ class App extends React.Component {
}
}

// render(<App />, document.getElementById('root'));

export default App;
143 changes: 0 additions & 143 deletions demo/index.module.css

This file was deleted.

Loading