diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Board.js | 2 | ||||
| -rw-r--r-- | src/Post.js | 542 | ||||
| -rw-r--r-- | src/Thread.js | 1 |
3 files changed, 310 insertions, 235 deletions
diff --git a/src/Board.js b/src/Board.js index 2a6155f..f425954 100644 --- a/src/Board.js +++ b/src/Board.js @@ -167,6 +167,7 @@ class Board extends Component { threadId={thread.id} currentBoard={currentBoard} nightMode={nightMode} + totalReplies={thread.total_replies} /> <Divider /> {thread.replies.map((reply, index, replies) => ( @@ -178,6 +179,7 @@ class Board extends Component { key={"reply_" + reply.id} currentBoard={currentBoard} nightMode={nightMode} + totalReplies={thread.total_replies} /> ))} </Comment.Group> diff --git a/src/Post.js b/src/Post.js index a950f7c..a4c8a4a 100644 --- a/src/Post.js +++ b/src/Post.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { Component } from "react"; import { Image, Icon, @@ -7,7 +7,8 @@ import { Flag, Embed, Form, - Button + Button, + Confirm } from "semantic-ui-react"; import Moment from "react-moment"; import "moment/locale/es"; @@ -68,263 +69,334 @@ const QuickReplyModal = ({ trigger, currentBoard, id, locked, replyIndex }) => ( </Modal> ); -const Post = ({ index, post, locked, threadId, currentBoard, nightMode }) => { - const filesize = require("filesize"); +class Post extends Component { + constructor(props) { + super(props); + this.state = { + deleteDialog: false + }; + this.showDialog = this.showDialog.bind(this); + this.handleCancel = this.handleCancel.bind(this); + this.handleConfirm = this.handleConfirm.bind(this); + } - // Manejo de posts eliminados - if (post.IS_DELETED > 0) { - return ( - <Comment inverted={nightMode}> - <Comment.Avatar - src={`https://bienvenidoainternet.org/static/css/img/picnicbdy.gif`} - /> - <Comment.Content> - <Comment.Author as="a"> - #{currentBoard.board_type === 0 ? post.id : index + 1} - </Comment.Author> - <Comment.Metadata> - <div> - <Moment fromNow unix locale="es" date={post.timestamp} /> - </div> - </Comment.Metadata> - <Comment.Text> - <span className="deleted"> - Eliminado por el {post.IS_DELETED === 1 ? "usuario." : "Staff."} - </span> - </Comment.Text> - </Comment.Content> - </Comment> - ); + showDialog() { + this.setState({ deleteDialog: true }); } - // Obtener un avatar aleatorio basado en ID - let user_id = post.timestamp_formatted.split(" ID:")[1]; - const seedrandom = require("seedrandom"); - const rng = seedrandom(threadId + index); - const idRng = seedrandom(user_id); - const idColor = - "rgb(" + - Math.round(idRng() * 255) + - ", " + - Math.round(idRng() * 200) + - ", " + - Math.round(idRng() * 200) + - ")"; + handleCancel() { + this.setState({ deleteDialog: false }); + } - let rndAvatar, hue; - if (user_id !== "") { - let i = Math.round(idRng() * (avatars.length - 1)); - rndAvatar = avatars[i]; - hue = Math.round(idRng() * 360); - } else { - let i = Math.round(rng() * (avatars.length - 1)); - rndAvatar = avatars[i]; - hue = Math.round(rng() * 360); + handleConfirm() { + this.setState({ deleteDialog: false }); + const { post, currentBoard } = this.props; + let password = localStorage.getItem("password"); + fetch( + `https://bienvenidoainternet.org/cgi/api/delete?dir=${currentBoard.dir}&id=${post.id}&password=${password}` + ) + .then(response => { + return response.json(); + }) + .then(resource => { + console.log(resource); + }); } - // Obetener bandera del pais (para /world) - let flag; - if (currentBoard.dir === "world") { - flag = post.name.match("[A-Z][A-Z]"); - if (flag !== null) { - flag = flag[0].toLowerCase(); + render() { + const { + index, + post, + locked, + threadId, + currentBoard, + nightMode, + totalReplies + } = this.props; + const filesize = require("filesize"); + + // Manejo de posts eliminados + if (post.IS_DELETED > 0) { + return ( + <Comment inverted={nightMode}> + <Comment.Avatar + src={`https://bienvenidoainternet.org/static/css/img/picnicbdy.gif`} + /> + <Comment.Content> + <Comment.Author as="a"> + #{currentBoard.board_type === 0 ? post.id : index + 1} + </Comment.Author> + <Comment.Metadata> + <div> + <Moment fromNow unix locale="es" date={post.timestamp} /> + </div> + </Comment.Metadata> + <Comment.Text> + <span className="deleted"> + Eliminado por el {post.IS_DELETED === 1 ? "usuario." : "Staff."} + </span> + </Comment.Text> + </Comment.Content> + </Comment> + ); + } + + // Obtener un avatar aleatorio basado en ID + let user_id = post.timestamp_formatted.split(" ID:")[1]; + const seedrandom = require("seedrandom"); + const rng = seedrandom(threadId + index); + const idRng = seedrandom(user_id); + const idColor = + "rgb(" + + Math.round(idRng() * 255) + + ", " + + Math.round(idRng() * 200) + + ", " + + Math.round(idRng() * 200) + + ")"; + + let rndAvatar, hue; + if (user_id !== "") { + let i = Math.round(idRng() * (avatars.length - 1)); + rndAvatar = avatars[i]; + hue = Math.round(idRng() * 360); } else { - flag = "kp"; // heh + let i = Math.round(rng() * (avatars.length - 1)); + rndAvatar = avatars[i]; + hue = Math.round(rng() * 360); } - } - // Fix: imagenes en dominio incorrecto - post.message = post.message.replace( - '<img src="/', - '<img src="https://bienvenidoainternet.org/' - ); + // Obetener bandera del pais (para /world) + let flag; + if (currentBoard.dir === "world") { + flag = post.name.match("[A-Z][A-Z]"); + if (flag !== null) { + flag = flag[0].toLowerCase(); + } else { + flag = "kp"; // heh + } + } - // Fix para reach-router - if (currentBoard.board_type === 0) { - post.message = post.message.replace("/res/", "/read/"); - post.message = post.message.replace(".html#", "/"); - } + // Fix: imagenes en dominio incorrecto + post.message = post.message.replace( + '<img src="/', + '<img src="https://bienvenidoainternet.org/' + ); - if (post.tripcode === " (★ ****-****)") { - post.tripcode = ""; - } + // Fix para reach-router + if (currentBoard.board_type === 0) { + post.message = post.message.replace("/res/", "/read/"); + post.message = post.message.replace(".html#", "/"); + } - // Obtener lista de videos de youtube incrustados - const youtubeRe = RegExp( - /(?:https?:\/\/)?(?:www\.)?youtu(.be\/|be\.com\/watch\?v=)(\w{11})/g - ); - const youtubeVideos = post.message.match(youtubeRe); + if (post.tripcode === " (★ ****-****)") { + post.tripcode = ""; + } - // El post es nuestro? - const ownPosts = JSON.parse(localStorage.getItem("ownPosts")); - let isMine = false; - if (ownPosts !== null) { - if (Object.prototype.hasOwnProperty.call(ownPosts, currentBoard.dir)) { - ownPosts[currentBoard.dir].forEach(reply => { - if (reply.thread_id === post.parentid) { - if (reply.reply_id === post.id) { - isMine = true; + // Obtener lista de videos de youtube incrustados + const youtubeRe = RegExp( + /(?:https?:\/\/)?(?:www\.)?youtu(.be\/|be\.com\/watch\?v=)(\w{11})/g + ); + const youtubeVideos = post.message.match(youtubeRe); + + // El post es nuestro? + const ownPosts = JSON.parse(localStorage.getItem("ownPosts")); + let isMine = false; + if (ownPosts !== null) { + if (Object.prototype.hasOwnProperty.call(ownPosts, currentBoard.dir)) { + ownPosts[currentBoard.dir].forEach(reply => { + if (reply.thread_id === post.parentid) { + if (reply.reply_id === post.id) { + isMine = true; + } } - } - }); + }); + } } - } - let starColor; - if (user_id === "CAP_USER*") { - starColor = "yellow"; - } else if (isMine) { - starColor = "blue"; - } else { - starColor = "grey"; - } + let starColor; + if (user_id === "CAP_USER*") { + starColor = "yellow"; + } else if (isMine) { + starColor = "blue"; + } else { + starColor = "grey"; + } - let hasVideo = post.file.endsWith(".webm"); - let hasAudio = - post.file.endsWith(".mp3") || - post.file.endsWith(".opus") || - post.file.endsWith(".ogg"); - let isMime = - post.file.endsWith(".epub") || - post.file.endsWith(".mod") || - post.file.endsWith(".pdf") || - post.file.endsWith(".s3m") || - post.file.endsWith(".swf") || - post.file.endsWith(".torrent") || - post.file.endsWith(".xm"); + let hasVideo = post.file.endsWith(".webm"); + let hasAudio = + post.file.endsWith(".mp3") || + post.file.endsWith(".opus") || + post.file.endsWith(".ogg"); + let isMime = + post.file.endsWith(".epub") || + post.file.endsWith(".mod") || + post.file.endsWith(".pdf") || + post.file.endsWith(".s3m") || + post.file.endsWith(".swf") || + post.file.endsWith(".torrent") || + post.file.endsWith(".xm"); - return ( - <Comment inverted={nightMode}> - <Comment.Avatar - src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`} - style={{ filter: `hue-rotate(${hue}deg)` }} - /> - <Comment.Content> - <Comment.Author - as="a" - href={post.mail !== "" ? `mailto:${post.email}` : null} - > - #{currentBoard.board_type === 0 ? post.id : index + 1}{" "} - <span - className={post.email === "sage" ? "username sage" : "username"} + let isDeleteable = true; + // No se pueden eliminar hilos con más de 5 respuestas + if (index === 0 && totalReplies > 5) { + isDeleteable = false; + } + // No se pueden eliminar hilos/post de /cero/ + if (currentBoard.dir === "0") { + isDeleteable = false; + } + // No se pueden eliminar post con una antiguedad superior a 24 horas + if (Date.now() / 1000 - post.timestamp > 86400) { + isDeleteable = false; + } + + return ( + <Comment inverted={nightMode}> + <Comment.Avatar + src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`} + style={{ filter: `hue-rotate(${hue}deg)` }} + /> + <Comment.Content> + <Comment.Author + as="a" + href={post.mail !== "" ? `mailto:${post.email}` : null} > - {currentBoard.dir === "world" - ? post.name.split("<em>")[0] - : post.name}{" "} - {currentBoard.dir === "world" ? <Flag name={flag} /> : null} - </span> - <span className="tripcode">{post.tripcode}</span> - </Comment.Author> - <Comment.Metadata> - <div> - <Moment fromNow unix locale="es" date={post.timestamp} /> - </div> - <div> - <Icon name="star" color={starColor} /> - {user_id === "CAP_USER*" ? ( - "Usuario verificado" - ) : ( - <span style={{ color: idColor }}>{user_id}</span> - )} - {isMine ? " (Tú)" : null} - </div> - </Comment.Metadata> - <Comment.Text> - {post.file !== "" ? ( - <div className="imageContainer"> - {hasVideo && ( - // eslint-disable-next-line jsx-a11y/media-has-caption - <video - src={`https://bienvenidoainternet.org/${currentBoard.dir}/src/${post.file}`} - controls - poster={`https://bienvenidoainternet.org/${currentBoard.dir}/thumb/${post.thumb}`} - width="400" - /> - )} - {hasAudio && ( - // eslint-disable-next-line jsx-a11y/media-has-caption - <audio - src={`https://bienvenidoainternet.org/${currentBoard.dir}/src/${post.file}`} - controls - /> - )} - {!hasVideo && !hasAudio && !isMime && ( - <ImageModal - href={`https://bienvenidoainternet.org/${currentBoard.dir}/src/${post.file}`} - trigger={ - <Image - centered - className="postImage" - src={`https://bienvenidoainternet.org/${currentBoard.dir}/thumb/${post.thumb}`} - /> - } - /> - )} - {isMime && ( - <Image - size="mini" - ui={false} - src={`https://bienvenidoainternet.org/static/${post.thumb}`} - /> + #{currentBoard.board_type === 0 ? post.id : index + 1}{" "} + <span + className={post.email === "sage" ? "username sage" : "username"} + > + {currentBoard.dir === "world" + ? post.name.split("<em>")[0] + : post.name}{" "} + {currentBoard.dir === "world" ? <Flag name={flag} /> : null} + </span> + <span className="tripcode">{post.tripcode}</span> + </Comment.Author> + <Comment.Metadata> + <div> + <Moment fromNow unix locale="es" date={post.timestamp} /> + </div> + <div> + <Icon name="star" color={starColor} /> + {user_id === "CAP_USER*" ? ( + "Usuario verificado" + ) : ( + <span style={{ color: idColor }}>{user_id}</span> )} + {isMine ? " (Tú)" : null} + </div> + </Comment.Metadata> + <Comment.Text> + {post.file !== "" ? ( + <div className="imageContainer"> + {hasVideo && ( + // eslint-disable-next-line jsx-a11y/media-has-caption + <video + src={`https://bienvenidoainternet.org/${currentBoard.dir}/src/${post.file}`} + controls + poster={`https://bienvenidoainternet.org/${currentBoard.dir}/thumb/${post.thumb}`} + width="400" + /> + )} + {hasAudio && ( + // eslint-disable-next-line jsx-a11y/media-has-caption + <audio + src={`https://bienvenidoainternet.org/${currentBoard.dir}/src/${post.file}`} + controls + /> + )} + {!hasVideo && !hasAudio && !isMime && ( + <ImageModal + href={`https://bienvenidoainternet.org/${currentBoard.dir}/src/${post.file}`} + trigger={ + <Image + centered + className="postImage" + src={`https://bienvenidoainternet.org/${currentBoard.dir}/thumb/${post.thumb}`} + /> + } + /> + )} + {isMime && ( + <Image + size="mini" + ui={false} + src={`https://bienvenidoainternet.org/static/${post.thumb}`} + /> + )} - <div> - <a - target="_blank" - rel="noopener noreferrer" - href={`https://bienvenidoainternet.org/${currentBoard.dir}/src/${post.file}`} - > - {post.file} - </a>{" "} - {!hasAudio && - !isMime && - `${post.image_width}x${post.image_height}`}{" "} - {filesize(post.file_size)} + <div> + <a + target="_blank" + rel="noopener noreferrer" + href={`https://bienvenidoainternet.org/${currentBoard.dir}/src/${post.file}`} + > + {post.file} + </a>{" "} + {!hasAudio && + !isMime && + `${post.image_width}x${post.image_height}`}{" "} + {filesize(post.file_size)} + </div> </div> - </div> - ) : null} + ) : null} - {youtubeVideos !== null - ? youtubeVideos.map((url, i) => { - let id = url.split("?v=")[1]; - return ( - <div className="playerContainer" key={i}> - <Embed - id={id} - source="youtube" - key={i} - placeholder={`https://img.youtube.com/vi/${id}/hqdefault.jpg`} - /> - </div> - ); - }) - : null} + {youtubeVideos !== null + ? youtubeVideos.map((url, i) => { + let id = url.split("?v=")[1]; + return ( + <div className="playerContainer" key={i}> + <Embed + id={id} + source="youtube" + key={i} + placeholder={`https://img.youtube.com/vi/${id}/hqdefault.jpg`} + /> + </div> + ); + }) + : null} - <div - className={`postMessage ${ - currentBoard.dir === "zonavip" ? "vipFont" : null - }`} - dangerouslySetInnerHTML={{ __html: post.message }} - /> - </Comment.Text> - <Comment.Actions> - {locked ? null : ( - <QuickReplyModal - trigger={<Comment.Action>Responder</Comment.Action>} - currentBoard={currentBoard} - id={threadId} - locked={locked} - replyIndex={currentBoard.board_type === 0 ? post.id : index + 1} + <div + className={`postMessage ${ + currentBoard.dir === "zonavip" ? "vipFont" : null + }`} + dangerouslySetInnerHTML={{ __html: post.message }} /> - )} - <ReportModal - trigger={<Comment.Action>Reportar</Comment.Action>} - postId={post.id} - /> - </Comment.Actions> - </Comment.Content> - </Comment> - ); -}; + </Comment.Text> + <Comment.Actions> + {locked ? null : ( + <QuickReplyModal + trigger={<Comment.Action>Responder</Comment.Action>} + currentBoard={currentBoard} + id={threadId} + locked={locked} + replyIndex={currentBoard.board_type === 0 ? post.id : index + 1} + /> + )} + <ReportModal + trigger={<Comment.Action>Reportar</Comment.Action>} + postId={post.id} + /> + {isDeleteable && ( + <Comment.Action onClick={this.showDialog}> + Eliminar + </Comment.Action> + )} + </Comment.Actions> + </Comment.Content> + <Confirm + open={this.state.deleteDialog} + content="¿Estás seguro de querer eliminar este post?" + onCancel={this.handleCancel} + onConfirm={this.handleConfirm} + confirmButton="Eliminar" + size="small" + /> + </Comment> + ); + } +} export default Post; diff --git a/src/Thread.js b/src/Thread.js index cb2e2e9..39d8382 100644 --- a/src/Thread.js +++ b/src/Thread.js @@ -173,6 +173,7 @@ class Thread extends Component { locked={locked} currentBoard={currentBoard} threadId={id} + totalReplies={total_replies} /> ))} </Comment.Group> |