leastbad/README.md

## README.md

      
    Raw
  

              README.md
            
          
    My goal with this was to wrap the terrible YouTube Embed API in a Stimulus controller that would allow me to access the underlying API while providing some convenience methods. One key outcome is that the controller emits youtube events which contain the current position in the video. This means that other code can now respond to the position you are at in the video.
<div data-controller="youtube" data-youtube-code-value="Lo_1pyQ7xvc">
  <button data-action="youtube#play">Play</button>
  <button data-action="youtube#pause">Pause</button>
  <button data-action="youtube#stop">Stop</button>
  <br>
  <div data-youtube-target="frame"></div>
</div>
The buttons and br are not neccessary, they just help show off the functionality.
When the controller connects, data-duration, data-time and data-state attributes will appear on the controller element. This is really handy if you're using this element to initiate a Reflex, as all of the attributes will be automatically sent to the server as part of the Reflex.
If you want to send the YouTube instance commands, you'll need a DOM element reference to the container div. I'm going to assume that you have that, and that it's available to you as $0.
$0.addEventListener('youtube', e => console.log(e.detail.time))
$0.youtube.player.mute()
The controller element emits one non-bubbling youtube event every second that the video is playing.
The controller element has a youtube accessor which is a reference to the internal state of the Stimulus controller.
I did not want to attempt to exhaustively replicate the functionality of every getter and setter offered by the YouTube API. If you want to mute() or unMute() you can access the underlying YouTube API via the player accessor.
You must specify a data-youtube-code-value attribute. data-youtube-width-value and data-youtube-height-value are optional.
Methods


play()
pause()
stop()
seek(seconds)

Getters


player // reference to wrapped YouTube API instance
time // current position in the video, as an integer representing seconds
duration // number of seconds total in the video
state // see states below
loaded // percentage of video that has been downloaded / buffered, expressed as a float from 0 to 1

If you want to convert loaded to a percentage, multiply it by 100 and parseInt().
States

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued)

  
## youtube_controller.js
import { Controller } from '@hotwired/stimulus'
import YouTubePlayer from 'youtube-player'

export default class extends Controller {
  static values = {
    code: String,
    width: Number,
    height: Number
  }
  static targets = ['frame']

  initialize () {
    this.width = this.widthValue || 640
    this.height = this.heightValue || 480
    this.element['youtube'] = this
  }

  connect () {
    if (!this.hasCodeValue) return
    const player = YouTubePlayer(this.frameTarget, {
      width: this.width,
      height: this.height,
      videoId: this.codeValue
    })
    player.on('ready', e => {
      this.element.setAttribute('data-duration', e.target.getDuration())
      this.youtube = e.target
      this.element.setAttribute('data-time', this.time)
      this.element.setAttribute('data-state', -1)
    })
    player.on('stateChange', e => {
      this.element.setAttribute('data-state', e.data)
      this.element.setAttribute('data-time', this.time)
      e.data === 1 ? this.startTimer() : clearInterval(this.timer)
    })
  }

  teardown () {
    this.player.destroy()
  }

  startTimer () {
    this.timer = setInterval(() => {
      this.element.setAttribute('data-time', this.time)
      this.element.dispatchEvent(
        new CustomEvent('youtube', {
          bubbles: false,
          cancelable: false,
          detail: { time: this.time }
        })
      )
    }, 1000)
  }

  play = () => this.player.playVideo()
  pause = () => this.player.pauseVideo()
  stop = () => this.player.stopVideo()
  seek = seconds => this.player.seekTo(seconds)

  get player () {
    return this.youtube
  }
  get time () {
    return parseInt(this.player.getCurrentTime())
  }
  get duration () {
    return this.player.getDuration()
  }
  get state () {
    return this.element.getAttribute('data-state')
  }
  get loaded () {
    return this.player.getVideoLoadedFraction()
  }
}
	import { Controller } from '@hotwired/stimulus'
	import YouTubePlayer from 'youtube-player'

	export default class extends Controller {
	static values = {
	code: String,
	width: Number,
	height: Number
	}
	static targets = ['frame']

	initialize () {
	this.width = this.widthValue \|\| 640
	this.height = this.heightValue \|\| 480
	this.element['youtube'] = this
	}

	connect () {
	if (!this.hasCodeValue) return
	const player = YouTubePlayer(this.frameTarget, {
	width: this.width,
	height: this.height,
	videoId: this.codeValue
	})
	player.on('ready', e => {
	this.element.setAttribute('data-duration', e.target.getDuration())
	this.youtube = e.target
	this.element.setAttribute('data-time', this.time)
	this.element.setAttribute('data-state', -1)
	})
	player.on('stateChange', e => {
	this.element.setAttribute('data-state', e.data)
	this.element.setAttribute('data-time', this.time)
	e.data === 1 ? this.startTimer() : clearInterval(this.timer)
	})
	}

	teardown () {
	this.player.destroy()
	}

	startTimer () {
	this.timer = setInterval(() => {
	this.element.setAttribute('data-time', this.time)
	this.element.dispatchEvent(
	new CustomEvent('youtube', {
	bubbles: false,
	cancelable: false,
	detail: { time: this.time }
	})
	)
	}, 1000)
	}

	play = () => this.player.playVideo()
	pause = () => this.player.pauseVideo()
	stop = () => this.player.stopVideo()
	seek = seconds => this.player.seekTo(seconds)

	get player () {
	return this.youtube
	}
	get time () {
	return parseInt(this.player.getCurrentTime())
	}
	get duration () {
	return this.player.getDuration()
	}
	get state () {
	return this.element.getAttribute('data-state')
	}
	get loaded () {
	return this.player.getVideoLoadedFraction()
	}
	}