Jump to content

using mo.js animation library with emby web app


chef

Recommended Posts

chef

This is very cool!

 

So far I have animated the favorite/like hearts to blow up when they are clicked.

 

Edited by chef
Link to comment
Share on other sites

chef

Mind showing a tutorial? I'm really interested

Sure thing. I'll do it after work.

Link to comment
Share on other sites

chef

Agreed.

 

To get mo.js working you can add the mo.js script to embys dashnoard 'scripts' folder and then add the 'script' tag in your index.html the same way you added vanilla-tilt.

 

Next you can use the same mutation.js 'ready' function that we used to add the tilt to add mo.js animation to your icons.

 

I'll post an example one moment. :)

Link to comment
Share on other sites

chef

Here is the link mo.js Raw code for the mo.js file.

https://raw.githubusercontent.com/mojs/mojs/master/build/mo.js

Now you'd have all of these scripts linked in your html.

    <script src="scripts/mutation.js"></script>
    <script src="scripts/vanilla-tilt.js"></script>
    <script src="scripts/mo.js"></script>

In your scripts tags in your index.html add these lines of javascript:

                // Only check-marks which are on the details page
                ready('#itemDetailPage > div.detailPageContent > div.detailPagePrimaryContainer > div.detailPagePrimaryContent > div > div.mainDetailButtons > button.btnPlaystate', function(element) {
                    var favoriteTimeline = createFavoriteHeartExplosionTimeline(element);
                    //On  click - blow it up
                    element.addEventListener('click', function(e) {
                        favoriteTimeline.replay();
                    });
                });
                // Only hearts which are not red!
                ready('button[data-isfavorite="false"]', function(element) {
                    var favoriteTimeline = createFavoriteHeartExplosionTimeline(element);
                    //On  click - blow it up            
                    element.addEventListener('click', function(e) {
                        favoriteTimeline.replay();
                    });
                });

                function createFavoriteHeartExplosionTimeline(element) {
                    const burst = new mojs.Burst({
                        parent: element,
                        radius: {
                            4: 40
                        },
                        angle: 45,
                        count: 15,
                        //delay: 500,
                        timeline: {
                            delay: 200
                        },
                        children: {
                            radius: 3,
                            fill: '#c33',
                            scale: {
                                1: 0,
                                easing: 'quad.in'
                            },
                            pathScale: [.8, null],
                            degreeShift: [300, null],
                            duration: [500, 700],
                            easing: 'quint.out'
                        }
                    })

                    timeline = new mojs.Timeline();
                    timeline.add(burst);
                    return timeline;
                }

Here we are using the mutation observer to find any occurrences, in the emby UI, of the little heart ('like/favorite') icon and add the motion.js animations to it.

 

More specifically just heart icons in the 'unliked/unfavorited' state. Otherwise loading all the animations would take for ever.

Also, we are looking for the 'watched' check-mark to get loaded and add animation to it as well.

However we are only looking at the check-marks on the DetailsPage, because load times for libraries with all these animations start to take a while.

Which is something I wanted to mention. You will notice an extra second for pages to load. It just takes a bit longer to load the animations.


Hope it works out for you :)

Edited by chef
Link to comment
Share on other sites

rechigo

Works pretty well, I hope to see more animations like these in future Emby updates since the current Emby UI is pretty flat. Just curious, are you the web developer for Emby?

  • Like 1
Link to comment
Share on other sites

chef

Works pretty well, I hope to see more animations like these in future Emby updates since the current Emby UI is pretty flat. Just curious, are you the web developer for Emby?

Not 'the' web developer ;) . I have just been with emby for many many years and am a 'weekend coder'.

Edited by chef
Link to comment
Share on other sites

chef

I've updated the vanilla-tilt code on the other thread. It now shows better 3D buttons, and it ignores the dashboard cards. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...