video embedded in modal - how to call with link instead of button?

[Sapphireslinger]

I found out how to embed a youtube video in a modal:

1. Put the embed code which Youtube provides in a tiddler called, say, "FooVideo1".

2. In another tiddler post this code

<$button message="tm-modal" param="FooVideo1">1. Introduction</$button>

Problem 1: How to get "1. Introduction" to display as a link not a button?

Problem 2: How to call all FooVideos with a list filter where clicking a link (of the caption) opens it in the tm-modal? 

Something like:

<$list filter="[tag[FooVideo]sort[title]]"/>

<$link message="tm-modal" param="current">{{!!caption}}</$link>

</$list>

Or should that be:

<$list filter="[tag[FooVideo]sort[title]]"/>

<$link>

<$action-sendmessage message="tm-modal" param=<currentTiddler>{{!!caption}}

</$link>

</$list>

Thank you so much for any help.

[Eric Shulman]

On Monday, March 29, 2021 at 11:47:06 PM UTC-7 Sapphireslinger wrote:

Problem 1: How to get "1. Introduction" to display as a link not a button?

Problem 2: How to call all FooVideos with a list filter where clicking a link (of the caption) opens it in the tm-modal? 

 

<$list filter="[tag[FooVideo]sort[title]]">

   <$button class="tc-btn-invisible tc-tiddlylink" message="tm-modal" param=<<currentTiddler>>>

      <$text text={{!!caption}}/>

   </$button>

</$list>

Notes:

1) Removed trailing / from <$list> widget (use matching /$list widget instead)

2) Use class=" tc-btn-invisible tc-tiddlylink" to make the button appear as clickable link instead of a button

3) Variables used as parameter values need doubled angled brackets (i.e., <<currentTiddler>>)

4) Use $text widget to display caption (avoids unwanted links if there is any CamelCase in caption text)

enjoy,

-e

[Sapphireslinger]

Thank you very much!

[Sapphireslinger]

Dear Eric,

Your code works great.

But it only works for me if each of my tiddlers tagged with FooVideo has this pasted directly in it: 

<div class="container"><iframe src={{!!url}} 

frameborder="0" allowfullscreen class="video"></iframe></div>

The moment I try to automate that by putting 

<$list filter="[<currentTiddler>tag[video]]">

<div class="container"><iframe src={{!!url}} 

frameborder="0" allowfullscreen class="video"></iframe></div>

</$list>

 in a tiddler tagged $:/tags/ViewTemplate ... then every tiddler (tagged with both FooVideo and video, by the way) still  has the correct video displayed, but when I click on the list of contents your code gives me, the modals pop up empty now.

May I ask if you would happen to know why?

[Joshua Fontany]

UI elements tagged with `$:/tags/ViewTemplate` are only rendered for Tiddlers appearing in the Story River. It is part of the ViewTemplate passed to the list widget that renders the Story River.

Transcluding it into a modal fails to trigger that rendering - because TW considers all Modals to be "outside" of the Story River (which CSS renders as "on top of").

In this case, you can call the ViewTempalte section directly AS the Modal, and then pass it a new `currentTiddler` value to use inside the Modal. Note the $ on the `$param=` attribute, and the lack of one on the `currentTiddler=` attribute.

```

<$list filter="[tag[FooVideo]sort[title]]">

   <$button class="tc-btn-invisible tc-tiddlylink" message="tm-modal" $param="VIEWTEMPLATETIDDLER" currentTiddler=<<currentTiddler>>>

      <$text text={{!!caption}}/>

   </$button>

</$list>

```
Ref: https://tiddlywiki.com/#WidgetMessage%3A%20tm-modal

Best,
Joshua Fontany

[Sapphireslinger]

Joshua Fontany,

Thank you for the explanation. Unfortunately, I don't know how to find my "VIEWTEMPLATETIDDLER". 

I tried plugging different things like "$:/core/ui/ViewTemplate" and "storyTiddler" into the space and it didn't work.

 

I also tried using your code just like you had it, but that didn't work either :(

[Javier Eduardo Rojas Romero]

On Thu, Apr 08, 2021 at 05:48:30AM -0700, Sapphireslinger wrote:
> Joshua Fontany,
>
> Thank you for the explanation. Unfortunately, I don't know how to find my
> "VIEWTEMPLATETIDDLER".

