From c41e4e7a1e80ebace023035352eec1246ce84283 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Thu, 27 Sep 2018 15:31:59 -0300
Subject: [PATCH] Adds cicular spinner around play button when playing slides.

---
 .../components/other/circular-counter.vue     | 59 ++++++-------------
 src/theme-helper/view-mode-slide.vue          |  5 +-
 2 files changed, 19 insertions(+), 45 deletions(-)

diff --git a/src/admin/components/other/circular-counter.vue b/src/admin/components/other/circular-counter.vue
index 8e648dd26..818630bd3 100644
--- a/src/admin/components/other/circular-counter.vue
+++ b/src/admin/components/other/circular-counter.vue
@@ -7,8 +7,8 @@
         <g>
             <circle     
                     id="circle" 
-                    class="circle_animation" 
-                    :style="{ 'stroke-dashoffset': initialOffset }"
+                    class="circle-animation" 
+                    :style="{ 'animation-duration': time + 's' }"
                     r="16" 
                     cy="28" 
                     cx="28" 
@@ -23,48 +23,14 @@
 <script>
 export default {
     name: 'CircularCounter',
-    data() {
-        return {
-            initialOffset: 0,
-            i: -1,
-            interval: null
-        }
-    },
-    computed: {
-        strokeDashOffset() {
-            return this.initialOffset;
-        }
-    },
     props: {
-        time: Number,
-        index: Number
-    },
-    mounted() {
-        // if (this.i == this.time) {  	
-        //     this.initialOffset = 100;
-        // }
-        // this.i++; 
-
-        // this.interval = setInterval(() => {
-        //     if (this.i == this.time) {  	
-        //         this.initialOffset = 100;
-        //     }
-        //     this.i++;  
-        // }, 1000);        
-        this.initialOffset = 200;
-        this.interval  = setInterval(() => {
-            this.initialOffset -= 40;
-            if (this.initialOffset <= -40)
-                this.initialOffset = 200;
-        }, 1000); 
-    },
-    beforeDestroy() {
-        clearInterval(this.interval);
+        time: Number
     }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
 .circular-counter {
     position: relative;
     float: left;
@@ -75,10 +41,19 @@ svg {
     transform: rotate(-90deg);
 }
 
-.circle_animation {
+@keyframes loading-counter {
+    from {
+        stroke-dashoffset: -100;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+.circle-animation {
     stroke-dasharray: 100;
-    stroke-dashoffset: 200;
-    transition: all 0.1s linear;
+    animation-name: loading-counter; 
+    animation-iteration-count: infinite;
 }
 </style>
 
diff --git a/src/theme-helper/view-mode-slide.vue b/src/theme-helper/view-mode-slide.vue
index cedc38a43..3f5b2c842 100644
--- a/src/theme-helper/view-mode-slide.vue
+++ b/src/theme-helper/view-mode-slide.vue
@@ -162,10 +162,9 @@
                                 type="is-secondary" 
                                 size="is-medium"
                                 :icon="isPlaying ? 'pause-circle' : 'play-circle' "/>
-                        <!-- <circular-counter 
+                        <circular-counter 
                                 v-if="isPlaying"
-                                :index="slideIndex"
-                                :time="this.slideTimeout/1000" /> -->
+                                :time="this.slideTimeout/1000" />
                     </button>
                 </section>