From 3e8f9b19135625d7834fe9e2f9c8553e6ab80f6b Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Sun, 27 Jul 2025 16:38:11 +0800
Subject: [PATCH] bugfix

---
 bricks/header.tmpl |   1 +
 bricks/video.js    | 311 ++++++++++++---------------------------------
 2 files changed, 85 insertions(+), 227 deletions(-)

diff --git a/bricks/header.tmpl b/bricks/header.tmpl
index afdf312..36f3a4a 100644
--- a/bricks/header.tmpl
+++ b/bricks/header.tmpl
@@ -26,6 +26,7 @@
   <script src="{{entire_url('/bricks/3parties/marked.min.js')}}"></script>
   <script src="{{entire_url('/bricks/3parties/xterm.js')}}"></script>
   <script src="{{entire_url('/bricks/3parties/xterm-addon-fit.js')}}"></script>
+	<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
   <script src="{{entire_url('/bricks/3parties/video.min.js')}}"></script>
 <!---
 <link href="https://unpkg.com/video.js@6/dist/video-js.css" rel="stylesheet">
diff --git a/bricks/video.js b/bricks/video.js
index 35e2a42..5e34399 100644
--- a/bricks/video.js
+++ b/bricks/video.js
@@ -7,227 +7,83 @@ event: play_end		video play finished
 	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;
-	}
-}
+var bricks = window.bricks || {};
+
 bricks.Video = class extends bricks.Layout {
-	/*
-	{
-		title:
-		vtype:
-		url:
-		fullscreen:
-		autoplay:
-	}
-	*/
-	constructor(options){
-		super(options);
-		// this.video_body = new bricks.VideoBody(options);
-		this.set_css('video-js');
-		this.set_css('vjs-big-play-centered');
-		this.set_css('vjs-fluid');
-		this.set_style('width', '100%');
-		this.set_style('height', '100%');
+    constructor(opts) {
+        super(opts);
+        this.opts = opts || {};
+        this.set_csses('video-js', 'vjs-big-play-centered', 'vjs-fluid');
 		this.set_style('object-fit', 'contain');
-		this.cur_url = opts.url;
-		this.cur_vtype = opts.type;
-		schedule_once(this.create_player.bind(this), 0.1);
-	}
-	create(){
-		var e;
-		e = document.createElement('video');
-		this.dom_element = e;
-		e.controls = true;
-	}
-		
-	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';
-			}
-		}
-	}
-	findVideoButtonByClass(cls){
-		var e = this.dom_element;
-		return e.querySelector('.' + cls);
-	}
-
-	auto_play(){
-		return;
-		schedule_once(this._auto_play.bind(this), 0.5);
-	}
-	_auto_play(){
-		this.set_url(this.opts.url);
-		return;
-		var play_btn = this.findVideoButtonByClass('vjs-big-play-button');
-		if (!play_btn){
-			console.log('vjs-big-play-button not found');
-			return;
-		}
-		if (play_btn.style.display == 'none'){
-			console.log('playing .............already');
-			return;
-		}
-		console.log('video ready, auto_playing ....');
-        var clickevent = new MouseEvent('click', {
-          'bubbles': true,      // 事件是否冒泡
-          'cancelable': true    // 事件是否可取消
-        });
-        play_btn.dispatchEvent(clickevent);
-		/*
-		if (this.autounmute && this.player.muted){
-			schedule_once(this.dispatch_mute.bind(this), 1);
-		}
-		*/
-	}
-
-	play(){
-		console.log('Video:play() called....');
-		this.player.play();
-		// this.player.muted(false);
-	}
-	unmuted(){
-		this.player.muted(false);
-	}
-	set_fullscreen(){
-		if (this.fullscreen){
-			if (!this.player.isFullscreen()) {
-				this.player.requestFullscreen();
-			}
-		} else {
-			if (this.player.isFullscreen()) {
-				this.player.exitFullscreen();
-			}
-		}
-	}
-	dispatch_mute(){
-		var mute_btn = this.findVideoButtonByClass("vjs-mute-control.vjs-control.vjs-button");
-		if (!mute_btn){
-			var isMute = this.player.muted();
-			if (isMuted){
-				this.player.muted(False);
-			}
-			bricks.test_element = this;
-			console.log(this, 'there is not mute button found, isMuted=', isMuted);
-			return;
-		}
-		var clickevent = new MouseEvent('click', {
-		  'bubbles': true,      // 事件是否冒泡
-		  'cancelable': true    // 事件是否可取消
-		});
-		var isMuted = this.player.muted();
-		if (isMuted){
-			mute_btn.dispatchEvent(clickevent);
-		}
-	}
-
-	create_player(){
-		if(this.url){
-			// this.player = videojs(this.video_body.dom_element, {
-			this.player = videojs(this.dom_element, {
-				controls:true,
-				autoplay:this.autoplay,
-				muted:true,
-				crossorigin:"anonymous",
-				nativeTextTracks:false,
-				textTrackSettings: false
-			});
-			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.set_url(this.opts.url);
-			this.player.ready(this.set_fullscreen.bind(this));
-			if (this.autoplay){
-				this.auto_play();
-			}
-		}
-	}
-	report_ended(){
-		if (this.play_status != 'playok'){
-			returnl
-		}
-		this.play_status = 'playend';
-		this.dispatch('play_end',{src:this.cur_url,type:this.cur_vtype});
-	}
-	report_playok(){
-		if (this.play_status != ''){
-			return;
-		}
-		this.play_status = 'playok';
-		console.log(this.cur_url, 'play ok');
-		if (this.autounmute && this.player.muted()){
-			schedule_once(this.dispatch_mute.bind(this), 2.5);
-			console.log('mute btn clicked');
-		} else {
-			console.log(this.autounmute, 'player.muted=', this.player.muted);
-		}
-		this.dispatch('play_ok', {src:this.cur_url,type:this.cur_vtype});
-	}
-	report_error(){
-		if (this.play_status != ''){
-			return;
-		}
-		this.play_status = 'playfailed';
-		console.log(this.cur_url, 'play failed', this.err_cnt, 'times');
-		this.dispatch('play_failed', {'src':this.cur_url, type:this.cur_vtype});
-	}
-	_set_source(){
-		if (this.player){
-			this.player.src({
-				src:this.cur_url,
-				type:this.cur_vtype
-			});
-			this.play_status = '';
-		}
+        this.set_style('width', '100%');
+        this.set_style('height', '100%');
+        this.cur_url = opts.url;
+        this.cur_vtype = opts.type || this.guess_type(this.cur_url);
+        schedule_once(this.create_player.bind(this), 0.1);
+    }
+
+    create() {
+        let e = document.createElement('video');
+        this.dom_element = e;
+        e.controls = true;
+    }
+
+    create_player() {
+        this.player = videojs(this.dom_element, {
+            controls: true,
+            autoplay: this.opts.autoplay || false,
+			preload: "auto", 
+            muted: true,
+            crossorigin: 'anonymous',
+            nativeTextTracks: false
+        });
+
+        this.player.on('play', () => this.dispatch('play_ok', { src: this.cur_url }));
+        this.player.on('ended', () => this.dispatch('play_end', { src: this.cur_url }));
+        this.player.on('error', () => this.dispatch('play_failed', { src: this.cur_url }));
+
+        this.player.ready(() => {
+            this.disable_captions();
+            if (this.opts.fullscreen && !this.player.isFullscreen()) {
+                this.player.requestFullscreen();
+            }
+            this.set_source(this.cur_url, this.cur_vtype);
+			schedule_once(this.unmuted.bind(this), 1);
+        });
+    }
+
+    disable_captions() {
+        let tt = this.player.textTracks();
+        for (let i = 0; i < tt.length; i++) {
+            tt[i].mode = 'disabled';
+        }
+    }
+
+    set_source(url, vtype) {
+        this.cur_url = url;
+        this.cur_vtype = vtype || this.guess_type(url);
+        this.player.src({ src: this.cur_url, type: this.cur_vtype });
+    }
+
+    guess_type(url) {
+        let t = url.toLowerCase();
+        if (t.endsWith('.m3u8')) return 'application/x-mpegURL';
+        if (t.endsWith('.mp4')) return 'video/mp4';
+        if (t.endsWith('.avi')) return 'video/avi';
+        if (t.endsWith('.webm')) return 'video/webm';
+        return 'application/x-mpegURL';
+    }
+
+    play() {
+        if (this.player) this.player.play();
+    }
+
+    unmuted() {
+        if (this.player) {
+            this.player.muted(false);
+            this.player.volume(1.0);
+        }
     }
