npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-youtube

v0.9.7

Published

A simple Ember.js component to play and control single YouTube videos using the iframe API.

Downloads

742

Readme

ember-youtube

An Ember.js component to play and control YouTube videos using the iframe API. Pass it a YouTube video ID and you're good to go! Every day this component is being used on Radio4000.

You can see a demonstration at ember-youtube.surge.sh.

Features

  • Full support for all YouTube player events (and errors)
  • Custom (external) controls (make your own buttons)
  • Custom progress bar in full sync with the YouTube player
  • Extra: custom time properties (for instance "4:31 / 7:58") formatted with Moment.js

TravisCI Build Status

Quick start

Inside your Ember CLI project run:

ember install ember-youtube

Use the component like this:

{{ember-youtube ytid="fZ7MhTRmJ60"}}

Here's another example with all options. Only ytid is required.

{{ember-youtube
	ytid="fZ7MhTRmJ60"
	volume=100
	playerVars=customPlayerVars
	showDebug=false
	showControls=false
	showProgress=false
	lazyload=false
	delegate=this
	delegate-as="emberYoutube"
	playing=(action "ytPlaying")
	paused=(action "ytPaused")
	ended=(action "ytEnded")
	buffering=(action "ytBuffering")
}}

YouTube player options

The YouTube API allows you to define an object of options called playerVars. With ember-youtube, you can optionally set this object on the component:

// controller.js
myPlayerVars: {
  autoplay: 1,
  showinfo: 0,
  // Setting an origin can remove a YouTube 'postMessage' API warning in the console.
  // Note, this does not have any effect on localhost.
  origin: 'https://www.example.com'
}
{{ember-youtube ytid="fZ7MhTRmJ60" playerVars=myPlayerVars}}

External controls

If you want your own buttons to control the player there are two steps.

  1. Make the ember-youtube component available to the outside, which normally means your controller. You do this with the delegate and delegate-as properties of ember-youtube. They expose the component and give you a target for your button's actions. Like this:
{{ember-youtube ytid=youTubeId delegate=controller delegate-as="emberYoutube"}}
  1. Specify a target on your actions. Now, and because we used delegate and delegate-as, you'll have a emberYoutube property on your controller. This is where we'll target our actions. It allows you to do this in the template where you include the player:
{{ember-youtube ytid="fZ7MhTRmJ60" delegate=this delegate-as="emberYoutube"}}
<button {{action "togglePlay" target=emberYoutube}}>
	{{#if emberYoutube.isPlaying}}Pause{{else}}Play{{/if}}
</button>
<button {{action "toggleVolume" target="emberYoutube"}}>
	{{#if emberYoutube.isMuted}}Unmute{{else}}Mute{{/if}}
</button>

You could also do this:

{{ember-youtube ytid="fZ7MhTRmJ60" delegate=this delegate-as="emberYoutube"}}
<button {{action "play" target=emberYoutube}}>Play</button>
<button {{action "pause" target=emberYoutube}}>Pause</button>
<button {{action "mute" target=emberYoutube}}>Mute</button>
<button {{action "unMute" target=emberYoutube}}>Unmute</button>

Seeking

Here's an example of seeking to a certain timestamp in a video. It accepts a number of seconds.

<button {{action "seekTo" 90 target=emberYoutube}}>Seek to 01:30</button>
{{ember-youtube ytid="fZ7MhTRmJ60" delegate=this delegate-as="emberYoutube"}}

Events

The ember-youtube component send four different actions: playing, paused, ended and buffering. You should map them to your own actions like this:

{{ember-youtube ytid="fZ7MhTRmJ60"
	playing="ytPlaying"
	paused="ytPaused"
	ended="ytEnded"
	buffering="ytBuffering"}}
actions: {
  ytPlaying(event) {},
  ytPaused(event) {},
  ytEnded(event) {
    // here you could load another video by changing the youTubeId
  },
  ytBuffering(event) {}
}

Lazy load

Even if you don't supply an ytid to the ember-youtube component, it will make sure the iframe player is created as soon as possible. But if you set lazyload=true, it will wait for an ytid. This will, in some cases, improve the initial render performance. Example:

{{ember-youtube lazyload=true}}

Custom timestamps

Let's write a component with two custom formatted timestamps such as "13:37". First make sure moment and moment-duration-format are installed. Then create a new component with the following template:

{{ember-youtube ytid=youTubeId delegate=this delegate-as="emberYoutube"}}

// custom timestamp
<p class="EmberYoutube-time">
	{{currentTimeFormatted}}/{{durationFormatted}}
</p>

And here's the JavaScript part of the component:

export default Ember.Component.extend({
	currentTimeFormat: 'mm:ss',
	durationFormat: 'mm:ss',

	// returns a momentJS formated date based on "currentTimeFormat" property
	currentTimeFormatted: computed('emberYoutube.currentTime', 'currentTimeFormat', function () {
		let time = this.get('emberYoutube.currentTime');
		let format = this.get('currentTimeFormat');
		if (!time || !format) {
			return null;
		}
		let duration = moment.duration(time, 'seconds');
		return duration.format(format);
	}),

	// returns a momentJS formated date based on "durationFormat" property
	durationFormatted: computed('emberYoutube.duration', 'durationFormat', function () {
		let duration = this.get('emberYoutube.duration');
		let format = this.get('durationFormat');
		if (!duration || !format) {
			return null;
		}
		let time = moment.duration(duration, 'seconds');
		return time.format(format);
	})
});

Autoplay on iOS

On iOS autoplay of videos is disabled by Apple to save your precious data. I haven't been able to circumvent this. The user needs to tap the video itself before we can call the player's play/load methods. If anyone has a workaround, let me know.

Development

  • git clone this repository
  • yarn
  • ember server
  • Visit your app at http://localhost:4200.

Linting

  • npm run lint:js
  • npm run lint:js -- --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • npm test – Runs ember try:each to test your addon against multiple Ember versions

Please file an issue if you have any feedback or would like to contribute.

Thanks to https://github.com/oskarrough/ember-youtube/graphs/contributors.

This project is licensed under the MIT License.