Add ability to display videos in item pages

src/coffee/controllers/item_page_controller.coffee

@@ -13,6 +13,7 @@ ItemGroupController  = require './item_group_controller'
 ItemPage             = require '../models/item_page'
 ItemSlug             = require '../models/item_slug'
 PageController       = require './page_controller'
+VideoController      = require './video_controller'
 {Duration}           = require '../constants'
 {Event}              = require '../constants'
 {Text}               = require '../constants'
@@ -68,10 +69,14 @@ module.exports = class ItemPageController extends PageController
         @$name                    = @$('h1.name')
         @$recipeContainer         = @$('.recipes .panel')
         @$recipesSection          = @$('.recipes')
+        @$recipesSectionTitle     = @$('.recipes h2')
         @$similarSection          = @$('.similar')
         @$titleImage              = @$('.titleImage img')
         @$usedAsToolToMakeSection = @$('.usedAsToolToMake')
         @$usedToMakeSection       = @$('.usedToMake')
+        @$videosContainer         = @$('.videos .panel')
+        @$videosSection           = @$('.videos')
+        @$videosSectionTitle      = @$('.videos h2')
         super
 
     refresh: ->
@@ -94,6 +99,7 @@ module.exports = class ItemPageController extends PageController
         @_refreshSimilarItems()
         @_refreshUsedAsToolToMake()
         @_refreshUsedToMake()
+        @_refreshVideos()
 
         super
 
@@ -130,6 +136,7 @@ module.exports = class ItemPageController extends PageController
         recipes = @model.findRecipes()
         if recipes?
             @$recipesSection.slideDown duration:Duration.normal
+            @$recipesSectionTitle.html if recipes.length is 1 then 'Recipe' else 'Recipes'
 
             for recipe in @model.findRecipes()
                 controller = @_recipeControllers[index]
@@ -179,6 +186,32 @@ module.exports = class ItemPageController extends PageController
         else
             @$usedToMakeSection.slideUp duration:Duration.normal
 
+    _refreshVideos: ->
+        @_videoControllers ?= []
+        index = 0
+
+        videos = @model?.item.videos or []
+        if videos? and videos.length > 0
+            @$videosSection.slideDown duration:Duration.normal
+            @$videosSectionTitle.html if videos.length is 1 then 'Video' else 'Videos'
+
+            for video in videos
+                controller = @_videoControllers[index]
+                if not controller?
+                    controller = new VideoController model:video
+                    @_videoControllers.push controller
+                    controller.render()
+                    @$videosContainer.append controller.$el
+                else
+                    controller.model = video
+                index++
+        else
+            @$videosSection.slideUp duration:Duration.normal
+
+        while @_videoControllers.length > index
+            controller = @_videoControllers.pop()
+            controller.$el.slideUp duration:Duration.normal, complete:-> controller.$el.remove()
+
     _resolveItemSlug: ->
         return if @model.item?
 

src/coffee/controllers/video_controller.coffee

@@ -0,0 +1,34 @@
+###
+Crafting Guide - video_controller.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+BaseController = require './base_controller'
+
+########################################################################################################################
+
+module.exports = class VideoController extends BaseController
+
+    constructor: (options={})->
+        if not options.model? then throw new Error 'options.model is required'
+        options.templateName = 'video'
+        super options
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @$iframe = @$('iframe')
+        @$caption  = @$('.caption p')
+        super
+
+    refresh: ->
+        @$caption.html @model.name
+        @$iframe.attr 'src', @_createYouTubeUrl()
+        super
+
+    # Private ######################################################################################
+
+    _createYouTubeUrl: ->
+        return "http://www.youtube.com/embed/#{@model.youTubeId}?modestbranding=1&autohide=1&showinfo=0"

src/jade/templates/item_page.jade

@@ -16,15 +16,20 @@
         h1.name
         .byline: p from <a></a>
 
-        .description.section
-            h2 Description
-            .panel.markdown
-
         .recipes.section
             h2 Recipes
             .panel
 
+        .description.section
+            h2 Description
+            .panel.markdown
+
+        .videos.section
+            h2 Videos
+            .panel
+
         .usedToMake: .view__item_group
+
         .usedAsToolToMake: .view__item_group
+
         .similar: .view__item_group
-        .plan

src/jade/templates/video.jade

@@ -0,0 +1,10 @@
+//-
+//- Crafting Guide - video.jade
+//-
+//- Copyright (c) 2015 by Redwood Labs
+//- All rights reserved.
+//-
+
+.view__video
+    iframe(width="365", height="273", src="", frameborder="0", allowfullscreen="true")
+    .caption: p

src/scss/templates/index.scss

@@ -23,3 +23,4 @@ All rights reserved.
 @import 'mod_page';
 @import 'mod_selector';
 @import 'stack';
+@import 'video';

src/scss/templates/item_page.scss

@@ -51,6 +51,14 @@ All rights reserved.
         .usedToMake {
             display: none;
         }
+
+        .videos {
+            display: none;
+
+            .panel {
+                text-align: center;
+            }
+        }
     }
 
     .view__item {

src/scss/templates/video.scss

@@ -0,0 +1,32 @@
+/*
+Crafting Guide - video.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__video {
+    position: relative;
+    display: inline-block;
+    margin-left: 1em;
+    vertical-align: top;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    iframe {
+        display: block;
+    }
+
+    .caption {
+        position: relative; width: 100%;
+        display: block;
+
+        p {
+            margin-top: 0.5em;
+            font-weight: bold;
+            text-align: center;
+        }
+    }
+}