concerto_remote_video 0.2.1 → 0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 15efa4d13a34c7343eafd0691136d5fa9310e4fc
-  data.tar.gz: 0621f0b247dc44cd384c7e40fcdef69930ddebf0
+  metadata.gz: 0057c70e019b24d881176d1cee19c25b2cfbe15f
+  data.tar.gz: 427ad38f5490bf3d9bb97b56613c9b6a90c9d884
 SHA512:
-  metadata.gz: bc2f1c0684781018568674a1f96c655f4f4c14141566c9291373e36d610c72f77f0cc882fa5952a01365503baae92ac8d6ef329147c06341d4aafbc7cd08c7f1
-  data.tar.gz: 7ebe9b2078ef93bef66fa56481aae1e4a2aa14e888cda84e6f49ac7c3354f6f991e031f6cd0406ff2b100dce8a15928fc6e54c7a6a6c109996fd32e57cb6cb2a
+  metadata.gz: abf286284ce3481b42daac729849b5d71d41ab0274e2a72a97c558883c0a363a3bc7ddda0cb3e9bae14ef14c25d37f9e07cf123e435e838e777b10452d4cac83
+  data.tar.gz: 6a21256b3c5f55af89a5be869f82c0ecd643c92291e78485e3aa3e8ae218990e7ff32a9c685c3fdbacfd4613d211deaf283e8aa444ac1585822164f2b9919912

data/README.md

@@ -1,13 +1,10 @@
 # Concerto 2 Remote Video Plugin
 This plugin provides support to play remotely hosted videos, like YouTube videos, in Concerto 2.
 
-1.  Add to your Gemfile: ```gem 'concerto_remote_video'```
-2.  ```bundle install```
-3.  ```./script/rails generate concerto_remote_video:install install```
+To install this plugin, go to the Plugin management page in concerto, select RubyGems as the source and "concerto_remote_video" as the gem name.
 
