Merge branch 'master' into WishDetails-Edit-Hometown

api/package.json

@@ -17,7 +17,7 @@
     "cors": "^2.8.5",
     "debug": "~2.6.9",
     "express": "~4.15.5",
-    "mongoose": "^5.5.13",
+    "mongoose": "^5.7.5",
     "morgan": "~1.9.0",
     "passport": "^0.4.0",
     "passport-local": "^1.0.0",

ui/.gcloudignore

@@ -20,3 +20,6 @@ __pycache__/
 
 src/
 node_modules/
+
+# Large gif doesn't like to be deployed
+build/static/media/MAW_*.gif

ui/src/childinfo/ChildInfo.js

@@ -98,6 +98,8 @@ export default class ChildInfo extends Component {
         showConfirmation: true,
         childId: response._id
       })
+
+      this.rocketBlastOff();
     }
   }
 
@@ -140,8 +142,7 @@ export default class ChildInfo extends Component {
     this.soundEffect.play()
     setTimeout(() => {
       this.soundEffect.pause()
-      const url = `/wish-summary/${this.state.childId}`
-      this.props.history.push(url)
+      this.props.changeStateBack()
     }, 3000)
   }
 
@@ -180,13 +181,6 @@ export default class ChildInfo extends Component {
               src={rocketImage}
               alt={rocketImage}
             />
-            <button
-              className="rocket-blast-off-button"
-              onClick={this.rocketBlastOff}
-              disabled={this.state.launchRocket}
-            >
-              Fulfill my wish
-            </button>
           </div>
         )}
       </>

ui/src/childinfo/ChildInfo.test.js

@@ -136,17 +136,13 @@ describe('Initial Render', () => {
     })
   })
 
