Freeze issue iOS

components/Controls.js

@@ -1,18 +1,12 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 import {
   View,
   Animated,
   StyleSheet,
   TouchableWithoutFeedback as Touchable
-} from 'react-native'
-import {
-  PlayButton,
-  ControlBar,
-  Loading,
-  TopBar,
-  ProgressBar
-} from './'
+} from "react-native";
+import { PlayButton, ControlBar, Loading, TopBar, ProgressBar } from "./";
 
 const styles = StyleSheet.create({
   container: {
@@ -22,95 +16,100 @@ const styles = StyleSheet.create({
   flex: {
     flex: 1
   }
-})
+});
 
 class Controls extends Component {
   constructor() {
-    super()
+    super();
     this.state = {
       hideControls: false,
       seconds: 0,
       seeking: false
-    }
-    this.animControls = new Animated.Value(1)
-    this.scale = new Animated.Value(1)
-    this.progressbar = new Animated.Value(2)
+    };
+    this.animControls = new Animated.Value(1);
+    this.scale = new Animated.Value(1);
+    this.progressbar = new Animated.Value(2);
   }
 
   componentDidMount() {
-    this.setTimer()
+    this.setTimer();
   }
 
   componentWillUnmount() {
-    clearInterval(this.timer)
+    clearInterval(this.timer);
   }
 
   onSeek(pos) {
-    this.props.onSeek(pos)
+    this.props.onSeek(pos);
     if (!this.state.seeking) {
-      this.setState({ seeking: true })
+      this.setState({ seeking: true });
     }
   }
 
   onSeekRelease(pos) {
-    this.props.onSeekRelease(pos)
-    this.setState({ seeking: false, seconds: 0 })
+    this.props.onSeekRelease(pos);
+    this.setState({ seeking: false, seconds: 0 });
   }
 
   setTimer() {
     this.timer = setInterval(() => {
       switch (true) {
         case this.state.seeking:
           // do nothing
-          break
+          break;
         case this.props.paused:
-          if (this.state.seconds > 0) this.setState({ seconds: 0 })
-          break
+          if (this.state.seconds > 0) this.setState({ seconds: 0 });
+          break;
         case this.state.hideControls:
-          break
+          break;
         case this.state.seconds > 3:
-          this.hideControls()
-          break
+          this.hideControls();
+          break;
         default:
-          this.setState({ seconds: this.state.seconds + 1 })
+          this.setState({ seconds: this.state.seconds + 1 });
       }
-    }, 1000)
+    }, 1000);
   }
 
   showControls() {
     this.setState({ hideControls: false }, () => {
-      this.progressbar.setValue(2)
+      this.progressbar.setValue(2);
       Animated.parallel([
         Animated.timing(this.animControls, { toValue: 1, duration: 200 }),
         Animated.timing(this.scale, { toValue: 1, duration: 200 })
-      ]).start()
-    })
+      ]).start();
+    });
   }
 
   hideControls() {
     Animated.parallel([
       Animated.timing(this.animControls, { toValue: 0, duration: 200 }),
       Animated.timing(this.scale, { toValue: 0.25, duration: 200 })
-    ]).start(() => this.setState({ hideControls: true, seconds: 0 }))
+    ]).start(() => this.setState({ hideControls: true, seconds: 0 }));
   }
 
   hiddenControls() {
-    Animated.timing(this.progressbar, { toValue: 0, duration: 200 }).start()
+    Animated.timing(this.progressbar, { toValue: 0, duration: 200 }).start();
     return (
       <Touchable style={styles.container} onPress={() => this.showControls()}>
-        <Animated.View style={[styles.container, { paddingBottom: this.progressbar }]}>
-          <ProgressBar theme={this.props.theme.progress} progress={this.props.progress} />
+        <Animated.View
+          style={[styles.container, { paddingBottom: this.progressbar }]}
+        >
+          <ProgressBar
+            theme={this.props.theme.progress}
+            progress={this.props.progress}
+          />
         </Animated.View>
       </Touchable>
-    )
+    );
   }
 
   loading() {
     return (
       <View style={styles.container}>
         <Loading theme={this.props.theme.loading} />
       </View>
-    )
+    );
   }
 
   displayedControls() {
@@ -128,21 +127,25 @@ class Controls extends Component {
       duration,
       theme,
       inlineOnly
-    } = this.props
+    } = this.props;
 
