@subiz/widget-v4 4.1.45 → 4.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.45",
+	"version": "4.1.46",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",

package/src/chatbox/ImageAttachments.js

@@ -1,10 +1,91 @@
 import sb from '../util/index.js'
 import {Com} from '../common.js'
-import {h} from 'preact'
+import {h, createRef} from 'preact'
 
 export default class ImageAttachment extends Com {
 	constructor(props) {
 		super(props)
+		this.setState({
+			ready: false,
+		})
+	}
+
+	containerRef = createRef()
+	componentDidMount() {
+		this.setImageFrameDimension()
+	}
+
+	setImageFrameDimension() {
+		const MAX_HEIGHT = 240
+		const DEFAULT_MAX_WIDTH = 267
+
+		let $container = this.containerRef.current
+		this.frameWidth = $container ? $container.offsetWidth : DEFAULT_MAX_WIDTH
+		this.frameHeight = MAX_HEIGHT
+		this.setState({
+			ready: true,
+		})
+	}
+
+	calculateImageDimension(image) {
+		if (!image.width || !image.height) return {width: this.frameWidth, height: this.frameHeight}
+
+		let ratio = image.width / image.height - this.frameWidth / this.frameHeight
+		if (ratio >= 0) {
+			let width = this.frameWidth
+			let height = (image.height * this.frameWidth) / image.width
+			height = Math.round(height)
+			return {width, height}
+		} else {
+			let height = this.frameHeight
+			let width = (image.width * this.frameHeight) / image.height
+			width = Math.round(width)
+			return {width, height}
+		}
+	}
+
+	renderImage(image, index) {
+		if (!this.state.ready) {
+			return
+		}
+		let byType = sb.get(this.props.ev, 'by.type')
+
+		if (!image.width || !image.height) {
+			return (
+				<div class={`image-attachment image-attachment--${byType}`}>
+					<a href={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)} target='_blank'>
+						<img
+							alt
+							class='image-attachment__img'
+							src={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)}
+							onload={(e) => this.props.onLoad && this.props.onLoad()}
+						/>
+					</a>
+				</div>
+			)
+		}
+
+		let {width, height} = this.calculateImageDimension(image)
+
+		return (
+			<div class={`image-attachment image-attachment--${byType}`}>
+				<a href={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)} target='_blank'>
+					<img
+						alt
+						ref={(el) => {
+							if (el) {
+								// must use this trick because React doesn't support set style important directly
+								el.style.setProperty('width', `${width}px`, 'important')
+								el.style.setProperty('height', `${height}px`, 'important')
+							}
+						}}
+						class='image-attachment__img'
+						src={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)}
+						onload={(e) => this.props.onLoad && this.props.onLoad()}
+					/>
+				</a>
+			</div>
+		)
 	}
 
 	render() {
@@ -31,23 +112,20 @@ export default class ImageAttachment extends Com {
 
 		if (images.length === 0) return null
 
-		var $images = sb.map(images, (image, index) => (
-			<div class={`image-attachment image-attachment--${byType}`}>
-				<a href={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)} target='_blank'>
-					<img
-						alt
-						class='image-attachment__img'
-						src={this.props.store.replaceFileUrl(image.thumbnail_url || image.url)}
-						onload={(e) => this.props.onLoad && this.props.onLoad()}
-					/>
-				</a>
-			</div>
-		))
+		let $images = sb.map(images, (image, index) => this.renderImage(image, index))
 
 		if (byType === 'agent') {
-			return <div class='message-agent'>{$images}</div>
+			return (
+				<div class='message-agent' ref={this.containerRef}>
+					{$images}
+				</div>
+			)
 		} else {
-			return <div class='message-user'>{$images}</div>
+			return (
+				<div class='message-user message-user-images-container' ref={this.containerRef}>
+					{$images}
+				</div>
+			)
 		}
 	}
 }

package/src/store/store.js

@@ -913,7 +913,10 @@ export default class Store {
 				if (!att._file) return
 				files.push(att)
 				if (ImageTypes.includes(att._file.type)) {
-					att.url = await loadImage(att._file)
+					let {width, height, url} = await loadImage(att._file)
+					att.url = url
+					att.width = width
+					att.height = height
 				}
 			})
 		}
@@ -1163,7 +1166,17 @@ function loadImage(file) {
 		reader.onload = (e) => {
 			// after load all img data into the RAM, find update the corresponse attachment
 			// since the attachment is very deep, we must force rerender
-			rs(e.target.result) // url
+			//rs(e.target.result) // url
+			let src = e.target.result
+			let img = new Image()
+			img.onload = () => {
+				rs({
+					url: src,
+					width: img.width,
+					height: img.height,
+				})
+			}
+			img.src = src
 		}
 		reader.readAsDataURL(file)
 	})