Now pauses videos based on their unique youtube API id, also removes …

…API player data on unmount

packages/obonode/obojobo-chunks-youtube/youtube-player.js

@@ -10,7 +10,7 @@ const { uuid } = Common.util
 // They'll all get called once it loads
 const instanceCallbacksForYouTubeReady = []
 
-const loadedVideos = []
+const loadedVideos = {}
 
 // single global hangler that notifies all registered YouTubePlayer Components
 const onYouTubeIframeAPIReadyHandler = () => {
@@ -25,6 +25,10 @@ class YouTubePlayer extends React.Component {
 		this.player = null
 		this.loadVideo = this.loadVideo.bind(this)
 		this.onStateChange = this.onStateChange.bind(this)
+
+		this.state = {
+			youTubePlayerId: null
+		}
 	}
 
 	componentDidMount() {
@@ -36,6 +40,10 @@ class YouTubePlayer extends React.Component {
 		}
 	}
 
+	componentWillUnmount() {
+		delete loadedVideos[this.state.youTubePlayerId]
+	}
+
 	componentDidUpdate(prevProps) {
 		// Don't update this component if the video properties haven't changed
 		if (!this.shouldVideoUpdate(prevProps)) {
@@ -87,8 +95,9 @@ class YouTubePlayer extends React.Component {
 				onStateChange: this.onStateChange
 			}
 		})
+		this.setState({ youTubePlayerId: this.player.id })
 
-		loadedVideos.push(this.player)
+		loadedVideos[this.player.id] = this.player
 	}
 
 	shouldVideoUpdate(prevProps) {
@@ -109,11 +118,11 @@ class YouTubePlayer extends React.Component {
 	onStateChange(playerState) {
 		switch (playerState.data) {
 			case 1: // video playing
-				for (let i = 0; i < loadedVideos.length; i++) {
-					if (loadedVideos[i].getVideoUrl() !== playerState.target.getVideoUrl()) {
-						loadedVideos[i].pauseVideo()
+				Object.values(loadedVideos).forEach(video => {
+					if (video.id !== playerState.target.id) {
+						video.pauseVideo()
 					}
-				}
+				})
 				break
 		}
 	}

packages/obonode/obojobo-chunks-youtube/youtube-player.test.js

@@ -20,14 +20,15 @@ describe('YouTubePlayer', () => {
 		const tree = component.html()
 
 		expect(tree).toMatchSnapshot()
+
+		component.unmount()
 	})
 
 	test('YouTubePlayer updates video on content change', () => {
 		// Mock YouTube's Iframe Player object
 		window.YT = {
 			Player: jest.fn(() => ({
 				cueVideoById: jest.fn(),
-				getVideoUrl: jest.fn(),
 				pauseVideo: jest.fn()
 			}))
 		}
@@ -70,7 +71,6 @@ describe('YouTubePlayer', () => {
 			Player: jest.fn(() => ({
 				destroy: jest.fn(),
 				cueVideoById: jest.fn(),
-				getVideoUrl: jest.fn(),
 				pauseVideo: jest.fn()
 			}))
 		}
@@ -99,13 +99,13 @@ describe('YouTubePlayer', () => {
 		const player1 = {
 			destroy: jest.fn(),
 			cueVideoById: jest.fn(),
-			getVideoUrl: () => 'url-1',
+			id: 1,
 			pauseVideo: jest.fn()
 		}
 		const player2 = {
 			destroy: jest.fn(),
 			cueVideoById: jest.fn(),
-			getVideoUrl: () => 'url-2',
+			id: 2,
 			pauseVideo: jest.fn()
 		}