From e96ac0b454b30237dd1499892ef1a6b4a33a31cb Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Sat, 30 May 2020 11:28:34 -0300
Subject: [PATCH 01/10] Add ConfigEditor structure and styles

---
 src/App.vue                     |   5 +-
 src/components/ConfigEditor.vue | 129 ++++++++++++++++++++++++++++++++
 2 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ConfigEditor.vue

diff --git a/src/App.vue b/src/App.vue
index ef51909..05290a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <ConfigEditor />
     <div class="content">
       <h1 v-text="title" />
       <h2 v-html="stream_title"></h2>
@@ -12,11 +13,13 @@
 
 <script>
 import Clock from "@/components/Clock.vue";
+import ConfigEditor from "@/components/ConfigEditor.vue"
 
 export default {
   name: "App",
   components: {
-    Clock
+    Clock,
+    ConfigEditor
   },
   async mounted() {
     const data = await fetch("./data.json");
diff --git a/src/components/ConfigEditor.vue b/src/components/ConfigEditor.vue
new file mode 100644
index 0000000..f0ecc8b
--- /dev/null
+++ b/src/components/ConfigEditor.vue
@@ -0,0 +1,129 @@
+<template>
+  <form class="config-params">
+    <h2>Editar textos</h2>
+  
+    <label for="title">Título:</label>
+    <textarea id="title" cols="40" rows="5" placeholder="Insira o texto de título"></textarea>
+
+    <label for="title">Subtítulo:</label>
+    <textarea id="title" cols="40" rows="5" placeholder="Insira o texto de subtítulo"></textarea>
+
+    <label for="timer">Tempo (minutos):</label>
+    <input type="number" id="timer">
+
+    <label for="paragraph">Paragrafo:</label>
+    <textarea id="paragraph" cols="40" rows="5" placeholder="Insira o texto de paragrafo"></textarea>
+
+    <input type="submit" value="Salvar" class="btn">
+  </form>
+</template>
+
+<style lang="scss" scoped>
+  .config-params {
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background-color: #262626;
+    padding: 30px;
+    box-shadow: 0 4px 8px rgba($color: #000000, $alpha: 0.4);
+    height: 100vh;
+    overflow-y: scroll;
+    z-index: 999;
+    scrollbar-color: #12A5B7 #444;
+    scrollbar-width: medium;
+
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+      background-color: #444;
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      background-color: #F5F5F5;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #12A5B7;	
+      border-radius: 2px;
+      background-image: -webkit-linear-gradient(45deg,
+      rgba(255, 255, 255, .2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, .2) 50%,
+        rgba(255, 255, 255, .2) 75%,
+        transparent 75%,
+        transparent)
+    }
+
+    &::-webkit-scrollbar {
+      width: 12px;
+    }
+
+    > h2 {
+      text-align: center;
+      font-size: 28px;
+      margin: 0;
+      margin-bottom: 30px;
+
+      &:after {
+        content: "";
+        margin-top: 5px;
+        display: block;
+        height: 2px;
+        background-color: #fff;
+      }
+    }
+
+    > label {
+      display: block;
+      margin-bottom: 10px;
+    }
+
+    > textarea,
+    > input {
+      padding: 10px;
+      box-sizing: border-box;
+      outline: none;
+      border: 2px solid #fff;
+      transition: all .3s ease;
+      border-radius: 4px;
+      color: #333;
+
+      + label {
+        margin-top: 30px;
+      }
+
+      &:active,
+      &:focus {
+        border-color: #EB027E;
+      }
+    }
+
+    > textarea {
+      min-width: 300px;
+      min-height: 100px;
+    }
+
+    > .btn {
+      display: block;
+      margin-top: 60px;
+      margin-left: auto;
+      background-color: #EB027E;
+      color: #fff;
+      font-weight: bold;
+      width: 150px;
+      cursor: pointer;
+      margin-bottom: 60px;
+
+      &:hover {
+        background-color: #AE025E;
+      }
+    }
+  }
+
+  #timer {
+    width: 100px;
+  }
+</style>
\ No newline at end of file

From 7c21ec25ebbc0fee9314bf5f0dc50d112b2e7352 Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Sat, 30 May 2020 11:59:37 -0300
Subject: [PATCH 02/10] Add hotkeys to open and close ConfigEditor

---
 src/App.vue                     | 15 ++++++++--
 src/components/ConfigEditor.vue | 49 ++++++++++++++++++++++++---------
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 05290a7..1dd3f40 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <ConfigEditor />
+    <ConfigEditor :show="isConfigEditorVisible"/>
     <div class="content">
       <h1 v-text="title" />
       <h2 v-html="stream_title"></h2>
@@ -27,18 +27,29 @@ export default {
     this.stream_title = config["stream-title"];
     this.stream_subtitle = config["stream-subtitle"];
     this.stream_paragraph = config["stream-paragraph"];
+
+    window.addEventListener('keydown', event => {
+      this.toggleConfigEditor(event)
+    })
   },
   data() {
     return {
       stream_title: "",
       stream_subtitle: "",
-      stream_paragraph: ""
+      stream_paragraph: "",
+      isConfigEditorVisible: false
     };
   },
   computed: {
     title() {
       const urlParams = new URLSearchParams(location.search);
       return urlParams.get("title") || "O live coding está começando!";
+    },
+  },
+  methods: {
+    toggleConfigEditor({key, ctrlKey, altKey}) {
+      if(/e/i.test(key) && ctrlKey && altKey) this.isConfigEditorVisible = !this.isConfigEditorVisible
+      if(event.key === 'Escape') this.isConfigEditorVisible = false
     }
   }
 };
diff --git a/src/components/ConfigEditor.vue b/src/components/ConfigEditor.vue
index f0ecc8b..92577e5 100644
--- a/src/components/ConfigEditor.vue
+++ b/src/components/ConfigEditor.vue
@@ -1,23 +1,36 @@
 <template>
-  <form class="config-params">
-    <h2>Editar textos</h2>
-  
-    <label for="title">Título:</label>
-    <textarea id="title" cols="40" rows="5" placeholder="Insira o texto de título"></textarea>
+  <transition name="slide-right" mode="out-in">
+    <form class="config-params" v-if="show">
+      <h2>Editar textos</h2>
+    
+      <label for="title">Título:</label>
+      <textarea id="title" cols="40" rows="5" placeholder="Insira o texto de título"></textarea>
 
