In MediaGallery template, check if a handler for video files exists and render some kind of fallback if there is not

smartstore / Smartstore

A modular, scalable and ultra-fast open-source all-in-one eCommerce platform built on ASP.NET Core 7

http://www.smartstore.com/

GNU Affero General Public License v3.0

1.2k stars 447 forks source link

In MediaGallery template, check if a handler for video files exists and render some kind of fallback if there is not #918

Closed suatsuphi closed 3 weeks ago

suatsuphi commented 11 months ago

Hi,

Preview picture does not appear in videos.

I thought it was caused by the video, so I tried it in the live demo. https://ibb.co/VtNKC45

When I try it on the current project, it looks like the picture. https://ibb.co/rQQkVZM

markwoerdenweber commented 11 months ago

Hi,

I have not been able to reproduce this issue. What file format are you using?

Regards

suatsuphi commented 11 months ago

nakliye.mp4 this file exists here: https://core.smartstore.com/backend/admin/mediamanager/?path=catalog

Cauld you test in debugging mode on visual studio? https://localhost:44325/ upload video for any product and view product

markwoerdenweber commented 11 months ago

This is what it looks like on my screen:

productdetails-video-preview-small

After refreshing the page, the backend displayed the preview image.

suatsuphi commented 11 months ago

I'm not working on hosting. I run the project on visual studio After refreshing the page last seconds, not displayed the preview image.

suatsuphi commented 11 months ago

the image doesn't come from the url here. it is a video http://localhost:44325/media/253/catalog/nakliye2.mp4?size=680

markwoerdenweber commented 11 months ago

It could be a problem caused by referencing an mp4 file in an img tag. Could you test this in an independent context? Also, what browser are you using?

suatsuphi commented 11 months ago

https://github.com/smartstore/Smartstore

1- I downloaded and ran the project 2- SQL Server or SQLITE and Media storage= File System that I did the installation by selecting 3- I have attached any video to any product.

Could you download it from github as a new project and try it?

markwoerdenweber commented 11 months ago

I could not reproduce the problem on a fresh installation either. What browser are you using, and have you tested whether a simple HTML file containing an img tag with the src attribute pointing to an mp4 file will display the preview image correctly?

suatsuphi commented 11 months ago

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

</body> 
</html>

Microsoft Edge Version 120.0.2210.61 (Official build) (64-bit)

Chrome 120.0.6099.71 (Official Compilation) (64 bit)

Firefox 120.0.1 (64 bit)

I said that I download the project from github and run it in debug mode on visual studio.

could you be using it together with Media-Manager?

Can you give a link to the Media-Manager demo version?

suatsuphi commented 11 months ago

there is an error message where I marked slick-lazyload-error

suatsuphi commented 10 months ago

thumb images that occur when I upload images do not occur when I upload videos

markwoerdenweber commented 10 months ago

Automatic thumbnail generation for videos is an exclusive feature of Media Manager.

If you're interested, please contact sales@smartstore.com for more information.

suatsuphi commented 10 months ago

Can the bug at least be fixed, because the picture is not shown, but instead the video or the picture of the video icon can be shown? slick-lazyload-error

muratcakir commented 10 months ago

Please make sure that mp4 is defined as valid video extension via Configuration / Settings / Media / Media types / Video.

However, without the Media Manager plugin you won't get a thumbnail, just an icon.

suatsuphi commented 10 months ago

However, without the Media Manager plugin you won't get a thumbnail, just an icon.

as you said, there is no need for a small image. just don't give an error, it gives an error that the image cannot be displayed. can the img tag be removed? the play button is enough

It gives error when img tag!

suatsuphi commented 4 months ago

can this problem be fixed? I made a patch like below.

Can it be added to 5.2.0?

MediaGallery.cshtml

else
{
    <figure class="file-figure gal-item-content">
        <picture class="file-thumb show fs-display-3" data-type="video" title="@file.TitleAttribute">
            <img class="file-img d-none" attrs="@srcAttributes" alt="@file.Alt" />
            <video class="file-video" alt="@file.Alt" attrs="@srcAttributes">
                <source src="@file.GetUrl()" type="video/mp4">
            </video>
        </picture>
    </figure>
}

suatsuphi commented 3 weeks ago

  <figure class="file-figure gal-item-content">
      <picture class="file-thumb show fs-display-3" data-type="video" title="@file.TitleAttribute">
          <img class="gal-item-content d-none" src="@Model.FallbackUrl" alt="@Model.DefaultAlt" />
          <video class="file-img file-video" alt="@file.Alt" attrs="@srcAttributes">
              <source src="@file.GetUrl()" type="video/mp4">
          </video>
      </picture>
  </figure>

Can this section be fixed? I made a patch like this and it works fine! If I don't use the img tag, it gives an error like this.

Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect') at Object.getThumbBoundsFn (smartstore.gallery.js:531:48) at PhotoSwipe. (photoswipe.js:2951:75) at _shout (photoswipe.js:433:20) at PhotoSwipe.init (photoswipe.js:891:6) at HTMLAnchorElement. (smartstore.gallery.js:553:30) at HTMLDivElement.dispatch (jquery-3.7.1.js:5145:27) at elemData.handle (jquery-3.7.1.js:4949:28)

muratcakir commented 3 weeks ago

@markwoerdenweber Please review, check and apply fix.