From 23664119bdec6c105bc4842202c8cef63c4555e1 Mon Sep 17 00:00:00 2001
From: chrisbr <cbruckmayer@gmx.net>
Date: Wed, 22 Apr 2015 21:30:32 +0200
Subject: [PATCH] Implement simplified commercials workflow

It's now possible to simply enter the url of the third party provider to enter a commercial.
---
 Gemfile                                       |  2 +
 Gemfile.lock                                  |  2 +
 app/assets/javascripts/application.js         |  1 +
 app/assets/javascripts/osem-commercials.js    | 33 ++++++++
 .../admin/commercials_controller.rb           | 20 +++--
 app/controllers/commercials_controller.rb     | 24 +++---
 app/models/commercial.rb                      | 42 +++++++++-
 app/views/admin/commercials/_form.html.haml   | 15 ----
 app/views/admin/commercials/index.html.haml   | 42 ++++++----
 .../commercials/_commercial_help.html.haml    |  6 --
 app/views/commercials/_form.html.haml         |  4 -
 app/views/commercials/edit.html.haml          |  9 --
 app/views/commercials/new.html.haml           |  9 --
 app/views/proposal/_form.html.haml            | 40 +++++----
 app/views/proposal/_tooltip.html.haml         |  2 +-
 app/views/shared/_media_item.html.haml        | 27 +++---
 app/views/shared/_media_items.html.haml       | 18 ++--
 config/config.yml.example                     |  6 --
 config/routes.rb                              |  6 +-
 .../20150417050953_add_url_to_commercial.rb   | 11 +++
 db/schema.rb                                  |  1 +
 spec/factories/commercials.rb                 |  3 +-
 spec/features/ability_spec.rb                 |  4 +-
 spec/features/commercials_spec.rb             | 84 +++++--------------
 spec/models/commercial_spec.rb                |  3 +-
 25 files changed, 220 insertions(+), 194 deletions(-)
 create mode 100644 app/assets/javascripts/osem-commercials.js
 delete mode 100644 app/views/admin/commercials/_form.html.haml
 delete mode 100644 app/views/commercials/_commercial_help.html.haml
 delete mode 100644 app/views/commercials/_form.html.haml
 delete mode 100644 app/views/commercials/edit.html.haml
 delete mode 100644 app/views/commercials/new.html.haml
 create mode 100644 db/migrate/20150417050953_add_url_to_commercial.rb

diff --git a/Gemfile b/Gemfile
index 5381b55d..9ce2873c 100644
--- a/Gemfile
+++ b/Gemfile
@@ -121,6 +121,8 @@ gem 'acts_as_list'
 # for switch checkboxes
 gem 'bootstrap-switch-rails', '~> 3.0.0'
 
+gem 'ruby-oembed'
+
 # Use guard and spring for testing in development
 group :development do
   # rspec Guard rules
diff --git a/Gemfile.lock b/Gemfile.lock
index 73c293cd..607b2e9d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -367,6 +367,7 @@ GEM
       powerpack (~> 0.0.6)
       rainbow (>= 1.99.1, < 3.0)
       ruby-progressbar (~> 1.4)
+    ruby-oembed (0.8.14)
     ruby-openid (2.5.0)
     ruby-progressbar (1.5.1)
     rubyzip (1.0.0)
@@ -490,6 +491,7 @@ DEPENDENCIES
   rspec-activemodel-mocks
   rspec-rails
   rubocop
+  ruby-oembed
   sass-rails (>= 4.0.2)
   shoulda-matchers
   spring-commands-rspec
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 6f915715..6c6c8e9a 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -37,6 +37,7 @@
 //= require bootstrap-switch
 //= require osem-switch
 //= require osem-bootstrap
