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){
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;
}

View File

@ -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();
}
}

View File

@ -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.set_css('video-js');
this.set_css('vjs-big-play-centered');
this.set_css('vjs-fluid');
this.cur_url = options.url;
this.cur_vtype = options.type;
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);
this.hidedbtn.bind('click', this.play.bind(this));
}
create(){
var e;
e = document.createElement('video');
e.controls = true;
this.dom_element = e;
destroy_resource(params, event){
var w = event.target.bricks_widget;
if (! w.parent){
console.log('destroy resource .......');
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.dom_element, {
this.player = videojs(this.video_body.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,
type:this.cur_vtype
src:this.video_body.cur_url,
type:this.video_body.cur_vtype
});
}
set_source(url, vtype){
this.cur_url = url;
this.cur_vtype = vtype;
this.video_body.cur_url = url;
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);

View File

@ -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')