Demos

embedly · Feb 26, 2016 · 3716971 · 3716971
commit 3716971
Show file tree

Hide file tree

Showing 12 changed files with 456 additions and 0 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,35 @@
+{
+  "predef": [
+    "window", "location", "document", "XMLSerializer",
+    "setTimeout", "clearTimeout", "setInterval", "clearInterval",
+    "require", "module"
+  ],
+
+  "node" : false,
+  "browser" : false,
+
+  "boss" : true,
+  "curly": false,
+  "debug": false,
+  "devel": false,
+  "eqeqeq": true,
+  "evil": true,
+  "forin": false,
+  "immed": false,
+  "laxbreak": false,
+  "newcap": true,
+  "noarg": true,
+  "noempty": false,
+  "nonew": false,
+  "nomen": false,
+  "onevar": false,
+  "plusplus": false,
+  "regexp": false,
+  "undef": true,
+  "sub": true,
+  "strict": false,
+  "white": false,
+  "eqnull": true,
+  "es3": true,
+  "unused": true
+}
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,63 @@
+/*global module:false */
+module.exports = function(grunt) {
+
+
+  grunt.loadNpmTasks('grunt-contrib-connect');
+  grunt.loadNpmTasks('grunt-contrib-compass');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    meta: {
+      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+        '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+        '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
+        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+        ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
+    },
+    compass: {
+      all: {
+        options: {
+          sassDir: 'sass',
+          cssDir: 'dist/css'
+        }
+      }
+    },
+    connect: {
+      local: {
+        options: {
+          port: 8005,
+          base: '.'
+        }
+      }
+    },
+    concat: {
+      dist: {
+        src: [
+          'bower_components/jquery/dist/jquery.min.js',
+          'bower_components/embedly-jquery/jquery.embedly.min.js'
+        ],
+        dest: 'dist/js/vendor.js'
+      }
+    },
+    jshint: {
+      options: {
+        jshintrc: '.jshintrc',
+        globals : {'require': true, 'module':true}
+      },
+      all: ['Gruntfile.js', 'js/**/*.js', 'tests/**/*_test.js']
+    },
+    watch: {
+      local: {
+        files: ['sass/**/*.scss'],
+        tasks: ['compass']
+      }
+    }
+  });
+
+  grunt.registerTask("default", ["concat", "compass", "connect", "watch"]);
+
+};
diff --git a/README b/README
@@ -0,0 +1,2 @@
+Embedly Amp Demos
+-----------------
diff --git a/bower.json b/bower.json
@@ -0,0 +1,20 @@
+{
+  "name": "embedly-amp",
+  "version": "0.0.0",
+  "description": "Demos of Embedly and Google's AMP",
+  "main": "index.html",
+  "license": "MIT",
+  "homepage": "http://embed.ly",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "~2.2.1",
+    "embedly-jquery": "~3.1.2",
+    "foundation": "~5.5.3"
+  }
+}
diff --git a/embeds.html b/embeds.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Embedly Google Amp Demo</title>
+    <link rel="canonical" href="http://embed.ly" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+    <link href="/dist/css/vendor.css" rel="stylesheet"></link>
+    <link href="/dist/css/app.css" rel="stylesheet"></link>
+    <script src="/dist/js/vendor.js"></script>
+    <script src="/js/embeds.js"></script>
+  </head>
+  <body>
+    <div class="row">
+      <div class="medium-9 columns medium-centered">
+        <h1 class="text-center">Google AMP Embedly DEMO - Embed</h1>
+        <p class="lead">This is a Google AMP page built using the Embedly API. You'll notice the iframes will progressively load.</p>
+        <div class="embeds"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Embedly Google Amp Demo</title>
+    <link rel="canonical" href="http://embed.ly" />
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+    <link href="/dist/css/vendor.css" rel="stylesheet"></link>
+    <link href="/dist/css/app.css" rel="stylesheet"></link>
+    <script src="/dist/js/vendor.js"></script>
+    <script src="/js/replace.js"></script>
+  </head>
+  <body>
+    <div class="row">
+      <div class="medium-9 columns medium-centered">
+        <h1 class="text-center">Google AMP  - Embedly Demo</h1>
+        <p class="lead">Simple Demos for Google AMP + Embedly Integration</p>
+
+        <div class="row">
+          <div class="small-5 columns">
+            <a class="button expand" href="/replace.html">Replace Demo</a>
+
+          </div>
+          <div class="small-5 columns">
+            <a class="button expand" href="/embeds.html">Embeds Demo</a>
+          </div>
+      </div>
+
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/js/embeds.js b/js/embeds.js
@@ -0,0 +1,77 @@
+/*global $:true*/
+
+$.embedly.defaults.key = '1d5c48f7edc34c54bdae4c37b681ea2b';
+
+var urls = [
+  'https://www.youtube.com/watch?v=rVlhMGQgDkY',
+  'https://vine.co/v/irMdgU253HU',
+  'https://streamable.com/25ws',
+  'https://www.instagram.com/p/BA4-invoXXH/',
+  'http://vimeo.com/18150336'
+ ];
+
+$.embedly.oembed(urls)
+  .then(function(results) {
+    // Reduce the response to only video, rich or photo types and remove
+    // link or error responses.
+    return results.reduce(function(array, oembed) {
+      var html;
+      if (oembed.type === 'rich' || oembed.type === 'video') {
+        // Use the amp-frame if it's a
+
+        // We need to pull the src out of the iframe.
+        var match = (/src=\"([^\"]+)\"/).exec(oembed.html);
+
+        if (match.length === 2) {
+          // Grab the src.
+          var src = 'https://'+match[1];
+
+          // We should always have a placeholder, otherwise we need to worry about the
+          // position of the iframe in relationship to the top of the page. If there
+          // is no thumbnail_url then we should use a default placeholder. Please
+          // add your own placeholder.
+          var placeholder = oembed.thumbnail_url;
+          if (!placeholder) {
+            placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png';
+          }
+
+          // Build the amp-frame.
+          html = [
+            '<amp-iframe width=' + oembed.width,
+            'height=' + oembed.height,
+            'layout="responsive"',
+            'frameborder="0"',
+            'sandbox="allow-scripts allow-same-origin allow-popups"',
+            'src="' + src + '">',
+            '<amp-img layout="fill" src="' + placeholder + '" placeholder></amp-img>',
+            '</amp-iframe>'
+          ].join(' ');
+        }
+      } else if (oembed.type === 'photo') {
+        // Use the amp-img here.
+
+        html = [
+          '<amp-img src="' + oembed.url + '"',
+          'width=' + oembed.width,
+          'height=' + oembed.height,
+          'layout="responsive" ></amp-img>'
+        ].join(' ');
+      }
+
+      if (html) {
+        array.push(html);
+      }
+      return array;
+    }, []);
+  })
+  .then(function(results){
+    // add the emebds.
+  	var $embeds = $('.embeds');
+    results.forEach(function(html){
+    	$embeds.append([
+      	'<div class="embed">',
+        	html,
+        '</div>'
+      ].join(''));
+    });
+  });
diff --git a/js/replace.js b/js/replace.js
@@ -0,0 +1,105 @@
+/*jshint multistr:true */
+/*global $:true*/
+
+var post = '<p> \
+    Bacon ipsum dolor amet turducken tri-tip ham shank alcatra tenderloin \
+    ground round. Bresaola jowl pancetta alcatra cow doner brisket turducken. \
+    Strip steak pork hamburger pork loin tail. Jowl salami brisket pancetta \
+    fatback biltong. Swine pork hamburger, pork belly shankle sirloin short \
+    ribs andouille prosciutto ham cupim. Tenderloin turkey strip steak \
+    capicola jerky boudin cupim. Chuck meatball doner venison landjaeger shank \
+    t-bone sirloin biltong tri-tip kielbasa hamburger capicola porchetta. \
+  </p>\
+  <p> \
+  <iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FrVlhMGQgDkY%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DrVlhMGQgDkY&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FrVlhMGQgDkY%2Fhqdefault.jpg&key=internal&type=text%2Fhtml&schema=youtube" width="500" height="281" scrolling="no" frameborder="0" allowfullscreen></iframe>\
+  </p>\
+  <p> \
+    Bacon ipsum dolor amet turducken tri-tip ham shank alcatra tenderloin \
+    ground round. Bresaola jowl pancetta alcatra cow doner brisket turducken. \
+    Strip steak pork hamburger pork loin tail. Jowl salami brisket pancetta \
+    fatback biltong. Swine pork hamburger, pork belly shankle sirloin short \
+    ribs andouille prosciutto ham cupim. Tenderloin turkey strip steak \
+    capicola jerky boudin cupim. Chuck meatball doner venison landjaeger shank \
+    t-bone sirloin biltong tri-tip kielbasa hamburger capicola porchetta. \
+  </p>\
+  <p> \
+  <iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo" width="500" height="281" scrolling="no" frameborder="0" allowfullscreen></iframe>\
+  </p>\
+';
+
+
+var findAll = function(re, str){
+
+  var array= [], a;
+  while ((a = re.exec(str)) !== null) {
+
+    array.push({
+      html: a[0],
+      index: re.lastIndex
+    });
+  }
+
+  return array;
+};
+
+
+var ampify = function(iframe){
+  var src = (/src=\"([^\"]+)\"/).exec(iframe)[1],
+    width = (/width=\"([^\"]+)\"/).exec(iframe)[1],
+    height = (/height=\"([^\"]+)\"/).exec(iframe)[1],
+    path = src.split('?')[1];
+
+  // Embedly stores the URL of a thumbnail of embed in the SRC of the iframe.
+  // This decomposes that query sting to a hash.
+  var query = path.split('&').reduce(function(query, arg){
+    var parts = arg.split('=').map(decodeURIComponent);
+    query[parts[0]] = parts[1];
+    return query;
+  }, {});
+
+  // We should always use a placeholder.
+  var placeholder = query.image;
+  if (!placeholder){
+    placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png';
+  }
+
+  return [
+    '<amp-iframe width=' + width,
+    'height=' + height,
+    'layout="responsive"',
+    'frameborder="0"',
+    'sandbox="allow-scripts allow-same-origin allow-popups"',
+    'src="https:' + src + '">',
+    '<amp-img layout="fill" src="' + placeholder + '" placeholder></amp-img>',
+    '</amp-iframe>'
+  ].join(' ');
+};
+
+
+
+var deal = function(html){
+  var ire = (/<iframe(?:.*?)><\/iframe>/gi);
+
+  var data = findAll(ire, html);
+
+  var ampified = data.map(function(data){
+    return ampify(data.html);
+  });
+
+  return html.split(ire).reduce(function(array, part, i){
+    array.push(part);
+    if (i < ampified.length) {
+      array.push(ampified[i]);
+    }
+    return array;
+  }, []).join(' ');
+};
+
+
+$(document).on('ready', function(){
+  $('article').html(deal(post));
+
+});
+
+
+
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "embedly-amp",
+  "version": "1.0.0",
+  "description": "Demos for Google AMP and Embedly",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-compass": "^1.1.0",
+    "grunt-contrib-concat": "^1.0.0",
+    "grunt-contrib-connect": "^0.11.2",
+    "grunt-contrib-jshint": "^1.0.0",
+    "grunt-contrib-watch": "^0.6.1"
+  }
+}