10329289888

Committed 10 Aug 2024 05:28AM UTC coverage: 32.026% (+0.002%) from 32.024%

Build # 10329289888

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

ForumIcon + padding

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4939 of 40220 branches covered (12.28%)

Branch coverage included in aggregate %.

45 of 102 new or added lines in 20 files covered. (44.12%)

5 existing lines in 3 files now uncovered.

28800 of 65128 relevant lines covered (44.22%)

180.21 hits per line

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

15.32

/packages/lesswrong/components/posts/PostsPage/PostsPageSplashHeader.tsx

import classNames from 'classnames';
import React, { useContext, useEffect, useRef, useState } from 'react';
import { AnalyticsContext } from "../../../lib/analyticsEvents";
import { useMulti } from '../../../lib/crud/withMulti';
import { isLWorAF } from '../../../lib/instanceSettings';
import { Link } from '../../../lib/reactRouterWrapper';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import { HashLink } from '../../common/HashLink';
import { SidebarsContext } from '../../common/SidebarsWrapper';
import { useObserver } from '../../hooks/useObserver';
import { getVotingSystemByName } from '../../../lib/voting/votingSystems';
import { useImageContext } from './ImageContext';
import { useHover } from '../../common/withHover';
import { hideScrollBars } from '../../../themes/styleUtils';
import { useCurrentUser } from '../../common/withUser';
import { Coordinates } from './ImageCropPreview';
import { userIsAdminOrMod } from '../../../lib/vulcan-users';

