๐Ÿ“ป React Native app for WLPN 105.5 FM Lumpen Radio Chicago https://habd.as/code/lumpen-radio/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

7.0 KiB

WLPN 105.5 FM Lumpen Radio Chicago

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

Lumpen Radio

About

Features

  • Streams any audio/mpeg stream listed in Constants.h
  • 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

Development

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.

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
โ”œโ”€โ”€ packages/skipr              # StreamingKit Reverse Proxy (AGPLv3)
โ”œโ”€โ”€ 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

Resources

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

Todo

Ideas

Known issues

Credits

Designed and developed by Josh Habdas without fee for Public Media Institute.

Splash screen and vectors by Jermiah Chiu.
App interface and icon by Josh Habdas.

Turntable loop video by Scott Schiller, BSD and used with permission.
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