From 8d29fad72d8f12676e2aec1501a2cb1ac5db39b8 Mon Sep 17 00:00:00 2001
From: Kylart <Kylart.dev@gmail.com>
Date: Mon, 7 Sep 2020 01:40:51 +0200
Subject: [PATCH] Improved track display

---
 .../video/layout/controls/audio.vue           | 15 ++++++++++++--
 .../video/layout/controls/subtitles.vue       | 15 ++++++++++++--
 .../mixins/video/tracks/languageName.js       | 15 ++++++++++++++
 src/renderer/store/modules/lists.js           | 20 +++++++++----------
 4 files changed, 51 insertions(+), 14 deletions(-)
 create mode 100644 src/renderer/mixins/video/tracks/languageName.js

diff --git a/src/renderer/components/video/layout/controls/audio.vue b/src/renderer/components/video/layout/controls/audio.vue
index 47305d9..3f3fe1c 100644
--- a/src/renderer/components/video/layout/controls/audio.vue
+++ b/src/renderer/components/video/layout/controls/audio.vue
@@ -4,7 +4,14 @@
       v-btn.ma-0(v-on='on', small, outlined, icon, color='secondary accent-2')
         v-icon(small) music_note
 
-    v-list(dense).subtitle-lang
+    v-list(
+      dense,
+      subheader
+    )
+      v-subheader Audio Track
+
+      v-divider
+
       v-list-item(
         v-for='track in audios.tracks',
         :key='track.id',
@@ -12,13 +19,17 @@
       )
         v-list-item-title(
           :class="{ 'blue--text': audios.current && track.id === audios.current.id }"
-        ) {{ track.lang }}
+        ) {{ getLangName(track) }}
 </template>
 
 <script>
+import LangName from '@/mixins/video/tracks/languageName.js'
+
 export default {
   name: 'Audios',
 
+  mixins: [LangName],
+
   props: {
     audios: {
       type: Object
diff --git a/src/renderer/components/video/layout/controls/subtitles.vue b/src/renderer/components/video/layout/controls/subtitles.vue
index 01f30f1..f87f404 100644
--- a/src/renderer/components/video/layout/controls/subtitles.vue
+++ b/src/renderer/components/video/layout/controls/subtitles.vue
@@ -4,7 +4,14 @@
       v-btn.ma-0(v-on='on', small, outlined, icon, color='secondary accent-2')
         v-icon(small) subtitles
 
-    v-list(dense).subtitle-lang
+    v-list(
+      dense,
+      subheader
+    )
+      v-subheader Subtitle Track
+
+      v-divider
+
       v-list-item(
         v-for='track in subtitles.tracks',
         :key='track.id',
@@ -12,13 +19,17 @@
       )
         v-list-item-title(
           :class="{ 'blue--text': subtitles.current && track.id === subtitles.current.id }"
-        ) {{ track.lang }}
+        ) {{ getLangName(track) }}
 </template>
 
 <script>
+import LangName from '@/mixins/video/tracks/languageName.js'
+
 export default {
   name: 'Subtitles',
 
+  mixins: [LangName],
+
   props: {
     subtitles: {
       type: Object
diff --git a/src/renderer/mixins/video/tracks/languageName.js b/src/renderer/mixins/video/tracks/languageName.js
new file mode 100644
index 0000000..35262bf
--- /dev/null
+++ b/src/renderer/mixins/video/tracks/languageName.js
@@ -0,0 +1,15 @@
+import { mapState } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState('config', {
+      langToName: 'subtitlesLanguages'
+    })
+  },
+
+  methods: {
+    getLangName (track) {
+      return track.title || this.langToName[track.lang] || track.lang || `Track #${track.id}`
+    }
+  }
+}
diff --git a/src/renderer/store/modules/lists.js b/src/renderer/store/modules/lists.js
index e1b301b..01dd808 100644
--- a/src/renderer/store/modules/lists.js
+++ b/src/renderer/store/modules/lists.js
@@ -30,16 +30,16 @@ export const qualities = [
   '1080p'
 ]
 
-export const subtitlesLanguages = [
-  { value: 'en', text: 'English' },
-  { value: 'ar', text: 'Arabic' },
-  { value: 'ge', text: 'German' },
-  { value: 'sp', text: 'Spanish' },
-  { value: 'fr', text: 'French' },
-  { value: 'it', text: 'Italian' },
-  { value: 'po', text: 'Portuguese' },
-  { value: 'ru', text: 'Russian' }
-]
+export const subtitlesLanguages = {
+  eng: 'English',
+  ara: 'Arabic',
+  ger: 'German',
+  spa: 'Spanish',
+  fre: 'French',
+  ita: 'Italian',
+  por: 'Portuguese',
+  rus: 'Russian'
+}
 
 export const providers = [
   { value: 'mal', text: 'MyAnimeList.net' },