Hide podcast app launchers on desktop

components/x-podcast-launchers/readme.md

@@ -55,5 +55,6 @@ Feature               | Type     | Required | Notes
 `acastRSSHost`        | String   | Yes      | e.g. 'https://acast.access.com'
 `conceptId`           | String   | Yes      |
 `renderFollowButton`  | Function | No       | Optional render prop for the follow button
+`isApp`               | Boolean  | No       | Defaults to true. Currently only used to hide podcast app launchers on wide screen + desktop where the links do nothing because there is no app to launch.
 
 Additional props such as the `conceptName` may be required by x-follow-button. Documentation for these is available over in the component's readme.

components/x-podcast-launchers/src/PodcastLaunchers.jsx

@@ -48,39 +48,38 @@ class PodcastLaunchers extends Component {
 
 	render() {
 		const { rssUrl } = this.state;
-		const { conceptId, conceptName, csrfToken, isFollowed, renderFollowButton } = this.props
+		const { conceptId, conceptName, csrfToken, isFollowed, renderFollowButton, isApp } = this.props
 		const followButton = typeof renderFollowButton === 'function' ? renderFollowButton : defaultFollowButtonRender;
 
 		return rssUrl && (
 			<div className={styles.container} data-trackable='podcast-launchers'>
 				<h2 className={styles.headingChooseApp}>Subscribe via your installed podcast app</h2>
-				<ul className={styles.podcastAppLinksWrapper}>
-					{generateAppLinks(rssUrl).map(({ name, url, trackingId }) => (
-						<li key={name}>
-							<a
-								href={url}
-								className={styles.podcastAppLink}
-								data-trackable={trackingId}>
-								{name}
-							</a>
-						</li>
-					))}
-
-					<li key='Rss Url' className={styles.rssUrlWrapper}>
-						<span className={rssUrlWrapperInner}>
-							<input value={rssUrl} type='text' readOnly/>
-								<button
-									className={styles.rssUrlCopyButton}
-									onClick={copyToClipboard}
-									data-url={rssUrl}
-									data-trackable='copy-rss'
-									type='button'>
-									Copy RSS
-								</button>
-						</span>
-					</li>
-				</ul>
+					<ul className={styles.podcastAppLinksWrapper}>
+						{generateAppLinks(rssUrl).map(({ name, url, trackingId }) => (
+							<li key={name} className={isApp ? "" : styles.hideAtWide}>
+								<a
+									href={url}
+									className={styles.podcastAppLink}
+									data-trackable={trackingId}>
+									{name}
+								</a>
+							</li>
+						))}
 
+						<li key='Rss Url' className={styles.rssUrlWrapper}>
+							<span className={rssUrlWrapperInner}>
+								<input value={rssUrl} type='text' readOnly/>
+									<button
+										className={styles.rssUrlCopyButton}
+										onClick={copyToClipboard}
+										data-url={rssUrl}
+										data-trackable='copy-rss'
+										type='button'>
+										Copy RSS
+									</button>
+							</span>
+						</li>
+					</ul>
 				<div className={noAppWrapperStyles}>
 					<h2 className={styles.headingNoApp}>Can’t see your podcast app?</h2>
 					<p className={styles.textNoApp}>Get updates for new episodes</p>

components/x-podcast-launchers/src/PodcastLaunchers.scss

@@ -55,10 +55,18 @@ $o-buttons-is-silent: true;
 	margin: 0 0 24px;
 }
 
+
+/*
+ Hide podcast links at a wide screen width. We only do this when the running application
+ isn't the App so that on any native device you'll always be able to launch a podcast app
+*/
+.hidePodcastLinkAtWide {
+		@include oGridRespondTo(L) {
+			display: none;
+		}
+}
+
 .podcastAppLink {
-	@include oGridRespondTo(L) {
-		display: none;
-	}
 
 	@include oButtonsContent($opts: (
 		'type': 'primary',

components/x-podcast-launchers/stories/example.js

@@ -8,7 +8,8 @@ exports.data = {
 	isFollowed: false,
 	csrfToken: 'token',
 	acastRSSHost: 'https://access.acast.com',
-	acastAccessToken: 'abc-123'
+	acastAccessToken: 'abc-123',
+	isApp: false,
 };
 
 // This reference is only required for hot module loading in development