create and handle interval

src/components/Player.vue

@@ -1,26 +1,9 @@
 <template>
-  <div
+  <div id="player" class="flex-column" v-show="selectedTrack._id || selectedRadio._id">
-    id="player"
+    <input type="range" id="slider" min="0" max="100" step="0.1" v-model="selectedTrack.percent" @change="slideChanged" />
-    class="flex-column"
-    v-show="selectedTrack._id || selectedRadio._id"
-  >
-    <input
-      type="range"
-      id="slider"
-      min="0"
-      max="100"
-      step="0.1"
-      v-model="selectedTrack.percent"
-      @change="slideChanged"
-    />
     <div id="playerBar" class="flex-row">
       <div class="flex-row grow">
-        <img
+        <img class="cover pointer" :src="cover" :title="selectedTrack.parent.title" @click="gotoContainer" />
-          class="cover pointer"
-          :src="cover"
-          :title="selectedTrack.parent.title"
-          @click="gotoContainer"
-        />
         <div v-if="selectedTrack._id" class="flex-column">
           <b>{{ selectedTrack.title }}</b>
           from
@@ -28,21 +11,9 @@
         </div>
       </div>
       <div id="playerControls" class="flex-row center">
-        <button
+        <button @click="switchShuffle" title="Shuffle mode" v-if="selectedTrack._id">
-          @click="switchShuffle"
+          <img src="static/icons/media-shuffle-dark.svg" v-show="$store.getters['player/shuffle']" class="small" />
-          title="Shuffle mode"
+          <img src="static/icons/media-consecutive-dark.svg" v-show="$store.getters['player/shuffle'] == false" class="small" />
-          v-if="selectedTrack._id"
-        >
-          <img
-            src="static/icons/media-shuffle-dark.svg"
-            v-show="$store.getters['player/shuffle']"
-            class="small"
-          />
-          <img
-            src="static/icons/media-consecutive-dark.svg"
-            v-show="$store.getters['player/shuffle'] == false"
-            class="small"
-          />
         </button>
         <button @click="prevTrack" title="Back" v-if="selectedTrack._id">
           <awesome-icon icon="backward" />
@@ -54,46 +25,17 @@
         <button @click="nextTrack" title="Forward" v-if="selectedTrack._id">
           <awesome-icon icon="forward" />
         </button>
-        <button
+        <button @click="switchRepeatType" title="Repeat mode" v-if="selectedTrack._id">
-          @click="switchRepeatType"
+          <img src="static/icons/media-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'all'" />
-          title="Repeat mode"
+          <img src="static/icons/media-repeat-song-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'one'" />
-          v-if="selectedTrack._id"
+          <img src="static/icons/media-no-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'none'" />
-        >
-          <img
-            src="static/icons/media-repeat-dark.svg"
-            class="small"
-            v-show="$store.getters['player/repeatType'] == 'all'"
-          />
-          <img
-            src="static/icons/media-repeat-song-dark.svg"
-            class="small"
-            v-show="$store.getters['player/repeatType'] == 'one'"
-          />
-          <img
-            src="static/icons/media-no-repeat-dark.svg"
-            class="small"
-            v-show="$store.getters['player/repeatType'] == 'none'"
-          />
         </button>
       </div>
-      <div
+      <div class="flex-row ma-right hideOnMobilePortrait grow right" v-show="selectedTrack.title">
-        class="flex-row ma-right hideOnMobilePortrait grow right"
-        v-show="selectedTrack.title"
-      >
         {{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}
       </div>
     </div>
-    <audio
+    <audio preload="auto" ref="audioControl" type="audio/mpeg" @ended="nextTrack" @canplay="play" @playing="playing" @durationchange="durationChanged" @timeupdate="timeUpdate" src></audio>
-      preload="auto"
-      ref="audioControl"
-      type="audio/mpeg"
-      @ended="nextTrack"
-      @canplay="play"
-      @playing="playing"
-      @durationchange="durationChanged"
-      @timeupdate="timeUpdate"
-      src
-    ></audio>
   </div>
 </template>
 
@@ -105,7 +47,8 @@ export default {
       audio: {},
       duration: 0,
       progress: 0,
-      interval: 0,
+      intervalProgress: 0,
+      intervalHistory: 0,
       preConvert: false,
     };
   },
@@ -121,7 +64,6 @@ export default {
     play() {
       this.audio.play();
     },
-
     pause() {
       if (!this.audio.paused) {
         this.audio.pause();
@@ -131,11 +73,17 @@ export default {
       this.duration = this.audio.duration;
     },
     playing() {
-      window.clearInterval(this.interval);
+      window.clearInterval(this.intervalProgress);
-      this.interval = setInterval(() => {
+      window.clearInterval(this.intervalHistory);
+
+      this.intervalProgress = setInterval(() => {
         this.progress = this.audio.currentTime;
         this.selectedTrack.percent = (100 / this.duration) * this.progress;
       }, 500);
+
+      this.intervalHistory = setInterval(() => {
+        console.log(this.selectedTrack);
+      }, 10000);
     },
     audioReset() {
       this.audio.pause();
@@ -238,7 +186,8 @@ export default {
       }
     },
     reset() {
-      window.clearInterval(this.interval);
+      window.clearInterval(this.intervalProgress);
+      window.clearInterval(this.intervalHistory);
       if (!this.audio.paused) {
         this.audio.pause();
       }
@@ -409,17 +358,21 @@ export default {
   z-index: 1001;
   box-shadow: 0 0px 4px var(--shadow);
 }
+
 #player .cover {
   width: 52px;
   margin-right: 4px;
 }
+
 #playerBar {
   overflow: hidden;
   max-height: 52px;
 }
+
 #playerBar>div {
   align-items: center;
 }
+
 #playerControls button {
   display: flex;
   padding: 4px 12px;