+//= require osem-commercials
 
 $(document).ready(function() {
     $('a[disabled=disabled]').click(function(event){
diff --git a/app/assets/javascripts/osem-commercials.js b/app/assets/javascripts/osem-commercials.js
new file mode 100644
index 00000000..db290097
--- /dev/null
+++ b/app/assets/javascripts/osem-commercials.js
@@ -0,0 +1,33 @@
+$(function () {
+  $(document).ready(function() {
+    $("#commercial_url").bind('paste keyup', function() {
+      clearTimeout($(this).data('timeout'));
+
+      $(this).data('timeout', setTimeout(function () {
+        var url = $('#new_commercial').attr('action');
+        url = url + '/render_commercial'
+        $.ajax({
+          method: 'GET',
+          url: url,
+          data: { url: $('#commercial_url').val() },
+          error: function(xhr, status, error) {
+            $('#commercial_submit_action').prop('disabled', true);
+            $('#resource-content').hide();
+            $('#resource-placeholder').show();
+            $('#commercial_error').hide();
+            $('#commercial_url_input').addClass('has-error error');
+            $('<span id="commercial_error" class="help-block">' + xhr.responseText + '</span>').insertAfter('#commercial_url');
+          },
+          success: function(msg) {
+            $('#commercial_submit_action').prop('disabled', false);
+            $('#commercial_url_input').removeClass('has-error error');
+            $('#commercial_error').hide();
+            $('#resource-placeholder').hide();
+            $('#resource-content').html(msg).show();
+          }
+        })
+      }, 200)
+      );
+    });
+  });
+});
diff --git a/app/controllers/admin/commercials_controller.rb b/app/controllers/admin/commercials_controller.rb
index 3f734dac..be365e08 100644
--- a/app/controllers/admin/commercials_controller.rb
+++ b/app/controllers/admin/commercials_controller.rb
@@ -5,15 +5,11 @@ module Admin
 
     def index
       @commercials = @conference.commercials
-    end
 
-    def new
       @commercial = @conference.commercials.build
       authorize! :create, @conference.commercials.new
     end
 
-    def edit; end
-
     def create
       @commercial = @conference.commercials.build(commercial_params)
       authorize! :create, @commercial
@@ -23,7 +19,8 @@ module Admin
                     notice: 'Commercial was successfully created.'
       else
         flash[:error] = "An error prohibited this Commercial from being saved: #{@commercial.errors.full_messages.join('. ')}."
-        render :new
+        redirect_to admin_conference_commercials_path
+
       end
     end
 
@@ -33,7 +30,7 @@ module Admin
                     notice: 'Commercial was successfully updated.'
       else
         flash[:error] = "An error prohibited this Commercial from being saved: #{@commercial.errors.full_messages.join('. ')}."
-        render :edit
+        redirect_to admin_conference_commercials_path
       end
     end
 
@@ -42,10 +39,19 @@ module Admin
       redirect_to admin_conference_commercials_path, notice: 'Commercial was successfully destroyed.'
     end
 
+    def render_commercial
+      result = Commercial.render_from_url(params[:url])
+      if result[:error]
+        render text: result[:error], status: 400
+      else
+        render text: result[:html]
+      end
+    end
+
     private
 
     def commercial_params
-      params.require(:commercial).permit(:commercial_id, :commercial_type)
+      params.require(:commercial).permit(:url)
     end
   end
 end
diff --git a/app/controllers/commercials_controller.rb b/app/controllers/commercials_controller.rb
index 08d77ab9..cf9b2ca3 100644
--- a/app/controllers/commercials_controller.rb
+++ b/app/controllers/commercials_controller.rb
@@ -3,13 +3,6 @@ class CommercialsController < ApplicationController
   before_action :set_event
   load_and_authorize_resource through: :event
 
-  def new
-    @commercial = @event.commercials.build
-    authorize! :new, @commercial
-  end
-
-  def edit; end
-
   def create
     @commercial = @event.commercials.build(commercial_params)
     authorize! :create, @commercial
@@ -19,7 +12,7 @@ class CommercialsController < ApplicationController
                   notice: 'Commercial was successfully created.'
     else
       flash[:error] = "An error prohibited this Commercial from being saved: #{@commercial.errors.full_messages.join('. ')}."
-      render :new
+      redirect_to edit_conference_proposal_path(conference_id: @conference.short_title, id: @event.id, anchor: 'commercials-content')
     end
   end
 
@@ -29,16 +22,25 @@ class CommercialsController < ApplicationController
                   notice: 'Commercial was successfully updated.'
     else
       flash[:error] = "An error prohibited this Commercial from being saved: #{@commercial.errors.full_messages.join('. ')}."
-      render :edit
+      redirect_to edit_conference_proposal_path(conference_id: @conference.short_title, id: @event.id, anchor: 'commercials-content')
     end
   end
 
   def destroy
     @commercial.destroy
-    redirect_to edit_conference_proposal_path(conference_id: @conference.short_title, id: @event.id),
+    redirect_to edit_conference_proposal_path(conference_id: @conference.short_title, id: @event.id, anchor: 'commercials-content'),
                 notice: 'Commercial was successfully destroyed.'
   end
 
+  def render_commercial
+    result = Commercial.render_from_url(params[:url])
+    if result[:error]
+      render text: result[:error], status: 400
+    else
+      render text: result[:html]
+    end
+  end
+
   private
 
   def set_event
@@ -46,6 +48,6 @@ class CommercialsController < ApplicationController
   end
 
   def commercial_params
-    params.require(:commercial).permit(:commercial_id, :commercial_type)
+    params.require(:commercial).permit(:url)
   end
 end
diff --git a/app/models/commercial.rb b/app/models/commercial.rb
index 6803b5bd..13540447 100644
--- a/app/models/commercial.rb
+++ b/app/models/commercial.rb
@@ -1,8 +1,44 @@
 class Commercial < ActiveRecord::Base
+  require 'oembed'
+
   belongs_to :commercialable, polymorphic: true
 
-  validates :commercial_id, presence: true
-  validates :commercial_type, presence: true
+  validates :url, presence: true
+  validates :url, format: URI::regexp(%w(http https))
 
-  validates :commercial_type, inclusion: { in: CONFIG['commercial_types'].values }
+  validate :valid_url
+
+  def self.render_from_url(url)
+    register_provider
+    begin
+      resource = OEmbed::Providers.get(url, maxwidth: 560, maxheight: 315)
+      { html: resource.html.html_safe }
+    rescue StandardError => exception
+      { error: exception.message }
+    end
+  end
+
+  private
+
+  def valid_url
+    result = Commercial.render_from_url(url)
+    if result[:error]
+      errors.add(:base, result[:error])
+    end
+  end
+
+  def self.register_provider
+    speakerdeck = OEmbed::Provider.new('http://speakerdeck.com/oembed.json')
+    speakerdeck << 'https://speakerdeck.com/*'
+    speakerdeck << 'http://speakerdeck.com/*'
+
+    OEmbed::Providers.register(
+        OEmbed::Providers::Youtube,
+        OEmbed::Providers::Vimeo,
+        OEmbed::Providers::Slideshare,
+        OEmbed::Providers::Flickr,
+        OEmbed::Providers::Instagram,
+        speakerdeck
+    )
+  end
 end
diff --git a/app/views/admin/commercials/_form.html.haml b/app/views/admin/commercials/_form.html.haml
deleted file mode 100644
index a85aebf2..00000000
--- a/app/views/admin/commercials/_form.html.haml
+++ /dev/null
@@ -1,15 +0,0 @@
-.row
-  .col-md-12
-    .page-header
-      %h1
-        -if @commercial.new_record?
-          New
-        Commercial
-.row
-  .col-md-8
-    = semantic_form_for(@commercial, :url => (@commercial.new_record? ? admin_conference_commercials_path : admin_conference_commercial_path(@conference.short_title, @commercial))) do |f|
-      = f.input :commercial_type, as: :select, label: 'Conference Promo Media Type', input_html: { class: 'select-help-toggle' }, collection: CONFIG['commercial_types'].values, include_blank: false, hint: 'This media-item will be used to represent this conference at various places in OSEM.'
-      = f.input :commercial_id, label: 'Conference Promo Media ID', as: :string
-      = render partial: 'commercials/commercial_help'
-      %p.text-right
-        = f.action :submit, as: :button, button_html: { class: 'btn btn-primary' }
diff --git a/app/views/admin/commercials/index.html.haml b/app/views/admin/commercials/index.html.haml
index a6f6d3c3..97efe401 100644
--- a/app/views/admin/commercials/index.html.haml
+++ b/app/views/admin/commercials/index.html.haml
@@ -6,22 +6,32 @@
         Conference commercials will be displayed on the events in the
         = link_to "schedule,", schedule_conference_path(@conference.short_title)
         if the event speaker didn't add an event commercial.
+- if can? :create, @conference.commercials.new
+  .row
+    .col-md-6
+      #resource-content
+      #resource-placeholder{ style: 'background-color:#d3d3d3; float: left; width: 400px; height: 250px; margin: 5px; border-width: 1px; border-style: solid; border-color: rgba(0,0,0,.2);' }
+  .row
+    .col-md-6
+      = semantic_form_for(@commercial, url: admin_conference_commercials_path(conference_id: @conference.short_title)) do |f|
+        = f.input :url, label: 'URL', as: :string, input_html: { required: 'required' },
+        hint: 'Just paste the url of your video/photo provider. YouTube, Vimeo, SpeakerDeck, SlideShare, Instagram, Flickr.'
+        = f.action :submit, as: :button, button_html: { class: 'btn btn-primary pull-right', disabled: true }
+  %hr
+
 - @commercials.each_slice(3) do |slice|
   .row
     - slice.each do |commercial|
-      .col-md-4
-        .thumbnail
-          %h3.text-center
-            = commercial.commercial_type
-          .flexvideo
-            = render partial: 'shared/media_item', locals: { commercial_type: commercial.commercial_type, commercial_id: commercial.commercial_id }
-          .caption
-            - if can? :update, commercial
-              = link_to 'Edit', edit_admin_conference_commercial_path(@conference.short_title, commercial.id), class: 'btn btn-primary'
-            - if can? :destroy, commercial
-              = link_to 'Delete', admin_conference_commercial_path(@conference.short_title, commercial.id),
-                method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger'
-.row
-  .col-md-12.text-right
-    - if can? :create, @conference.commercials.new
-      = link_to 'Add Commercial', new_admin_conference_commercial_path, class: 'btn btn-primary'
+      - if commercial.persisted?
+        .col-md-4
+          .thumbnail
+            .flexvideo{ id: "resource-content-#{commercial.id}"}
+              = render partial: 'shared/media_item', locals: { commercial: commercial }
+            .caption
+              - if can? :update, commercial
+                = semantic_form_for commercial, url: admin_conference_commercial_path(conference_id: @conference.short_title, id: commercial) do |f|
+                  = f.input :url, label: 'URL', as: :string, input_html: { id: "commercial_url_#{commercial.id}", required: 'required' }, hint: 'Just paste the url of your video/photo provider'
+                  = f.action :submit, as: :button, button_html: { class: 'btn btn-success' }, label: 'Update'
+                  - if can? :destroy, commercial
+                    = link_to 'Delete', admin_conference_commercial_path(@conference.short_title, commercial.id),
+                      method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger'
diff --git a/app/views/commercials/_commercial_help.html.haml b/app/views/commercials/_commercial_help.html.haml
deleted file mode 100644
index 67487613..00000000
--- a/app/views/commercials/_commercial_help.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-%p{ class: 'help-block commercial_commercial_type collapse in', id: 'YouTube-help' } Go to your YouTube video, click on "share" and copy everything behind http://youtu.be/"
-%p{ class: 'help-block commercial_commercial_type collapse', id: 'SlideShare-help' } Go to your SlideShare, click on "share" -> "embed" and copy the id
-%p{ class: 'help-block commercial_commercial_type collapse', id: 'Flickr-help' } Go to your flickr image, click on "Grab the link" -> "Show short url" and copy everything behind https://flic.kr/p/
-%p{ class: 'help-block commercial_commercial_type collapse', id: 'Vimeo-help' } Go to your vimeo video, click on "share" and copy everything behind http://vimeo.com/
-%p{ class: 'help-block commercial_commercial_type collapse', id: 'Speakerdeck-help' } Go to your SpeakerDeck, click on "share" -> "embed" and copy the data-id
-%p{ class: 'help-block commercial_commercial_type collapse', id: 'Instagram-help' } Go to your Instagram photo page and copy everything behind instagram.com/p/ (without trailing /# hash symbol)
diff --git a/app/views/commercials/_form.html.haml b/app/views/commercials/_form.html.haml
deleted file mode 100644
index 13ca4fa5..00000000
--- a/app/views/commercials/_form.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-= f.input :commercial_type, as: :select, label: 'Type', input_html: { class: 'form-control select-help-toggle' }, collection: CONFIG['commercial_types'].values, include_blank: false, hint: 'This media-item will be used to represent this conference at various places in OSEM.'
-= f.input :commercial_id, label: 'ID', as: :string, input_html: { required: 'required' }
-= render partial: 'commercial_help'
-= f.action :submit, as: :button, button_html: { class: 'btn btn-primary pull-right' }
diff --git a/app/views/commercials/edit.html.haml b/app/views/commercials/edit.html.haml
deleted file mode 100644
index 5abb7914..00000000
--- a/app/views/commercials/edit.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-.container
-  .row
-    .col-md-12
-      .page-header
-        %h1 Editing Commercial
-  .row
-    .col-md-12
-      = semantic_form_for @commercial, url: conference_proposal_commercial_path(conference_id: @conference.short_title, proposal_id: @event.id, id: @commercial.id) do |f|
-        = render 'form', f: f
diff --git a/app/views/commercials/new.html.haml b/app/views/commercials/new.html.haml
deleted file mode 100644
index a4f91ea4..00000000
--- a/app/views/commercials/new.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-.container
-  .row
-    .col-md-12
-      .page-header
-        %h1 New Commercial
-  .row
-    .col-md-12
-      = semantic_form_for @commercial, url: conference_proposal_commercials_path(conference_id: @conference.short_title, proposal_id: @event.id) do |f|
-        = render 'form', f: f
diff --git a/app/views/proposal/_form.html.haml b/app/views/proposal/_form.html.haml
index c0bc8dc8..7405c4b6 100644
--- a/app/views/proposal/_form.html.haml
+++ b/app/views/proposal/_form.html.haml
@@ -15,21 +15,31 @@
               You can add commercials for your proposal. These commercials will be displayed on the
               = link_to 'public proposal page.', conference_proposal_path(@conference.short_title, @event)
               If you don't add a commercial, the conference commercial will be displayed!
-
+            - if can? :create, @event.commercials.new
+              .row
+                .col-md-6
+                  #resource-content
+                  #resource-placeholder{ style: 'background-color:#d3d3d3; float: left; width: 400px; height: 250px; margin: 5px; border-width: 1px; border-style: solid; border-color: rgba(0,0,0,.2);' }
+              .row
+                .col-md-6
+                  = semantic_form_for(@event.commercials.build, url: conference_proposal_commercials_path(conference_id: @conference.short_title, proposal_id: @event)) do |f|
+                    = f.input :url, label: 'URL', as: :string, input_html: { required: 'required', type: 'url' },
+                    hint: 'Just paste the url of your video/photo provider. Currently supported: YouTube, Vimeo, SpeakerDeck, SlideShare, Instagram, Flickr.'
+                    = f.action :submit, as: :button, button_html: { class: 'btn btn-primary pull-right', disabled: true }
+              %hr
             - @event.commercials.each_slice(3) do |slice|
               .row
                 - slice.each do |commercial|
-                  .col-md-4
-                    .thumbnail
-                      %h3.text-center
-                        = commercial.commercial_type
-                      .flexvideo
-                        = render partial: 'shared/media_item', locals: { commercial_type: commercial.commercial_type, commercial_id: commercial.commercial_id }
-                      - if can? :update, commercial
-                        = link_to 'Edit', edit_conference_proposal_commercial_path(@conference.short_title, @event.id, commercial.id), class: 'btn btn-primary'
-                      - if can? :destroy, commercial
-                        = link_to 'Delete', conference_proposal_commercial_path(@conference.short_title, @event.id, commercial.id),
-                        method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger'
-            - if can? :create, @event.commercials.new
-              %hr
-              = link_to 'Add Commercial', new_conference_proposal_commercial_path(@conference.short_title, @event.id), class: 'btn btn-primary'
+                  - if commercial.persisted?
+                    .col-md-4
+                      .thumbnail
+                        .flexvideo{ id: "resource-content-#{commercial.id}"}
+                          = render partial: 'shared/media_item', locals: { commercial: commercial }
+                        .caption
+                          - if can? :update, commercial
+                            = semantic_form_for commercial, url: conference_proposal_commercial_path(conference_id: @conference.short_title, proposal_id: @event, id: commercial) do |f|
+                              = f.input :url, label: 'URL', as: :string, input_html: { id: "commercial_url_#{commercial.id}", required: 'required', type: 'url' }
+                              = f.action :submit, as: :button, button_html: { class: 'btn btn-success' }, label: 'Update'
+                              - if can? :destroy, commercial
+                                = link_to 'Delete', conference_proposal_commercial_path(@conference.short_title, @event.id, commercial.id),
+                                :method => :delete, :data => { :confirm => 'Are you sure?' }, class: 'btn btn-danger'
diff --git a/app/views/proposal/_tooltip.html.haml b/app/views/proposal/_tooltip.html.haml
index fba4ab7a..4e9fd243 100644
--- a/app/views/proposal/_tooltip.html.haml
+++ b/app/views/proposal/_tooltip.html.haml
@@ -26,7 +26,7 @@
       - if progress_status['commercials']
         = link_to 'Edit the commercials', edit_conference_proposal_path(event.conference.short_title, event, anchor: 'commercials-content')
       - else
-        = link_to 'Add a commercial', new_conference_proposal_commercial_path(event.conference.short_title, event)
+        = link_to 'Add a commercial', edit_conference_proposal_path(event.conference.short_title, event, anchor: 'commercials-content')
 
   %li{'class'=>class_for_todo(progress_status['difficulty_level'])}
     %span{'class'=>icon_for_todo(progress_status['difficulty_level'])}
diff --git a/app/views/shared/_media_item.html.haml b/app/views/shared/_media_item.html.haml
index deccc6e1..82cbf461 100644
--- a/app/views/shared/_media_item.html.haml
+++ b/app/views/shared/_media_item.html.haml
@@ -1,12 +1,15 @@
--if commercial_type == CONFIG['commercial_types']['slideshare']
-  %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> (request.ssl? ? "https://" : "http://") + "www.slideshare.net/slideshow/embed_code/#{commercial_id}"}
--elsif commercial_type == CONFIG['commercial_types']['flickr']
-  %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> (request.ssl? ? "https://" : "http://") + "flic.kr/p/#{commercial_id}/player/268a054da2"}
--elsif commercial_type == CONFIG['commercial_types']['vimeo']
-  %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> "//player.vimeo.com/video/#{commercial_id}"}
--elsif commercial_type == CONFIG['commercial_types']['speakerdeck']
-  %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> "//speakerdeck.com/player/#{commercial_id}?"}
--elsif commercial_type == CONFIG['commercial_types']['instagram']
-  %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :scrolling =>"no", :allowtransparency=>"true", :src=> "//instagram.com/p/#{commercial_id}/embed/"}
--else
-  %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> (request.ssl? ? "https://" : "http://") + "www.youtube.com/embed/#{commercial_id}?rel=0"}
\ No newline at end of file
+- if commercial.url
+  = Commercial.render_from_url(commercial.url)[:html]
+- else
+  - if commercial.commercial_type == 'SlideShare'
+    %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> "https://www.slideshare.net/slideshow/embed_code/#{commercial.commercial_id}"}
+  - elsif commercial.commercial_type == 'Flickr'
+    %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> "https://flic.kr/p/#{commercial.commercial_id}/player/268a054da2"}
+  - elsif commercial.commercial_type == 'Vimeo'
+    %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> "//player.vimeo.com/video/#{commercial.commercial_id}"}
+  - elsif commercial.commercial_type == 'Speakerdeck'
+    %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> "//speakerdeck.com/player/#{commercial.commercial_id}?"}
+  - elsif commercial.commercial_type == 'Instagram'
+    %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :scrolling =>"no", :allowtransparency=>"true", :src=> "//instagram.com/p/#{commercial.commercial_id}/embed/"}
+  - else
+    %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=> "https://www.youtube.com/embed/#{commercial.commercial_id}?rel=0"}
\ No newline at end of file
diff --git a/app/views/shared/_media_items.html.haml b/app/views/shared/_media_items.html.haml
index 9fa72506..bf97c15d 100644
--- a/app/views/shared/_media_items.html.haml
+++ b/app/views/shared/_media_items.html.haml
@@ -1,25 +1,25 @@
 - unless commercials.empty?
   - if commercials.length == 1
     .flexvideo
