Swipeable (local) videos

Created on 3 May 2024, about 2 months ago
Updated 22 June 2024, about 13 hours ago

Hello everyone,

I have a very tiny question about the phrase “Supports swipeable Videos”

Are they also playable? I mean, similar to the “both swipeable and playable” remote videos?

After reading all the READMEs and docs I came across and trying all the settings permutations that comes to my mind all I can see is a play button like thumbnail (yes they are swipeable to be honest) for each local video, and while they are swipeable, they are not playable.

By the way I also tried a little cute method that worked for core Media: rendered entity field to make local video thumbnails (displayed in a Drupal view) playable in full size in a new browser tab, to no avail.

Here are some of my observations:

CASE 1:

A new view with a Media: rendered entity field in it:

Media: rendered entity video link (doesn't lead to playable video lightbox or page upon right click, but shows the link below upon left click)

http://MYSITE.org/sites/MYSITE.org/files/2024-04/320x240.mp4

It displays nothing when mouse arrow is hovered above

CASE 2:

"Media: rendered entity" field video link when there is a "media: video file" field above.

"media: video file" field's formatter is set as "URL to file"
"Media: rendered entity" field has a "Output this field as a custom link" rewirte condition, and link path is {{ field_media_video_file }}
In this case it displays

MYSITE.org/sites/MYSITE.org/files/2024-04/320x240.mp4

when mouse arrow is hovered above

it displays
http://MYSITE.org/sites/MYSITE.org/files/2024-04/320x240.mp4
upon left click ->copy video link

AND

opens up a new tab playing the video upon right click

However this doesn’t seem to work with Blazy Photoswipe’s “Blazy” views field.

Then, what happens when I try to make the same observation with Blazy Photoswipe’s “Blazy” views field instead of core "Media: rendered entity" field?

WITHOUT the same rewrite trick (since it doesn’t work for Blazy Photoswipe’s “Blazy” views field afterall):

When mouse arrow is hovered above a Blazy Photoswipe’s “Blazy” views field play-icon-like thumbnail it assigns to local video files, it displays this:

MYSITE.org/sites/MYSITE.org/files/styles/w_rel_h_768_watermarked/public/media-icons/generic/video.png?itok=fzldFtcD

Upon right click (when Media switcher is set to “image to photoswipe) a huge play-icon-like thumbnail is displayed in lightbox. No video, nothing to play.

When a Blazy Photoswipe’s “Blazy” views field play-icon-like thumbnail is left clicked, I can see both a “copy link” (this is for the thumbnail png image) and a “copy video link” options.

“copy video link” gives this:

http://MYSITE.org/sites/MYSITE.org/files/2024-04/848x402_DELETE_AFTER_TE...

and when it is pasted on a different browser window the video is playable.

Thanks for reading

đź’¬ Support request
Status

Fixed

Version

2.0

Component

Documentation

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Questionss
  • 🇮🇩Indonesia gausarts

    Your observations are mostly correct.

    What you have found with Blazy Views field and PhotoSwipe is called limitations.

    They can be solved once I have a client who pay for the job, like the case with Splidebox. Maybe you would like to pay 1-2 hour work for this, says around $100?

    To prove it, just try Splidebox for your particular need with Blazy views field. PhotoSwipe is less updated than Splidebox due to paying clients :)

    Setting up lightboxes inside a Views UI also require you to read the Blazy for Multimedia Gallery via Views UI + Lightboxes sections for details of instructions. Failing to follow these up may cause you unnecessary failures. See /admin/help/blazy_ui.

    About Blazy Views field.
    This one has indeed very poor and limited info about field data causing limited features and other limitations to lightboxes.

    Too many limited info here. Most lightboxes, including PhotoSwipe, even have no idea to treat local videos, etc. due to no field info.

    Only Splidebox is more educated so far on this regard, not PhotoSwipe, etc. thanks to paying clients :)

    The most important is you must have Blazy Grid under Views LHS Format.

    If you are just starting out, always start from the basics -- Content types > Article|Page > Manage display formatters, not Views UI.

    Views UI has some quirks and limitations, not to mention it might also require you to setup relationship, filter criteria, toggle Use field template, etc. Aside from Blazy limited options in there if using Blazy views field. Once you are familiar with node display, you'll advanve to Views UI with some familiarity of expectations.

    About poster images.
    This is already described in the form description, only clarified more:
    (Re-)Use the same field image normally field_media_image for all other Media entities other than Media Image as the thumbnail/ hires image previews. This way, local video/ audio will have poster image, similar to normal Image. Remote videos will have the same hires image, too.

    Steps:
    Visit Media types > Video > Manage fields > Add a new field > Re-use existing field > Select Image field named field_media_image. The same workflow applies to audio, remote videos, documents, etc.

    Then upload an image to that new field to have poster images.

    The following may apply outside Blazy Views field.

    About swipeable local videos.
    It is not exactly the video interface being swipeable, but more about its horizontal surrroundings are. Yet, swipeable anyway.

    Similar to how Media instagram, pinterest, etc. are being swipeable in the lightbox interfaces like in Splidebox, but not PhotoSwipe for now.

    For remote videos, it is indeed swipeable, since it uses image preview, not iframes.

    About playable media in lightboxes.
    Not all lightboxes support this feature, not even when using Blazy Views field. Only Splidebox does as said above.

  • Hello again,

    Thanks for direct (in terms of clarifying the current limitations of Blazy Photoswipe and what’s needed for progress) and detailed explanations.

    First, I’ve already experimented with nodes approach, as a matter of fact this was a 10 years old site which I started to renovate a few weeks ago (like going to Drupal 10 from 7). Nodes option is not usable for me since I need a dynamic thumbnail grid as the front page (essentially the only page) where visitors may use views’ filtering facilities.

    Also the media should be uploaded with a most streamlined process, etc, hence I chose core media library method.

    So, no nodes : )

    Since you kindly took your precious time explaining things like current differences between various lightbox methods like photoswipe, splidebox, etc., I thought it would be an unparalleled laziness of me to not to try. So I did.

    Here are my observations:

    Splidebox when selected as a Media switcher target in a Media: Blazy field inserted in fields section of a view indeed (although through somewhat odd procedure) slides and plays local videos.

    First you have to click on a thumbnail on that Blazy -> Grid foundation grid, slide to the local video’s thumbnail in question, left click on the thumbnail to observe that play option is not available yet, wait for a few seconds and left click->play option becomes available. Then, watch your video (that cannot be displayed in a correct aspect ratio regardless of attempts to adjust settings, e.g., selecting fluid, etc. Yeah, to be honest, there’s a way to play slideable/swipeable local videos through Splidebox. However I cannot imagine a mainstream person who would be patient and curious enough to follow such a procedure. Let alone they need a proper computer and not a tablet etc.

    Of course there’s a non-zero possibility that my tired brain has made mistakes in settings, and things could have been more streamlined, but this was what I have experienced anyway.

    Ah! Another issue I’ve noticed with Splidebox is it does not obey Blazy’s “Lightbox caption” settings. Basically no captions at all. And that caption thing is pretty essential for my humble site : )

    By the way this closeable thumbnail carousel below the large display that Splidebox brings is fantastic. I wish it was available in Blazy Photoswipe too.

    Also, again this may be related to errors in settings, but I observe a significant slowness throughout the site when I use Splide modules.

    By the way this is an absolutely non-commercial, and essentially a hobbyist site, so although I sincerely wish that I could be able to fund you and other devs, this may not seem to happen, considering the current economics, unless a positive twist of fate occurs and people start banging the doors asking if any of the artworks can be purchased : )

    Looks like I'm going stick with core responsive grid and standalone Photosipe 4x. Another reason for that is the lack of a readily available grid gutter spacing setting in Blazy grid

    Again, many thanks for your time and explanations.

    All the best

    Q

  • By the way,

    After reading this last comment of mine again, I got the impression that it was a bit too Splidebox oriented, which may not be perfectly suitable for the Blazy PhotoSwipe issues area. However this Splidebox, Blazy PhotoSwipe pros/cons matter seems pretty interconnected in this case. So I’m not sure if the Splidebox side should be separated and posted in the other relevant section.

    Ultimately, please feel free to unpublish it if you think that would be better.

    By the way I’m thinking about posting a new “help needed” topic, maybe here, or maybe there in the Splidebox issues area. It is about, when I try to disable “Splide X” module, due to my odd obsession of disabling unused modules, the Splidebox media switcher target in Media: Blazy disappears too (who would've guessed)

    : )

  • Status changed to Fixed about 2 months ago
  • 🇮🇩Indonesia gausarts

    About lightbox correct aspect.
    Hm, not sure what missed. It is defined by Lightbox media/video style option. Or do you have different video aspect ratios? If so, not supported by this single option, yet. But as with many features, it can always be solved if any backers :)

    About unpleasant local video procedure.
    Not sure what you meant, but sounded slowness to load the video, or other problems? If so:

    1. try optimizing the MP4 file. Many online video compressors to reduce file sizes to dramatically improve loading speed.
    2. use the previously mentioned local Video uploaded Image field for posters to avoid browsers expensively generating dynamic previews. Posters should be statically ready to avoid browsers' hardworks.

    About Splidebox caption.
    It is hidden in the question mark button in the top row to avoid blocking image/ video displays. Captions are only immediately visible for a single display, though. But I think, we should improve it by forcing to display it once on the initial encounter so that visitors are informed that the captions are there in the question mark. Then hidden later.

    About Splide slowness.
    Some reported major improvement in Splide performance compared to Slick. Maybe not Splide, just Splidebox. Two possibility:
    1. You just need to enable Drupal aggregation and caching. And try viewing it as an anonymous user.
    2. Improve Splidebox internal optimization. Admittedly, it currently relies on browsers lazyload, but technically can be optimized more by partial markup buildups/ additions for large galleries.

    About gutter spacing setting in Blazy grid.
    Custom CSS should do:

    1. override the padding:
      https://git.drupalcode.org/project/blazy/-/blob/3.0.x/css/components/gri...
    2. and also the margin:
      https://git.drupalcode.org/project/blazy/-/blob/3.0.x/css/components/gri...

    At least, we should consider a special CSS class is-b-gapless to remove spacing.

    About uninstall problem.
    It is a known issue with easy solution, especially with Views:

    1. Be sure you enable Default display at Views settings UI.
    2. Then before uninstallation, always remove the traces of the module being uninstalled from Default displays. The traces to remove are normally in Views LHS > Format and Fields.

    Normally Default display is hidden and keeping the remnants of module dependencies causing ramified uninstallation.

    About OOT.
    No worries, comparisons of the same feather birds are still in topics :)

    The OP problem remains as limitations in this particular module till backers come :)

    However the documentation part is assumed fixed or work as designed for now.

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • 🇮🇩Indonesia gausarts

    Just an FYI:
    The Blazy Views field lightbox issue should be fixed in Blazy:3.0.9.

Production build 0.69.0 2024