Bump handlebars from 4.1.2 to 4.7.6

README.md

@@ -0,0 +1,18 @@
+# talkawhile-reactnative
+> Talk a While is an application that you can learn English by watching scenes of movies, listening the scene and speak what you heard on that scene.
+
+## This version of Talk a While is deprecated due to unstable playphrase.com api.
+
+## Feel free to use this repo by modifying it 😇
+
+# Photos
+<img width="294" alt="Screen Shot 2020-04-09 at 19 36 57" src="https://user-images.githubusercontent.com/33218120/78918907-cd3af700-7a99-11ea-8103-6f587e7a4195.png">
+<img width="294" alt="Screen Shot 2020-04-09 at 19 37 23" src="https://user-images.githubusercontent.com/33218120/78918927-d1671480-7a99-11ea-8539-d785d78d67f2.png">
+<img width="297" alt="Screen Shot 2020-04-09 at 19 16 31" src="https://user-images.githubusercontent.com/33218120/78918932-d2984180-7a99-11ea-9b85-d30bc9b6cdc9.png">
+<img width="297" alt="Screen Shot 2020-04-09 at 19 16 48" src="https://user-images.githubusercontent.com/33218120/78918934-d3c96e80-7a99-11ea-827c-24ae424259ca.png">
+<img width="297" alt="Screen Shot 2020-04-09 at 19 30 16" src="https://user-images.githubusercontent.com/33218120/78918938-d4620500-7a99-11ea-900d-92d5b791483f.png">
+<img width="297" alt="Screen Shot 2020-04-09 at 19 20 46" src="https://user-images.githubusercontent.com/33218120/78918941-d5933200-7a99-11ea-82f3-b1508729b629.png">
+<img width="297" alt="Screen Shot 2020-04-09 at 19 30 55" src="https://user-images.githubusercontent.com/33218120/78918943-d75cf580-7a99-11ea-8f5f-d3d8243e98f7.png">
+<img width="297" alt="Screen Shot 2020-04-09 at 19 30 58" src="https://user-images.githubusercontent.com/33218120/78918947-d88e2280-7a99-11ea-9abb-434b46d1d44c.png">
+<img width="297" alt="Screen Shot 2020-04-09 at 19 17 33" src="https://user-images.githubusercontent.com/33218120/78918953-da57e600-7a99-11ea-84c6-415975243729.png">
+

src/app/pages/watch/WatchPage.tsx