-      = render partial: 'shared/media_item', locals: { commercial_type: commercials.first.commercial_type, commercial_id: commercials.first.commercial_id }
+      = render partial: 'shared/media_item', locals: { commercial: commercials.first }
   - else
     %ul.nav.nav-tabs{ 'role'=>'tablist' }
-      - commercials.each_with_index do  |commercial, index|
-        - if index == 0
+      - commercials.each.with_index(1) do  |commercial, index|
+        - if index == 1
           %li.active
             %a{ 'href'=>"##{index}", 'role'=>'tab', 'data-toggle'=>'tab' }
-              = commercial.commercial_type
+              = index
         - else
           %li
             %a{ 'href'=>"##{index}",' "role"'=>'tab', 'data-toggle'=>'tab' }
-              = commercial.commercial_type
+              = index
     .tab-content
-      - commercials.each_with_index do  |commercial, index|
-        - if index == 0
+      - commercials.each.with_index(1) do  |commercial, index|
+        - if index == 1
           %div.tab-pane.active{'id'=>"#{index}"}
             .flexvideo
-              = render partial: 'shared/media_item', locals: { commercial_type: commercial.commercial_type, commercial_id: commercial.commercial_id }
+              = render partial: 'shared/media_item', locals: { commercial: commercial }
         - else
           %div.tab-pane{'id'=>"#{index}"}
             .flexvideo
