This commit is contained in:
yumoqing 2024-03-04 12:40:29 +08:00
parent 8bb5c667b4
commit 1c1516362e
4 changed files with 41 additions and 61 deletions

View File

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

View File

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

View File

@ -3,6 +3,22 @@ var bricks = window.bricks || {};
we use videojs for video play we use videojs for video play
https://videojs.com 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 { bricks.Video = class extends bricks.Layout {
/* /*
{ {
@ -13,23 +29,22 @@ bricks.Video = class extends bricks.Layout {
*/ */
constructor(options){ constructor(options){
super(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); schedule_once(this.create_player.bind(this), 0.1);
this.hidedbtn = new bricks.Button({text:'click me'}); this.hidedbtn = new bricks.Button({text:'click me'});
this.hidedbtn.hide(); this.hidedbtn.hide();
this.add_widget(this.hidedbtn); this.add_widget(this.hidedbtn);
this.hidedbtn.bind('click', this.play.bind(this)); 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(){ disable_captions(){
this.player.nativeTextTracks = false; this.player.nativeTextTracks = false;
@ -49,8 +64,7 @@ bricks.Video = class extends bricks.Layout {
this.player.play(); this.player.play();
} }
create_player(){ create_player(){
console.log('here2'); this.player = videojs(this.video_body.dom_element, {
this.player = videojs(this.dom_element, {
textTrackSettings: false textTrackSettings: false
}); });
@ -60,49 +74,18 @@ bricks.Video = class extends bricks.Layout {
// schedule_once(this.auto_play.bind(this), 0.1); // schedule_once(this.auto_play.bind(this), 0.1);
; ;
} }
console.log('here3', this.player);
} }
_set_source(){ _set_source(){
this.player.src({ 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){ 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(); 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.Factory.register('Video', bricks.Video);

View File

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