AAO-React-Native 📽 Add Viking Movie to streaming media

Closes #2573

I'm very excited to present a very long running feature that @hawkrives and myself have worked on-and-off on for quite some time. It is a beautiful view both aesthetically and in its use of small, reusable components. @hawkrives even added some react hooks!

We aim to present the week's movies that will be showing in Viking Theater. The information we present contains:

title
genres
release date
rotten tomatoes, IMDB, and MPPA ratings
showing dates and times
plot
directors, writers, and cast
trailer, teaser, featurette, and clip links
and a link to the IMDB page

📸 Screenshots

~	~

We have a laundry list of things we still want to get done

[x] fix the flow issue
[ ] handle odd-shaped posters (namely landscape ones; currently I (hawken) think the dimensions? or ratio at least – are hardcoded)
[x] style for Android
[x] update the server to build out an array of "movies in the next 7 days", and handle that response here
[ ] handle "no movie posted yet this week"
[ ] handle "no movie will show this week"
[ ] handle all movie showing dates are past (also handle after-last-showing on last showing date)
[x] remove the Play button (currently it launches the first trailer, but you can also just tap the trailer, so… yeah. just going to remove it from here.)
[ ] handle multiple movies on one weekend (Hawken: I have an idea for a set of mini movie posters that would be horizontally scrollable across the area next to the big poster, where the play button now is)
[x] handle really long list of "tags" (see spider-verse for an example)
[ ] provide a fallback image for the trailer background if none exist

Mar 29 '19 23:03 drewvolz

So glad to finally have this PR'd! Thanks for the work on getting it back onto master, Drew!

Mar 30 '19 01:03 hawkrives

This PR modified important files but does not have any changes to the CHANGELOG.

modules/colors/index.js
source/lib/constants.js

New dependencies added: polished and react-async.

polished

Author: Brian Hough

Description: A lightweight toolset for writing styles in Javascript.

Homepage: https://polished.js.org/


Created	over 2 years ago
Last Updated	13 days ago
License	MIT
Maintainers	3
Releases	54
Direct Dependencies	`@babel/runtime`
Keywords	styled-components, polished, emotion, glamor, css-in-js, inline-styles, react, flow and typescript

README

A lightweight toolset for writing styles in JavaScript. ✨

npm install --save polished
# or if you're using yarn
yarn add polished

Want to write styles in JavaScript, but also want Sass-style helper functions and mixins? Need a consistent color palette throughout your app? ✨ polished is for you!

Make your app look great without stress
Cross framework compatible: No matter if you're using styled-components, emotion, jss, aphrodite, radium, or plain inline styles, as long as you're writing your styles in JavaScript you can use polished!
Switching from a pre-processor to styles in JS made easy

Docs

See the full documentation at polished.js.org!

Usage

✨ polished modules are meant to be used as stand-alone imports. You should avoid importing the entire library directly:

import { clearFix, animation } from 'polished' ~import * as polished from 'polished~ ~import polished from 'polished'~

When ✨ polished modules are imported properly, tree shaking in webpack and Rollup can be leveraged to reduce your bundle size.

Flow Type Definitions

✨ polished has first-class Flow support with zero configuration to assist you in finding type errors while using our modules.

Ignore ✨ polished source

Flow frequently updates and it is possible that the version you are running may cause you to run into errors coming from the polished package in your node_modules directory. You can add the following lines to your .flowconfig to ignore polished in those cases:

[ignore]
.*/node_modules/polished/.*

TypeScript Definitions

✨ polished has TypeScript definitions to allow the library to be used in any TypeScript project. You will need to set moduleResolution to node in your tsconfig.json in order to use ✨ polished with TypeScript.

Babel plugin

You can optionally also use babel-plugin-polished to compile the static function calls out and remove the (already tiny) runtime performance impact of using ✨ polished.

Object Spread Properties

In the documentation you will see examples using object spread properties. ({ ...other }) To enable this syntax in your project add the transform-object-rest-spread plugin (or the stage-3 preset to enable all stage three features) to your Babel configuration.

Why?

When writing styles in JavaScript, many people need Sass-style helper functions to be productive. ✨ polished brings them to you in a nice, lightweight package tailor-made for styles in JavaScript.

The main difference with Sass is that it's written in a functional style and all color functions are curried. This means you can compose them together into your own reusable helpers with a compose function of your choice:

