Added fallback to instagram embed to load as iframe due to API change…

…s from instagram which broke embed layers
shobhitsharma · Jan 8, 2019 · f223405 · f223405
1 parent 726bc48
commit f223405
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 22 deletions.
diff --git a/embedo.js b/embedo.js
@@ -73,7 +73,7 @@
           GLOBAL: 'instgrm',
           SDK: '//www.instagram.com/embed.js',
           oEmbed: '//api.instagram.com/oembed',
-          REGEX: /instagram.com\/p\/[a-zA-Z0-9_\/\?\-\=]+/gi,
+          REGEX: /(http|https)?:\/\/(www\.)?instagram.com\/p\/[a-zA-Z0-9_\/\?\-\=]+/gi,
           PARAMS: {}
         },
         youtube: {
@@ -119,7 +119,7 @@
     configurable: false
   });
 
-  // Logger
+  // Application Logger
   Object.defineProperty(Embedo, 'log', {
     value: function log(type) {
       if (!Embedo.debug) {
@@ -134,6 +134,27 @@
     configurable: false
   });
 
+  // Plugins Loader
+  Object.defineProperty(Embedo, 'plugins', {
+    value: function load(plugins) {
+      if (!plugins) {
+        return;
+      }
+      if (plugins instanceof Array) {
+        plugins.forEach(function (plugin) {
+          if (typeof plugin === 'function') {
+            plugin(Embedo);
+          }
+        });
+      } else if (plugins === 'fuction') {
+        plugins(Embedo);
+      }
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false
+  });
+
   /**
    * Helper utlities
    * @method utils
@@ -1031,6 +1052,13 @@
       }
     }
 
+    // If oembed or instagram embed script is unavailable.
+    if (options.jsonp === undefined || options.jsonp === null) {
+      var extracted_url = url.match(Embedo.defaults.SOURCES.instagram.REGEX);
+      url = extracted_url && extracted_url.length > 0 ? extracted_url[0].replace(/\/$/, '') : url;
+      return this.iframe(id, element, url + '/embed/', options, callback);
+    }
+
     embed_uri += '?' + Embedo.utils.querystring(query);
 
     var method = options.jsonp ? 'jsonp' : 'ajax';
@@ -1242,14 +1270,14 @@
     iframe.onerror = function (err) {
       callback(err);
     };
-    iframe.onload = function () {
+    iframe.addEventListener("load", function (event) {
       callback(null, {
         id: id,
         el: element,
         width: Embedo.utils.compute(container, 'width'),
         height: Embedo.utils.compute(container, 'height')
       });
-    };
+    });
   };
 
   /**
@@ -1336,7 +1364,7 @@
           type: mimetype,
           src: url,
           width: size.width,
-          height: size.height
+          height: options.autoheight ? '100%' : size.height
         },
         override
       )
@@ -1358,14 +1386,14 @@
       embed_el.onerror = function (err) {
         callback(err);
       };
-      embed_el.onload = function () {
+      embed_el.addEventListener("load", function (event) {
         callback(null, {
           id: id,
           el: element,
           width: Embedo.utils.compute(embed_el, 'width'),
           height: Embedo.utils.compute(embed_el, 'height')
         });
-      };
+      });
     }
   };
 

diff --git a/plugins/gmaps/gmaps.embedo.js b/plugins/gmaps/gmaps.embedo.js
@@ -28,6 +28,10 @@
    * @param {object} Embedo Class Instance
    */
   function EmbedoGMaps(Embedo) {
+    if (!Embedo) {
+      throw Error('Embedo instance as argument is missing.');
+    }
+
     // Add `googlemaps` as source
     Embedo.defaults.SOURCES.googlemaps = {
       GLOBAL: 'google',
@@ -94,7 +98,10 @@
             });
           }
         );
-      }
+      },
+      writable: false,
+      enumerable: true,
+      configurable: true
     });
 
     /**

diff --git a/plugins/reddit/reddit.embedo.js b/plugins/reddit/reddit.embedo.js
@@ -1,5 +1,5 @@
 /**
- * @file gmaps.reddit.js
+ * @file reddit.embedo.js
  *
  * Embedo plugin to embed Reddit.
  *
@@ -28,6 +28,10 @@
    * @param {object} Embedo Class Instance
    */
   function EmbedoReddit(Embedo) {
+    if (!Embedo) {
+      throw Error('Embedo instance as argument is missing.');
+    }
+
     // Add `reddit` as source
     Embedo.defaults.SOURCES.reddit = {
       GLOBAL: 'reddit',
@@ -77,7 +81,10 @@
           width: size.width,
           height: size.height
         });
-      }
+      },
+      writable: false,
+      enumerable: true,
+      configurable: true
     });
   }
 

diff --git a/test/index.html b/test/index.html
@@ -24,6 +24,10 @@ <h1>Embedo Test Demo</h1>
         <div id="test-container"></div>
       </section>
       <section class="samples">
+        <div class="code-editor code-demo">
+          <h2>Inatagram Embed</h2>
+          <div id="embedo-instagram"></div>
+        </div>
         <div class="code-editor code-demo">
           <h2>Twitter Embed</h2>
           <div id="embedo-twitter"></div>
@@ -91,10 +95,6 @@ <h2>Video Embed</h2>
           <h2>Google Maps Embed</h2>
           <div id="embedo-googlemaps"></div>
         </div>
-        <div class="code-editor code-demo">
-          <h2>MEDIA Embed</h2>
-          <div id="embedo-instagram"></div>
-        </div>
         <div class="code-editor code-demo">
           <h2>JSFiddle Embed</h2>
           <div id="embedo-jsfiddle"></div>

diff --git a/test/script.js b/test/script.js
@@ -52,6 +52,16 @@ function run() {
     }, 250);
   }
 
+  // Loads instagram photo
+  embedo.load(
+    document.getElementById('embedo-instagram'),
+    'https://www.instagram.com/p/BsUZJNjl9Is/', {
+      jsonp: undefined,
+      autoheight: true,
+      hidecaption: false
+    }
+  );
+
   // Loads facebook post
   embedo.load(
     document.getElementById('embedo-facebook-post'),
@@ -184,14 +194,6 @@ function run() {
     }
   );
 
-  // Loads instagram photo
-  embedo.load(
-    document.getElementById('embedo-instagram'),
-    'https://www.instagram.com/p/BJA9BB-B46A', {
-      hidecaption: false
-    }
-  );
-
   // Loads youtube video
   embedo.load(
     document.getElementById('embedo-youtube'), [