add youtube

src/components/EpisodeListElement.component.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import moment from 'moment'
 import { connect } from 'react-redux'
 import { setAudio } from '../actions/player'
@@ -61,6 +61,19 @@ class EpisodeListElement extends Component {
       }
     }
 
+    let videoFlag = 0
+    let videoURL = ''
+    const videosToSearch = filteredData[0].videos
+    if (videosToSearch.length !== 0) {
+      for(let video of videosToSearch) {
+        if (video.title === title) {
+          videoFlag = 1
+          videoURL = video.url
+          console.log(videoURL)
+          break;
+        }
+      }
+    }
 
     const isPlaying = trackId === nowPlayingId
     
@@ -69,6 +82,7 @@ class EpisodeListElement extends Component {
     )
 
     return (
+      <div className="episode-container">
       <div className={`EpisodeListElement ${theme}`} title={title}>
         <div
           className='EpisodeListElement-text'
@@ -98,6 +112,10 @@ class EpisodeListElement extends Component {
           )}
         </button>
       </div>
+      <div class="youtube-container">
+        { videoFlag ? <a href={videoURL} target="_blank"><i className="fab fa-youtube youtube" style={{color:'#c4302b'}}></i></a> : ''}
+      </div>
+      </div>
     )
   }
 }

src/css/EpisodeListElement.styles.css

@@ -1,11 +1,11 @@
 /* PODCAST LIST */
 .EpisodeListElement {
-  width: 100%;
   margin: 10px 0;
   padding: 10px;
   display: flex;
   align-items: center;
   margin-right: auto;
+  float: left;
   display: flex;
   align-items: center;
 }
@@ -26,6 +26,7 @@
   padding-right: 25px;
   text-align: left;
   cursor: pointer;
+  width: 80%;
 }
 
 /* PLAY BUTTON */
@@ -37,11 +38,31 @@
   border-radius: 50px;
   height: 40px;
   width: 40px;
-  font-size: 16px;
+  font-size: 38px;
   text-align: center;
   flex-shrink: 0;
 }
 
+.episode-container {
+  display: flex;
+  align-items: center;
+}
+
+.youtube {
+  display: inline-flex;
+  margin-left: 20px;
+  float: left;
+  align-items: center;
+  font-size: 38px;
+  text-align: center;
+}
+
+.youtube-container {
+  padding: 25px 0;
+  float: left;
+  vertical-align: middle;
+}
+
 .EpisodeListElement-play > .material-icons {
   pointer-events: none;
   font-size: 20px;
@@ -106,14 +127,25 @@
 
 @media only screen and (min-width: 1300px) {
   .EpisodeListElement {
-    width: 60%;
+    width: 75%;
+    padding: 0;
+    margin: 25px 0;
+    float: left;
+  }
+}
+
+@media only screen and (max-width: 1299px) {
+  .EpisodeListElement {
+    width: 90%;
     padding: 0;
     margin: 30px 0;
   }
 }
 
+
 @media only screen and (max-width: 600px) {
   .EpisodeListElement {
+    width: 80%;
     padding: 0;
     margin: 30px 0;
   }

src/data/podcasts.js

@@ -14,7 +14,8 @@ export const podcasts = [
     link: 'https://feeds.soundcloud.com/users/soundcloud:users:741837922/sounds.rss',
     img:
       'https://lh3.googleusercontent.com/W5mQLucviakmoHAFldUZbtFkTHw91vbcQk0w8o3woHEm9c4lpaMqi4cmY6bl3HmTSTnCxL5dvwwbDQa0eVGHrT16dhjEQmoAvg1Mk1Gjy-i3QtJjFRk1o5RxaWQ0BDfVn3oTntFF=w2400',
-    featured: []
+    featured: [],
+    videos: []
   },
   {
     category: 'status',
@@ -23,7 +24,8 @@ export const podcasts = [
     link: 'https://feeds.soundcloud.com/users/soundcloud:users:772478986/sounds.rss',
     img:
       'https://lh3.googleusercontent.com/D5bCVgLCmW4s1CRTZsZaK5ad7sCHdMxo7VrVBbbPNgGIN8djhXunatFxwvsY5_RM_h4IroxbzroUlLbZDMNGXWN3TOo5Y6g18cS0Q2IN7r_4TSRrfxOpvtAzLSTDgrBeNCTEpAX32w=w2400',
-    featured: []
+    featured: [],
+    videos: []
   },
   {
     category: 'featured',
@@ -32,7 +34,8 @@ export const podcasts = [
     link: 'https://feeds.simplecast.com/xCQr3ykc',
     img:
       'https://lh3.googleusercontent.com/h-NtM2BbbFddHMNyTGBmGdzge-zqyy9-LCSUnRF8r7st1s6ZIzZM01YFTAcFkvlf8TfF2cptTBSlNUGEVpf_1SM8LPO00tPo6OAKaSDePLu6_TC6IBWSZpVeIr1aTvDXrEwuFqPQ0w=w2400',
-    featured: ['Wash Your Hands', 'Corey, Dee, and Ray From Paris with COVID-19', "#75-Truman Esmond"]
+    featured: ['Wash Your Hands', 'Corey, Dee, and Ray From Paris with COVID-19', "#75-Truman Esmond"],
+    videos: []
   },
   {
     category: 'featured',
@@ -41,7 +44,8 @@ export const podcasts = [
     link: 'https://feeds.simplecast.com/lKmQDG9R',
     img:
       'https://lh3.googleusercontent.com/cwsJClMXMYPuo17tQmeZDYhXI7ZKQta4AUGJ0mKrFaPBpRFssVpxLvzE-eScQ8vdBkTvcB9B5oF_tyY_gQAix-7muSwBfPrj1x5Pfa4r-6TCXJqxg6l8beQ9GVGjlDquy0I_oYlGKg=w2400',
-    featured: ["Status", "The Untold Story", "In Pursuit of the", "Bringing the World", "The Self-Custody Crypto Bank", "Building a Better Proof of Stake", "Understanding the Lasting" ]
+    featured: ["Status", "The Untold Story", "In Pursuit of the", "Bringing the World", "The Self-Custody Crypto Bank", "Building a Better Proof of Stake", "Understanding the Lasting" ],
+    videos: []
   },
   {
     category: 'featured',
@@ -50,6 +54,11 @@ export const podcasts = [
     link: 'https://feeds.soundcloud.com/users/soundcloud:users:80553246/sounds.rss',
     img:
       'https://s3-us-west-2.amazonaws.com/anchor-generated-image-bank/production/podcast_uploaded400/639445/639445-1528081749835-3cb9a831dc539.jpg',
-    featured: ['On Making Web3 Accessible with Jonny Zerah of Status']
+    featured: ['On Making Web3 Accessible with Jonny Zerah of Status'],
+    videos: [
+      { title: 'Onwrd Ep. 31 - On Making Web3 Accessible with Jonny Zerah of Status',
+        url: 'https://youtu.be/V0xgzqejVsQ' 
+      }
+    ]
   }
 ]