Refresh widget after an external JS finished loading

[Vladimir Pouzanov]

I'm trying to make a widget that would provide youtube videos inlining via the youtube iframe api, basically rendering <$youtube video={{!!myvideo}} /> into the youtube player.

To facilitate this, I added a tiddler tagged $:/tags/RawMarkup with the following contents:

    <script src="https://www.youtube.com/iframe_api"></script>

Which adds the required API to the header.

Now, because TW core doesn't wait for the document ready, the widgets begin rendering before the api in question becomes available at window.YT, thus the page reload always fails to show any youtube videos. Toggling the tiddler fixes the issue, but it's somewhat a disappointing method of management.

What would be the best way to defer rendering until the api is loaded properly? Alternatively, what's the safest way to refresh a widget if I go the route of setTimeout-polling for the api being loaded?

[Christian Byron]

Hey Vladimir

I think you could a couple of things, namely :

- try renaming your tiddler so it is a system tiddler ( eg $:\script\youtube.api ) ... I believe system tiddlers are loaded before content tiddlers ... not sure though that loading into the wiki store is enough to execute the script tag though...

- try adding the field "module-type" with the value of "startup" and see if that changes the loading sequence enough to get it working .. not sure if this will work with the RawMarkup tag 

If neither above works ...  a better solution may be to change your tiddler to be type application/javascript and replace the contents with the code itself.. I know marking this with module-type = startup will make this code run before any content is rendered.

Pulling in external libraries this way is the prefered approach as it makes sure it is available while offline ( although not as applicable in your use case ) .. and as the code in that link is not very big it will be a simple approach

Cheers

CB  

[Vladimir Pouzanov]

I was hacking arount boot.js and I noticed that the YT api script actually loads in time, it’s just that the script itself is asynchronous. From https://developers.google.com/youtube/iframe_api_reference#Requirements:

Any web page that uses the IFrame API must also implement the following JavaScript function:

onYouTubeIframeAPIReady – The API will call this function when the page has finished downloading the JavaScript for the player API, which enables you to then use the API on your page. Thus, this function might create the player objects that you want to display when the page loads.

So it’s not the question of how to delay the boot, I indeed need to force redraw some widgets after the YT api notifies the JS it finished loading.

An obvious dirty hack is to wait until onYouTubeIframeAPIReady in the very end of boot.js but I’d still like to make this solution into a reasonable plugin.

Any further ideas on how I can force a widget redraw from the “outside” js scope would be appreciated.

--

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/28a13fd8-0cec-4c05-a668-88fad18637f0o%40googlegroups.com.

[Saq Imtiaz]

Here's the first idea that comes to mind:

Add a onYouTubeIframeAPIReady function that calls the following:

$tw.wiki.setText(title,field,index,value,options)

Use this to set the value of a tiddler like $:/vp/youtube-api-loaded to true

$tw.wiki.setText("$:/vp/youtube-api-loaded","text","","true");

In the refresh function of your widget, check if $:/vp/youtube-api-loaded is one of the changedTiddlers. If it is, refresh the widget.

On Tuesday, June 16, 2020 at 10:27:14 AM UTC+2, Vladimir Pouzanov wrote:

I was hacking arount boot.js and I noticed that the YT api script actually loads in time, it’s just that the script itself is asynchronous. From https://developers.google.com/youtube/iframe_api_reference#Requirements:

Any web page that uses the IFrame API must also implement the following JavaScript function:

onYouTubeIframeAPIReady – The API will call this function when the page has finished downloading the JavaScript for the player API, which enables you to then use the API on your page. Thus, this function might create the player objects that you want to display when the page loads.

So it’s not the question of how to delay the boot, I indeed need to force redraw some widgets after the YT api notifies the JS it finished loading.

An obvious dirty hack is to wait until onYouTubeIframeAPIReady in the very end of boot.js but I’d still like to make this solution into a reasonable plugin.

Any further ideas on how I can force a widget redraw from the “outside” js scope would be appreciated.

--

On Tuesday, Jun 16, 2020 at 6:50 a.m., Christian Byron <christi...@gmail.com> wrote:

Hey Vladimir

I think you could a couple of things, namely :

- try renaming your tiddler so it is a system tiddler ( eg $:\script\youtube.api ) ... I believe system tiddlers are loaded before content tiddlers ... not sure though that loading into the wiki store is enough to execute the script tag though...

- try adding the field "module-type" with the value of "startup" and see if that changes the loading sequence enough to get it working .. not sure if this will work with the RawMarkup tag 

If neither above works ...  a better solution may be to change your tiddler to be type application/javascript and replace the contents with the code itself.. I know marking this with module-type = startup will make this code run before any content is rendered.

Pulling in external libraries this way is the prefered approach as it makes sure it is available while offline ( although not as applicable in your use case ) .. and as the code in that link is not very big it will be a simple approach

Cheers

CB  

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddly...@googlegroups.com.

[Vladimir Pouzanov]

This sounds exactly like what I was looking for!

Is $:/vp/ some magical prefix I don’t know about? How do I make sure the $:/vp/youtube-api-loaded isn’t persisted in the storage and has its value reset on every reload?

--

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/afa7d3ad-944a-43a7-8561-2c0bba89aa79o%40googlegroups.com.

[Saq Imtiaz]

The $:/ prefix is for system tiddlers. I used VP from your initials to avoid potential clashes. You could use $:/temp/.. which won't persist on node, but I think do by default in the single file version.

I think even if that Tiddler persists you should be ok. The flow I suggested relies on the tiddler changing and not whether it's present or what it's content is.

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywikidev/RMWIKblWfgw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/64b402c3-19db-4119-bba4-8c0fad49369e%40Canary.

[Vladimir Pouzanov]

Perfect, thanks!

I got it to work and now all the videos are refreshed as expected.

--

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/CAJuiAb1G6CPc7vvuAtJWDHxDuCL_LCLJsH8Hfk7WHu3GScLjEQ%40mail.gmail.com.