A/B Test video tutorial styles

app/locale/en.coffee

@@ -313,6 +313,8 @@
     save_load_tab: "Save/Load"
     options_tab: "Options"
     guide_tab: "Guide"
+    guide_video_tutorial: "Video Tutorial"
+    guide_tips: "Tips"
     multiplayer_tab: "Multiplayer"
     auth_tab: "Sign Up"
     inventory_caption: "Equip your hero"

app/models/User.coffee

@@ -139,6 +139,13 @@ module.exports = class User extends CocoModel
     else
       @subscribeCopyGroup = 'original'
     @subscribeCopyGroup
+    
+  getVideoTutorialStylesIndex: (numVideos=0)->
+    # A/B Testing video tutorial styles
+    # Not a constant number of videos available (e.g. could be 0, 1, 3, or 4 currently)
+    # TODO: Do we need to call identify() still?  trackEvent will have a style property.
+    return 0 unless numVideos > 0
+    return me.get('testGroupNumber') % numVideos
 
   isPremium: ->
     return false unless stripe = @get('stripe')

app/templates/play/menu/guide-view.jade

@@ -1,8 +1,8 @@
 if docs.length === 1
   if showVideo
-    h3 Video Tutorial
+    h3(id='help-video-heading', data-i18n="game_menu.guide_video_tutorial")
     div(id="help-video-player")
-  h3 Tips
+  h3(data-i18n="game_menu.guide_tips")
   div
     != docs[0].html
 else

app/views/play/menu/GuideView.coffee

@@ -17,6 +17,10 @@ module.exports = class LevelGuideView extends CocoView
     @levelID = options.level.get('slug')
     @helpVideos = LevelOptions[@levelID]?.helpVideos ? []
     @trackedHelpVideoStart = @trackedHelpVideoFinish = false
+    
+    # A/B Testing video tutorial styles
+    @helpVideosIndex = me.getVideoTutorialStylesIndex(@helpVideos.length)
+    
     @firstOnly = options.firstOnly
     @docs = options?.docs ? options.level.get('documentation') ? {}
     general = @docs.generalArticles or []
@@ -36,6 +40,16 @@ module.exports = class LevelGuideView extends CocoView
     doc.slug = _.string.slugify(doc.name) for doc in @docs
     super()
 
+  destroy: ->
+    if @vimeoListenerAttached
+      if window.addEventListener
+        window.removeEventListener('message', @onMessageReceived, false)
+      else
+        window.detachEvent('onmessage', @onMessageReceived, false)
+    if window.onYouTubeIframeAPIReady
+      window.onYouTubeIframeAPIReady = null
+    super()
+
   getRenderData: ->
     c = super()
     c.docs = @docs
@@ -70,12 +84,22 @@ module.exports = class LevelGuideView extends CocoView
     @volume ?= me.get('volume') ? 1.0
     createjs?.Sound?.setVolume(0.0)
 
+  onStartHelpVideo: ->
+    unless @trackedHelpVideoStart
+      window.tracker?.trackEvent 'Start help video', level: @levelID, style: @helpVideos[@helpVideosIndex].style
+      @trackedHelpVideoStart = true
+  
+  onFinishHelpVideo: ->
+    unless @trackedHelpVideoFinish
+      window.tracker?.trackEvent 'Finish help video', level: @levelID, style: @helpVideos[@helpVideosIndex].style
+      @trackedHelpVideoFinish = true
+
   setupVideoPlayer: () ->
     return unless @helpVideos.length > 0
     
     # TODO: run A/B test for different video styles
 
-    helpVideoURL = @helpVideos[0].URL
+    helpVideoURL = @helpVideos[@helpVideosIndex].URL
     if helpVideoURL.toLowerCase().indexOf('youtube') >= 0
       @setupYouTubeVideoPlayer helpVideoURL
     else if helpVideoURL.toLowerCase().indexOf('vimeo') >= 0
