Search code examples
iostitaniumappcelerator

iOS - Titanium Appcelerator , Create a video gallery with preview


What I want to do is create a video gallery with n video. Add n view in a ScrollView, a view for each video, and load into every view a picture from the corresponding video (waiting for the loading of each video). While holding down (TouchStart) on a view will be loaded in the view (preview) other images of the video (so to display the video preview directly in the mini view) until the finger is released (touchEnd).

So far , is ok, my problem is that I want by pressing (CLICK) on the mini-view the video was displayed in full screen!

enter image description here

Here is my code

//****************************************************************************************************************

    var arr_vidplayer_VARIE = [];
    var arr_vidplayer_VARIE_duration = [];
    var arr_vidplayer_VARIE_cont = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
    var timer_VARIE = null;

    var num_video_VARIE = 37;
    var arr_view_VARIE = [];
    var left_VARIE= -200;
    var top_VARIE = -100;
    var actual_video_VARIE = 1;

//****************************************************************************************************************

var win = Ti.UI.createWindow({
    backgroundColor : 'white',
    fullscreen : true
});


var scroll_VARIE = Ti.UI.createScrollView({
   width : 1024,
   height : 700,
   top : 0 
});

scroll_VARIE.addEventListener("scroll",function(e){
   clearInterval(timer_VARIE);
});

//****************************************************************************************************************

function START_VARIE(){

    if(actual_video_VARIE <= num_video_VARIE){

        if((actual_video_VARIE-1) %4 == 0){
            top_VARIE+=150;
            left_VARIE=45;
        }else{
            left_VARIE+=245;
        }

        CREATE_VIDEO_VARIE(top_VARIE,left_VARIE,actual_video_VARIE);

    }
}

function CREATE_VIDEO_VARIE(top,left,id){

    var myurl = "/video/"+id+".mov";

    var video = Titanium.Media.createVideoPlayer({
        url : myurl,
        mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
        scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
        fullscreen : true,
        id : parseInt(id),
        autoplay : true,
        //zIndex : 9999999999999
        //visible : false
    });

    video.addEventListener("loadstate",function(e){
        END_LOAD_VARIE(e.source.id,e.loadState);
    });

    arr_vidplayer_VARIE.push(video);

    var view_video = Ti.UI.createView({
        width : 200,
        height : 120,
        left : left,
        top : top,
        id : parseInt(id),
        borderColor : "black"
    });

    view_video.addEventListener("touchstart",function(e){

       var i = parseInt(e.source.id) - 1; 

       timer_VARIE = setInterval(function(e){

            if(arr_vidplayer_VARIE_cont[i] < arr_vidplayer_VARIE_duration[i]){

                arr_vidplayer_VARIE_cont[i]++;
                var img = arr_vidplayer_VARIE[i].thumbnailImageAtTime(arr_vidplayer_VARIE_cont[i],Titanium.Media.VIDEO_TIME_OPTION_EXACT);
                if(img == "[object TiBlob]"){
                    try{
                        arr_view_VARIE[i].children[0].image = arr_vidplayer_VARIE[i].thumbnailImageAtTime(arr_vidplayer_VARIE_cont[i],Titanium.Media.VIDEO_TIME_OPTION_EXACT);
                    }catch(e){
                        clearInterval(timer_VARIE);
                    }
                }

            }else{
                arr_vidplayer_VARIE_cont[i] = 0;
            }

       },200);

    });

    view_video.addEventListener("touchend",function(e){
       clearInterval(timer_VARIE);
    });

    view_video.addEventListener("click",function(e){

        arr_vidplayer_VARIE[parseInt(e.source.id)-1].play();
        Ti.API.info("play "+e.source.id);

    });

    var image_video = Ti.UI.createImageView({
        width : 200,
        height : 120,
        left : 0,
        top : 0,
        id : parseInt(id),
    });


    var activity = Ti.UI.createActivityIndicator({
       style : Ti.UI.iPhone.ActivityIndicatorStyle.DARK
    });

    view_video.add(image_video);
    view_video.add(activity);
    //win.add(video);
    activity.show();

    arr_view_VARIE.push(view_video);
    scroll_VARIE.add(view_video);

}

function END_LOAD_VARIE(id,state){

    if(parseInt(state) == 3){
        arr_view_VARIE[id-1].children[1].hide();
        arr_view_VARIE[id-1].children[0].image = arr_vidplayer_VARIE[id-1].thumbnailImageAtTime(1,Titanium.Media.VIDEO_TIME_OPTION_EXACT);
        arr_vidplayer_VARIE_duration.push(parseInt(arr_vidplayer_VARIE[id-1].getDuration()/1000));
        actual_video_VARIE++;
        START_VARIE();
    }

}


//****************************************************************************************************************

START_VARIE();

win.add(scroll_VARIE);
win.open();

//****************************************************************************************************************

Solution

  • Appcelerator Documentation declare that fullscreen property on iOS, before the movie player's view is visible has no effect. Try:

    var video = Titanium.Media.createVideoPlayer({
        url : myurl,
        mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
        scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
        fullscreen : false,
        id : parseInt(id),
        autoplay : true
    });
    

    and

    view_video.addEventListener("click",function(e){
        view_video.setFullscreen(true);
        arr_vidplayer_VARIE[parseInt(e.source.id)-1].play();
        Ti.API.info("play "+e.source.id);
    });