From c0a0e84f006eeff6eb44ed582e628a6d845dd7b8 Mon Sep 17 00:00:00 2001
From: Ramy Mostafa <ramy.mostafa@gmail.com>
Date: Sat, 18 Jan 2014 13:18:22 +0200
Subject: [PATCH] Ability to embed Vimeo video #45 (cherry picked from commit
 128e2e5738535c09a48d46f8708511c8c163e530)

---
 app/assets/javascripts/admin.js.coffee   |  8 ++++++--
 app/assets/javascripts/validate.js       |  1 -
 app/views/admin/campaigns/_form.html.erb |  8 +++++---
 app/views/theme/views/campaign.html.erb  | 26 +++++++++++++++++++-----
 4 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/admin.js.coffee b/app/assets/javascripts/admin.js.coffee
index 7017abdc..80f34f07 100644
--- a/app/assets/javascripts/admin.js.coffee
+++ b/app/assets/javascripts/admin.js.coffee
@@ -41,8 +41,12 @@ Crowdhoster.admin =
       $('.include_comments_input').slideToggle()
 
     $('input[name="campaign[media_type]"]').on "change", ->
-      $('#video-options').slideToggle()
-      $('#image-options').slideToggle()
+      if $('input[name="campaign[media_type]"]:checked').val() == "image"
+        $('#video-options').slideUp()
+        $('#image-options').slideDown()
+      else
+        $('#video-options').slideDown()
+        $('#image-options').slideUp()
 
     $('input#campaign_payment_type_any').on "change", ->
       $('#preset-amount').slideUp()
diff --git a/app/assets/javascripts/validate.js b/app/assets/javascripts/validate.js
index 99ea8c88..dd50009a 100644
--- a/app/assets/javascripts/validate.js
+++ b/app/assets/javascripts/validate.js
@@ -90,7 +90,6 @@ $( document ).ready(function() {
       "reward[][delivery_date]": { required: true },
       "reward[][number]": { number: true },
       "campaign[contributor_reference]": { required: true },
-      "campaign[video_embed_id]": { minlength: 11 , maxlength: 11},
       "campaign[primary_call_to_action_button]": { required: true },
       "campaign[secondary_call_to_action_button]": { required: true },
       "campaign[comments_shortname]": { required: true },
diff --git a/app/views/admin/campaigns/_form.html.erb b/app/views/admin/campaigns/_form.html.erb
index e46517a4..dae008ae 100644
--- a/app/views/admin/campaigns/_form.html.erb
+++ b/app/views/admin/campaigns/_form.html.erb
@@ -172,12 +172,14 @@
     <div class="field clearfix">
       <p class="explanation">We STRONGLY recommend including a video with your project. Just paste the youtube video id (it's the 11 character code that comes at the very end of the youtube url). You can also specify a placeholder image to show over top of the video in case you don't like your video's thumbnail.  Alternatively, you can choose to simply upload an image to show instead of a video.</p>
 
-        <label class="inline"><input id="campaign_media_type_video" name="campaign[media_type]" value="video" type="radio" <%= @campaign.media_type == 'video' ? "checked" : "" %>>Use Video</label>
-
+        <label class="inline"><input id="campaign_media_type_video" name="campaign[media_type]" value="video" type="radio" <%= @campaign.media_type == 'video' ? "checked" : "" %>>Use Youtube</label>
+        <label class="inline ml-20"><input id="campaign_media_type_vimeo" name="campaign[media_type]" value="vimeo" type="radio" <%= @campaign.media_type == 'vimeo' ? "checked" : "" %>>Use Vimeo</label>
         <label class="inline ml-20"><input id="campaign_media_type_image" name="campaign[media_type]" value="image" type="radio" <%= @campaign.media_type == 'image' ? "checked" : "" %>>Use Image</label>
 
+
+
       <div id="video-options" style="<%= @campaign.media_type == 'video' ? "" : "display:none" %>">
-        <label>Youtube Video ID</label>
+        <label>Video ID</label>
         <%= f.text_field :video_embed_id %>
         <label>Video Placeholder</label>
         <% if @campaign.video_placeholder.file? %>
diff --git a/app/views/theme/views/campaign.html.erb b/app/views/theme/views/campaign.html.erb
index 326dacd5..b3d95a36 100644
--- a/app/views/theme/views/campaign.html.erb
+++ b/app/views/theme/views/campaign.html.erb
@@ -32,11 +32,27 @@
         </div>
 
       <% else %>
-
-        <div id="image">
-          <%= image_tag @campaign.main_image.url(:main), alt: "project_image" %>
-        </div>
-
+		<% if @campaign.media_type == 'vimeo' %>
+                
+            <div id="video">
+            	<% if @campaign.video_placeholder.file? %>
+                	<div id="video_image">
+                    	<%= image_tag @campaign.video_placeholder.url(:main), alt: "video_place_holder" %>
+                    </div>
+                    <% if !@campaign.video_embed_id.blank? %>
+                    	<iframe src="//player.vimeo.com/video/<%= @campaign.video_embed_id %>?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=05597a&amp;autoplay=0" width="512" height="385" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+                    <% end %>
+                    <% else %>
+                    	<% if !@campaign.video_embed_id.blank? %>
+                        	<iframe src="//player.vimeo.com/video/<%= @campaign.video_embed_id %>?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=05597a&amp;autoplay=0" width="512" height="385" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+                        <% end %>
+                    <% end %>
+                </div>
+        <% else %>
+        	<div id="image">
+            	<%= image_tag @campaign.main_image.url(:main), alt: "project_image" %>
+            </div>
+        <% end %>
       <% end %>
 
       <div id="backing">