Media Gallery videos preview does not stop playing neither when slide changes nor when player closes

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X EE, Master
• Fix Version/s: 7.0.0 DXP FP22, 7.0.0 DXP FP23, 7.0.0 DXP SP4, 7.0.X EE, 7.0.4 CE GA5, 7.1.X, Master
• Component/s: Media Gallery widget
• Labels:
  • front-end
  • liferay-digital-enterprise-70-sp4
  • liferay-digital-enterprise-70-sp5
  • liferay-fixpack-de-22-7010
  • liferay-fixpack-de-23-7010
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/50049
• What problem did the customer find?:
  Hide

  When videos are published and showed by "Media Gallery" portlet, they are played until the end although you change between them. So if you play various videos, their sound mixes. And if you close video preview, they are playing until the end. It is a bad user experience.

  Show

  When videos are published and showed by "Media Gallery" portlet, they are played until the end although you change between them. So if you play various videos, their sound mixes. And if you close video preview, they are playing until the end. It is a bad user experience.
• What do you think is the root cause? (if known):
  Hide

  There are two different areas the page where Media Gallery portlet is rendered: ; ; 1.- A control (player) for rotating between different images (videos). It a list of (images/videos) thumbnails and some additional buttons for start/pause/next/previous/exit. ; ; 2.- A viewer that has embedded a video player similar to following: ; <video id="yui_patched_v3_18_1_1_1497874650938_134" controls="controls" class="video-node" poster="http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;videoThumbnail=1"><source type="video/mp4;" src="http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;supportedVideo=1&amp;videoPreview=1&amp;type=mp4"><object id="yui_patched_v3_18_1_1_1497874650938_222" type="application/x-shockwave-flash" data="/o/frontend-js-web/aui/aui-video/assets/player.swf?t=1497874651123" height="100%" width="100%"><param name="allowfullscreen" value="true"><param name="bgColor" value="#000000"><param name="wmode" value="opaque"><param name="flashVars" value="controls=true&amp;poster=http%3A%2F%2Flocalhost%3A8080%2Fdocuments%2F20143%2F31502%2Fsample.avi%2Fe88e8f54-e357-df30-d619-b641c264a5a2%3Fversion%3D1.0%26videoThumbnail%3D1&amp;src=http%3A%2F%2Flocalhost%3A8080%2Fdocuments%2F20143%2F31502%2Fsample.avi%2Fe88e8f54-e357-df30-d619-b641c264a5a2%3Fversion%3D1.0%26supportedVideo%3D1%26videoPreview%3D1%26type%3Dmp4"><img src="http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;videoThumbnail=1" alt=""></object></video> ; Important: there is a viewer for each video, but only one selected video's is showed. ; ; Thus, if you publish three videos (A, B and C), you will have: ; - A list of three buttons, so if you click on, you are positioned (selected) on that video. ; - A button for start/pause the rotation between videos. ; - A 'next' button and a 'previous' button for moving between videos. ; - An 'exit' button. ; - Three viewers, but only one of them showed (actived). These viewers can play/pause each video in an independent way. ;

  Show

  There are two different areas the page where Media Gallery portlet is rendered: 1.- A control (player) for rotating between different images (videos). It a list of (images/videos) thumbnails and some additional buttons for start/pause/next/previous/exit. 2.- A viewer that has embedded a video player similar to following: <video id="yui_patched_v3_18_1_1_1497874650938_134" controls="controls" class="video-node" poster=" http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;videoThumbnail=1 "><source type="video/mp4;" src=" http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;supportedVideo=1&amp;videoPreview=1&amp;type=mp4 "><object id="yui_patched_v3_18_1_1_1497874650938_222" type="application/x-shockwave-flash" data="/o/frontend-js-web/aui/aui-video/assets/player.swf?t=1497874651123" height="100%" width="100%"><param name="allowfullscreen" value="true"><param name="bgColor" value="#000000"><param name="wmode" value="opaque"><param name="flashVars" value="controls=true&amp;poster=http%3A%2F%2Flocalhost%3A8080%2Fdocuments%2F20143%2F31502%2Fsample.avi%2Fe88e8f54-e357-df30-d619-b641c264a5a2%3Fversion%3D1.0%26videoThumbnail%3D1&amp;src=http%3A%2F%2Flocalhost%3A8080%2Fdocuments%2F20143%2F31502%2Fsample.avi%2Fe88e8f54-e357-df30-d619-b641c264a5a2%3Fversion%3D1.0%26supportedVideo%3D1%26videoPreview%3D1%26type%3Dmp4"><img src=" http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;videoThumbnail=1 " alt=""></object></video> Important: there is a viewer for each video, but only one selected video's is showed. Thus, if you publish three videos (A, B and C), you will have: - A list of three buttons, so if you click on, you are positioned (selected) on that video. - A button for start/pause the rotation between videos. - A 'next' button and a 'previous' button for moving between videos. - An 'exit' button. - Three viewers, but only one of them showed (actived). These viewers can play/pause each video in an independent way.
• Proposed solution (if any):
  Hide

  Having a mechanism of communication between described areas could resolve the problem. When the user selects a video (either clicking on it, or by auto-rotation, or by next/previous...) a 'signal' could be sent to the viewer for pausing the current video. Then the (new) selected video is showed in the viewer. ; ;

  Show

  Having a mechanism of communication between described areas could resolve the problem. When the user selects a video (either clicking on it, or by auto-rotation, or by next/previous...) a 'signal' could be sent to the viewer for pausing the current video. Then the (new) selected video is showed in the viewer.

Preconditions:

1. Enable Xuggler.
2. From "Documents and Media", publish some videos with sound (i.e. three or four)
3. Add "Media Gallery" portlet to a page.

Steps to reproduce:
1.- Navigate to page with "Media Gallery" portlet in.
2.- Click on it to start slideshow.
3.- A player is showed and the slides starts to cycle.
4.- Click on play video to start preview of one of them: video starts playing.
5.- Change to another slide before video ends playing.

Expected behaviour:

• Video stops playing.

Observer behaviour:

• Video continues playing.

6.- Close the Media Gallery portlet while a video is playing.

Expected behaviour:

• Video stops playing.

Observer behaviour:

• Video continues playing.

Note.
In 6.2.x the behaviour is as expected (video stops) but analysing the source code you can see that implementation is different. So it could be considered a refactoring issue.