-The last step produces a lot of output, if it runs successfully, because it recompiles the frontend js files.
-
-## Supported hosts:
+## Supported sources:
+* HTTP - MP4 videos primarily (http://en.wikipedia.org/wiki/HTML5_video#Supported_video_formats)
 * YouTube
 * Vimeo
 

data/app/assets/javascripts/concerto_remote_video/remote_video.js

@@ -1,80 +1,110 @@
-// contents.js
+var initializedRemoteVideoHandlers = false;
+function initializeRemoteVideoHandlers() {
+  if (!initializedRemoteVideoHandlers) {
 
-// attach handler to video_id so when it loses focus we can look up some video details
-// not dry, but no middle man
-function attachHandlers() {
-  $('input#remote_video_config_video_id').on('blur', getVideoInfo);
-  $('select#remote_video_config_video_vendor').on('change', getVideoInfo);
+    function getVideoInfo() {
+      // need to know which vendor
+      // will place title, description, duration into 'div.remote-video-info'
 
-  $('select#remote_video_config_video_vendor').on('change', updateTooltip);
+      var info = '<p>Video details could not be determined.</p>';
+      var vendor = $('select#remote_video_config_video_vendor').val();
+      var video_id = $('input#remote_video_config_video_id').val();
+      var info_el = $('.remote-video-info');
+      var preview_div = $('#preview_div');
+      $(preview_div).empty();
 
-  function updateTooltip() {
-    var vendor = $('select#remote_video_config_video_vendor').val();
-    if (vendor == 'YouTube') {
-      $('input#remote_video_config_video_id').attr("placeholder", "DGbqvYbPZBY");
-      $('div#video_hint_id').html('Specify the video id or keywords');
-    } else if (vendor == 'Vimeo') {
-      $('input#remote_video_config_video_id').attr("placeholder", "4224811");
-      $('div#video_hint_id').html('Specify the exact vimeo video id');
-    }
-  }
-
-  function getVideoInfo() {
-    // need to know which vendor
-    // will place title, description, duration into 'div.remote-video-info'
-
-    var info = '<p>Video details could not be determined.</p>';
-    var vendor = $('select#remote_video_config_video_vendor').val();
-    var video_id = $('input#remote_video_config_video_id').val();
-    var info_el = $('.remote-video-info');
-
-    if (info_el.length != 0) {
-      // we found the summary box
-      if (typeof vendor != 'undefined') {
-        // we found the vendor selection, call appropriate api
-        if (vendor == 'YouTube') {
-          $(info_el).empty().html('<i class=\"ficon-spinner icon-spin\"></i> searching...');
-          // todo: dont search if video_id is empty
-          $.ajax({
-            url: '//gdata.youtube.com/feeds/api/videos?q='+ encodeURIComponent(video_id) +'&v=2&max-results=1&format=5&alt=jsonc',
-            dataType: 'jsonp',
-            timeout: 4000,
-            success: function (data) {
-              if (parseInt(data['data']['totalItems']) > 0) {
-                // we got something, repoint data to first item in results
-                data = data['data']['items'];
-                $(info_el).empty().html('<img src="' + data[0].thumbnail.hqDefault + '"/><h4>' + data[0].title + '</h4><i>' + data[0].duration + ' secs</i><br/><p>' + data[0].description + '</p>');
-              } else {
+      if (info_el.length != 0) {
+        // we found the summary box
+        if (typeof vendor != 'undefined') {
+          // we found the vendor selection, call appropriate api
+          if (vendor == 'YouTube') {
+            $(info_el).empty().html('<i class=\"ficon-spinner icon-spin\"></i> searching...');
+            // todo: dont search if video_id is empty
+            $.ajax({
+              url: '//gdata.youtube.com/feeds/api/videos?q='+ encodeURIComponent(video_id) +'&v=2&max-results=1&format=5&alt=jsonc',
+              dataType: 'jsonp',
+              timeout: 4000,
+              success: function (data) {
+                if (parseInt(data['data']['totalItems']) > 0) {
+                  // we got something, repoint data to first item in results
+                  data = data['data']['items'];
+                  $(info_el).empty().html('<img src="' + data[0].thumbnail.hqDefault + '"/><h4>' + data[0].title + '</h4><i>' + data[0].duration + ' secs</i><br/><p>' + data[0].description + '</p>');
+                  previewVideo(data[0].id);
+                } else {
+                  $(info_el).empty().html(info);
+                }
+              },
+              error: function (xoptions, textStatus)  {
                 $(info_el).empty().html(info);
               }
-            },
-            error: function (xoptions, textStatus)  {
-              $(info_el).empty().html(info);
-            }
-          });
-        } else if (vendor == 'Vimeo') {
-          $(info_el).empty().html('<i class=\"ficon-spinner icon-spin\"></i> searching...');
-          $.ajax({
-            url: '//vimeo.com/api/v2/video/' + encodeURIComponent(video_id) + '.json',
-            dataType: 'jsonp',
-            timeout: 4000,
-            success: function (data) {
-              if (data.length > 0) {
-                // we got something
-                $(info_el).empty().html('<img src="' + data[0].thumbnail_small + '"/><h4>' + data[0].title + '</h4><i>' + data[0].duration + ' secs</i><br/><p>' + data[0].description + '</p>');
-              } else {
+            });
+          } else if (vendor == 'Vimeo') {
+            $(info_el).empty().html('<i class=\"ficon-spinner icon-spin\"></i> searching...');
+            $.ajax({
+              url: '//vimeo.com/api/v2/video/' + encodeURIComponent(video_id) + '.json',
+              dataType: 'jsonp',
+              timeout: 4000,
+              success: function (data) {
+                if (data.length > 0) {
+                  // we got something
+                  $(info_el).empty().html('<img src="' + data[0].thumbnail_small + '"/><h4>' + data[0].title + '</h4><i>' + data[0].duration + ' secs</i><br/><p>' + data[0].description + '</p>');
+                  previewVideo();
+                } else {
+                  $(info_el).empty().html(info);
+                }
+              },
+              error: function (xoptions, textStatus)  {
                 $(info_el).empty().html(info);
               }
-            },
-            error: function (xoptions, textStatus)  {
-              $(info_el).empty().html(info);
+            });
+          } else if (vendor == 'HTTPVideo') {
+            $(info_el).empty();
+            if (video_id != "")
+            {
+              previewVideo();
             }
-          });
+          }
         }
       }
     }
+
+    function previewVideo(video_id) {
+      var url = $('input#remote_video_config_video_id').data('url');
+      if (url) {
+        if (video_id == null) {
+          video_id = $('input#remote_video_config_video_id').val();
+        }
+        $("#preview_div").load(url, { data: { 
+          video_vendor: $('select#remote_video_config_video_vendor').val(), 
+          video_id: video_id, 
+          allow_flash: $('input#remote_video_config_allow_flash').val(),
+          duration: $('input#remote_video_duration').val(),
+          name: $('input#remote_video_name').val()
+        }, type: 'RemoteVideo' });
+      }
+    }
+
+    function updateTooltip() {
+      var vendor = $('select#remote_video_config_video_vendor').val();
+      if (vendor == 'YouTube') {
+        $('input#remote_video_config_video_id').attr("placeholder", "DGbqvYbPZBY");
+        $('div#video_id_hint').html('Specify the video id or keywords');
+      } else if (vendor == 'Vimeo') {
+        $('input#remote_video_config_video_id').attr("placeholder", "4224811");
+        $('div#video_id_hint').html('Specify the exact vimeo video id');
+      } else if (vendor == 'HTTPVideo') {
+        $('input#remote_video_config_video_id').attr("placeholder", "http://media.w3.org/2010/05/sintel/trailer.mp4");
+        $('div#video_id_hint').html('Specify the url of the video');
+      }
+    }
+
+    $('input#remote_video_config_video_id').on('blur', getVideoInfo);
+    $('select#remote_video_config_video_vendor').on('change', getVideoInfo);
+    $('select#remote_video_config_video_vendor').on('change', updateTooltip);
+
+    initializedRemoteVideoHandlers = true;
   }
 }
 
-$(document).ready(attachHandlers);
-$(document).on('page:change', attachHandlers);
+$(document).ready(initializeRemoteVideoHandlers);
+$(document).on('page:change', initializeRemoteVideoHandlers);

data/app/models/remote_video.rb

@@ -13,8 +13,9 @@ class RemoteVideo < Content
 
   DISPLAY_NAME = 'Video'
   VIDEO_VENDORS = {
-    :YouTube => { :id => "YouTube", :url => "https://www.youtube.com/embed/" },
-    :Vimeo => { :id => "Vimeo", :url => "https://player.vimeo.com/video/" }
+     :HTTPVideo => { :id => "HTTPVideo", :name => "Video URL", :url => ""},
+    :YouTube => { :id => "YouTube", :name => "YouTube", :url => "https://www.youtube.com/embed/" },
+    :Vimeo => { :id => "Vimeo", :name => "Vimeo", :url => "https://player.vimeo.com/video/" }
   }
 
   attr_accessor :config
@@ -116,6 +117,10 @@ class RemoteVideo < Content
       self.config['thumb_url'] = video_data['thumbnail_small']
       self.config['title'] = video_data['title']
       self.config['description'] = video_data['description']
+    elsif self.config['video_vendor'] == VIDEO_VENDORS[:HTTPVideo][:id]
+      self.config['thumb_url'] = ''
+      self.config['title'] = self.name
+      self.config['description'] = ''
     end
   end
 
@@ -141,26 +146,70 @@ class RemoteVideo < Content
     end
   end
 
+  def self.preview(data)
+    begin
+      o = RemoteVideo.new()
+      o.config['video_id'] = data[:video_id]
+      o.config['video_vendor'] = data[:video_vendor]
+      o.config['allow_flash'] = data[:allow_flash]
+      o.name = data[:name]
+      o.duration = data[:duration]
+
+      results = o.render_preview
+    rescue => e
+      results = "Unable to preview.  #{e.message}"
+    end
+
+    return results
+  end
+
+  def preview
+    begin
+      results = render_preview
+    rescue => e
+      results = "Unable to preview.  #{e.message}"
+    end
+
+    return results
+  end
+
   def render_details
     if self.config['video_vendor'] == VIDEO_VENDORS[:YouTube][:id]
       settings = {
-        :autoplay => 1,  # Autostart the video
+        :autoplay => 1,         # Autostart the video
         :end => self.duration,  # Stop it around the duration
-        :controls => 0,  # Don't show any controls
-        :modestbranding => 1,  # Use the less fancy branding
-        :rel => 0,  # Don't show related videos
-        :showinfo => 0,  # Don't show the video info
-        :iv_load_policy => 3  # Don't show any of those in-video labels
+        :controls => 0,         # Don't show any controls
+        :modestbranding => 1,   # Use the less fancy branding
+        :rel => 0,              # Don't show related videos
+        :showinfo => 0,         # Don't show the video info
+        :iv_load_policy => 3    # Don't show any of those in-video labels
       }
     elsif self.config['video_vendor'] == VIDEO_VENDORS[:Vimeo][:id]
       settings = {
-        :api => 1,  # use Javascript API
+        :api => 1,              # use Javascript API
         :player_id => 'playerv', #arbitrary id of iframe 
         :byline => 0,
         :portrait => 0,
         :autoplay => 1
       }
+    elsif self.config['video_vendor'] == VIDEO_VENDORS[:HTTPVideo][:id]
+      settings = { 
+        :autoplay => 1,         # Autostart the video
+        :end => self.duration,  # Stop it around the duration
+        :controls => 0,         # Don't show any controls
+      }
     end
     {:path => player_url(settings)}
   end
+
+  def render_preview
+    if self.config['video_vendor'] == RemoteVideo::VIDEO_VENDORS[:YouTube][:id] || self.config['video_vendor'] == RemoteVideo::VIDEO_VENDORS[:Vimeo][:id]
+      player_settings = { :end => self.duration, :rel => 0, :theme => 'light', :iv_load_policy => 3 }
+      results = "<iframe id=\"player\" type=\"text/html\" width=\"100%\" src=\"#{self.player_url(player_settings)}\" frameborder=\"0\"></iframe>"
+    elsif self.config['video_vendor'] == RemoteVideo::VIDEO_VENDORS[:HTTPVideo][:id]
+      results = "<video preload controls width=\"100%\"><source src=\"#{self.config['video_id']}\" /></video>"
+    end
+
+    results
+  end
 end

data/app/views/contents/remote_video/_form_top.html.erb

@@ -7,16 +7,16 @@
   <%= form.fields_for :config do |config| %>
 <div class='span4'>
     <div class="clearfix">
-      <%= config.label :video_vendor, 'Video Vendor' %>
+      <%= config.label :video_vendor, 'Video Source' %>
       <div class="input">
-        <%= config.select :video_vendor, RemoteVideo::VIDEO_VENDORS.collect { |a,b| b[:id] } %>
+        <%= config.select :video_vendor, RemoteVideo::VIDEO_VENDORS.collect { |a,b| [b[:name], b[:id]] } %>
       </div>
     </div>
     <div class="clearfix">
       <%= config.label :video_id %>
       <div class="input">
-        <%= config.text_field :video_id, :placeholder => "DGbqvYbPZBY", :class => "input-small" %>
-        <div id="video_id_hint">Specify the video id or keywords</div>
+        <%= config.text_field :video_id, :placeholder => "http://media.w3.org/2010/05/sintel/trailer.mp4", :class => "input-xlarge", "data-url" => preview_contents_path %>
+        <div id="video_id_hint">Specify the url of the video</div>
       </div>
     </div>
     <div class="clearfix">
@@ -29,7 +29,7 @@
       <%= form.label :duration %>
       <div class="input">
           <%= form.number_field :duration, :class => "input-small" %><br/>
-          (automatically set if ascertained from video source)
+          (auto-set if read from video source)
       </div>
     </div>
 </div>

data/app/views/contents/remote_video/_render_default.html.erb

@@ -1,7 +1,7 @@
 <%= stylesheet_link_tag "concerto_remote_video/application" %>
 <div class="auto-resizable-iframe">
-<div>
-  <% player_settings = {:end => content.duration, :rel => 0, :theme => 'light', :iv_load_policy => 3} %>
-  <iframe id="player" type="text/html" src="<%=raw content.player_url(player_settings) %>" frameborder="0"></iframe>
+  <div>
+    <%= content.preview.html_safe %>
+  </div>
 </div>
-</div>
+

data/app/views/contents/remote_video/_render_tile.html.erb

@@ -1 +1,12 @@
-<div class="pop" style="background-image:url(<%= content.config['thumb_url'] %>); background-size: cover; width: 100%; height: 100%;" data-content="<%= content.config['description']%>" data-title="<%= content.config['title']%>"></div>
+<% if content.config['thumb_url'].blank? %>
+  <div>
+    <h2 class="center">
+      <%= content.name %>
+    </h2>
+    <p>
+      <%= content.config['video_id'] %>
+    </p>
+  </div>
+<% else %>
+  <div class="pop" style="background-image:url(<%= content.config['thumb_url'] %>); background-size: cover; width: 100%; height: 100%;" data-content="<%= content.config['description']%>" data-title="<%= content.config['title']%>"></div>
+<% end %>

data/lib/concerto_remote_video/version.rb

@@ -1,3 +1,3 @@
 module ConcertoRemoteVideo
-  VERSION = "0.2.1"
+  VERSION = "0.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: concerto_remote_video
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: '0.3'
 platform: ruby
 authors:
 - Brian Michalski
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-08-21 00:00:00.000000000 Z
+date: 2014-09-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails