x4js 2.2.9 → 2.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.9",
+  "version": "2.2.12",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/messages/circle-question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/></svg>

package/src/components/textarea/textarea.ts

@@ -12,6 +12,8 @@
  *
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ * 
+ * 2026-05-26: added resize types
  **/
 
 import { BaseProps } from '../input/input';
@@ -30,7 +32,7 @@ import { class_ns, IFormElement } from '../../core/core_tools';
 interface TextAreaProps extends BaseProps {
 	label?: string;
 	value?: string;
-	resize?: boolean;
+	resize?: boolean | "none" | "vertical" | "horizontal" | "both";
 	readonly?: boolean;
 	trim?: boolean;
 }
@@ -48,8 +50,8 @@ class SimpleTextArea extends Component<TextAreaProps> {
 		this.setAttribute( "name", props.name );
 		this.setAttribute( "value", props.value+'' );
 
-		if( !props.resize ) {
-			this.setAttribute( "resize", false );
+		if( props.resize!==undefined ) {
+			this.setStyleValue( "resize", props.resize===false ? "none" : props.resize as string );
 		}
 
 		if( props.readonly ) {

package/src/components/video/video.module.scss

@@ -0,0 +1,30 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file video.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2026 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+ 
+
+.x4video {
+	background-color: black;
+	position: relative;
+	
+	.vplayer {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+	}
+}

package/src/components/video/video.ts

@@ -0,0 +1,130 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file video.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2026 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+import { Box, Component, ComponentProps } from 'x4js';
+
+import "./video.module.scss"
+
+interface VideoProps extends ComponentProps {
+	autoplay?: boolean;
+	muted?: boolean;
+	playsInline?: boolean;
+	stream: MediaStream;
+}
+
+/**
+ * 
+ */
+
+export class Video extends Box {
+	
+	private _vplayer: HTMLVideoElement;
+
+	constructor( props: VideoProps ) {
+		super( props );
+
+		const el = new Component( { cls: "vplayer", tag: 'video', } );
+		this.setContent( el );
+
+		this._vplayer = el.dom as HTMLVideoElement;
+
+		if( props.autoplay !== undefined ) {
+			this.autoPlay = props.autoplay;
+		}
+
+		if( props.muted !== undefined ) {
+			this.mute( props.muted );
+		}
+
+		if( props.playsInline !== undefined ) {
+			this.playsInline = props.playsInline;
+		}
+
+		this.stream = props.stream;
+	}
+
+	get player( ) {
+		return this._vplayer;
+	}
+
+	get volume( ) {
+		return this.player.volume;
+	}
+
+	set volume( vol: number ) {
+		this.player.volume = vol;
+	}
+
+	get autoPlay( ) {
+		return this.player.autoplay;
+	}
+
+	set autoPlay( set: boolean ) {
+		this.player.autoplay = set;
+	}
+
+	get playsInline( ) {
+		return this.player.playsInline;
+	}
+
+	set playsInline( set: boolean ) {
+		this.player.playsInline = set;
+	}
+
+	set stream( stream: MediaStream ) {
+		this.player.srcObject = stream;
+	}
+
+	get videoWidth( ) {
+		return this.player.videoWidth;
+	}
+
+	get videoHeight( ) {
+		return this.player.videoHeight;
+	}
+
+	get loop( ) {
+		return this.player.loop;
+	}
+
+	set loop( set: boolean ) {
+		this.player.loop = set;
+	}
+
+	get duration( ) {
+		return this.player.duration;
+	}
+
+	get muted( ) {
+		return this.player.muted;
+	}
+
+	mute( set: boolean ) {
+		this.player.muted = set;
+	}
+		
+	get paused( ) {
+		return this.player.paused;
+	}
+
+	pause( ) {
+		this.player.pause( );
+	}
+
+	play( ) {
+		this.player.play( );
+	}
+}