10638717998

Committed 30 Aug 2024 08:22PM UTC coverage: 31.853% (-0.01%) from 31.867%

Build # 10638717998

Build Type

Pull #9680

github

Committed by

Raemon

Commit Message

pr fixes

Pull Request Pull Request #9680: Auto-spotlight improvements: better jailbreak + spotlight UI improvements

Run Details

5023 of 41172 branches covered (12.2%)

Branch coverage included in aggregate %.

6 of 47 new or added lines in 3 files covered. (12.77%)

7 existing lines in 1 file now uncovered.

29346 of 66726 relevant lines covered (43.98%)

187.84 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

26.09

/packages/lesswrong/components/spotlights/SpotlightItem.tsx

import Button from '@material-ui/core/Button';
import EditIcon from '@material-ui/icons/Edit';
import PublishIcon from '@material-ui/icons/Publish';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import CloseIcon from '@material-ui/icons/Close';
import classNames from 'classnames';
import React, { CSSProperties, useCallback, useState } from 'react';
import { userGetProfileUrlFromSlug } from '../../lib/collections/users/helpers';
import { Link } from '../../lib/reactRouterWrapper';
import { Components, getFragment, registerComponent } from '../../lib/vulcan-lib';
import { userCanDo } from '../../lib/vulcan-users';
import { postBodyStyles } from '../../themes/stylePiping';
import { useCurrentUser } from '../common/withUser';
import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';
import { SECTION_WIDTH } from '../common/SingleColumnSection';
import { getSpotlightUrl } from '../../lib/collections/spotlights/helpers';
import { useUpdate } from '../../lib/crud/withUpdate';

const TEXT_WIDTH = 350;

export const descriptionStyles = (theme: ThemeType) => ({
  ...postBodyStyles(theme),
  ...(isBookUI ? theme.typography.body2 : {}),
  lineHeight: '1.65rem',
  '& p': {
    marginTop: ".5em",
    marginBottom: ".5em",
    '&:first-child': {
      marginTop: 0,
    },
    'style~&': {
      marginTop: 0,
    },
    '&:last-child': {
      marginBottom: 0,
    }
  },
})

const buildFadeMask = (breakpoints: string[]) => {
  const mask = `linear-gradient(to right, ${breakpoints.join(",")})`;
  return {mask, "-webkit-mask-image": mask};
}

