Item13035: custom renderer for youtube videos

foswiki · Sep 24, 2014 · 270e3d6 · 270e3d6
1 parent 10eafdf
commit 270e3d6
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 22 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
+*.jslint
+*.gz
 *.swp
 OEmbedPlugin.md5
 OEmbedPlugin.sha1
@@ -6,3 +8,5 @@ OEmbedPlugin.txt
 OEmbedPlugin.zip
 OEmbedPlugin_installer
 OEmbedPlugin_installer.pl
+pub/System/OEmbedPlugin/youtube.css
+pub/System/OEmbedPlugin/youtube.js
diff --git a/data/System/OEmbedPlugin.txt b/data/System/OEmbedPlugin.txt
@@ -234,6 +234,7 @@ See the =oembed.tmpl= file on how to use them.
 |  Release: | %$RELEASE% |
 |  Version: | %$VERSION% |
 |  Change History: | <!-- versions below in reverse order -->&nbsp; |
+|  24 Sep 2014 | added a custom renderer for youtube videos |
 |  29 Aug 2014 | removed my opera, qirk and urtak; \
                  use https whereever possible |
 |  01 Nov 2013 | added more providers |

diff --git a/lib/Foswiki/Plugins/OEmbedPlugin.pm b/lib/Foswiki/Plugins/OEmbedPlugin.pm
@@ -20,8 +20,8 @@ use warnings;
 
 use Foswiki::Func ();
 
-our $VERSION = '2.30';
-our $RELEASE = '2.30';
+our $VERSION = '3.00';
+our $RELEASE = '3.00';
 our $SHORTDESCRIPTION = 'Easy embedding of third party content';
 our $NO_PREFS_IN_TOPIC = 1;
 our $core;

diff --git a/lib/Foswiki/Plugins/OEmbedPlugin/Core.pm b/lib/Foswiki/Plugins/OEmbedPlugin/Core.pm
@@ -20,8 +20,9 @@ use warnings;
 
 use Web::oEmbed ();
 use Foswiki::Func ();
+#use Data::Dump qw(dump);
 
-use constant TRACE => 0; # toggle me
+use constant TRACE => 0;    # toggle me
 
 sub writeDebug {
   print STDERR "OEmbedPlugin::Core - $_[0]\n" if TRACE;
@@ -30,11 +31,9 @@ sub writeDebug {
 sub new {
   my $class = shift;
 
-  my $this = bless({
-    @_
-  }, $class);
+  my $this = bless({@_}, $class);
 
-  $this->{consumer} = Web::oEmbed->new({format=>'json'});
+  $this->{consumer} = Web::oEmbed->new({format => 'json'});
 
   if (defined $Foswiki::cfg{OEmbedPlugin}{Providers}) {
 
@@ -64,19 +63,19 @@ sub new {
 
       foreach $url (@urls) {
         $this->{consumer}->register_provider({
-          name => $provider,
-          url  => $url,
-          regexp  => $regexp,
-          api  => $api,
-          params => $params,
-        });
+            name => $provider,
+            url => $url,
+            regexp => $regexp,
+            api => $api,
+            params => $params,
+          }
+        );
       }
     }
   }
 
   $this->init();
 
-
   return $this;
 }
 
@@ -116,7 +115,8 @@ sub EMBED {
   $opts->{maxwidth} = $width if $width;
   $opts->{maxheight} = $height if $height;
 
-  my $response = eval {$this->{consumer}->embed($url, $opts)};
+  my $response = eval { $this->{consumer}->embed($url, $opts) };
+  #writeDebug("response=".dump($response));
   if ($@) {
     print STDERR "ERROR: $@\n" if $warn;
   }
@@ -126,13 +126,33 @@ sub EMBED {
     return $url;
   }
 
-  $response->web_page($url); # SMELL: hook in the orig url
+  $response->web_page($url);    # SMELL: hook in the orig url
 
   my $format = $params->{format};
   my $template = $params->{template};
   $format = $this->expandTemplate($template) if defined $template;
 
+  my $providerName = $response->provider_name;
+  unless (defined $format) {
+    $format = $this->expandTemplate($providerName);
+    $format = undef unless $format;
+  }
+
   my $result;
+
+  if ($providerName eq "YouTube") {
+    my $html = $response->html || '';
+
+    my $quality = $params->{quality} || "mqdefault";
+    $quality .= 'default' if $quality =~ /^(mq|hq|sd|maxres)$/;
+    $format =~ s/\$quality/$quality/g;
+
+    if ($html =~ /www.youtube.com\/embed\/(.*)\?/) {
+      my $vid = $1;
+      $format =~ s/\$vid\b/$vid/g if defined $format;
+    }
+  }
+
   if (defined $format) {
     my $data = $response->data();
     $result = $format;
@@ -141,22 +161,27 @@ sub EMBED {
       $val = $params->{$key} if defined $params->{$key};
       $result =~ s/\$$key\b/$val/g;
     }
-    $result =~ s/\$url\b/$url/g; # ... if left over
+    $result =~ s/\$url\b/$url/g;    # ... if left over
 
     # clean up some
     $result =~ s/\$(thumbnail_url|thumbnail_width|thumbnail_height|html|provider_url|provider_name|description|title|author_name|height|width|author_url|version|type)\b//g;
-    return Foswiki::Func::decodeFormatTokens($result);
+    $result = Foswiki::Func::decodeFormatTokens($result);
 
   } else {
     $result = $response->render($opts);
-    $result =~ s/http:\/\//https:\/\//g; #SMELL
     if (defined $result) {
-      return '<literal>'.$result.'</literal>';
+      $result = '<literal>' . $result . '</literal>';
     }
   }
 
-  writeDebug("WARNING: Hm, can't render response from $url");
-  return $url;
+  unless ($result) {
+    writeDebug("WARNING: Hm, can't render response from $url");
+    return $url;
+  }
+
+  $result =~ s/https?:\/\//\/\//g; #SMELL
+
+  return $result;
 }
 
 1;
