Add spotify subscription button to podcast

brianlovin · Dec 7, 2019 · b571c0e · b571c0e
1 parent 0760820
commit b571c0e
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 19 deletions.
diff --git a/public/static/img/subscription_icons/spotify.png b/public/static/img/subscription_icons/spotify.png
diff --git a/src/components/SubscriptionButtons/index.tsx b/src/components/SubscriptionButtons/index.tsx
@@ -73,6 +73,15 @@ export default function SubscriptionButtons(props: Props) {
  </a>
  )}
 
+ {podcast.spotifyUrl && (
+ <a href={podcast.spotifyUrl} target="_blank" rel="noopener noreferrer">
+ <SubscriptionAvatar
+ src="/static/img/subscription_icons/spotify.png"
+ alt="Spotify"
+ />
+ </a>
+ )}
+
  {podcast.rssFeedUrl && (
  <a href={podcast.rssFeedUrl} target="_blank" rel="noopener noreferrer">
  <SubscriptionAvatar
@@ -81,6 +90,7 @@ export default function SubscriptionButtons(props: Props) {
  />
  </a>
  )}
+
  </React.Fragment>
  );
 }
diff --git a/src/components/SubscriptionButtons/style.tsx b/src/components/SubscriptionButtons/style.tsx
@@ -190,7 +190,7 @@ export const SubscriptionsContainer = styled.div`
  border-radius: 0 0 8px 8px;
  display: grid;
  grid-gap: 16px;
- grid-template-columns: repeat(7, 1fr);
+ grid-template-columns: repeat(8, 1fr);
  justify-content: center;
  transition: max-height 0.15s ease-out;
  position: relative;

diff --git a/src/data/podcasts.ts b/src/data/podcasts.ts
@@ -11,6 +11,7 @@ export default [
  overcastUrl: 'https://overcast.fm/itunes947191070',
  pocketCastsUrl: 'http://pca.st/itunes/947191070',
  rssFeedUrl: 'http://simplecast.fm/podcasts/1034/rss',
+ spotifyUrl: 'https://open.spotify.com/show/7kAx8RJce757LXVoX2FIpf?si=u_EJ07bBQKC-86Ypqhyn0A',
  googlePodcastsUrl:
  'https://play.google.com/music/m/Iyvjpq3k44ux2azsmvlxe3cc5by?t=Design_Details',
  castroUrl: 'https://castro.fm/itunes/947191070',

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -23,25 +23,26 @@ export interface SimplecastEpisode {
 };
 
 export interface ConfigPodcast {
- id: number,
- name: string,
- slug: string,
- description: string,
- simplecastId: number,
- artworkUrl: string,
- iTunesUrl: string,
- overcastUrl: string,
- pocketCastsUrl: string,
- rssFeedUrl: string,
- googlePodcastsUrl: string,
- castroUrl: string,
- breakerUrl: string,
- applePodcastId: string,
- twitterUsername: string,
+ id: number;
+ name: string;
+ slug: string;
+ description: string;
+ simplecastId: number;
+ artworkUrl: string;
+ iTunesUrl: string;
+ overcastUrl: string;
+ pocketCastsUrl: string;
+ rssFeedUrl: string;
+ googlePodcastsUrl: string;
+ castroUrl: string;
+ breakerUrl: string;
+ spotifyUrl: string;
+ applePodcastId: string;
+ twitterUsername: string;
  colors: {
- text: string,
- button: string,
- },
+ text: string;
+ button: string;
+ };
 };
 
 export interface DesignDetail {