-    const { center, ...controlBar } = theme
+    const { center, ...controlBar } = theme;
 
     return (
       <Touchable onPress={() => this.hideControls()}>
-        <Animated.View style={[styles.container, { opacity: this.animControls }]}>
+        <Animated.View
+          style={[styles.container, { opacity: this.animControls }]}
+        >
           <TopBar
             title={title}
             logo={logo}
             more={more}
             onMorePress={() => onMorePress()}
             theme={{ title: theme.title, more: theme.more }}
           />
-          <Animated.View style={[styles.flex, { transform: [{ scale: this.scale }] }]}>
+          <Animated.View
+            style={[styles.flex, { transform: [{ scale: this.scale }] }]}
+          >
             <PlayButton
               onPress={() => this.props.togglePlay()}
               paused={paused}
@@ -167,15 +170,15 @@ class Controls extends Component {
           />
         </Animated.View>
       </Touchable>
-    )
+    );
   }
 
   render() {
-    if (this.props.loading) return this.loading()
+    if (this.props.loading) return this.loading();
     if (this.state.hideControls) {
-      return this.hiddenControls()
+      return this.hiddenControls();
     }
-    return this.displayedControls()
+    return this.displayedControls();
   }
 }
 
@@ -196,8 +199,7 @@ Controls.propTypes = {
   currentTime: PropTypes.number.isRequired,
   duration: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
-  logo: PropTypes.string.isRequired,
   theme: PropTypes.object.isRequired
-}
+};
 
-export { Controls }
+export { Controls };

components/PlayButton.js

@@ -1,9 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View, StyleSheet, TouchableOpacity } from 'react-native'
-import Icons from 'react-native-vector-icons/MaterialIcons'
+import React from "react";
+import PropTypes from "prop-types";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import Icons from "react-native-vector-icons/MaterialIcons";
 
-const backgroundColor = 'transparent'
+const backgroundColor = "transparent";
 
 const styles = StyleSheet.create({
   playButton: {
@@ -12,30 +12,28 @@ const styles = StyleSheet.create({
   playContainer: {
     flex: 1,
     backgroundColor,
-    alignItems: 'center',
-    justifyContent: 'center'
+    alignItems: "center",
+    justifyContent: "center"
   }
-})
+});
 
 const PlayButton = props => (
   <View style={styles.playContainer}>
-    <TouchableOpacity
-      onPress={() => props.onPress()}
-    >
+    <TouchableOpacity onPress={() => props.onPress()}>
       <Icons
         style={styles.playButton}
-        name={props.paused ? 'play-circle-outline' : 'pause-circle-outline'}
-        color={props.theme}
+        name={props.paused ? "play-circle-outline" : "pause-circle-outline"}
+        color="#ffffff"
         size={75}
       />
     </TouchableOpacity>
   </View>
-)
+);
 
 PlayButton.propTypes = {
   onPress: PropTypes.func.isRequired,
   paused: PropTypes.bool.isRequired,
   theme: PropTypes.string.isRequired
-}
+};
 
-export { PlayButton }
+export { PlayButton };

components/Time.js

@@ -1,46 +1,48 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { View, Text, StyleSheet } from 'react-native'
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { View, Text, StyleSheet } from "react-native";
 
-const backgroundColor = 'transparent'
+const backgroundColor = "transparent";
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
+    alignItems: "center",
     backgroundColor,
-    justifyContent: 'center',
+    justifyContent: "center",
     padding: 10,
     minWidth: 60
   }
-})
+});
 
 class Time extends Component {
   getTime(time) {
     // format the seconds saved into 00:00:00
-    const secs = time % 60
-    const s2 = (time - secs) / 60
-    const mins = s2 % 60
-    const hrs = (s2 - mins) / 60
-    const hours = this.addZeros(hrs) > 0 ? `${this.addZeros(hrs)}:` : ''
-    return `${hours}${this.addZeros(mins)}:${this.addZeros(secs)}`
+    const secs = time % 60;
+    const s2 = (time - secs) / 60;
+    const mins = s2 % 60;
+    const hrs = (s2 - mins) / 60;
+    const hours = this.addZeros(hrs) > 0 ? `${this.addZeros(hrs)}:` : "";
+    return `${hours}${this.addZeros(mins)}:${this.addZeros(secs)}`;
   }
 
   addZeros(time) {
-    return (time < 10) ? (`0${time}`) : time
+    return time < 10 ? `0${time}` : time;
   }
 
   render() {
     return (
       <View style={styles.container}>
-        <Text style={{ color: this.props.theme }}>{this.getTime(parseInt(this.props.time, 10))}</Text>
+        <Text style={{ color: "#ffffff" }}>
+          {this.getTime(parseInt(this.props.time, 10))}
+        </Text>
       </View>
-    )
+    );
   }
 }
 
 Time.propTypes = {
   time: PropTypes.number.isRequired,
   theme: PropTypes.string.isRequired
-}
+};
 
-export { Time }
+export { Time };