mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-27 17:45:40 -05:00
Add support for premium video tutorials
This commit is contained in:
parent
f78ea3d786
commit
58f8eb6688
4 changed files with 55 additions and 12 deletions
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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) ->
|
||||
|
|
Loading…
Reference in a new issue