-              = render partial: 'shared/media_item', locals: { commercial_type: commercial.commercial_type, commercial_id: commercial.commercial_id }
\ No newline at end of file
+              = render partial: 'shared/media_item', locals: { commercial: commercial }
\ No newline at end of file
diff --git a/config/config.yml.example b/config/config.yml.example
index 412e109a..86500145 100644
--- a/config/config.yml.example
+++ b/config/config.yml.example
@@ -9,12 +9,6 @@ defaults: &defaults
   #errbit_key: See config/secrets.yml
   #errbit_host: errbit.exmaple.com
   # These are the currently supported commercial types for conference and events
-  commercial_types: { youtube: 'YouTube',
-                           slideshare: 'SlideShare',
-                           flickr: 'Flickr',
-                           vimeo: 'Vimeo',
-                           speakerdeck: 'Speakerdeck',
-                           instagram: 'Instagram' }
 
   # If you want to use iChain to handle registration and authentication enable the next lines
   authentication:
diff --git a/config/routes.rb b/config/routes.rb
index 05766f76..95bd6125 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -26,7 +26,8 @@ Osem::Application.routes.draw do
       resource :contact, except: [:index, :new, :create, :show, :destroy]
       resources :photos, except: [:show]
       resource :schedule, only: [:show, :update]