@@ -84,16 +108,24 @@ module.exports = class LevelGuideView extends CocoView
   setupYouTubeVideoPlayer: (helpVideoURL) ->
     # Setup YouTube iframe player
     # https://developers.google.com/youtube/iframe_api_reference
-    
+    # TODO: Can't load a YouTube video twice in one level
+    # TODO: window.onYouTubeIframeAPIReady is only called once
+
     onPlayerStateChange = (e) =>
       if e.data is 1
-        unless @trackedHelpVideoStart
+        @onStartHelpVideo()
-          window.tracker?.trackEvent 'Start help video', level: @levelID
-          @trackedHelpVideoStart = true
       else if e.data is 0
-        unless @trackedHelpVideoFinish
+        @onFinishHelpVideo()
-          window.tracker?.trackEvent 'Finish help video', level: @levelID
+
-          @trackedHelpVideoFinish = true
+    createPlayer = =>
+      new YT.Player 'help-video-player', {
+        height: @helpVideoHeight,
+        width: @helpVideoWidth,
+        videoId: videoID,
+        events: {
+          'onStateChange': onPlayerStateChange
+        }
+      }
 
     if matchVideoID = helpVideoURL.match /www\.youtube\.com\/embed\/(bHaeKdMPZrA)/
       videoID = matchVideoID[1]
@@ -104,19 +136,15 @@ module.exports = class LevelGuideView extends CocoView
     
     # Add method that will be called by YouTube iframe player when ready
     window.onYouTubeIframeAPIReady = =>
-      new YT.Player 'help-video-player', {
+      createPlayer()
-        height: @helpVideoHeight,
-        width: @helpVideoWidth,
-        videoId: videoID,
-        events: {
-          'onStateChange': onPlayerStateChange
-        }
-      }
     
-    # Add YouTube video player
+    # Add YouTube video player iframe script if necessary
-    tag = document.createElement('script')
+    if YT?.Player?
-    tag.src = "https://www.youtube.com/iframe_api"
+      createPlayer()
-    @$el.find('#help-video-player').before(tag)
+    else
+      tag = document.createElement('script')
+      tag.src = "https://www.youtube.com/iframe_api"
+      @$el.find('#help-video-heading').after(tag)
 
   setupVimeoVideoPlayer: (helpVideoURL) ->
     # Setup Vimeo player
@@ -131,7 +159,7 @@ module.exports = class LevelGuideView extends CocoView
     tag.frameborder = '0'
     @$el.find('#help-video-player').replaceWith(tag)
 
-    onMessageReceived = (e) =>
+    @onMessageReceived = (e) =>
       data = JSON.parse(e.data)
       if data.event is 'ready'
         # Vimeo player is ready, can now hook up other events
@@ -141,16 +169,13 @@ module.exports = class LevelGuideView extends CocoView
         player.contentWindow.postMessage JSON.stringify(method: 'addEventListener', value: 'play'), helpVideoURL
         player.contentWindow.postMessage JSON.stringify(method: 'addEventListener', value: 'finish'), helpVideoURL
       else if data.event is 'play'
-        unless @trackedHelpVideoStart
+        @onStartHelpVideo?()
-          window.tracker?.trackEvent 'Start help video', level: @levelID
-          @trackedHelpVideoStart = true
       else if data.event is 'finish'
-        unless @trackedHelpVideoFinish
+        @onFinishHelpVideo?()
-          window.tracker?.trackEvent 'Finish help video', level: @levelID
-          @trackedHelpVideoFinish = true
 
     # Listen for Vimeo player 'ready'
     if window.addEventListener
-      window.addEventListener('message', onMessageReceived, false)
+      window.addEventListener('message', @onMessageReceived, false)
     else
-      window.attachEvent('onmessage', onMessageReceived, false)
+      window.attachEvent('onmessage', @onMessageReceived, false)
+    @vimeoListenerAttached = true