add youtube
This commit is contained in:
parent
53309c8e42
commit
8e479a0c77
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
Loading…
Reference in New Issue