How to implement touch listener on a class that extends Component and implements ClickNotifier

so I have this java class annotated @tag(‘video’). It extends Component (vaadin.flow), and implements clickNotifier . So this class responds to clicks correctly but I need it to also respond to touch. Help pls?

Usually touch devices emit also click events to improve compatibility. I wonder if the video tag is special though :man_shrugging: If click eventsa are coming through on desktop, but not on touch devices, I’d try my luck with next with pointer events: Pointer events - Web APIs | MDN

@quintessential-ibex thanks, this is quite an interesting read but it’s all javascript and I’m currently a Java man. I was hoping for something a bit out-of-the-box like ClickNotifier. E.g. public class MyClass implements TouchNotifier{}

I see your pain, but I’m afraid that might be dropping on “browser development side”. I don’t think we have ready made helpers, but listening those ought to be easy with Element API. But in general, if you don’t know browser development, this might end up being pain in the ass for you.

What are you trying to do with Videos? What is the underlaying problem? Maybe we have that already solved for you.

We are missing an official video component (shame on us :frowning_with_open_mouth: ), but there are couple of community provided add-ons available: Vaadin Add-on Directory

ok so I just want to pick the touch at the server, then throw a notification.show()

meanwhile thank you for this, I already see an add-on (vcamera) that could be handy latter in my project

I had this on my TODO and finally had a change to gry it out. With iOS devices click at least seems to work normally. But with iPhone the default is to launch the video full screen, and then clicks on the tag are not taken in when video is playing. This can be overridden with playsinline attribute:

    @Tag("video")
    public class Video extends HtmlContainer {
        private static final PropertyDescriptor<String, String> srcDescriptor = PropertyDescriptors.attributeWithDefault(
                "src",
                ""
        );

        public Video() {
            super();
            getElement().setProperty("controls", true);
            getElement().setAttribute("playsinline", true);

            getElement().addEventListener("click", event -> {
                Notification.show("It (click) works!");
            });
            getElement().getStyle().setWidth("100%");

        }

        public String getSrc() {
            return get(srcDescriptor);
        }

        public void setSrc(String src) {
            set(srcDescriptor, src);
        }
    }

And yes, we should ship an actual component with Vaadin to play videos…

@quintessential-ibex thanks for adding it to your TODO and coming up with this recommendation. However, I already worked around that with this little spring implementation: ContentDisposition contentDisposition = ContentDisposition.builder(“inline”)
.build();
httpHeaders.setContentDisposition(contentDisposition);

this will be a great idea, but for the time being, you and rest of the VaadinTeam could could just crankup eventListener to acomodate it. Example:
addEventListener(“touch”, touch ->{});

meanwhile @quintessential-ibex , kindly advice: I’m at point on this project where I deeply need assistance with front engineer. I have done some sweet job on the back but the front seems to be crying for help. I had mention earlier I’m not great (yet) with browser development. This project is built on vaadin and and springboot but most of the engineers in my immediate circle have literally only heard about Vaadin from me. They’re often out of sync with me - rather offering counsel I should go learn HTML and CSS an and what not. I’m hadly able to convince them that is all part of what vaadin is for and reason for my choice of it.
I need help!

Hi! The Element.addEventListener methods is essentially a wrapper for the browser side element counterpart. There is no “touch” event (touchstart/touchend/touchcancel/touchmove do exist) and we don’t want to add it there. If there is a use case for it in some component, we’ll add it only to the “Component” level in the server side API. The Element API should be considered “advanced use case only” thing, which needs understanding also some client side development.

I probably missed something regarding ContentDisposition code. What was that related to?

it was regarding this: getElement().setAttribute(“playsinline”, true);
it was in response to your above statement along this lines:
“…But with iPhone the default is to launch the video full screen, and then clicks on the tag are not taken in when video is playing. This can be overridden with playsinline attribute”

Ah, setting that header to the http requests for the video content does that as well :+1: Live and learn.

you’re welcome, Matti

@quintessential-ibex guess this - https://discordapp.com/channels/732335336448852018/1158774482115231876/1164511165699866754 - kind of passed unnoticed by you. kindly look at it , Matti