From 13617b4459cd3ecb48a7bd17413862f714b60635 Mon Sep 17 00:00:00 2001
From: Travis Shivers <ttshivers@gmail.com>
Date: Mon, 28 Sep 2020 00:32:01 -0500
Subject: [PATCH] refactor(playmedia): wrap audio and subtitle details

---
 src/components/PlexMediaPlayDialog.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/PlexMediaPlayDialog.vue b/src/components/PlexMediaPlayDialog.vue
index 230b6472..85861908 100644
--- a/src/components/PlexMediaPlayDialog.vue
+++ b/src/components/PlexMediaPlayDialog.vue
@@ -36,15 +36,18 @@
               </v-list-item-title>
 
               <v-list-item-subtitle>
-                Video Codec: {{ media.videoCodec }} ({{ media.bitrate }}kbps)
+                <span class="text--primary">Video Codec:</span>
+                {{ media.videoCodec }} ({{ media.bitrate }}kbps)
               </v-list-item-subtitle>
 
-              <v-list-item-subtitle>
-                Audio Streams: {{ audioStreams(media.Part[0].Stream) }}
+              <v-list-item-subtitle class="wrap">
+                <span class="text--primary">Audio Streams:</span>
+                {{ audioStreams(media.Part[0].Stream) }}
               </v-list-item-subtitle>
 
-              <v-list-item-subtitle>
-                Subtitles: {{ subtitleStreams(media.Part[0].Stream) }}
+              <v-list-item-subtitle class="wrap">
+                <span class="text--primary">Subtitles:</span>
+                {{ subtitleStreams(media.Part[0].Stream) }}
               </v-list-item-subtitle>
             </v-list-item-content>
 
@@ -107,7 +110,7 @@ export default {
     },
 
     formatStreams(streams) {
-      return streams.map(({ extendedDisplayTitle }) => extendedDisplayTitle)
+      return streams.map(({ displayTitle }) => displayTitle)
         .join(', ');
     },
 
@@ -126,3 +129,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.wrap {
+  white-space: normal !important;
+}
+</style>