const styles = (theme: ThemeType) => ({
  root: {
    zIndex: theme.zIndexes.postsPageSplashHeader,
    height: '100vh',
    marginTop: 'calc(-50px - 64px)',
    paddingTop: 64,
    backgroundSize: 'cover',
    backgroundPosition: 'center top',
    position: 'relative',
    textAlign: 'center',
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'column',
    '&::before': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      height: '100%',
      width: '100%',
      pointerEvents: 'none'
    },
    transition: 'opacity 0.5s ease-in-out',
    opacity: 1,
    [theme.breakpoints.down('sm')]: {
      marginTop: '-64px',
      // Cancels out padding for mobile views
      marginLeft: -8,
      marginRight: -8
    },
  },
  backgroundImageWrapper: {
    zIndex: -1, // theme.zIndexes.postsPageSplashHeader,
    position: 'absolute',
    paddingTop: 0,
    marginTop: 'calc(-64px)', // to cancel out the padding in the root class
    textAlign: 'center',
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'column',
    ...theme.typography.postStyle,
    width: '100%',
    height: '100%',
    '&::before': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      height: '100%',
      width: '100%',
      background: `linear-gradient(180deg, ${theme.palette.panelBackground.translucent} 64px, transparent 30%, transparent 48%, ${theme.palette.panelBackground.default} 97%)`,
      pointerEvents: 'none'
    },
    transition: 'opacity 0.5s ease-in-out',
    opacity: 1,
    // The images naturally have a landscape aspect ratio, so when viewing it in a portrait orientation we set height to 100% to scale it appropriately
    '@media (orientation:portrait)': {
      height: '100%',
    },
    // Also, the images have a width of 2752px, so if the screen is wider(!!!) than that, make sure it covers everything
    '@media (min-width: 2752px)': {
      width: '100%',
    },
  },
  backgroundImage: {
    width: '100%',
    height: '100%',
    position: 'relative',
    zIndex: -2,
    objectFit: 'cover',
    objectPosition: 'center top',
  },
  backgroundImageCropPreview: {
    width: '100%',
    height: '100%',
    position: 'relative',
    zIndex: -2,
    objectFit: 'cover',
    objectPosition: 'center top',
  },
  cropPreviewEnabledForeground: {
    zIndex: -1,
  },
  cropPreviewEnabledBackground: {
    zIndex: 2,
  },
  fadeIn: {

  },
  fadeOut: {
    opacity: 0, 
    
    '& $backgroundImageWrapper': {
      opacity: 0,
      transition: 'opacity 0.5s',
      transitionTimingFunction: 'ease-in',
    },
    '& $centralSection, & $reviewContainer': {
      transform: 'translateY(-15vh)'
    }
  },
  centralSection: {
    ...theme.typography.postStyle,
    textAlign: 'center',
    display: 'flex',
    flexDirection: 'column',
    position: 'relative',
    color: theme.palette.text.alwaysWhite,
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: '7vh',
    transition: 'transform .75s ease-in-out'
  },
  top: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginRight: 8,
  },
  leftSection: {
    display: 'flex',
    flexDirection: 'column',
    width: 'fit-content',
    maxWidth: '350px',
    textAlign: 'left',
    marginLeft: 16,
    whiteSpace: 'nowrap',
    ...theme.typography.commentStyle,
  },
  rightSection: {
    display: 'flex',
    flexDirection: 'column'
  },
  rightSectionTopRow: {
    display: 'flex',
    alignItems: 'flex-start',
    height: 'min-content',
    paddingLeft: 8,
    paddingRight: 8,
    paddingTop: 8,
    paddingBottom: 4,
    opacity: 0.76
  },
  rightSectionBottomRow: {
    display: 'flex',
    flexDirection: 'row-reverse',
    paddingLeft: 8,
    paddingRight: 8,
    paddingBottom: 8,
  },
  rightSectionBelowBottomRow: {
    display: 'flex',
    flexDirection: 'row-reverse',
    paddingLeft: 8,
    paddingRight: 8,
    paddingBottom: 8,
    zIndex: 2,
  },
  changeImageBox: {
    ...theme.typography.commentStyle,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: '8px',
    borderRadius: '4px',
    backgroundColor: theme.palette.panelBackground.reviewGold,
    color: theme.palette.text.alwaysWhite,
    cursor: 'pointer',
    marginBottom: 8,
    opacity: 0.3,
    '&:hover': {
      opacity: 1
    }
  },
  audioPlayerContainer: {
    display: "flex",
    justifyContent: "flex-end"
  },
  audioPlayer: {
    padding: 8,
    marginLeft: 6,
    width: 480
  },
  togglePodcastContainer: {
    marginTop: 6,
    background: theme.palette.grey[200],
    opacity: 0.76,
    color: theme.palette.primary.main,
    height: 26,
    width: 26,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 4,
  },
  audioIcon: {
    width: 24,
    height: 24,
    transform: 'translateY(2px)',
    padding: 2,
  },
  audioIconOn: {
    background: theme.palette.grey[400],
  },
  nonhumanAudio: {
    color: theme.palette.grey[500],
  },
  title: {
    color: theme.palette.text.reviewWinner.title,
    fontSize: '5.5rem',
    fontWeight: '600',
    margin: '0px',
    lineHeight: '1',
    maxWidth: '75vw',
    textWrap: 'balance',
    [theme.breakpoints.down('xs')]: {
      fontSize: '4rem',
      maxWidth: '90vw'
    },
  },
  titleSmaller: {
    fontSize: '3.8rem',
    [theme.breakpoints.down('xs')]: {
      fontSize: '2rem'
    }
  },
  postActionsButton: {
    backgroundColor: theme.palette.tag.coreTagBackground,
    borderRadius: 3,
    cursor: "pointer",
    border: theme.palette.tag.border,
    alignItems: "center",
    '& .PostActionsButton-icon': {
      opacity: 0.5
    },
    "&:hover": {
      backgroundColor: theme.palette.tag.coreTagBackgroundHover,
      borderColor: theme.palette.tag.coreTagBackgroundHover,
    },
  },
  reviewNavigation: {
    display: 'block',
    cursor: 'pointer',
    [theme.breakpoints.down('xs')]: {
      display: 'none'
    }
  },
  reviewNavigationMobile: {
    display: 'none',
    [theme.breakpoints.down('xs')]: {
      display: 'block',
    }
  },
  authors: {
    fontSize: '1.6rem',
    fontWeight: '700',
    color: theme.palette.text.reviewWinner.author,
    transition: 'opacity .5s, transform .5s',
  },
  reviews: {
    display: 'flex',
    gap: '8px',
    justifyContent: 'center',
    alignItems: 'flex-end',
    flexWrap: 'wrap-reverse',
    transition: 'opacity .5s, transform .5s',
    ...theme.typography.commentStyle,
  },
  reviewContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginTop: 'auto',
    position: 'relative',
    zIndex: 1,
    minHeight: 0,
    marginBottom: 16,
    padding: '0px 16px',
    transition: 'transform .75s ease-in-out',
    '&::before': {
      content: '""',
      position: 'absolute',
      height: '100%',
      width: '100%'
    },
  },
  review: {
    cursor: 'pointer',
    display: 'flex',
    padding: '4px',
    borderRadius: '4px',
    backgroundColor: theme.palette.panelBackground.reviewGold,
    gap: '7px',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    position: 'relative',
    zIndex: 1,
    color: theme.palette.text.alwaysWhite,
  },
  reviewScore: {
  },
  reviewAuthor: {

  },
  reviewPreviewContainer: {
    padding: '16px',
    minHeight: 0
  },
  reviewPreview: {
    ...theme.typography.commentStyle,
    transition: 'opacity 0.2s ease-in-out',
    backgroundColor: theme.palette.panelBackground.translucent2,
    border: `1px solid ${theme.palette.panelBackground.reviewGold}`,
    padding: '8px',
    width: '650px',
    maxWidth: '70vw',
    whiteSpace: 'normal',
    textAlign: 'left',
    borderRadius: '8px',
    marginLeft: 'auto',
    marginRight: 'auto',
    overflowY: 'scroll',
    ...hideScrollBars,
    maxHeight: '100%'
  },
  reviewPreviewAuthor: {
    fontWeight: '600'
  },
  reviewPreviewBody: {
  },
  '@global': {
    '.intercom-lightweight-app': {
      transition: 'opacity 1s ease-in 1s'
    },
    'body:has( .PostsPageSplashHeader-fadeIn ) .intercom-lightweight-app': {
      opacity: 0,
      transition: 'opacity 1s ease-in 0s'
    },
  },
});

