10783999647

Committed 10 Sep 2024 12:00AM UTC coverage: 31.85% (-0.009%) from 31.859%

Build # 10783999647

Build Type

push

github

Committed by

Raemon

Commit Message

author WIP

Run Details

5070 of 41349 branches covered (12.26%)

Branch coverage included in aggregate %.

4 of 35 new or added lines in 3 files covered. (11.43%)

1 existing line in 1 file now uncovered.

29418 of 66933 relevant lines covered (43.95%)

184.92 hits per line

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

23.72

/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';
import { gql, useMutation } from '@apollo/client';
import { usePublishAndDeDuplicateSpotlight } from './withPublishAndDeDuplicateSpotlight';

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,
  showSubtitle=true,
  refetchAllSpotlights,
  isDraftProcessing,
  className,
  classes,
}: {
  spotlight: SpotlightDisplay,
  showAdminInfo?: boolean,
  hideBanner?: () => void,
  showSubtitle?: boolean,
  // 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,
  isDraftProcessing?: boolean,
  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 { publishAndDeDuplicateSpotlight } = usePublishAndDeDuplicateSpotlight({
    fragmentName: "SpotlightDisplay",
  });

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

  const handleUndraftSpotlight = async () => {
    if (isDraftProcessing && spotlight.draft) {
      await publishAndDeDuplicateSpotlight({spotlightId: spotlight._id})
      refetchAllSpotlights?.()
    }
  }

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

ForumMagnum / ForumMagnum / 10783999647

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