add featured episodes for tbp

package.json

@@ -33,7 +33,7 @@
     "react": "^16.8.6",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.8.6",
-    "react-h5-audio-player": "^2.3.1",
+    "react-h5-audio-player": "^3.0.0",
     "react-markdown": "^4.3.1",
     "react-progressive-image": "^0.6.0",
     "react-redux": "^7.0.3",

src/components/EpisodeListElement.component.jsx

@@ -46,13 +46,11 @@ class EpisodeListElement extends Component {
 
   render() {
     const { date, title, theme, trackId, duration, nowPlayingId, podcast } = this.props
-    console.log(podcast)
     const filteredData = podcasts.filter(element => {
       return element.creator == podcast.author
     })
 
     let featured = 0
-    console.log(filteredData)
     const stringToSearch = filteredData[0].featured
     // console.log(stringToSearch)
     for(let keyword of stringToSearch) {

src/css/Controls.styles.css

@@ -81,7 +81,7 @@
 
 .title {
   position: fixed;
-  bottom: 90px;
+  bottom: 88px;
   padding: 5px;
   background-color: #6d6d6d;
   height: 30px;
@@ -108,9 +108,14 @@
     background-color: #2b2b2b;
   }
 
+  .rhap_volume-container {
+    flex: 0 1 70px;
+  }
+  
+
   .title {
     position: fixed;
-    bottom: 150px;
+    bottom: 148px;
     padding: 5px;
     background-color: #6d6d6d;
     height: 30px;

src/css/NowPlaying.styles.css

@@ -70,9 +70,6 @@
 
 /* ============ Themes ============ */
 
-.NowPlaying-player.light img {
-  border: 3px solid #eee;
-}
 
 .NowPlaying-player.dark .NowPlaying-info h3 {
   color: #eee;

src/data/podcasts.js

@@ -32,7 +32,7 @@ export const podcasts = [
     link: 'https://feeds.simplecast.com/xCQr3ykc',
     img:
       'https://lh3.googleusercontent.com/h-NtM2BbbFddHMNyTGBmGdzge-zqyy9-LCSUnRF8r7st1s6ZIzZM01YFTAcFkvlf8TfF2cptTBSlNUGEVpf_1SM8LPO00tPo6OAKaSDePLu6_TC6IBWSZpVeIr1aTvDXrEwuFqPQ0w=w2400',
-    featured: []
+    featured: ['Wash Your Hands', 'Corey, Dee, and Ray From Paris with COVID-19', "#75-Truman Esmond"]
   },
   {
     category: 'featured',

src/pages/NowPlaying.js

@@ -10,7 +10,7 @@ class NowPlaying extends Component {
   render() {
     const { playStatus, loading } = this.props.player
     const { img, title, podcast } = this.props.player.track
-    console.log(podcast)
+
     const podcastLoading = playStatus === 'PLAYING' && loading
     let podcastImage = ''
 

src/pages/Upload.js

@@ -34,7 +34,8 @@ export const podcasts = [
     name: 'Everything Status',
     link: 'https://feeds-soundcloud-proxy.status.im/users/soundcloud:users:741837922/sounds.rss',
     img:
-      '{img URL}'
+      '{img URL}',
+    featured: []
   },
   ...
 \`\`\`
@@ -43,7 +44,8 @@ export const podcasts = [
 
 ## Known issues
 
-There is an issue with playing HTML5 audio in the background on iOS.
+There is an issue with playing HTML5 audio on iOS. It doesn't work in the background mode and cannot control the volume.
+
 
 <br/>
 <br/>