{"id":15924403,"url":"https://github.com/rajasegar/connection-aware-ember","last_synced_at":"2026-01-21T14:08:50.632Z","repository":{"id":44122126,"uuid":"144364114","full_name":"rajasegar/connection-aware-ember","owner":"rajasegar","description":"Demo app for Connection-aware Ember Components using Network Information API","archived":false,"fork":false,"pushed_at":"2022-12-08T09:44:43.000Z","size":2050,"stargazers_count":2,"open_issues_count":19,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T08:53:41.319Z","etag":null,"topics":["components","ember","emberjs","netinfo","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":null,"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":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-11T07:15:05.000Z","updated_at":"2020-09-27T06:25:53.000Z","dependencies_parsed_at":"2023-01-25T06:01:01.964Z","dependency_job_id":null,"html_url":"https://github.com/rajasegar/connection-aware-ember","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rajasegar/connection-aware-ember","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fconnection-aware-ember","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fconnection-aware-ember/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fconnection-aware-ember/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fconnection-aware-ember/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajasegar","download_url":"https://codeload.github.com/rajasegar/connection-aware-ember/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fconnection-aware-ember/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28634790,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["components","ember","emberjs","netinfo","network"],"created_at":"2024-10-06T21:21:48.039Z","updated_at":"2026-01-21T14:08:50.615Z","avatar_url":"https://github.com/rajasegar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# connection-aware-media\n\nIn this repo, we have  Ember Components serving media content such as images and videos based on the network bandwidth of the users. For this, we will make use of the Network Information API provided by the browsers. Currently, the only browser that supports this api is Chrome, soon we are expecting that all the browsers will start supporting the network information api.\n\nThis component is purely based on an existing tutorial by Max Böck, a frontend web developer based in Vienna, Austria. Max has done the components in React, this is an Ember port of the same component.\n\nThe Ember component will render different elements based on the user's connection quality:\n\noffline: placeholder with alt text\n2g: low resolution image\n3g: high resolution image\n4g: video player\n\nThere is a [blog post](http://hangaroundtheweb.com/2018/08/creating-connection-aware-ember-media-components/) describing\nthe component creation for this repository.\n\n\n## Usage\nIn your templates, use the component as following:\n\n```hbs\n{{connection-aware-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 pass the property values, use an Ember controller or a parent component as:\n\n```js\nimport Controller from '@ember/controller';\n\nexport default Controller.extend({\n\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```\n\n## Prerequisites\n\nYou will need the following things properly installed on your computer.\n\n* [Git](https://git-scm.com/)\n* [Node.js](https://nodejs.org/) (with npm)\n* [Ember CLI](https://ember-cli.com/)\n* [Google Chrome](https://google.com/chrome/)\n\n## Installation\n\n* `git clone \u003crepository-url\u003e` this repository\n* `cd connection-aware`\n* `npm install`\n\n## Running / Development\n\n* `ember serve`\n* Visit your app at [http://localhost:4200](http://localhost:4200).\n* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).\n\n### Code Generators\n\nMake use of the many generators for code, try `ember help generate` for more details\n\n### Running Tests\n\n* `ember test`\n* `ember test --server`\n\n### Linting\n\n* `npm run lint:js`\n* `npm run lint:js -- --fix`\n\n### Building\n\n* `ember build` (development)\n* `ember build --environment production` (production)\n\n### Deploying\n\nSpecify what it takes to deploy your app.\n\n## Further Reading / Useful Links\n\n* [ember.js](https://emberjs.com/)\n* [ember-cli](https://ember-cli.com/)\n* Development Browser Extensions\n  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)\n  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fconnection-aware-ember","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajasegar%2Fconnection-aware-ember","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fconnection-aware-ember/lists"}