I think he/she refers to the title of the tiddler that you
Sapphireslinger created and tagged with $:/tags/ViewTemplate

Am I right, @Joshua?

[Sapphireslinger]

I see what you mean! But it still doesn't work. I took the title of the tiddler tagged with $:/tags/ViewTemplate and containing:

<$list filter="[<currentTiddler>tag[video]]">

<div class="container"><iframe src={{!!url}} 

frameborder="0" allowfullscreen class="video"></iframe></div>

</$list>

and plugged it into the proper spot below:

<$list filter="[tag[FooVideo]sort[title]]">

   <$button class="tc-btn-invisible tc-tiddlylink" message="tm-modal" param="TITLE-OF-TIDDLER-TAGGED-WITH-VIEWTEMPLATE" currentTiddler=<<currentTiddler>>>

      <$text text={{!!caption}}/>

   </$button>

</$list>

and the modal still comes up empty.

[Eric Shulman]

On Friday, April 9, 2021 at 11:25:43 PM UTC-7 Sapphireslinger wrote:

...the modal still comes up empty.

Try this:

VideoTemplate:

<div class="container">

   <iframe src={{!!url}} width="100%" height="315" frameborder="0" allowfullscreen class="video"></iframe>

</div>

VideoButtons:

<$list filter="[tag[video]sort[title]]">

   <$button class="tc-btn-invisible tc-tiddlylink">

      <$view field="caption"><$view field="title"/></$view>

      <$action-sendmessage $message="tm-modal" $param="VideoTemplate" currentTiddler=<<currentTiddler>>/>

   </$button>

</$list>

TestVideo:

url=https://www.youtube.com/embed/v2oi5DYuzEM

Notes:

1) VideoTemplate: removed $list and added width and height params to iframe

2) VideoButtons: filter for [tag[video]]

3) VideoButtons: use $view caption with fallback handling to show title if no caption is set

4) VideoButtons: moved message, param and currentTiddler to $action-sendmessage in order to include the currentTiddler param ($button doesn't recognize extra params)

5) TestVideo: use YouTube *embed* URL

enjoy,

-e

[Sapphireslinger]

Wow! It works! Thank you so much Eric!

May I ask how to do this with the DetailsWidget as well? Can action-sendmessage do anything with the DetailsWidget?

[Sapphireslinger]

I tried this. The DetailsWidget drops down, but empty again just like the modal was.

<$list filter="[tag[video]sort[title]]">

<$details summary={{!!caption}}>

{{<currentTiddler>||VideoTemplate}}

</$details>

</$list>

[Eric Shulman]

On Saturday, April 10, 2021 at 5:23:35 AM UTC-7 Sapphireslinger wrote:

I tried this. The DetailsWidget drops down, but empty again just like the modal was.

<$list filter="[tag[video]sort[title]]">

<$details summary={{!!caption}}>

{{<currentTiddler>||VideoTemplate}}

</$details>

</$list>

1) Except in filters, references to <<currentTiddler>> use *doubled* angle brackets.

2) You can't use <<currentTiddler>> within the {{...}} transclusion syntax

3) If you omit the currentTiddler syntax from the transclusion it will use the default (which is currentTiddler anyway), like this:

{{||VideoTemplate}}

-e

[Sapphireslinger]

Thank you!!

[Joshua Fontany]

Thanks for the assist, Eric! Glad this worked out, and even I learned a few things about syntax.

Best,
Joshua F

[Sapphireslinger]

That DetailsWidget list calls for 36 video Detailwidgets, each approximately 45 minutes. The first detailwidget I open, it is blank for 7 seconds, then a black rectangle appears and finally the player controls appear 24 seconds later. I timed it with a timer. However, every video I click after that is instantly available :)

If it is a tiddler with just one video DetailsWidget in it, the video loads instantly as well. But calling for a bunch of video DetailWidgets in a list makes the first video load for 24 seconds or more. (A list filter of video-modal links seems to have the same problem.)

This is a relatively new Tiddlywiki with not much in it yet, since I'm fixing it up for a blog. It's not my note-taking Tiddlywiki with thousands of notes.

Should I just accept it and try to put a splash screen in the DetailsWidget somehow? 

