Working on a web app with JS, Angular, and Meteor that integrates the Youtube API has been quite challenging. In one of my controllers, I initialized the youtube player object in the constructor following the necessary steps outlined by the Youtube API. However, I encountered an issue where referencing the supposedly global "player" object in a later function within the same controller seemed to be out of scope.
I spent several days trying to figure out why the "player" variable, which appeared global (due to the lack of var declaration), was not accessible within the controller. It wasn't until I stumbled upon the discouraged practice of using window.variableName that I managed to make the playPause function recognize the player object by using window.player = ... Does anyone have insights into why the player object isn't inherently global within its containing controller and functions?
As I continue to navigate through javascript scoping nuances and ECMA class style, any assistance would be greatly welcomed.
Snippet of my code:
import Ionic from 'ionic-scripts';
import { _ } from 'meteor/underscore';
import { Meteor } from 'meteor/meteor';
import { MeteorCameraUI } from 'meteor/okland:camera-ui';
import { Controller } from 'angular-ecmascript/module-helpers';
import { Chats, Messages } from '../../../lib/collections';
export default class ChatCtrl extends Controller {
constructor() {
super(...arguments);
this.currentVideoId = this.$stateParams.videoId;
this.chatId = this.$stateParams.chatId;
this.isIOS = Ionic.Platform.isWebView() && Ionic.Platform.isIOS();
this.isCordova = Meteor.isCordova;
chat = Chats.findOne(this.chatId);
if (chat.playerType == "Y") {
window.player = new YT.Player('video-placeholder', {
videoId: this.currentVideoId,
events: {
'onReady': this.initTimes.bind(this)
}
});
} else if (chat.playerType == "V") {
var options = {
id: this.currentVideoId,
width: 640,
loop: false
};
var player = new Vimeo.Player('vimeo-placeholder', options);
}
playPauseToggle() {
if (player.getPlayerState() == 2 || player.getPlayerState() == 5) {
player.playVideo();
this.playPauseValue = "Pause";
} else if (player.getPlayerState() == 1) {
player.pauseVideo();
this.playPauseValue = "Play";
}
}
ChatCtrl.$name = 'ChatCtrl';
ChatCtrl.$inject = ['$stateParams', '$timeout', '$ionicScrollDelegate', '$ionicPopup', '$log'];