10311283769

Committed 09 Aug 2024 12:04AM UTC coverage: 32.072% (+0.05%) from 32.024%

Build # 10311283769

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

add back EAF audio positioning

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4937 of 40167 branches covered (12.29%)

Branch coverage included in aggregate %.

49 of 111 new or added lines in 21 files covered. (44.14%)

47 existing lines in 3 files now uncovered.

28806 of 65043 relevant lines covered (44.29%)

180.46 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

// TODO: Import component in components.ts
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	// TODO: Import component in components.ts
2	import React, { useEffect, useMemo } from 'react';	1✔
3	import { registerComponent, Components } from '../../../lib/vulcan-lib';	1✔
4	import { useCookiesWithConsent } from '@/components/hooks/useCookiesWithConsent';	1✔
5	import moment from 'moment';	1✔
6	import { PODCAST_TOOLTIP_SEEN_COOKIE } from '@/lib/cookies/cookies';	1✔
7	import classNames from 'classnames';	1✔
8	import { isLWorAF } from '@/lib/instanceSettings';	1✔
9	import { isFriendlyUI } from '@/themes/forumTheme';	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	});
35
36	const AudioToggle = ({classes, post, toggleEmbeddedPlayer, showEmbeddedPlayer}: {	1✔
37	classes: ClassesType<typeof styles>,
38	post: PostsWithNavigation\|PostsWithNavigationAndRevision\|PostsListWithVotes,
39	toggleEmbeddedPlayer?: () => void,
40	showEmbeddedPlayer?: boolean,
41	}) => {
NEW 42	const { LWTooltip, NewFeaturePulse, ForumIcon } = Components;	×
43
NEW 44	const [cookies, setCookie] = useCookiesWithConsent([PODCAST_TOOLTIP_SEEN_COOKIE]);	×
45	// eslint-disable-next-line react-hooks/exhaustive-deps
NEW 46	const cachedTooltipSeen = useMemo(() => cookies[PODCAST_TOOLTIP_SEEN_COOKIE], []);	×
47
NEW 48	useEffect(() => {	×
NEW 49	if(!cachedTooltipSeen) {	×
NEW 50	setCookie(PODCAST_TOOLTIP_SEEN_COOKIE, true, {	×
51	expires: moment().add(2, 'years').toDate(),
52	});
53	}
54	// eslint-disable-next-line react-hooks/exhaustive-deps
55	}, [])
NEW 56	const audioIcon = <LWTooltip title={'Listen to this post'} className={classes.togglePodcastContainer}>	×
57	<a href="#" onClick={toggleEmbeddedPlayer}>
58	<ForumIcon icon="VolumeUp" className={classNames(classes.audioIcon, {[classes.audioIconOn]: showEmbeddedPlayer})} />
59	</a>
60	</LWTooltip>
61
NEW 62	if (!toggleEmbeddedPlayer) {	×
NEW 63	return null	×
64	}
NEW 65	if (cachedTooltipSeen \|\| isLWorAF) {	×
NEW 66	return audioIcon	×
67	}
NEW 68	return (	×
69	<NewFeaturePulse className={classes.audioNewFeaturePulse}>
70	{audioIcon}
71	</NewFeaturePulse>
72	)
73	}
74
75	const AudioToggleComponent = registerComponent('AudioToggle', AudioToggle, {styles});	1✔
76
77	declare global {
78	interface ComponentTypes {
79	AudioToggle: typeof AudioToggleComponent
80	}
81	}

ForumMagnum / ForumMagnum / 10311283769

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