offset implemented, added offset to defaultVid

src/App.css

@@ -6,7 +6,7 @@
  flex-wrap: wrap;
  flex-direction: column;
 }
-input[type=textbox]{
+input[type=textbox].videoUrl{
  width: 580px;
 }
 textarea{

src/App.js

@@ -1,10 +1,11 @@
 /* global YT */
 import React, { Component } from 'react';
 import './App.css';
-import Youtube from './Youtube.js'
-import Subtitle from './Subtitle.js'
-import lrcParser from './lrcParser.js'
-import defaultVid from './seishundokei.js'
+import Youtube from './Youtube.js';
+import Subtitle from './Subtitle.js';
+import Offset from './Offset.js';
+import lrcParser from './lrcParser.js';
+import defaultVid from './seishundokei.js';
 
 class App extends Component {
  constructor() {
@@ -15,9 +16,11 @@ class App extends Component {
  videoUrl: `https://www.youtube.com/watch?v=${defaultVid.videoId}`,
  time: 0,
  timer: null,
+ offset: defaultVid.offset||0,
  }
  this.setPlayer = this.setPlayer.bind(this);
  this.setTime = this.setTime.bind(this);
+ this.setOffset = this.setOffset.bind(this);
  this.urlOnSet = this.urlOnSet.bind(this);
  this.lrcOnChange = this.lrcOnChange.bind(this);
  this.onPlayerStateChange = this.onPlayerStateChange.bind(this);
@@ -28,6 +31,7 @@ class App extends Component {
  <div>
  <input
  type="textbox"
+ className="videoUrl"
  ref="videoUrl"
  onClick={(e)=>e.target.select()}
  ></input>
@@ -46,7 +50,12 @@ class App extends Component {
  <Subtitle
  sub={this.state.sub}
  time={this.state.time}
+ offset={this.state.offset}
  ></Subtitle>
+ <Offset
+ offset={this.state.offset}
+ setOffset={this.setOffset}
+ ></Offset>
  <textarea
  onChange={this.lrcOnChange}
  ref="text"
@@ -59,6 +68,10 @@ class App extends Component {
  this.setLrc(this.refs.text.value);
  this.refs.videoUrl.value = this.state.videoUrl;
  }
+ setOffset(s) {
+ s = parseInt((s<0?s-0.05:s+0.05)*10, 10)/10;
+ this.setState({ offset: s });
+ }
  setLrc(t) {
  const parsed = lrcParser(t);
  console.log(parsed);
@@ -101,7 +114,6 @@ class App extends Component {
  }
  setTime() {
  this.setState({ time: this.state.player.getCurrentTime() });
- console.log(this.state.time);
  }
 }
 

src/Offset.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+
+class Offset extends Component {
+ constructor() {
+ super()
+ this.decrease = this.decrease.bind(this);
+ this.increase = this.increase.bind(this);
+ this.onKeyDown = this.onKeyDown.bind(this);
+ }
+ render() {
+ return (
+ <div className="offset">
+ <button
+ onClick={this.decrease}
+ >－</button>
+ <input
+ type="textbox"
+ value={this.props.offset}
+ onKeyDown={this.onKeyDown}
+ ></input>
+ <button
+ onClick={this.increase}
+ >＋</button>
+ </div>
+ )
+ }
+ decrease() {
+ this.props.setOffset(this.props.offset-0.1);
+ }
+ increase() {
+ this.props.setOffset(this.props.offset+0.1);
+ }
+ onKeyDown(e) {
+ switch(e.keyCode){
+ case 38://up
+ case 39://right
+ this.increase();
+ break;
+ case 40://down
+ case 37://left
+ this.decrease();
+ break;
+ default:
+ }
+ }
+}
+
+export default Offset
+

src/Subtitle.js

@@ -1,15 +1,16 @@
 import React from 'react';
 
 const Subtitle = (props) => {
- const getText= (l, s) => {
+ const getText= (l, s, o) => {
+ s+= o;
  for( let i = l.length - 1 ; i >= 0 ; i-- ){
  if ( l[i].time <= s )
  return l[i].text===''?'　':l[i].text;
  }
  };
  return (
  <div className="sub">
- {props.sub?getText(props.sub, props.time):'　'}
+ {props.sub?getText(props.sub, props.time, props.offset):'　'}
  </div>
  )
 }

src/seishundokei.js

@@ -1,9 +1,11 @@
 const seishundokei = {
  videoId: "n-iXRXpfVTs",
+ offset: -50.4,
  lrc: 
 `[ti:青春時計]
 [ar:NGT48]
 [al:青春時計]
+[00:00.00]
 [00:00.59]春天的制服 裙襬搖搖
 [00:02.63]蹦地跳過護欄
 [00:04.73]你全力地跑著