I tried putting 20 of the video DetailWidgets together in a list as separate DetailWidgets lined up (see below). It's weird. Sometimes clicking on that first video loads almost instantly. Other times it takes 3 seconds for something to appear, 7 seconds to load completely. 

<$details summary="TITLE 1">

{{VIDEO TIDDLER 1||VideoTemplate}}

</$details>

<$details summary="TITLE 2">

{{VIDEO TIDDLER 2||VideoTemplate}}

</$details>

etc, etc, etc.

But when I tried transcluding that tiddler into another tiddler, it was even worse, loading for almost 30 seconds.

[Joshua Fontany]

The $details widget is not part of the core, so it would take a lot of debugging to see what is going on there...

Maybe check with the plugin author?

https://github.com/rimi/tw5-telmiger-plugins/issues

Best,

Joshua Fontany

[Mohammad Rahmani]

On Sun, Apr 11, 2021 at 3:06 PM Sapphireslinger <sapphir...@gmail.com> wrote:

That DetailsWidget list calls for 36 video Detailwidgets, each approximately 45 minutes. The first detailwidget I open, it is blank for 7 seconds, then a black rectangle appears and finally the player controls appear 24 seconds later. I timed it with a timer. However, every video I click after that is instantly available :)

If it is a tiddler with just one video DetailsWidget in it, the video loads instantly as well. But calling for a bunch of video DetailWidgets in a list makes the first video load for 24 seconds or more. (A list filter of video-modal links seems to have the same problem.)

You may want to give a try "display on demand" in Shiraz plugin

- the slider macro

- the details macro

These are pure Tiddlywiki macros and very customizable!

See: https://kookma.github.io/TW-Shiraz/#Tutorial%20Display%20on%20Demand

Code page: https://github.com/kookma/TW-Shiraz

Shiraz is a small Tiddlywiki 5 plugin contains macros, stylesheets, templates, snippets, images, static tables, dynamic tables and acts as a starter kit

 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/39873c62-f660-4343-8a4e-a81740b9df3fn%40googlegroups.com.

[Sapphireslinger]

Mohammad,

I tried your slider macro, but it takes the same amount of time as the DetailsWidget to load the first video clicked in the list.

Your slider macro:

<$list filter="[tag[video]sort[title]]">

<<slider label:{{!!caption}}  src:{{||VideoTemplate}}>>

</$list>

The DetailsWidget:

<$list filter="[tag[video]sort[title]]">

<$details summary={{!!caption}}>

{{||VideoTemplate}}

</$details>

</$list>

Is there any way to get either the slider macro or the DetailsWidget to display as ""tc-btn-invisible tc-tiddlylink"?

A modals list can look like tiddlylinks: 

<$list filter="[tag[video]sort[title]]">

   <$button class="tc-btn-invisible tc-tiddlylink">

      <$view field="caption"><$view field="title"/></$view>

      <$action-sendmessage $message="tm-modal" $param="VideoTemplate" currentTiddler=<<currentTiddler>>/>

   </$button><br>

</$list>

But how do I get your slider macro or the DetailsWidget to look like tiddlylinks?

I tried this but it didn't work:

<$list filter="[tag[video]sort[title]]">

<<slider label:{{!!caption}}  src:{{||VideoTemplate}} labelClass="tc-btn-invisible tc-tiddlylink" >>

</$list>

[Mohammad Rahmani]

On Tue, Apr 13, 2021 at 6:05 PM Sapphireslinger <sapphir...@gmail.com> wrote:

Mohammad,

I tried your slider macro, but it takes the same amount of time as the DetailsWidget to load the first video clicked in the list.

Your slider macro:

<$list filter="[tag[video]sort[title]]">

<<slider label:{{!!caption}}  src:{{||VideoTemplate}}>>

</$list>

The DetailsWidget:

<$list filter="[tag[video]sort[title]]">

<$details summary={{!!caption}}>

{{||VideoTemplate}}

</$details>

</$list>

Is there any way to get either the slider macro or the DetailsWidget to display as ""tc-btn-invisible tc-tiddlylink"?

Well Slider macro uses an iconized button at the left! You need to implement your own by using $reveal widget!

Use a button with tc-btn-invisible and tc-tiddlylink on click toggle a value like show and then a reveal widget to display its content!

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/cdaffc56-d4ad-45f4-ab4b-e1e25aca7374n%40googlegroups.com.