const styles = (theme: ThemeType) => ({
  root: {
    marginBottom: 12,
    boxShadow: theme.palette.boxShadow.default,
    // TODO these were added to fix an urgent bug, hence the forum gating. Maybe they could be un-gated
    ...(isFriendlyUI && {
      maxWidth: SECTION_WIDTH,
      marginLeft: "auto",
      marginRight: "auto",
      [theme.breakpoints.up('md')]: {
        width: SECTION_WIDTH // TODO: replace this hacky solution with a more comprehensive refactoring of SingleColumnSection.
        // (SingleColumnLayout should probably be replaced by grid-css in Layout.tsx)
      }
    })
  },
  spotlightItem: {
    position: "relative",
    borderRadius: theme.borderRadius.default,
    background: theme.palette.panelBackground.default,
    '&:hover': {
      boxShadow: theme.palette.boxShadow.sequencesGridItemHover,
    },
    '&:hover $adminButtonIcon': {
      opacity: .2
    },
    '&:hover $closeButton': {
      color: theme.palette.grey[100],
    }
  },
  spotlightFadeBackground: {
    background: "var(--spotlight-fade)",
  },
  closeButtonWrapper: {
    position: 'absolute',
    top: 0,
    right: 0,
  },
  closeButton: {
    padding: '.5em',
    minHeight: '.75em',
    minWidth: '.75em',
    color: isFriendlyUI ? theme.palette.text.alwaysWhite : theme.palette.grey[300],
    zIndex: theme.zIndexes.spotlightItemCloseButton,
  },
  hideButton: {
    cursor: "pointer",
    position: "absolute",
    top: 12,
    right: 12,
    width: 20,
    height: 20,
    color: theme.palette.text.alwaysWhite,
    "&:hover": {
      opacity: 0.8,
    },
  },
  content: {
    padding: 16,
    paddingRight: 35,
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    marginRight: 150,
    position: "relative",
    zIndex: theme.zIndexes.spotlightItem,
    // Drop shadow that helps the text stand out from the background image
    textShadow: isFriendlyUI ? undefined : `
      0px 0px 10px ${theme.palette.background.default},
      0px 0px 20px ${theme.palette.background.default}
    `,
    [theme.breakpoints.up('sm')]: {
      minHeight: 100
    },
    [theme.breakpoints.down('xs')]: {
      marginRight: 100
    },
    '& br': {
      [theme.breakpoints.down('sm')]: {
        display: "none"
      }
    }
  },
  postPadding: {
    paddingBottom: 12
  },
  description: {
    marginTop: 7,
    marginBottom: 10,
    ...descriptionStyles(theme),
    position: "relative",
    [theme.breakpoints.down('xs')]: {
      display: "none"
    },
    ...(isFriendlyUI ? {
      fontSize: 13,
      fontWeight: 500,
      fontFamily: theme.palette.fonts.sansSerifStack,
      color: theme.palette.text.alwaysWhite,
      marginTop: 8,
      maxWidth: TEXT_WIDTH,
      "& a": {
        color: theme.palette.text.alwaysWhite,
        textDecoration: "underline",
        "&:hover": {
          opacity: 0.8,
          color: `${theme.palette.text.alwaysWhite} !important`,
        },
        "&:visited": {
          color: theme.palette.text.alwaysWhite,
        },
      },
    } : {}),
  },
  title: {
    ...theme.typography.postStyle,
    ...(isFriendlyUI
      ? {
        fontSize: 22,
        fontWeight: 700,
        color: theme.palette.text.alwaysWhite,
      }
      : {
        fontSize: 20,
        fontVariant: "small-caps",
        lineHeight: "1.2em",
      }
    ),
    display: "flex",
    alignItems: "center"
  },
  subtitle: {
    ...theme.typography.postStyle,
    ...theme.typography.italic,
    ...(isFriendlyUI ? {
      fontSize: 13,
      fontWeight: 500,
      fontFamily: theme.palette.fonts.sansSerifStack,
      color: theme.palette.text.alwaysWhite,
      marginTop: 8,
      maxWidth: TEXT_WIDTH,
    } : {
      color: theme.palette.grey[700],
      fontSize: 15,
      marginTop: -1,
    }),
  },
  startOrContinue: isFriendlyUI
    ? {
      marginTop: 0,
      [theme.breakpoints.down("xs")]: {
        marginTop: 8,
      },
    }
    : {
      marginTop: 4,
    },
  image: {
    height: "100%",
    position: "absolute",
    top: 0,
    right: 0,
    borderTopRightRadius: theme.borderRadius.default,
    borderBottomRightRadius: theme.borderRadius.default,
    // TODO these were added to fix an urgent bug, hence the forum gating. Maybe they could be un-gated
    ...(isFriendlyUI && {width: "100%", objectFit: "cover"}),
  },
  imageFade: buildFadeMask([
    "transparent 0",
    `${theme.palette.text.alwaysWhite} 80%`,
    `${theme.palette.text.alwaysWhite} 100%`,
  ]),
  imageFadeCustom: buildFadeMask([
    "transparent 0",
    "transparent 30%",
    `${theme.palette.text.alwaysWhite} 90%`,
    `${theme.palette.text.alwaysWhite} 100%`,
  ]),
  author: {
    marginTop: 4,
    color: theme.palette.grey[600],
  },
  authorName: {
    color: theme.palette.primary.main,
  },
  editAllButton: {
    [theme.breakpoints.up('md')]: {
      position: "absolute",
      top: 6,
      right: -28,
    },
    [theme.breakpoints.down('sm')]: {
      position: "absolute",
      top: 4,
      right: 8
    },
  },
  draftButton: {
    [theme.breakpoints.up('md')]: {
      position: "absolute",
      top: 35,
      right: -28,
    },
    [theme.breakpoints.down('sm')]: {
      position: "absolute",
      top: 33,
      right: 8
    },
  },
  deleteButton: {
    [theme.breakpoints.up('md')]: {
      position: "absolute",
      bottom: 0,
      right: -28,
    },
    [theme.breakpoints.down('sm')]: {
      position: "absolute",
      bottom: 0,
      right: 8
    },
  },
  editAllButtonIcon: {
    width: 20
  },
  adminButtonIcon: {
    width: 18,
    opacity: 0,
    cursor: "pointer",
    zIndex: theme.zIndexes.spotlightItemCloseButton,
    [theme.breakpoints.down('sm')]: {
      color: theme.palette.background.pageActiveAreaBackground,
      width: 16,
      opacity:.2
    },
    '&:hover': {
      opacity: .5
    }
  },
  editDescriptionButton: {
    marginLeft: 8
  },
  editDescription: {
    '& .form-input': {
      margin: 0
    },
    '& .EditorFormComponent-commentEditorHeight': {
      minHeight: "unset"
    },
    '& .EditorFormComponent-commentEditorHeight .ck.ck-content': {
      minHeight: "unset"
    },
    '& .ck.ck-content.ck-editor__editable': {
      ...descriptionStyles(theme) 
    },
    '& .EditorFormComponent-ckEditorStyles .ck.ck-content': {
      marginLeft: 0,
    },
    '& .ck.ck-editor__editable_inline': {
      padding: 0,
      border: "none !important",
    },
    '& .form-submit button': {
      position: "absolute",
      bottom: -38,
      right: 0,
      marginLeft: 12
    }
  },
  form: {
    borderTop: theme.palette.border.faint,
    background: theme.palette.background.translucentBackground,
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 8,
    paddingBottom: 8
  },
  metaData: {
    textAlign: "right",
    paddingTop: 6,
    paddingBottom: 12
  },
  splashImage: {
    transform: "translateX(13%) scale(1.15)", // splash images aren't quite designed for this context and need this adjustment. Scale 1.15 to deal with a few random images that had weird whitespace.
    filter: "brightness(1.2)",
  },
  splashImageContainer: {
    position: "absolute",
    top: 0,
    right: 0,
    width: "100%",
    height: "100%",
    overflow: "hidden",
  },
  reverseIcon: {
    transform: "rotate(180deg)",
  },
});

