Add lyrics annotations (#73)

shared/locales/be.json

@@ -394,6 +394,7 @@
         "video": "Відэа",
         "recommendations": "Рэкамендацыі",
         "top": "Папулярнае",
+        "lyrics": "Тэксты песень",
         "data": "Дадзеныя"
       },
       "profile": {
@@ -446,6 +447,9 @@
         "top": {
           "country": "Краіна па змоўчванні"
         },
+        "lyrics": {
+          "annotations": "Паказваць анатацыі"
+        },
         "data": {
           "cache": {
             "clear": "Ачысціць кэш",

shared/locales/en.json

@@ -394,6 +394,7 @@
         "video": "Video",
         "recommendations": "Recommendations",
         "top": "Top",
+        "lyrics": "Lyrics",
         "data": "Data"
       },
       "profile": {
@@ -446,6 +447,9 @@
         "top": {
           "country": "Default country"
         },
+        "lyrics": {
+          "annotations": "Show annotations"
+        },
         "data": {
           "cache": {
             "clear": "Clear cache",

shared/locales/ru.json

@@ -394,6 +394,7 @@
         "video": "Видео",
         "recommendations": "Рекомендации",
         "top": "Популярное",
+        "lyrics": "Тексты песен",
         "data": "Данные"
       },
       "profile": {
@@ -446,6 +447,9 @@
         "top": {
           "country": "Страна по умолчанию"
         },
+        "lyrics": {
+          "annotations": "Показывать аннотации"
+        },
         "data": {
           "cache": {
             "clear": "Очистить кэш",

src/assets/styles/Main.sass

@@ -889,9 +889,9 @@ p
   @extend .no-margin
   margin-left: 0.25em !important
 
-.main-artist-popup
+.main-artist-popup,
+.main-annotation-popup
   @extend .overflow-hidden
-  min-height: 100px
   max-width: unset !important
   width: 400px
   &.inverted

src/components/layout/modals/TheSettingsModal/AppSettings.vue

@@ -35,6 +35,7 @@ import QueueOptions from './AppSettings/QueueOptions.vue'
 import VideoOptions from './AppSettings/VideoOptions.vue'
 import RecommendationsOptions from './AppSettings/RecommendationsOptions.vue'
 import TopOptions from './AppSettings/TopOptions.vue'
+import LyricsOptions from './AppSettings/LyricsOptions.vue'
 import DataOptions from './AppSettings/DataOptions.vue'
 
 export default {
@@ -52,6 +53,7 @@ export default {
     VideoOptions,
     RecommendationsOptions,
     TopOptions,
+    LyricsOptions,
     DataOptions
   },
   data () {
@@ -133,6 +135,12 @@ export default {
           component: 'TopOptions',
           isAnonymous: true
         },
+        {
+          nameCode: 'settings.sections.app.lyrics',
+          scope: 'lyrics',
+          component: 'LyricsOptions',
+          isAnonymous: true
+        },
         {
           nameCode:
             'settings.sections.app.data',

src/components/layout/modals/TheSettingsModal/AppSettings/LyricsOptions.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="main-settings-options-block">
+    <AnnotationsOption />
+  </div>
+</template>
+
+<script>
+import AnnotationsOption from './LyricsOptions/AnnotationsOption.vue'
+
+export default {
+  name: 'LyricsOptions',
+  components: {
+    AnnotationsOption
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/layout/modals/TheSettingsModal/AppSettings/LyricsOptions/AnnotationsOption.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="option">
+    <BaseHeader
+      class="option-header"
+      tag="h4"
+      :text="annotationsText"
+    />
+
+    <BaseToggle
+      store-key="lyrics.isWithAnnotations"
+      :is-checked="isLyricsWithAnnotations"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  mapState
+} from 'vuex'
+import BaseHeader from '@/components/BaseHeader.vue'
+import BaseToggle from '@/components/toggles/BaseToggle.vue'
+
+export default {
+  name: 'AnnotationsOption',
+  components: {
+    BaseHeader,
+    BaseToggle
+  },
+  computed: {
+    ...mapState(
+      'lyrics',
+      {
+        isLyricsWithAnnotations: 'isWithAnnotations'
+      }
+    ),
+    annotationsText () {
+      return this.$t(
+        'settings.options.app.lyrics.annotations'
+      )
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/modals/track/BaseTrackLyricsModal.vue

@@ -5,24 +5,23 @@
     :request-track-data="requestTrackData"
   >
     <template #default="slotProps">
-      <div class="main-lyrics-container">
-        <p
-          class="lyrics"
-          v-text="slotProps[scope]"
-        />
-      </div>
+      <ContentSection
+        :lyrics="slotProps[scope]"
+      />
     </template>
   </BaseTrackModalContainer>
 </template>
 
 <script>
 import BaseTrackModalContainer
   from '@/components/containers/modals/track/BaseTrackModalContainer.vue'
+import ContentSection from './BaseTrackLyricsModal/ContentSection.vue'
 
 export default {
   name: 'BaseTrackLyricsModal',
   components: {
-    BaseTrackModalContainer
+    BaseTrackModalContainer,
+    ContentSection
   },
   props: {
     trackId: Number

src/components/modals/track/BaseTrackLyricsModal/ContentSection.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="main-lyrics-container">
+    <p class="lyrics">
+      <LyricItem
+        v-for="(lyricData, index) in lyrics"
+        :key="index"
+        :lyric-data="lyricData"
+      />
+    </p>
+  </div>
+</template>
+
+<script>
+import LyricItem from './ContentSection/LyricItem.vue'
+
+export default {
+  name: 'ContentSection',
+  components: {
+    LyricItem
+  },
+  props: {
+    lyrics: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/modals/track/BaseTrackLyricsModal/ContentSection/LyricItem.vue

@@ -0,0 +1,37 @@
+<template>
+  <LyricAnnotationItem
+    v-if="annotationId"
+    :lyric-data="lyricData"
+  />
+  <span
+    v-else
+    v-text="lyricData"
+  />
+</template>
+
+<script>
+import LyricAnnotationItem from './LyricItem/LyricAnnotationItem.vue'
+
+export default {
+  name: 'LyricItem',
+  components: {
+    LyricAnnotationItem
+  },
+  props: {
+    lyricData: {
+      type: [
+        String,
+        Object
+      ],
+      required: true
+    }
+  },
+  computed: {
+    annotationId () {
+      return this.lyricData.annotation_id
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>