From 26a9d198edc8112c6c9474dfca6dc1723b53b3a8 Mon Sep 17 00:00:00 2001
From: rzhekova <rzhekova@gmail.com>
Date: Thu, 15 Nov 2018 12:37:07 +0000
Subject: [PATCH] fixes play() error

---
 public/index.html              |  5 +---
 src/App.css                    | 52 +++++++++++-----------------------
 src/components/PodcastField.js | 11 ++++---
 3 files changed, 25 insertions(+), 43 deletions(-)
diff --git a/public/index.html b/public/index.html
index 3ad1c3f..113d2e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,10 +3,7 @@
   <head>
     <meta charset="utf-8" />
 
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
diff --git a/src/App.css b/src/App.css
index dda30b2..7983adb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -175,39 +175,21 @@ input[type="range"]::-moz-range-thumb {
   padding: 0;
 }
 
-/*
-input[type="range"]::-ms-track {
-  height: 8.4px;
-  cursor: pointer;
-  animation: 0.2s;
-  background: transparent;
-  border-color: transparent;
-  border-width: 16px 0;
-  color: transparent;
-}
-input[type="range"]::-ms-fill-lower {
-  background: grey;
-  border: 0.2px solid #010101;
-  border-radius: 2.6px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-}
-input[type="range"]::-ms-fill-upper {
-  background: #3071a9;
-  border: 0.2px solid #010101;
-  border-radius: 2.6px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-}
-input[type="range"]::-ms-thumb {
-  border: 2px solid #000000;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%px;
-  background: #ffffff;
-  cursor: pointer;
-}
-input[type="range"]:focus::-ms-fill-lower {
-  background: #3071a9;
+@media all and (max-width: 500px) {
+  .podcast-description {
+    width: 480px;
+    margin: 15px;
+  }
+
+  .audio-player {
+    padding: 0;
+    width: 480px;
+    margin: 10px 20px;
+    padding-bottom: 10px;
+  }
+
+  ul {
+    width: 80%;
+    margin: 0 auto;
+  }
 }
-input[type="range"]:focus::-ms-fill-upper {
-  background: #367ebd;
-} */
diff --git a/src/components/PodcastField.js b/src/components/PodcastField.js
index 73b104f..bd36cbb 100644
--- a/src/components/PodcastField.js
+++ b/src/components/PodcastField.js
@@ -9,7 +9,7 @@ class PodcastField extends PureComponent {
     show: {},
     episodes: [],
     track_id: "",
-    previousEpisodeIndex: 0,
+    // previousEpisodeIndex: 0,
     currentEpisodeIndex: 0,
     isPlaying: false,
     hasPlayed: true,
@@ -90,7 +90,7 @@ class PodcastField extends PureComponent {
       player.src = `https://api.spreaker.com/v2/episodes/${nextTrackId}/play`;
       this.play();
       this.setState({
-        previousEpisodeIndex: currentEpisodeIndex,
+        // previousEpisodeIndex: currentEpisodeIndex,
         currentEpisodeIndex: ++currentEpisodeIndex,
         track_id: nextTrackId
       });
@@ -113,7 +113,7 @@ class PodcastField extends PureComponent {
       this.play();
 
       this.setState({
-        previousEpisodeIndex: currentEpisodeIndex,
+        // previousEpisodeIndex: currentEpisodeIndex,
         currentEpisodeIndex: --currentEpisodeIndex,
         track_id: prevTrackId
       });
@@ -135,9 +135,12 @@ class PodcastField extends PureComponent {
       });
     }
 
+    setTimeout(function() {
+      player.play();
+    }, 150);
+
     utils.handleProgress();
     utils.handleVolume();
-    player.play();
     this.setState({ isPlaying: true });
 
     player.onended = () => {
