Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-26033] iOS: Ti.Media.VideoPlayer shows an error on Window Close on SDK 7.1.1.GA

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2018-05-22T09:36:59.000+0000
Affected Version/sn/a
Fix Version/sRelease 7.3.0
ComponentsiOS
Labelsn/a
ReporterMostafizur Rahman
AssigneeVijay Singh
Created2018-05-11T15:45:10.000+0000
Updated2018-06-21T18:05:22.000+0000

Description

Hello, The following error occurs when closing a window with a video player control with SDK 7.1.1.GA on iOS. On Android, it works just fine. *Test Environment:* Appcelerator Command-Line Interface, version 7.0.3 SDK: 7.1.1.GA *Test code:* index.xml
<Alloy>
	<Window class="container">
		<Label id="label" onClick="doClick">Open Video Error Page</Label>
	</Window>
</Alloy>
video.xml
<Alloy>
	<Window id="winVideo" backgroundColor="#cccccc">
    <Label id="videoLocalClose"></Label>
    <Label id="videoAdd" top="100" color="blue">Add Video First</Label>
    <Label id="videoPlay" top="200" color="purple">Then Play Video</Label>
		<Label id="videoWindowClose" bottom="0" height="80" color="red">Close Window With Error</Label>
  </Window>
</Alloy>
index.js
function doClick(e) {
	Alloy.createController('video', {}).getView().open();
}
$.index.open();
video.js
var activeMovie = null;
var videoMedia = null;

$.videoAdd.addEventListener('click', function(e)
{
  Ti.Media.showCamera({
        mediaTypes:                  [Ti.Media.MEDIA_TYPE_VIDEO],
        videoMaximumDuration:        300000,
        videoQuality:                Titanium.Media.QUALITY_MEDIUM,
        saveToPhotoGallery:          true,
        allowEditing:                false,
        success:function(e){
            saveVideoLocal(e.media);
        }
    });
});

function saveVideoLocal(media) {
    videoMedia = media;
}

$.videoPlay.addEventListener('click', function(e)
{
      activeMovie = Titanium.Media.createVideoPlayer({
          top : 0,
          width : '100%',
          bottom:100,
          visible:true,
          zIndex:999999,
          mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
          scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
          autoplay : true,
          media: videoMedia
      });
      // Now if I use url instead of media then the video will not play. ( Same of android and iOS)
      // If I put a fake url like (url: 'http://fakeMovie.com' and still set media property the video will not play but error will not be thrown)
      // You can even put both media and url key above to same videoMedia and it will throw the error.
      // Looks like you have to set the url key at the creation of the control to not throw the error.
        // But url does not seem to be working for local media where the media key should be used.

      // Also when I get the script error the app will not crash but it will also not recognize
        //any future clicks on the listview control on the page that opened the video page.

      $.winVideo.add(activeMovie);
});
$.videoWindowClose.addEventListener('click', function(e)
{
  $.winVideo.close();
});
$.winVideo.addEventListener('close', function(e)
{
  if (activeMovie != null) {
      activeMovie.release();
      $.winVideo.remove(activeMovie);
  }
  activeMovie = null;

  $.destroy();
  $.off();
  $.winVideo = null;
});
index.tss
".container": {
	backgroundColor:"white"
}

"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
}

"#label": {
	font: {
		fontSize: 12
	}
}
alloy.js
Attach in the text file
Note: Also I have added the full project on the attachment file. *Error:*
[ERROR] :  Script Error {
[ERROR] :      column = 24;
[ERROR] :      line = 119;
[ERROR] :      message = "Cannot remove an observer <TiMediaVideoPlayerProxy 0x11808d000> for the key path \"url\" from <TiMediaVideoPlayerProxy 0x11808d000> because it is not registered as an observer.";
[ERROR] :  }
In this test code customer used *media* in the create command to play a video stored on the local device. If they put a fake url in the create it won't throw the error but even though they set the media later then it will not play the video. Again, this only happens on iOS. Thanks

Attachments

FileDateSize
alloy.js2018-05-14T16:35:59.000+00001696
hypertest.zip2018-05-14T17:08:32.000+00009209344

