[TIMOB-8493] iOS: displaying issues with videos in a scrollableView

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2012-05-14T13:55:57.000+0000
Affected Version/s	Release 1.8.2
Fix Version/s	Release 2.1.0, Sprint 2012-10 API
Components	iOS
Labels	SupportTeam, api, module_media, qe-testadded
Reporter	Federico Casali
Assignee	Vishal Duggal
Created	2012-04-02T15:51:21.000+0000
Updated	2012-07-12T15:33:40.000+0000

Description

Problem description

When a video player is in each scrollableView view, orientation changes from portrait to landscape might cause the video to stop playing and disappear.

Steps to reproduce

var win1 = Titanium.UI.createWindow({  
    backgroundColor:'white'
});

var videoParams = {
  mediaControlStyle: Titanium.Media.VIDEO_CONTROL_EMBEDDED,
  scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT,
  height: '72%'
};

var videoViews = [];

for(var i=0; i<7; i++){
  videoViews.push(Ti.Media.createVideoPlayer(videoParams));
}

var scrollableView = Ti.UI.createScrollableView({
  views: videoViews,
  showPagingControl: true
});

scrollableView.addEventListener('scroll', function(e){
  videoViews[e.currentPage].url = 'movie.mp4';
});

win1.add(scrollableView);

win1.open();

- Create a scrollableView with a video in each view (used the movie.mp4 video taken also from KitchenSink). - Open the app and scroll to the last view. Result: video is displayed - Rotate the screen Result: video stops and is not displayed anymore - Change the number of views from 7 to 5 or set a cacheSize bigger than the stack Result: video works as expected also when rotated

Additional notes

Customer ticket link: http://support-admin.appcelerator.com/display/APP-992365

Comments

Vishal Duggal 2012-05-04

Probably due to the fact the views are removed and re-added during orientation change
Vishal Duggal 2012-05-09

Pull pending https://github.com/appcelerator/titanium_mobile/pull/2156
Blain Hamon 2012-05-11

It's a number of things, although I found that videos do glitch out if you have more than one onscreen. (Note that in Apple's own native implementation, you can have more than one videoplayer active at a time.) I'm going to check to see if this is a fully native issue, or if there is something that can be done in Titanium.

Vishal Duggal 2012-05-11

Above test code will not work as only one movie player can be active at a time. Use this code to test instead.

   var win1 = Titanium.UI.createWindow({  
       backgroundColor:'white',
       orientationModes:[Ti.UI.PORTRAIT,Ti.UI.LANDSCAPE_LEFT,Ti.UI.LANDSCAPE_RIGHT]
   });
    
   var videoParams = {
     mediaControlStyle: Titanium.Media.VIDEO_CONTROL_EMBEDDED,
     scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT,
     height: '72%'
   };
    
   var videoViews = [];
   
   var curVideo = null;
    
   for(var i=0; i<20; i++){
     videoViews.push(Ti.Media.createVideoPlayer(videoParams));
   }
    
   var scrollableView = Ti.UI.createScrollableView({
     views: videoViews,
     showPagingControl: true
   });
    
   scrollableView.addEventListener('scroll', function(e){
   	if (curVideo)
   	{
   		if (curVideo == videoViews[e.currentPage])
   		{
   			return;
   		}
   		curVideo.stop();
   	}
   	curVideo = videoViews[e.currentPage];
   	curVideo.url = 'movie.mp4';
   	curVideo.play();
   });
    
   win1.add(scrollableView);
    
   win1.open();

Blain Hamon 2012-05-14

Pull request merged. The developer may have to modify his JS file to resemble the final test in order to compensate for iOS not allowing more than one video player at a time.
Tamila Smolich 2012-06-26

Tested with: Titanium Studio, build: 2.1.0.201206251749 Titanium SDK: 2.1.0.v20120626104306 Device: iPad 3rd gen (5.1.1) First view is blank, and 7th view is covered with black blank window after device rotation. I used Vishal's code for testing, but changed number of views from 20 to 7.

Vishal Duggal 2012-06-26

Use this updated test code. The whole view management can be done much better through the newly introduced 'scrollEnd' event

   var win1 = Titanium.UI.createWindow({  
       backgroundColor:'white',
       orientationModes:[Ti.UI.PORTRAIT,Ti.UI.LANDSCAPE_LEFT,Ti.UI.LANDSCAPE_RIGHT]
   });
     
   var videoParams = {
     mediaControlStyle: Titanium.Media.VIDEO_CONTROL_EMBEDDED,
     scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT,
     height: '72%'
   };
     
   var videoViews = [];
    
   var curVideo = null;
     
   for(var i=0; i<7; i++){
     videoViews.push(Ti.Media.createVideoPlayer(videoParams));
   }
     
   var scrollableView = Ti.UI.createScrollableView({
     views: videoViews,
     showPagingControl: true
   });
     
   scrollableView.addEventListener('scrollEnd', function(e){
       if (curVideo)
       {
           if (curVideo == videoViews[e.currentPage])
           {
               return;
           }
           curVideo.stop();
           curVideo.url = null;
       }
       curVideo = videoViews[e.currentPage];
       curVideo.url = 'movie.mp4';
       curVideo.play();
   });
     
   win1.add(scrollableView);
   
   win1.addEventListener('open',function(e){
   	curVideo = videoViews[scrollableView.currentPage];
       curVideo.url = 'movie.mp4';
       curVideo.play();
   })
     
   win1.open();

Tamila Smolich 2012-06-27

Closing as fixed. Tested and verified with: Titanium Studio, build: 2.1.0.201206251749 Titanium SDK: 2.1.0.v20120627121617 Device: iPad 3rd gen (5.1.1)

JSON Source