x4js 2.2.10 → 2.2.13

package/package.json

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

package/src/components/components.ts

@@ -42,4 +42,5 @@ export * from "./textedit/textedit"
 export * from "./tickline/tickline"
 export * from "./tooltips/tooltips"
 export * from "./treeview/treeview"
+export * from "./video/video"
 export * from "./viewport/viewport"

package/src/components/radio/radio.ts

@@ -139,4 +139,20 @@ export class Radio extends Component<RadioProps,RadioEvents> {
 	getValue( ) {
 		return this._input.getValue( );
 	}
+
+	/**
+	 * check the corresponding value in the item group
+	 * you can call this method on any element of the group
+	 * 
+	 * ie: A, B, C, D, E
+	 * A.checkValue( "E" ) is ok, as E.CheckValue("E" )
+	 */
+
+	checkValue( vname: string ) {
+		const grp = this.props.name;
+		const el = this.parentElement().query<Radio>( `input[name="${grp}"][value="${vname}"]` );
+		if( el ) {
+			el.setCheck( true );
+		}
+	}
 }

package/src/components/spreadsheet/spreadsheet.ts

@@ -38,12 +38,12 @@ interface CellRef {
 	row: number;
 }
 
-export type CellClassifier = ( row: number, col: number ) => string;	    // return the cell computed class
+export type SSCellClassifier = ( row: number, col: number ) => string;	    // return the cell computed class
 export type RowClassifier = (row: number ) => string;	    				// return the row computed class
 //export type CellRenderer = (row: number, col: number, content: any) => Component;
 
 export interface SpreadsheetColumn extends Omit<GridColumn,"classifier"> {
-    cellClassifier?: CellClassifier;
+    cellClassifier?: SSCellClassifier;
 }
 
 

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