diff --git a/lib/Foswiki/Plugins/OEmbedPlugin/MANIFEST b/lib/Foswiki/Plugins/OEmbedPlugin/MANIFEST
@@ -5,4 +5,13 @@ lib/Foswiki/Plugins/OEmbedPlugin/Core.pm 0644
 lib/Foswiki/Plugins/OEmbedPlugin.pm 0644
 lib/Web/oEmbed.pm 0644
 lib/Web/oEmbed/Response.pm 0644
+pub/System/OEmbedPlugin/Makefile 0644
+pub/System/OEmbedPlugin/play-hover.png 0644
+pub/System/OEmbedPlugin/play.png 0644
+pub/System/OEmbedPlugin/youtube.css 0644
+pub/System/OEmbedPlugin/youtube.css.gz 0644
+pub/System/OEmbedPlugin/youtube.js 0644
+pub/System/OEmbedPlugin/youtube.js.gz 0644
+pub/System/OEmbedPlugin/youtube.uncompressed.css 0644
+pub/System/OEmbedPlugin/youtube.uncompressed.js 0644
 templates/oembed.tmpl 0644
diff --git a/pub/System/OEmbedPlugin/Makefile b/pub/System/OEmbedPlugin/Makefile
@@ -0,0 +1,7 @@
+FOSWIKI_ROOT?=~/foswiki/core
+TARGET=youtube.js youtube.css
+
+-include $(FOSWIKI_ROOT)/pub/System/JQueryPlugin/Makefile.include
+
+clean: 
+	rm -f $(TARGET) *.gz
diff --git a/pub/System/OEmbedPlugin/play-hover.png b/pub/System/OEmbedPlugin/play-hover.png
diff --git a/pub/System/OEmbedPlugin/play.png b/pub/System/OEmbedPlugin/play.png
diff --git a/pub/System/OEmbedPlugin/youtube.uncompressed.css b/pub/System/OEmbedPlugin/youtube.uncompressed.css
@@ -0,0 +1,32 @@
+.oEmbedYouTube {
+  position:relative;
+  display:inline-block;
+  border:1px solid #eee;
+  overflow:hidden;
+  box-shadow:2px 1px 10px rgba(153, 153, 153, 0.5);
+  -webkit-border-radius: 5px; 
+     -moz-border-radius: 5px; 
+          border-radius: 5px;
+}
+.oEmbedYouTube iframe,
+.oEmbedYouTube img {
+  vertical-align:middle;
+}
+.oEmbedYouTube:after {
+  position:absolute;
+  top:50%;
+  left:50%;
+  width:54px;
+  height:38px;
+  display:block;
+  margin:-19px 0 0 -27px;
+  background-image:url(play.png);
+  background-size:cover;
+  content:"";
+}
+.oEmbedYouTube:hover:after {
+  background-image:url(play-hover.png);
+}
+.oEmbedYouTube.active:after {
+  background:transparent;
+}
diff --git a/pub/System/OEmbedPlugin/youtube.uncompressed.js b/pub/System/OEmbedPlugin/youtube.uncompressed.js
@@ -0,0 +1,22 @@
+jQuery(function($) {
+  $(document).on("click", ".oEmbedYouTube", function() {
+    var $this = $(this),
+      $img = $this.find("img").first(),
+      src = $img.attr("src"),
+      rx = new RegExp("(?:img.youtube.com|i.ytimg.com)/vi/(.*)/"),
+      match = rx.exec(src),
+      width = $img.width(),
+      height = $img.height(),
+      vid;
+
+    if (match) {
+      vid = match[1];
+      $this.html('<iframe width="' + width +
+        '" height="' + height +
+        '" id="' + vid +
+        '" src="//www.youtube.com/embed/' + vid + '?autoplay=1"' +
+        '" frameborder="0" allowfullscreen="1" style="border:none;"></iframe>');
+      $this.addClass("active");
+    }
+  });
+});
diff --git a/templates/oembed.tmpl b/templates/oembed.tmpl
@@ -10,3 +10,12 @@ $description
 </div>
 %CLEAR%
 </div>%TMPL:END%
+
+%TMPL:DEF{"YouTube"}%<div class='oEmbedYouTube'><img src='//i.ytimg.com/vi/$vid/$quality.jpg' width='$width' alt='YouTube Video Preview' /></div>%ADDTOZONE{"head"
+  id="OEMBEDPLUGIN::YOUTUBE"
+  text="<link type='text/css' rel='stylesheet' href='%PUBURLPATH%/%SYSTEMWEB%/OEmbedPlugin/youtube.css'  media='all' />"
+}%%ADDTOZONE{"script"
+  id="OEMBEDPLUGIN::YOUTUBE"
+  text="<script type='text/javascript' src='%PUBURLPATH%/%SYSTEMWEB%/OEmbedPlugin/youtube.js'></script>"
+  requires="JQUERYPLUGIN"
+}%%TMPL:END%