📽 Add Viking Movie to streaming media

flow-typed/npm/react-async_vx.x.x.js

@@ -0,0 +1,79 @@
+// flow-typed signature: 768314abdaaf874222831e76fc320814
+// flow-typed version: <<STUB>>/react-async_v5.1.2/flow_v0.92.1
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-async'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-async' {
+	import type {Node} from 'react'
+  import typeof * as React from 'react'
+
+	declare export type AsyncChildren<T> =
+		| ((state: AsyncState<T>) => Node)
+		| Node
+	declare export type PromiseFn<T> = (
+		props: Object,
+		controller: AbortController,
+	) => Promise<T>
+	declare export type DeferFn<T> = (
+		args: any[],
+		props: Object,
+		controller: AbortController,
+	) => Promise<T>
+
+	declare export interface AsyncOptions<T> {
+		promise?: Promise<T>;
+		promiseFn?: PromiseFn<T>;
+		deferFn?: DeferFn<T>;
+		watch?: any;
+		watchFn?: (props: Object, prevProps: Object) => any;
+		initialValue?: T;
+		onResolve?: (data: T) => void;
+		onReject?: (error: Error) => void;
+		// [prop: string]: any;
+	}
+
+	declare export interface AsyncProps<T> extends AsyncOptions<T> {
+		children?: AsyncChildren<T>;
+	}
+
+	declare export interface AsyncState<T> {
+		data?: T;
+		error?: Error;
+		initialValue?: T;
+		isLoading: boolean;
+		startedAt?: Date;
+		finishedAt?: Date;
+		counter: number;
+		cancel: () => void;
+		run: (...args: any[]) => Promise<T>;
+		reload: () => void;
+		setData: (data: T, callback?: () => void) => T;
+		setError: (error: Error, callback?: () => void) => Error;
+	}
+
+	declare export function useAsync<T>(
+		arg1: AsyncOptions<T> | PromiseFn<T>,
+		arg2?: AsyncOptions<T>,
+	): AsyncState<T>
+
+	declare export interface FetchOptions<T> extends AsyncOptions<T> {
+		defer?: boolean;
+		json?: boolean;
+	}
+
+	declare export function useFetch<T>(
+		input: window.RequestInfo,
+		init?: window.RequestInit,
+		options?: FetchOptions<T>,
+	): AsyncState<T>
+}

modules/colors/candy.js

@@ -0,0 +1,5 @@
+// @flow
+
+export const candyBlue = '#00ADD9'
+export const candyGray = '#E0DAD6'
+export const candyLime = '#A3D65C'

modules/colors/index.js

@@ -3,6 +3,7 @@
 export {firstReadable} from './util'
 
 export * from './colors'
+export * from './candy'
 export * from './gradients'
 
 export {

modules/viewport/index.js

@@ -34,3 +34,19 @@ export class Viewport extends React.PureComponent<Props, State> {
 		return this.props.render(this.state.viewport)
 	}
 }
+
+export function useViewport() {
+	let [window, setWindow] = React.useState(Dimensions.get('window'))
+
+	React.useEffect(() => {
+		function handleResizeEvent(event: {window: WindowDimensions}) {
+			setWindow(event.window)
+		}
+
+		Dimensions.addEventListener('change', handleResizeEvent)
+
+		return () => Dimensions.removeEventListener('change', handleResizeEvent)
+	})
+
+	return window
+}

package.json

@@ -112,6 +112,7 @@
     "moment-timezone": "0.5.28",
     "p-props": "4.0.0",
     "p-retry": "4.2.0",
+    "polished": "3.1.0",
     "query-string": "6.12.1",
     "querystring": "0.2.0",
     "react": "16.9.0",

source/lib/constants.js

@@ -2,3 +2,4 @@
 
 export const GH_BASE_URL = 'https://github.com/StoDevX/AAO-React-Native'
 export const GH_NEW_ISSUE_URL = `${GH_BASE_URL}/issues/new`
+export const WEEKLY_MOVIE_URL = 'https://stodevx.github.io/sga-weekly-movies'

source/views/streaming/index.js

@@ -2,7 +2,7 @@
 
 import {TabNavigator} from '../../../modules/navigation-tabs/tabbed-view'
 
-// import WeeklyMovieView from './movie'
+import {WeeklyMovieView} from './movie'
 import {WebcamsView} from './webcams'
 import {StreamListView} from './streams'
 import {KstoStationView} from './radio/station-ksto'
