[TIMOB-14938] iOS: VideoPlayer Timeline and Navigation Bar mispositioned after using Fullscreen mode (Tabgroup)

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Won't Fix
Resolution Date	2013-10-04T20:02:25.000+0000
Affected Version/s	n/a
Fix Version/s	2013 Sprint 18, 2013 Sprint 20, 2013 Sprint 20 API
Components	iOS
Labels	supportTeam
Reporter	Eduardo Gomez
Assignee	Vishal Duggal
Created	2013-08-22T20:41:08.000+0000
Updated	2017-03-23T22:40:40.000+0000

Description

Problem

VideoPlayer time bar and navigation bar are mispositioned. Using TiUITabgroup follow reproduction steps:

Steps to reproduce

First, click the video so the control bar shows. Second, change orientation. Third, you'll see the time bar mispositioned. Forth, close the video player, the tab group navigation bar is mispositioned too. e.g. Screen shoot attached. On iPad, if you change orientation during splash screen, you'll see the same issue.

Simple sample

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});

var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var btn = Ti.UI.createButton({title:'open video'});
btn.addEventListener('click',function(){
    videoWin.open();
});
win1.add(btn);

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

var label2 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 2',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

win2.add(label2);

var videoWin = Ti.UI.createWindow({
    title:'video player',
    backgroundColor:'#000',
    fullscreen:true
});
var vidplayer = Ti.Media.createVideoPlayer({
    mediaControlStyle:Ti.Media.VIDEO_CONTROL_FULLSCREEN,
    width:Ti.UI.FILL,
    height:Ti.UI.FILL,
    //url:'http://d269mq2d9sw4la.cloudfront.net/eSchool-video/13Q1-DannySilk-CultureOfHonor/13Q1-DannySilk-CultureOfHonor01.mp4'
    url:'http://d269mq2d9sw4la.cloudfront.net/eSchool-video/09Q2-MikeBickle-1stCommandment/09Q2-MikeBickle-1stCommandment02.mp4'
});
videoWin.add(vidplayer);
//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  


// open tab group
tabGroup.open();

tiapp.xml

Support orientations so app can rotate along with device

    <iphone>
        <orientations device="iphone">
            <orientation>Ti.UI.PORTRAIT</orientation>
            <orientation>Ti.UI.UPSIDE_PORTRAIT</orientation>
            <orientation>Ti.UI.LANDSCAPE_LEFT</orientation>
            <orientation>Ti.UI.LANDSCAPE_RIGHT</orientation>
        </orientations>
        <orientations device="ipad">
            <orientation>Ti.UI.PORTRAIT</orientation>
            <orientation>Ti.UI.UPSIDE_PORTRAIT</orientation>
            <orientation>Ti.UI.LANDSCAPE_LEFT</orientation>
            <orientation>Ti.UI.LANDSCAPE_RIGHT</orientation>
        </orientations>
        <backgroundModes>
            <mode>location</mode>
        </backgroundModes>
        <requires>
            <feature>gps</feature>
            <feature>location-services</feature>
            <feature>magnetometer</feature>
        </requires>
    </iphone>

Attachments

File	Date	Size
Screenshoot.jpg	2013-08-22T20:43:53.000+0000	30150
Untitled.tiff	2013-08-22T20:41:08.000+0000	66274

Comments

Vishal Duggal 2013-09-06

Set the fullscreen property on the video to true and things should work fine. Use fullscreen controls with a fullscreen video.
Vishal Duggal 2013-09-06

Still an issue when you exit fullscreen mode

Vishal Duggal 2013-09-06

Use this code as a workaround on IOS 6.X and below. There seems to be some issue with using Ti.Media.VIDEO_CONTROL_FULLSCREEN

   // this sets the background color of the master UIView (when there are no windows/tab groups on it)
   Titanium.UI.setBackgroundColor('#000');
    
   // create tab group
   var tabGroup = Titanium.UI.createTabGroup();
    
    
   //
   // create base UI tab and root window
   //
   var win1 = Titanium.UI.createWindow({  
       title:'Tab 1',
       backgroundColor:'#fff'
   });
    
   var tab1 = Titanium.UI.createTab({  
       icon:'KS_nav_views.png',
       title:'Tab 1',
       window:win1
   });
    
   var btn = Ti.UI.createButton({title:'open video'});
   btn.addEventListener('click',function(){
       videoWin.open();
   });
   win1.add(btn);
    
   //
   // create controls tab and root window
   //
   var win2 = Titanium.UI.createWindow({  
       title:'Tab 2',
       backgroundColor:'#fff'
   });
   var tab2 = Titanium.UI.createTab({  
       icon:'KS_nav_ui.png',
       title:'Tab 2',
       window:win2
   });
    
   var label2 = Titanium.UI.createLabel({
       color:'#999',
       text:'I am Window 2',
       font:{fontSize:20,fontFamily:'Helvetica Neue'},
       textAlign:'center',
       width:'auto'
   });
    
   win2.add(label2);
   
   var videoWin = Ti.UI.createWindow({
       title:'video player',
       backgroundColor:'#000',
       fullscreen:true
   });
   var vidplayer = Ti.Media.createVideoPlayer({
       mediaControlStyle:Ti.Media.VIDEO_CONTROL_FULLSCREEN,
       width:Ti.UI.FILL,
       height:Ti.UI.FILL,
       fullscreen:true,
       autoplay:false,
       //url:'http://d269mq2d9sw4la.cloudfront.net/eSchool-video/13Q1-DannySilk-CultureOfHonor/13Q1-DannySilk-CultureOfHonor01.mp4'
       url:'http://d269mq2d9sw4la.cloudfront.net/eSchool-video/09Q2-MikeBickle-1stCommandment/09Q2-MikeBickle-1stCommandment02.mp4'
   });
   
   vidplayer.addEventListener('fullscreen',function(e){
       
       if(e.entering == true) {
           vidplayer.mediaControlStyle = Ti.Media.VIDEO_CONTROL_FULLSCREEN;
       } else {
           setTimeout(function(){
               vidplayer.mediaControlStyle = Ti.Media.VIDEO_CONTROL_EMBEDDED;
           },500);
       }
       
   })
   videoWin.add(vidplayer);
   
   videoWin.addEventListener('open',function(){
       vidplayer.play();
   })
   //
   //  add tabs
   //
   tabGroup.addTab(tab1);  
   tabGroup.addTab(tab2);  
    
    
   // open tab group
   tabGroup.open();

Vishal Duggal 2013-09-06

JS workaround provided
Vishal Duggal 2013-10-04

@[~btran] I'm going to resolve this as won't fix. To properly resolve this and meet customers needs you need to create a custom overlay with your own controls to manage movie state and set mediaControlStyle to NONE.
Lee Morris 2017-03-23

Closing ticket as Won't Fix with reference to the above comments.

JSON Source