Improved track display

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

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

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}`
+    }
+  }
+}

src/renderer/store/modules/lists.js

@@ -30,16 +30,16 @@ export const qualities = [
   '1080p'
 ]
 
-export const subtitlesLanguages = [
+export const subtitlesLanguages = {
-  { value: 'en', text: 'English' },
+  eng: 'English',
-  { value: 'ar', text: 'Arabic' },
+  ara: 'Arabic',
-  { value: 'ge', text: 'German' },
+  ger: 'German',
-  { value: 'sp', text: 'Spanish' },
+  spa: 'Spanish',
-  { value: 'fr', text: 'French' },
+  fre: 'French',
-  { value: 'it', text: 'Italian' },
+  ita: 'Italian',
-  { value: 'po', text: 'Portuguese' },
+  por: 'Portuguese',
-  { value: 'ru', text: 'Russian' }
+  rus: 'Russian'
-]
+}
 
 export const providers = [
   { value: 'mal', text: 'MyAnimeList.net' },