10312690670

Committed 09 Aug 2024 02:33AM UTC coverage: 31.589% (-0.4%) from 32.024%

Build # 10312690670

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

update React.clone comment

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

2864 of 22125 branches covered (12.94%)

Branch coverage included in aggregate %.

47 of 98 new or added lines in 19 files covered. (47.96%)

55 existing lines in 3 files now uncovered.

15067 of 34639 relevant lines covered (43.5%)

338.8 hits per line

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

40.54

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

import React, { useEffect, useMemo } from 'react';
import { registerComponent, Components } from '../../../lib/vulcan-lib';
import { useCookiesWithConsent } from '@/components/hooks/useCookiesWithConsent';
import moment from 'moment';
import { PODCAST_TOOLTIP_SEEN_COOKIE } from '@/lib/cookies/cookies';
import classNames from 'classnames';
import { isLWorAF } from '@/lib/instanceSettings';
import { isFriendlyUI } from '@/themes/forumTheme';

const PODCAST_ICON_SIZE = isFriendlyUI ? 22 : 24;
// some padding around the icon to make it look like a stateful toggle button
const PODCAST_ICON_PADDING = isFriendlyUI ? 4 : 2

const styles = (theme: ThemeType) => ({
  togglePodcastContainer: {
    alignSelf: 'center',
    color: theme.palette.text.dim3,
    height: PODCAST_ICON_SIZE,
  },
  audioIcon: {
    width: PODCAST_ICON_SIZE + (PODCAST_ICON_PADDING * 2),
    height: PODCAST_ICON_SIZE + (PODCAST_ICON_PADDING * 2),
    transform: `translateY(-${PODCAST_ICON_PADDING}px)`,
    padding: PODCAST_ICON_PADDING
  },
  audioNewFeaturePulse: {
    top: PODCAST_ICON_PADDING * 1.5
  },
  audioIconOn: {
    background: theme.palette.icon.dim05,
    borderRadius: theme.borderRadius.small
  }
});

