Config panel

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
 

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",

src/App.vue

@@ -1,41 +1,35 @@
 <template>
   <div id="app">
-    <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>
-    </div>
+    <ConfigPanel />
+    <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",
   components: {
-    Clock
+    ConfigPanel,
+    StreamContent
   },
   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"];
-  },
-  data() {
-    return {
-      stream_title: "",
-      stream_subtitle: "",
-      stream_paragraph: ""
-    };
+    window.addEventListener('keydown', event => {
+      this.toggleConfigEditor(event)
+    })
   },
   computed: {
-    title() {
-      const urlParams = new URLSearchParams(location.search);
-      return urlParams.get("title") || "O live coding está começando!";
+    isConfigPainelOpen() {
+      return this.$store.state.configPanel.isConfigPainelOpen
+    }
+  },
+  methods: {
+    toggleConfigEditor({key, ctrlKey, altKey}) {
+      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)
     }
   }
 };