var bricks = window.bricks || {};
/*
we use videojs for video play
https://videojs.com
event: play_end		video play finished
	play_failed		video play failed
	play_ok			video start to play

*/
bricks.VideoBody = class extends bricks.Layout {
	constructor(opts){
		super(opts||{});
		this.set_css('video-js');
		this.set_css('vjs-big-play-centered');
		this.set_css('vjs-fluid');
		this.cur_url = opts.url;
		this.cur_vtype = opts.type;
	}
	create(){
		var e;
		e = document.createElement('video');
		this.dom_element = e;
		e.controls = true;
	}
}
bricks.Video = class extends bricks.Layout {
	/*
	{
		vtype:
		url:
		autoplay:
	}
	*/
	constructor(options){
		super(options);
		this.video_body = new bricks.VideoBody(options);
		this.add_widget(this.video_body);
		schedule_once(this.create_player.bind(this), 0.1);
		this.hidedbtn = new bricks.Button({text:'click me'});
		this.hidedbtn.hide();
		this.add_widget(this.hidedbtn);
	}
	destroy_resource(params, event){
		var w = event.target.bricks_widget;
		if (! w.parent){
			bricks.debug('destroy resource .......');
			this.player.pause();
			this.player.dispose();
			this.player = null;
		}
	}
	disable_captions(){
		this.player.nativeTextTracks = false;
		var tt =  this.player.textTracks()
		bricks.debug('textTracks=', tt);
		if (tt){
			for(var i=0;i<tt.length;i++){
				tt[i].mode = 'disabled';
			}
		}
	}
	auto_play(){
		schedule_once(this.disable_captions.bind(this), 2);
		this.player.on('error',this.report_error.bind(this));
		this.player.on('play', this.report_playok.bind(this));
		this.player.on('ended', this.report_ended.bind(this));
		this.hidedbtn.dispatch('click');
	}
	play(){
		this.player.play();
	}
	create_player(){
		if(this.url){
			this.player = videojs(this.video_body.dom_element, {
				controls:true,
				nativeTextTracks:false,
				textTrackSettings: false
			});
			this.player.ready(this.auto_play.bind(this));
			this._set_source();
		}
	}
	report_ended(){
		this.dispatch('play_end',{src:this.video_body.cur_url,type:this.video_body.cur_vtype});
	}
	report_playok(){
		console.log(this.video_body.cur_url, 'play ok');
		this.dispatch('play_ok', {src:this.video_body.cur_url,type:this.video_body.cur_vtype});
	}
	report_error(){
		console.log(this.video_body.cur_url, 'play failed', this.err_cnt, 'times');
		this.dispatch('play_failed', {'src':this.video_body.cur_url, type:this.video_body.cur_vtype});
	}
	_set_source(){
		if (this.player){
			this.player.src({
				src:this.video_body.cur_url,
				type:this.video_body.cur_vtype
			});
		}
    }
	set_source(url, vtype){
		if(this.player){
			this.video_body.cur_url = url;
			this.video_body.cur_vtype = vtype;
			this._set_source();
		}
	}
}

bricks.Factory.register('Video', bricks.Video);