import { compose } from 'ramda' // Replace with any compose() function of your choice
import { lighten, desaturate } from 'polished'

// Create tone() helper
const tone = compose(lighten(0.1), desaturate(0.1))

Why not `package-xyz`?

First of all, we didn't find another library that had everything we needed, and we don't care about installing a dozen packages separately.

Specifically most other packages that provide color functions do so in an object-oriented style, often with a fluent API that's very different from the Sass-style helpers. This means people that aren't very familiar with JavaScript might shy away from using them.

✨ polished was made as a standard library for everybody, no matter if they know JS inside out or not.

Compatibility

✨ polished is compatible with any library that accepts styles as JS objects. This includes, but is by far not limited to, styled-components, radium, aphrodite, glamor, glamorous, jss and many more!

No matter if you're using inline styles or CSS-in-JS, polished is for you.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

License

react-async

Author: Unknown

Description: React component for declarative promise resolution and data fetching

Homepage: https://react-async.dev/


Created	about 5 years ago
Last Updated	9 days ago
License	ISC
Maintainers	2
Releases	71
Direct Dependencies	`prop-types`
Keywords	react, async, promise, fetch and hook

This README is too long to show.

Big PR! We like to try and keep PRs under 400 lines, and this one was 1525 lines.

Generated by :no_entry_sign: dangerJS against d970f878062eb538d5f7c978ea690badab0c5404

Mar 30 '19 03:03 stodevx-bot

Fails

:no_entry_sign:
Could not read ./logs/build

{ "errno": -2, "syscall": "open", "code": "ENOENT", "path": "./logs/build" }

	Fails
:no_entry_sign:	Could not read `./logs/build` `{ "errno": -2, "syscall": "open", "code": "ENOENT", "path": "./logs/build" }`

iOS Build Failed

Last 150 lines

Generated by :no_entry_sign: dangerJS against d970f878062eb538d5f7c978ea690badab0c5404

Apr 13 '19 00:04 stodevx-bot

This looks awesome!

May 13 '19 20:05 hannesmcman

I've just checked off

update the server to build out an array of "movies in the next 7 days", and handle that response here

because I've just updated the sga-weekly-movies script to generate an "upcoming.json" file, which looks like this:

[
  {
    "movie": "https://stodevx.github.io/sga-weekly-movies/movies/2019-05-03%20Up/index.json",
    "first_showing": "2019-05-03",
    "last_showing": "2019-05-03"
  },
  {
    "movie": "https://stodevx.github.io/sga-weekly-movies/movies/2019-05-04%20Ratatouille/index.json",
    "first_showing": "2019-05-04",
    "last_showing": "2019-05-04"
  },
  {
    "movie": "https://stodevx.github.io/sga-weekly-movies/movies/2019-05-10%20The%20Lego%20Movie%202%3A%20The%20Second%20Part/index.json",
    "first_showing": "2019-05-10",
    "last_showing": "2019-05-11"
  },
  {
    "movie": "https://stodevx.github.io/sga-weekly-movies/movies/2019-05-18%20High%20School%20Musical%202/index.json",
    "first_showing": "2019-05-17",
    "last_showing": "2019-05-18"
  },
  {
    "movie": "https://stodevx.github.io/sga-weekly-movies/movies/2019-05-19%20High%20School%20Musical%203%3A%20Senior%20Year/index.json",
    "first_showing": "2019-05-19",
    "last_showing": "2019-05-20"
  }
]

Or, if there are no upcoming movies, like this:

[]

We can probably replace the lookup of next.json with upcoming.json, actually, which should also knock off "no movie will play this week", and I think we can merge together the "no movie yet posted" and "no movie will play" states, maybe.

Dec 21 '19 19:12 hawkrives

Anyone care if I merge master into this branch to refresh CI checks?

Also, is there anything outstanding that I can work on?

May 02 '20 18:05 rye

I’d love it if you could merge master into here. Hawken’s comment above needs some fleshing out but I like the sound of his logic.

May 02 '20 20:05 drewvolz

📽 Add Viking Movie to streaming media

polished

Docs

Usage

Flow Type Definitions

Ignore ✨ polished source

TypeScript Definitions

Babel plugin

Object Spread Properties

Why?

Why not package-xyz?

Compatibility

Contributors

Backers

Sponsors

License

react-async

Why not `package-xyz`?