@@ -10,59 +10,42 @@ import {
 import Video from 'react-native-video';
 import Orientation from 'react-native-orientation-locker';
 import Subtitle from './components/SubtitleComponent';
-import Watch from './components/WatchComponent';
 import ContentProvider from './schema/ContentProvider';
 import {Playphrase, PhrasesItem} from '../../models/Playphrase';
+import WatchEnd from './components/WatchEndComponent';
+import ContentStore from '../../stores/ContentStore';
+import { observer } from 'mobx-react'
 
 export interface WatchProps {}
 
 export interface WatchState {
-  showTalkDiaglog: boolean;
-  areContentsLoaded: boolean;
-  contents: PhrasesItem[];
+   areContentsLoaded: boolean;
   player_paused: boolean;
 }
-
+@observer
 export default class WatchComponent extends React.Component<
   WatchProps,
   WatchState
 > {
   player: any;
-  contentProvider = new ContentProvider();
-  currentContent: PhrasesItem = null;
-  constructor(props: WatchProps) {
+   constructor(props: WatchProps) {
     super(props);
     this.state = {
-      showTalkDiaglog: false,
-      areContentsLoaded: false,
-      contents: null,
+       areContentsLoaded: false,
       player_paused: false,
     };
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     Orientation.lockToLandscapeLeft();
     console.log('mount');
-
-    this.contentProvider.getAllWordsContents().then(allContent => {
-      this.setState({
-        contents: allContent,
-      });
-    }).then(()=> {
-      this.getRandomContent()
-      this.setState({
-                areContentsLoaded: true,
-      })
+    await ContentStore.getAllPhrases();
+    ContentStore.getRandomContent();
+    this.setState({
+      areContentsLoaded:true
     })
   }
 
-  getRandomContent = () => {
-    this.currentContent = null; // to remove old value
-    const contents = this.state.contents;
-    const randomContent = contents[Math.floor(Math.random() * contents.length)];
-    this.currentContent = randomContent;
-  };
-
   componentWillUnmount() {
     Orientation.lockToPortrait();
   }
@@ -71,7 +54,7 @@ export default class WatchComponent extends React.Component<
 
   public render() {
     console.log('rendered again');
-    return this.state.areContentsLoaded ? (
+     return this.state.areContentsLoaded ? (
       <View style={styles.container}>
         <TouchableOpacity
           style={{position: 'absolute', top: 20, left: 20, zIndex: 6}}>
@@ -81,17 +64,22 @@ export default class WatchComponent extends React.Component<
           />
         </TouchableOpacity>
         <Video
-          source={{uri: this.currentContent['video-url']}}
+          source={{uri: ContentStore.currentPhrase && ContentStore.currentPhrase["video-url"]}}
           ref={(ref: any) => {
             this.player = ref;
           }}
           resizeMode={'cover'}
           style={styles.backgroundVideo}
           pasued={this.state.player_paused}
+          onLoad= {
+            ()=> {
+              ContentStore.toggleTalkDialog(false)
+            }
+          }
           onEnd={() => {
-            this.setState({showTalkDiaglog: true, player_paused: true});
+            ContentStore.toggleTalkDialog(true);
+            this.setState({player_paused: true});
             console.log(this.state);
-
           }}
         />
         <View
@@ -104,9 +92,9 @@ export default class WatchComponent extends React.Component<
             justifyContent: 'center',
             alignItems: 'center',
           }}>
-          <Subtitle subtitle={this.currentContent.text} />
+          <Subtitle subtitle={ContentStore.currentPhrase && ContentStore.currentPhrase.text} />
         </View>
-        {this.state.showTalkDiaglog ? (
+        {ContentStore.showTalkDialog ? (
           <View
             style={{
               zIndex: 5,
@@ -116,7 +104,7 @@ export default class WatchComponent extends React.Component<
               justifyContent: 'center',
               alignItems: 'center',
             }}>
-            {}
+            <WatchEnd />
           </View>
         ) : null}
       </View>

src/app/pages/watch/components/WatchComponent.tsx → src/app/pages/watch/components/WatchEndComponent.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react';
 import { View, StyleSheet, Text, Image, TouchableNativeFeedback, TouchableOpacity } from 'react-native';
-import Player from '../schema/Player';
-import { passComponent, wordComponent, bottomButtonText, nextComponent, replayComponent, scoreComponent } from './WatchStaticSubcomponents';
-export interface WatchProps {
+ import { PassComponent, wordComponent, bottomButtonText, NextComponent, ReplayComponent, scoreComponent } from './WatchStaticSubcomponents';
+export interface WatchEndProps {
 }
 
-export interface WatchState {
+export interface WatchEndState {
     isListening: boolean;
     didMatch: boolean;
 }
 
-export default class Watch extends React.Component<WatchProps, WatchState> {
+export default class WatchEnd extends React.Component<WatchEndProps, WatchEndState> {
     public static defaultProps = {
     };
-    constructor(props: WatchProps) {
+    constructor(props: WatchEndProps) {
         super(props);
         this.state = {
             isListening: false,
@@ -41,9 +40,9 @@ export default class Watch extends React.Component<WatchProps, WatchState> {
             return scoreComponent();
         } else {
             if (this.state.didMatch === true) {
-                return nextComponent();
+                return (<NextComponent/>)
             } else if (this.state.didMatch === false) {
-                return replayComponent();
+                return (<ReplayComponent />)
             }
             return scoreComponent();
 
@@ -68,10 +67,10 @@ export default class Watch extends React.Component<WatchProps, WatchState> {
                 )
             } else if (this.state.didMatch === false) {
                 return (
-                    < TouchableOpacity onPress={this.toggleListening} style={{ justifyContent: "center", alignItems: "center" }}>
+                    < View style={{ justifyContent: "center", alignItems: "center" }}>
                         <Image source={require('../../../../assets/images/watch/sorry.png')} style={{ width: 150, height: 150 }} />
                         {bottomButtonText("It wasn't correct!")}
-                    </TouchableOpacity>)
+                    </View>)
             }
             return (
                 < TouchableOpacity onPress={this.toggleListening} style={{ justifyContent: "center", alignItems: "center" }}>
@@ -97,7 +96,7 @@ export default class Watch extends React.Component<WatchProps, WatchState> {
                 <View style={{ flex: 1, width: '100%', height: '100%', flexDirection: "row", position: "absolute", zIndex: 6 }}>
                     <View style={{ flex: 0.3333, justifyContent: "center", alignItems: "center" }}>
                         {
-                            !this.state.isListening && this.state.didMatch === false ? passComponent() : wordComponent()
+                            !this.state.isListening && this.state.didMatch === false ? (<PassComponent/>) : wordComponent()
                         }
                     </View>
                     <View style={{ flex: 0.3333, justifyContent: "center", alignItems: "center" }}>