diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..48b1182
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Russel Simmons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/NOTES.txt b/NOTES.txt
new file mode 100644
index 0000000..9bc3a21
--- /dev/null
+++ b/NOTES.txt
@@ -0,0 +1,46 @@
+
+Next steps:
+- Reconsider how we store media/subs; rather than by language, might want just uids. Could mark whichever media/textChunks as 'native' vs. 'translation'
+- Check style guide on curlies spacing, etc.
+- Get eslint going?
+- Display the computed current subs somewhere
+- Jump-back button and kbd shortcut
+- Un-halfwidth subs on import
+- Display more summary info (sub tracks, media presence)
+- Integrate JS-mecab
+- Try JS-mecab on simple OCR output?
+- Consume OCR result
+  - 0028.jpg is good, has errors/confusion
+  - Do we need to ignore summary result and go off pieces alone? Is summary result always the concat of pieces? Seems like we want to go through and make spans with uids, and make corresponding divs over image.
+
+Keyboard shortcuts:
+- general idea is to keep one hand in position on keyboard. let's say left hand, since most people mouse with right. and let's say home row, so asdf+space
+- controls:
+  - SPACE: toggle play/pause for video, go to to next page for comic
+  - A: jump-back N seconds for video, go to previous page for comic
+  - S: ?
+  - D: toggle transcription
+  - F: toggle translation
+
+What are controls?
+- new document (of given type, language)
+- import media
+- import subs
+- re-analyze current section?
+- media nav (depends on document type, has keyboard shortcuts)
+  - comics
+    - forward/back pages
+  - video/audio
+    - pause/resume
+    - rewind, replay last section
+    - auto-pause checkbox
+
+What contraints should hold for text?
+- For a video, it seems that all text should be inside a timed chunk? And the times should be sequential (in start times at least, overlaps could be allowed). Times could also be nested perhaps(?), but then they should still be in order.
+- For a comic, it seems that similarly all text should be inside a "page" chunk, and pages must be sequential. Pages could be skipped of course. Pages shouldn't nest.
+- For just-text (novel, article), it doesn't seem like we have any basic structural constraints.
+- For videos and comics and such, should match the media.
+
+Could we allow videos and comics to have text outisde chunks/pages, but just emit warnings?
+
+Should we wrap videos and comics and such in different top-level custom elements? Maybe just a data attribute or something to indicate which 'type' it is? Or do we just infer that by the top-level setting for the whole 'document'.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4de1c90
--- /dev/null
+++ b/README.md
@@ -0,0 +1,8 @@
+# Immersion Player
+
+Immersion Player (*needs a real name*) is a power tool for foreign language learners to get the most out of watching videos, readings comics, etc. It lets you easily:
+- toggle the display of transcriptions/translations
+- look up definitions of unknown words
+- save excerpts for later SRS study
+- (for video) quickly rewind to hear tricky speech again
+- (for comics) extract text from images with OCR
diff --git a/actions/index.js b/actions/index.js
new file mode 100644
index 0000000..cd7be98
--- /dev/null
+++ b/actions/index.js
@@ -0,0 +1,46 @@
+import {parseSRT} from '../util/subtitles'
+
+export const incrementCount = () => ({
+  type: 'incrementCount',
+});
+
+export const newDoc = (kind, language) => ({
+  type: 'newDoc',
+  kind,
+  language,
+});
+
+export const importVideoFile = (file) => ({
+  type: 'importVideoFile',
+  file,
+});
+
+export const importSubsParsed = (subChunks, language) => ({
+  type: 'importSubsParsed',
+  subChunks,
+  language,
+});
+
+export const importSubsFile = (file, language) => (
+  (dispatch) => { // return thunk
+    // Start async file load and parse
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      // Parse loaded file data and dispatch action for result
+      dispatch(importSubsParsed(parseSRT(e.target.result), language));
+    }
+    reader.readAsText(file);
+  }
+);
+
+export const videoTimeUpdate = (time) => ({
+  type: 'videoTimeUpdate',
+  time,
+});
+
+export const controlBack = () => {
+  
+  return {
+    type: 'controlBack',
+  }
+};
diff --git a/components/index.js b/components/index.js
new file mode 100644
index 0000000..25c1df4
--- /dev/null
+++ b/components/index.js
@@ -0,0 +1,194 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+
+import { incrementCount, newDoc, importVideoFile, importSubsFile, videoTimeUpdate, controlBack } from '../actions'
+
+// Counter
+const Counter = connect(
+  (state) => ({ // mapStateToProps
+    value: state.count,
+  }),
+  (dispatch) => ({ // mapDispatchToProps
+    onIncreaseClick: () => dispatch(incrementCount()),
+  })
+)(({value, onIncreaseClick}) => (
+  <div>
+    <span>{value}</span>
+    <button onClick={onIncreaseClick}>Increase</button>
+  </div>
+));
+
+const languageOptions = [
+  {value: 'ja', label: 'Japanese'},
+  {value: 'en', label: 'English'},
+];
+
+// Select, "uncontrolled" but watches changes
+class Select extends Component {
+  componentWillMount() {
+    const {options, onSet} = this.props;
+    if (options.length > 0) {
+      onSet(options[0].value);
+    }
+  }
+
+  render() {
+    const {options, onSet} = this.props;
+    return (
+      <select onChange={e => onSet(e.target.value)}>
+        {options.map((o, i) => <option key={i} value={o.value}>{o.label}</option>)}
+      </select>
+    )
+  }
+}
+
+// NewDocForm
+const NewDocForm = connect()(
+  class extends Component {
+    render() {
+      const kindOptions = [
+        {value: 'video', label: 'Video'},
+        {value: 'comic', label: 'Comic'},
+      ];
+      return (
+        <form onSubmit={e => {
+          e.preventDefault();
+          this.props.dispatch(newDoc(this.kindVal, this.languageVal));
+        }}>
+          <Select options={kindOptions} onSet={v => { this.kindVal = v; }} />
+          <Select options={languageOptions} onSet={v => { this.languageVal = v; }} />
+          <button type="submit">New Document</button>
+        </form>
+      );
+    }
+  }
+);
+
+// FileChooserForm
+const FileChooser = ({label, accept, onChoose}) => (
+  <label>{label} <input type="file" accept={accept} onChange={e => { onChoose(e.target.files[0]); e.target.value = null; }}/></label>
+);
+
+// VideoImportControls
+class VideoImportControls extends Component {
+  render() {
+    const {dispatch} = this.props;
+    return (
+      <div>
+        <form>
+          <FileChooser label="Import Video" accept="video/*" onChoose={(file) => { dispatch(importVideoFile(file)); }} />
+        </form>
+        <form>
+          <FileChooser label="Import Subs (SRT)" accept=".srt" onChoose={(file) => { dispatch(importSubsFile(file, this.subLanguageVal)); }} />
+          <Select options={languageOptions} onSet={v => { this.subLanguageVal = v; }} />
+        </form>
+      </div>
+    );
+  }
+}
+
+class VideoMedia extends Component {
+  render() {
+    const {media, onTimeUpdate, mountedVideoElement} = this.props;
+    return (
+      <div>{ media ? (
+        <video src={media.videoURL} controls onTimeUpdate={e => {onTimeUpdate(e.target.currentTime)}} ref={(el) => { mountedVideoElement(el); }}/>
+      ) : "No video media"
+      }</div>
+    );
+  }
+}
+
+class PlayControls extends Component {
+  constructor(props) {
+    super(props);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  handleKeyDown(e) {
+    const {onBack, onTogglePause} = this.props;
+
+    // console.log(e);
+    if (!e.repeat) {
+      switch (e.keyCode) {
+        case 65: // a
+          onBack();
+          break;
+
+        case 32: // space
+          onTogglePause();
+          break;
+      }
+    }
+  }
+
+  componentDidMount() {
+    document.body.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.body.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  render() {
+    return null;
+  }
+}
+
+// Doc
+class Doc extends Component {
+  constructor(props) {
+    super(props);
+    this.videoElement = null;
+  }
+
+  render() {
+    const {doc, dispatch} = this.props;
+    return (
+      <div>
+        <div>Kind: { doc.kind }, Language: { doc.language }</div>
+        <VideoImportControls dispatch={dispatch}/>
+        <VideoMedia media={doc.media} onTimeUpdate={time => { dispatch(videoTimeUpdate(time)); }} mountedVideoElement={(el) => { this.videoElement = el; }} />
+        <PlayControls dispatch={dispatch} onBack={
+          () => {
+            if (this.videoElement) {
+              const nt = this.videoElement.currentTime - 3.0;
+              this.videoElement.currentTime = nt >= 0 ? nt : 0;
+            }
+          }
+        } onTogglePause={
+          () => {
+            if (this.videoElement) {
+              if (this.videoElement.paused) {
+                this.videoElement.play();
+              } else {
+                this.videoElement.pause();
+              }
+            }
+          }
+        } />
+        <div>{JSON.stringify(doc.currentTextChunks)}</div>
+      </div>
+    );
+  }
+}
+
+// MaybeDoc
+const MaybeDoc = connect(
+  (state) => ({
+    doc: state.doc,
+  })
+)(({doc, dispatch}) => (
+  <div>{ doc ? <Doc doc={doc} dispatch={dispatch} /> : "No document" }</div>
+));
+
+// App
+const App = () => (
+  <div>
+    <Counter />
+    <NewDocForm />
+    <MaybeDoc />
+  </div>
+);
+
+export default App;
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3e3bee0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <title>Immersion Player</title>
+    <link href="main.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..f4ab99c
--- /dev/null
+++ b/index.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { createStore, applyMiddleware } from 'redux'
+import { Provider } from 'react-redux'
+import ReduxThunk from 'redux-thunk'
+import createReduxLogger from 'redux-logger'
+
+import rootReducer from './reducers'
+import RootComponent from './components'
+
+const middlewares = [ReduxThunk];
+
+if (process.env.NODE_ENV === 'development') {
+  middlewares.push(createReduxLogger());
+}
+
+const store = createStore(rootReducer, applyMiddleware(...middlewares));
+
+render(
+  <Provider store={store}>
+    <RootComponent />
+  </Provider>,
+  document.getElementById('root')
+);
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..79713f7
--- /dev/null
+++ b/main.css
@@ -0,0 +1,8 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..14002ff
--- /dev/null
+++ b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "immersion-player",
+  "version": "0.0.0",
+  "description": "A tool for foreign language learners to watch videos, read comics, and more.",
+  "main": "index.js",
+  "scripts": {
+    "watch": "NODE_ENV=development watchify --debug --extension=js -v -o bundle.js index.js"
+  },
+  "author": "Russel Simmons",
+  "license": "MIT",
+  "browserify": {
+    "transform": [
+      ["babelify", {
+          "presets": ["es2015", "react"],
+          "plugins": ["transform-object-rest-spread"]
+        }
+      ],
+      ["envify", {}]
+    ]
+  },
+  "dependencies": {
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2",
+    "redux-logger": "^2.6.1",
+    "redux-thunk": "^2.1.0"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.0.1",
+    "watchify": "^3.7.0",
+    "envify": "^3.4.0"
+  }
+}
diff --git a/reducers/index.js b/reducers/index.js
new file mode 100644
index 0000000..f6cdf10
--- /dev/null
+++ b/reducers/index.js
@@ -0,0 +1,75 @@
+import {indexChunks, chunksAtTime} from '../util/subtitles'
+
+function reduce(state = {count: 0, doc: null}, action) {
+  switch (action.type) {
+    case 'incrementCount':
+      return {...state, count: state.count + 1};
+
+    case 'newDoc':
+      return {
+        ...state,
+        doc: {
+          kind: action.kind,
+          language: action.language,
+          media: null,
+          textChunks: {},
+          currentTextChunks: {},
+        },
+      };
+
+    case 'importVideoFile':
+      return {
+        ...state,
+        doc: {
+          ...state.doc,
+          media: {
+            videoFile: action.file,
+            videoURL: URL.createObjectURL(action.file),
+            currentTime: 0,
+          },
+        },
+      };
+
+    case 'importSubsParsed':
+      return {
+        ...state,
+        doc: {
+          ...state.doc,
+          textChunks: {
+            ...state.doc.textChunks,
+            [action.language]: {
+              chunks: action.subChunks,
+              index: indexChunks(action.subChunks),
+            },
+          },
+          // TODO: should update currentTextChunks if media is present
+        },
+      };
+
+    case 'videoTimeUpdate': {
+      const currentTextChunks = {};
+      if (state.doc.kind === 'video') {
+        for (let language in state.doc.textChunks) {
+          currentTextChunks[language] = chunksAtTime(state.doc.textChunks[language].index, action.time);
+        }
+      }
+
+      return {
+        ...state,
+        doc: {
+          ...state.doc,
+          media: {
+            ...state.doc.media,
+            currentTime: action.time,
+          },
+          currentTextChunks,
+        }
+      };
+    }
+
+    default:
+      return state;
+  }
+}
+
+ export default reduce;
diff --git a/util/subtitles.js b/util/subtitles.js
new file mode 100644
index 0000000..5050d6b
--- /dev/null
+++ b/util/subtitles.js
@@ -0,0 +1,90 @@
+const parseTime = (s) => {
+  const re = /(\d{2}):(\d{2}):(\d{2}),(\d{3})/;
+  const [, hours, mins, seconds, ms] = re.exec(s);
+  return 3600*(+hours) + 60*(+mins) + (+seconds) + 0.001*(+ms);
+};
+
+export const parseSRT = (text) => {
+  const normText = text.replace(/\r\n/g, '\n'); // normalize newlines
+
+  const re = /(\d+)\n(\d{2}:\d{2}:\d{2},\d{3}) --> (\d{2}:\d{2}:\d{2},\d{3})\n((?:.+\n)+)/g;
+  const chunks = [];
+  let found;
+
+  while (found = re.exec(normText)) {
+    const [full, indexStr, beginStr, endStr, text] = found;
+    const begin = parseTime(beginStr);
+    const end = parseTime(endStr);
+    // TODO: Should verify that end time is >= begin time
+    // NOTE: We could check that indexes and/or time are in order, but don't really care
+    chunks.push({
+      begin,
+      end,
+      text,
+    });
+    re.lastIndex = found.index + full.length;
+  }
+
+  return chunks;
+};
+
+const indexSortedChunks = (chunks) => {
+  // Determine a "center" time to partition on. Goal is just to balance tree.
+  const centerIdx = Math.floor(0.5*chunks.length);
+  const centerChunk = chunks[centerIdx];
+  const centerTime = 0.5*(centerChunk.begin + centerChunk.end);
+
+  // Partition on center time, into chunks that are fully-left, overlapping, and fully-right
+  const left = [], overlap = [], right = [];
+  for (const c of chunks) {
+    if (c.end < centerTime) {
+      left.push(c);
+    } else if (c.begin > centerTime) {
+      right.push(c);
+    } else {
+      overlap.push(c);
+    }
+  }
+
+  if ((left.length === 0) || (right.length === 0)) {
+    // Not enough useful partitioning was done, make this a leaf node
+    return {
+      leaf: true,
+      chunks: left.concat(overlap, right),
+    };
+  }
+
+  // Partitioning was done, return a non-leaf node.
+  // Note that we duplicate the overlap into left and right, which makes things simpler.
+  return {
+    leaf: false,
+    splitTime: centerTime,
+    left: indexSortedChunks(left.concat(overlap)),
+    right: indexSortedChunks(right.concat(overlap)),
+  };
+};
+
+export const indexChunks = (chunks) => {
+  // Build something like an Interval Tree. This differs from wikipedia but I think mine is correct and simpler.
+  const sortedChunks = [...chunks];
+  sortedChunks.sort((a, b) => (a.begin - b.begin)); // It doesn't matter that this sort is "perfect", will just help balance tree
+  return indexSortedChunks(sortedChunks);
+};
+
+export const chunksAtTime = (index, time) => {
+  if (index.leaf) {
+    const result = [];
+    for (const c of index.chunks) {
+      if ((time >= c.begin) && (time <= c.end)) {
+        result.push(c);
+      }
+    }
+    return result;
+  } else {
+    if (time < index.splitTime) {
+      return chunksAtTime(index.left, time);
+    } else {
+      return chunksAtTime(index.right, time);
+    }
+  }
+};