made this url work

: http://localhost:3000/Reponse?adId=80

nextjs/components/organisms/Recorder.js

@@ -15,6 +15,31 @@ const RTCRecorder = dynamic(() => import('RecordRTC'), {
     ssr: false
 })
 
+const videoJsOptions = {
+    controls: true,
+
+    fluid: true,
+    plugins: {
+      /*
+      // wavesurfer section is only needed when recording audio-only
+      wavesurfer: {
+          src: 'live',
+          waveColor: '#36393b',
+          progressColor: 'black',
+          debug: true,
+          cursorWidth: 1,
+          msDisplayMax: 20,
+          hideScrollbar: true
+      },
+      */
+      record: {
+        audio: true,
+        video: true,
+        maxLength: 600,
+        //debug: true
+      }
+    }
+  };
 
 const styles = theme => ({
     root: {
@@ -23,9 +48,18 @@ const styles = theme => ({
             maxWidth: `${100 - (theme.spacing(1))}vw`
         },
         button: {
-
-            margin: theme.spacing(1),
-            alignSelf: 'flex-end'
+            textTransform: 'inherit',
+            marginLeft: theme.spacing(8),
+            marginRight: theme.spacing(8),
+            marginTop: theme.spacing(4),
+            marginBottom: theme.spacing(2),
+            padding: theme.spacing(1.2, 2),
+            borderRadius: '3px',
+            color: theme.palette.secondary.main,
+            backgroundColor: theme.palette.primary.important,
+            [theme.breakpoints.up('sm')]: {
+                margin: 'auto',
+            },
         },
     }
 })
@@ -34,7 +68,7 @@ class Recorder extends Component {
     async componentDidMount() {
         var record = (await import('videojs-record')).default
         // instantiate Video.js
-        this.player = videojs(this.videoNode, this.props, () => {
+        this.player = videojs(this.videoNode, videoJsOptions, () => {
             // print version information at startup
             var version_info = 'Using video.js ' + videojs.VERSION +
                 ' with videojs-record ' + videojs.getPluginVersion('record') +
@@ -69,7 +103,7 @@ class Recorder extends Component {
         });
     }
 
-    // destroy player on unmount
+    //destroy player on unmount
     componentWillUnmount() {
         if (this.player) {
             this.player.dispose();

nextjs/out/sitemap_local.xml

@@ -23,6 +23,6 @@
     <lastmod>2019-09-17</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Offres</loc>
-    <lastmod>2019-09-17</lastmod>
+    <lastmod>2019-10-16</lastmod>
   </url>
 </urlset>

nextjs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nextjs",
+  "name": "talents_tube_pwa",
   "version": "1.0.0",
   "private": true,
   "resolutions": {
@@ -62,8 +62,7 @@
     "terser": "3.14",
     "universal-cookie": "^3.0.4",
     "validator": "^11.0.0",
-    "video.js": "latest",
-    "videojs-record": "latest",
+    "videojs-record": "3.6.0",
     "webrtc-adapter": "^7.2.3"
   },
   "scripts": {

nextjs/pages/Parametres.js

@@ -62,8 +62,8 @@ const styles = theme => ({
     },
 })
 
-//TODO: put in config
-const applicationServerPublicKey = 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU=';
+// //TODO: put in config
+// const applicationServerPublicKey = 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU=';
 
 class Parametres extends Component {
 

nextjs/pages/Reponse.js

@@ -22,6 +22,7 @@ import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import Router from 'next/router'
 import { errorMessageSelector } from '../reducers/media'
+import Recorder from '../components/organisms/Recorder'
 
 const styles = theme => ({
   root: {
@@ -82,11 +83,17 @@ const styles = theme => ({
     border: 'solid 5px white',
     borderRadius: '6px',
   },
+  recorderContainer: {
+    //display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
   helpContainer: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '100%',
+    width: '400px',
   },
   logo: {
     width: 'inherit',
@@ -191,33 +198,6 @@ const styles = theme => ({
   },
 });
 
-const videoJsOptions = {
-  controls: true,
-  // width: 800,
-  // height: 600,
-  fluid: true,
-  plugins: {
-    /*
-    // wavesurfer section is only needed when recording audio-only
-    wavesurfer: {
-        src: 'live',
-        waveColor: '#36393b',
-        progressColor: 'black',
-        debug: true,
-        cursorWidth: 1,
-        msDisplayMax: 20,
-        hideScrollbar: true
-    },
-    */
-    record: {
-      audio: true,
-      video: true,
-      // maxLength: 10,
-      debug: true
-    }
-  }
-};
-
 const steps = ["", ""]
 
 const { publicRuntimeConfig } = getConfig()
@@ -342,7 +322,8 @@ class Reponse extends React.Component {
           })}
         </Stepper>
         {loading ? ( <Loader />)
-        : activeStep === 0 ? (
+        : activeStep === 0 ? 
+        (
           <div className={classes.root}>
 
             <div className={classes.textContainer}>
@@ -362,24 +343,34 @@ class Reponse extends React.Component {
               <KeyboardArrowRightIcon className={ classes.HelpKeyboardArrowRightIcon }/>
               </Button>
               </div>
-
-            <input
-              type="file" accept="video/*" capture="camcorder"
-              className={classes.input}
-              style={{ display: 'none' }}
-              id="record-button-file"
-              multiple
-              onChange={this.inputCamRecorderChange}
-            />
-            <label htmlFor="record-button-file">
-              <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
-                <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
-                <Typography align="left" className={classes.textButton}>
-                  Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
-              </Typography>
-              <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
-              </Button>
-            </label>
+    { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
+             (
+            <Fragment>
+              <input
+                type="file" accept="video/*" capture="camcorder"
+                className={classes.input}
+                style={{ display: 'none' }}
+                id="record-button-file"
+                multiple
+                onChange={this.inputCamRecorderChange}
+              />
+              <label htmlFor="record-button-file">
+                <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
+                  <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
+                  <Typography align="left" className={classes.textButton}>
+                    Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
+                </Typography>
+                <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                </Button>
+              </label>
+            </Fragment>
+            ):
+            (
+              <div className={classes.recorderContainer}>
+                <Recorder/>
+              </div>
+            )
+            }
         
             <input
               type="file" 
@@ -401,7 +392,6 @@ class Reponse extends React.Component {
             </label>
             
           </div>
-
         ) :
           (
             <Answer mediaId={!!this.props.media && this.props.media.id}
@@ -424,12 +414,9 @@ Reponse.getInitialProps = function (context) {
 
   const { adId, companyId } = context.query
   const {res} = context
-  // if (!!!context.store.user.fetched) {
+    //TODO :really needed ?
      context.store.dispatch(fetchCurrentUserRequest())
-  // }else{
-  //  if (!!!context.store.getState().user.fetched) {
-  //   redirect({Router:Router, ctx:context, location:'/Login'})
-  // }
+
   if(!!adId)
     context.store.dispatch(fetchAdRequest(adId))
   else if(!!companyId)

nextjs/sagas/userSaga.js

@@ -258,9 +258,8 @@ export function* requestUpdateUserRequestSaga(action) {
       yield put(updateUserPictureFailure());
 
   } catch (err) {
-    console.log(err);
-    if (_.includes(err, "401") || (!!err.response && err.response.status === 401)) {
     
+    if (_.includes(err, "401") || (!!err.response && err.response.status === 401)) {
       localStorage.setItem('loginRedirect', window.location)
       Router.push("/Login");
     }

nextjs/yarn.lock

@@ -9859,7 +9859,7 @@ recompose@^0.21.2:
     hoist-non-react-statics "^1.0.0"
     symbol-observable "^1.0.4"
 
-recordrtc@>=5.5.8, recordrtc@^5.5.4:
+recordrtc@>=5.5.4, recordrtc@^5.5.4:
   version "5.5.8"
   resolved "https://registry.yarnpkg.com/recordrtc/-/recordrtc-5.5.8.tgz#46eaf3500651701fda13a3d5826270270f9178a9"
   integrity sha512-+BzbllHyL6Q8gAuaqjO8RdqofL4C6yI670hicMaUW/0dDsKHeKyz0S4M+n7sHnr4dP0LGWqcod6gazRMtXob6A==
@@ -11772,7 +11772,7 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-video.js@>=6.0.0, video.js@>=6.2.7, "video.js@^6.8.0 || ^7.0.0", video.js@latest:
+video.js@>=6.0.0, video.js@>=6.2.7, "video.js@^6.8.0 || ^7.0.0":
   version "7.6.5"
   resolved "https://registry.yarnpkg.com/video.js/-/video.js-7.6.5.tgz#af66a71bc05fd79c581c1673ac5a78a6b31bc831"
   integrity sha512-r0kC9SNJhXz9th/wwbRaLVOIZTvXkF+rhFq9/FWU+e+EJClwClRCgP8STGmfrPHDXrfWiJwH9YY21JZK61vGGQ==
@@ -11791,15 +11791,15 @@ videojs-font@3.2.0:
   resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-3.2.0.tgz#212c9d3f4e4ec3fa7345167d64316add35e92232"
   integrity sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==
 
-videojs-record@latest:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/videojs-record/-/videojs-record-3.8.0.tgz#e98227847c13227e436e00e052b3826341f41d4c"
-  integrity sha512-yS19jnnULWC5KO7Klp2hTG0rl16baxaWh71t7F4d/Cep7a3PcwzDwlluUQTFBEROYIIFmNkvF76CcmVhgKV9Rw==
+videojs-record@3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/videojs-record/-/videojs-record-3.6.0.tgz#10d529ad6afd6e7156d2a821ea2a422c61a80ba7"
+  integrity sha512-rcOAxCXgK8nbFf5hK8jayI9GGakY+hd2xH0Xg60CpuN+yI13k33iBLzlrAWGZ/ZeZw0DBZzXFHY9I/aGgQlLWQ==
   dependencies:
-    recordrtc ">=5.5.8"
+    recordrtc ">=5.5.4"
     video.js ">=6.2.7"
-    videojs-wavesurfer ">=2.9.0"
-    webrtc-adapter ">=7.2.8"
+    videojs-wavesurfer ">=2.8.0"
+    webrtc-adapter ">=7.2.1"
 
 videojs-vtt.js@^0.14.1:
   version "0.14.1"
@@ -11808,7 +11808,7 @@ videojs-vtt.js@^0.14.1:
   dependencies:
     global "^4.3.1"
 
-videojs-wavesurfer@>=2.9.0:
+videojs-wavesurfer@>=2.8.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/videojs-wavesurfer/-/videojs-wavesurfer-2.11.0.tgz#496d59b6f575b3dde8bae32d3e5de519e887cd1e"
   integrity sha512-qco1HoeX5oLJNKA0xe+s8fLMKo9ERfjLS1AvYSkuH3UmlT4MbBBQ8u6+TeRFQ4FEFXpY3ZphJzg1WFh0nNELLA==
@@ -12063,7 +12063,7 @@ webpack@^4.19.1:
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
-webrtc-adapter@>=7.2.8, webrtc-adapter@^7.2.3:
+webrtc-adapter@>=7.2.1, webrtc-adapter@^7.2.3:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.3.0.tgz#a65e18aad42759bab6ced7f8cfff11b051321e2a"
   integrity sha512-pKcwt6IR6RLCD6jlcdOOi88iVwdzppHlkOhtgTSuZHtYTxdD09t5fA1Di7GJU7je8oHcCBlNfb7zwBsetERnmQ==