{"id":15016003,"url":"https://github.com/rajasegar/ember-connection-aware-media","last_synced_at":"2025-10-20T09:13:56.764Z","repository":{"id":32880871,"uuid":"144450145","full_name":"rajasegar/ember-connection-aware-media","owner":"rajasegar","description":"An Ember Connection-Aware Media Component addon using the Network Information API.","archived":false,"fork":false,"pushed_at":"2022-12-10T16:24:10.000Z","size":2549,"stargazers_count":4,"open_issues_count":15,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T10:08:55.886Z","etag":null,"topics":["component","components","ember","emberjs","media","network"],"latest_commit_sha":null,"homepage":"https://rajasegar.github.io/connection-aware-ember/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rajasegar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-12T08:26:10.000Z","updated_at":"2021-08-11T05:07:56.000Z","dependencies_parsed_at":"2023-01-14T22:31:43.028Z","dependency_job_id":null,"html_url":"https://github.com/rajasegar/ember-connection-aware-media","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-connection-aware-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-connection-aware-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-connection-aware-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-connection-aware-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajasegar","download_url":"https://codeload.github.com/rajasegar/ember-connection-aware-media/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550634,"owners_count":21122933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","components","ember","emberjs","media","network"],"created_at":"2024-09-24T19:48:16.420Z","updated_at":"2025-10-20T09:13:56.670Z","avatar_url":"https://github.com/rajasegar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-connection-aware-media\n\n[![Build Status](https://travis-ci.org/rajasegar/ember-connection-aware-media.svg?branch=master)](https://travis-ci.org/rajasegar/ember-connection-aware-media) \n[![Coverage Status](https://coveralls.io/repos/github/rajasegar/ember-connection-aware-media/badge.svg?branch=master)](https://coveralls.io/github/rajasegar/ember-connection-aware-media?branch=master)\n[![npm version](http://img.shields.io/npm/v/ember-connection-aware-media.svg?style=flat)](https://npmjs.org/package/ember-connection-aware-media \"View this project on npm\")\n[![dependencies Status](https://david-dm.org/rajasegar/ember-connection-aware-media/status.svg)](https://david-dm.org/rajasegar/ember-connection-aware-media)\n[![devDependencies Status](https://david-dm.org/rajasegar/ember-connection-aware-media/dev-status.svg)](https://david-dm.org/rajasegar/ember-connection-aware-media?type=dev)\n[![EmberObserver](http://emberobserver.com/badges/ember-connection-aware-media.svg?branch=master)](http://emberobserver.com/addons/ember-connection-aware-media)\n\n\nThis addon gives you a component \"ca-media\" which is a network connection-aware component by \nmaking use of the latest Network Information API provided by the browser.\nAt present, Chrome is the only browser that supports this api.\n\nBased on the effective connection type, this component serves different media resources like below:\n\n- 2g =\u003e low resolution images\n- 3g =\u003e high resolution images\n- 4g =\u003e video\n- offline =\u003e Placeholder content\n\nThere is also a blog post [here](http://hangaroundtheweb.com/2018/08/creating-connection-aware-ember-media-components/) \ndefining how the component is created from scratch and how it works.\n\n## Demo\nPlease find the demo for this addon [here](https://rajasegar.github.io/connection-aware-ember/) which works only in Chrome.\n\n## Usage\n\nTo render the component in your templates,\n\n```hbs\n{{ca-media\n  highResImage=highResImage\n  lowResImage=lowResImage\n  oggVideo=oggVideo\n  webmVideo=webmVideo\n  alt=\"Tomster The Ember Mascot\"\n  autoUpdate=true\n}}\n```\n\nTo provide different media sources to the component either using a parent component, route or a controller.\n\n```js\nimport Controller from '@ember/controller';\n\nexport default Controller.extend({\n  lowResImage: 'https://raw.githubusercontent.com/rajasegar/connection-aware-ember/master/public/assets/img/Tomster-Logo-lowRes.png',\n  highResImage: 'https://raw.githubusercontent.com/rajasegar/connection-aware-ember/master/public/assets/img/Tomster-Logo.png',\n\n  oggVideo: 'http://download.blender.org/peach/trailer/trailer_400p.ogg',\n  webmVideo: 'http://dl3.webmfiles.org/big-buck-bunny_trailer.webm',\n\n});\n```\n## Installation\n\n* `ember install ember-connection-aware-media`\n\n## Running\n\n* `ember serve`\n* Visit your app at [http://localhost:4200](http://localhost:4200).\n\n## Running Tests\n\n* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)\n* `ember test`\n* `ember test --server`\n\n## Building\n\n* `ember build`\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n\n## Credits\n* [Max Böck](https://mxb.at/blog/connection-aware-components/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-connection-aware-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajasegar%2Fember-connection-aware-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-connection-aware-media/lists"}