-      resources :commercials, except: [:show]
+      get 'commercials/render_commercial' => 'commercials#render_commercial'
+      resources :commercials, only: [:index, :create, :update, :destroy]
       get '/stats' => 'stats#index'
       get '/dietary_choices' => 'dietchoices#show', as: 'dietary_list'
       patch '/dietary_choices' => 'dietchoices#update', as: 'dietary_update'
@@ -89,7 +90,8 @@ Osem::Application.routes.draw do
 
   resources :conference, only: [:index, :show] do
     resources :proposal do
-      resources :commercials, except: [:show, :index]
+      get 'commercials/render_commercial' => 'commercials#render_commercial'
+      resources :commercials, only: [:create, :update, :destroy]
       resources :event_attachment, controller: 'event_attachments'
       member do
         patch '/confirm' => 'proposal#confirm'
diff --git a/db/migrate/20150417050953_add_url_to_commercial.rb b/db/migrate/20150417050953_add_url_to_commercial.rb
new file mode 100644
index 00000000..6df2bb81
--- /dev/null
+++ b/db/migrate/20150417050953_add_url_to_commercial.rb
@@ -0,0 +1,11 @@
+class AddUrlToCommercial < ActiveRecord::Migration
+  class TempCommercial< ActiveRecord::Base
+    self.table_name = 'commercials'
+  end
+
+  def change
+    add_column :commercials, :url, :string
+
+    # Don't delete commercial_type and commercial_id for backward compatibility
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index f29255db..cd241c4e 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -80,6 +80,7 @@ ActiveRecord::Schema.define(version: 20151005161518) do
     t.string   "commercialable_type"
     t.datetime "created_at"
     t.datetime "updated_at"