-	set_source(url, vtype){
-		var t = url.toLowerCase();
-		if (t.endsWith('.m3u8')){
-			vtype = 'application/x-mpegURL';
-		} else if (t.endsWith('.mp4')){
-			vtype = 'video/mp4';
-		} else if (t.endsWith('.avi')){
-			vtype = 'video/avi';
-		} else if (t.endsWith('.webm')){
-			vtype = 'video/webm';
-		} else {
-			vtype = 'application/x-mpegURL';
-		}
-		if(this.player){
-			this.cur_url = url;
-			this.cur_vtype = vtype;
-			this._set_source();
-			this.play();
-		}
-	}
-	set_url(url){
-		this.set_source(url);
-	}
 }
 
 bricks.Iptv = class extends bricks.VBox {
@@ -244,18 +100,19 @@ bricks.Iptv = class extends bricks.VBox {
 	}
 	async build_subwidgets(){
 		console.log('build_subwidgets called');
-		var jc = new bricks.HttpJson();
-		this.deviceid = bricks.deviceid('iptv')
-		this.user_data = await jc.httpcall(this.iptv_data_url, {
-			params:{
-				deviceid:this.deviceid
-			}, 
-			method:'GET'
-		});
+		if (!this.user_data){
+			var jc = new bricks.HttpJson();
+			this.deviceid = bricks.deviceid('iptv')
+			this.user_data = await jc.httpcall(this.iptv_data_url, {
+				params:{
+					deviceid:this.deviceid
+				}, 
+				method:'GET'
+			});
+		}
 		console.log('this.user_data =', this.user_data);
 		this.video = new bricks.Video({
 			autoplay:true,
-			autounmute:this.autounmute,
 			url:this.user_data.url
 		});
 		this.title_w = new bricks.Text({text:this.user_data.tv_name, wrap:false});