@@ -15,7 +15,7 @@ const StreamingMediaView = TabNavigator({
 	LiveWebcamsView: {screen: WebcamsView},
 	KSTORadioView: {screen: KstoStationView},
 	KRLXRadioView: {screen: KrlxStationView},
-	// WeeklyMovieView: {screen: WeeklyMovieView},
+	WeeklyMovieView: {screen: WeeklyMovieView},
 })
 
 StreamingMediaView.navigationOptions = {

source/views/streaming/movie/components/credits/credits-android.js

@@ -0,0 +1,64 @@
+// @flow
+
+import * as React from 'react'
+import {StyleSheet} from 'react-native'
+import {Card, Subheading, Paragraph} from 'react-native-paper'
+
+type Props = {
+	directors: string,
+	writers: string,
+	actors: string,
+}
+
+export const AndroidCredits = ({directors, writers, actors}: Props) => {
+	return (
+		<>
+			{writers === directors ? (
+				<Card style={styles.card}>
+					<Card.Title title="Credits" />
+					<Card.Content style={styles.content}>
+						<Subheading>Written and Directed By</Subheading>
+						<Paragraph>{directors}</Paragraph>
+					</Card.Content>
+
+					<Card.Content style={styles.content}>
+						<Subheading>Cast</Subheading>
+						<Paragraph>{actors}</Paragraph>
+					</Card.Content>
+				</Card>
+			) : (
+				<>
+					<Card style={styles.card}>
+						<Card.Title title="Credits" />
+						<Card.Content style={styles.content}>
+							<Subheading>Directed By</Subheading>
+							<Paragraph>{directors}</Paragraph>
+						</Card.Content>
+
+						<Card.Content style={styles.content}>
+							<Subheading>Written By</Subheading>
+							<Paragraph>{writers}</Paragraph>
+						</Card.Content>
+
+						<Card.Content style={styles.content}>
+							<Subheading>Cast</Subheading>
+							<Paragraph>{actors}</Paragraph>
+						</Card.Content>
+					</Card>
+				</>
+			)}
+		</>
+	)
+}
+
+const styles = StyleSheet.create({
+	card: {
+		elevation: 2,
+		marginBottom: 10,
+		marginHorizontal: 10,
+	},
+
+	content: {
+		marginBottom: 12,
+	},
+})

source/views/streaming/movie/components/credits/credits-ios.js

@@ -0,0 +1,43 @@
+// @flow
+
+import * as React from 'react'
+import {Heading, Text, Padding, SectionHeading} from '../parts'
+import {Column} from '@frogpond/layout'
+
+type Props = {
+	directors: string,
+	writers: string,
+	actors: string,
+}
+
+export const IosCredits = ({directors, writers, actors}: Props) => {
+	return (
+		<>
+			<SectionHeading>CREDITS</SectionHeading>
+			<Padding marginTop={4}>
+				{writers === directors ? (
+					<Column marginBottom={16}>
+						<Heading>Written and Directed By</Heading>
+						<Text>{directors}</Text>
+					</Column>
+				) : (
+					<React.Fragment>
+						<Column marginBottom={16}>
+							<Heading>Directed By</Heading>
+							<Text>{directors}</Text>
+						</Column>
+						<Column marginBottom={16}>
+							<Heading>Written By</Heading>
+							<Text>{writers}</Text>
+						</Column>
+					</React.Fragment>
+				)}
+
+				<Column>
+					<Heading>Cast</Heading>
+					<Text>{actors}</Text>
+				</Column>
+			</Padding>
+		</>
+	)
+}

source/views/streaming/movie/components/credits/index.js

@@ -0,0 +1,7 @@
+// @flow
+
+import {Platform} from 'react-native'
+import {IosCredits} from './credits-ios'
+import {AndroidCredits} from './credits-android'
+
+export const Credits = Platform.OS === 'ios' ? IosCredits : AndroidCredits

source/views/streaming/movie/components/genres.js

@@ -0,0 +1,18 @@
+// @flow
+
+import * as React from 'react'
+import {Pill} from './pill'
+import * as c from '@frogpond/colors'
+import glamorous from 'glamorous-native'
+
+export function Genres({genres}: {genres: Array<string>}) {
+	return (
+		<glamorous.ScrollView horizontal={true} overflow="hidden">
+			{genres.map((genre) => (
+				<Pill key={genre} bgColor={c.candyGray} marginRight={4}>
+					{genre.toLowerCase()}
+				</Pill>
+			))}
+		</glamorous.ScrollView>
+	)
+}