10275750071

Committed 07 Aug 2024 12:08AM UTC coverage: 32.111% (+0.05%) from 32.06%

Build # 10275750071

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

mobile styling + hoverover gap1

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4938 of 40050 branches covered (12.33%)

Branch coverage included in aggregate %.

47 of 106 new or added lines in 17 files covered. (44.34%)

2 existing lines in 2 files now uncovered.

28755 of 64876 relevant lines covered (44.32%)

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

ForumMagnum / ForumMagnum / 10275750071

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