bugfix

bricks/bricks.js

@@ -137,16 +137,11 @@ bricks.buildEventBind = function(from_widget, widget, event, desc){
 }
 
 bricks.universal_handler = function(from_widget, widget, desc, event){
-	debug('universal_handler() info', 'from_widget=', 
-						from_widget,
-						'widget=', widget, 
-						'desc=', desc,
-						event);
 	var f = bricks.buildEventHandler(from_widget, desc);
 	if (f){
 		return f(event);
 	}
-	debug('universal_handler() error', 'from_widget=', 
+	console.log('universal_handler() error', 'from_widget=', 
 						from_widget,
 						'widget=', widget, 
 						'desc=', desc,
@@ -291,7 +286,7 @@ bricks.buildRegisterFunctionHandler = function(w, target, rtdata, desc){
 bricks.buildMethodHandler = function(w, target, rtdata, desc){
 	var f = target[desc.method];
 	if (! f){
-		console.log('desc:', 'not exists in', target, 'w=', w);
+		console.log('desc:', desc, 'not exists in', target, 'w=', w);
 		return null;
 	}
 	var params = {};
@@ -367,9 +362,9 @@ bricks.getWidgetById = function(id, from_widget){
 		el = new_el;
 	}
 	if (typeof(el.bricks_widget) !== 'undefined'){
-		console.log('getWidgetById():', id, from_widget, el, 'widget');
 		return el.bricks_widget;
 	}
+	console.log('********', id, 'el=', el, 'found, but not a bricks class with dom element');
 	return el;
 }
 

bricks/layout.js

@@ -38,19 +38,21 @@ bricks.Layout = class  extends bricks.JsWidget {
 		}
 	}
 	remove_widget(w){
-		delete w.parent;
+		w.parent = null;
 		this.children = this.children.filter(function(item){
 			return item != w;
 		});
-
 		this.dom_element.removeChild(w.dom_element);
+		w.dispatch('on_parent', null);
 	}
 	clear_widgets(w){
+		this.dom_element.replaceChildren();
 		for (var i=0;i<this.children.length;i++){
-			this.children[i].parent = null;
+			var w = this.children[i];
+			w.parent = null;
+			w.dispatch('on_parent', null);
 		}
 		this.children = [];
-		this.dom_element.replaceChildren();
 	}
 }
 

bricks/video.js

@@ -3,6 +3,22 @@ var bricks = window.bricks || {};
 we use videojs for video play
 https://videojs.com
 */
+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-js');
+		e.controls = true;
+		this.dom_element = e;
+	}
+}
 bricks.Video = class extends bricks.Layout {
 	/*
 	{
@@ -13,23 +29,22 @@ bricks.Video = class extends bricks.Layout {
 	*/
 	constructor(options){
 		super(options);
-		this.dom_element.type="application/vnd.apple.mpegurl";
+		this.video_body = new bricks.VideoBody(options);
-		this.set_css('video-js');
+		this.add_widget(this.video_body);
-		this.set_css('vjs-big-play-centered');
-		this.set_css('vjs-fluid');
-		this.cur_url = options.url;
-		this.cur_vtype = options.type;
 		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);
 		this.hidedbtn.bind('click', this.play.bind(this));
 	}
-	create(){
+	destroy_resource(params, event){
-		var e;
+		var w = event.target.bricks_widget;
-		e = document.createElement('video');
+		if (! w.parent){
-		e.controls = true;
+			console.log('destroy resource .......');
-		this.dom_element = e;
+			this.player.pause();
+			this.player.dispose();
+			this.player = null;
+		}
 	}
 	disable_captions(){
 		this.player.nativeTextTracks = false;
@@ -49,8 +64,7 @@ bricks.Video = class extends bricks.Layout {
 		this.player.play();
 	}
 	create_player(){
-		console.log('here2');
+		this.player = videojs(this.video_body.dom_element, {
-		this.player = videojs(this.dom_element, {
 			textTrackSettings: false
 		});
 		
@@ -60,49 +74,18 @@ bricks.Video = class extends bricks.Layout {
 			// schedule_once(this.auto_play.bind(this), 0.1);
 			;
 		}
-		console.log('here3', this.player);
 	}
 	_set_source(){
 		this.player.src({
-			src:this.cur_url,
+			src:this.video_body.cur_url,
-			type:this.cur_vtype
+			type:this.video_body.cur_vtype
 		});
     }
 	set_source(url, vtype){
-		this.cur_url = url;
+		this.video_body.cur_url = url;
-		this.cur_vtype = vtype;
+		this.video_body.cur_vtype = vtype;
 		this._set_source();
 	}
 }
 
-bricks.VideoPlayer = class extends bricks.VBox {
-	/* 
-	we use [indigo-player](https://github.com/matvp91/indigo-player) as a base.
-	inside body, need to add following line before bricks.js
-	<script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-pla    yer.js"></script>
-	options 
-	{
-		url:
-	}
-	*/
-	constructor(options){
-		super(options);
-		var autoplay = '';
-		if (this.opts.autoplay){
-			autoplay = 'autoplay';
-		}
-		var url = this.opts.url;
-		this.dom_element.innerHTML = `<video width="90%" controls ${autoplay} src="${url}" type="application/vnd.apple.mpegurl" class="media-document mac video" ></video>`;
-		this.video = this.dom_element.querySelector('video');
-	}
-	toggle_play(){
-		if (this.video.paused){
-			this.video.play();
-		} else {
-			this.video.pause();
-		}
-	}
-		
-}
-bricks.Factory.register('VideoPlayer', bricks.VideoPlayer);
 bricks.Factory.register('Video', bricks.Video);

bricks/widget.js

@@ -8,7 +8,6 @@ bricks.JsWidget = class {
 		this.baseURI = options.baseURI;
 		this.opts = options;
 		this.create();
-		this.dom_element.bricks_widget = this;
 		this.opts_set_style();
 		if (this.opts.tooltip){
 			this.dom_element.tooltip = this.opts.tooltip;
@@ -22,6 +21,7 @@ bricks.JsWidget = class {
 		if (options.csses){
 			this.set_csses(options.csses);
 		}
+		this.dom_element.bricks_widget = this;
 	}
 	create(){
 		this.dom_element = this._create('div')