     else
       max_end
 
+  getStartTime: (mediaObj) ->
+    parseFloat mediaObj.divs.annotation[@state.startLine].from
+
+  getEndTime: (mediaObj) ->
+    parseFloat mediaObj.divs.annotation[@state.endLine].to
+
+  getInitialState: ->
+    startLine: @getStartLine(@props.mediaObj)
+    endLine: @getEndLine(@props.mediaObj)
+    currentLine: @getStartLine(@props.mediaObj)
+    restart: false
+
   componentDidMount: ->
     @createPlayer()
 
   componentDidUpdate: ->
-    @destroyPlayer()
-    @createPlayer()
+    @restartPlayer() if @state.restart
 
   componentWillUnmount: ->
     @destroyPlayer()

             </div>
         </div>
      </div>
      <div className="jplayer-text autocue"></div>
      <div className="slider-range ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
          <div className="ui-slider-range ui-widget-header ui-corner-all" style={{left: '40%', width: '40%'}}></div>
          <a className="ui-slider-handle ui-state-default ui-corner-all" href="#" style={{left: '40%'}}></a>

        range: true
        min: 0
        max: last_line
        values: [ @state.startLine, @state.endLine+1 ]

        slide: ( event, ui ) =>
          return false if ui.values[1] - ui.values[0] < 1
          $playerNode.jPlayer( "stop" )
          @setState(restart: true, currentLine: ui.values[0], startLine: ui.values[0], endLine: ui.values[1]-1) #eg,  2 - 3 means play 1 segment


  destroyPlayer: ->
    $node = $(@getDOMNode())
    $node.find(".jp-jplayer").jPlayer('destroy')

  restartPlayer: ->
    $node = $(@getDOMNode())
    $playerNode = $node.find(".jp-jplayer")
    $playerNode.jPlayer("play", @getStartTime(@props.mediaObj))

  render: ->
    `<div style={{position: 'relative'}}>
