Merge pull request #1610 from StoDevX/fix-ksto-logo-sizing

Fix KSTO logo sizing and add a landscape layout

Author: hawkrives

source/views/streaming/radio.js

@@ -22,34 +22,47 @@ import {TabBarIcon} from '../components/tabbar-icon'
 const kstoStream = 'https://cdn.stobcm.com/radio/ksto1.stream/master.m3u8'
 const image = require('../../../images/streaming/ksto/ksto-logo.png')
 
-export default class KSTOView extends React.PureComponent {
+type Viewport = {
+  width: number,
+  height: number,
+}
+
+type Props = {}
+
+type State = {
+  refreshing: boolean,
+  paused: boolean,
+  streamError: ?Object,
+  viewport: Viewport,
+}
+
+export default class KSTOView extends React.PureComponent<void, Props, State> {
   static navigationOptions = {
     tabBarLabel: 'KSTO',
     tabBarIcon: TabBarIcon('radio'),
   }
 
-  player: Video
-
-  state: {
-    refreshing: boolean,
-    paused: boolean,
-    streamError: ?Object,
-    metadata: Object[],
-  } = {
+  state = {
     refreshing: false,
     paused: true,
     streamError: null,
-    metadata: [],
+    viewport: Dimensions.get('window'),
   }
 
-  changeControl = () => {
-    this.setState(state => ({paused: !state.paused}))
+  componentWillMount() {
+    Dimensions.addEventListener('change', this.handleResizeEvent)
+  }
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener('change', this.handleResizeEvent)
   }
 
-  // callback when HLS ID3 tags change
-  onTimedMetadata = (data: any) => {
-    this.setState(() => ({metadata: data}))
-    console.log(data)
+  handleResizeEvent = (event: {window: {width: number}}) => {
+    this.setState(() => ({viewport: event.window}))
+  }
+
+  changeControl = () => {
+    this.setState(state => ({paused: !state.paused}))
   }
 
   // error from react-native-video
@@ -59,25 +72,44 @@ export default class KSTOView extends React.PureComponent {
   }
 
   render() {
+    const sideways = this.state.viewport.width > this.state.viewport.height
+
+    const logoWidth = Math.min(
+      this.state.viewport.width / 1.5,
+      this.state.viewport.height / 1.75,
+    )
+
+    const logoSize = {
+      width: logoWidth,
+      height: logoWidth,
+    }
+
     return (
-      <ScrollView>
+      <ScrollView
+        contentContainerStyle={[styles.root, sideways && landscape.root]}
+      >
+        <View style={[styles.logoWrapper, sideways && landscape.logoWrapper]}>
+          <Image
+            source={image}
+            style={[styles.logo, logoSize]}
+            resizeMode="contain"
+          />
+        </View>
+
         <View style={styles.container}>
-          <Logo />
+          <Title />
+
           <PlayPauseButton
             onPress={this.changeControl}
             paused={this.state.paused}
           />
-          {/*<Song />*/}
-          <Title />
 
           {!this.state.paused
             ? <Video
-                ref={ref => (this.player = ref)}
                 source={{uri: kstoStream}}
                 playInBackground={true}
                 playWhenInactive={true}
                 paused={this.state.paused}
-                onTimedMetadata={this.onTimedMetadata}
                 onError={this.onError}
               />
             : null}
@@ -87,37 +119,19 @@ export default class KSTOView extends React.PureComponent {
   }
 }
 
-const Logo = () => {
-  const viewport = Dimensions.get('window')
-  const style = {
-    maxWidth: viewport.width / 1.2,
-    maxHeight: viewport.height / 2.0,
-  }
-  return (
-    <View style={styles.wrapper}>
-      <Image source={image} style={style} />
-    </View>
-  )
-}
-
 const Title = () => {
-  const style = {fontSize: Dimensions.get('window').height / 30}
   return (
-    <View style={styles.container}>
-      <Text selectable={true} style={[styles.heading, style]}>
+    <View style={styles.titleWrapper}>
+      <Text selectable={true} style={styles.heading}>
         St. Olaf College Radio
       </Text>
-      <Text selectable={true} style={[styles.subHeading, style]}>
+      <Text selectable={true} style={styles.subHeading}>
         KSTO 93.1 FM
       </Text>
     </View>
   )
 }
 
-// const song = this.state.metadata.length
-//     ? <Metadata song={this.state.metadata.CHANGEME} />
-//     : null
-
 class PlayPauseButton extends React.PureComponent {
   props: {
     paused: boolean,
@@ -147,35 +161,57 @@ class PlayPauseButton extends React.PureComponent {
 }
 
 const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'space-between',
+    padding: 20,
+  },
   container: {
     alignItems: 'center',
+    flex: 1,
+    marginTop: 20,
+    marginBottom: 20,
+  },
+  logoWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
   },
-  wrapper: {
-    padding: 10,
+  logo: {
+    borderRadius: 6,
+    borderColor: c.kstoSecondaryDark,
+    borderWidth: 3,
+  },
+  titleWrapper: {
+    alignItems: 'center',
+    marginBottom: 20,
   },
   heading: {
-    marginTop: 10,
     color: c.kstoPrimaryDark,
-    fontWeight: '500',
+    fontWeight: '600',
+    fontSize: 28,
+    textAlign: 'center',
   },
   subHeading: {
     marginTop: 5,
-    marginBottom: 10,
     color: c.kstoPrimaryDark,
     fontWeight: '300',
+    fontSize: 28,
+    textAlign: 'center',
+  },
+})
+
+const landscape = StyleSheet.create({
+  root: {
+    flex: 1,
+    padding: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  logoWrapper: {
+    flex: 0,
   },
-  // nowPlaying: {
-  //   paddingTop: 10,
-  //   fontSize: Dimensions.get('window').height / 40,
-  //   fontWeight: '500',
-  //   color: c.red,
-  // },
-  // metadata: {
-  //   fontSize: Dimensions.get('window').height / 40,
-  //   paddingHorizontal: 13,
-  //   paddingTop: 5,
-  //   color: c.red,
-  // },
 })
 
 const buttonStyles = StyleSheet.create({