+    t.string   "url"
   end
 
   create_table "conferences", force: true do |t|
diff --git a/spec/factories/commercials.rb b/spec/factories/commercials.rb
index d1288bc3..2578d1cd 100644
--- a/spec/factories/commercials.rb
+++ b/spec/factories/commercials.rb
@@ -2,8 +2,7 @@
 
 FactoryGirl.define do
   factory :commercial do
-    commercial_type 'YouTube'
-    commercial_id 'test'
+    url 'https://www.youtube.com/watch?v=BTTygyxuGj8'
 
     factory :conference_commercial do
       association :commercialable, factory: :conference
diff --git a/spec/features/ability_spec.rb b/spec/features/ability_spec.rb
index 1056ad0e..b2b38cdf 100644
--- a/spec/features/ability_spec.rb
+++ b/spec/features/ability_spec.rb
@@ -172,7 +172,7 @@ feature 'Has correct abilities' do
     expect(current_path).to eq(root_path)
 
     visit admin_conference_commercials_path(conference2.short_title)
-    expect(current_path).to eq(admin_conference_commercials_path(conference2.short_title))
+    expect(current_path).to eq(root_path)
   end
 
   scenario 'when user is info desk' do
@@ -244,6 +244,6 @@ feature 'Has correct abilities' do
     expect(current_path).to eq(admin_conference_questions_path(conference3.short_title))
 
     visit admin_conference_commercials_path(conference3.short_title)
