itteco / embedjs Goto Github PK

Hey!

While investigating memory leaks in our App, I found that the embedjs script is storing references to the iframes here:

It results in iframes being kept forever in memory and it's a big memory leak for us.

Do you think we could provide a way to deactivate or clear this cache?

Thanks for your time.

Because I want to work with Typescript especially in Angular.

I am curious about a types declaration.

Is there a package like for example for jest with npm @types/jest for iframely/embedjs?

see: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jest

Hey guys,

I noticed that thanks to the Pull request by @Weggla you now have german translations for the options. I checked them out in our Iframely CMS integration but unfortunately there are missing translations for some options. For that reason I had a closer look at your labels.LAN.example.js and noticed, that the missing translations are already missing in your example file.

Here is a list of missing options I found during my tests:

YouTube:

• Closed captions

Vimeo:

• Text language (ignored if no captions)
• Two letters: en, fr, es, de...

Twitter:

• Use dark theme
• Adjust width

Kickstarter:

• Don't include attached player
• Attached player only, no card

But there could be more, that I didn't spot yet. Could you please update the example file with all missing options? After that I could help you out by translating the new options to german.

Thanks,
Chris

Any chance to export utils?

In line 151 inside dist/options.js the with statement is used. This is what MDN says about the use of with:

Warning: Use of the with statement is not recommended, as it may be the source of confusing bugs and compatibility issues. See the "Ambiguity Contra" paragraph in the "Description" section below for details.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with

We are facing the issue, that if we import options.js from node_modules with a bundler that outputs an EcmaScript module the code breaks in the browser with the following SyntaxError:

strict mode code may not contain 'with' statements

We cannot disable strict mode as we are in an ESM environment using ECMAScript classes that are always strict.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @iframely/[email protected] for the project I'm working on.

I have been discussing Ivan how ifamely could be successfully used inside a custom element. Please see this example where I drafted a very simple such element. It uses the embed.js library to load an iframe inside the element's Shadow DOM. This prevent the library from actually finding the <iframe> element when messaging happens.

Ivan proposed that I expose and override the findIframe function. You can see in the example how I get the hold of iframes on iframe-ready and then look them up instead of calling document.querySelector(All).

The changes required in the library itself are minimal. That said, I would strongly suggest moving away from code which relies heavily on document.querySelector(All).

diff --git a/node_modules/@iframely/embed.js/src/index.js b/node_modules/@iframely/embed.js/src/index.js
index 907c007..7cc2963 100644
--- a/node_modules/@iframely/embed.js/src/index.js
+++ b/node_modules/@iframely/embed.js/src/index.js
@@ -15,7 +15,7 @@ if (!iframely._loaded) {
     require('./ahref');
     require('./lazy-img-placeholder');
     require('./lazy-iframe');
-    // require('./messaging');
+    require('./messaging');
     require('./widget-cancel');
     require('./widget-resize');
     require('./widget-click');
diff --git a/node_modules/@iframely/embed.js/src/messaging.js b/node_modules/@iframely/embed.js/src/messaging.js
index 7a7a25c..8229b63 100644
--- a/node_modules/@iframely/embed.js/src/messaging.js
+++ b/node_modules/@iframely/embed.js/src/messaging.js
@@ -48,7 +48,7 @@ function findIframeByContentWindow(iframes, contentWindow) {
     return foundIframe;
 }
 
-function findIframe(options) {
+iframely.findIframe = function (options) {
 
     var foundIframe, iframes;
 
@@ -71,7 +71,7 @@ function findIframe(options) {
 receiveMessage(function(e, message) {
     if (message && (message.method || message.type)) {
 
-        var foundIframe = findIframe({
+        var foundIframe = iframely.findIframe({
             contentWindow: e.source,
             src: message.context,
             domains: message.domains !== 'all' && iframely.DOMAINS.concat(iframely.CDN)

This issue body was partially generated by patch-package.

Please help me out with this.

I've managed to get my iframely working, and now I'm trying to connect self-hosted embedjs (on the same VPS) with iframely.

I've included both scripts in my frontend on the webpage:

<script src="xxx/r/js/embed.js&api_key=..."></script>
<script src="xxx/r/js/iframely.js"></script>

When I try to execute this script:

document.querySelectorAll( 'oembed[url]' ).forEach( element => {
        iframely.load( element, element.attributes.url.value );
    } );

the output on my webpage is this:
<iframe allowfullscreen="" allow="autoplay; encrypted-media" src="//cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlStCIUl6wts&amp;v=1&amp;app=1&amp;api_key=222" style="border: 0px;"></iframe>

Which tells me that embed.js is not realizing where iframely.js actual location is, and it's trying to get the data from cdn.iframe.ly instead of from my VPS host.

Iframely is on root/iframely
Embed.js is on root/iframely/node_modules/embed.js/ (i've also tried root/iframely/node_modules/@iframely/embed.js/)

Iframely.js is in /root/iframely/static/js/
And my embed.js file is linked in the same folder (from /root/iframely/node_modules/embed.js/dist/embed.js)

What am I doing wrong here?

iframely.js works fine, as the output from the get data script specified in the Documentation works.

    // Get Data. Specify page {URI} and your callback if required
    $.iframely.getPageData("", function(error, data) {
        console.log(data);
    });

Please help me out!