Merge pull request #2202 from StoDevX/krlx

Add KRLX tab to Streaming Media

Author: hawkrives

images/news-images.js

@@ -1,8 +1,8 @@
 // @flow
 export const newsImages = {
-  ksto: require('./streaming/ksto/ksto-logo.png'),
-  mess: require('./news/mess.png'),
-  oleville: require('./news/oleville.png'),
-  politicole: require('./news/politicole.png'),
-  stolaf: require('./news/stolaf.png'),
+	ksto: require('./streaming/ksto.png'),
+	mess: require('./news/mess.png'),
+	oleville: require('./news/oleville.png'),
+	politicole: require('./news/politicole.png'),
+	stolaf: require('./news/stolaf.png'),
 }

images/streaming/krlx.png

@@ -8,7 +8,10 @@ import CalendarView, {EventDetail as EventDetailView} from './views/calendar'
 import {ContactsView, ContactsDetailView} from './views/contacts'
 import {DictionaryView, DictionaryDetailView} from './views/dictionary'
 import {HomeView, EditHomeView} from './views/home'
-import StreamingView, {KSTOScheduleView} from './views/streaming'
+import StreamingView, {
+	KSTOScheduleView,
+	KRLXScheduleView,
+} from './views/streaming'
 import {
 	MenusView,
 	CarletonBurtonMenuScreen,
@@ -83,6 +86,7 @@ export const AppNavigator = StackNavigator(
 		SISView: {screen: SISView},
 		StreamingView: {screen: StreamingView},
 		KSTOScheduleView: {screen: KSTOScheduleView},
+		KRLXScheduleView: {screen: KRLXScheduleView},
 		StudentOrgsDetailView: {screen: StudentOrgsDetailView},
 		StudentOrgsView: {screen: StudentOrgsView},
 		TransportationView: {screen: TransportationView},

images/streaming/ksto/ksto-logo.png renamed to images/streaming/ksto.png

@@ -1,19 +1,65 @@
 // @flow
 
+import * as React from 'react'
 import {TabNavigator} from '../components/tabbed-view'
+import {TabBarIcon} from '../components/tabbar-icon'
 
-import {KSTOView} from './radio'
+import {RadioControllerView} from './radio'
 // import WeeklyMovieView from './movie'
 import {WebcamsView} from './webcams'
 import {StreamListView} from './streams'
 
-export {KSTOScheduleView} from './radio'
+export {KSTOScheduleView, KRLXScheduleView} from './radio'
 
 export default TabNavigator(
 	{
 		StreamingView: {screen: StreamListView},
 		LiveWebcamsView: {screen: WebcamsView},
-		KSTORadioView: {screen: KSTOView},
+		KSTORadioView: {
+			screen: ({navigation}) => (
+				<RadioControllerView
+					image={require('../../../images/streaming/ksto.png')}
+					navigation={navigation}
+					playerUrl="https://www.stolaf.edu/multimedia/play/embed/ksto.html"
+					scheduleViewName="KSTOScheduleView"
+					source={{
+						useEmbeddedPlayer: true,
+						embeddedPlayerUrl:
+							'https://www.stolaf.edu/multimedia/play/embed/ksto.html',
+						streamSourceUrl: '',
+					}}
+					stationName="KSTO 93.1 FM"
+					stationNumber="+15077863602"
+					title="St. Olaf College Radio"
+				/>
+			),
+			navigationOptions: {
+				tabBarLabel: 'KSTO',
+				tabBarIcon: TabBarIcon('radio'),
+			},
+		},
+		KRLXRadioView: {
+			screen: ({navigation}) => (
+				<RadioControllerView
+					image={require('../../../images/streaming/krlx.png')}
+					navigation={navigation}
+					playerUrl="http://live.krlx.org"
+					scheduleViewName="KRLXScheduleView"
+					source={{
+						useEmbeddedPlayer: false,
+						embeddedPlayerUrl: 'http://live.krlx.org',
+						streamSourceUrl: 'http://radio.krlx.org/mp3/high_quality',
+					}}
+					stationName="88.1 KRLX-FM"
+					stationNumber="+15072224127"
+					title="Carleton College Radio"
+				/>
+			),
+			navigationOptions: {
+				tabBarLabel: 'KRLX',
+				tabBarIcon: TabBarIcon('microphone'),
+			},
+		},
 		// WeeklyMovieView: {screen: WeeklyMovieView},
 	},
 	{

source/navigation.js

@@ -12,7 +12,6 @@ import {
 } from 'react-native'
 import noop from 'lodash/noop'
 import * as c from '../../components/colors'
-import {TabBarIcon} from '../../components/tabbar-icon'
 import {callPhone} from '../../components/call-phone'
 import {Row} from '../../components/layout'
 import type {TopLevelViewPropsType} from '../../types'
@@ -21,11 +20,19 @@ import type {PlayState, HtmlAudioError, Viewport} from './types'
 import {ActionButton, ShowCalendarButton, CallButton} from './buttons'
 import {openUrl} from '../../components/open-url'
 
-const image = require('../../../../images/streaming/ksto/ksto-logo.png')
-const stationNumber = '+15077863602'
-const kstoLiveUrl = 'https://www.stolaf.edu/multimedia/play/embed/ksto.html'
-
-type Props = TopLevelViewPropsType
+type Props = TopLevelViewPropsType & {
+	image: number,
+	playerUrl: string,
+	stationNumber: string,
+	title: string,
+	scheduleViewName: string,
+	stationName: string,
+	source: {
+		useEmbeddedPlayer: boolean,
+		embeddedPlayerUrl: string,
+		streamSourceUrl: string,
+	},
+}
 
 type State = {
 	playState: PlayState,
@@ -34,12 +41,7 @@ type State = {
 	viewport: Viewport,
 }
 
-export class KSTOView extends React.PureComponent<Props, State> {
-	static navigationOptions = {
-		tabBarLabel: 'KSTO',
-		tabBarIcon: TabBarIcon('radio'),
-	}
-
+export class RadioControllerView extends React.PureComponent<Props, State> {
 	state = {
 		playState: 'paused',
 		streamError: null,
@@ -84,15 +86,15 @@ export class KSTOView extends React.PureComponent<Props, State> {
 	}
 
 	openSchedule = () => {
-		this.props.navigation.navigate('KSTOScheduleView')
+		this.props.navigation.navigate(this.props.scheduleViewName)
 	}
 
 	callStation = () => {
-		callPhone(stationNumber)
+		callPhone(this.props.stationNumber)
 	}
 
 	openStreamWebsite = () => {
-		openUrl(kstoLiveUrl)
+		openUrl(this.props.playerUrl)
 	}
 
 	renderPlayButton = (state: PlayState) => {
@@ -156,18 +158,18 @@ export class KSTOView extends React.PureComponent<Props, State> {
 				<View style={[styles.logoWrapper, sideways && landscape.logoWrapper]}>
 					<Image
 						resizeMode="contain"
-						source={image}
+						source={this.props.image}
 						style={[styles.logo, logoSize]}
 					/>
 				</View>
 
 				<View style={styles.container}>
 					<View style={styles.titleWrapper}>
 						<Text selectable={true} style={styles.heading}>
-							St. Olaf College Radio
+							{this.props.title}
 						</Text>
 						<Text selectable={true} style={styles.subHeading}>
-							KSTO 93.1 FM
+							{this.props.stationName}
 						</Text>
 
 						{error}
@@ -183,14 +185,17 @@ export class KSTOView extends React.PureComponent<Props, State> {
 
 					{Platform.OS !== 'android' ? (
 						<StreamPlayer
+							embeddedPlayerUrl={this.props.source.embeddedPlayerUrl}
 							onEnded={this.handleStreamEnd}
 							// onWaiting={this.handleStreamWait}
 							onError={this.handleStreamError}
 							// onStalled={this.handleStreamStall}
 							onPause={this.handleStreamPause}
 							onPlay={this.handleStreamPlay}
 							playState={this.state.playState}
+							streamSourceUrl={this.props.source.streamSourceUrl}
 							style={styles.webview}
+							useEmbeddedPlayer={this.props.source.useEmbeddedPlayer}
 						/>
 					) : null}
 				</View>

source/views/streaming/index.js

@@ -1,4 +1,4 @@
 // @flow
 
-export {KSTOView} from './controller'
-export {KSTOScheduleView} from './schedule'
+export {RadioControllerView} from './controller'
+export {KSTOScheduleView, KRLXScheduleView} from './schedule'