10362118812

Committed 13 Aug 2024 01:34AM UTC coverage: 32.039% (+0.02%) from 32.024%

Build # 10362118812

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

audioToggle gets disabled instead of hidden

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4938 of 40214 branches covered (12.28%)

Branch coverage included in aggregate %.

49 of 118 new or added lines in 22 files covered. (41.53%)

4 existing lines in 3 files now uncovered.

28801 of 65093 relevant lines covered (44.25%)

180.32 hits per line

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

18.37

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

import React from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import { AnalyticsContext } from "../../../lib/analyticsEvents";
import { extractVersionsFromSemver } from '../../../lib/editor/utils';
import classNames from 'classnames';
import { getHostname, getProtocol } from './PostsPagePostHeader';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    paddingTop: 110,
    marginBottom: 96,
    [theme.breakpoints.down('xs')]: {
      paddingTop: 16,
      marginBottom: 38
    },
  },
  eventHeader: {
    marginBottom: 0,
  },
  authorAndSecondaryInfo: {
    display: 'flex',
    alignItems: 'center',
    columnGap: 20,
    ...theme.typography.commentStyle,
    flexWrap: 'wrap',
    color: theme.palette.text.dim3,
    marginTop: 12
  },
  authorInfo: {
    maxWidth: "calc(100% - 150px)",
    [theme.breakpoints.down('sm')]: {
      maxWidth: "calc(100% - 60px)",
      fontSize: theme.typography.body2.fontSize,
    },
  },
  feedName: {
    fontSize: theme.typography.body2.fontSize,
    [theme.breakpoints.down('sm')]: {
      display: "none"
    }
  },
  topRight: {
    position: 'absolute',
    right: 8, 
    top: -48,
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
      top: -16,
      marginTop: 8,
      marginBottom: 8
    },
    [theme.breakpoints.down('xs')]: {
      display: 'none'
    }
  },
  audioPlayerWrapper: {
    position: 'absolute',
    right: 8, 
    top: 15,
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
      top: 8,
      right: 8
    }
  },
  sequenceNav: {
    marginBottom: 8,
    marginTop: -22
  },
  eventData: {
    marginTop: 48
  },
  titleSection: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  title: {
    [theme.breakpoints.down('sm')]: {
      marginBottom: 10
    }
  },
  mobileHeaderVote: {
    textAlign: 'center',
    fontSize: 42,
    [theme.breakpoints.up("sm")]: {
      display: 'none'
    }
  },
  date: {
    marginTop: 8,
    marginBottom: 8
  },
  mobileButtons: {
    display: 'flex',
    alignItems: 'center',
    [theme.breakpoints.up('sm')]: {
      display: 'none'
    }
  },
  audioToggle: {
    marginRight: 12,
    display: "flex",
    opacity: 0.75
  }
}); 

/// LWPostsPageHeader: The metadata block at the top of a post page, with
/// title, author, voting, an actions menu, etc.
const LWPostsPageHeader = ({post, showEmbeddedPlayer, toggleEmbeddedPlayer, classes}: {
  post: PostsWithNavigation|PostsWithNavigationAndRevision|PostsListWithVotes,
  showEmbeddedPlayer?: boolean,
  toggleEmbeddedPlayer?: () => void,
  classes: ClassesType<typeof styles>
}) => {
  const {PostsPageTitle, PostsAuthors, LWTooltip, PostsPageDate, CrosspostHeaderIcon, PostsGroupDetails, PostsTopSequencesNav, PostsPageEventData, AddToCalendarButton, GroupLinks, LWPostsPageHeaderTopRight, PostsAudioPlayerWrapper, PostsVote, AudioToggle, PostActionsButton } = Components;
  // eslint-disable-next-line react-hooks/exhaustive-deps

  const rssFeedSource = ('feed' in post) ? post.feed : null;
  const feedLinkDescription = rssFeedSource?.url && getHostname(rssFeedSource.url)
  const feedLink = rssFeedSource?.url && `${getProtocol(rssFeedSource.url)}//${getHostname(rssFeedSource.url)}`;
  const hasMajorRevision = ('version' in post) && extractVersionsFromSemver(post.version).major > 1

  const crosspostNode = post.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere &&
    <CrosspostHeaderIcon post={post} />
  
  // TODO: If we are not the primary author of this post, but it was shared with
  // us as a draft, display a notice and a link to the collaborative editor.

  return <div className={classNames(classes.root, {[classes.eventHeader]: post.isEvent})}>
      {post.group && <PostsGroupDetails post={post} documentId={post.group._id} />}
      <AnalyticsContext pageSectionContext="topSequenceNavigation">
        {('sequence' in post) && !!post.sequence && <div className={classes.sequenceNav}>
          <PostsTopSequencesNav post={post} />
        </div>}
      </AnalyticsContext>
      <div>
        {!post.shortform && <span className={classes.topRight}>
          <LWPostsPageHeaderTopRight post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer}/>
        </span>}
        {post && <span className={classes.audioPlayerWrapper}>
          <PostsAudioPlayerWrapper showEmbeddedPlayer={!!showEmbeddedPlayer} post={post}/>
        </span>}
      </div>
      <div className={classes.titleSection}>
        <div className={classes.title}>
          <PostsPageTitle post={post} />
          <div className={classes.authorAndSecondaryInfo}>
            <div className={classes.authorInfo}>
              <PostsAuthors post={post} pageSectionContext="post_header" />
            </div>
            {crosspostNode}
            <div className={classes.date}>
              <PostsPageDate post={post} hasMajorRevision={hasMajorRevision} />
            </div>
            {rssFeedSource && rssFeedSource.user &&
              <LWTooltip title={`Crossposted from ${feedLinkDescription}`} className={classes.feedName}>
                <a href={feedLink}>{rssFeedSource.nickname}</a>
              </LWTooltip>
            }
            {post.isEvent && <GroupLinks document={post} noMargin />}
            <AddToCalendarButton post={post} label="Add to calendar" hideTooltip />
            <div className={classes.mobileButtons}>
              <div className={classes.audioToggle}>
                <AudioToggle post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
              </div>
              <PostActionsButton post={post} className={classes.postActionsButton} flip />
            </div>
          </div>
        </div>
        <div className={classes.mobileHeaderVote}>
          <PostsVote post={post} />
        </div>
      </div>
      {post.isEvent && <div className={classes.eventData}>
        <PostsPageEventData post={post}/>
      </div>}
  </div>
}

