πŸ“» React Native iOS app for WLPN-LP 105.5 Chicago
Objective-C Shell JavaScript Other
Pull request Compare This branch is 13 commits behind master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Pods/StreamingKit/StreamingKit/StreamingKit
WLPN.xcodeproj
WLPN.xcworkspace
WLPNTests
android
iOS
src
.eslintrc
.flowconfig
.gitignore
.watchmanconfig
LICENSE
Podfile
Podfile.lock
README.md
npm-shrinkwrap.json
package.json
photo-original.jpg
screenshot.png
webpack.config.js

README.md

WLPN 105.5 FM Lumpen Radio Chicago

Stack Share

Never listen to a radio commercial again. The free Lumpen Radio app is here!

WLPN neon artwork

Features

  • Streams WLPN-LP 105.5 FM Lumpen Radio Chicago
  • Background audio playback and lock screen integration
  • Gorgeous video loop with AirPlay support
  • Intelligent handling of common audio interruptions
  • Detailed connection status and play state messaging
  • Translations for English, Spanish, Chinese, Korean and German
  • Remote control via Bluetooth and compatible headset
  • Supports iPad and iPhone with iOS 8+

Usage

  • Tapping radio button starts and stops the audio
  • Long-pressing the radio button restarts the audio
  • If the app crashes for any reason please close and reopen it

Getting started

Looking to build your own React Native project with ES6/7? Check out my React Native Starter Kit. Otherwise proceed enthusiastically.

  1. Clone this project.
  2. Install dependencies.

    npm install
    pod install
  3. Run npm start to start the Webpack watcher, Webpack Dev Server and the React Packager in a single shot.

    Note: The Webpack watcher builds the index.[platform].js file expected by React Native.

  4. Open WLPN.xcworkspace in XCode and run the project.

Bundling for distribution

  1. Execute npm run bundle to generate the offline JS bundle.
  2. For iOS, update AppDelegate.m to load from pre-bundled file on disk.
  3. Test the application, create an archive and submit to the store.

Learn more about Submitting to App Store.

Digging in

To learn more about React Native and how this app is built check out the slides originating from my talk on 30 Jun 2015. There's also a free Webcast on app construction given for O'Reilly Media on 27 Aug 2015.

File Structure

β”œβ”€β”€ android                     # Source code for Android
β”œβ”€β”€ iOS                         # Source code for iOS
β”‚   β”œβ”€β”€ Classes                 # Objective-C, Swift classes
β”‚   β”‚   β”œβ”€β”€ AppDelegate         # Application initialization and React Native config
β”‚   β”‚   β”œβ”€β”€ AudioManager        # Lib to access platform APIs and bridge to JS
β”‚   β”‚   └── RootViewController  # RCTRootViewController override to manage Remote Control events
β”‚   β”œβ”€β”€ Images.xcassets         # Launch screens and native image assets
β”‚   β”œβ”€β”€ Resources               # Other native resources
β”‚   β”œβ”€β”€ Constants.h             # Native globals
β”‚   β”œβ”€β”€ Info.plist              # Project configuration
β”‚   β”œβ”€β”€ main.jsbundle           # React Native placeholder file
β”‚   └── main.m                  # Application entry point
β”œβ”€β”€ src                         # Source code
β”‚   β”œβ”€β”€ assets                  # Static resources
β”‚   β”‚   └── videos              # Video assets
β”‚   β”œβ”€β”€ components              # React Native Components
β”‚   β”œβ”€β”€ lib                     # JS libraries
β”‚   β”œβ”€β”€ stores                  # JS persistence with Flux
β”‚   β”œβ”€β”€ actions.es6             # Flux actions
β”‚   β”œβ”€β”€ main.es6                # JS application entry point
β”‚   └── styles.es6              # React Native Style Rules
β”œβ”€β”€ .eslintrc                   # JS linter configuration
β”œβ”€β”€ .flowconfig                 # Facebook flow config file
β”œβ”€β”€ .gitignore                  # VCS blacklist
β”œβ”€β”€ Podfile                     # CocoaPods dependency specs
β”œβ”€β”€ Podfile.lock                # Native dependency lock file
β”œβ”€β”€ WLPN-Bridging-Header.h      # Objective-C, Swift bridge support file
β”œβ”€β”€ ignored-modules.js          # RegExp containing modules ignored by watcher
β”œβ”€β”€ npm-shrinkwrap.js           # JS dependency lock file
β”œβ”€β”€ package.json                # NPM dependency specs
β”œβ”€β”€ webpack-watch.js            # Filesystem watcher for JS
└── webpack-config.js           # WebPack configuration

Todo

  • Add background playback support
  • Show progress for initial connection
  • Indicate progress for long-running ops
  • Allow audio disruption for calls, etc.
  • Automatically reconnect if disconnected
  • Icon long-press restarts stream
  • Support Control Center / Remote Control events (thanks to Wayne Wright for the suggestion)
  • Integrate push notifications

Ideas

  • Long-pauses restart stream
  • Add now playing metadata (if available)
  • Provide on-air/off-air indication

Known issues

  • Background video delays device wake then turns black.
  • Audio stream does not automatically restart after some device interruptions (e.g. incoming call sent to voice mail)
  • Audio buffer out after 20 seconds of interrupted call time followed by 20 seconds of play
  • Play button does not function when disconnected from the Internet
  • App appears to buffer indefinitely if playing and Internet connection restarted
  • Launch screen skews on iPad

Credits

Developed for Public Media Institute by Josh Habdas.

Artwork by Jermiah Chiu. App interface and icon by Josh Habdas.

Turntable loop video by Scott Schiller, BSD.

Inspired by open source work by Steffen TrΓΆster.

Many thanks to Public Media Institute, Lumpen Radio and all the wonderful beta testers for helping make this happen. You are beautiful.

  • Ed Marszewski
  • Logan Bay
  • Eric Olson
  • Wayne Wright
  • Elizabeth Rossman
  • Joseph Alfallah
  • Harrison Jones
  • Nick Hausman