-  describe('When user on confirmation page and click blast off the rocket', () => {
+  describe('When user on confirmation page after third Next button click, blast off the rocket', () => {
     const play = jest.fn()
     const pause = jest.fn()
     const push = jest.fn()
 
     beforeEach(() => {
       childInfo = shallow(<ChildInfo name={testName} age={age} />);
-      childInfo.instance().setState({
-        showConfirmation: true,
-        isBlastOff: false
-      })
 
       childInfo.instance().soundEffect = {
         play,
@@ -166,14 +162,16 @@ describe('Initial Render', () => {
       push.mockClear()
     })
 
-    it('Should play and pause sound effect, and push to next url', (done) => {      
-      childInfo.find('.rocket-blast-off-button').simulate('click')
+    it('Should play and pause sound effect, and push to next url', async () => {      
+      let nextButton = childInfo.find('.next-button');
+      await nextButton.simulate('click');
+      await nextButton.simulate('click');
+      await nextButton.simulate('click');
       setTimeout(() => {
         expect(play.mock.calls.length).toEqual(1)
         expect(pause.mock.calls.length).toEqual(1)
         expect(push.mock.calls.length).toEqual(1)
-        done()
-      }, 4000);
+      }, 5000);
     })
   });
 });

ui/src/galaxyScreen/galaxyScreen.js

@@ -1,90 +1,62 @@
 import React, { Component } from 'react'
 import './styles.scss'
 import { getWishes } from '../services/WishDetailsService'
-import backgroundGif from '../assets/gifs/MAW_BG.gif'
-import rocketGif from '../assets/gifs/MAW_Rocket.gif'
-import toBeGif from '../assets/gifs/MAW_To_Be.gif'
-import toMeetGif from '../assets/gifs/MAW_To_Meet.gif'
+import backgroundWebm from '../assets/gifs/MAW_BG.webm'
+import toGoWebm from '../assets/gifs/MAW_To_Go.webm'
+import toBeWebm from '../assets/gifs/MAW_To_Be.webm'
+import toMeetWebm from '../assets/gifs/MAW_To_Meet.webm'
+import toHaveWebm from '../assets/gifs/MAW_To_Have.webm'
 
 export default class GalaxyScreen extends Component {
 
     constructor(props) {
         super(props)
         this.state = {
-            currentGif: null,
-            previousWishList: []
+            currentWebm: null,
+            previousWishList: [],
+            webmLookup: {}
         }
     }
 
     componentDidMount() {
         this.setState({
-            currentGif: backgroundGif
+            currentWebm: 'MAW_BG.webm',
+            webmLookup: {
+              'MAW_BG.webm': backgroundWebm,
+              'MAW_To_Go.webm': toGoWebm,
+              'MAW_To_Be.webm': toBeWebm,
+              'MAW_To_Meet.webm': toMeetWebm,
+              'MAW_To_Have.webm': toHaveWebm,
+            }
         },
         () => {
             setInterval(() => {
-                this.handleCurrentGif()
+                this.handleCurrentWebm()
             },
             3000)
         })
     }
 
-    handleCurrentGif = async () => {
+    handleCurrentWebm = async () => {
         const wishes = await getWishes()
         if (JSON.stringify(this.state.previousWishList) !== JSON.stringify(wishes)) {
             const difference = wishes.filter(wish => !this.state.previousWishList.some(prevWish => wish._id === prevWish._id));
 
-            // console.log(this.state.previousWishList)
-            // console.log(difference)
             if (difference && difference.length > 0 && this.state.previousWishList.length > 0) {
-
-                if (difference[0].type === 'go') {
-                    this.setState({
-                        currentGif: rocketGif // 13 seconds
-                    }, () => {
-                        setTimeout(() => {
-                            this.setState({
-                                currentGif: backgroundGif
-                            })
-                        },
-                        13000)
-                    })
+                if (difference[0].type === 'have') {
+                    this.triggerWishVideo('MAW_To_Have.webm', 13000)   
                 } else if (difference[0].type === 'meet') {
-                    this.setState({
-                        currentGif: toMeetGif // 11 seconds
-                    }, () => {
-                        setTimeout(() => {
-                            this.setState({
-                                currentGif: backgroundGif
-                            })
-                        },
-                        11000)
-                    })
+                    this.triggerWishVideo('MAW_To_Meet.webm', 11000)   
                 } else if (difference[0].type === 'be') {
-                    this.setState({
-                        currentGif: toBeGif // 11 seconds
-                    }, () => {
-                        setTimeout(() => {
-                            this.setState({
-                                currentGif: backgroundGif
-                            })
-                        },
-                        11000)
-                    })
+                    this.triggerWishVideo('MAW_To_Be.webm', 11000)
                 } else {
-                    this.setState({
-                        currentGif: rocketGif // 13 seconds
-                    }, () => {
-                        setTimeout(() => {
-                            this.setState({
-                                currentGif: backgroundGif
-                            })
-                        },
-                        13000)
-                    })
+                    this.triggerWishVideo('MAW_To_Go.webm',13000)    
                 }
             } else {
                 this.setState({
-                    currentGif: backgroundGif
+                    currentWebm: 'MAW_BG.webm'
+                }, () => {
+                    this.playVideo();
                 })
             }
 
@@ -94,12 +66,47 @@ export default class GalaxyScreen extends Component {
         }
     }
 
+    triggerWishVideo = (newWebm, timeout) => {
+        this.setState({
+            currentWebm: newWebm 
+        }, () => {
+            this.playVideo();
+            setTimeout(() => {
+                this.setState({
+                    currentWebm: 'MAW_BG.webm'
+                }, () => {
+                    this.playVideo()
+                })
+              }, timeout
+            )
+        })
+    }
+
+    getSourceURL = (webmName) => {
+        if(process.env.REACT_APP_imageUrl) {
+            return process.env.REACT_APP_imageUrl + webmName
+        }
+        return this.state.webmLookup[webmName]
+    }
+
+    playVideo = () => {
+        this.refs.video.load();
+        this.refs.video.play();
+    }
+
     render() {
         return (
-            <div id="GalaxyScreen">
-                <img className='galaxy-image' src={this.state.currentGif} alt="loading..." />
-            </div>
+            <>
+                <link rel="preload" as="video" href={this.getSourceURL('MAW_To_Meet.webm')} />
+                <link rel="preload" as="video" href={this.getSourceURL('MAW_To_Be.webm')} />
+                <link rel="preload" as="video" href={this.getSourceURL('MAW_To_Go.webm')} />
+                <link rel="preload" as="video" href={this.getSourceURL('MAW_To_Have.webm')} />
+
+                <video loop muted autoPlay ref="video" className="fullscreen-bg__video">
+                    <source src={this.getSourceURL(this.state.currentWebm)} type="video/webm" />
+                </video>
+            </>
         )
     }
 
-}
+}