-    <label for="title">Subtítulo:</label>
-    <textarea id="title" cols="40" rows="5" placeholder="Insira o texto de subtítulo"></textarea>
+      <label for="title">Subtítulo:</label>
+      <textarea id="title" cols="40" rows="5" placeholder="Insira o texto de subtítulo"></textarea>
 
-    <label for="timer">Tempo (minutos):</label>
-    <input type="number" id="timer">
+      <label for="timer">Tempo (minutos):</label>
+      <input type="number" id="timer">
 
-    <label for="paragraph">Paragrafo:</label>
-    <textarea id="paragraph" cols="40" rows="5" placeholder="Insira o texto de paragrafo"></textarea>
+      <label for="paragraph">Paragrafo:</label>
+      <textarea id="paragraph" cols="40" rows="5" placeholder="Insira o texto de paragrafo"></textarea>
 
-    <input type="submit" value="Salvar" class="btn">
-  </form>
+      <input type="submit" value="Salvar" class="btn">
+    </form>
+  </transition>
 </template>
 
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
   .config-params {
     box-sizing: border-box;
@@ -126,4 +139,14 @@
   #timer {
     width: 100px;
   }
+
+  .slide-right-enter,
+  .slide-right-leave-to {
+    transform: translateX(-100%);
+  }
+
+  .slide-right-enter-active,
+  .slide-right-leave-active {
+    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  }
 </style>
\ No newline at end of file

From 95a79af5d61c3e0bfbe82525b08450ff39dd26b4 Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Sat, 30 May 2020 14:44:29 -0300
Subject: [PATCH 03/10] Add data binding between between components

---
 src/App.vue                     |  44 +++++++------
 src/components/Clock.vue        |  25 +++++--
 src/components/ConfigEditor.vue | 112 +++++++++++++++++++++++++++-----
 3 files changed, 140 insertions(+), 41 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1dd3f40..134afde 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,24 @@
 <template>
   <div id="app">
-    <ConfigEditor :show="isConfigEditorVisible"/>
+    <ConfigEditor 
+      :show="isConfigEditorVisible" 
+      :title="title"
+      @update:title="title = $event"
+      :streamTitle="streamTitle"
+      @update:streamTitle="streamTitle = $event"
+       :streamParagraph="streamParagraph"
+      @update:streamSubtitle="streamSubtitle = $event"
+      :streamSubtitle="streamSubtitle"
+      @update:streamParagraph="streamParagraph = $event"
+      :timerInitialValue="timerInitialValue"
+      @update:timerInitialValue="timerInitialValue = $event"
+    />
     <div class="content">
       <h1 v-text="title" />
-      <h2 v-html="stream_title"></h2>
-      <h3 v-html="stream_subtitle"></h3>
-      <Clock />
-      <p v-html="stream_paragraph"></p>
+      <h2 v-html="streamTitle"></h2>
+      <h3 v-html="streamSubtitle"></h3>
+      <Clock :timerInitialValue="timerInitialValue" :isFrozen="isConfigEditorVisible"/>
+      <p v-html="streamParagraph"></p>
     </div>
   </div>
 </template>
@@ -22,30 +34,20 @@ export default {
     ConfigEditor
   },
   async mounted() {
-    const data = await fetch("./data.json");
-    const config = await data.json();
-    this.stream_title = config["stream-title"];
-    this.stream_subtitle = config["stream-subtitle"];
-    this.stream_paragraph = config["stream-paragraph"];
-
     window.addEventListener('keydown', event => {
       this.toggleConfigEditor(event)
     })
   },
   data() {
     return {
-      stream_title: "",
-      stream_subtitle: "",
-      stream_paragraph: "",
-      isConfigEditorVisible: false
+      title: "O live coding está começando",
+      streamTitle: "🐵 Hoje: Criando um Timer com Vue.js + Novos MEMEs no Canal",
+      streamSubtitle: "#Hashtag no Chat vira GIF na Live!",
+      streamParagraph: "Enquanto você espera, <strong>apresente-se</strong> no chat, <strong>pergunte</strong> o que quiser e tente <strong>responder</strong> as perguntas dos amigos!",
+      isConfigEditorVisible: true,
+      timerInitialValue: 10
     };
   },
