Fix player position. Still need to be tested on live and to fix cookp…

…ete/react-player#357

app/components/VideoDebate/ColumnVideo.jsx

@@ -7,9 +7,9 @@ import { Link } from 'react-router'
 import { MIN_REPUTATION_ADD_SPEAKER } from '../../constants'
 import { videoDebateOnlineUsersCount, videoDebateOnlineViewersCount } from '../../state/video_debate/presence/selectors'
 import { AddSpeakerForm, SpeakerPreview } from "../Speakers"
-import { VideoPlayer } from "../Videos"
 import { LoadingFrame, Icon } from "../Utils"
 import ReputationGuard from '../Utils/ReputationGuard'
+import VideoDebatePlayer from './VideoDebatePlayer'
 import Presence from './Presence'
 
 
@@ -29,7 +29,7 @@ export class ColumnVideo extends React.PureComponent {
     const { url, title, speakers } = video
     return (
       <div id="col-video" className="column is-5">
-        <VideoPlayer url={url}/>
+        <VideoDebatePlayer url={url}/>
         <div className="videoInfo">
           <h2 className="title is-4">{title}</h2>
           <Presence nbUsers={this.props.nbUsers} nbViewers={this.props.nbViewers}/>

app/components/VideoDebate/VideoDebatePlayer.jsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { connect } from "react-redux"
+import ReactPlayer from 'react-player'
+
+import { setPosition } from '../../state/video_debate/video/reducer'
+
+
+/**
+ * A player connected to VideoDebate state. Update position in it when playing
+ * and seekTo position when requested in state.
+ */
+@connect(state => ({
+  position: state.VideoDebate.video.playback.position,
+  forcedPosition: state.VideoDebate.video.playback.forcedPosition
+}), {setPosition})
+export default class VideoDebatePlayer extends React.Component {
+  shouldComponentUpdate(newProps) {
+    return this.props.url !== newProps.url
+  }
+
+  componentWillReceiveProps(newProps) {
+    const { forcedPosition } = newProps
+    if (forcedPosition.requestId !== null &&
+      forcedPosition.requestId !== this.props.forcedPosition.requestId) {
+        this.refs.player.seekTo(forcedPosition.time)
+    }
+  }
+
+  render() {
+    const { setPosition, url } = this.props
+
+    return (
+      <ReactPlayer ref="player"
+                   className="video"
+                   url={url}
+                   onProgress={({playedSeconds}) => setPosition(playedSeconds)}
+                   width=""
+                   height=""
+                   controls
+      />
+    )
+  }
+}

app/components/Videos/AddVideoForm.jsx

@@ -3,9 +3,9 @@ import { withRouter } from "react-router"
 import { Field, reduxForm } from 'redux-form'
 import { connect } from 'react-redux'
 import trim from 'voca/trim'
+import ReactPlayer from 'react-player'
 
 import { youtubeRegex } from '../../lib/url_utils'
-import { DummyVideoPlayer } from "../Videos"
 import { FieldWithButton } from "../FormUtils"
 import { LoadingFrame } from '../Utils/LoadingFrame'
 import { postVideo, searchVideo } from '../../state/videos/effects'
@@ -18,19 +18,6 @@ const validate = ({ url }) => {
   return {}
 }
 
-const renderVideoField = (field) => {
-  const { meta: {error}, input: {value} } = field
-  const urlInput = FieldWithButton(field)
-
-  return (
-    <div>
-      {!error && <DummyVideoPlayer url={value}/>}
-      {error && <div className="video"><div></div></div>}
-      {urlInput}
-    </div>
-  )
-}
-
 @withRouter
 @connect((state, props) => ({
   initialValues: {url: props.params.videoUrl},
@@ -48,22 +35,13 @@ export class AddVideoForm extends React.PureComponent {
     }
   }
 
-  handleSubmit(video) {
-    const promise = this.props.postVideo(video)
-    return promise.then(action => {
-      if (!action.error)
-        this.props.router.push(`/videos/${action.payload.id}`)
-      else if (action.payload === 'unauthorized' && !this.props.isAuthenticated)
-        this.props.router.push('/login')
-    })
-  }
-
   render() {
     return (
       <div id="video-show" className="columns is-gapless">
         <form id="col-video" className="column is-4 form"
           onSubmit={ this.props.handleSubmit(this.handleSubmit.bind(this)) }>
-            <Field component={renderVideoField} name="url" buttonLabel="Add Video" placeholder="Video URL"
+            <Field component={this.renderVideoField} name="url"
+                   buttonLabel="Add Video" placeholder="Video URL"
                    buttonClassName="is-primary"
                    normalize={s => trim(s)}
             />
@@ -74,4 +52,33 @@ export class AddVideoForm extends React.PureComponent {
       </div>
     )
   }
+
+  renderVideoField = (field) => {
+    const { meta: {error}, input: {value} } = field
+    const urlInput = FieldWithButton(field)
+
+    return (
+      <div>
+        {!error &&
+          <ReactPlayer className="video"
+                       url={value}
+                       controls={true}
+                       width=""
+                       height=""/>
+        }
+        {error && <div className="video"><div/></div>}
+        {urlInput}
+      </div>
+    )
+  }
+
+  handleSubmit(video) {
+    const promise = this.props.postVideo(video)
+    return promise.then(action => {
+      if (!action.error)
+        this.props.router.push(`/videos/${action.payload.id}`)
+      else if (action.payload === 'unauthorized' && !this.props.isAuthenticated)
+        this.props.router.push('/login')
+    })
+  }
 }

app/components/Videos/index.js

@@ -1,6 +1,4 @@
 export * from './AddVideoForm'
 export * from './PublicVideos'
 export * from './VideoCard'
-export * from './DummyVideoPlayer'
-export * from './VideoPlayer'
 export * from './VideosGrid'

package.json

@@ -45,7 +45,7 @@
     "react-flip-move": "^3.0.1",
     "react-i18next": "^7.4.0",
     "react-markdown": "^3.2.2",
-    "react-player": "0.25.3",
+    "react-player": "^1.2.1",
     "react-redux": "^5.0.7",
     "react-router": "^3.0.1",
     "react-select": "^1.2.1",