export const SpotlightItem = ({
  spotlight,
  showAdminInfo,
  hideBanner,
  refetchAllSpotlights,
  className,
  classes,
}: {
  spotlight: SpotlightDisplay,
  showAdminInfo?: boolean,
  hideBanner?: () => void,
  // This is so that if a spotlight's position is updated (in SpotlightsPage), we refetch all of them to display them with their updated positions and in the correct order
  refetchAllSpotlights?: () => void,
  className?: string,
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser()

  const [edit, setEdit] = useState<boolean>(false)
  const [editDescription, setEditDescription] = useState<boolean>(false)

  const url = getSpotlightUrl(spotlight);

  const duration = spotlight.duration

  const onUpdate = useCallback(() => {
    setEdit(false);
    refetchAllSpotlights?.();
  }, [refetchAllSpotlights]);

  const { mutate: updateSpotlight } = useUpdate({
    collectionName: "Spotlights",
    fragmentName: "SpotlightDisplay",
  });

  const toggleDraft = useCallback(async () => {
    if (!currentUser || !userCanDo(currentUser, 'spotlights.edit.all')) {
      return;
    }
    await updateSpotlight({
      selector: { _id: spotlight._id },
      data: { draft: !spotlight.draft }
    });
    refetchAllSpotlights?.();
  }, [currentUser, spotlight._id, spotlight.draft, refetchAllSpotlights, updateSpotlight]);

  const deleteDraft = useCallback(async () => {
    if (!currentUser || !userCanDo(currentUser, 'spotlights.edit.all')) {
      return;
    }
    await updateSpotlight({
      selector: { _id: spotlight._id },
      data: { deletedDraft: true }
    });
    refetchAllSpotlights?.();
  }, [currentUser, spotlight._id, spotlight.draft, refetchAllSpotlights, updateSpotlight]);

  // Define fade color with a CSS variable to be accessed in the styles
  const style = {
    "--spotlight-fade": spotlight.imageFadeColor,
  } as CSSProperties;

  const {
    MetaInfo, FormatDate, AnalyticsTracker, ContentItemBody, CloudinaryImage2,
    WrappedSmartForm, SpotlightEditorStyles, SpotlightStartOrContinueReading,
    Typography, LWTooltip, ForumIcon,
  } = Components
  return <AnalyticsTracker eventType="spotlightItem" captureOnMount captureOnClick={false}>
    <div
      id={spotlight._id}
      style={style}
      className={classNames(classes.root, className)}
    >
      <div className={classNames(classes.spotlightItem, {
        [classes.spotlightFadeBackground]: !!spotlight.imageFadeColor,
      })}>
        <div className={classNames(classes.content, {[classes.postPadding]: spotlight.documentType === "Post"})}>
          <div className={classes.title}>
            <Link to={url}>
              {spotlight.customTitle ?? spotlight.document.title}
            </Link>
            <span className={classes.editDescriptionButton}>
              {showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">
                <EditIcon className={classes.adminButtonIcon} onClick={() => setEditDescription(!editDescription)}/>
              </LWTooltip>}
            </span>
          </div>
          {spotlight.customSubtitle && <div className={classes.subtitle}>
            {spotlight.customSubtitle}
          </div>}
          {(spotlight.description?.html || isBookUI) && <div className={classes.description}>
            {editDescription ? 
              <div className={classes.editDescription}>
                <WrappedSmartForm
                  collectionName="Spotlights"
                  fields={['description']}
                  documentId={spotlight._id}
                  mutationFragment={getFragment('SpotlightEditQueryFragment')}
                  queryFragment={getFragment('SpotlightEditQueryFragment')}
                  successCallback={() => setEditDescription(false)}
                />
              </div>
              :
              <ContentItemBody
                dangerouslySetInnerHTML={{__html: spotlight.description?.html ?? ''}}
                description={`${spotlight.documentType} ${spotlight.document._id}`}
              />
            }
          </div>}
          {spotlight.showAuthor && spotlight.document.user && <Typography variant='body2' className={classes.author}>
            by <Link className={classes.authorName} to={userGetProfileUrlFromSlug(spotlight.document.user.slug)}>{spotlight.document.user.displayName}</Link>
          </Typography>}
          <SpotlightStartOrContinueReading spotlight={spotlight} className={classes.startOrContinue} />
        </div>
        {spotlight.spotlightSplashImageUrl && <div className={classes.splashImageContainer}><img src={spotlight.spotlightSplashImageUrl} className={classNames(classes.image, classes.imageFade, classes.splashImage)}/></div>}
        {spotlight.spotlightImageId && <CloudinaryImage2
          publicId={spotlight.spotlightImageId}
          darkPublicId={spotlight.spotlightDarkImageId}
          className={classNames(classes.image, {
            [classes.imageFade]: spotlight.imageFade && !spotlight.imageFadeColor,
            [classes.imageFadeCustom]: spotlight.imageFade && spotlight.imageFadeColor,
          })}
        />}
        {hideBanner && (
          isFriendlyUI
            ? (
              <ForumIcon
                icon="Close"
                onClick={hideBanner}
                className={classes.hideButton}
              />
            )
            : (
              <div className={classes.closeButtonWrapper}>
                <LWTooltip title="Hide this spotlight" placement="right">
                  <Button className={classes.closeButton} onClick={hideBanner}>
                    <ForumIcon icon="Close" />
                  </Button>
                </LWTooltip>
              </div>
            )
          )
        }
        <div className={classes.editAllButton}>
          {showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">
            <MoreVertIcon className={classNames(classes.adminButtonIcon, classes.editAllButtonIcon)} onClick={() => setEdit(!edit)}/>
          </LWTooltip>}
        </div>
        <div className={classes.draftButton}>
          {showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && 
            <LWTooltip title={spotlight.draft ? "Undraft" : "Draft"}>
              <PublishIcon className={classNames(classes.adminButtonIcon, classes.editAllButtonIcon, 
                !spotlight.draft && classes.reverseIcon)} onClick={() => toggleDraft()}/>
            </LWTooltip>
          }
        </div>
        {spotlight.draft && <div className={classes.deleteButton}>
          {showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Archive">
            <CloseIcon className={classNames(classes.adminButtonIcon, classes.editAllButtonIcon)} onClick={() => deleteDraft()}/>
          </LWTooltip>}
        </div>}
      </div>
      {showAdminInfo && <>
        {edit ? <div className={classes.form}>
            <SpotlightEditorStyles>
            <WrappedSmartForm
              collectionName="Spotlights"
              documentId={spotlight._id}
              mutationFragment={getFragment('SpotlightEditQueryFragment')}
              queryFragment={getFragment('SpotlightEditQueryFragment')}
              successCallback={onUpdate}
            />
            </SpotlightEditorStyles>
          </div>
           :
          <div className={classes.metaData}>
            {spotlight.draft && <MetaInfo>[Draft]</MetaInfo>}
            <MetaInfo>{spotlight.position}</MetaInfo>
            <MetaInfo><FormatDate date={spotlight.lastPromotedAt} format="YYYY-MM-DD"/></MetaInfo>
            <LWTooltip title={`This will be on the frontpage for ${duration} days when it rotates in`}>
              <MetaInfo>{duration} days</MetaInfo>
            </LWTooltip>
          </div>
        }
      </>}
    </div>
  </AnalyticsTracker>
}

const SpotlightItemComponent = registerComponent('SpotlightItem', SpotlightItem, {
  styles,
  stylePriority: -1,
});

declare global {
  interface ComponentTypes {
    SpotlightItem: typeof SpotlightItemComponent
  }
}

1	import Button from '@material-ui/core/Button';	4✔
2	import EditIcon from '@material-ui/icons/Edit';	1✔
3	import PublishIcon from '@material-ui/icons/Publish';	1✔
4	import MoreVertIcon from '@material-ui/icons/MoreVert';	1✔
5	import CloseIcon from '@material-ui/icons/Close';	1✔
6	import classNames from 'classnames';	1✔
7	import React, { CSSProperties, useCallback, useState } from 'react';	1✔
8	import { userGetProfileUrlFromSlug } from '../../lib/collections/users/helpers';	1✔
9	import { Link } from '../../lib/reactRouterWrapper';	1✔
10	import { Components, getFragment, registerComponent } from '../../lib/vulcan-lib';	1✔
11	import { userCanDo } from '../../lib/vulcan-users';	1✔
12	import { postBodyStyles } from '../../themes/stylePiping';	1✔
13	import { useCurrentUser } from '../common/withUser';	1✔
14	import { isBookUI, isFriendlyUI } from '../../themes/forumTheme';	1✔
15	import { SECTION_WIDTH } from '../common/SingleColumnSection';	1✔
16	import { getSpotlightUrl } from '../../lib/collections/spotlights/helpers';	1✔
17	import { useUpdate } from '../../lib/crud/withUpdate';	1✔
18
19	const TEXT_WIDTH = 350;	1✔
20
21	export const descriptionStyles = (theme: ThemeType) => ({	3✔
22	...postBodyStyles(theme),
23	...(isBookUI ? theme.typography.body2 : {}),	3!
24	lineHeight: '1.65rem',
25	'& p': {
26	marginTop: ".5em",
27	marginBottom: ".5em",
28	'&:first-child': {
29	marginTop: 0,
30	},
31	'style~&': {
32	marginTop: 0,
33	},
34	'&:last-child': {
35	marginBottom: 0,
36	}
37	},
38	})
39
40	const buildFadeMask = (breakpoints: string[]) => {	1✔
41	const mask = `linear-gradient(to right, ${breakpoints.join(",")})`;	2✔
42	return {mask, "-webkit-mask-image": mask};	2✔
43	}
44
45	const styles = (theme: ThemeType) => ({	1✔
46	root: {
47	marginBottom: 12,
48	boxShadow: theme.palette.boxShadow.default,
49	// TODO these were added to fix an urgent bug, hence the forum gating. Maybe they could be un-gated
50	...(isFriendlyUI && {	2✔
51	maxWidth: SECTION_WIDTH,
52	marginLeft: "auto",
53	marginRight: "auto",
54	[theme.breakpoints.up('md')]: {
55	width: SECTION_WIDTH // TODO: replace this hacky solution with a more comprehensive refactoring of SingleColumnSection.
56	// (SingleColumnLayout should probably be replaced by grid-css in Layout.tsx)
57	}
58	})
59	},
60	spotlightItem: {
61	position: "relative",
62	borderRadius: theme.borderRadius.default,
63	background: theme.palette.panelBackground.default,
64	'&:hover': {
65	boxShadow: theme.palette.boxShadow.sequencesGridItemHover,
66	},
67	'&:hover $adminButtonIcon': {
68	opacity: .2
69	},
70	'&:hover $closeButton': {
71	color: theme.palette.grey[100],
72	}
73	},
74	spotlightFadeBackground: {
75	background: "var(--spotlight-fade)",
76	},
77	closeButtonWrapper: {
78	position: 'absolute',
79	top: 0,
80	right: 0,
81	},
82	closeButton: {
83	padding: '.5em',
84	minHeight: '.75em',
85	minWidth: '.75em',
86	color: isFriendlyUI ? theme.palette.text.alwaysWhite : theme.palette.grey[300],	1!
87	zIndex: theme.zIndexes.spotlightItemCloseButton,
88	},
89	hideButton: {
90	cursor: "pointer",
91	position: "absolute",
92	top: 12,
93	right: 12,
94	width: 20,
95	height: 20,
96	color: theme.palette.text.alwaysWhite,
97	"&:hover": {
98	opacity: 0.8,
99	},
100	},
101	content: {
102	padding: 16,
103	paddingRight: 35,
104	display: "flex",
105	flexDirection: "column",
106	justifyContent: "space-between",
107	marginRight: 150,
108	position: "relative",
109	zIndex: theme.zIndexes.spotlightItem,
110	// Drop shadow that helps the text stand out from the background image
111	textShadow: isFriendlyUI ? undefined : `	1!
112	0px 0px 10px ${theme.palette.background.default},
113	0px 0px 20px ${theme.palette.background.default}
114	`,
115	[theme.breakpoints.up('sm')]: {
116	minHeight: 100
117	},
118	[theme.breakpoints.down('xs')]: {
119	marginRight: 100
120	},
121	'& br': {
122	[theme.breakpoints.down('sm')]: {
123	display: "none"
124	}
125	}
126	},
127	postPadding: {
128	paddingBottom: 12
129	},
130	description: {
131	marginTop: 7,
132	marginBottom: 10,
133	...descriptionStyles(theme),
134	position: "relative",
135	[theme.breakpoints.down('xs')]: {
136	display: "none"
137	},
138	...(isFriendlyUI ? {	1!
139	fontSize: 13,
140	fontWeight: 500,
141	fontFamily: theme.palette.fonts.sansSerifStack,
142	color: theme.palette.text.alwaysWhite,
143	marginTop: 8,
144	maxWidth: TEXT_WIDTH,
145	"& a": {
146	color: theme.palette.text.alwaysWhite,
147	textDecoration: "underline",
148	"&:hover": {
149	opacity: 0.8,
150	color: `${theme.palette.text.alwaysWhite} !important`,
151	},
152	"&:visited": {
153	color: theme.palette.text.alwaysWhite,
154	},
155	},
156	} : {}),
157	},
158	title: {
159	...theme.typography.postStyle,
160	...(isFriendlyUI
161	? {	1!
162	fontSize: 22,
163	fontWeight: 700,
164	color: theme.palette.text.alwaysWhite,
165	}
166	: {
167	fontSize: 20,
168	fontVariant: "small-caps",
169	lineHeight: "1.2em",
170	}
171	),
172	display: "flex",
173	alignItems: "center"
174	},
175	subtitle: {
176	...theme.typography.postStyle,
177	...theme.typography.italic,
178	...(isFriendlyUI ? {	1!
179	fontSize: 13,
180	fontWeight: 500,
181	fontFamily: theme.palette.fonts.sansSerifStack,
182	color: theme.palette.text.alwaysWhite,
183	marginTop: 8,
184	maxWidth: TEXT_WIDTH,
185	} : {
186	color: theme.palette.grey[700],
187	fontSize: 15,
188	marginTop: -1,
189	}),
190	},
191	startOrContinue: isFriendlyUI
192	? {	1!
193	marginTop: 0,
194	[theme.breakpoints.down("xs")]: {
195	marginTop: 8,
196	},
197	}
198	: {
199	marginTop: 4,
200	},
201	image: {
202	height: "100%",
203	position: "absolute",
204	top: 0,
205	right: 0,
206	borderTopRightRadius: theme.borderRadius.default,
207	borderBottomRightRadius: theme.borderRadius.default,
208	// TODO these were added to fix an urgent bug, hence the forum gating. Maybe they could be un-gated
209	...(isFriendlyUI && {width: "100%", objectFit: "cover"}),	2✔
210	},
211	imageFade: buildFadeMask([
212	"transparent 0",
213	`${theme.palette.text.alwaysWhite} 80%`,
214	`${theme.palette.text.alwaysWhite} 100%`,
215	]),
216	imageFadeCustom: buildFadeMask([
217	"transparent 0",
218	"transparent 30%",
219	`${theme.palette.text.alwaysWhite} 90%`,
220	`${theme.palette.text.alwaysWhite} 100%`,
221	]),
222	author: {
223	marginTop: 4,
224	color: theme.palette.grey[600],
225	},
226	authorName: {
227	color: theme.palette.primary.main,
228	},
229	editAllButton: {
230	[theme.breakpoints.up('md')]: {
231	position: "absolute",
232	top: 6,
233	right: -28,
234	},
235	[theme.breakpoints.down('sm')]: {
236	position: "absolute",
237	top: 4,
238	right: 8
239	},
240	},
241	draftButton: {
242	[theme.breakpoints.up('md')]: {
243	position: "absolute",
244	top: 35,
245	right: -28,
246	},
247	[theme.breakpoints.down('sm')]: {
248	position: "absolute",
249	top: 33,
250	right: 8
251	},
252	},
253	deleteButton: {
254	[theme.breakpoints.up('md')]: {
255	position: "absolute",
256	bottom: 0,
257	right: -28,
258	},
259	[theme.breakpoints.down('sm')]: {
260	position: "absolute",
261	bottom: 0,
262	right: 8
263	},
264	},
265	editAllButtonIcon: {
266	width: 20
267	},
268	adminButtonIcon: {
269	width: 18,
270	opacity: 0,
271	cursor: "pointer",
272	zIndex: theme.zIndexes.spotlightItemCloseButton,
273	[theme.breakpoints.down('sm')]: {
274	color: theme.palette.background.pageActiveAreaBackground,
275	width: 16,
276	opacity:.2
277	},
278	'&:hover': {
279	opacity: .5
280	}
281	},
282	editDescriptionButton: {
283	marginLeft: 8
284	},
285	editDescription: {
286	'& .form-input': {
287	margin: 0
288	},
289	'& .EditorFormComponent-commentEditorHeight': {
290	minHeight: "unset"
291	},
292	'& .EditorFormComponent-commentEditorHeight .ck.ck-content': {
293	minHeight: "unset"
294	},
295	'& .ck.ck-content.ck-editor__editable': {
296	...descriptionStyles(theme)
297	},
298	'& .EditorFormComponent-ckEditorStyles .ck.ck-content': {
299	marginLeft: 0,
300	},
301	'& .ck.ck-editor__editable_inline': {
302	padding: 0,
303	border: "none !important",
304	},
305	'& .form-submit button': {
306	position: "absolute",
307	bottom: -38,
308	right: 0,
309	marginLeft: 12
310	}
311	},
312	form: {
313	borderTop: theme.palette.border.faint,
314	background: theme.palette.background.translucentBackground,
315	paddingLeft: 16,
316	paddingRight: 16,
317	paddingTop: 8,
318	paddingBottom: 8
319	},
320	metaData: {
321	textAlign: "right",
322	paddingTop: 6,
323	paddingBottom: 12
324	},
325	splashImage: {
326	transform: "translateX(13%) scale(1.15)", // splash images aren't quite designed for this context and need this adjustment. Scale 1.15 to deal with a few random images that had weird whitespace.
327	filter: "brightness(1.2)",
328	},
329	splashImageContainer: {
330	position: "absolute",
331	top: 0,
332	right: 0,
333	width: "100%",
334	height: "100%",
335	overflow: "hidden",
336	},
337	reverseIcon: {
338	transform: "rotate(180deg)",
339	},
340	});
341
342	export const SpotlightItem = ({	1✔
343	spotlight,
344	showAdminInfo,
345	hideBanner,
346	refetchAllSpotlights,
347	className,
348	classes,
349	}: {
350	spotlight: SpotlightDisplay,
351	showAdminInfo?: boolean,
352	hideBanner?: () => void,
353	// This is so that if a spotlight's position is updated (in SpotlightsPage), we refetch all of them to display them with their updated positions and in the correct order
354	refetchAllSpotlights?: () => void,
355	className?: string,
356	classes: ClassesType<typeof styles>,
357	}) => {
358	const currentUser = useCurrentUser()	×
359
360	const [edit, setEdit] = useState<boolean>(false)	×
361	const [editDescription, setEditDescription] = useState<boolean>(false)	×
362
363	const url = getSpotlightUrl(spotlight);	×
364
365	const duration = spotlight.duration	×
366
367	const onUpdate = useCallback(() => {	×
368	setEdit(false);	×
369	refetchAllSpotlights?.();	×
370	}, [refetchAllSpotlights]);
371
NEW 372	const { mutate: updateSpotlight } = useUpdate({	×
373	collectionName: "Spotlights",
374	fragmentName: "SpotlightDisplay",
375	});
376
NEW 377	const toggleDraft = useCallback(async () => {	×
NEW 378	if (!currentUser \|\| !userCanDo(currentUser, 'spotlights.edit.all')) {	×
NEW 379	return;	×
380	}
NEW 381	await updateSpotlight({	×
382	selector: { _id: spotlight._id },
383	data: { draft: !spotlight.draft }
384	});
NEW 385	refetchAllSpotlights?.();	×
386	}, [currentUser, spotlight._id, spotlight.draft, refetchAllSpotlights, updateSpotlight]);
387
NEW 388	const deleteDraft = useCallback(async () => {	×
NEW 389	if (!currentUser \|\| !userCanDo(currentUser, 'spotlights.edit.all')) {	×
NEW 390	return;	×
391	}
NEW 392	await updateSpotlight({	×
393	selector: { _id: spotlight._id },
394	data: { deletedDraft: true }
395	});
NEW 396	refetchAllSpotlights?.();	×
397	}, [currentUser, spotlight._id, spotlight.draft, refetchAllSpotlights, updateSpotlight]);
398
399	// Define fade color with a CSS variable to be accessed in the styles
400	const style = {	×
401	"--spotlight-fade": spotlight.imageFadeColor,
402	} as CSSProperties;
403
404	const {
405	MetaInfo, FormatDate, AnalyticsTracker, ContentItemBody, CloudinaryImage2,
406	WrappedSmartForm, SpotlightEditorStyles, SpotlightStartOrContinueReading,
407	Typography, LWTooltip, ForumIcon,
408	} = Components	×
409	return <AnalyticsTracker eventType="spotlightItem" captureOnMount captureOnClick={false}>	×
410	<div
411	id={spotlight._id}
412	style={style}
413	className={classNames(classes.root, className)}
414	>
415	<div className={classNames(classes.spotlightItem, {
416	[classes.spotlightFadeBackground]: !!spotlight.imageFadeColor,
417	})}>
418	<div className={classNames(classes.content, {[classes.postPadding]: spotlight.documentType === "Post"})}>
419	<div className={classes.title}>
420	<Link to={url}>
421	{spotlight.customTitle ?? spotlight.document.title}	×
422	</Link>
423	<span className={classes.editDescriptionButton}>
424	{showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">	×
NEW 425	<EditIcon className={classes.adminButtonIcon} onClick={() => setEditDescription(!editDescription)}/>	×
426	</LWTooltip>}
427	</span>
428	</div>
429	{spotlight.customSubtitle && <div className={classes.subtitle}>	×
430	{spotlight.customSubtitle}
431	</div>}	×
432	{(spotlight.description?.html \|\| isBookUI) && <div className={classes.description}>	×
433	{editDescription ?
434	<div className={classes.editDescription}>	×
435	<WrappedSmartForm
436	collectionName="Spotlights"
437	fields={['description']}
438	documentId={spotlight._id}
439	mutationFragment={getFragment('SpotlightEditQueryFragment')}
440	queryFragment={getFragment('SpotlightEditQueryFragment')}
441	successCallback={() => setEditDescription(false)}	×
442	/>
443	</div>
444	:
445	<ContentItemBody
446	dangerouslySetInnerHTML={{__html: spotlight.description?.html ?? ''}}	×
447	description={`${spotlight.documentType} ${spotlight.document._id}`}
448	/>
449	}
450	</div>}
451	{spotlight.showAuthor && spotlight.document.user && <Typography variant='body2' className={classes.author}>	×
452	by <Link className={classes.authorName} to={userGetProfileUrlFromSlug(spotlight.document.user.slug)}>{spotlight.document.user.displayName}</Link>
453	</Typography>}
454	<SpotlightStartOrContinueReading spotlight={spotlight} className={classes.startOrContinue} />
455	</div>
456	{spotlight.spotlightSplashImageUrl && <div className={classes.splashImageContainer}><img src={spotlight.spotlightSplashImageUrl} className={classNames(classes.image, classes.imageFade, classes.splashImage)}/></div>}	×
457	{spotlight.spotlightImageId && <CloudinaryImage2	×
458	publicId={spotlight.spotlightImageId}
459	darkPublicId={spotlight.spotlightDarkImageId}
460	className={classNames(classes.image, {
461	[classes.imageFade]: spotlight.imageFade && !spotlight.imageFadeColor,	×
462	[classes.imageFadeCustom]: spotlight.imageFade && spotlight.imageFadeColor,	×
463	})}
464	/>}
465	{hideBanner && (	×
466	isFriendlyUI
467	? (
468	<ForumIcon	×
469	icon="Close"
470	onClick={hideBanner}
471	className={classes.hideButton}
472	/>
473	)
474	: (
475	<div className={classes.closeButtonWrapper}>
476	<LWTooltip title="Hide this spotlight" placement="right">
477	<Button className={classes.closeButton} onClick={hideBanner}>
478	<ForumIcon icon="Close" />
479	</Button>
480	</LWTooltip>
481	</div>
482	)
483	)
484	}
485	<div className={classes.editAllButton}>
486	{showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Edit Spotlight">	×
NEW 487	<MoreVertIcon className={classNames(classes.adminButtonIcon, classes.editAllButtonIcon)} onClick={() => setEdit(!edit)}/>	×
488	</LWTooltip>}
489	</div>
490	<div className={classes.draftButton}>
491	{showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') &&	×
492	<LWTooltip title={spotlight.draft ? "Undraft" : "Draft"}>	×
493	<PublishIcon className={classNames(classes.adminButtonIcon, classes.editAllButtonIcon,
NEW 494	!spotlight.draft && classes.reverseIcon)} onClick={() => toggleDraft()}/>	×
495	</LWTooltip>
496	}
497	</div>
498	{spotlight.draft && <div className={classes.deleteButton}>	×
499	{showAdminInfo && userCanDo(currentUser, 'spotlights.edit.all') && <LWTooltip title="Archive">	×
NEW 500	<CloseIcon className={classNames(classes.adminButtonIcon, classes.editAllButtonIcon)} onClick={() => deleteDraft()}/>	×
501	</LWTooltip>}
502	</div>}
503	</div>
504	{showAdminInfo && <>	×
505	{edit ? <div className={classes.form}>	×
506	<SpotlightEditorStyles>
507	<WrappedSmartForm
508	collectionName="Spotlights"
509	documentId={spotlight._id}
510	mutationFragment={getFragment('SpotlightEditQueryFragment')}
511	queryFragment={getFragment('SpotlightEditQueryFragment')}
512	successCallback={onUpdate}
513	/>
514	</SpotlightEditorStyles>
515	</div>
516	:
517	<div className={classes.metaData}>
518	{spotlight.draft && <MetaInfo>[Draft]</MetaInfo>}	×
519	<MetaInfo>{spotlight.position}</MetaInfo>
520	<MetaInfo><FormatDate date={spotlight.lastPromotedAt} format="YYYY-MM-DD"/></MetaInfo>
521	<LWTooltip title={`This will be on the frontpage for ${duration} days when it rotates in`}>
522	<MetaInfo>{duration} days</MetaInfo>
523	</LWTooltip>
524	</div>
525	}
526	</>}
527	</div>
528	</AnalyticsTracker>
529	}
530
531	const SpotlightItemComponent = registerComponent('SpotlightItem', SpotlightItem, {	1✔
532	styles,
533	stylePriority: -1,
534	});
535
536	declare global {
537	interface ComponentTypes {
538	SpotlightItem: typeof SpotlightItemComponent
539	}
540	}

ForumMagnum / ForumMagnum / 10638717998

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous