10205141488

Committed 01 Aug 2024 08:15PM UTC coverage: 32.084% (+0.005%) from 32.079%

Build # 10205141488

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

audio component

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4937 of 40081 branches covered (12.32%)

Branch coverage included in aggregate %.

41 of 91 new or added lines in 11 files covered. (45.05%)

2 existing lines in 2 files now uncovered.

28756 of 64935 relevant lines covered (44.28%)

180.73 hits per line

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

16.24

/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',
    ...theme.typography.postStyle,
    '&::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: {
    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: '1vh'
    }
  },
  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: {
    [theme.breakpoints.up('sm')]: {
      width: '480px',
    }
  },
  audioPlayer: {
    padding: 8,
    marginLeft: 6,
  },
  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: '2.5rem',
      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, PostsSplashPageHeaderVote, 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 votingSystem = getVotingSystemByName(post.votingSystem ?? 'default');
  const postActionsButton = <PostActionsButton post={post} className={classes.postActionsButton} flip />;

  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 topRightSection = (
    <div className={classes.rightSection}>
      <AnalyticsContext pageSectionContext="tagHeader">
        <div className={classes.rightSectionTopRow}>
          <FooterTagList post={post} hideScore useAltAddTagButton hideAddTag={false} appendElement={postActionsButton} align="right" />
        </div>
      </AnalyticsContext>
      <div className={classes.rightSectionBottomRow}>
        <PostsSplashPageHeaderVote post={post} votingSystem={votingSystem} />
      </div>
      {imagePreviewAndCrop}
    </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} />
    </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";	1✔
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';	1✔
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	...theme.typography.postStyle,
33	'&::before': {
34	content: '""',
35	position: 'absolute',
36	top: 0,
37	left: 0,
38	height: '100%',
39	width: '100%',
40	pointerEvents: 'none'
41	},
42	transition: 'opacity 0.5s ease-in-out',
43	opacity: 1,
44	[theme.breakpoints.down('sm')]: {
45	marginTop: '-64px',
46	// Cancels out padding for mobile views
47	marginLeft: -8,
48	marginRight: -8
49	},
50	},
51	backgroundImageWrapper: {
52	zIndex: -1, // theme.zIndexes.postsPageSplashHeader,
53	position: 'absolute',
54	paddingTop: 0,
55	marginTop: 'calc(-64px)', // to cancel out the padding in the root class
56	textAlign: 'center',
57	display: 'flex',
58	justifyContent: 'space-between',
59	flexDirection: 'column',
60	...theme.typography.postStyle,
61	width: '100%',
62	height: '100%',
63	'&::before': {
64	content: '""',
65	position: 'absolute',
66	top: 0,
67	left: 0,
68	height: '100%',
69	width: '100%',
70	background: `linear-gradient(180deg, ${theme.palette.panelBackground.translucent} 64px, transparent 30%, transparent 48%, ${theme.palette.panelBackground.default} 97%)`,
71	pointerEvents: 'none'
72	},
73	transition: 'opacity 0.5s ease-in-out',
74	opacity: 1,
75	// 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
76	'@media (orientation:portrait)': {
77	height: '100%',
78	},
79	// Also, the images have a width of 2752px, so if the screen is wider(!!!) than that, make sure it covers everything
80	'@media (min-width: 2752px)': {
81	width: '100%',
82	},
83	},
84	backgroundImage: {
85	width: '100%',
86	height: '100%',
87	position: 'relative',
88	zIndex: -2,
89	objectFit: 'cover',
90	objectPosition: 'center top',
91	},
92	backgroundImageCropPreview: {
93	width: '100%',
94	height: '100%',
95	position: 'relative',
96	zIndex: -2,
97	objectFit: 'cover',
98	objectPosition: 'center top',
99	},
100	cropPreviewEnabledForeground: {
101	zIndex: -1,
102	},
103	cropPreviewEnabledBackground: {
104	zIndex: 2,
105	},
106	fadeIn: {
107
108	},
109	fadeOut: {
110	opacity: 0,
111
112	'& $backgroundImageWrapper': {
113	opacity: 0,
114	transition: 'opacity 0.5s',
115	transitionTimingFunction: 'ease-in',
116	},
117	'& $centralSection, & $reviewContainer': {
118	transform: 'translateY(-15vh)'
119	}
120	},
121	centralSection: {
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: '1vh'
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	[theme.breakpoints.up('sm')]: {
198	width: '480px',
199	}
200	},
201	audioPlayer: {
202	padding: 8,
203	marginLeft: 6,
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: '2.5rem',
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, PostsSplashPageHeaderVote, 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
450	const votingSystem = getVotingSystemByName(post.votingSystem ?? 'default');	×
451	const postActionsButton = <PostActionsButton post={post} className={classes.postActionsButton} flip />;	×
452
453	const topLeftSection = (
454	<div className={classes.leftSection}>	×
455	<Link className={classes.reviewNavigation} to="/leastwrong?sort=year">
456	Ranked #{post.reviewWinner.reviewRanking + 1} of {post.reviewWinner.competitorCount} posts in {post.reviewWinner.reviewYear}
457	</Link>
458	<Link className={classes.reviewNavigationMobile} to="/leastwrong?sort=year">
459	#{post.reviewWinner.reviewRanking + 1} in {post.reviewWinner.reviewYear} Review
460	</Link>
461	</div>
462	);
463
464	const imagePreviewAndCrop = (userIsAdminOrMod(currentUser) &&	×
465	<div className={classes.rightSectionBelowBottomRow}>
466	<div {...eventHandlers}>
467	<div className={classes.changeImageBox}>Change image</div>
468	<div className={classes.changeImageBox} onClick={toggleImageFlip}>Flip image</div>
469	<LWPopper open={hover} anchorEl={anchorEl} placement="bottom-start" clickable={true}>
470	<div>
471	<SplashHeaderImageOptions post={post} />
472	</div>
473	</LWPopper>
474	</div>
475	<div className={classes.rightSectionBelowBottomRow}>
476	<ImageCropPreview imgRef={imgRef} setCropPreview={setCropPreview} flipped={imageFlipped} />
477	</div>
478	</div>
479	);
480
481	const topRightSection = (
482	<div className={classes.rightSection}>	×
483	<AnalyticsContext pageSectionContext="tagHeader">
484	<div className={classes.rightSectionTopRow}>
485	<FooterTagList post={post} hideScore useAltAddTagButton hideAddTag={false} appendElement={postActionsButton} align="right" />
486	</div>
487	</AnalyticsContext>
488	<div className={classes.rightSectionBottomRow}>
489	<PostsSplashPageHeaderVote post={post} votingSystem={votingSystem} />
490	</div>
491	{imagePreviewAndCrop}
492	</div>
493	);
494
495
496	const reviewContainer = (
497	<div className={classes.reviewContainer} onMouseLeave={() => {	×
498	setSelectedReview(null);	×
499	}}>
500	{selectedReview && <div className={classes.reviewPreviewContainer}>	×
501	<div className={classes.reviewPreview}>
502	<div className={classes.reviewPreviewAuthor}>
503	<UsersName user={selectedReview.user} />
504	</div>
505	<div className={classes.reviewPreviewBody}>
506	<CommentBody comment={selectedReview} />
507	</div>
508	</div>
509	</div>}
510	<div className={classes.reviews}>
511	{reviews && reviews.length > 0 && reviews.map(review => <ReviewPill key={review._id} review={review} classes={classes} setReview={setSelectedReview} />)}	×
512	</div>
513	</div>
514	);
515
516	const centralSection = (
517	<div className={classes.centralSection}>	×
518	<h1 className={classNames(classes.title, { [classes.titleSmaller]: post.title.length > 80 })}>
519	{post.title}
520	</h1>
521	<div className={classes.authors}>
522	<span>
523	<UsersName user={post.user} />
524	{!!post.coauthors?.length ? ', ' : ''}	×
525	</span>
526	{post.coauthors?.map((coauthor, i) =>	×
527	<span key={`coauthor${coauthor._id}`}>	×
528	<UsersName user={coauthor} />
529	{i < post.coauthors.length - 1 ? ', ' : ''}	×
530	</span>
531	)}
532	</div>
533	</div>
534	);
535
536	return <div className={classNames(classes.root, {[classes.fadeOut]: !visible, [classes.fadeIn]: visible})} ref={observerRef} >	×
537	{
538	/*
539	* We have two copies of the image to implement crop preview functionality using masking and z-indexes
540	* The important bits are that when the crop element is enabled, it "dims" everything outside of the picker
541	* Also, when the picker is moved over the title/author/etc, they don't show up in the preview, just the underlying image
542	* This doesn't work with the Layout header, but we don't care that much /shrug
543	*/
544	}
545	<div ref={backgroundImgWrapperRef} className={classNames(classes.backgroundImageWrapper, { [classes.cropPreviewEnabledForeground]: cropPreviewEnabled })}>
546	<img src={backgroundImage} className={classes.backgroundImage} alt="Background Image" />
547	</div>
548	{currentUser?.isAdmin && <div ref={backgroundImgCropPreviewRef} className={classNames(classes.backgroundImageWrapper, { [classes.cropPreviewEnabledBackground]: cropPreviewEnabled })}>	×
549	<img ref={imgRef} src={backgroundImage} className={classes.backgroundImageCropPreview} alt="Background Image" />
550	</div>}
551	<div className={classes.top}>
552	{topLeftSection}
553	<LWPostsPageHeaderTopRight post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} />
554	</div>
555	{reviewContainer}
556	{centralSection}
557	</div>
558	}
559
560	const ReviewPill = ({review, classes, setReview}: {review: CommentsList, classes: ClassesType<typeof styles>, setReview: (r: CommentsList \| null) => void}) => {	1✔
561	return <HashLink to={`#${review._id}`}>	×
562	<div className={classes.review} onMouseOver={() => setReview(review)}>	×
563	<div className={classes.reviewScore}>
564	{review.baseScore}
565	</div>
566	<div className={classes.reviewAuthor}>	×
567	{review?.user?.displayName \|\| "Anonymous"}	×
568	</div>
569	</div>
570	</HashLink>
571	}
572
573	const PostsPageSplashHeaderComponent = registerComponent(	1✔
574	'PostsPageSplashHeader', PostsPageSplashHeader, {styles}
575	);
576
577	declare global {
578	interface ComponentTypes {
579	PostsPageSplashHeader: typeof PostsPageSplashHeaderComponent,
580	}
581	}

ForumMagnum / ForumMagnum / 10205141488

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