const AudioToggle = ({classes, post, toggleEmbeddedPlayer, showEmbeddedPlayer}: {
  classes: ClassesType<typeof styles>,
  post: PostsWithNavigation|PostsWithNavigationAndRevision|PostsListWithVotes,
  toggleEmbeddedPlayer?: () => void,
  showEmbeddedPlayer?: boolean,
}) => {
  const { LWTooltip, NewFeaturePulse, ForumIcon } = Components;

  const [cookies, setCookie] = useCookiesWithConsent([PODCAST_TOOLTIP_SEEN_COOKIE]);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const cachedTooltipSeen = useMemo(() => cookies[PODCAST_TOOLTIP_SEEN_COOKIE], []);

  useEffect(() => {
    if(!cachedTooltipSeen) {
      setCookie(PODCAST_TOOLTIP_SEEN_COOKIE, true, {
        expires: moment().add(2, 'years').toDate(),
      });
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const audioIcon = <LWTooltip title={'Listen to this post'} className={classes.togglePodcastContainer}>
    <a href="#" onClick={toggleEmbeddedPlayer}>
      <ForumIcon icon="VolumeUp" className={classNames(classes.audioIcon, {[classes.audioIconOn]: showEmbeddedPlayer})} />
    </a>
  </LWTooltip>

  if (!toggleEmbeddedPlayer) {
    return null
  }
  if (cachedTooltipSeen || isLWorAF) {
    return audioIcon
  }
  return (
    <NewFeaturePulse className={classes.audioNewFeaturePulse}>
      {audioIcon}
    </NewFeaturePulse>
  )
}

const AudioToggleComponent = registerComponent('AudioToggle', AudioToggle, {styles});

declare global {
  interface ComponentTypes {
    AudioToggle: typeof AudioToggleComponent
  }
}

1	import React, { useEffect, useMemo } from 'react';	1✔
2	import { registerComponent, Components } from '../../../lib/vulcan-lib';	1✔
3	import { useCookiesWithConsent } from '@/components/hooks/useCookiesWithConsent';	1✔
4	import moment from 'moment';	1✔
5	import { PODCAST_TOOLTIP_SEEN_COOKIE } from '@/lib/cookies/cookies';	1✔
6	import classNames from 'classnames';	1✔
7	import { isLWorAF } from '@/lib/instanceSettings';	1✔
8	import { isFriendlyUI } from '@/themes/forumTheme';	1✔
9
10	const PODCAST_ICON_SIZE = isFriendlyUI ? 22 : 24;	1!
11	// some padding around the icon to make it look like a stateful toggle button
12	const PODCAST_ICON_PADDING = isFriendlyUI ? 4 : 2	1!
13
14	const styles = (theme: ThemeType) => ({	1✔
15	togglePodcastContainer: {
16	alignSelf: 'center',
17	color: theme.palette.text.dim3,
18	height: PODCAST_ICON_SIZE,
19	},
20	audioIcon: {
21	width: PODCAST_ICON_SIZE + (PODCAST_ICON_PADDING * 2),
22	height: PODCAST_ICON_SIZE + (PODCAST_ICON_PADDING * 2),
23	transform: `translateY(-${PODCAST_ICON_PADDING}px)`,
24	padding: PODCAST_ICON_PADDING
25	},
26	audioNewFeaturePulse: {
27	top: PODCAST_ICON_PADDING * 1.5
28	},
29	audioIconOn: {
30	background: theme.palette.icon.dim05,
31	borderRadius: theme.borderRadius.small
32	}
33	});
34
35	const AudioToggle = ({classes, post, toggleEmbeddedPlayer, showEmbeddedPlayer}: {	1✔
36	classes: ClassesType<typeof styles>,
37	post: PostsWithNavigation\|PostsWithNavigationAndRevision\|PostsListWithVotes,
38	toggleEmbeddedPlayer?: () => void,
39	showEmbeddedPlayer?: boolean,
40	}) => {
NEW 41	const { LWTooltip, NewFeaturePulse, ForumIcon } = Components;	×
42
NEW 43	const [cookies, setCookie] = useCookiesWithConsent([PODCAST_TOOLTIP_SEEN_COOKIE]);	×
44	// eslint-disable-next-line react-hooks/exhaustive-deps
NEW 45	const cachedTooltipSeen = useMemo(() => cookies[PODCAST_TOOLTIP_SEEN_COOKIE], []);	×
46
NEW 47	useEffect(() => {	×
NEW 48	if(!cachedTooltipSeen) {	×
NEW 49	setCookie(PODCAST_TOOLTIP_SEEN_COOKIE, true, {	×
50	expires: moment().add(2, 'years').toDate(),
51	});
52	}
53	// eslint-disable-next-line react-hooks/exhaustive-deps
54	}, [])
NEW 55	const audioIcon = <LWTooltip title={'Listen to this post'} className={classes.togglePodcastContainer}>	×
56	<a href="#" onClick={toggleEmbeddedPlayer}>
57	<ForumIcon icon="VolumeUp" className={classNames(classes.audioIcon, {[classes.audioIconOn]: showEmbeddedPlayer})} />
58	</a>
59	</LWTooltip>
60
NEW 61	if (!toggleEmbeddedPlayer) {	×
NEW 62	return null	×
63	}
NEW 64	if (cachedTooltipSeen \|\| isLWorAF) {	×
NEW 65	return audioIcon	×
66	}
NEW 67	return (	×
68	<NewFeaturePulse className={classes.audioNewFeaturePulse}>
69	{audioIcon}
70	</NewFeaturePulse>
71	)
72	}
73
74	const AudioToggleComponent = registerComponent('AudioToggle', AudioToggle, {styles});	1✔
75
76	declare global {
77	interface ComponentTypes {
78	AudioToggle: typeof AudioToggleComponent
79	}
80	}

ForumMagnum / ForumMagnum / 10312690670

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