Plugin on tablet issue

francescogola

Hello Team and Devs,
I just updated my plugin to be compatible with mobile devices too.

Plugin name: Clouds Horizon Distance
Repository: https://github.com/chiotas/clouds-horizon-distance

On the mobile app, it's working great: I used the mobileUI: "small", and it's visualising the info cards I placed below the timeline correctly. Everything is working smoothly and reactively.

However, on the tablet version (iPad), it's not working properly. I see that it's not really responsive (super slow) both loading the plugin and using it, plus it's not loading the mobileui:"small" interface as it's not displaying the info cards below the timeline. (I attach a couple of images here).

Am I missing something for the tablet app version?

Thank you!

pavelmedia

Hi @francescogola, thanks for this report. Turns out plugins weren't correctly implemented on tablets on our end. We'll roll out a fix in an upcoming version.

rittels

@francescogola

In the meantime you can this:

Tablets use the desktop UI at the moment, and do not display embedded plugins correctly.

To show an embedded plugin in the small window at the bottom, you can add this:

import plugins from '@windy/plugins';
import { isTablet } from '@windy/rootScope';

const thisPlugin = plugins['windy-plugin-your-plugin'];

if (isTablet && thisPlugin.pane == 'embedded') {
    const { node } = thisPlugin.window;
    node.classList.remove('fg-white', 'bg-transparent-blur', 'rounded-box');
    node.classList.add('plugin-mobile-bottom-small');
    document
        .querySelector('[data-plugin="bottom-below-controls-mobile"]')
        .appendChild(node);
    node.style.width = 'auto';
    node.style.margin = '0px';
    thisPlugin.pane = 'small-bottom-bottom';
}

francescogola

@rittels thank you so much!

Well, I think I'll wait for the next Windy update so not to submit another plugin update in the meantime.

Thank you so much and looking forward for the update