10379569135

Committed 14 Aug 2024 12:58AM UTC coverage: 32.036% (+0.01%) from 32.024%

Build # 10379569135

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

fix PR issues

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4940 of 40224 branches covered (12.28%)

Branch coverage included in aggregate %.

72 of 143 new or added lines in 26 files covered. (50.35%)

6 existing lines in 5 files now uncovered.

28814 of 65140 relevant lines covered (44.23%)

180.16 hits per line

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

42.11

/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';
import { postHasAudioPlayer } from './PostsAudioPlayerWrapper';

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
  },
  audioIconDisabled: {
    opacity: 0.5,
    cursor: 'not-allowed'
  }
});

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, [classes.audioIconDisabled]: !toggleEmbeddedPlayer})} />
    </a>
  </LWTooltip>

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

ForumMagnum / ForumMagnum / 10379569135

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