Basic remade

All styles are now fitting UWP. Only an extra button and linking vector icons should do the job. Update is comining soon.


Former-commit-id: aff7012

AnimeGo/src/app/App.windows.js

@@ -6,8 +6,9 @@
 
 import React, { Component } from 'react';
 import { View, StatusBar } from 'react-native';
-import { Router, Scene } from 'react-native-router-flux';
-import { NewRelease, NewSeason, Movie, Popular, Genre, Setting, GenreInfo, WatchAnime, AnimeDetail, SearchAnime, SubCategory } from '../screen';
+import { Icon } from 'react-native-elements';
+import { Router, Scene, Actions } from 'react-native-router-flux';
+import { NewRelease, NewSeason, Movie, Popular, Genre, Setting, GenreInfo, WatchAnime, AnimeDetail, SearchAnime, SubCategory, ToWatch, Schedule } from '../screen';
 import { StatusBarColour } from '../value';
 import { styles } from './AppStyle';
 import { DataManager } from '../helper/';
@@ -23,10 +24,12 @@ export default class App extends Component {
     // The width for the drawer should be 61.8% of the device width
     return (
       <Router sceneStyle={{backgroundColor: 'white'}}>
-        <Scene key='root' titleStyle={naviTitleStyle} headerTintColor='white' navigationBarStyle={naviBarStyle} backTitle='Back'>
-
-          <Scene key='NewRelease' component={NewRelease} title='New Release' initial/>
+        <Scene key='root' titleStyle={naviTitleStyle} headerTintColor='white' navigationBarStyle={naviBarStyle} renderLeftButton={this.renderLeftBtn}>
+          <Scene key='MainEntry' component={UWPEntry} title='Anime Go' initial/>
+          <Scene key='NewRelease' component={NewRelease} title='New Release'/>
           <Scene key='NewSeason' component={NewSeason} title='New Season'/>
+          <Scene key='Schedule' component={Schedule} title='Schedule'/>
+
           <Scene key='Movie' component={Movie} title='Movie'/>
           <Scene key='Popular' component={Popular} title='Popular'/>
 
@@ -39,9 +42,17 @@ export default class App extends Component {
           <Scene key='SearchAnime' component={SearchAnime}/>
           <Scene key='SubCategory' component={SubCategory}/>
 
+          <Scene key='ToWatch' component={ToWatch} title='ToWatch'/>            
           <Scene key='Setting' component={Setting} title='Settings'/>
         </Scene>
       </Router>
     )
   }
+
+  renderLeftBtn = () => {
+    if (Actions.currentScene == 'MainEntry') return null;
+    return (
+      <Icon name="arrow-back" iconStyle={{padding: 10}} color='white' underlayColor='transparent' onPress={()=> Actions.pop()} />
+    )
+  }
 }

AnimeGo/src/app/UWPEntry.js

@@ -1,15 +1,36 @@
 import React, { PureComponent } from 'react';
-import { View, Text, Button } from 'react-native';
-import { SecondaryColour } from '../value';
+import { ScrollView, View, Text } from 'react-native';
+import { Button } from 'react-native-elements';
+import { styles } from './UWPEntryStyles';
 import { SmartTouchable } from '../component/index';
 import { Actions } from 'react-native-router-flux';
+import { VERSION } from '../value';
 
 export default class UWPEntry extends PureComponent {
   render() {
+    const { blueButton, goButton, greenButton, redButton, mainViewStyle, horizontalViewStyle, textStyle, topMarginStyle } = styles;
     return (
-      <View>
-        <Button title='New Release' onPress={() => Actions.NewRelease()}/>
-      </View>
+      <ScrollView>
+        <View>
+          <View style={topMarginStyle}>
+            <Text style={textStyle}>Anime</Text>
+            <Button title='New Release' onPress={() => Actions.NewRelease()} buttonStyle={blueButton}/>
+            <Button title='New Season' onPress={() => Actions.NewSeason()} buttonStyle={blueButton}/>
+            <Button title='Popular' onPress={() => Actions.Popular()} buttonStyle={blueButton}/>          
+            <Button title='Movie' onPress={() => Actions.Movie()} buttonStyle={blueButton}/>
+            <Button title='Seach Anime' onPress={() => Actions.SearchAnime()} buttonStyle={redButton}/>
+          </View>
+          <View style={topMarginStyle}>
+            <Text style={textStyle}>Utilities</Text>
+            <Button title='Schedule' onPress={() => Actions.Schedule()} buttonStyle={greenButton}/>
+            <Button title='Genre' onPress={() => Actions.Genre()} buttonStyle={goButton}/>
+            <Button title='ToWatch list' onPress={() => Actions.ToWatch()} buttonStyle={redButton}/>
+          </View>
+          <View style={topMarginStyle}>
+            <Button title='Settings' onPress={() => Actions.Setting()} buttonStyle={goButton}/>
+          </View>
+        </View>
+      </ScrollView>
     )
   }
 }

