Add support for premium video tutorials

app/locale/en.coffee

@@ -387,6 +387,7 @@
     subscribe_button: "Subscribe Now"
     stripe_description: "Monthly Subscription"
     subscription_required_to_play: "You'll need a subscription to play this level."
+    unlock_help_vidoes: "Subscribe to unlock all video tutorials."
 
   choose_hero:
     choose_hero: "Choose Your Hero"

app/styles/game-menu/guide-view.sass

@@ -12,7 +12,7 @@
   img
     display: block
     margin: 0 auto
-    
+
   img + em
     display: block
     margin: 0 auto
@@ -21,7 +21,34 @@
   hr
     border-color: #5c5c5c
     width: 80%
-    
+
   table
     width: 80%
-    margin: 20px 10%
+    margin: 20px 10%
+
+  //- Purchase button
+
+  .purchase-button
+    position: absolute
+    left: 73px
+    width: 600px
+    height: 70px
+    top: 430px
+    font-size: 32px
+    line-height: 42px
+    border-style: solid
+    border-image: url(/images/level/code_toolbar_submit_button_active.png) 14 20 20 20 fill round
+    border-width: 14px 20px 20px 20px
+    color: darken(white, 5%)
+
+    span
+      pointer-events: none
+
+    &:hover
+      border-image: url(/images/level/code_toolbar_submit_button_zazz.png) 14 20 20 20 fill round
+      color: white
+
+    &:active
+      border-image: url(/images/level/code_toolbar_submit_button_zazz_pressed.png) 14 20 20 20 fill round
+      padding: 2px 0 0 2px
+      color: white

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

@@ -1,7 +1,11 @@
 if docs.length === 1
   if showVideo
     h3(id='help-video-heading', data-i18n="game_menu.guide_video_tutorial")
-    div(id="help-video-player")
+    if videoLocked
+      p(data-i18n="subscribe.unlock_help_videos") Subscribe to unlock all video tutorials.
+      button.start-subscription-button.btn.btn-lg.btn-success(data-i18n="subscribe.subscribe_title") Subscribe
+    else
+      div(id="help-video-player")
   h3(data-i18n="game_menu.guide_tips")
   div
     != docs[0].html

app/views/play/menu/GuideView.coffee

@@ -1,6 +1,7 @@
 CocoView = require 'views/core/CocoView'
 template = require 'templates/play/menu/guide-view'
 Article = require 'models/Article'
+SubscribeModal = require 'views/core/SubscribeModal'
 utils = require 'core/utils'
 
 # let's implement this once we have the docs database schema set up
@@ -12,14 +13,19 @@ module.exports = class LevelGuideView extends CocoView
   helpVideoHeight: '295'
   helpVideoWidth: '471'
 
+  events:
+    'click .start-subscription-button': "clickSubscribe"
+
   constructor: (options) ->
-    @levelID = options.level.get('slug')
+    @levelSlug = options.level.get('slug')
     @sessionID = options.session.get('_id')
+    @requiresSubscription = not me.isPremium()
     @helpVideos = options.level.get('helpVideos') ? []
     @trackedHelpVideoStart = @trackedHelpVideoFinish = false
-
     # A/B Testing video tutorial styles
     @helpVideosIndex = me.getVideoTutorialStylesIndex(@helpVideos.length)
+    @helpVideo = @helpVideos[@helpVideosIndex] if @helpVideos.length > 0
+    @videoLocked = not @helpVideo?.free and @requiresSubscription
 
     @firstOnly = options.firstOnly
     @docs = options?.docs ? options.level.get('documentation') ? {}
@@ -54,12 +60,13 @@ module.exports = class LevelGuideView extends CocoView
     c = super()
     c.docs = @docs
     c.showVideo = @helpVideos.length > 0
+    c.videoLocked = @videoLocked
     c
 
   afterRender: ->
     super()
     if @docs.length is 1 and @helpVideos.length > 0
-      @setupVideoPlayer()
+      @setupVideoPlayer() unless @videoLocked
     else
       # incredible hackiness. Getting bootstrap tabs to work shouldn't be this complex
       @$el.find('.nav-tabs li:first').addClass('active')
@@ -67,6 +74,11 @@ module.exports = class LevelGuideView extends CocoView
       @$el.find('.nav-tabs a').click(@clickTab)
     @playSound 'guide-open'
 
+  clickSubscribe: (e) =>
+    level = @levelSlug # Save ref to level slug
+    @openModalView new SubscribeModal()
+    window.tracker?.trackEvent 'Show subscription modal', category: 'Subscription', label: 'help video clicked', level: level
+
   clickTab: (e) =>
     @$el.find('li.active').removeClass('active')
     @playSound 'guide-tab-switch'
@@ -86,20 +98,19 @@ module.exports = class LevelGuideView extends CocoView
 
   onStartHelpVideo: ->
     unless @trackedHelpVideoStart
-      window.tracker?.trackEvent 'Start help video', level: @levelID, ls: @sessionID, style: @helpVideos[@helpVideosIndex].style
+      window.tracker?.trackEvent 'Start help video', level: @levelSlug, ls: @sessionID, style: @helpVideo?.style
       @trackedHelpVideoStart = true
 
   onFinishHelpVideo: ->
     unless @trackedHelpVideoFinish
-      window.tracker?.trackEvent 'Finish help video', level: @levelID, ls: @sessionID, style: @helpVideos[@helpVideosIndex].style
+      window.tracker?.trackEvent 'Finish help video', level: @levelSlug, ls: @sessionID, style: @helpVideo?.style
       @trackedHelpVideoFinish = true
 
   setupVideoPlayer: () ->
-    return unless @helpVideos?.length > 0
-    return unless url = @helpVideos[@helpVideosIndex]?.url
+    return unless @helpVideo
     # Always use HTTPS
     # TODO: Not specifying the protocol should work based on Vimeo docs, but breaks postMessage/eventing in practice.
-    url = "https:" + url.substr url.indexOf '/'
+    url = "https:" + @helpVideo.url.substr @helpVideo.url.indexOf '/'
     @setupVimeoVideoPlayer url
 
   setupVimeoVideoPlayer: (helpVideoURL) ->