Información de imagen adjunta

3 files changed, 29 insertions, 8 deletions

diff --git a/package-lock.json b/package-lock.json
index ff4d939..2a45bc3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6574,9 +6574,9 @@
       }
     },
     "filesize": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
-      "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-4.2.0.tgz",
+      "integrity": "sha512-bdS2UP98MZzLyTZzhuSH5ctAWyDt81n5xMti9BSdmgPXjjENLDz5Bmbk2R7ATVw/HRysZzWA2JIPgcSAOimWpw=="
     },
     "fill-range": {
       "version": "4.0.0",
@@ -12671,6 +12671,12 @@
           "integrity": "sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow==",
           "dev": true
         },
+        "filesize": {
+          "version": "3.6.1",
+          "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
+          "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==",
+          "dev": true
+        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -14229,6 +14235,11 @@
             "node-releases": "^1.1.25"
           }
         },
+        "filesize": {
+          "version": "3.6.1",
+          "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
+          "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg=="
+        },
         "inquirer": {
           "version": "6.5.0",
           "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.0.tgz",
diff --git a/package.json b/package.json
index 7aa75c6..7c58a56 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@reach/router": "^1.2.1",
+    "filesize": "^4.2.0",
     "fomantic-ui": "^2.7.8",
     "fomantic-ui-css": "^2.7.8",
     "moment": "^2.24.0",
diff --git a/src/BBSThread.js b/src/BBSThread.js
index 9d11537..321598e 100644
--- a/src/BBSThread.js
+++ b/src/BBSThread.js
@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import { Header, Icon, Loader, Message, Segment, Image, Button } from "semantic-ui-react";
+import { Header, Icon, Loader, Message, Segment, Image, Label } from "semantic-ui-react";
 import Moment from "react-moment";
 import "moment/locale/es";
 
+
 class BBSThread extends Component {
     constructor(props) {
         super(props);
@@ -35,6 +36,7 @@ class BBSThread extends Component {
     }
     render() {
         const { isLoading, error } = this.state;
+        const filesize = require('filesize');
 
         if (isLoading) {
             return (
@@ -77,12 +79,19 @@ class BBSThread extends Component {
                             </Header>
 
                             <Segment.Group horizontal>
-                                {post.file != "" ? <Segment compact> <Image src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${post.thumb}`} /></Segment> : null}
-                                <Segment>
+                                {post.file != "" ?
+                                    <Segment padded compact>
+                                        <Label attached='bottom'>{post.file} {post.image_width}x{post.image_height} {filesize(post.file_size, { bits: true })}</Label>
+                                        <Image src={`https://bienvenidoainternet.org/${this.props.dir}/thumb/${post.thumb}`} />
+
+                                    </Segment> : null}
+                                <Segment padded>
                                     <div className="postMessage" dangerouslySetInnerHTML={{ __html: post.message }} />
-                                    <Icon name="reply" />Responder
+                                    <Label attached='bottom right'>
+                                        <Icon name="reply" />Responder
+                                        <Icon name="exclamation circle" />Reportar
+                                    </Label>
 
-                                    <Icon name="exclamation circle" />Reportar
                                 </Segment>
                             </Segment.Group>
                         </Segment.Group>