Comments

  1. Hans Knöchel 2018-05-15

    This issue is invalid. The VideoPlayer does not support the media property and passing e.media from the video-picker dialog is also not allowed, since it's a Ti.Blob instance, not an actual URL. Please pass the nativePath of the media to the url property and see if that works. Also, the Alloy-based app is hard to debug, so a minimalistic app.js test-case (no styling and external layout config) would help cracking it down in case the above still does not work. *EDIT*: It seems like the media property indeed is supported, although not supported. I would still like to know if passing the native-path of the Blob resolves it already and request the app.js test case (from support).
  2. Vijay Singh 2018-05-22

    PR - https://github.com/appcelerator/titanium_mobile/pull/10071 Test Case 1 (with url) -
       var win = Ti.UI.createWindow({
       	title : 'Starting Window',
       	backgroundColor: 'white'
       });
       
       var openLabel = Ti.UI.createLabel({
       	text : "Open Video Window",
       });
       
       openLabel.addEventListener('click', function(e) {
       	videoWin.open();
       });
       
       var videoWin = Ti.UI.createWindow({
       	title : 'Video window',
       	backgroundColor : '#a5a5a5'
       });
       
       var activeMovie = null;
       var playLabel = Ti.UI.createLabel({
       	text : "Play the video file",
       	top : 200,
       });
       playLabel.addEventListener('click', function(e) {
       	activeMovie = Titanium.Media.createVideoPlayer({
       		top : 100,
       		width : Ti.UI.FILL,
       		bottom : 200,
       		visible : true,
       		zIndex : 999999,
       		mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
       		scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
       		autoplay : true,
       		elevation : 24,
       		url : 'https://www.w3schools.com/html/mov_bbb.mp4'
       	});
       	videoWin.add(activeMovie);
       });
       videoWin.add(playLabel);
       
       var closeLabel = Ti.UI.createLabel({
       	text : "Close Video Window",
       	bottom : 100,
       });
       closeLabel.addEventListener('click', function(e) {
       	if (activeMovie != null) {
       		activeMovie.release();
       		win.remove(activeMovie);
       	}
       	activeMovie = null;
       	videoWin.close();
       });
       videoWin.add(closeLabel);
       
       win.add(openLabel);
       win.open(); 
       
    Test Case 2 -
       var win = Ti.UI.createWindow({
       	title : 'Starting Window',
       	backgroundColor: 'white'
       });
       var videoWindow = Ti.UI.createLabel({
       	top : 300,
       	text : 'open video window'
       });
       videoWindow.addEventListener('click', function(e) {
       	var videoWin = Ti.UI.createWindow({
       		title : 'Video window',
       		backgroundColor : '#a5a5a5'
       	});
        
       	var videoFile = Titanium.Filesystem.getFile(Titanium.Filesystem.getApplicationDataDirectory(), 'Local_Ad_Video_File_1.MOV');
        
       	var saveLabel = Ti.UI.createLabel({
       		text : "Save a video file",
       		top : 200,
       	});
       	saveLabel.addEventListener('click', function(e) {
       		Ti.Media.showCamera({
       			mediaTypes : [Ti.Media.MEDIA_TYPE_VIDEO],
       			videoMaximumDuration : 300000,
       			videoQuality : Titanium.Media.QUALITY_MEDIUM,
       			saveToPhotoGallery : true,
       			allowEditing : false,
       			success : function(e) {
       				saveVideoLocal(e.media);
       			}
       		});
       		saveLabel.hide();
       		playLabel.show();
       	});
       	function saveVideoLocal(media) {
       		videoFile.write(media);
       	}
        
        
       	videoWin.add(saveLabel);
        
       	var activeMovie = null;
       	var playLabel = Ti.UI.createLabel({
       		text : "Play the video file",
       		top : 200,
       		visible : false
       	});
       	playLabel.addEventListener('click', function(e) {
       		activeMovie = Titanium.Media.createVideoPlayer({
       			top : 100,
       			width : Ti.UI.FILL,
       			bottom : 200,
       			visible : true,
       			zIndex : 999999,
       			mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
       			scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
       			autoplay : true,
       			elevation : 24,
       			url : videoFile.nativePath
       		});
       		videoWin.add(activeMovie);
       		closeLabel.show();
       	});
       	videoWin.add(playLabel);
        
       	var closeLabel = Ti.UI.createLabel({
       		text : "Close Video Window",
       		bottom : 100,
       		visible : false
       	});
       	closeLabel.addEventListener('click', function(e) {
       		if (activeMovie != null) {
        
       			// THIS IS THE LINE THAT THROWS THE ERROR. Now in the docs it says:
       			//Releases the internal video resources immediately.
       			// This is not usually necessary but can help if you no longer need to use the player after it is used to help converse memory.
       			// It also says android 0.9 and iOS 0.9 but it is throwing the following error on iOS:
       			/*
        
       			[ERROR] Script Error {
       			[ERROR] column = 23;
       			[ERROR] line = 97;
       			[ERROR] message = "Cannot remove an observer <TiMediaVideoPlayerProxy 0x104016800> for the key path \"url\" from <TiMediaVideoPlayerProxy 0x104016800> because it is not registered
       			as an observer.";
       			[ERROR] }
        
       			*/
       			// On iOS: if I comment out the release line below it will not throw the error but documentation says it can help conserve memory if used.
        
       			activeMovie.release();
        
       			win.remove(activeMovie);
       		}
       		activeMovie = null;
       		videoWin.close();
       	});
       	videoWin.add(closeLabel);
        
       	videoWin.open();
       });
       win.add(videoWindow);
       win.open(); 
       
  3. Samir Mohammed 2018-06-21

    *Closing ticket.* fix can be seen in SDK Version: 7.3.0.v20180618182516 *FR (Passed) Test Steps:*

    Created an application with the first test case

    Ran the application

    Open the video window

    Let the video play

    Closed the video window

    *Application no longer showed an error*

    Created a new application with the second test case

    Ran the program

    Pressed the Open video window button

    Pressed the Save a video file button then pressed Play a video file button

    Closed the video window

    *Application no longer showed an error*

    *Test Environment*
       APPC Studio: 5.0.0.201712081732
       APPC CLI: 7.0.4
       iphone 6 11.2 emulator
       Operating System Name: Mac OS High Sierra
       Operating System Version: 10.13
       Node.js Version: 8.9.1
       Xcode 9.2
       

JSON Source