const LWPostsPageHeaderComponent = registerComponent(
  'LWPostsPageHeader', LWPostsPageHeader, {styles}
);

declare global {
  interface ComponentTypes {
    LWPostsPageHeader: typeof LWPostsPageHeaderComponent,
  }
}


1	import React from 'react';	1✔
2	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
3	import { AnalyticsContext } from "../../../lib/analyticsEvents";	1✔
4	import { extractVersionsFromSemver } from '../../../lib/editor/utils';	1✔
5	import classNames from 'classnames';	1✔
6	import { getHostname, getProtocol } from './PostsPagePostHeader';	1✔
7
8	const styles = (theme: ThemeType): JssStyles => ({	1✔
9	root: {
10	paddingTop: 110,
11	marginBottom: 96,
12	[theme.breakpoints.down('xs')]: {
13	paddingTop: 16,
14	marginBottom: 38
15	},
16	},
17	eventHeader: {
18	marginBottom: 0,
19	},
20	authorAndSecondaryInfo: {
21	display: 'flex',
22	alignItems: 'center',
23	columnGap: 20,
24	...theme.typography.commentStyle,
25	flexWrap: 'wrap',
26	color: theme.palette.text.dim3,
27	marginTop: 12
28	},
29	authorInfo: {
30	maxWidth: "calc(100% - 150px)",
31	[theme.breakpoints.down('sm')]: {
32	maxWidth: "calc(100% - 60px)",
33	fontSize: theme.typography.body2.fontSize,
34	},
35	},
36	feedName: {
37	fontSize: theme.typography.body2.fontSize,
38	[theme.breakpoints.down('sm')]: {
39	display: "none"
40	}
41	},
42	topRight: {
43	position: 'absolute',
44	right: 8,
45	top: -48,
46	display: 'flex',
47	[theme.breakpoints.down('sm')]: {
48	top: -16,
49	marginTop: 8,
50	marginBottom: 8
51	},
52	[theme.breakpoints.down('xs')]: {
53	display: 'none'
54	}
55	},
56	audioPlayerWrapper: {
57	position: 'absolute',
58	right: 8,
59	top: 15,
60	display: 'flex',
61	[theme.breakpoints.down('sm')]: {
62	top: 8,
63	right: 8
64	}
65	},
66	sequenceNav: {
67	marginBottom: 8,
68	marginTop: -22
69	},
70	eventData: {
71	marginTop: 48
72	},
73	titleSection: {
74	display: 'flex',
75	alignItems: 'center',
76	justifyContent: 'space-between'
77	},
78	title: {
79	[theme.breakpoints.down('sm')]: {
80	marginBottom: 10
81	}
82	},
83	mobileHeaderVote: {
84	textAlign: 'center',
85	fontSize: 42,
86	[theme.breakpoints.up("sm")]: {
87	display: 'none'
88	}
89	},
90	date: {
91	marginTop: 8,
92	marginBottom: 8
93	},
94	mobileButtons: {
95	display: 'flex',
96	alignItems: 'center',
97	[theme.breakpoints.up('sm')]: {
98	display: 'none'
99	}
100	},
101	audioToggle: {
102	marginRight: 12,
103	display: "flex",
104	opacity: 0.75
105	}
106	});
107
108	/// LWPostsPageHeader: The metadata block at the top of a post page, with
109	/// title, author, voting, an actions menu, etc.
110	const LWPostsPageHeader = ({post, showEmbeddedPlayer, toggleEmbeddedPlayer, classes}: {	1✔
111	post: PostsWithNavigation\|PostsWithNavigationAndRevision\|PostsListWithVotes,
112	showEmbeddedPlayer?: boolean,
113	toggleEmbeddedPlayer?: () => void,
114	classes: ClassesType<typeof styles>
115	}) => {
NEW 116	const {PostsPageTitle, PostsAuthors, LWTooltip, PostsPageDate, CrosspostHeaderIcon, PostsGroupDetails, PostsTopSequencesNav, PostsPageEventData, AddToCalendarButton, GroupLinks, LWPostsPageHeaderTopRight, PostsAudioPlayerWrapper, PostsVote, AudioToggle, PostActionsButton } = Components;	×
117	// eslint-disable-next-line react-hooks/exhaustive-deps
118
NEW 119	const rssFeedSource = ('feed' in post) ? post.feed : null;	×
NEW 120	const feedLinkDescription = rssFeedSource?.url && getHostname(rssFeedSource.url)	×
NEW 121	const feedLink = rssFeedSource?.url && `${getProtocol(rssFeedSource.url)}//${getHostname(rssFeedSource.url)}`;	×
NEW 122	const hasMajorRevision = ('version' in post) && extractVersionsFromSemver(post.version).major > 1	×
123
NEW 124	const crosspostNode = post.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere &&	×
125	<CrosspostHeaderIcon post={post} />
126
127	// TODO: If we are not the primary author of this post, but it was shared with
128	// us as a draft, display a notice and a link to the collaborative editor.
129
NEW 130	return <div className={classNames(classes.root, {[classes.eventHeader]: post.isEvent})}>	×
131	{post.group && <PostsGroupDetails post={post} documentId={post.group._id} />}	×
132	<AnalyticsContext pageSectionContext="topSequenceNavigation">
133	{('sequence' in post) && !!post.sequence && <div className={classes.sequenceNav}>	×
134	<PostsTopSequencesNav post={post} />
135	</div>}
136	</AnalyticsContext>
137	<div>
138	{!post.shortform && <span className={classes.topRight}>	×
139	<LWPostsPageHeaderTopRight post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer}/>
140	</span>}
141	{post && <span className={classes.audioPlayerWrapper}>	×
142	<PostsAudioPlayerWrapper showEmbeddedPlayer={!!showEmbeddedPlayer} post={post}/>
143	</span>}
144	</div>
145	<div className={classes.titleSection}>
146	<div className={classes.title}>
147	<PostsPageTitle post={post} />
148	<div className={classes.authorAndSecondaryInfo}>
149	<div className={classes.authorInfo}>
150	<PostsAuthors post={post} pageSectionContext="post_header" />
151	</div>
152	{crosspostNode}
153	<div className={classes.date}>
154	<PostsPageDate post={post} hasMajorRevision={hasMajorRevision} />
155	</div>
156	{rssFeedSource && rssFeedSource.user &&	×
157	<LWTooltip title={`Crossposted from ${feedLinkDescription}`} className={classes.feedName}>
158	<a href={feedLink}>{rssFeedSource.nickname}</a>
159	</LWTooltip>
160	}
161	{post.isEvent && <GroupLinks document={post} noMargin />}	×
162	<AddToCalendarButton post={post} label="Add to calendar" hideTooltip />
163	<div className={classes.mobileButtons}>
164	<div className={classes.audioToggle}>
165	<AudioToggle post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
166	</div>
167	<PostActionsButton post={post} className={classes.postActionsButton} flip />
168	</div>
169	</div>
170	</div>
171	<div className={classes.mobileHeaderVote}>
172	<PostsVote post={post} />
173	</div>
174	</div>
175	{post.isEvent && <div className={classes.eventData}>	×
176	<PostsPageEventData post={post}/>
177	</div>}
178	</div>
179	}
180
181	const LWPostsPageHeaderComponent = registerComponent(	1✔
182	'LWPostsPageHeader', LWPostsPageHeader, {styles}
183	);
184
185	declare global {
186	interface ComponentTypes {
187	LWPostsPageHeader: typeof LWPostsPageHeaderComponent,
188	}
189	}
190

ForumMagnum / ForumMagnum / 10362118812

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