covers shadows edited

css/main.scss

@@ -46,6 +46,39 @@ body {
     height: 300px;
     margin-left: -70px;
     flex-shrink: 0;
+    background: url(../img/1.jpg) no-repeat center;
+    background-size: cover;
+    border-radius: 15px;
+    position: relative;
+    z-index: 2;
+
+    &:before {
+      content: "";
+      background: inherit;
+      width: 100%;
+      height: 100%;
+      box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
+      display: block;
+      z-index: 1;
+      position: absolute;
+      top: 30px;
+      transform: scale(0.9);
+      filter: blur(10px);
+      opacity: 0.9;
+      border-radius: 15px;
+    }
+
+    &:after {
+      content: "";
+      background: inherit;
+      width: 100%;
+      height: 100%;
+      box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
+      display: block;
+      z-index: 2;
+      position: absolute;
+      border-radius: 15px;
+    }
 
     &__img {
       width: 100%;
@@ -96,7 +129,7 @@ body {
 }
 .progress {
   width: 100%;
-  margin-top: -20px;
+  margin-top: -15px;
   &__top {
     display: flex;
     align-items: flex-end;
@@ -115,7 +148,7 @@ body {
     font-weight: 700;
     font-size: 16px;
     opacity: 0.7;
-}
+  }
 }
 .progress__bar {
   height: 6px;

index.html

@@ -20,7 +20,7 @@
       <div class="player">
         <div class="player__top">
           <div class="player-cover">
-            <img src="./img/1.png" alt="" class="player-cover__img" />
+            <!-- <img src="./img/1.png" alt="" class="player-cover__img" /> -->
           </div>
           <div class="player-controls">
             <div class="player-controls__item">
@@ -45,20 +45,21 @@
             </div>
             <div class="player-controls__item -xl js-play" @click="play">
               <svg class="icon">
-                <use xlink:href="./img/icons.svg#icon-play"></use>
+                <use xlink:href="./img/icons.svg#icon-pause" v-if="isTimerPlaying"></use>
+                <use xlink:href="./img/icons.svg#icon-play" v-else></use>
               </svg>
             </div>
           </div>
         </div>
-        <div class="progress" ref="progress" @click="clickProgress">
+        <div class="progress" ref="progress">
           <div class="progress__top">
             <div class="album-info">
               <div class="album-info__name">Muhammed Erdem</div>
               <div class="album-info__track">Back Home</div>
             </div>
             <div class="progress__duration">{{ duration }}</div>
           </div>
-          <div class="progress__bar">
+          <div class="progress__bar" @click="clickProgress">
             <div class="progress__current" :style="{ width : barWidth }"></div>
           </div>
           <div class="progress__time">{{ currentTime }}</div>

scripts/script.js

@@ -1,94 +1,3 @@
-// var player = Vue.component("player", {
-// 	template: `<div>asdasd</div>`
-// });
-// var player = Vue.component("player", {
-// 	template: `<div>asdasd</div>`
-// });
-// window.onload = main;
-// var audio = new Audio();
-// var playPause = document.querySelector(".js-play");
-// var seek = document.querySelector(".seek");
-// function main() {
-//   audio.src = "https://customhtml5video.000webhostapp.com/audio.mp3";
-//   playPause.addEventListener("click", play);
-//   audio.addEventListener("timeupdate", time);
-//   console.log(audio.duration);
-// }
-// function play() {
-//     console.log('play');
-//   if (audio.paused) {
-//     audio.play();
-//     playPause.innerHTML =
-//       '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1"><g id="surface1"><path style=" " d="M 12 8 L 12 42 L 22 42 L 22 8 Z M 28 8 L 28 42 L 38 42 L 38 8 Z "></path></g></svg>';
-//   } else {
-//     audio.pause();
-//     playPause.innerHTML =
-//       '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1"><g id="surface1"><path style=" " d="M 7 5 L 7 19 L 19 12 Z "></path></g></svg>';
-//   }
-// }
-// function time() {
-//   var width = (100 / audio.duration) * audio.currentTime;
-//   seek.style.width = width + "%";
-//   document.querySelector(".circle").style.marginLeft = width + "%";
-//   var durtime = document.querySelector("#dur");
-//   var curtime = document.querySelector("#cur");
-//   var durmin = Math.floor(audio.duration / 60);
-//   var dursec = Math.floor(audio.duration - durmin * 60);
-//   var curmin = Math.floor(audio.currentTime / 60);
-//   var cursec = Math.floor(audio.currentTime - curmin * 60);
-//   if (durmin < 10) {
-//     durmin = "0" + durmin;
-//   }
-//   if (dursec < 10) {
-//     dursec = "0" + dursec;
-//   }
-//   if (curmin < 10) {
-//     curmin = "0" + curmin;
-//   }
-//   if (cursec < 10) {
-//     cursec = "0" + cursec;
-//   }
-//   durtime.innerHTML = durmin + ":" + dursec;
-//   curtime.innerHTML = curmin + ":" + cursec;
-// }
-
-// var timeDrag = false; /* check for drag event */
-// document.querySelector(".seek-con").addEventListener("mousedown", function(e) {
-//   timeDrag = true;
-//   audio.pause();
-//   updatebar(e.pageX);
-// });
-// document.addEventListener("mouseup", function(e) {
-//   if (timeDrag) {
-//     timeDrag = false;
-//     updatebar(e.pageX);
-//     audio.play();
-//   }
-// });
-// document.addEventListener("mousemove", function(e) {
-//   if (timeDrag) {
-//     updatebar(e.pageX);
-//   }
-// });
-// var updatebar = function(x) {
-//   var progress = document.querySelector(".seek-con");
-
-//   //calculate drag position
-//   //and update video currenttime
-//   //as well as progress bar
-//   var maxduration = audio.duration;
-//   var position = x - progress.offset().left;
-//   var percentage = (100 * position) / progress.width();
-//   if (percentage > 100) {
-//     percentage = 100;
-//   }
-//   if (percentage < 0) {
-//     percentage = 0;
-//   }
-//   document.querySelector(".seek").style.width = percentage + "%";
-//   audio.currentTime = (maxduration * percentage) / 100;
-//   document.querySelector(".circle").style.marginLeft = percentage + "%";
-// };
 new Vue({
   el: "#app",
   // components: {
@@ -102,15 +11,17 @@ new Vue({
       barWidth: null,
       duration: null,
       currentTime: null,
-      timeDrag: false
+      isTimerPlaying: false
     };
   },
   methods: {
     play() {
       if (this.audio.paused) {
         this.audio.play();
+        this.isTimerPlaying = true;
       } else {
         this.audio.pause();
+        this.isTimerPlaying = false;
       }
     },
     generateTime() {
@@ -136,31 +47,30 @@ new Vue({
       this.duration = durmin + ":" + dursec;
       this.currentTime = curmin + ":" + cursec;
     },
-    updateBar (x) {
-        this.timeDrag = false;
-        var progress = this.$refs.progress;
-        //calculate drag position
-        //and update video currenttime
-        //as well as progress bar
-        var maxduration = this.audio.duration;
-        var position = x - progress.offsetLeft;
-        var percentage = (100 * position) / progress.offsetWidth;
-        if (percentage > 100) {
-          percentage = 100;
-        }
-        if (percentage < 0) {
-          percentage = 0;
-        }
-        this.barWidth = percentage + "%";
-        this.circleLeft = percentage + "%";
-        this.audio.currentTime = (maxduration * percentage) / 100;
-        this.audio.play();
-      },
-      clickProgress(e) {
-        this.timeDrag = true;
-        this.audio.pause();
-        this.updateBar(e.pageX);
+    updateBar(x) {
+      var progress = this.$refs.progress;
+      //calculate drag position
+      //and update video currenttime
+      //as well as progress bar
+      var maxduration = this.audio.duration;
+      var position = x - progress.offsetLeft;
+      var percentage = (100 * position) / progress.offsetWidth;
+      if (percentage > 100) {
+        percentage = 100;
+      }
+      if (percentage < 0) {
+        percentage = 0;
       }
+      this.barWidth = percentage + "%";
+      this.circleLeft = percentage + "%";
+      this.audio.currentTime = (maxduration * percentage) / 100;
+      this.audio.play();
+    },
+    clickProgress(e) {
+      this.isTimerPlaying = true;
+      this.audio.pause();
+      this.updateBar(e.pageX);
+    }
   },
   mounted() {},
   created() {
@@ -173,5 +83,8 @@ new Vue({
     this.audio.onloadedmetadata = function() {
       vm.generateTime();
     };
+    this.audio.onended = function() {
+      vm.isTimerPlaying = false;
+    };
   }
 });