-    expect(current_path).to eq(admin_conference_commercials_path(conference3.short_title))
+    expect(current_path).to eq(root_path)
   end
 end
diff --git a/spec/features/commercials_spec.rb b/spec/features/commercials_spec.rb
index b445e8b6..fde330c1 100644
--- a/spec/features/commercials_spec.rb
+++ b/spec/features/commercials_spec.rb
@@ -14,41 +14,24 @@ feature Commercial do
       sign_in organizer
 
       visit admin_conference_commercials_path(conference.short_title)
-      click_link 'Add Commercial'
 
-      # Create without an commercial id
-      select('SlideShare', from: 'commercial_commercial_type')
-
-      click_button 'Create Commercial'
-      expect(flash).to eq("An error prohibited this Commercial from being saved: Commercial can't be blank.")
-      expect(conference.commercials.count).to eq(expected_count - 1)
+      # Workaround to enable the 'Create Commercial' button
+      page.execute_script("$('#commercial_submit_action').prop('disabled', false)")
 
       # Create valid commercial
-      select('SlideShare', from: 'commercial_commercial_type')
-      fill_in 'commercial_commercial_id', with: '12345'
-
+      fill_in 'commercial_url', with: 'https://www.youtube.com/watch?v=M9bq_alk-sw'
       click_button 'Create Commercial'
       expect(flash).to eq('Commercial was successfully created.')
       expect(conference.commercials.count).to eq(expected_count)
-      expect(page.has_content?('SlideShare')).to be true
 
-      click_link 'Edit'
+      commercial = conference.commercials.where(url: 'https://www.youtube.com/watch?v=M9bq_alk-sw').first
+      fill_in "commercial_url_#{commercial.id}", with: 'https://www.youtube.com/watch?v=VNkDJk5_9eU'
+      click_button 'Update'
 