-  computed: {
-    title() {
-      const urlParams = new URLSearchParams(location.search);
-      return urlParams.get("title") || "O live coding está começando!";
-    },
-  },
   methods: {
     toggleConfigEditor({key, ctrlKey, altKey}) {
       if(/e/i.test(key) && ctrlKey && altKey) this.isConfigEditorVisible = !this.isConfigEditorVisible
diff --git a/src/components/Clock.vue b/src/components/Clock.vue
index 3eae958..a320682 100644
--- a/src/components/Clock.vue
+++ b/src/components/Clock.vue
@@ -5,6 +5,10 @@
 </template>
 <script>
 export default {
+  props: {
+    timerInitialValue: { type: Number, default: 10 },
+    isFrozen: { type: Boolean, default: false }
+  },
   data() {
     return {
       minutes: 0,
@@ -13,11 +17,24 @@ export default {
     };
   },
   mounted() {
-    const urlParams = new URLSearchParams(location.search);
-    const urlMinutes = urlParams.get("minutes");
-    this.minutes = Number(urlMinutes) || 10;
-    this.interval = setInterval(this.countDown, 1000);
+    this.minutes = this.timerInitialValue
+    if(!this.isFrozen) {
+      this.interval = setInterval(this.countDown, 1000);
+    }
   },
+  watch: {
+    isFrozen(val) {
+      if(!val) {
+        this.interval = setInterval(this.countDown, 1000);
+      } else {
+        clearInterval(this.interval)
+      }
+    },
+    timerInitialValue(newVal) {
+      this.minutes = newVal || 1
+      this.seconds = 0
+    }
+  },  
   methods: {
     countDown() {
       // Se minutos e segundos chegaram ao zero, retorna.
diff --git a/src/components/ConfigEditor.vue b/src/components/ConfigEditor.vue
index 92577e5..1cdd0ca 100644
--- a/src/components/ConfigEditor.vue
+++ b/src/components/ConfigEditor.vue
@@ -1,19 +1,51 @@
 <template>
-  <transition name="slide-right" mode="out-in">
-    <form class="config-params" v-if="show">
+  <transition name="slide-right" mode="out-in" appear>
+    <form class="config-params" v-if="show" @submit.prevent="">
       <h2>Editar textos</h2>
     
       <label for="title">Título:</label>
-      <textarea id="title" cols="40" rows="5" placeholder="Insira o texto de título"></textarea>
-
-      <label for="title">Subtítulo:</label>
-      <textarea id="title" cols="40" rows="5" placeholder="Insira o texto de subtítulo"></textarea>
-
-      <label for="timer">Tempo (minutos):</label>
-      <input type="number" id="timer">
+      <textarea   
+        id="title" 
+        cols="40" 
+        rows="5" 
+        placeholder="Insira o texto de título"
+        v-model="editorTitle"
+      ></textarea>
+
+      <label for="stream-title">Título da live:</label>
+      <textarea 
+        id="stream-title" 
+        cols="40" 
+        rows="5"
+        placeholder="Insira um título para a live"
+        v-model="editorStreamTitle"
+      ></textarea>
+
+      <label for="title">Subtítulo da live:</label>
+      <textarea 
+        id="title" 
+        cols="40" 
+        rows="5" 
+        placeholder="Insira o texto de subtítulo"
+        v-model="editorStreamSubtitle"
+      ></textarea>
+
+      <label for="timer">Contagem regressiva (minutos):</label>
+      <input 
+        type="number" 
+        id="timer" 
+        v-model="timerValue"
+        min="1"
+      >
 
       <label for="paragraph">Paragrafo:</label>
-      <textarea id="paragraph" cols="40" rows="5" placeholder="Insira o texto de paragrafo"></textarea>
+      <textarea 
+        id="paragraph" 
+        cols="40" 
+        rows="5" 
+        placeholder="Insira o texto de paragrafo"
+        v-model="editorStreamParagraph"
+      ></textarea>
 
       <input type="submit" value="Salvar" class="btn">
     </form>
@@ -23,9 +55,56 @@
 <script>
 export default {
   props: {
-    show: {
-      type: Boolean,
-      default: false
+    show: { type: Boolean, default: false },
+    title: { type: String, default: ""},
+    streamTitle: { type: String, default: ""},
+    streamSubtitle: { type: String, default: ""},
+    streamParagraph: { type: String, default: ""},
+    timerInitialValue: { type: Number, default: 10 }
+  },
+  data: () => ({
+    updatedTimerValue: 0
+  }),
+  computed: {
+    editorTitle: {
+      get() {
+        return this.title
+      },
+      set(val) {
+        this.$emit("update:title", val)
+      }
+    },
+    editorStreamTitle: {
+      get() {
+        return this.streamTitle
+      },
+      set(val) {
+        this.$emit("update:streamTitle", val)
+      }
+    },
+    editorStreamParagraph: {
+      get() {
+        return this.streamParagraph
+      },
+      set(val) {
+        this.$emit("update:streamParagraph", val)
+      }
+    },
+    editorStreamSubtitle: {
+      get() {
+        return this.streamSubtitle
+      },
+      set(val) {
+        this.$emit("update:streamSubtitle", val)
+      }
+    },
+    timerValue: {
+      get() {
+        return this.timerInitialValue
+      },
+      set(val) {
+        this.$emit("update:timerInitialValue", parseInt(val))
+      }
     }
   }
 }
@@ -35,7 +114,7 @@ export default {
   .config-params {
     box-sizing: border-box;
     position: absolute;
-    left: 0;
+    left: -70px;
     top: 0;
     bottom: 0;
     background-color: #262626;
@@ -46,6 +125,7 @@ export default {
     z-index: 999;
     scrollbar-color: #12A5B7 #444;
     scrollbar-width: medium;
+    padding-left: 100px;
 
     &::-webkit-scrollbar-track {
       box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
@@ -137,7 +217,7 @@ export default {
   }
 
   #timer {
-    width: 100px;
+    width: 130px;
   }
 
   .slide-right-enter,
@@ -147,6 +227,6 @@ export default {
 
   .slide-right-enter-active,
   .slide-right-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
 </style>
\ No newline at end of file

From c9ed55f6db21062ad2c102435b1c24ce00a5c83e Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Sat, 30 May 2020 14:55:00 -0300
Subject: [PATCH 04/10] Change component name

---
 src/App.vue                                          | 6 +++---
 src/components/{ConfigEditor.vue => ConfigPanel.vue} | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/{ConfigEditor.vue => ConfigPanel.vue} (98%)

diff --git a/src/App.vue b/src/App.vue
index 134afde..78e5826 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <ConfigEditor 
+    <ConfigPanel 
       :show="isConfigEditorVisible" 
       :title="title"
       @update:title="title = $event"
@@ -25,13 +25,13 @@
 
 <script>
 import Clock from "@/components/Clock.vue";
-import ConfigEditor from "@/components/ConfigEditor.vue"
+import ConfigPanel from "@/components/ConfigPanel.vue"
 
 export default {
   name: "App",
   components: {
     Clock,
-    ConfigEditor
+    ConfigPanel
   },
   async mounted() {
     window.addEventListener('keydown', event => {
diff --git a/src/components/ConfigEditor.vue b/src/components/ConfigPanel.vue
similarity index 98%
rename from src/components/ConfigEditor.vue
rename to src/components/ConfigPanel.vue
index 1cdd0ca..a059545 100644
--- a/src/components/ConfigEditor.vue
+++ b/src/components/ConfigPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="slide-right" mode="out-in" appear>
     <form class="config-params" v-if="show" @submit.prevent="">
-      <h2>Editar textos</h2>
+      <h2>Painel de configuração</h2>
     
       <label for="title">Título:</label>
       <textarea   
@@ -162,7 +162,7 @@ export default {
 
       &:after {
         content: "";
-        margin-top: 5px;
+        margin-top: 10px;
         display: block;
         height: 2px;
         background-color: #fff;

From 1b353933491e242dea4e0677b4f66cf85736b9af Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Sat, 30 May 2020 17:49:22 -0300
Subject: [PATCH 05/10] Move state to vuex

---
 package-lock.json                             |   5 +
 package.json                                  |   3 +-
 src/App.vue                                   |  41 ++-----
 src/assets/img/reset.svg                      |   3 +
 src/components/ConfigPanel.vue                | 102 +++++++++++-------
 .../{Clock.vue => CountdownTimer.vue}         |  24 ++---
 src/components/StreamContent.vue              |  32 ++++++
 src/main.js                                   |  10 +-
 src/store/index.js                            |  13 +++
 src/store/modules/content.js                  |  24 +++++
 src/store/modules/countdownTimer.js           |  26 +++++
 11 files changed, 189 insertions(+), 94 deletions(-)
 create mode 100644 src/assets/img/reset.svg
 rename src/components/{Clock.vue => CountdownTimer.vue} (72%)
 create mode 100644 src/components/StreamContent.vue
 create mode 100644 src/store/index.js
 create mode 100644 src/store/modules/content.js
 create mode 100644 src/store/modules/countdownTimer.js

diff --git a/package-lock.json b/package-lock.json
index 9a0911c..9c0cc34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12149,6 +12149,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz",
+      "integrity": "sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg=="
+    },
     "watchpack": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
diff --git a/package.json b/package.json
index 7375746..9736640 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "core-js": "^3.6.4",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.3.0",
diff --git a/src/App.vue b/src/App.vue
index 78e5826..fa9280c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,53 +1,28 @@
 <template>
   <div id="app">
-    <ConfigPanel 
-      :show="isConfigEditorVisible" 
-      :title="title"
-      @update:title="title = $event"
-      :streamTitle="streamTitle"
-      @update:streamTitle="streamTitle = $event"
-       :streamParagraph="streamParagraph"
-      @update:streamSubtitle="streamSubtitle = $event"
-      :streamSubtitle="streamSubtitle"
-      @update:streamParagraph="streamParagraph = $event"
-      :timerInitialValue="timerInitialValue"
-      @update:timerInitialValue="timerInitialValue = $event"
-    />
-    <div class="content">
-      <h1 v-text="title" />
-      <h2 v-html="streamTitle"></h2>
-      <h3 v-html="streamSubtitle"></h3>
-      <Clock :timerInitialValue="timerInitialValue" :isFrozen="isConfigEditorVisible"/>
-      <p v-html="streamParagraph"></p>
-    </div>
+    <ConfigPanel :isVisible="isConfigEditorVisible"/>
+    <StreamContent />
   </div>
 </template>
 
 <script>
-import Clock from "@/components/Clock.vue";
 import ConfigPanel from "@/components/ConfigPanel.vue"
+import StreamContent from "@/components/StreamContent.vue"
 
 export default {
   name: "App",
+  data: () => ({
+    isConfigEditorVisible: false
+  }),
   components: {
-    Clock,
-    ConfigPanel
+    ConfigPanel,
+    StreamContent
   },
   async mounted() {
     window.addEventListener('keydown', event => {
       this.toggleConfigEditor(event)
     })
   },
-  data() {
-    return {
-      title: "O live coding está começando",
-      streamTitle: "🐵 Hoje: Criando um Timer com Vue.js + Novos MEMEs no Canal",
-      streamSubtitle: "#Hashtag no Chat vira GIF na Live!",
-      streamParagraph: "Enquanto você espera, <strong>apresente-se</strong> no chat, <strong>pergunte</strong> o que quiser e tente <strong>responder</strong> as perguntas dos amigos!",
-      isConfigEditorVisible: true,
-      timerInitialValue: 10
-    };
-  },
   methods: {
     toggleConfigEditor({key, ctrlKey, altKey}) {
       if(/e/i.test(key) && ctrlKey && altKey) this.isConfigEditorVisible = !this.isConfigEditorVisible
diff --git a/src/assets/img/reset.svg b/src/assets/img/reset.svg
new file mode 100644
index 0000000..436b675
--- /dev/null
+++ b/src/assets/img/reset.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.155 14.155" width="20">
+  <path fill="#fff" d="M12.083 1.887A7.054 7.054 0 009.356.19v2.135c.48.239.935.55 1.334.95a5.118 5.118 0 010 7.229 5.123 5.123 0 01-7.229 0 5.121 5.121 0 010-7.229c.005-.006.021-.016.028-.025h.002l1.181 1.179L4.665.685.923.68l1.176 1.176a.118.118 0 01-.027.031 7.078 7.078 0 1010.011 0z"/>
+</svg>
diff --git a/src/components/ConfigPanel.vue b/src/components/ConfigPanel.vue
index a059545..dc0b420 100644
--- a/src/components/ConfigPanel.vue
+++ b/src/components/ConfigPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="slide-right" mode="out-in" appear>
-    <form class="config-params" v-if="show" @submit.prevent="">
+    <form class="config-params" v-if="isVisible" @submit.prevent="">
       <h2>Painel de configuração</h2>
     
       <label for="title">Título:</label>
@@ -9,7 +9,8 @@
         cols="40" 
         rows="5" 
         placeholder="Insira o texto de título"
-        v-model="editorTitle"
+        v-model="title"
+        class="input"
       ></textarea>
 
       <label for="stream-title">Título da live:</label>
@@ -18,7 +19,8 @@
         cols="40" 
         rows="5"
         placeholder="Insira um título para a live"
-        v-model="editorStreamTitle"
+        v-model="streamTitle"
+        class="input"
       ></textarea>
 
       <label for="title">Subtítulo da live:</label>
@@ -27,16 +29,21 @@
         cols="40" 
         rows="5" 
         placeholder="Insira o texto de subtítulo"
-        v-model="editorStreamSubtitle"
+        v-model="streamSubtitle"
+        class="input"
       ></textarea>
 
       <label for="timer">Contagem regressiva (minutos):</label>
-      <input 
-        type="number" 
-        id="timer" 
-        v-model="timerValue"
-        min="1"
-      >
+      <div class="timer-wrapper">
+        <input 
+          type="number" 
+          id="timer" 
+          v-model="initialCountValue"
+          min="1"
+          class="input"
+        >
+        <button class="reset-btn" ></button>
+      </div>
 
       <label for="paragraph">Paragrafo:</label>
       <textarea 
@@ -44,7 +51,8 @@
         cols="40" 
         rows="5" 
         placeholder="Insira o texto de paragrafo"
-        v-model="editorStreamParagraph"
+        v-model="streamParagraph"
+        class="input"
       ></textarea>
 
       <input type="submit" value="Salvar" class="btn">
@@ -55,55 +63,47 @@
 <script>
 export default {
   props: {
-    show: { type: Boolean, default: false },
-    title: { type: String, default: ""},
-    streamTitle: { type: String, default: ""},
-    streamSubtitle: { type: String, default: ""},
-    streamParagraph: { type: String, default: ""},
-    timerInitialValue: { type: Number, default: 10 }
+    isVisible: { type: Boolean, default: true}
   },
-  data: () => ({
-    updatedTimerValue: 0
-  }),
   computed: {
-    editorTitle: {
+    title: {
       get() {
-        return this.title
+        return this.$store.state.content.title
       },
       set(val) {
-        this.$emit("update:title", val)
+        this.$store.commit('content/UPDATE_TITLE', val)
       }
     },
-    editorStreamTitle: {
+    streamTitle: {
       get() {
-        return this.streamTitle
+        return this.$store.state.content.streamTitle
       },
       set(val) {
-        this.$emit("update:streamTitle", val)
+        this.$store.commit('content/UPDATE_STREAM_TITLE', val)
       }
     },
-    editorStreamParagraph: {
+    streamParagraph: {
       get() {
-        return this.streamParagraph
+        return this.$store.state.content.streamParagraph
       },
       set(val) {
-        this.$emit("update:streamParagraph", val)
+        this.$store.commit('content/UPDATE_STREAM_PARAGRAPH', val)
       }
     },
-    editorStreamSubtitle: {
+    streamSubtitle: {
       get() {
-        return this.streamSubtitle
+        return this.$store.state.content.streamSubtitle
       },
       set(val) {
-        this.$emit("update:streamSubtitle", val)
+        this.$store.commit('content/UPDATE_STREAM_SUBTITLE', val)
       }
     },
-    timerValue: {
+    initialCountValue: {
       get() {
-        return this.timerInitialValue
+        return this.$store.state.countdownTimer.initialCountValue
       },
       set(val) {
-        this.$emit("update:timerInitialValue", parseInt(val))
+        this.$store.dispatch('countdownTimer/changeInitialCountValue', val)
       }
     }
   }
@@ -158,7 +158,6 @@ export default {
       text-align: center;
       font-size: 28px;
       margin: 0;
-      margin-bottom: 30px;
 
       &:after {
         content: "";
@@ -172,10 +171,10 @@ export default {
     > label {
       display: block;
       margin-bottom: 10px;
+      margin-top: 30px;
     }
 
-    > textarea,
-    > input {
+    .input {
       padding: 10px;
       box-sizing: border-box;
       outline: none;
@@ -184,9 +183,6 @@ export default {
       border-radius: 4px;
       color: #333;
 
-      + label {
-        margin-top: 30px;
-      }
 
       &:active,
       &:focus {
@@ -209,6 +205,9 @@ export default {
       width: 150px;
       cursor: pointer;
       margin-bottom: 60px;
+      border: 0;
+      border-radius: 4px;
+      height: 40px;
 
       &:hover {
         background-color: #AE025E;
@@ -229,4 +228,25 @@ export default {
   .slide-right-leave-active {
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
+  
+
+  .reset-btn {
+    background-color: #EB027E;
+    border: 0;
+    width: 40px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-left: 10px;
+    background-image: url(../assets/img/reset.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+
+    &:hover {
+      background-color: #AE025E;
+    }
+  }
+
+  .timer-wrapper {
+    display: flex;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/Clock.vue b/src/components/CountdownTimer.vue
similarity index 72%
rename from src/components/Clock.vue
rename to src/components/CountdownTimer.vue
index a320682..6efa09a 100644
--- a/src/components/Clock.vue
+++ b/src/components/CountdownTimer.vue
@@ -3,21 +3,18 @@
     <span v-text="formattedMinutes" />:<span v-text="formattedSeconds" />
   </div>
 </template>
+
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  props: {
-    timerInitialValue: { type: Number, default: 10 },
-    isFrozen: { type: Boolean, default: false }
-  },
   data() {
     return {
-      minutes: 0,
-      seconds: 0,
       interval: null
     };
   },
   mounted() {
-    this.minutes = this.timerInitialValue
+    this.$store.commit('countdownTimer/UPDATE_MINUTES', this.initialCountValue)
     if(!this.isFrozen) {
       this.interval = setInterval(this.countDown, 1000);
     }
@@ -29,10 +26,6 @@ export default {
       } else {
         clearInterval(this.interval)
       }
-    },
-    timerInitialValue(newVal) {
-      this.minutes = newVal || 1
-      this.seconds = 0
     }
   },  
   methods: {
@@ -43,10 +36,10 @@ export default {
       }
       // Controla os segundos
       if (this.seconds == 0) {
-        this.seconds = 59;
-        this.minutes--;
+        this.$store.commit('countdownTimer/UPDATE_SECONDS', 59)
+        this.$store.commit('countdownTimer/UPDATE_MINUTES', this.minutes - 1)
       } else {
-        this.seconds--;
+        this.$store.commit('countdownTimer/UPDATE_SECONDS', this.seconds - 1)
       }
     },
     format(number) {
@@ -54,12 +47,13 @@ export default {
     }
   },
   computed: {
+    ...mapState('countdownTimer', ['minutes', 'seconds', 'initialCountValue']),
     formattedMinutes() {
       return this.format(this.minutes)
     },
     formattedSeconds() {
       return this.format(this.seconds)
-    },
+    }
   }
 };
 </script>
diff --git a/src/components/StreamContent.vue b/src/components/StreamContent.vue
new file mode 100644
index 0000000..54b6d06
--- /dev/null
+++ b/src/components/StreamContent.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="content">
+    <h1 v-text="title" />
+    <h2 v-html="streamTitle"></h2>
+    <h3 v-html="streamSubtitle"></h3>
+    <CountdownTimer :timerInitialValue="initialCountValue" :isFrozen="false"/>
+    <p v-html="streamParagraph"></p>
+  </div>
+</template>
+
+
+<script>
+import { mapState } from 'vuex'
+import CountdownTimer from "@/components/CountdownTimer.vue";
+
+export default {
+  components: {
+    CountdownTimer
+  },
+  computed: {
+    ...mapState('content', [
+      'title', 
+      'streamTitle', 
+      'streamSubtitle', 
+      'streamParagraph'
+    ]),
+    initialCountValue() {
+      return this.$store.state.countdownTimer.initialCountValue
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 63eb05f..b1e8bff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from "vue";
+import App from "./App.vue";
+import store from "./store";
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
   render: h => h(App),
-}).$mount('#app')
+  store
+}).$mount("#app");
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..4b960a1
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,13 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import content from "./modules/content";
+import countdownTimer from "./modules/countdownTimer";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  modules: {
+    content,
+    countdownTimer
+  }
+});
diff --git a/src/store/modules/content.js b/src/store/modules/content.js
new file mode 100644
index 0000000..a30efb0
--- /dev/null
+++ b/src/store/modules/content.js
@@ -0,0 +1,24 @@
+export default {
+  namespaced: true,
+  state: {
+    title: "O live coding está começando",
+    streamTitle: "🐵 Hoje: Criando um Timer com Vue.js + Novos MEMEs no Canal",
+    streamSubtitle: "#Hashtag no Chat vira GIF na Live!",
+    streamParagraph:
+      "Enquanto você espera, <strong>apresente-se</strong> no chat, <strong>pergunte</strong> o que quiser e tente <strong>responder</strong> as perguntas dos amigos!"
+  },
+  mutations: {
+    UPDATE_TITLE(state, title) {
+      state.title = title;
+    },
+    UPDATE_STREAM_TITLE(state, title) {
+      state.streamTitle = title;
+    },
+    UPDATE_STREAM_SUBTITLE(state, subtitle) {
+      state.streamSubtitle = subtitle;
+    },
+    UPDATE_STREAM_PARAGRAPH(state, paragraph) {
+      state.streamParagraph = paragraph;
+    }
+  }
+};
diff --git a/src/store/modules/countdownTimer.js b/src/store/modules/countdownTimer.js
new file mode 100644
index 0000000..38ed955
--- /dev/null
+++ b/src/store/modules/countdownTimer.js
@@ -0,0 +1,26 @@
+export default {
+  namespaced: true,
+  state: {
+    initialCountValue: 10,
+    minutes: 0,
+    seconds: 0
+  },
+  mutations: {
+    UPDATE_INITIAL_COUNT_VALUE(state, value) {
+      state.initialCountValue = value;
+    },
+    UPDATE_MINUTES(state, minutes) {
+      state.minutes = minutes;
+    },
+    UPDATE_SECONDS(state, seconds) {
+      state.seconds = seconds;
+    }
+  },
+  actions: {
+    changeInitialCountValue(ctx, val) {
+      ctx.commit("UPDATE_INITIAL_COUNT_VALUE", val);
+      ctx.commit("UPDATE_MINUTES", val);
+      ctx.commit("UPDATE_SECONDS", 0);
+    }
+  }
+};

From 714c9c2d782c6c84b494c2cb4f3d7d84ed90f544 Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Sat, 30 May 2020 17:59:57 -0300
Subject: [PATCH 06/10] Add count reset button

---
 src/components/ConfigPanel.vue      | 19 ++++++++++++++-----
 src/store/modules/countdownTimer.js |  4 ++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/ConfigPanel.vue b/src/components/ConfigPanel.vue
index dc0b420..416cf2c 100644
--- a/src/components/ConfigPanel.vue
+++ b/src/components/ConfigPanel.vue
@@ -42,7 +42,7 @@
           min="1"
           class="input"
         >
-        <button class="reset-btn" ></button>
+        <button class="reset-btn" @click="resetTimer"></button>
       </div>
 
       <label for="paragraph">Paragrafo:</label>
@@ -106,6 +106,11 @@ export default {
         this.$store.dispatch('countdownTimer/changeInitialCountValue', val)
       }
     }
+  },
+  methods: {
+    resetTimer() {
+      this.$store.dispatch('countdownTimer/resetCount')
+    }
   }
 }
 </script>
@@ -208,9 +213,11 @@ export default {
       border: 0;
       border-radius: 4px;
       height: 40px;
+      border-bottom: 3px solid #AE025E;
+      transition: all 0.3s ease;
 
-      &:hover {
-        background-color: #AE025E;
+      &:active {
+        transform: translateY(1px) scale(0.95);
       }
     }
   }
@@ -240,9 +247,11 @@ export default {
     background-image: url(../assets/img/reset.svg);
     background-repeat: no-repeat;
     background-position: center center;
+    border-bottom: 3px solid #AE025E;
+    transition: all 0.3s ease;
 
-    &:hover {
-      background-color: #AE025E;
+    &:active {
+      transform: translateY(1px) scale(0.95);
     }
   }
 
diff --git a/src/store/modules/countdownTimer.js b/src/store/modules/countdownTimer.js
index 38ed955..b8dbbe7 100644
--- a/src/store/modules/countdownTimer.js
+++ b/src/store/modules/countdownTimer.js
@@ -21,6 +21,10 @@ export default {
       ctx.commit("UPDATE_INITIAL_COUNT_VALUE", val);
       ctx.commit("UPDATE_MINUTES", val);
       ctx.commit("UPDATE_SECONDS", 0);
+    },
+    resetCount(ctx) {
+      ctx.commit("UPDATE_MINUTES", ctx.state.initialCountValue);
+      ctx.commit("UPDATE_SECONDS", 0);
     }
   }
 };

From 7bc13099113dd8100d8de6a6814a57888920fd17 Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Mon, 1 Jun 2020 08:22:50 -0300
Subject: [PATCH 07/10] Frozen timer when config panel is open

---
 src/App.vue                       | 2 +-
 src/components/CountdownTimer.vue | 9 ++++++++-
 src/components/StreamContent.vue  | 8 +++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fa9280c..189c88c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <ConfigPanel :isVisible="isConfigEditorVisible"/>
-    <StreamContent />
+    <StreamContent :isFrozen="isConfigEditorVisible"/>
   </div>
 </template>
 
diff --git a/src/components/CountdownTimer.vue b/src/components/CountdownTimer.vue
index 6efa09a..9287ca4 100644
--- a/src/components/CountdownTimer.vue
+++ b/src/components/CountdownTimer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="{frozen: isFrozen}">
     <span v-text="formattedMinutes" />:<span v-text="formattedSeconds" />
   </div>
 </template>
@@ -8,6 +8,9 @@
 import { mapState } from 'vuex'
 
 export default {
+  props: {
+    isFrozen: {  type: Boolean, default: false }
+  },
   data() {
     return {
       interval: null
@@ -61,4 +64,8 @@ export default {
 div {
   font-size: 70px;
 }
+
+.frozen {
+  color: #12A5B7;
+}
 </style>
diff --git a/src/components/StreamContent.vue b/src/components/StreamContent.vue
index 54b6d06..071a64f 100644
--- a/src/components/StreamContent.vue
+++ b/src/components/StreamContent.vue
@@ -3,7 +3,10 @@
     <h1 v-text="title" />
     <h2 v-html="streamTitle"></h2>
     <h3 v-html="streamSubtitle"></h3>
-    <CountdownTimer :timerInitialValue="initialCountValue" :isFrozen="false"/>
+    <CountdownTimer 
+      :timerInitialValue="initialCountValue" 
+      :isFrozen="isFrozen"
+    />
     <p v-html="streamParagraph"></p>
   </div>
 </template>
@@ -14,6 +17,9 @@ import { mapState } from 'vuex'
 import CountdownTimer from "@/components/CountdownTimer.vue";
 
 export default {
+  props: {
+    isFrozen: { type: Boolean, default: false }
+  },
   components: {
     CountdownTimer
   },

From 84652c0bd6f4b235485a605d58ed4cf33f23573d Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Mon, 1 Jun 2020 09:02:58 -0300
Subject: [PATCH 08/10] Get and set edited texts on localstorage

---
 src/App.vue                       | 17 ++++++++------
 src/components/ConfigPanel.vue    | 25 ++++++++++++--------
 src/components/CountdownTimer.vue |  6 ++---
 src/components/StreamContent.vue  | 16 ++++++-------
 src/store/index.js                |  4 +++-
 src/store/modules/configPanel.js  | 11 +++++++++
 src/store/modules/content.js      | 38 +++++++++++++++++++++++--------
 7 files changed, 79 insertions(+), 38 deletions(-)
 create mode 100644 src/store/modules/configPanel.js

diff --git a/src/App.vue b/src/App.vue
index 189c88c..ae90418 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <ConfigPanel :isVisible="isConfigEditorVisible"/>
-    <StreamContent :isFrozen="isConfigEditorVisible"/>
+    <ConfigPanel />
+    <StreamContent />
   </div>
 </template>
 
@@ -11,9 +11,6 @@ import StreamContent from "@/components/StreamContent.vue"
 
 export default {
   name: "App",
-  data: () => ({
-    isConfigEditorVisible: false
-  }),
   components: {
     ConfigPanel,
     StreamContent
@@ -23,10 +20,16 @@ export default {
       this.toggleConfigEditor(event)
     })
   },
+  computed: {
+    isConfigPainelOpen() {
+      return this.$store.state.configPanel.isConfigPainelOpen
+    }
+  },
   methods: {
     toggleConfigEditor({key, ctrlKey, altKey}) {
-      if(/e/i.test(key) && ctrlKey && altKey) this.isConfigEditorVisible = !this.isConfigEditorVisible
-      if(event.key === 'Escape') this.isConfigEditorVisible = false
+      if(/e/i.test(key) && ctrlKey && altKey) 
+        this.$store.commit('configPanel/CHANGE_IS_CONFIG_PANEL_OPEN', !this.isConfigPainelOpen)
+      if(event.key === 'Escape') this.$store.commit('configPanel/CHANGE_IS_CONFIG_PANEL_OPEN', false)
     }
   }
 };
diff --git a/src/components/ConfigPanel.vue b/src/components/ConfigPanel.vue
index 416cf2c..5063175 100644
--- a/src/components/ConfigPanel.vue
+++ b/src/components/ConfigPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="slide-right" mode="out-in" appear>
-    <form class="config-params" v-if="isVisible" @submit.prevent="">
+    <form class="config-params" v-if="isVisible" @submit.prevent="handleSave">
       <h2>Painel de configuração</h2>
     
       <label for="title">Título:</label>
@@ -42,7 +42,7 @@
           min="1"
           class="input"
         >
-        <button class="reset-btn" @click="resetTimer"></button>
+        <button type="button" class="reset-btn" @click="resetTimer"></button>
       </div>
 
       <label for="paragraph">Paragrafo:</label>
@@ -62,13 +62,13 @@
 
 <script>
 export default {
-  props: {
-    isVisible: { type: Boolean, default: true}
-  },
   computed: {
+    isVisible() {
+      return this.$store.state.configPanel.isConfigPainelOpen
+    },
     title: {
       get() {
-        return this.$store.state.content.title
+        return this.$store.state.content.texts.title
       },
       set(val) {
         this.$store.commit('content/UPDATE_TITLE', val)
@@ -76,7 +76,7 @@ export default {
     },
     streamTitle: {
       get() {
-        return this.$store.state.content.streamTitle
+        return this.$store.state.content.texts.streamTitle
       },
       set(val) {
         this.$store.commit('content/UPDATE_STREAM_TITLE', val)
@@ -84,7 +84,7 @@ export default {
     },
     streamParagraph: {
       get() {
-        return this.$store.state.content.streamParagraph
+        return this.$store.state.content.texts.streamParagraph
       },
       set(val) {
         this.$store.commit('content/UPDATE_STREAM_PARAGRAPH', val)
@@ -92,7 +92,7 @@ export default {
     },
     streamSubtitle: {
       get() {
-        return this.$store.state.content.streamSubtitle
+        return this.$store.state.content.texts.streamSubtitle
       },
       set(val) {
         this.$store.commit('content/UPDATE_STREAM_SUBTITLE', val)
@@ -109,7 +109,12 @@ export default {
   },
   methods: {
     resetTimer() {
-      this.$store.dispatch('countdownTimer/resetCount')
+      this.$store.dispatch('countdownTimer/resetCount') 
+    },
+    handleSave() {
+      this.$store.dispatch('content/setLocalStorageContent').then(() => {
+        this.$store.commit('configPanel/CHANGE_IS_CONFIG_PANEL_OPEN', false)
+      })
     }
   }
 }
diff --git a/src/components/CountdownTimer.vue b/src/components/CountdownTimer.vue
index 9287ca4..02ff5df 100644
--- a/src/components/CountdownTimer.vue
+++ b/src/components/CountdownTimer.vue
@@ -8,9 +8,6 @@
 import { mapState } from 'vuex'
 
 export default {
-  props: {
-    isFrozen: {  type: Boolean, default: false }
-  },
   data() {
     return {
       interval: null
@@ -56,6 +53,9 @@ export default {
     },
     formattedSeconds() {
       return this.format(this.seconds)
+    },
+    isFrozen() {
+      return this.$store.state.configPanel.isConfigPainelOpen
     }
   }
 };
diff --git a/src/components/StreamContent.vue b/src/components/StreamContent.vue
index 071a64f..a5a0ec8 100644
--- a/src/components/StreamContent.vue
+++ b/src/components/StreamContent.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="content">
-    <h1 v-text="title" />
-    <h2 v-html="streamTitle"></h2>
-    <h3 v-html="streamSubtitle"></h3>
+    <h1 v-text="texts.title" />
+    <h2 v-html="texts.streamTitle"></h2>
+    <h3 v-html="texts.streamSubtitle"></h3>
     <CountdownTimer 
       :timerInitialValue="initialCountValue" 
       :isFrozen="isFrozen"
     />
-    <p v-html="streamParagraph"></p>
+    <p v-html="texts.streamParagraph"></p>
   </div>
 </template>
 
@@ -23,12 +23,12 @@ export default {
   components: {
     CountdownTimer
   },
+  created() {
+    this.$store.dispatch('content/getLocalStorageContent')
+  },
   computed: {
     ...mapState('content', [
-      'title', 
-      'streamTitle', 
-      'streamSubtitle', 
-      'streamParagraph'
+      'texts'
     ]),
     initialCountValue() {
       return this.$store.state.countdownTimer.initialCountValue
diff --git a/src/store/index.js b/src/store/index.js
index 4b960a1..cb6e715 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,12 +2,14 @@ import Vue from "vue";
 import Vuex from "vuex";
 import content from "./modules/content";
 import countdownTimer from "./modules/countdownTimer";
+import configPanel from "./modules/configPanel";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   modules: {
     content,
-    countdownTimer
+    countdownTimer,
+    configPanel
   }
 });
diff --git a/src/store/modules/configPanel.js b/src/store/modules/configPanel.js
new file mode 100644
index 0000000..bb5fc76
--- /dev/null
+++ b/src/store/modules/configPanel.js
@@ -0,0 +1,11 @@
+export default {
+  namespaced: true,
+  state: {
+    isConfigPainelOpen: false
+  },
+  mutations: {
+    CHANGE_IS_CONFIG_PANEL_OPEN(state, value) {
+      state.isConfigPainelOpen = value;
+    }
+  }
+};
diff --git a/src/store/modules/content.js b/src/store/modules/content.js
index a30efb0..2ce164c 100644
--- a/src/store/modules/content.js
+++ b/src/store/modules/content.js
@@ -1,24 +1,44 @@
 export default {
   namespaced: true,
   state: {
-    title: "O live coding está começando",
-    streamTitle: "🐵 Hoje: Criando um Timer com Vue.js + Novos MEMEs no Canal",
-    streamSubtitle: "#Hashtag no Chat vira GIF na Live!",
-    streamParagraph:
-      "Enquanto você espera, <strong>apresente-se</strong> no chat, <strong>pergunte</strong> o que quiser e tente <strong>responder</strong> as perguntas dos amigos!"
+    texts: {
+      title: "O live coding está começando",
+      streamTitle:
+        "🐵 Hoje: Criando um Timer com Vue.js + Novos MEMEs no Canal",
+      streamSubtitle: "#Hashtag no Chat vira GIF na Live!",
+      streamParagraph:
+        "Enquanto você espera, <strong>apresente-se</strong> no chat, <strong>pergunte</strong> o que quiser e tente <strong>responder</strong> as perguntas dos amigos!"
+    }
   },
   mutations: {
     UPDATE_TITLE(state, title) {
-      state.title = title;
+      state.texts.title = title;
     },
     UPDATE_STREAM_TITLE(state, title) {
-      state.streamTitle = title;
+      state.texts.streamTitle = title;
     },
     UPDATE_STREAM_SUBTITLE(state, subtitle) {
-      state.streamSubtitle = subtitle;
+      state.texts.streamSubtitle = subtitle;
     },
     UPDATE_STREAM_PARAGRAPH(state, paragraph) {
-      state.streamParagraph = paragraph;
+      state.texts.streamParagraph = paragraph;
+    },
+    UPDATE_TEXTS(state, payload) {
+      state.texts = payload;
+    }
+  },
+  actions: {
+    async getLocalStorageContent({ commit }) {
+      const content = await window.localStorage.getItem("countdown-content");
+      if (content) {
+        commit("UPDATE_TEXTS", JSON.parse(content));
+      }
+    },
+    setLocalStorageContent({ state }) {
+      return window.localStorage.setItem(
+        "countdown-content",
+        JSON.stringify(state.texts)
+      );
     }
   }
 };

From 634ecfef5cad56e7a557c7114709b92ec9c58ef8 Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Mon, 1 Jun 2020 09:18:17 -0300
Subject: [PATCH 09/10] Change btn margin

---
 src/components/ConfigPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ConfigPanel.vue b/src/components/ConfigPanel.vue
index 5063175..44a0158 100644
--- a/src/components/ConfigPanel.vue
+++ b/src/components/ConfigPanel.vue
@@ -208,13 +208,13 @@ export default {
     > .btn {
       display: block;
       margin-top: 60px;
+      margin-bottom: 30px;
       margin-left: auto;
       background-color: #EB027E;
       color: #fff;
       font-weight: bold;
       width: 150px;
       cursor: pointer;
-      margin-bottom: 60px;
       border: 0;
       border-radius: 4px;
       height: 40px;

From 5092e695d1f298f6110284a1f78f3eb4078e0359 Mon Sep 17 00:00:00 2001
From: Diego Lopes <diego-chez@hotmail.com>
Date: Mon, 1 Jun 2020 09:18:25 -0300
Subject: [PATCH 10/10] Update readme

---
 README.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c148cb9..8305dac 100644
--- a/README.md
+++ b/README.md
@@ -12,9 +12,8 @@ Este repositório contém a tela de countdown usada no canal do [Código Falado]
 4. Rode `npm install` para instalar as dependências.
 5. Rode `npm run build` para criar a pasta `dist` contendo o Countdown funcionando.
 6. Adicione a url `http://localhost:5000` no OBS via Browser Source
-7. Você pode definir os minutos e o título da página através de query string na URL. Ex.: `http://localhost:5000/?minutes=15&title=Meu+T%C3%ADtulo+De+Exemplo`
-8. Altere o arquivo `dist/data.json` com o título / subtítulo / parágrafo da sua transmissão **sempre que for começar uma nova Live**.
-9. Rode `npm run stream` para iniciar um servidor local com o Countdown na porta 5000 **sempre que for começar uma nova Live**.
+7. Rode `npm run stream` para iniciar um servidor local com o Countdown na porta 5000 **sempre que for começar uma nova Live**.
+8. Para definir os textos e o tempo da contagem regressiva entre na url `http://localhost:5000` e pressione CTRL + alt + e que um panel de configuração será aberto, para sair basta pressionar as mesmas teclas novamente ou ESC.
 
 # Customizando o Projeto