Added image loading support from url (#81)

Author: a7ul

package-lock.json

@@ -16,14 +16,15 @@
   },
   "scripts": {
     "build": "tsc",
-    "dev": "tsc && qode --inspect ./dist/demo.js",
+    "dev": "tsc && qode ./dist/demo.js",
     "docs": "typedoc"
   },
   "dependencies": {
+    "@types/react-reconciler": "^0.18.0",
+    "phin": "^3.4.1",
     "react-deep-force-update": "^2.1.3",
     "react-proxy": "^2.0.8",
-    "react-reconciler": "^0.24.0",
-    "@types/react-reconciler": "^0.18.0"
+    "react-reconciler": "^0.24.0"
   },
   "peerDependencies": {
     "@nodegui/nodegui": ">=0.3.0",

package.json

@@ -1,10 +1,12 @@
 import { QLabel, NodeWidget, QMovie, QSize } from "@nodegui/nodegui";
 import { TextProps, setTextProps } from "../Text/RNText";
 import { RNWidget } from "../config";
-import { throwUnsupported } from "../../utils/helpers";
+import { throwUnsupported, isValidUrl } from "../../utils/helpers";
+import phin from "phin";
 
 export interface AnimatedImageProps extends TextProps {
   src?: string;
+  buffer?: Buffer;
 }
 
 const setAnimatedImageProps = (
@@ -13,15 +15,22 @@ const setAnimatedImageProps = (
   oldProps: AnimatedImageProps
 ) => {
   const setter: AnimatedImageProps = {
-    set src(imageUrl: string) {
-      if (!imageUrl) {
+    set src(imageUrlOrPath: string) {
+      if (!imageUrlOrPath) {
         return;
       }
+      getLoadedQMovie(imageUrlOrPath)
+        .then(movie => {
+          widget.setMovie(movie);
+          widget.movie()?.start();
+        })
+        .catch(console.warn);
+    },
+    set buffer(imageBuffer: Buffer) {
       const movie = new QMovie();
-      movie.setFileName(imageUrl);
+      movie.loadFromData(imageBuffer);
       widget.setMovie(movie);
-      const size = widget.size();
-      movie.setScaledSize(size);
+      widget.movie()?.start();
     }
   };
   Object.assign(setter, newProps);
@@ -53,3 +62,15 @@ export class RNAnimatedImage extends QLabel implements RNWidget {
     movie?.setScaledSize(size);
   }
 }
+
+async function getLoadedQMovie(imageUrlOrPath: string): Promise<QMovie> {
+  const movie = new QMovie();
+  if (isValidUrl(imageUrlOrPath)) {
+    const res = await phin(imageUrlOrPath);
+    const imageBuffer = Buffer.from(res.body);
+    movie.loadFromData(imageBuffer);
+  } else {
+    movie.setFileName(imageUrlOrPath);
+  }
+  return movie;
+}

src/components/AnimatedImage/RNAnimatedImage.ts

@@ -16,11 +16,8 @@ class AnimatedImageConfig extends ComponentConfig {
     workInProgress: Fiber
   ): RNAnimatedImage {
     const widget = new RNAnimatedImage();
+    widget.setProperty("scaledContents", true);
     widget.setProps(newProps, {});
-    widget.movie()?.start();
-    widget.addEventListener(QLabelEvents.Resize, () => {
-      widget.scaleMovie(widget.size());
-    });
     return widget;
   }
   commitMount(

src/components/AnimatedImage/index.ts

@@ -7,11 +7,13 @@ import {
 } from "@nodegui/nodegui";
 import { TextProps, setTextProps } from "../Text/RNText";
 import { RNWidget } from "../config";
-import { throwUnsupported } from "../../utils/helpers";
+import { throwUnsupported, isValidUrl } from "../../utils/helpers";
+import phin from "phin";
 
 export interface ImageProps extends TextProps {
   src?: string;
   aspectRatioMode?: AspectRatioMode;
+  buffer?: Buffer;
 }
 
 const setImageProps = (
@@ -20,14 +22,18 @@ const setImageProps = (
   oldProps: ImageProps
 ) => {
   const setter: ImageProps = {
-    set src(imageUrl: string) {
-      if (!imageUrl) {
+    set src(imageUrlOrPath: string) {
+      if (!imageUrlOrPath) {
         return;
       }
-      const pixMap = new QPixmap(imageUrl);
+      getLoadedPixmap(imageUrlOrPath)
+        .then(pixmap => widget.setPixmap(pixmap))
+        .catch(console.warn);
+    },
+    set buffer(imageBuffer: Buffer) {
+      const pixMap = new QPixmap();
+      pixMap.loadFromData(imageBuffer);
       widget.setPixmap(pixMap);
-      const size = widget.size();
-      widget.scalePixmap(size);
     },
     set aspectRatioMode(mode: AspectRatioMode) {
       widget.setAspectRatioMode(mode);
@@ -80,3 +86,15 @@ export class RNImage extends QLabel implements RNWidget {
     }
   }
 }
+
+async function getLoadedPixmap(imageUrlOrPath: string): Promise<QPixmap> {
+  const pixMap = new QPixmap();
+  if (isValidUrl(imageUrlOrPath)) {
+    const res = await phin(imageUrlOrPath);
+    const imageBuffer = Buffer.from(res.body);
+    pixMap.loadFromData(imageBuffer);
+  } else {
+    pixMap.load(imageUrlOrPath);
+  }
+  return pixMap;
+}

src/components/Image/RNImage.ts

@@ -15,6 +15,7 @@ class ImageConfig extends ComponentConfig {
     workInProgress: Fiber
   ): RNImage {
     const widget = new RNImage();
+    widget.setProperty("scaledContents", true);
     widget.setProps(newProps, {});
     widget.addEventListener(QLabelEvents.Resize, () => {
       widget.scalePixmap(widget.size());

src/components/Image/index.ts

@@ -33,6 +33,10 @@ export class RNScrollArea extends QScrollArea implements RNWidget {
     child.close();
   }
   appendInitialChild(child: NodeWidget): void {
+    if (this.contentWidget) {
+      console.warn("ScrollView can't have more than one child node");
+      return;
+    }
     this.setWidget(child);
   }
   appendChild(child: NodeWidget): void {

src/components/ScrollArea/RNScrollArea.ts

@@ -6,6 +6,7 @@ import { throwUnsupported } from "../../utils/helpers";
 export interface TextProps extends ViewProps {
   children?: string | number;
   wordWrap?: boolean;
+  scaledContents?: boolean;
 }
 
 /**
@@ -22,6 +23,9 @@ export const setTextProps = (
     },
     set wordWrap(shouldWrap: boolean) {
       widget.setWordWrap(shouldWrap);
+    },
+    set scaledContents(scaled: boolean) {
+      widget.setProperty("scaledContents", scaled);
     }
   };
   Object.assign(setter, newProps);

src/components/Text/RNText.ts

@@ -31,6 +31,10 @@ export class RNWindow extends QMainWindow implements RNWidget {
     child.close();
   }
   appendInitialChild(child: NodeWidget): void {
+    if (this.centralWidget) {
+      console.warn("MainWindow can't have more than one child node");
+      return;
+    }
     this.setCentralWidget(child);
   }
   appendChild(child: NodeWidget): void {

src/components/Window/RNWindow.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { Renderer, Button, Window, View } from "./index";
-import { AnimatedImage } from "./components/AnimatedImage";
+import { Renderer, Button, Window, View, AnimatedImage } from "./index";
 
 const App = () => {
   return (
@@ -11,7 +10,7 @@ const App = () => {
           <Button style={buttonStyle} text={"World"} />
         </View>
         <AnimatedImage
-          style="width:200px; height: 150px;"
+          style="border: 1px solid blue; flex:1;"
           src="/Users/atulr/Project/nodegui/nodegui/src/lib/QtGui/__tests__/assets/fine.gif"
         />
       </View>