ember-connection-aware-media
An Ember Connection-Aware Media Component addon using the Network Information API.
Last updated 3 months ago by rajasegar .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-connection-aware-media 
SYNC missed versions from official npm registry.

ember-connection-aware-media

Build Status Coverage Status npm version dependencies Status devDependencies Status EmberObserver

This addon gives you a component "ca-media" which is a network connection-aware component by making use of the latest Network Information API provided by the browser. At present, Chrome is the only browser that supports this api.

Based on the effective connection type, this component serves different media resources like below:

  • 2g => low resolution images
  • 3g => high resolution images
  • 4g => video
  • offline => Placeholder content

There is also a blog post here defining how the component is created from scratch and how it works.

Demo

Please find the demo for this addon here which works only in Chrome.

Usage

To render the component in your templates,

{{ca-media
  highResImage=highResImage
  lowResImage=lowResImage
  oggVideo=oggVideo
  webmVideo=webmVideo
  alt="Tomster The Ember Mascot"
  autoUpdate=true
}}

To provide different media sources to the component either using a parent component, route or a controller.

import Controller from '@ember/controller';

export default Controller.extend({
  lowResImage: 'https://raw.githubusercontent.com/rajasegar/connection-aware-ember/master/public/assets/img/Tomster-Logo-lowRes.png',
  highResImage: 'https://raw.githubusercontent.com/rajasegar/connection-aware-ember/master/public/assets/img/Tomster-Logo.png',

  oggVideo: 'http://download.blender.org/peach/trailer/trailer_400p.ogg',
  webmVideo: 'http://dl3.webmfiles.org/big-buck-bunny_trailer.webm',

});

Installation

  • ember install ember-connection-aware-media

Running

Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit https://ember-cli.com/.

Credits

Current Tags

  • 1.0.9                                ...           latest (3 months ago)

7 Versions

  • 1.0.9                                ...           3 months ago
  • 1.0.8                                ...           3 months ago
  • 1.0.6                                ...           a year ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |