From cbff487a0d463b5bd78a9745d0e9c778e1090b35 Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Tue, 22 Sep 2020 20:44:08 +0200
Subject: [PATCH] Add lyrics command; message-container & more;

---
 app.css    |  8 +++++++-
 app.js     | 24 ++++++++++++++++++++++++
 index.html |  4 ++--
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app.css b/app.css
index 25465bb..3cd6f4c 100644
--- a/app.css
+++ b/app.css
@@ -109,4 +109,10 @@ img.message-image {
 
 .fa-check-circle {
 	color: green;
-}
\ No newline at end of file
+}
+
+.message-container {
+	overflow-y: auto;
+	overflow-x: hidden;
+	max-height: 300px
+}
diff --git a/app.js b/app.js
index ff4e9d5..3eca10f 100644
--- a/app.js
+++ b/app.js
@@ -468,6 +468,10 @@ let kara = new Vue({
                 }
             });
 
+            if (this.checkForCommands(message, 'lyrics')) {
+                this.rsaLyrics(this.checkForCommands(message, 'lyrics'));
+            }
+
             if (this.checkForCommands(message, 'quiz')) {
                 this.startQuiz();
             }
@@ -728,6 +732,26 @@ let kara = new Vue({
                 vue.botMessage(response.data.fact);
             })
         },
+        rsaLyrics(searchFor) {
+            let vue = this;
+
+            axios.post('/api/curlJson', {
+                url: 'https://some-random-api.ml/lyrics/?title=' + searchFor.replace(' ', '%20')
+            })
+            .catch((error) => {
+                vue.botMessage("Hmm.. i just can't remember the lyrics, but i love that song! 🎵🎧");
+            })
+            .then((response) => {
+                vue.addImageMessage({
+                    body: "Here you go!<br>" +
+                        "<br>" +
+                        response.data.title + ' from ' + response.data.author + '<br>' +
+                        '<br>' +
+                        response.data.lyrics,
+                    src: response.data.thumbnail.genius
+                });
+            })
+        },
 
         // LocalStorage
         getSavedData() {
diff --git a/index.html b/index.html
index 069ec0a..f06d0e7 100644
--- a/index.html
+++ b/index.html
@@ -36,11 +36,11 @@
         <template v-for="message in messages">
             <div :class="'message' + (message.bot === true ? ' bot-message float-left' : ' user-message float-right') + (message.command ? ' command-message' : '') + (message.me ? ' me-message' : '')" v-if="message.body">
                 <template v-if="message.src">
-                    <a :href="message.src" :data-lightbox="message.body" :data-title="message.body">
+                    <a :href="message.src" data-lightbox="message-images" :data-title="message.body.length < 500 ? message.body : ''">
                         <img :src="message.src" :alt="message.body" class="message-image"/><br/>
                     </a>
                 </template>
-                {{ message.body }}
+                <div v-html="message.body.replace(/(?:\r\n|\r|\n)/g, '<br>')" class="message-container"></div>
             </div>
         </template>
         <div class="message bot-message typing float-left" v-if="isTyping">