From 19f7bd1582c549a274ebe0a0b5cc3d79604ac33c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 12 Mar 2018 19:43:31 +0100 Subject: [PATCH] Show media on report UI Ports 219aac7800a086a75f3ef36f71955bb8b6ccc2c0 to glitch-soc --- .../report/components/status_check_box.js | 46 +++++++++++++++++-- .../glitch/styles/components/status.scss | 28 +++++++---- 2 files changed, 59 insertions(+), 15 deletions(-) diff --git a/app/javascript/flavours/glitch/features/report/components/status_check_box.js b/app/javascript/flavours/glitch/features/report/components/status_check_box.js index cc92322011..d72a0fd07c 100644 --- a/app/javascript/flavours/glitch/features/report/components/status_check_box.js +++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.js @@ -2,6 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Toggle from 'react-toggle'; +import noop from 'lodash/noop'; +import StatusContent from 'flavours/glitch/components/status_content'; +import { MediaGallery, Video } from 'flavours/glitch/util/async-components'; +import Bundle from 'flavours/glitch/features/ui/components/bundle'; export default class StatusCheckBox extends React.PureComponent { @@ -14,18 +18,50 @@ export default class StatusCheckBox extends React.PureComponent { render () { const { status, checked, onToggle, disabled } = this.props; - const content = { __html: status.get('contentHtml') }; + let media = null; if (status.get('reblog')) { return null; } + if (status.get('media_attachments').size > 0) { + if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) { + + } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { + const video = status.getIn(['media_attachments', 0]); + + media = ( + + {Component => ( + + )} + + ); + } else { + media = ( + + {Component => } + + ); + } + } + return (
-
+
+ +
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 1ee5cba9e6..d9c7f6a6e4 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -314,18 +314,26 @@ border-bottom: 1px solid $ui-secondary-color; display: flex; - .status__content { - flex: 1 1 auto; - padding: 10px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + .status-check-box__status { + margin: 10px 0 10px 10px; + flex: 1; + + .media-gallery { + max-width: 250px; + } .status__content { - color: #3a3a3a; - a { - color: #005aa9; - } + padding: 0; + white-space: normal; + } + + .video-player { + margin-top: 8px; + max-width: 250px; + } + + .media-gallery__item-thumbnail { + cursor: default; } } }