const injectIntl = require('react-intl').injectIntl; const PropTypes = require('prop-types'); const intlShape = require('react-intl').intlShape; const FormattedMessage = require('react-intl').FormattedMessage; const MediaQuery = require('react-responsive').default; const React = require('react'); const Formsy = require('formsy-react').default; const classNames = require('classnames'); const GUI = require('scratch-gui').default; const IntlGUI = injectIntl(GUI); const AdminPanel = require('../../components/adminpanel/adminpanel.jsx'); const decorateText = require('../../lib/decorate-text.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const Button = require('../../components/forms/button.jsx'); const Avatar = require('../../components/avatar/avatar.jsx'); const Banner = require('./banner.jsx'); const ModInfo = require('./mod-info.jsx'); const RemixCredit = require('./remix-credit.jsx'); const RemixList = require('./remix-list.jsx'); const Stats = require('./stats.jsx'); const StudioList = require('./studio-list.jsx'); const Subactions = require('./subactions.jsx'); const InplaceInput = require('../../components/forms/inplace-input.jsx'); const TopLevelComment = require('./comment/top-level-comment.jsx'); const ComposeComment = require('./comment/compose-comment.jsx'); const ExtensionChip = require('./extension-chip.jsx'); const thumbnailUrl = require('../../lib/user-thumbnail'); const projectShape = require('./projectshape.jsx').projectShape; require('./preview.scss'); const frameless = require('../../lib/frameless'); // disable enter key submission on formsy input fields; otherwise formsy thinks // we meant to trigger the "See inside" button. Instead, treat these keypresses // as a blur, which will trigger a save. const onKeyPress = e => { if (e.target.type === 'text' && e.which === 13 /* Enter */) { e.preventDefault(); e.target.blur(); } }; const PreviewPresentation = ({ addToStudioOpen, adminModalOpen, adminPanelOpen, assetHost, backpackHost, canAddToStudio, canDeleteComments, canRemix, canReport, canRestoreComments, canSave, canShare, canUseBackpack, cloudHost, comments, editable, extensions, faved, favoriteCount, intl, isFullScreen, isLoggedIn, isNewScratcher, isRemixing, isScratcher, isShared, justRemixed, justShared, loveCount, loved, modInfo, moreCommentsToLoad, onAddComment, onAddToStudioClicked, onAddToStudioClosed, onCloseAdminPanel, onCopyProjectLink, onDeleteComment, onFavoriteClicked, onLoadMore, onLoveClicked, onOpenAdminPanel, onRemix, onRemixing, onReportClicked, onReportClose, onReportComment, onReportSubmit, onRestoreComment, onSeeAllComments, onSeeInside, onShare, onToggleComments, onToggleStudio, onUpdate, onUpdateProjectId, originalInfo, parentInfo, projectHost, projectId, projectInfo, projectStudios, remixes, replies, reportOpen, showModInfo, singleCommentId, userOwnsProject, visibilityInfo }) => { const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : ''; const revisedDate = ((projectInfo.history && projectInfo.history.modified)) ? projectInfo.history.modified : ''; // Allow embedding html in banner messages coming from the server const embedCensorMessage = message => ( // eslint-disable-next-line react/no-danger ); let banner; if (visibilityInfo.deleted) { // If both censored and deleted, prioritize deleted banner banner = (} />); } else if (visibilityInfo.censored) { if (visibilityInfo.reshareable) { banner = (} className="banner-danger" message={embedCensorMessage(visibilityInfo.message)} onAction={onShare} />); } else { banner = (); } } else if (justRemixed && isNewScratcher) { banner = ( } /> ); } else if (canShare) { if (isShared && justShared) { // if was shared a while ago, don't show any share banner if (isNewScratcher) { banner = (} />); } else { banner = (} />); } } else if (!isShared) { banner = (} message={} onAction={onShare} />); } } return (