-      # Update without an commercial id
-      select('YouTube', from: 'commercial_commercial_type')
-      fill_in 'commercial_commercial_id', with: ''
-
-      click_button 'Update Commercial'
-      expect(flash).to eq("An error prohibited this Commercial from being saved: Commercial can't be blank.")
-      expect(conference.commercials.count).to eq(expected_count)
-
-      # Update valid commercial
-      select('YouTube', from: 'commercial_commercial_type')
-      fill_in 'commercial_commercial_id', with: '678910'
-
-      click_button 'Update Commercial'
       expect(flash).to eq('Commercial was successfully updated.')
       expect(conference.commercials.count).to eq(expected_count)
+      commercial.reload
+      expect(commercial.url).to eq 'https://www.youtube.com/watch?v=VNkDJk5_9eU'
 
       # Delete commercial
       click_link 'Delete'
@@ -75,59 +58,34 @@ feature Commercial do
       sign_out
     end
 
-    scenario 'adds a valid commercial to an event', feature: true, js: true do
+    scenario 'adds a commercial of an event', feature: true, js: true do
       visit edit_conference_proposal_path(conference.short_title, event.id)
-
       click_link 'Commercials'
-      click_link 'Add Commercial'
+      fill_in 'commercial_url', with: 'https://www.youtube.com/watch?v=M9bq_alk-sw'
 
-      select('SlideShare', from: 'commercial_commercial_type')
-      fill_in 'commercial_commercial_id', with: '12345'
+      # Workaround to enable the 'Create Commercial' button
+      page.execute_script("$('#commercial_submit_action').prop('disabled', false)")
 
       click_button 'Create Commercial'
       expect(flash).to eq('Commercial was successfully created.')
       expect(event.commercials.count).to eq(@expected_count)
     end
 
-    scenario 'adds an invalid commercial to an event', feature: true, js: true do
+    scenario 'updates a commercial of an event', feature: true, js: true do
+      commercial = create(:commercial,
+                          commercialable_id: event.id,
+                          commercialable_type: 'Event')
       visit edit_conference_proposal_path(conference.short_title, event.id)
       click_link 'Commercials'
-      click_link 'Add Commercial'
-
-      select('SlideShare', from: 'commercial_commercial_type')
-
-      click_button 'Create Commercial'
-      expect(event.commercials.count).to eq(@expected_count - 1)
-    end
-
-    scenario 'updates a valid commercial to an event', feature: true, js: true do
-      create(:commercial,
-             commercialable_id: event.id,
-             commercialable_type: 'Event')
-      visit edit_conference_proposal_path(conference.short_title, event.id)
-      click_link 'Commercials'
-      click_link 'Edit'
-      select('SlideShare', from: 'commercial_commercial_type')
-      fill_in 'commercial_commercial_id', with: '56789'
-      click_button 'Update Commercial'
+      fill_in "commercial_url_#{commercial.id}", with: 'https://www.youtube.com/watch?v=M9bq_alk-sw'
+      click_button 'Update'
       expect(flash).to eq('Commercial was successfully updated.')
       expect(event.commercials.count).to eq(@expected_count)
+      commercial.reload
+      expect(commercial.url).to eq('https://www.youtube.com/watch?v=M9bq_alk-sw')
     end
 
-    scenario 'updates a invalid commercial to an event', feature: true, js: true do
-      create(:commercial,
-             commercialable_id: event.id,
-             commercialable_type: 'Event')
-      visit edit_conference_proposal_path(conference.short_title, event.id)
-      click_link 'Commercials'
-      click_link 'Edit'
-      select('SlideShare', from: 'commercial_commercial_type')
-      fill_in 'commercial_commercial_id', with: ''
-      click_button 'Update Commercial'
-      expect(event.commercials.count).to eq(@expected_count)
-    end
-
-    scenario 'deletes a commercial to an event', feature: true, js: true do
+    scenario 'deletes a commercial of an event', feature: true, js: true do
       create(:commercial,
              commercialable_id: event.id,
              commercialable_type: 'Event')
diff --git a/spec/models/commercial_spec.rb b/spec/models/commercial_spec.rb
index 6a176d37..fbfac855 100644
--- a/spec/models/commercial_spec.rb
+++ b/spec/models/commercial_spec.rb
@@ -2,7 +2,6 @@ require 'spec_helper'
 
 describe Commercial do
 
-  it { should validate_presence_of(:commercial_id) }
-  it { should validate_presence_of(:commercial_type) }
+  it { should validate_presence_of(:url) }
 
 end