Video Gallery using a custom component

Wappler has gone up a notch in my esteem. By adding extensions to its arsenal, there is no end to the time saving possibilities when using this product.

The following video is dedicated to Wappler, the Wappler Team (@patrick, @George, @Teodor) and custom components.

7 Likes

Great news @ben,

This is the way that we should goā€¦ Every workaround that we use often it should be converted into a component and have it ready to use in any case. HUGE time saver!!!

Thanks @ben, thanks wappler community, thank wappler team!!

2 Likes

Great work there @ben Iā€™m going to implement this into a project soon so this is great timing - thanks for making it public, itā€™s a great addition to the growing Wappler extension list.

1 Like

I wasnā€™t expecting it to be that quick to implement!! I also made a back end admin section that uploads / edits deletes videos. It looks and behaves perfectly, hereā€™s the first sample of it - Iā€™ll be adding a search function and some more filtering as the amount of videos grows:

1 Like

Nice work Gentlemen - thanks for the efforts

2 Likes

Ben, brilliant. This feature has been missing but needed by everyone for too long.

2 Likes

Tom, this is great feedback. I love what you have done with the component.

Have you tried putting the component inside a card as in:

1 Like

Thanks for that @ben they were already in a card but it was differently styled for another part of the site, Iā€™ve updated this, and also added the h-100 (duh) that should have been there to begin with and increased the shadow - looks better.

Iā€™m working now on some filtering and am going to try it with the excellent infinite scroll extension from @mebeingken Iā€™ll post back when done.

One issue Iā€™ve found, the extension doesnā€™t seem to load the second player if thereā€™s another player on the page. Iā€™m putting a ā€˜featured videoā€™ at the top of the page, so had to use another youtube player (ID: id="ytplayer2) - for this (to be on the safe side) I used a separate server connect, as you can see its not loading at all. Iā€™ve tried a few different options like using the existing SC with a featured video filter etc to no avail. Once I have the filtering and scrolling sorted Iā€™ll try again and see if I can get the second player to load - I can see thereā€™s this error in the console ncaught TypeError: $(...).modal is not a function so Iā€™m not quite sure what is happening there. I attached a test link below the featured video just to show the video code is a live one.

Sorry to hear about the problem. I will have a look at it in the morning (down under).

Hey thereā€™s no rush at all @ben have a good kip :slight_smile:

Iā€™ll have a look around and see if I can find anything obvious (to me!). Its a great component.

Please check the second data source, it looks like the values are not coming through.

This is what I see for the videos that do work:

image

and this for the ā€˜featured videoā€™:

image

I did an earlier test where I removed the dynamic bindings and tried to with static data hence the ā€˜titleā€™ data you saw, the ā€˜featuredā€™ video still did not load even with static data. The SC data source is working as it should, as confirmed by the data at the bottom of the video card, itā€™s all dynamic (I changed the video for this test but the version you looked at was working too):

I have seen this behaviour on other occasions recently and in those occasions it was a timing issue. As app connect gets faster it is more common fior page render to complete before a SC has returned data.
I havent had the opportunity to investigate this great new component but is there any way you can defer the component initialisation until the SC is complete or allow an init() call which can be called from the SC success event?

It sounds like a possible cause Brian so i tried disabling the output from the first SC (the working one) but that didnā€™t change anything and the problem persists

Iā€™ve got it!

For the ā€˜featured videoā€™ I only had one record returning which was in a single database query - as there was no repeat region I think the youtube player was getting confused (not surprising when Iā€™m at the keyboard), I recreated the SC to a paged database query, then created a repeater for the cards and opted to have two records showing instead of 1 - it all works like a treat.

Iā€™ve added keyword filtering and category filtering - Iā€™m now adding the infinite scroller now so am in the process of testing out and adding more videos, see it in action here:

Many thanks for your help @ben and @Hyperbytes ā€¦!

1 Like

@ben, i have just tried your YouTube extension, so simple to implement, so awesome to use.
Proud to call you ā€œDadā€ :grinning:

4 Likes

:heart: you too, son.

4 Likes