AnimeGo/src/app/UWPEntryStyles.js

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { BlueColour, RedColour, GreenColour, SecondaryColour } from '../value';
+
+export const styles = StyleSheet.create({
+  blueButton: {
+    backgroundColor: BlueColour,
+  },
+  redButton: {
+    backgroundColor: RedColour
+  },
+  goButton: {
+    backgroundColor: SecondaryColour
+  },
+  greenButton: {
+    backgroundColor: GreenColour
+  },
+  mainViewStyle: {
+    flex: 1,
+  },
+  topMarginStyle: {
+    marginTop: 8,
+    marginBottom: 8
+  },
+  textStyle: {
+    textAlign: 'center',
+    fontSize: 24,
+    fontWeight: 'bold'
+  }
+})

AnimeGo/src/component/cell/EpisodeCell.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { View, Button, Alert } from 'react-native';
+import { View, Alert } from 'react-native';
+import { AnimeButton } from '../../component';
 import { Actions } from 'react-native-router-flux'; 
 import { styles } from './EpisodeCellStyles';
 import { RedColour, SecondaryColour }  from '../../value';
@@ -24,7 +25,7 @@ class EpisodeCell extends React.PureComponent {
     const { viewStyle } = styles;
     return (
       <View style={viewStyle}>
-        <Button title={this.episode} color={this.isLastest ? RedColour : SecondaryColour} onPress={this.WatchAnime}/>
+        <AnimeButton title={this.episode} color={this.isLastest ? RedColour : SecondaryColour} onPress={this.WatchAnime}/>
       </View>
     )
   }

AnimeGo/src/component/cell/SourceCell.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { View, Button, Text, Linking } from 'react-native';
+import { View, Text, Linking } from 'react-native';
+import { AnimeButton } from '../../component';
 import { styles } from './SourceCellStyles'
 import { Actions } from 'react-native-router-flux';
 import { GreyColour, BlueColour, RedColour } from '../../value';
@@ -21,14 +22,14 @@ class SourceCell extends React.PureComponent {
     if (this.source.includes('Download')) {
       return (
         <View style={viewStyle}>
-          <Button title={this.source} onPress={this.WatchAnime} color={RedColour}/>
+          <AnimeButton title={this.source} onPress={this.WatchAnime} color={RedColour}/>
           <Text style={textStyle}>Server list</Text>
         </View>
       )
     } else {
       return (
         <View style={viewStyle}>
-          <Button title={this.source} onPress={this.WatchAnime} color={BlueColour}/>
+          <AnimeButton title={this.source} onPress={this.WatchAnime} color={BlueColour}/>
         </View>
       )
     }

AnimeGo/src/component/common/AnimeButton.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import { Platform } from 'react-native';
+
+class AnimeButton extends Component {
+  render() {
+    const { onPress, color, title } = this.props;
+    if (Platform.OS == 'windows') {
+      let Button = require('react-native-elements').Button;
+      return (
+        <Button title={title} onPress={onPress} buttonStyle={{backgroundColor: color}}/>
+      )
+    } else {
+      let Button = require('react-native').Button;
+      return (
+        <Button title={title} onPress={onPress} color={color}/>
+      )  
+    }
+  }
+}
+
+export {AnimeButton};

AnimeGo/src/component/index.js

@@ -2,6 +2,7 @@
 export * from './common/SmartTouchable';
 export * from './common/LoadingIndicator';
 export * from './common/FabButton';
+export * from './common/AnimeButton';
 
 // Cell
 export * from './cell/DrawerCell';

AnimeGo/src/component/list/AnimeList.js

@@ -15,7 +15,7 @@ class AnimeList extends PureComponent {
       hasMorePage: true,
       isRefreshing: false,
       url: props.AnimeUrl,
-      width: deviceWidth,
+      width: isPortrait() ? deviceWidth / 2 - 16 : deviceWidth / 4 - 16,
       column: 0
     };
   }
