Custom click event handling

[killersolyom]

I will briefly explain what i want to achieve.
I have an hfs server where i store movies, mostly in mp4 and mkv format.
SanokKule/min-media-player is installed because i like this player.
I would like to make it possible to start a video not only with the play button, but also by clicking on the cover image.

But there are several problems with the code mentioned above.
https://github.com/rejetto/hfs/wiki/Access-file-menu-option

1. Access file menu [Select] -> by clicking on file name
   In this case the player opens, but the file menu also opens which must be closed manually.
   So this solution would require a code that closes the file menu after opening the player.
   I think this is not a good approach to achieve this.

2. Access file menu [Select] -> by dedicated button
   In this case if i click on an mp4, the player opens in a new tab and if i click on an mkv, the browser starts downloading the file.
   Neither case is good as i don't want to open a new tab and i don't want to download either.

So the question is, would it be possible to add a custom click handler for example only to mp4 and mkv files so that it does not open the file menu but does something else (custom) when clicked?

[rejetto]

are you using using thumbnails plugin with "video" option enabled?

[rejetto]

i don't have a clear vision of your situation, i guess the code you showed above is a piece of your custom code. Maybe you are editing the min-media-player plugin?
anyway, one way to avoid the menu is to interrupt the click-event process, like this

[beforeHeader]
<script>
document.body.addEventListener('click', ev => {
    const el = ev.target
    if (!el?.matches('video.icon')) return
    ev.preventDefault()
    alert('hey!')
}, { capture: true })
</script>

in this example i'm recognizing the icon of a video because i use the thumbnails plugin, and it will produce a <video class=icon> for supported video files.

you could check if @SanokKule is interested in working on an option like the one you want, or integrate your work into his.

[killersolyom]

Yes, i am trying to rewrite/extend an old thumbnail plugin and combine it with the player plugin.
The magic happens on line 27, in the onClick callback. But I will look at the code you recommended.

MMP.video(entry) opens the floating window player developed by SanokKule.

old_thumbnail_plugin.txt

[killersolyom]

I put the code in the before header, but the result was quite mixed.

The original feature i wanted to start the video from a thumbnail works, but there are a few issues.
The preventDefault() call does not work properly when Acces menu = [by clicking on file name] is selected in the settings.
In this case, both the player and the access menu will open.

If i modify the access menu to [by dedicated button] then it works. But the problem is that if I click even a little bit next to the thumbnail (first image, red area), it starts downloading the movie instead of showing the player. If i try to handle/prevent it, it will break the page navigation. And the second problem, i can open the floating window player, but not the audio player. The audio player will open a new tab for some reason (i have no idea why). Also, because of this new function, if i click on anything else (exe, doc, pdf...), it will start downloading immediately. And I don't really want that.

My before header file (modified to json because txt is not allowed):
before_header.json

Maybe you have an idea how to solve this?
I just want to start videos, audios and open images with the SanokKule player by clicking on the preview image. Everything else should remain the same (no instant downloads).

[rejetto]

The original feature i wanted to start the video from a thumbnail works, but there are a few issues. The preventDefault() call does not work properly when Acces menu = [by clicking on file name] is selected in the settings. In this case, both the player and the access menu will open.

i use the "menu clicking on file name" configuration, and that's how i made my tests, and in my tests the menu was not open thanks to preventDefault().
i don't know why it's not working on your side, it must be a difference in our configurations and/or an effect of your plugin.

[killersolyom]

I don't know what's happening on my side.
For testing i put this code to test the functionality.

Even with this modification, the menu opens for videos and the navigation is broken.

I see this when [by clicking on file name] is selected. I get this result when I use the before_header script attached above. I'm using the latest release: 0.54.0 rc8.

Untitled_Project_V1.mp4

[rejetto]

you didn't include in your screenshot an important part of the script: { capture: true }

[rejetto]

after ev.preventDefault()
add ev.stopPropagation()

[killersolyom]

Thank you very much! All i had to do was add the ev.stopPropagation() line. Now it works as I wanted.

[rejetto]

cool!
thanks for your donation 🙂