Gallery issues on configurable product page

[roma84]

Preconditions

1. Magento 2.2.1 and 2.1.10 with sample data
2. Stellar Solar Jacket product with assigned product video
3. Modified Magento_Catalog > gallery > fullscreen config in theme view.xml

Steps to reproduce

1. Go to Stellar Solar Jacket product page
2. Click on size attribute
3. Click on color attribute

Expected result

1. When you switch to video it should play
2. When you open image in full screen, it should account view.xml fullscreen config

Actual result

1. Video is displayed as image and does not work: https://prnt.sc/haof3a
2. Full screen mode ignores view.xml configuration

[magento-engcom-team]

@roma84, thank you for your report.
We were not able to reproduce this issue by following the steps you provided. If you'd like to update it, please reopen the issue.
We tested the issue on 2.3.0-dev, 2.1.10, 2.2.1

[roma84]

@magento-engcom-team, strange, i can reproduce it 100%.

Preconditions

• Ubuntu 17.10
• PHP 7.1.8
• Apache 2.4.27
• MySQL 5.7.20

Steps to reproduce

• downloaded Magento 2.2.1 with sample data from magento.com and installed it.
• added video from Vimeo to Stellar Solar Jacket product.
• changed gallery > fullscreen > navdir config from horizontal to vertical on line 216 in file
  vendor/magento/theme-frontend-luma/etc/view.xml.

Actual Result

You can see it on video: https://www.youtube.com/watch?v=TkPurMOXevo

• on page load everything works fine: video plays, thumbnails are vertical in fullscreen;
• after i selected size and color, you can see thumbnails are horizontal now and video doesn't played.

[roma84]

@magento-engcom-team looks like i cannot reopen it.

[roma84]

I found the code which causes the issues.

When you select attribute, AddFotoramaVideoEvents is called in swatch-renderer.js here:
https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js#L1173

Then it calls clearEvents here
https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js#L176-L183
and all event listeners are removed from gallery and following code stops working:
https://github.com/magento/magento2/blob/2.2-develop/lib/web/mage/gallery/gallery.js#L191-L222
Looks like this code applies fullscreen settings.

What about video, it does not work, because video options are concatenated to this.options.videoData array on every attribute click here:
https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js#L208-L211
Because of it, this.options.videoData array is growing in size on every swatch click, when you select it and when you deselect too.

[ihor-sviziev]

@roma84 I reopened it

[ishakhsuvarov]

@roma84, Closing, as PRs with the fixes are delivered.
Thank you for collaboration!

[okorshenko]

Hi @roma84
The issue has been fixed and delivered in 2.2-develop branch. Will be available with upcoming patch release.

[sunilit42]

@magento give me 2.2.6 instance

[magento-engcom-team]

Hi @sunilit42. Thank you for your request.
Unfortunately, I can only deploy instances for 2.3 release line

[sunilit42]

@magento give me 2.3-develop instance

[magento-engcom-team]

Hi @sunilit42. Thank you for your request. I'm working on Magento 2.3-develop instance for you

[magento-engcom-team]

Hi @sunilit42, here is your Magento instance.
Admin access: https://i-12268-2-3-develop.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.