@@ -38,7 +38,7 @@ class AnimeList extends PureComponent {
       return (
         <View style={{flex: 1}} onLayout={this.updateColumn}>
           <FlatList data={data} keyExtractor={this.animeKey} renderItem={({item}) => <AnimeCell data={item} width={width}/>} 
-            key={(isPortrait() ? 'p' + column : 'l' + column)} numColumns={column} refreshing={isRefreshing}
+            key={(isPortrait() ? 'p' + width : 'l' + width)} numColumns={column} refreshing={isRefreshing}
             ListFooterComponent={this.renderFooterComponent} automaticallyAdjustContentInsets={false}
             onRefresh={this.refreshAnime} onEndReached={this.loadAnime} onEndReachedThreshold={0.5} showsVerticalScrollIndicator={false} />
           { this.renderFabButton() }
@@ -56,9 +56,10 @@ class AnimeList extends PureComponent {
   updateColumn = () => {
     const { width } = Dimensions.get('window');
     let cellWidth = isPortrait() ? width / 2 - 16 : width / 4 - 16;    
+    console.log(cellWidth);
     if (Platform.OS == 'windows') {
       if (this.state.column == 0) this.setState({column: isPortrait() ? 2 : 4})
-      if (Math.abs(this.currWidth - width) < 50) return;
+      if (Math.abs(this.currWidth - width) < 80) return;
       this.currWidth = width;    
       this.setState({column: isPortrait() ? 2 : 4, width: cellWidth})
     } else this.setState({column: isPortrait() ? 2 : 4, width: cellWidth});

AnimeGo/src/component/list/EpisodeList.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { View, Text, FlatList, Image, Linking, Button, AsyncStorage, ToastAndroid, Platform, Alert } from 'react-native';
+import { View, Text, FlatList, Image, Linking, AsyncStorage, ToastAndroid, Platform, Alert } from 'react-native';
 import EpisodeLoader from '../../helper/core/EpisodeLoader';
 import EpisodeCell from '../cell/EpisodeCell';
-import { LoadingIndicator } from '../../component';
+import { LoadingIndicator, AnimeButton } from '../../component';
 import { Actions } from 'react-native-router-flux';
 import { isPortrait } from '../../helper/DeviceDimensions';
 import { styles } from './EpisodeListStyles'
@@ -50,9 +50,9 @@ class EpisodeList extends React.PureComponent {
         <Text numberOfLines={3} style={titleStyle}>{name}</Text>
         { this.renderInfo() }
         <Text style={plotStyle}>{plot}</Text>
-        <Button title='Google it' color={BlueColour} onPress={this.searchGoogle}/>
+        <AnimeButton title='Google it' color={BlueColour} onPress={this.searchGoogle}/>
         <Text style={basicTextStyle}>* Please consider buying its DVD</Text>
-        <Button title='To-Watch' color={RedColour} onPress={this.addToList}/>
+        <AnimeButton title='To-Watch' color={RedColour} onPress={this.addToList}/>
       </View>
     )
   }
@@ -101,7 +101,7 @@ class EpisodeList extends React.PureComponent {
           <Text style={basicTextStyle}>{'Episode\n' + episode}</Text>
           <View>
             <Text style={basicTextStyle}>Type:</Text>
-            <Button title={type.replace(' Anime', '')} color={GreenColour} onPress={this.goSubCategory}/>
+            <AnimeButton title={type.replace(' Anime', '')} color={GreenColour} onPress={this.goSubCategory}/>
           </View>
         </View>
       )
@@ -115,7 +115,7 @@ class EpisodeList extends React.PureComponent {
             <Text style={basicTextStyle}>{'Episode\n' + episode}</Text>
             <View>
               <Text style={basicTextStyle}>Type:</Text>
-              <Button title={type.replace(' Anime', '')} color={GreenColour} onPress={this.goSubCategory}/>
+              <AnimeButton title={type.replace(' Anime', '')} color={GreenColour} onPress={this.goSubCategory}/>
             </View>
           </View>
         </View>

AnimeGo/src/component/list/SourceList.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { View, Text, Button, FlatList, Dimensions, Alert } from 'react-native';
+import { View, Text, FlatList, Dimensions, Alert } from 'react-native';
 import AnimeSourceLoader from '../../helper/core/AnimeSourceLoader';
 import SourceCell from '../cell/SourceCell';
-import { LoadingIndicator } from '../../component';
+import { LoadingIndicator, AnimeButton } from '../../component';
 import { Actions } from 'react-native-router-flux';
 import { SecondaryColour, RedColour, GreenColour, AnimeGoColour } from '../../value';
 import { styles } from './SourceListStyles';
@@ -50,21 +50,21 @@ class SourceList extends Component {
   }
 
   renderFooter = () => {
-    return <Text style={styles.adStyle}>{'Ads are from websites themself.\nThis app does not have any controls over it.'}</Text>
+    return <Text style={styles.adStyle}>{'Ads are from websites themselves.\nThis app does not have any controls over it.'}</Text>
   }
 
   renderHeader = () => {
     const { headerViewStyle, textStyle, buttonGroupStyle, buttonStyle } = styles;
     return (
       <View style={headerViewStyle}>
         <Text style={textStyle}>Anime Detail</Text>
-        <Button title={this.state.name} onPress={this.infoBtnPressed} color={GreenColour}/>
+        <AnimeButton title={this.state.name} onPress={this.infoBtnPressed} color={GreenColour}/>
         <View style={buttonGroupStyle}>
           <View style={buttonStyle}>
-            <Button title='<<  Previous' onPress={this.prevEpisode} color={AnimeGoColour}/>
+            <AnimeButton title='<<  Previous' onPress={this.prevEpisode} color={AnimeGoColour}/>
           </View>
           <View style={buttonStyle}>
-            <Button title='Next  >>' onPress={this.nextEpisode} color={AnimeGoColour}/>               
+            <AnimeButton title='Next  >>' onPress={this.nextEpisode} color={AnimeGoColour}/>               
           </View>
         </View>
       </View>

AnimeGo/src/helper/core/AnimeSchedule.js

@@ -25,7 +25,7 @@ export default class AnimeSchedule {
           if (linkPath[1].isWhitespace) link = linkPath[0].childNodes[1].attributes.href;
           else link = linkPath[1].childNodes[1].attributes.href;
           let time = this.cleanText(curr[6].childNodes[1].text).split(' -')[1];
-          let rating = '⭐️ ' + this.cleanText(curr[6].childNodes[3].childNodes[3].text);
+          let rating = '⭐️' + this.cleanText(curr[6].childNodes[3].childNodes[3].text);
           animeSchedule.push({name: name, link: link, time: time, rating: rating});
         }
          console.log(animeSchedule);

AnimeGo/src/screen/SearchAnimeStyles.windows..js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  inputStyle: {
+    width: '100%',
+    height: 40,
+    textAlign: 'center',
+  }
+})

AnimeGo/src/screen/SettingStyles.windows.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  switchViewStyle: {
+    flexDirection: 'row',
+    height: 44,
+    padding: 16,
+  },
+  textStyle: {
+    color: 'black',
+    fontWeight: 'bold',
+    width: '85%',
+    height: 24,
+    alignSelf: 'center'
+  },
+  switchStyle: {
+    alignSelf: 'center',
+  },
+  versionStyle: {
+    fontSize: 12,
+    padding: 16,
+  },
+  dividerStyle: {
+    height: 0.75,
+    marginBottom: 4,
+    marginTop: 4
+  }
+})

AnimeGo/src/screen/ToWatch.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { View, FlatList, Text, AsyncStorage, Button, ToastAndroid, Platform, Alert } from 'react-native';
-import { SmartTouchable } from '../component';
+import { View, FlatList, Text, AsyncStorage, ToastAndroid, Platform, Alert } from 'react-native';
+import { SmartTouchable, AnimeButton } from '../component';
 import { styles } from './ToWatchStyles';
 import { Actions } from 'react-native-router-flux';
 import { RedColour } from '../value';
@@ -27,7 +27,7 @@ class ToWatch extends Component {
             </SmartTouchable>
           )
         }} automaticallyAdjustContentInsets={false} showsVerticalScrollIndicator={false}/>
-        <Button title='Remove all anime' color={RedColour} onPress={this.removeAllAnime}/>        
+        <AnimeButton title='Remove all anime' color={RedColour} onPress={this.removeAllAnime}/>        
       </View>
     );
   }