/// PostsPageSplashHeader: The metadata block at the top of a post page, with
/// title, author, voting, an actions menu, etc.
const PostsPageSplashHeader = ({post, showEmbeddedPlayer, toggleEmbeddedPlayer, classes}: {
  post: (PostsWithNavigation|PostsWithNavigationAndRevision) & { reviewWinner: ReviewWinnerAll },
  showEmbeddedPlayer?: boolean,
  toggleEmbeddedPlayer?: () => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { FooterTagList, UsersName, CommentBody, PostActionsButton, LWTooltip, LWPopper, ImageCropPreview, ForumIcon, SplashHeaderImageOptions, PostsAudioPlayerWrapper, LWPostsPageTopHeaderVote, LWPostsPageHeaderTopRight } = Components;
  
  const { selectedImageInfo } = useImageContext();
  const { setToCVisible } = useContext(SidebarsContext)!;
  const currentUser = useCurrentUser();
  
  const { anchorEl, hover, eventHandlers } = useHover();
  
  const [visible, setVisible] = useState(true);
  const [backgroundImage, setBackgroundImage] = useState(post.reviewWinner.reviewWinnerArt?.splashArtImageUrl);
  const [cropPreviewEnabled, setCropPreviewEnabled] = useState(false);
  const [selectedReview, setSelectedReview] = useState<CommentsList | null>(null);
  const [imageFlipped, setImageFlipped] = useState(false);
  
  const toggleImageFlip = () => setImageFlipped(!imageFlipped);
  
  const imgRef = useRef<HTMLImageElement>(null);
  const backgroundImgWrapperRef = useRef<HTMLDivElement>(null);
  const backgroundImgCropPreviewRef = useRef<HTMLDivElement>(null);

  const transitionHeader = (headerVisibile: boolean) => {
    setToCVisible(!headerVisibile);
    setVisible(headerVisibile);
  };

  const observerRef = useObserver<HTMLDivElement>({
    onEnter: () => transitionHeader(true),
    onExit: () => transitionHeader(false),
    threshold: 0.85
  });

  const setCropPreview = (coordinates?: Coordinates) => {
    if (imgRef.current && backgroundImgWrapperRef.current && backgroundImgCropPreviewRef.current) {
      if (coordinates) {
        const updatedMask = `
          linear-gradient(#000 0 0) ${coordinates.x}px ${coordinates.y}px/${coordinates.width}px ${coordinates.height}px,
          linear-gradient(rgba(0,0,0,0.4) 0 0)
        `;
        imgRef.current.style.mask = `${updatedMask} no-repeat`;
        imgRef.current.style.webkitMask = updatedMask;
        imgRef.current.style.webkitMaskRepeat = 'no-repeat';

        setCropPreviewEnabled(true);
      } else {
        imgRef.current.style.mask = '';
        imgRef.current.style.webkitMask = '';
        imgRef.current.style.webkitMaskRepeat = '';

        setCropPreviewEnabled(false);
      }
    }
  };
  
  const { results: reviews } = useMulti({
    terms: {
      view: "reviews",
      postId: post._id,
    },
    collectionName: "Comments",
    fragmentName: 'CommentWithRepliesFragment',
    fetchPolicy: 'cache-and-network',
    limit: 5
  });

  useEffect(() => {
    const postLastSavedImage = post.reviewWinner.reviewWinnerArt?.splashArtImageUrl;
    const newBackgroundImage = selectedImageInfo?.splashArtImageUrl || postLastSavedImage;

    if (newBackgroundImage) {
      setBackgroundImage(newBackgroundImage.replace('upload/', imageFlipped ? 'upload/a_hflip/' : 'upload/'));
    }

    // When we leave a review winner post page, we want to set this back to true, since it's a global rather than post-specific setting.
    // Without this, if a user scrolls down and then back up such that the ToC is hidden on a review winner post, and then navigates to another post, the ToC will be hidden.
    return () => setToCVisible(true);
  }, [post, selectedImageInfo, imageFlipped, setToCVisible]);


  const topLeftSection = (
    <div className={classes.leftSection}>
      <Link className={classes.reviewNavigation} to="/leastwrong?sort=year">
        Ranked #{post.reviewWinner.reviewRanking + 1} of {post.reviewWinner.competitorCount} posts in {post.reviewWinner.reviewYear}
      </Link>
      <Link className={classes.reviewNavigationMobile} to="/leastwrong?sort=year">
        #{post.reviewWinner.reviewRanking + 1} in {post.reviewWinner.reviewYear} Review
      </Link>
    </div>
  );

  const imagePreviewAndCrop = (userIsAdminOrMod(currentUser) &&
    <div className={classes.rightSectionBelowBottomRow}>
      <div {...eventHandlers}>
        <div className={classes.changeImageBox}>Change image</div>
        <div className={classes.changeImageBox} onClick={toggleImageFlip}>Flip image</div>
        <LWPopper open={hover} anchorEl={anchorEl} placement="bottom-start" clickable={true}>
          <div>
            <SplashHeaderImageOptions post={post} />
          </div>
        </LWPopper>
      </div>
      <div className={classes.rightSectionBelowBottomRow}>
        <ImageCropPreview imgRef={imgRef} setCropPreview={setCropPreview} flipped={imageFlipped} />
      </div>
    </div>
  );

  const audioPlayer = (
    <div className={classes.audioPlayerContainer}>
      <div className={classes.audioPlayer}>
        <PostsAudioPlayerWrapper post={post} showEmbeddedPlayer={!!showEmbeddedPlayer} />
      </div>
    </div>
  );

  const reviewContainer = (
    <div className={classes.reviewContainer} onMouseLeave={() => {
      setSelectedReview(null);
    }}>
      {selectedReview && <div className={classes.reviewPreviewContainer}>
        <div className={classes.reviewPreview}>
          <div className={classes.reviewPreviewAuthor}>
            <UsersName user={selectedReview.user} />
          </div>
          <div className={classes.reviewPreviewBody}>
            <CommentBody comment={selectedReview} />
          </div>
        </div>
      </div>}
      <div className={classes.reviews}>
        {reviews && reviews.length > 0 && reviews.map(review => <ReviewPill key={review._id} review={review} classes={classes} setReview={setSelectedReview} />)}
      </div>
    </div>
  );

  const centralSection = (
    <div className={classes.centralSection}>
      <h1 className={classNames(classes.title, { [classes.titleSmaller]: post.title.length > 80 })}>
        {post.title}
      </h1>
      <div className={classes.authors}>
        <span>
          <UsersName user={post.user} />
          {!!post.coauthors?.length ? ', ' : ''}
        </span>
        {post.coauthors?.map((coauthor, i) =>
          <span key={`coauthor${coauthor._id}`}>
            <UsersName user={coauthor} />
            {i < post.coauthors.length - 1 ? ', ' : ''}
          </span>
        )}
      </div>
    </div>
  );

  return <div className={classNames(classes.root, {[classes.fadeOut]: !visible, [classes.fadeIn]: visible})} ref={observerRef} >
    {
      /* 
       * We have two copies of the image to implement crop preview functionality using masking and z-indexes
       * The important bits are that when the crop element is enabled, it "dims" everything outside of the picker
       * Also, when the picker is moved over the title/author/etc, they don't show up in the preview, just the underlying image
       * This doesn't work with the Layout header, but we don't care that much /shrug
       */
    }
    <div ref={backgroundImgWrapperRef} className={classNames(classes.backgroundImageWrapper, { [classes.cropPreviewEnabledForeground]: cropPreviewEnabled })}>
      <img src={backgroundImage} className={classes.backgroundImage} alt="Background Image" />
    </div>
    {currentUser?.isAdmin && <div ref={backgroundImgCropPreviewRef} className={classNames(classes.backgroundImageWrapper, { [classes.cropPreviewEnabledBackground]: cropPreviewEnabled })}>
      <img ref={imgRef} src={backgroundImage} className={classes.backgroundImageCropPreview} alt="Background Image" />
    </div>}
    <div className={classes.top}>
      {topLeftSection}
      <LWPostsPageHeaderTopRight post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
    </div>
    {audioPlayer}
    <div className={classes.rightSection}>
      {imagePreviewAndCrop}
    </div>
    {reviewContainer}
    {centralSection}
  </div>
}

const ReviewPill = ({review, classes, setReview}: {review: CommentsList, classes: ClassesType<typeof styles>, setReview: (r: CommentsList | null) => void}) => {
  return <HashLink to={`#${review._id}`}>
    <div className={classes.review} onMouseOver={() => setReview(review)}>
      <div className={classes.reviewScore}>
        {review.baseScore}
      </div>
      <div className={classes.reviewAuthor}>
        {review?.user?.displayName || "Anonymous"}
      </div>
    </div>
  </HashLink>
}

const PostsPageSplashHeaderComponent = registerComponent(
  'PostsPageSplashHeader', PostsPageSplashHeader, {styles}
);

declare global {
  interface ComponentTypes {
    PostsPageSplashHeader: typeof PostsPageSplashHeaderComponent,
  }
}

1	import classNames from 'classnames';	1✔
2	import React, { useContext, useEffect, useRef, useState } from 'react';	1✔
3	import { AnalyticsContext } from "../../../lib/analyticsEvents";
4	import { useMulti } from '../../../lib/crud/withMulti';	1✔
5	import { isLWorAF } from '../../../lib/instanceSettings';
6	import { Link } from '../../../lib/reactRouterWrapper';	1✔
7	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
8	import { HashLink } from '../../common/HashLink';	1✔
9	import { SidebarsContext } from '../../common/SidebarsWrapper';	1✔
10	import { useObserver } from '../../hooks/useObserver';	1✔
11	import { getVotingSystemByName } from '../../../lib/voting/votingSystems';
12	import { useImageContext } from './ImageContext';	1✔
13	import { useHover } from '../../common/withHover';	1✔
14	import { hideScrollBars } from '../../../themes/styleUtils';	1✔
15	import { useCurrentUser } from '../../common/withUser';	1✔
16	import { Coordinates } from './ImageCropPreview';
17	import { userIsAdminOrMod } from '../../../lib/vulcan-users';	1✔
18
19	const styles = (theme: ThemeType) => ({	1✔
20	root: {
21	zIndex: theme.zIndexes.postsPageSplashHeader,
22	height: '100vh',
23	marginTop: 'calc(-50px - 64px)',
24	paddingTop: 64,
25	backgroundSize: 'cover',
26	backgroundPosition: 'center top',
27	position: 'relative',
28	textAlign: 'center',
29	display: 'flex',
30	justifyContent: 'space-between',
31	flexDirection: 'column',
32	'&::before': {
33	content: '""',
34	position: 'absolute',
35	top: 0,
36	left: 0,
37	height: '100%',
38	width: '100%',
39	pointerEvents: 'none'
40	},
41	transition: 'opacity 0.5s ease-in-out',
42	opacity: 1,
43	[theme.breakpoints.down('sm')]: {
44	marginTop: '-64px',
45	// Cancels out padding for mobile views
46	marginLeft: -8,
47	marginRight: -8
48	},
49	},
50	backgroundImageWrapper: {
51	zIndex: -1, // theme.zIndexes.postsPageSplashHeader,
52	position: 'absolute',
53	paddingTop: 0,
54	marginTop: 'calc(-64px)', // to cancel out the padding in the root class
55	textAlign: 'center',
56	display: 'flex',
57	justifyContent: 'space-between',
58	flexDirection: 'column',
59	...theme.typography.postStyle,
60	width: '100%',
61	height: '100%',
62	'&::before': {
63	content: '""',
64	position: 'absolute',
65	top: 0,
66	left: 0,
67	height: '100%',
68	width: '100%',
69	background: `linear-gradient(180deg, ${theme.palette.panelBackground.translucent} 64px, transparent 30%, transparent 48%, ${theme.palette.panelBackground.default} 97%)`,
70	pointerEvents: 'none'
71	},
72	transition: 'opacity 0.5s ease-in-out',
73	opacity: 1,
74	// The images naturally have a landscape aspect ratio, so when viewing it in a portrait orientation we set height to 100% to scale it appropriately
75	'@media (orientation:portrait)': {
76	height: '100%',
77	},
78	// Also, the images have a width of 2752px, so if the screen is wider(!!!) than that, make sure it covers everything
79	'@media (min-width: 2752px)': {
80	width: '100%',
81	},
82	},
83	backgroundImage: {
84	width: '100%',
85	height: '100%',
86	position: 'relative',
87	zIndex: -2,
88	objectFit: 'cover',
89	objectPosition: 'center top',
90	},
91	backgroundImageCropPreview: {
92	width: '100%',
93	height: '100%',
94	position: 'relative',
95	zIndex: -2,
96	objectFit: 'cover',
97	objectPosition: 'center top',
98	},
99	cropPreviewEnabledForeground: {
100	zIndex: -1,
101	},
102	cropPreviewEnabledBackground: {
103	zIndex: 2,
104	},
105	fadeIn: {
106
107	},
108	fadeOut: {
109	opacity: 0,
110
111	'& $backgroundImageWrapper': {
112	opacity: 0,
113	transition: 'opacity 0.5s',
114	transitionTimingFunction: 'ease-in',
115	},
116	'& $centralSection, & $reviewContainer': {
117	transform: 'translateY(-15vh)'
118	}
119	},
120	centralSection: {
121	...theme.typography.postStyle,
122	textAlign: 'center',
123	display: 'flex',
124	flexDirection: 'column',
125	position: 'relative',
126	color: theme.palette.text.alwaysWhite,
127	justifyContent: 'center',
128	alignItems: 'center',
129	paddingBottom: '7vh',
130	transition: 'transform .75s ease-in-out'
131	},
132	top: {
133	display: 'flex',
134	justifyContent: 'space-between',
135	alignItems: 'center',
136	marginRight: 8,
137	},
138	leftSection: {
139	display: 'flex',
140	flexDirection: 'column',
141	width: 'fit-content',
142	maxWidth: '350px',
143	textAlign: 'left',
144	marginLeft: 16,
145	whiteSpace: 'nowrap',
146	...theme.typography.commentStyle,
147	},
148	rightSection: {
149	display: 'flex',
150	flexDirection: 'column'
151	},
152	rightSectionTopRow: {
153	display: 'flex',
154	alignItems: 'flex-start',
155	height: 'min-content',
156	paddingLeft: 8,
157	paddingRight: 8,
158	paddingTop: 8,
159	paddingBottom: 4,
160	opacity: 0.76
161	},
162	rightSectionBottomRow: {
163	display: 'flex',
164	flexDirection: 'row-reverse',
165	paddingLeft: 8,
166	paddingRight: 8,
167	paddingBottom: 8,
168	},
169	rightSectionBelowBottomRow: {
170	display: 'flex',
171	flexDirection: 'row-reverse',
172	paddingLeft: 8,
173	paddingRight: 8,
174	paddingBottom: 8,
175	zIndex: 2,
176	},
177	changeImageBox: {
178	...theme.typography.commentStyle,
179	display: 'flex',
180	justifyContent: 'center',
181	alignItems: 'center',
182	padding: '8px',
183	borderRadius: '4px',
184	backgroundColor: theme.palette.panelBackground.reviewGold,
185	color: theme.palette.text.alwaysWhite,
186	cursor: 'pointer',
187	marginBottom: 8,
188	opacity: 0.3,
189	'&:hover': {
190	opacity: 1
191	}
192	},
193	audioPlayerContainer: {
194	display: "flex",
195	justifyContent: "flex-end"
196	},
197	audioPlayer: {
198	padding: 8,
199	marginLeft: 6,
200	width: 480
201	},
202	togglePodcastContainer: {
203	marginTop: 6,
204	background: theme.palette.grey[200],
205	opacity: 0.76,
206	color: theme.palette.primary.main,
207	height: 26,
208	width: 26,
209	display: 'flex',
210	alignItems: 'center',
211	justifyContent: 'center',
212	borderRadius: 4,
213	},
214	audioIcon: {
215	width: 24,
216	height: 24,
217	transform: 'translateY(2px)',
218	padding: 2,
219	},
220	audioIconOn: {
221	background: theme.palette.grey[400],
222	},
223	nonhumanAudio: {
224	color: theme.palette.grey[500],
225	},
226	title: {
227	color: theme.palette.text.reviewWinner.title,
228	fontSize: '5.5rem',
229	fontWeight: '600',
230	margin: '0px',
231	lineHeight: '1',
232	maxWidth: '75vw',
233	textWrap: 'balance',
234	[theme.breakpoints.down('xs')]: {
235	fontSize: '4rem',
236	maxWidth: '90vw'
237	},
238	},
239	titleSmaller: {
240	fontSize: '3.8rem',
241	[theme.breakpoints.down('xs')]: {
242	fontSize: '2rem'
243	}
244	},
245	postActionsButton: {
246	backgroundColor: theme.palette.tag.coreTagBackground,
247	borderRadius: 3,
248	cursor: "pointer",
249	border: theme.palette.tag.border,
250	alignItems: "center",
251	'& .PostActionsButton-icon': {
252	opacity: 0.5
253	},
254	"&:hover": {
255	backgroundColor: theme.palette.tag.coreTagBackgroundHover,
256	borderColor: theme.palette.tag.coreTagBackgroundHover,
257	},
258	},
259	reviewNavigation: {
260	display: 'block',
261	cursor: 'pointer',
262	[theme.breakpoints.down('xs')]: {
263	display: 'none'
264	}
265	},
266	reviewNavigationMobile: {
267	display: 'none',
268	[theme.breakpoints.down('xs')]: {
269	display: 'block',
270	}
271	},
272	authors: {
273	fontSize: '1.6rem',
274	fontWeight: '700',
275	color: theme.palette.text.reviewWinner.author,
276	transition: 'opacity .5s, transform .5s',
277	},
278	reviews: {
279	display: 'flex',
280	gap: '8px',
281	justifyContent: 'center',
282	alignItems: 'flex-end',
283	flexWrap: 'wrap-reverse',
284	transition: 'opacity .5s, transform .5s',
285	...theme.typography.commentStyle,
286	},
287	reviewContainer: {
288	display: 'flex',
289	flexDirection: 'column',
290	alignItems: 'center',
291	marginTop: 'auto',
292	position: 'relative',
293	zIndex: 1,
294	minHeight: 0,
295	marginBottom: 16,
296	padding: '0px 16px',
297	transition: 'transform .75s ease-in-out',
298	'&::before': {
299	content: '""',
300	position: 'absolute',
301	height: '100%',
302	width: '100%'
303	},
304	},
305	review: {
306	cursor: 'pointer',
307	display: 'flex',
308	padding: '4px',
309	borderRadius: '4px',
310	backgroundColor: theme.palette.panelBackground.reviewGold,
311	gap: '7px',
312	whiteSpace: 'nowrap',
313	overflow: 'hidden',
314	position: 'relative',
315	zIndex: 1,
316	color: theme.palette.text.alwaysWhite,
317	},
318	reviewScore: {
319	},
320	reviewAuthor: {
321
322	},
323	reviewPreviewContainer: {
324	padding: '16px',
325	minHeight: 0
326	},
327	reviewPreview: {
328	...theme.typography.commentStyle,
329	transition: 'opacity 0.2s ease-in-out',
330	backgroundColor: theme.palette.panelBackground.translucent2,
331	border: `1px solid ${theme.palette.panelBackground.reviewGold}`,
332	padding: '8px',
333	width: '650px',
334	maxWidth: '70vw',
335	whiteSpace: 'normal',
336	textAlign: 'left',
337	borderRadius: '8px',
338	marginLeft: 'auto',
339	marginRight: 'auto',
340	overflowY: 'scroll',
341	...hideScrollBars,
342	maxHeight: '100%'
343	},
344	reviewPreviewAuthor: {
345	fontWeight: '600'
346	},
347	reviewPreviewBody: {
348	},
349	'@global': {
350	'.intercom-lightweight-app': {
351	transition: 'opacity 1s ease-in 1s'
352	},
353	'body:has( .PostsPageSplashHeader-fadeIn ) .intercom-lightweight-app': {
354	opacity: 0,
355	transition: 'opacity 1s ease-in 0s'
356	},
357	},
358	});
359
360	/// PostsPageSplashHeader: The metadata block at the top of a post page, with
361	/// title, author, voting, an actions menu, etc.
362	const PostsPageSplashHeader = ({post, showEmbeddedPlayer, toggleEmbeddedPlayer, classes}: {	1✔
363	post: (PostsWithNavigation\|PostsWithNavigationAndRevision) & { reviewWinner: ReviewWinnerAll },
364	showEmbeddedPlayer?: boolean,
365	toggleEmbeddedPlayer?: () => void,
366	classes: ClassesType<typeof styles>,
367	}) => {
NEW 368	const { FooterTagList, UsersName, CommentBody, PostActionsButton, LWTooltip, LWPopper, ImageCropPreview, ForumIcon, SplashHeaderImageOptions, PostsAudioPlayerWrapper, LWPostsPageTopHeaderVote, LWPostsPageHeaderTopRight } = Components;	×
369
370	const { selectedImageInfo } = useImageContext();	×
371	const { setToCVisible } = useContext(SidebarsContext)!;	×
372	const currentUser = useCurrentUser();	×
373
374	const { anchorEl, hover, eventHandlers } = useHover();	×
375
376	const [visible, setVisible] = useState(true);	×
377	const [backgroundImage, setBackgroundImage] = useState(post.reviewWinner.reviewWinnerArt?.splashArtImageUrl);	×
378	const [cropPreviewEnabled, setCropPreviewEnabled] = useState(false);	×
379	const [selectedReview, setSelectedReview] = useState<CommentsList \| null>(null);	×
380	const [imageFlipped, setImageFlipped] = useState(false);	×
381
382	const toggleImageFlip = () => setImageFlipped(!imageFlipped);	×
383
384	const imgRef = useRef<HTMLImageElement>(null);	×
385	const backgroundImgWrapperRef = useRef<HTMLDivElement>(null);	×
386	const backgroundImgCropPreviewRef = useRef<HTMLDivElement>(null);	×
387
388	const transitionHeader = (headerVisibile: boolean) => {	×
389	setToCVisible(!headerVisibile);	×
390	setVisible(headerVisibile);	×
391	};
392
393	const observerRef = useObserver<HTMLDivElement>({	×
394	onEnter: () => transitionHeader(true),	×
395	onExit: () => transitionHeader(false),	×
396	threshold: 0.85
397	});
398
399	const setCropPreview = (coordinates?: Coordinates) => {	×
400	if (imgRef.current && backgroundImgWrapperRef.current && backgroundImgCropPreviewRef.current) {	×
401	if (coordinates) {	×
402	const updatedMask = `	×
403	linear-gradient(#000 0 0) ${coordinates.x}px ${coordinates.y}px/${coordinates.width}px ${coordinates.height}px,
404	linear-gradient(rgba(0,0,0,0.4) 0 0)
405	`;
406	imgRef.current.style.mask = `${updatedMask} no-repeat`;	×
407	imgRef.current.style.webkitMask = updatedMask;	×
408	imgRef.current.style.webkitMaskRepeat = 'no-repeat';	×
409
410	setCropPreviewEnabled(true);	×
411	} else {
412	imgRef.current.style.mask = '';	×
413	imgRef.current.style.webkitMask = '';	×
414	imgRef.current.style.webkitMaskRepeat = '';	×
415
416	setCropPreviewEnabled(false);	×
417	}
418	}
419	};
420
421	const { results: reviews } = useMulti({	×
422	terms: {
423	view: "reviews",
424	postId: post._id,
425	},
426	collectionName: "Comments",
427	fragmentName: 'CommentWithRepliesFragment',
428	fetchPolicy: 'cache-and-network',
429	limit: 5
430	});
431
432	useEffect(() => {	×
433	const postLastSavedImage = post.reviewWinner.reviewWinnerArt?.splashArtImageUrl;	×
434	const newBackgroundImage = selectedImageInfo?.splashArtImageUrl \|\| postLastSavedImage;	×
435
436	if (newBackgroundImage) {	×
437	setBackgroundImage(newBackgroundImage.replace('upload/', imageFlipped ? 'upload/a_hflip/' : 'upload/'));	×
438	}
439
440	// When we leave a review winner post page, we want to set this back to true, since it's a global rather than post-specific setting.
441	// Without this, if a user scrolls down and then back up such that the ToC is hidden on a review winner post, and then navigates to another post, the ToC will be hidden.
442	return () => setToCVisible(true);	×
443	}, [post, selectedImageInfo, imageFlipped, setToCVisible]);
444
445
446	const topLeftSection = (
447	<div className={classes.leftSection}>	×
448	<Link className={classes.reviewNavigation} to="/leastwrong?sort=year">
449	Ranked #{post.reviewWinner.reviewRanking + 1} of {post.reviewWinner.competitorCount} posts in {post.reviewWinner.reviewYear}
450	</Link>
451	<Link className={classes.reviewNavigationMobile} to="/leastwrong?sort=year">
452	#{post.reviewWinner.reviewRanking + 1} in {post.reviewWinner.reviewYear} Review
453	</Link>
454	</div>
455	);
456
457	const imagePreviewAndCrop = (userIsAdminOrMod(currentUser) &&	×
458	<div className={classes.rightSectionBelowBottomRow}>
459	<div {...eventHandlers}>
460	<div className={classes.changeImageBox}>Change image</div>
461	<div className={classes.changeImageBox} onClick={toggleImageFlip}>Flip image</div>
462	<LWPopper open={hover} anchorEl={anchorEl} placement="bottom-start" clickable={true}>
463	<div>
464	<SplashHeaderImageOptions post={post} />
465	</div>
466	</LWPopper>
467	</div>
468	<div className={classes.rightSectionBelowBottomRow}>
469	<ImageCropPreview imgRef={imgRef} setCropPreview={setCropPreview} flipped={imageFlipped} />
470	</div>
471	</div>
472	);
473
474	const audioPlayer = (
475	<div className={classes.audioPlayerContainer}>	×
476	<div className={classes.audioPlayer}>
477	<PostsAudioPlayerWrapper post={post} showEmbeddedPlayer={!!showEmbeddedPlayer} />
478	</div>
479	</div>
480	);
481
482	const reviewContainer = (
483	<div className={classes.reviewContainer} onMouseLeave={() => {	×
484	setSelectedReview(null);	×
485	}}>
486	{selectedReview && <div className={classes.reviewPreviewContainer}>	×
487	<div className={classes.reviewPreview}>
488	<div className={classes.reviewPreviewAuthor}>
489	<UsersName user={selectedReview.user} />
490	</div>
491	<div className={classes.reviewPreviewBody}>
492	<CommentBody comment={selectedReview} />
493	</div>
494	</div>
495	</div>}
496	<div className={classes.reviews}>
497	{reviews && reviews.length > 0 && reviews.map(review => <ReviewPill key={review._id} review={review} classes={classes} setReview={setSelectedReview} />)}	×
498	</div>
499	</div>
500	);
501
502	const centralSection = (
503	<div className={classes.centralSection}>	×
504	<h1 className={classNames(classes.title, { [classes.titleSmaller]: post.title.length > 80 })}>
505	{post.title}
506	</h1>
507	<div className={classes.authors}>
508	<span>
509	<UsersName user={post.user} />
510	{!!post.coauthors?.length ? ', ' : ''}	×
511	</span>
512	{post.coauthors?.map((coauthor, i) =>	×
513	<span key={`coauthor${coauthor._id}`}>	×
514	<UsersName user={coauthor} />
515	{i < post.coauthors.length - 1 ? ', ' : ''}	×
516	</span>
517	)}
518	</div>
519	</div>
520	);
521
522	return <div className={classNames(classes.root, {[classes.fadeOut]: !visible, [classes.fadeIn]: visible})} ref={observerRef} >	×
523	{
524	/*
525	* We have two copies of the image to implement crop preview functionality using masking and z-indexes
526	* The important bits are that when the crop element is enabled, it "dims" everything outside of the picker
527	* Also, when the picker is moved over the title/author/etc, they don't show up in the preview, just the underlying image
528	* This doesn't work with the Layout header, but we don't care that much /shrug
529	*/
530	}
531	<div ref={backgroundImgWrapperRef} className={classNames(classes.backgroundImageWrapper, { [classes.cropPreviewEnabledForeground]: cropPreviewEnabled })}>
532	<img src={backgroundImage} className={classes.backgroundImage} alt="Background Image" />
533	</div>
534	{currentUser?.isAdmin && <div ref={backgroundImgCropPreviewRef} className={classNames(classes.backgroundImageWrapper, { [classes.cropPreviewEnabledBackground]: cropPreviewEnabled })}>	×
535	<img ref={imgRef} src={backgroundImage} className={classes.backgroundImageCropPreview} alt="Background Image" />
536	</div>}
537	<div className={classes.top}>
538	{topLeftSection}
539	<LWPostsPageHeaderTopRight post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
540	</div>
541	{audioPlayer}
542	<div className={classes.rightSection}>
543	{imagePreviewAndCrop}
544	</div>
545	{reviewContainer}
546	{centralSection}
547	</div>
548	}
549
550	const ReviewPill = ({review, classes, setReview}: {review: CommentsList, classes: ClassesType<typeof styles>, setReview: (r: CommentsList \| null) => void}) => {	1✔
551	return <HashLink to={`#${review._id}`}>	×
552	<div className={classes.review} onMouseOver={() => setReview(review)}>	×
553	<div className={classes.reviewScore}>
554	{review.baseScore}
555	</div>
556	<div className={classes.reviewAuthor}>	×
557	{review?.user?.displayName \|\| "Anonymous"}	×
558	</div>
559	</div>
560	</HashLink>
561	}
562
563	const PostsPageSplashHeaderComponent = registerComponent(	1✔
564	'PostsPageSplashHeader', PostsPageSplashHeader, {styles}
565	);
566
567	declare global {
568	interface ComponentTypes {
569	PostsPageSplashHeader: typeof PostsPageSplashHeaderComponent,
570	}
571	}

ForumMagnum / ForumMagnum / 10329289888

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